diff --git a/Makefile b/154/Makefile similarity index 100% rename from Makefile rename to 154/Makefile diff --git a/chapters/acknowledgements.rst b/154/chapters/acknowledgements.rst similarity index 100% rename from chapters/acknowledgements.rst rename to 154/chapters/acknowledgements.rst diff --git a/chapters/ajax.rst b/154/chapters/ajax.rst similarity index 100% rename from chapters/ajax.rst rename to 154/chapters/ajax.rst diff --git a/chapters/bing_search.rst b/154/chapters/bing_search.rst similarity index 100% rename from chapters/bing_search.rst rename to 154/chapters/bing_search.rst diff --git a/chapters/bootstrap.rst b/154/chapters/bootstrap.rst similarity index 100% rename from chapters/bootstrap.rst rename to 154/chapters/bootstrap.rst diff --git a/chapters/cookie.rst b/154/chapters/cookie.rst similarity index 100% rename from chapters/cookie.rst rename to 154/chapters/cookie.rst diff --git a/chapters/css.rst.out b/154/chapters/css.rst.out similarity index 100% rename from chapters/css.rst.out rename to 154/chapters/css.rst.out diff --git a/chapters/css_intro.rst b/154/chapters/css_intro.rst similarity index 100% rename from chapters/css_intro.rst rename to 154/chapters/css_intro.rst diff --git a/chapters/deploy.rst b/154/chapters/deploy.rst similarity index 100% rename from chapters/deploy.rst rename to 154/chapters/deploy.rst diff --git a/chapters/forms.rst b/154/chapters/forms.rst similarity index 100% rename from chapters/forms.rst rename to 154/chapters/forms.rst diff --git a/chapters/game.rst.out b/154/chapters/game.rst.out similarity index 100% rename from chapters/game.rst.out rename to 154/chapters/game.rst.out diff --git a/chapters/git.rst b/154/chapters/git.rst similarity index 100% rename from chapters/git.rst rename to 154/chapters/git.rst diff --git a/chapters/javascript.rst b/154/chapters/javascript.rst similarity index 100% rename from chapters/javascript.rst rename to 154/chapters/javascript.rst diff --git a/chapters/login.rst b/154/chapters/login.rst similarity index 100% rename from chapters/login.rst rename to 154/chapters/login.rst diff --git a/chapters/models.rst b/154/chapters/models.rst similarity index 100% rename from chapters/models.rst rename to 154/chapters/models.rst diff --git a/chapters/models_templates.rst b/154/chapters/models_templates.rst similarity index 100% rename from chapters/models_templates.rst rename to 154/chapters/models_templates.rst diff --git a/chapters/outtakes.rst.out b/154/chapters/outtakes.rst.out similarity index 100% rename from chapters/outtakes.rst.out rename to 154/chapters/outtakes.rst.out diff --git a/chapters/overview.rst b/154/chapters/overview.rst similarity index 100% rename from chapters/overview.rst rename to 154/chapters/overview.rst diff --git a/chapters/requirements.rst b/154/chapters/requirements.rst similarity index 100% rename from chapters/requirements.rst rename to 154/chapters/requirements.rst diff --git a/chapters/setup.rst b/154/chapters/setup.rst similarity index 100% rename from chapters/setup.rst rename to 154/chapters/setup.rst diff --git a/chapters/summary.rst b/154/chapters/summary.rst similarity index 100% rename from chapters/summary.rst rename to 154/chapters/summary.rst diff --git a/chapters/tango.rst b/154/chapters/tango.rst similarity index 100% rename from chapters/tango.rst rename to 154/chapters/tango.rst diff --git a/chapters/tango_too.rst b/154/chapters/tango_too.rst similarity index 100% rename from chapters/tango_too.rst rename to 154/chapters/tango_too.rst diff --git a/chapters/templates.rst b/154/chapters/templates.rst similarity index 100% rename from chapters/templates.rst rename to 154/chapters/templates.rst diff --git a/chapters/templates_static.rst b/154/chapters/templates_static.rst similarity index 100% rename from chapters/templates_static.rst rename to 154/chapters/templates_static.rst diff --git a/chapters/test.rst b/154/chapters/test.rst similarity index 100% rename from chapters/test.rst rename to 154/chapters/test.rst diff --git a/chapters/virtual.rst b/154/chapters/virtual.rst similarity index 100% rename from chapters/virtual.rst rename to 154/chapters/virtual.rst diff --git a/conf.py b/154/conf.py similarity index 100% rename from conf.py rename to 154/conf.py diff --git a/images/admin-populated.png b/154/images/admin-populated.png similarity index 100% rename from images/admin-populated.png rename to 154/images/admin-populated.png diff --git a/images/bbcnews-cookies.png b/154/images/bbcnews-cookies.png similarity index 100% rename from images/bbcnews-cookies.png rename to 154/images/bbcnews-cookies.png diff --git a/images/bing-explore.png b/154/images/bing-explore.png similarity index 100% rename from images/bing-explore.png rename to 154/images/bing-explore.png diff --git a/images/canvas.svg b/154/images/canvas.svg similarity index 100% rename from images/canvas.svg rename to 154/images/canvas.svg diff --git a/images/ch1-rango-cat-page.png b/154/images/ch1-rango-cat-page.png similarity index 100% rename from images/ch1-rango-cat-page.png rename to 154/images/ch1-rango-cat-page.png diff --git a/images/ch1-rango-index.png b/154/images/ch1-rango-index.png similarity index 100% rename from images/ch1-rango-index.png rename to 154/images/ch1-rango-index.png diff --git a/images/ch11-bootstrap-about.png b/154/images/ch11-bootstrap-about.png similarity index 100% rename from images/ch11-bootstrap-about.png rename to 154/images/ch11-bootstrap-about.png diff --git a/images/ch11-bootstrap-category-initial.png b/154/images/ch11-bootstrap-category-initial.png similarity index 100% rename from images/ch11-bootstrap-category-initial.png rename to 154/images/ch11-bootstrap-category-initial.png diff --git a/images/ch11-bootstrap-index-initial.png b/154/images/ch11-bootstrap-index-initial.png similarity index 100% rename from images/ch11-bootstrap-index-initial.png rename to 154/images/ch11-bootstrap-index-initial.png diff --git a/images/ch11-bootstrap-index-rows.png b/154/images/ch11-bootstrap-index-rows.png similarity index 100% rename from images/ch11-bootstrap-index-rows.png rename to 154/images/ch11-bootstrap-index-rows.png diff --git a/images/ch11-bootstrap-login-custom.png b/154/images/ch11-bootstrap-login-custom.png similarity index 100% rename from images/ch11-bootstrap-login-custom.png rename to 154/images/ch11-bootstrap-login-custom.png diff --git a/images/ch11-bootstrap-register-custom.png b/154/images/ch11-bootstrap-register-custom.png similarity index 100% rename from images/ch11-bootstrap-register-custom.png rename to 154/images/ch11-bootstrap-register-custom.png diff --git a/images/ch11-bootstrap-register-initial.png b/154/images/ch11-bootstrap-register-initial.png similarity index 100% rename from images/ch11-bootstrap-register-initial.png rename to 154/images/ch11-bootstrap-register-initial.png diff --git a/images/ch4-rango-about.png b/154/images/ch4-rango-about.png similarity index 100% rename from images/ch4-rango-about.png rename to 154/images/ch4-rango-about.png diff --git a/images/ch4-rango-index.png b/154/images/ch4-rango-index.png similarity index 100% rename from images/ch4-rango-index.png rename to 154/images/ch4-rango-index.png diff --git a/images/ch5-rango-admin-custom.png b/154/images/ch5-rango-admin-custom.png similarity index 100% rename from images/ch5-rango-admin-custom.png rename to 154/images/ch5-rango-admin-custom.png diff --git a/images/ch5-rango-admin-models.png b/154/images/ch5-rango-admin-models.png similarity index 100% rename from images/ch5-rango-admin-models.png rename to 154/images/ch5-rango-admin-models.png diff --git a/images/ch5-rango-admin.png b/154/images/ch5-rango-admin.png similarity index 100% rename from images/ch5-rango-admin.png rename to 154/images/ch5-rango-admin.png diff --git a/images/ch6-rango-index-category-pages.png b/154/images/ch6-rango-index-category-pages.png similarity index 100% rename from images/ch6-rango-index-category-pages.png rename to 154/images/ch6-rango-index-category-pages.png diff --git a/images/ch6-rango-index-category.png b/154/images/ch6-rango-index-category.png similarity index 100% rename from images/ch6-rango-index-category.png rename to 154/images/ch6-rango-index-category.png diff --git a/images/ch7-rango-category-add.png b/154/images/ch7-rango-category-add.png similarity index 100% rename from images/ch7-rango-category-add.png rename to 154/images/ch7-rango-category-add.png diff --git a/images/ch7-rango-category.png b/154/images/ch7-rango-category.png similarity index 100% rename from images/ch7-rango-category.png rename to 154/images/ch7-rango-category.png diff --git a/images/ch9-rango-add-category.png b/154/images/ch9-rango-add-category.png similarity index 100% rename from images/ch9-rango-add-category.png rename to 154/images/ch9-rango-add-category.png diff --git a/images/ch9-rango-index.png b/154/images/ch9-rango-index.png similarity index 100% rename from images/ch9-rango-index.png rename to 154/images/ch9-rango-index.png diff --git a/images/ch9-rango-python-page.png b/154/images/ch9-rango-python-page.png similarity index 100% rename from images/ch9-rango-python-page.png rename to 154/images/ch9-rango-python-page.png diff --git a/images/cookie-visits.png b/154/images/cookie-visits.png similarity index 100% rename from images/cookie-visits.png rename to 154/images/cookie-visits.png diff --git a/images/cover_image.pdf b/154/images/cover_image.pdf similarity index 100% rename from images/cover_image.pdf rename to 154/images/cover_image.pdf diff --git a/images/css-basic.png b/154/images/css-basic.png similarity index 100% rename from images/css-basic.png rename to 154/images/css-basic.png diff --git a/images/css-blocks-before.pdf b/154/images/css-blocks-before.pdf similarity index 100% rename from images/css-blocks-before.pdf rename to 154/images/css-blocks-before.pdf diff --git a/images/css-blocks.pdf b/154/images/css-blocks.pdf similarity index 100% rename from images/css-blocks.pdf rename to 154/images/css-blocks.pdf diff --git a/images/css-box-example.pdf b/154/images/css-box-example.pdf similarity index 100% rename from images/css-box-example.pdf rename to 154/images/css-box-example.pdf diff --git a/images/css-box-example2.pdf b/154/images/css-box-example2.pdf similarity index 100% rename from images/css-box-example2.pdf rename to 154/images/css-box-example2.pdf diff --git a/images/css-box-model.pdf b/154/images/css-box-model.pdf similarity index 100% rename from images/css-box-model.pdf rename to 154/images/css-box-model.pdf diff --git a/images/css-box-model.svg b/154/images/css-box-model.svg similarity index 100% rename from images/css-box-model.svg rename to 154/images/css-box-model.svg diff --git a/images/css-cascading.pdf b/154/images/css-cascading.pdf similarity index 100% rename from images/css-cascading.pdf rename to 154/images/css-cascading.pdf diff --git a/images/css-cascading.png b/154/images/css-cascading.png similarity index 100% rename from images/css-cascading.png rename to 154/images/css-cascading.png diff --git a/images/css-cascading.svg/Canvas_1.svg b/154/images/css-cascading.svg/Canvas_1.svg similarity index 100% rename from images/css-cascading.svg/Canvas_1.svg rename to 154/images/css-cascading.svg/Canvas_1.svg diff --git a/images/css-cascading.svg/image1.tiff b/154/images/css-cascading.svg/image1.tiff similarity index 100% rename from images/css-cascading.svg/image1.tiff rename to 154/images/css-cascading.svg/image1.tiff diff --git a/images/css-cascading.svg/image2.tiff b/154/images/css-cascading.svg/image2.tiff similarity index 100% rename from images/css-cascading.svg/image2.tiff rename to 154/images/css-cascading.svg/image2.tiff diff --git a/images/css-cascading.svg/image3.tiff b/154/images/css-cascading.svg/image3.tiff similarity index 100% rename from images/css-cascading.svg/image3.tiff rename to 154/images/css-cascading.svg/image3.tiff diff --git a/images/css-class.pdf b/154/images/css-class.pdf similarity index 100% rename from images/css-class.pdf rename to 154/images/css-class.pdf diff --git a/images/css-class.png b/154/images/css-class.png similarity index 100% rename from images/css-class.png rename to 154/images/css-class.png diff --git a/images/css-colours.pdf b/154/images/css-colours.pdf similarity index 100% rename from images/css-colours.pdf rename to 154/images/css-colours.pdf diff --git a/images/css-colours.svg b/154/images/css-colours.svg similarity index 100% rename from images/css-colours.svg rename to 154/images/css-colours.svg diff --git a/images/css-h1-highlighting.pdf b/154/images/css-h1-highlighting.pdf similarity index 100% rename from images/css-h1-highlighting.pdf rename to 154/images/css-h1-highlighting.pdf diff --git a/images/css-id.pdf b/154/images/css-id.pdf similarity index 100% rename from images/css-id.pdf rename to 154/images/css-id.pdf diff --git a/images/css-id.png b/154/images/css-id.png similarity index 100% rename from images/css-id.png rename to 154/images/css-id.png diff --git a/images/css-links-hover.pdf b/154/images/css-links-hover.pdf similarity index 100% rename from images/css-links-hover.pdf rename to 154/images/css-links-hover.pdf diff --git a/images/css-lists-cats-end.png b/154/images/css-lists-cats-end.png similarity index 100% rename from images/css-lists-cats-end.png rename to 154/images/css-lists-cats-end.png diff --git a/images/css-lists-cats-float.pdf b/154/images/css-lists-cats-float.pdf similarity index 100% rename from images/css-lists-cats-float.pdf rename to 154/images/css-lists-cats-float.pdf diff --git a/images/css-lists-which.png b/154/images/css-lists-which.png similarity index 100% rename from images/css-lists-which.png rename to 154/images/css-lists-which.png diff --git a/images/css-navbar-basic.png b/154/images/css-navbar-basic.png similarity index 100% rename from images/css-navbar-basic.png rename to 154/images/css-navbar-basic.png diff --git a/images/css-nesting-blocks.pdf b/154/images/css-nesting-blocks.pdf similarity index 100% rename from images/css-nesting-blocks.pdf rename to 154/images/css-nesting-blocks.pdf diff --git a/images/css-nesting-blocks.svg b/154/images/css-nesting-blocks.svg similarity index 100% rename from images/css-nesting-blocks.svg rename to 154/images/css-nesting-blocks.svg diff --git a/images/css-positioning-absolute1.pdf b/154/images/css-positioning-absolute1.pdf similarity index 100% rename from images/css-positioning-absolute1.pdf rename to 154/images/css-positioning-absolute1.pdf diff --git a/images/css-positioning-absolute2.pdf b/154/images/css-positioning-absolute2.pdf similarity index 100% rename from images/css-positioning-absolute2.pdf rename to 154/images/css-positioning-absolute2.pdf diff --git a/images/css-positioning-float1.pdf b/154/images/css-positioning-float1.pdf similarity index 100% rename from images/css-positioning-float1.pdf rename to 154/images/css-positioning-float1.pdf diff --git a/images/css-positioning-float2.pdf b/154/images/css-positioning-float2.pdf similarity index 100% rename from images/css-positioning-float2.pdf rename to 154/images/css-positioning-float2.pdf diff --git a/images/css-positioning-relative.pdf b/154/images/css-positioning-relative.pdf similarity index 100% rename from images/css-positioning-relative.pdf rename to 154/images/css-positioning-relative.pdf diff --git a/images/css-render.pdf b/154/images/css-render.pdf similarity index 100% rename from images/css-render.pdf rename to 154/images/css-render.pdf diff --git a/images/css-render.png b/154/images/css-render.png similarity index 100% rename from images/css-render.png rename to 154/images/css-render.png diff --git a/images/css-tidied.png b/154/images/css-tidied.png similarity index 100% rename from images/css-tidied.png rename to 154/images/css-tidied.png diff --git a/images/deploy-pythonanywhere.png b/154/images/deploy-pythonanywhere.png similarity index 100% rename from images/deploy-pythonanywhere.png rename to 154/images/deploy-pythonanywhere.png diff --git a/images/django-dev-server-firstrun.png b/154/images/django-dev-server-firstrun.png similarity index 100% rename from images/django-dev-server-firstrun.png rename to 154/images/django-dev-server-firstrun.png diff --git a/images/git-sequence.pdf b/154/images/git-sequence.pdf similarity index 100% rename from images/git-sequence.pdf rename to 154/images/git-sequence.pdf diff --git a/images/git-sequence.svg b/154/images/git-sequence.svg similarity index 100% rename from images/git-sequence.svg rename to 154/images/git-sequence.svg diff --git a/images/man.png b/154/images/man.png similarity index 100% rename from images/man.png rename to 154/images/man.png diff --git a/images/rango-admin.png b/154/images/rango-admin.png similarity index 100% rename from images/rango-admin.png rename to 154/images/rango-admin.png diff --git a/images/rango-categories-simple.png b/154/images/rango-categories-simple.png similarity index 100% rename from images/rango-categories-simple.png rename to 154/images/rango-categories-simple.png diff --git a/images/rango-css-1.png b/154/images/rango-css-1.png similarity index 100% rename from images/rango-css-1.png rename to 154/images/rango-css-1.png diff --git a/images/rango-css-2.png b/154/images/rango-css-2.png similarity index 100% rename from images/rango-css-2.png rename to 154/images/rango-css-2.png diff --git a/images/rango-css-3.png b/154/images/rango-css-3.png similarity index 100% rename from images/rango-css-3.png rename to 154/images/rango-css-3.png diff --git a/images/rango-css-4.png b/154/images/rango-css-4.png similarity index 100% rename from images/rango-css-4.png rename to 154/images/rango-css-4.png diff --git a/images/rango-erd.png b/154/images/rango-erd.png similarity index 100% rename from images/rango-erd.png rename to 154/images/rango-erd.png diff --git a/images/rango-erd.svg b/154/images/rango-erd.svg similarity index 100% rename from images/rango-erd.svg rename to 154/images/rango-erd.svg diff --git a/images/rango-erd.xml b/154/images/rango-erd.xml similarity index 100% rename from images/rango-erd.xml rename to 154/images/rango-erd.xml diff --git a/images/rango-form-steps.pdf b/154/images/rango-form-steps.pdf similarity index 100% rename from images/rango-form-steps.pdf rename to 154/images/rango-form-steps.pdf diff --git a/images/rango-form-steps.png b/154/images/rango-form-steps.png similarity index 100% rename from images/rango-form-steps.png rename to 154/images/rango-form-steps.png diff --git a/images/rango-hello-world-template.png b/154/images/rango-hello-world-template.png similarity index 100% rename from images/rango-hello-world-template.png rename to 154/images/rango-hello-world-template.png diff --git a/images/rango-hello-world.png b/154/images/rango-hello-world.png similarity index 100% rename from images/rango-hello-world.png rename to 154/images/rango-hello-world.png diff --git a/images/rango-links.pdf b/154/images/rango-links.pdf similarity index 100% rename from images/rango-links.pdf rename to 154/images/rango-links.pdf diff --git a/images/rango-links.png b/154/images/rango-links.png similarity index 100% rename from images/rango-links.png rename to 154/images/rango-links.png diff --git a/images/rango-login-message.png b/154/images/rango-login-message.png similarity index 100% rename from images/rango-login-message.png rename to 154/images/rango-login-message.png diff --git a/images/rango-ntier-architecture.png b/154/images/rango-ntier-architecture.png similarity index 100% rename from images/rango-ntier-architecture.png rename to 154/images/rango-ntier-architecture.png diff --git a/images/rango-ntier-architecture.svg b/154/images/rango-ntier-architecture.svg similarity index 100% rename from images/rango-ntier-architecture.svg rename to 154/images/rango-ntier-architecture.svg diff --git a/images/rango-ntier-architecture.xml b/154/images/rango-ntier-architecture.xml similarity index 100% rename from images/rango-ntier-architecture.xml rename to 154/images/rango-ntier-architecture.xml diff --git a/images/rango-picture.pdf b/154/images/rango-picture.pdf similarity index 100% rename from images/rango-picture.pdf rename to 154/images/rango-picture.pdf diff --git a/images/rango-picture.png b/154/images/rango-picture.png similarity index 100% rename from images/rango-picture.png rename to 154/images/rango-picture.png diff --git a/images/rango-register-form.png b/154/images/rango-register-form.png similarity index 100% rename from images/rango-register-form.png rename to 154/images/rango-register-form.png diff --git a/images/rango-site-with-pic.pdf b/154/images/rango-site-with-pic.pdf similarity index 100% rename from images/rango-site-with-pic.pdf rename to 154/images/rango-site-with-pic.pdf diff --git a/images/rango-site-with-pic.png b/154/images/rango-site-with-pic.png similarity index 100% rename from images/rango-site-with-pic.png rename to 154/images/rango-site-with-pic.png diff --git a/images/rango-template-inheritance.pdf b/154/images/rango-template-inheritance.pdf similarity index 100% rename from images/rango-template-inheritance.pdf rename to 154/images/rango-template-inheritance.pdf diff --git a/images/rango-template-inheritance.svg b/154/images/rango-template-inheritance.svg similarity index 100% rename from images/rango-template-inheritance.svg rename to 154/images/rango-template-inheritance.svg diff --git a/images/relational-schema-basic-models.pdf b/154/images/relational-schema-basic-models.pdf similarity index 100% rename from images/relational-schema-basic-models.pdf rename to 154/images/relational-schema-basic-models.pdf diff --git a/images/session-id.png b/154/images/session-id.png similarity index 100% rename from images/session-id.png rename to 154/images/session-id.png diff --git a/images/terminal_directory.png b/154/images/terminal_directory.png similarity index 100% rename from images/terminal_directory.png rename to 154/images/terminal_directory.png diff --git a/images/test-cookie.png b/154/images/test-cookie.png similarity index 100% rename from images/test-cookie.png rename to 154/images/test-cookie.png diff --git a/images/twd.ico b/154/images/twd.ico similarity index 100% rename from images/twd.ico rename to 154/images/twd.ico diff --git a/images/twd200x200.jpg b/154/images/twd200x200.jpg similarity index 100% rename from images/twd200x200.jpg rename to 154/images/twd200x200.jpg diff --git a/images/url-chain.pdf b/154/images/url-chain.pdf similarity index 100% rename from images/url-chain.pdf rename to 154/images/url-chain.pdf diff --git a/images/url-chain.svg b/154/images/url-chain.svg similarity index 100% rename from images/url-chain.svg rename to 154/images/url-chain.svg diff --git a/images/wireframe_cat.pdf b/154/images/wireframe_cat.pdf similarity index 100% rename from images/wireframe_cat.pdf rename to 154/images/wireframe_cat.pdf diff --git a/images/wireframe_default.pdf b/154/images/wireframe_default.pdf similarity index 100% rename from images/wireframe_default.pdf rename to 154/images/wireframe_default.pdf diff --git a/index.rst b/154/index.rst similarity index 100% rename from index.rst rename to 154/index.rst diff --git a/omnigraffle/css-blocks-before.graffle/data.plist b/154/omnigraffle/css-blocks-before.graffle/data.plist similarity index 100% rename from omnigraffle/css-blocks-before.graffle/data.plist rename to 154/omnigraffle/css-blocks-before.graffle/data.plist diff --git a/omnigraffle/css-blocks-before.graffle/image4.png b/154/omnigraffle/css-blocks-before.graffle/image4.png similarity index 100% rename from omnigraffle/css-blocks-before.graffle/image4.png rename to 154/omnigraffle/css-blocks-before.graffle/image4.png diff --git a/omnigraffle/css-blocks.graffle b/154/omnigraffle/css-blocks.graffle similarity index 100% rename from omnigraffle/css-blocks.graffle rename to 154/omnigraffle/css-blocks.graffle diff --git a/omnigraffle/css-box-example.graffle b/154/omnigraffle/css-box-example.graffle similarity index 100% rename from omnigraffle/css-box-example.graffle rename to 154/omnigraffle/css-box-example.graffle diff --git a/omnigraffle/css-box-example2.graffle b/154/omnigraffle/css-box-example2.graffle similarity index 100% rename from omnigraffle/css-box-example2.graffle rename to 154/omnigraffle/css-box-example2.graffle diff --git a/omnigraffle/css-box-model.graffle b/154/omnigraffle/css-box-model.graffle similarity index 100% rename from omnigraffle/css-box-model.graffle rename to 154/omnigraffle/css-box-model.graffle diff --git a/omnigraffle/css-cascading.graffle/data.plist b/154/omnigraffle/css-cascading.graffle/data.plist similarity index 100% rename from omnigraffle/css-cascading.graffle/data.plist rename to 154/omnigraffle/css-cascading.graffle/data.plist diff --git a/omnigraffle/css-cascading.graffle/image1.tiff b/154/omnigraffle/css-cascading.graffle/image1.tiff similarity index 100% rename from omnigraffle/css-cascading.graffle/image1.tiff rename to 154/omnigraffle/css-cascading.graffle/image1.tiff diff --git a/omnigraffle/css-cascading.graffle/image2.tiff b/154/omnigraffle/css-cascading.graffle/image2.tiff similarity index 100% rename from omnigraffle/css-cascading.graffle/image2.tiff rename to 154/omnigraffle/css-cascading.graffle/image2.tiff diff --git a/omnigraffle/css-cascading.graffle/image3.tiff b/154/omnigraffle/css-cascading.graffle/image3.tiff similarity index 100% rename from omnigraffle/css-cascading.graffle/image3.tiff rename to 154/omnigraffle/css-cascading.graffle/image3.tiff diff --git a/omnigraffle/css-class.graffle b/154/omnigraffle/css-class.graffle similarity index 100% rename from omnigraffle/css-class.graffle rename to 154/omnigraffle/css-class.graffle diff --git a/omnigraffle/css-colours.graffle b/154/omnigraffle/css-colours.graffle similarity index 100% rename from omnigraffle/css-colours.graffle rename to 154/omnigraffle/css-colours.graffle diff --git a/omnigraffle/css-h1-highlighting.graffle/data.plist b/154/omnigraffle/css-h1-highlighting.graffle/data.plist similarity index 100% rename from omnigraffle/css-h1-highlighting.graffle/data.plist rename to 154/omnigraffle/css-h1-highlighting.graffle/data.plist diff --git a/omnigraffle/css-h1-highlighting.graffle/image2.pdf b/154/omnigraffle/css-h1-highlighting.graffle/image2.pdf similarity index 100% rename from omnigraffle/css-h1-highlighting.graffle/image2.pdf rename to 154/omnigraffle/css-h1-highlighting.graffle/image2.pdf diff --git a/omnigraffle/css-id.graffle b/154/omnigraffle/css-id.graffle similarity index 100% rename from omnigraffle/css-id.graffle rename to 154/omnigraffle/css-id.graffle diff --git a/omnigraffle/css-links-hover.graffle/data.plist b/154/omnigraffle/css-links-hover.graffle/data.plist similarity index 100% rename from omnigraffle/css-links-hover.graffle/data.plist rename to 154/omnigraffle/css-links-hover.graffle/data.plist diff --git a/omnigraffle/css-links-hover.graffle/image1.png b/154/omnigraffle/css-links-hover.graffle/image1.png similarity index 100% rename from omnigraffle/css-links-hover.graffle/image1.png rename to 154/omnigraffle/css-links-hover.graffle/image1.png diff --git a/omnigraffle/css-links-hover.graffle/image2.png b/154/omnigraffle/css-links-hover.graffle/image2.png similarity index 100% rename from omnigraffle/css-links-hover.graffle/image2.png rename to 154/omnigraffle/css-links-hover.graffle/image2.png diff --git a/omnigraffle/css-links-hover.graffle/image3.eps b/154/omnigraffle/css-links-hover.graffle/image3.eps similarity index 100% rename from omnigraffle/css-links-hover.graffle/image3.eps rename to 154/omnigraffle/css-links-hover.graffle/image3.eps diff --git a/omnigraffle/css-lists-cats-float.graffle b/154/omnigraffle/css-lists-cats-float.graffle similarity index 100% rename from omnigraffle/css-lists-cats-float.graffle rename to 154/omnigraffle/css-lists-cats-float.graffle diff --git a/omnigraffle/css-nesting-blocks.graffle b/154/omnigraffle/css-nesting-blocks.graffle similarity index 100% rename from omnigraffle/css-nesting-blocks.graffle rename to 154/omnigraffle/css-nesting-blocks.graffle diff --git a/omnigraffle/css-positioning-absolute1.graffle b/154/omnigraffle/css-positioning-absolute1.graffle similarity index 100% rename from omnigraffle/css-positioning-absolute1.graffle rename to 154/omnigraffle/css-positioning-absolute1.graffle diff --git a/omnigraffle/css-positioning-absolute2.graffle b/154/omnigraffle/css-positioning-absolute2.graffle similarity index 100% rename from omnigraffle/css-positioning-absolute2.graffle rename to 154/omnigraffle/css-positioning-absolute2.graffle diff --git a/omnigraffle/css-positioning-float1.graffle b/154/omnigraffle/css-positioning-float1.graffle similarity index 100% rename from omnigraffle/css-positioning-float1.graffle rename to 154/omnigraffle/css-positioning-float1.graffle diff --git a/omnigraffle/css-positioning-float2.graffle b/154/omnigraffle/css-positioning-float2.graffle similarity index 100% rename from omnigraffle/css-positioning-float2.graffle rename to 154/omnigraffle/css-positioning-float2.graffle diff --git a/omnigraffle/css-positioning-relative.graffle b/154/omnigraffle/css-positioning-relative.graffle similarity index 100% rename from omnigraffle/css-positioning-relative.graffle rename to 154/omnigraffle/css-positioning-relative.graffle diff --git a/omnigraffle/css-render.graffle b/154/omnigraffle/css-render.graffle similarity index 100% rename from omnigraffle/css-render.graffle rename to 154/omnigraffle/css-render.graffle diff --git a/omnigraffle/git-sequence.graffle b/154/omnigraffle/git-sequence.graffle similarity index 100% rename from omnigraffle/git-sequence.graffle rename to 154/omnigraffle/git-sequence.graffle diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/data.plist b/154/omnigraffle/konigi_wireframe_stencils.gstencil/data.plist similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/data.plist rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/data.plist diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf diff --git a/omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf b/154/omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf similarity index 100% rename from omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf rename to 154/omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf diff --git a/omnigraffle/rango-form-steps.graffle/data.plist b/154/omnigraffle/rango-form-steps.graffle/data.plist similarity index 100% rename from omnigraffle/rango-form-steps.graffle/data.plist rename to 154/omnigraffle/rango-form-steps.graffle/data.plist diff --git a/omnigraffle/rango-form-steps.graffle/image11.png b/154/omnigraffle/rango-form-steps.graffle/image11.png similarity index 100% rename from omnigraffle/rango-form-steps.graffle/image11.png rename to 154/omnigraffle/rango-form-steps.graffle/image11.png diff --git a/omnigraffle/rango-form-steps.graffle/image6.png b/154/omnigraffle/rango-form-steps.graffle/image6.png similarity index 100% rename from omnigraffle/rango-form-steps.graffle/image6.png rename to 154/omnigraffle/rango-form-steps.graffle/image6.png diff --git a/omnigraffle/rango-links.graffle/data.plist b/154/omnigraffle/rango-links.graffle/data.plist similarity index 100% rename from omnigraffle/rango-links.graffle/data.plist rename to 154/omnigraffle/rango-links.graffle/data.plist diff --git a/omnigraffle/rango-links.graffle/image1.png b/154/omnigraffle/rango-links.graffle/image1.png similarity index 100% rename from omnigraffle/rango-links.graffle/image1.png rename to 154/omnigraffle/rango-links.graffle/image1.png diff --git a/omnigraffle/rango-links.graffle/image3.png b/154/omnigraffle/rango-links.graffle/image3.png similarity index 100% rename from omnigraffle/rango-links.graffle/image3.png rename to 154/omnigraffle/rango-links.graffle/image3.png diff --git a/omnigraffle/rango-links.graffle/image4.png b/154/omnigraffle/rango-links.graffle/image4.png similarity index 100% rename from omnigraffle/rango-links.graffle/image4.png rename to 154/omnigraffle/rango-links.graffle/image4.png diff --git a/omnigraffle/rango-picture.graffle/data.plist b/154/omnigraffle/rango-picture.graffle/data.plist similarity index 100% rename from omnigraffle/rango-picture.graffle/data.plist rename to 154/omnigraffle/rango-picture.graffle/data.plist diff --git a/omnigraffle/rango-picture.graffle/image3.pdf b/154/omnigraffle/rango-picture.graffle/image3.pdf similarity index 100% rename from omnigraffle/rango-picture.graffle/image3.pdf rename to 154/omnigraffle/rango-picture.graffle/image3.pdf diff --git a/omnigraffle/rango-picture.graffle/image4.tiff b/154/omnigraffle/rango-picture.graffle/image4.tiff similarity index 100% rename from omnigraffle/rango-picture.graffle/image4.tiff rename to 154/omnigraffle/rango-picture.graffle/image4.tiff diff --git a/omnigraffle/rango-site-with-pic.graffle/data.plist b/154/omnigraffle/rango-site-with-pic.graffle/data.plist similarity index 100% rename from omnigraffle/rango-site-with-pic.graffle/data.plist rename to 154/omnigraffle/rango-site-with-pic.graffle/data.plist diff --git a/omnigraffle/rango-site-with-pic.graffle/image1.png b/154/omnigraffle/rango-site-with-pic.graffle/image1.png similarity index 100% rename from omnigraffle/rango-site-with-pic.graffle/image1.png rename to 154/omnigraffle/rango-site-with-pic.graffle/image1.png diff --git a/omnigraffle/rango-template-inheritance.graffle b/154/omnigraffle/rango-template-inheritance.graffle similarity index 100% rename from omnigraffle/rango-template-inheritance.graffle rename to 154/omnigraffle/rango-template-inheritance.graffle diff --git a/omnigraffle/relational-schema-basic-models.graffle b/154/omnigraffle/relational-schema-basic-models.graffle similarity index 100% rename from omnigraffle/relational-schema-basic-models.graffle rename to 154/omnigraffle/relational-schema-basic-models.graffle diff --git a/omnigraffle/url-chain.graffle b/154/omnigraffle/url-chain.graffle similarity index 100% rename from omnigraffle/url-chain.graffle rename to 154/omnigraffle/url-chain.graffle diff --git a/omnigraffle/wireframe-cat.graffle b/154/omnigraffle/wireframe-cat.graffle similarity index 100% rename from omnigraffle/wireframe-cat.graffle rename to 154/omnigraffle/wireframe-cat.graffle diff --git a/omnigraffle/wireframe-default.graffle b/154/omnigraffle/wireframe-default.graffle similarity index 100% rename from omnigraffle/wireframe-default.graffle rename to 154/omnigraffle/wireframe-default.graffle diff --git a/sphinx-extensions/numfig.py b/154/sphinx-extensions/numfig.py similarity index 100% rename from sphinx-extensions/numfig.py rename to 154/sphinx-extensions/numfig.py diff --git a/sphinx-extensions/numsec.py b/154/sphinx-extensions/numsec.py similarity index 100% rename from sphinx-extensions/numsec.py rename to 154/sphinx-extensions/numsec.py diff --git a/tango_with_django_book.tmproj b/154/tango_with_django_book.tmproj similarity index 100% rename from tango_with_django_book.tmproj rename to 154/tango_with_django_book.tmproj diff --git a/templates/layout.html b/154/templates/layout.html similarity index 100% rename from templates/layout.html rename to 154/templates/layout.html diff --git a/17/Makefile b/17/Makefile new file mode 100644 index 0000000..9503596 --- /dev/null +++ b/17/Makefile @@ -0,0 +1,153 @@ +# Makefile for Sphinx documentation +# + +# You can set these variables from the command line. +SPHINXOPTS = +SPHINXBUILD = sphinx-build +PAPER = +BUILDDIR = _build + +# Internal variables. +PAPEROPT_a4 = -D latex_paper_size=a4 +PAPEROPT_letter = -D latex_paper_size=letter +ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) . +# the i18n builder cannot share the environment and doctrees with the others +I18NSPHINXOPTS = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) . + +.PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext + +help: + @echo "Please use \`make ' where is one of" + @echo " html to make standalone HTML files" + @echo " dirhtml to make HTML files named index.html in directories" + @echo " singlehtml to make a single large HTML file" + @echo " pickle to make pickle files" + @echo " json to make JSON files" + @echo " htmlhelp to make HTML files and a HTML help project" + @echo " qthelp to make HTML files and a qthelp project" + @echo " devhelp to make HTML files and a Devhelp project" + @echo " epub to make an epub" + @echo " latex to make LaTeX files, you can set PAPER=a4 or PAPER=letter" + @echo " latexpdf to make LaTeX files and run them through pdflatex" + @echo " text to make text files" + @echo " man to make manual pages" + @echo " texinfo to make Texinfo files" + @echo " info to make Texinfo files and run them through makeinfo" + @echo " gettext to make PO message catalogs" + @echo " changes to make an overview of all changed/added/deprecated items" + @echo " linkcheck to check all external links for integrity" + @echo " doctest to run all doctests embedded in the documentation (if enabled)" + +clean: + -rm -rf $(BUILDDIR)/* + +html: + $(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html + @echo + @echo "Build finished. The HTML pages are in $(BUILDDIR)/html." + +dirhtml: + $(SPHINXBUILD) -b dirhtml $(ALLSPHINXOPTS) $(BUILDDIR)/dirhtml + @echo + @echo "Build finished. The HTML pages are in $(BUILDDIR)/dirhtml." + +singlehtml: + $(SPHINXBUILD) -b singlehtml $(ALLSPHINXOPTS) $(BUILDDIR)/singlehtml + @echo + @echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml." + +pickle: + $(SPHINXBUILD) -b pickle $(ALLSPHINXOPTS) $(BUILDDIR)/pickle + @echo + @echo "Build finished; now you can process the pickle files." + +json: + $(SPHINXBUILD) -b json $(ALLSPHINXOPTS) $(BUILDDIR)/json + @echo + @echo "Build finished; now you can process the JSON files." + +htmlhelp: + $(SPHINXBUILD) -b htmlhelp $(ALLSPHINXOPTS) $(BUILDDIR)/htmlhelp + @echo + @echo "Build finished; now you can run HTML Help Workshop with the" \ + ".hhp project file in $(BUILDDIR)/htmlhelp." + +qthelp: + $(SPHINXBUILD) -b qthelp $(ALLSPHINXOPTS) $(BUILDDIR)/qthelp + @echo + @echo "Build finished; now you can run "qcollectiongenerator" with the" \ + ".qhcp project file in $(BUILDDIR)/qthelp, like this:" + @echo "# qcollectiongenerator $(BUILDDIR)/qthelp/How_To_Tango_With_Django.qhcp" + @echo "To view the help file:" + @echo "# assistant -collectionFile $(BUILDDIR)/qthelp/How_To_Tango_With_Django.qhc" + +devhelp: + $(SPHINXBUILD) -b devhelp $(ALLSPHINXOPTS) $(BUILDDIR)/devhelp + @echo + @echo "Build finished." + @echo "To view the help file:" + @echo "# mkdir -p $$HOME/.local/share/devhelp/How_To_Tango_With_Django" + @echo "# ln -s $(BUILDDIR)/devhelp $$HOME/.local/share/devhelp/How_To_Tango_With_Django" + @echo "# devhelp" + +epub: + $(SPHINXBUILD) -b epub $(ALLSPHINXOPTS) $(BUILDDIR)/epub + @echo + @echo "Build finished. The epub file is in $(BUILDDIR)/epub." + +latex: + $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex + @echo + @echo "Build finished; the LaTeX files are in $(BUILDDIR)/latex." + @echo "Run \`make' in that directory to run these through (pdf)latex" \ + "(use \`make latexpdf' here to do that automatically)." + +latexpdf: + $(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex + @echo "Running LaTeX files through pdflatex..." + $(MAKE) -C $(BUILDDIR)/latex all-pdf + @echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex." + +text: + $(SPHINXBUILD) -b text $(ALLSPHINXOPTS) $(BUILDDIR)/text + @echo + @echo "Build finished. The text files are in $(BUILDDIR)/text." + +man: + $(SPHINXBUILD) -b man $(ALLSPHINXOPTS) $(BUILDDIR)/man + @echo + @echo "Build finished. The manual pages are in $(BUILDDIR)/man." + +texinfo: + $(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo + @echo + @echo "Build finished. The Texinfo files are in $(BUILDDIR)/texinfo." + @echo "Run \`make' in that directory to run these through makeinfo" \ + "(use \`make info' here to do that automatically)." + +info: + $(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo + @echo "Running Texinfo files through makeinfo..." + make -C $(BUILDDIR)/texinfo info + @echo "makeinfo finished; the Info files are in $(BUILDDIR)/texinfo." + +gettext: + $(SPHINXBUILD) -b gettext $(I18NSPHINXOPTS) $(BUILDDIR)/locale + @echo + @echo "Build finished. The message catalogs are in $(BUILDDIR)/locale." + +changes: + $(SPHINXBUILD) -b changes $(ALLSPHINXOPTS) $(BUILDDIR)/changes + @echo + @echo "The overview file is in $(BUILDDIR)/changes." + +linkcheck: + $(SPHINXBUILD) -b linkcheck $(ALLSPHINXOPTS) $(BUILDDIR)/linkcheck + @echo + @echo "Link check complete; look for any errors in the above output " \ + "or in $(BUILDDIR)/linkcheck/output.txt." + +doctest: + $(SPHINXBUILD) -b doctest $(ALLSPHINXOPTS) $(BUILDDIR)/doctest + @echo "Testing of doctests in the sources finished, look at the " \ + "results in $(BUILDDIR)/doctest/output.txt." diff --git a/17/chapters/acknowledgements.rst b/17/chapters/acknowledgements.rst new file mode 100644 index 0000000..b7bdb1f --- /dev/null +++ b/17/chapters/acknowledgements.rst @@ -0,0 +1,51 @@ +Acknowledgements +================ + +The first version of this book began because my students were struggling to pick up the Django Framework as part of the course I teach on Web Application Development. However, it became painfully clear that the official Django Tutorials made many assumptions regarding one's background, missed out +crucial steps here and there that would trip up the students, and finally, it was clear that the students lacked the vocabulary to google for the right things to resolve any problems that did arise (and also that they didn't have hours to spend trying to figure out what was going on). + +I realised that to go from woe to go required a lot of additional information and help to resolve common problems. For this I often consulted stackoverflow.com for advice, help and explanations, along with other sites - the folk who have contributed to these sites have been an invaluable source of knowledge which I have tried to distill and combine here. Thanks for your help it is very much appreciated. + +Leif + + +In this book, we have pulled together the relevant information and details so that students and beginners to web development can go through the process in a seamless fashion and learn the basics of web application development. After realising the book we have had numerous people contact us with ways to improve the quality of the book. So we'd like to thank: + +* Manoel Maria ‏@xmadruga157 +* Codenius @Codenius +* Ally Weir +* Can Ibanoglu @canlbanoglu +* Sadegh Kh ‏@IR_Melbourne +* Jan Felix Trettow ‏@JanFelixTrettow +* Rezha Julio ‏@kimiamania +* Thomas Murphy ‏@TMurphyMusic +* Saurabh Tandon ‏@saurabhtand +* Pierre-Yves Mathieu https://github.com/pywebdesign +* Dhiraj Thakur https://github.com/dhirajt +* Svante Kvarnström @sjktje +* Ramdog https://github.com/ramdog +* Krace Kumar https://github.com/kracekumar +* James Yeo +* Michael Ho Chum https://github.com/michaelchum +* Jonathan Sundqvist https://github.com/jonathan-s +* nolan-m https://github.com/nolan-m +* Kartik Singhal https://github.com/k4rtik +* William Vincent +* Mike Gleen +* Oleg Belausov +* Adam Kikowski +* Thomas Whyyou @thomaswhyyou +* Dan C +* Saex https://github.com/SaeX +* Breakerfall https://github.com/breakerfall +* Michael Herman https://github.com/mjhea0 +* Praestgias https://github.com/praestigias +* Claus Conrad https://github.com/cconrad +* nCrazed https://github.com/nCrazed +* rnevius https://github.com/rnevius + +for their suggestions, comments and feedback, which have greatly improved the quality of this resource. + + +Leif and David + diff --git a/17/chapters/ajax.rst b/17/chapters/ajax.rst new file mode 100644 index 0000000..388588e --- /dev/null +++ b/17/chapters/ajax.rst @@ -0,0 +1,342 @@ +.. _ajax-label: + +AJAX, Django and JQuery +======================= + +To make the interaction with the Rango application more seamless let's add in a number of features that use AJAX, such as: + +* Add a "Like Button" to let registered users "like" a particular category +* Add inline category suggestions - so that when a user types they can quickly find a category +* Add an "Add Button" to let registered users quickly and easily add a Page to the Category + +AJAX essentially is a combination of technologies that are integrated together to reduce the number of page loads. Instead of reloading the full page, only part of the page or the data in the page is reloaded. If you haven't used AJAX before or would like to know more about it before using it, check out the resources at the Mozilla website: https://developer.mozilla.org/en-US/docs/AJAX + +To simplify the AJAX components you can use a library like JQuery. If you are using the Twitter CSS Bootstrap toolkit then JQuery will already be added in. Otherwise, download the latest version of JQuery and include it within your application. + +To include JQuery within your application, in the static folder create a *js* folder and plonk the JQuery javascript file (``jquery.js``) here along with an file called ``rango-ajax.js``, which will house our javascript code. In ``rango-ajax.js``, add the following javascript: + +.. code-block:: javascript + + $(document).ready(function() { + + // JQuery code to be added in here. + + }); + + +Then in your *base* template include: + +.. code-block:: html + + + + +If you aren't familiar with JQuery it is worth checking out http://jquery.com and going through some examples in the documentation. The documentation provides numerous worked examples of the different functionality that the JQuery API provides. + + + +Add a "Like Button" +-------------------- +It would be nice to let user, who are registered, denote that they "like" a particular category. In the following workflow, we will let users "like" categories, but we will not be keeping track of what categories they have "liked", we'll be trusting them not to click the like button multiple times. + +Workflow +........ + +To let users "like" certain categories undertake the following workflow: + +* In the ``category.html`` template: + - Add in a "Like" button with ``id="like"``. + - Add in a template tag to display the number of likes: ``{{% category.likes %}}`` + - Place this inside a div with ``id="like_count"``, i.e. ``
{{ category.likes }}
`` + - This sets up the template to capture likes and to display likes for the category. +* Update the ``category`` view to pass through the number of likes for the category. +* Create a view called, ``like_category`` which will examine the request and pick out the ``category_id`` and then increment the number of likes for that category. + - Don't forgot to add in the url mapping; i.e map the ``like_category'' view to ``rango/like_category/``. The GET request will then be ``rango/like_category/?category_id=XXX`` + - Instead of return a HTML page have this view will return the new total number of likes for that category. +* Now in "rango-ajax.js" add the JQuery code to perform the AJAX GET request. + - If the request is successful, then update the #like_count element, and hide the like button. + + +Updating Category Template +.......................... +To prepare the template we will need to add in the "Like" button with id="like" and create a ``
to display the number of likes ``{{% category.likes %}}``. To do this, add the following ``
`` to the *category.html* template: + +.. code-block:: html + +

+ + {{ category.likes }} people like this category + + {% if user.is_authenticated %} + + {% endif %} + +

+ + +Update the Category View +........................ +To display the number of likes and the "Likes" button modify the ``category`` view: + +.. code-block:: python + + def category(request, category_name_url): + context = RequestContext(request) + cat_list = get_category_list() + category_name = decode_url(category_name_url) + + context_dict = {'cat_list': cat_list, 'category_name': category_name} + + try: + category = Category.objects.get(name=category_name) + + # Add category to the context so that we can access the id and likes + context_dict['category'] = category + + pages = Page.objects.filter(category=category) + context_dict['pages'] = pages + except Category.DoesNotExist: + pass + + return render_to_response('rango/category.html', context_dict, context) + +Create a Like Category View +........................... +Create a view called, ``like_category`` in ``rango/views.py`` which will examine the request and pick out the category_id and then increment the number of likes for that category. + +.. code-block:: python + + from django.contrib.auth.decorators import login_required + + @login_required + def like_category(request): + context = RequestContext(request) + cat_id = None + if request.method == 'GET': + cat_id = request.GET['category_id'] + + likes = 0 + if cat_id: + category = Category.objects.get(id=int(cat_id)) + if category: + likes = category.likes + 1 + category.likes = likes + category.save() + + return HttpResponse(likes) + +On examining the code, you will see that we are only allowing authenticated users to denote that they like a category. The view assumes that a variable ``category_id`` has been passed through via a GET so that the we can identify the category to update. In this view, we could also track and record that a particular user has "liked" this category if we wanted - but we are keeping it simple to focus on the AJAX mechanics. + +Don't forget to add in the URL mapping, into ``rango/urls.py``. Update the ``urlpatterns`` by adding in: + +.. code-block:: python + + url(r'^like_category/$', views.like_category, name='like_category'), + + +Making the AJAX request +....................... +Now in "rango-ajax.js" you will need to add some JQuery code to perform an AJAX GET request. Add in the following code: + +.. code-block:: javascript + + $('#likes').click(function(){ + var catid; + catid = $(this).attr("data-catid"); + $.get('/rango/like_category/', {category_id: catid}, function(data){ + $('#like_count').html(data); + $('#likes').hide(); + }); + }); + +This piece of JQuery/Javascript will add an event handler to the element with id ``#likes``, i.e. the button. When clicked, it will extract the category id from the button element, and then make an AJAX GET request which will make a call to ``/rango/like_category/`` encoding the ``category id`` in the request. If the request is successful, then the HTML element with id like_count (i.e. the ) is updated with the data returned by the request, and the HTML element with id likes (i.e. the + {% endif %} + +JQuery code: + +.. code-block: javascript + + $('.rango-add').click(function(){ + var catid = $(this).attr("data-catid"); + var url = $(this).attr("data-url"); + var title = $(this).attr("data-title"); + var me = $(this) + $.get('/rango/auto_add_page/', {category_id: catid, url: url, title: title}, function(data){ + $('#pages').html(data); + me.hide(); + }); + }); + +Note here we are assigned the event handler to all the buttons with class ``rango-add``. + +View code: + +.. code-block:: python + + @login_required + def auto_add_page(request): + context = RequestContext(request) + cat_id = None + url = None + title = None + context_dict = {} + if request.method == 'GET': + cat_id = request.GET['category_id'] + url = request.GET['url'] + title = request.GET['title'] + if cat_id: + category = Category.objects.get(id=int(cat_id)) + p = Page.objects.get_or_create(category=category, title=title, url=url) + + pages = Page.objects.filter(category=category).order_by('-views') + + # Adds our results list to the template context under name pages. + context_dict['pages'] = pages + + return render_to_response('rango/page_list.html', context_dict, context) + + diff --git a/17/chapters/bing_search.rst b/17/chapters/bing_search.rst new file mode 100644 index 0000000..b0f1374 --- /dev/null +++ b/17/chapters/bing_search.rst @@ -0,0 +1,224 @@ +.. _bing-label: + +Adding External Search Functionality +==================================== +At this stage, our Rango application is looking pretty good - a majority of our required functionality is implemented. In this chapter, we will connect Rango up to Bing's Search API so that users can also search for pages, rather than just use the categories. First let's get started by setting up an account to use Bing's Search API, then construct a wrapper to call Bing's web search functionality before integrating the search into Rango. + +The Bing Search API +------------------- +The Bing Search API provides you with the ability to embed search results from the Bing search engine within your own applications. Through a straightforward interface, you can request results from Bing's servers to be returned in either XML or JSON. The data returned can then be interpreted by a XML or JSON parser, with the results then rendered as part of a template within your application. + +Although the Bing API can handle requests for different kinds of content, we'll be focusing on web search only for this tutorial - as well as handling JSON responses. To use the Bing Search API, you will need to sign up for an *API key*. The key currently provides subscribers with access to 5000 queries per month, which should be more than enough for our purposes. + +Registering for a Bing API Key +.............................. +To register for a Bing API key, you must first register for a free Microsoft account. The account provides you with access to a wide range of Microsoft services. If you already have a Hotmail account, you already have one! You can create your free account and login at https://account.windowsazure.com. + +When you account has been created, jump to the `Windows Azure Marketplace Bing Search API page `_. At the top of the screen, you may first need to click the *Sign In* button - if you have already signed into your Microsoft account, you won't need to provide your account details again. If the text says *Sign Out*, you're already logged in. + +Down the right hand side of the page is a list of transactions per month. At the bottom of the list is *5,000 Transactions/month*. Click the sign up button to the right - you should be subscribing for a free service. You should then read the *Publisher Offer Terms*, and if you agree with them click *Sign Up* to continue. You will then be presented with a page confirming that you have successfully signed up. + +Once you've signed up, click the *Data* link at the top of the page. From there, you should be presented with a list of data sources available through the Windows Azure Marketplace. At the top of the list should be *Bing Search API* - it should also say that you are *subscribed* to the data source. Click the *use* link associated with the Bing Search API located on the right of the page. You will then be presented with a screen similar to that shown in Figure :num:`fig-bing-explore`. + +.. _fig-bing-explore: + +.. figure:: ../images/bing-explore.png + :figclass: align-center + + The Bing Search API service explorer page. In this screenshot, the *Primary Account Key* is deliberately obscured. You should make sure you keep your key secret, too! + +This page allows you to try out the Bing Search API by filling out the boxes to the left. For example, the *Query* box allows you to specify a query to send to the API. Ensure that at the bottom of the screen you select *Web* for web search results only. Note the URL provided in the blue box at the top of the page changes as you alter the settings within the webpage. Take a note of the Web search URL. We'll be using part of this URL within our code later on. The following example is a URL to perform a web search using the query *rango*. + +:: + + https://api.datamarket.azure.com/Bing/Search/v1/Web?Query=%27rango%27 + +We must also retrieve your API key so you can authenticate with the Bing servers when posing requests. To obtain your key, locate the text *Primary Account Key* at the top of the page and click the *Show* link next to it. Your key will then be exposed. We'll be using it later, so take a note of it - and keep it safe! If someone obtains your key, they'll be able to use your free query quota. + +.. note:: The Bing API Service Explorer also keeps a tab of how many queries you have left of your monthly quota. Check out the top of the page to see! + +Adding Search Functionality +--------------------------- +To add search functionality to Rango, we first must write an additional function to query the Bing API. This code should take in the request from a particular user and return to the calling function a list of results. Any errors that occur during the API querying phase should also be handled gracefully within the function. Spinning off search functionality into an additional function also provides a nice abstraction between Django-related code and search functionality code. + +To start, let's create a new Python module called ``bing_search.py`` within our ``rango`` application directory. Add the following code into the file. Check out the inline commentary for a description of what's going on throughout the function. + +.. code-block:: python + + import json + import urllib, urllib2 + + def run_query(search_terms): + # Specify the base + root_url = 'https://api.datamarket.azure.com/Bing/Search/' + source = 'Web' + + # Specify how many results we wish to be returned per page. + # Offset specifies where in the results list to start from. + # With results_per_page = 10 and offset = 11, this would start from page 2. + results_per_page = 10 + offset = 0 + + # Wrap quotes around our query terms as required by the Bing API. + # The query we will then use is stored within variable query. + query = "'{0}'".format(search_terms) + query = urllib.quote(query) + + # Construct the latter part of our request's URL. + # Sets the format of the response to JSON and sets other properties. + search_url = "{0}{1}?$format=json&$top={2}&$skip={3}&Query={4}".format( + root_url, + source, + results_per_page, + offset, + query) + + # Setup authentication with the Bing servers. + # The username MUST be a blank string, and put in your API key! + username = '' + bing_api_key = '' + + # Create a 'password manager' which handles authentication for us. + password_mgr = urllib2.HTTPPasswordMgrWithDefaultRealm() + password_mgr.add_password(None, search_url, username, bing_api_key) + + # Create our results list which we'll populate. + results = [] + + try: + # Prepare for connecting to Bing's servers. + handler = urllib2.HTTPBasicAuthHandler(password_mgr) + opener = urllib2.build_opener(handler) + urllib2.install_opener(opener) + + # Connect to the server and read the response generated. + response = urllib2.urlopen(search_url).read() + + # Convert the string response to a Python dictionary object. + json_response = json.loads(response) + + # Loop through each page returned, populating out results list. + for result in json_response['d']['results']: + results.append({ + 'title': result['Title'], + 'link': result['Url'], + 'summary': result['Description']}) + + # Catch a URLError exception - something went wrong when connecting! + except urllib2.URLError, e: + print "Error when querying the Bing API: ", e + + # Return the list of results to the calling function. + return results + +The logic of the function above can be broadly split into six main tasks: + +* First, the function prepares for connecting to Bing by preparing the URL that we'll be requesting. +* The function then prepares authentication, making use of your Bing API key. Make sure you replace ```` with your actual Bing API key, otherwise you'll be going nowhere! +* We then connect to the Bing API through the command ``urllib2.urlopen(search_url)``. The results from the server are read and saved as a string. +* This string is then parsed into a Python dictionary object using the ``json`` Python package. +* We loop through each of the returned results, populating a ``results`` dictionary. For each result, we take the ``title`` of the page, the ``link`` or URL and a short ``summary`` of each returned result. +* The dictionary is returned by the function. + +Notice that results are passed from Bing's servers as JSON. This is because we explicitly specify to use JSON in our initial request - check out the ``search_url`` variable which we define. If an error occurs when attempting to connect to Bing's servers, the error is printed to the terminal via the ``print`` statement within the ``except`` block. + +.. note:: There are many different parameters that the Bing Search API can handle which we don't cover here. If you're interested in seeing how to tailor your results, check out the `Bing Search API Migration Guide and FAQ `_. + +Putting Search into Rango +------------------------- +To add external search functionality, we will need to perform the following steps. + +#. We must first create a ``search.html`` template which extends from our ``base.html`` template. The ``search.html`` template will include a HTML ``
`` to capture the user's query as well as template code to present any results. +#. We then create a view to handle the rendering of the ``search.html`` template for us, as well as calling the ``run_query()`` function we defined above. + +Adding a Search Template +........................ +Let's first create our ``search.html`` template. Add the following HTML markup and Django template code. + +.. code-block:: html + + {% extends "rango/base.html" %} + + {% load static %} + + {% block title %}Search{% endblock %} + + {% block body_block %} +
+

Search with Rango

+
+ +
+ + {% csrf_token %} + + + +
+ + + {% if result_list %} + +
+
    + {% for result in result_list %} +
  1. + {{ result.title }}
    + {{ result.summary }} +
    2. + {% endfor %} +
+
+ {% endif %} +
+
+ {% endblock %} + + +The template code above performs two key tasks: + + #. In all scenarios, the template presents a search box and a search buttons within a HTML ``
`` for users to enter and submit their search queries. + #. If a ``results_list`` object is passed to the template's context when being rendered, the template then iterates through the object displaying the results contained within. + +As you will see from our corresponding view code shortly, a ``results_list`` will only be passed to the template engine when there are results to return. There won't be results for example when a user lands on the search page for the first time - they wouldn't have posed a query yet! + +Adding the View +............... +With our search template added, we can then add the view which prompts the rendering of our template. Add the following ``search()`` view to Rango's ``views.py`` module. + +.. code-block:: python + + def search(request): + context = RequestContext(request) + result_list = [] + + if request.method == 'POST': + query = request.POST['query'].strip() + + if query: + # Run our Bing function to get the results list! + result_list = run_query(query) + + return render_to_response('rango/search.html', {'result_list': result_list}, context) + +By now, the code should be pretty self explanatory to you. The only major addition is the calling of the ``run_query()`` function we defined earlier in this chapter. To call it, we are required to also import the ``bing_search.py`` module, too. Ensure that before you run the script that you add the following import statement at the top of the ``views.py`` module. + +.. code-block:: python + + from rango.bing_search import run_query + +You'll also need to ensure you do the following, too. + +#. Add a mapping between your ``search()`` view and the ``/rango/search/`` URL. +#. Update the ``base.html`` navigation bar to include a link to the search page. + + +.. note:: According to the `relevant article on Wikipedia `_, an *Application Programming Interface (API)* specifies how software components should interact with one another. In the context of web applications, an API is considered as a set of HTTP requests along with a definition of the structures of response messages that each request can return. Any meaningful service that can be offered over the Internet can have its own API - we aren't limited to web search. For more information on web APIs, `Luis Rei provides an excellent tutorial on APIs `_. + +Exercises +--------- +Taking the basic Bing Search API function we added above as a baseline, try out the following exercises. + +* Add a main() function to the *bing_search.py* to test out the BING Search API when you run ``python bing_search.py``. +* The main function should ask a user for a query (from the command line), and then issue the query to the BING API via the run_query method and print out the top ten results returned. +* Print out the rank, title and URL for each result. diff --git a/17/chapters/bootstrap.rst b/17/chapters/bootstrap.rst new file mode 100644 index 0000000..f7c61df --- /dev/null +++ b/17/chapters/bootstrap.rst @@ -0,0 +1,419 @@ +Bootstrapping Rango +=================== +In this chapter, we will be styling Rango using the *Twitter Bootstrap 2.3.2* toolkit. We won't go into the details about how Bootstrap works, and we will be assuming you have some familiarity with CSS. If you don't, check out the CSS chapter so that you understand the basics and then check out some Bootstrap tutorials. However, you should be able to go through this section and piece things together. + +To get started take a look at the `Bootstrap 2.3.2 website `_ - it provides you with sample code and examples of the different components and how to style them by added in the appropriate style tags, etc. On the Bootstrap website they provide a number of `example layouts `_ which we can base our design on. + +To style Rango we have identified that the `fluid style `_ more or less meets our needs in terms of the layout of Rango, i.e. it has a menu bar at the top, a side bar (which we will use to show categories) and a main content pane. + +Setting up The Base Template +---------------------------- +Before we can set up the base template to use this style we need to download Bootstrap, *JQuery* and the *Fluid Template.* + +Download Bootstrap +.................. +Go to the `Bootstrap 2.3.2 website `_ and download the toolkit. When you unzip the files you will see that in the directory you have a ``imgs``, ``js`` and ``css`` directory plus associated files. Copy the three subdirectories in Rango's ``static`` folder so that you will be able to reference them via the URL ``/static/imgs``, ``/static/js/`` and ``/static/css/``. + +Download JQuery +............... +Now go to the `JQuery website `_ and download the latest 2.x version of JQuery. Put the ``js`` file in to the ``static/js/`` directory. + +Including CSS/JS in The Base Template +..................................... +If you download or look at the source for http://getbootstrap.com/2.3.2/examples/fluid.html, you'll notice that in the ```` section there is some additional `` + +
+ Span 1 + Span 2 +
+ +We can see that each element follows its natural flow: the container element with class ``container`` spans the entire width of its parent container, while each of the ```` elements are enclosed inline within the parent. Now suppose that we wish to then move the blue element with text ``Span 2`` to the right of its container. We can achieve this by modifying our CSS ``.blue`` class to look like the following example. + +.. code-block:: css + + .blue { + background-color: blue; + border: 1px solid black; + float: right; + } + +By applying the ``float: right;`` property and value pairing, we should then see something similar to the example shown below. + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +Note how the ``.blue`` element now appears at the right of its parent container, ``.container``. We have in effect disturbed the natural flow of our webpage by artificially moving an element! What if we then also applied ``float: left`` to the ``.yellow`` ````? + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +This would float the ``.yellow`` element, removing it from the natural flow of the webpage. In effect, it is not sitting on top of the ``.container`` container. This explains why the parent container does not now fill down with the ```` elements like you would expect. You can apply the ``overflow: hidden;`` property to the parent container as shown below to fix this problem. For more information on how this trick works, have a look at `this QuirksMode.org online article `_. + +.. code-block:: css + + .container { + border: 1px solid black; + overflow: hidden; + } + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +Applying ``overflow: hidden`` ensures that that our ``.container`` pushes down to the appropriate height. + +Relative Positioning +.................... +*Relative positioning* can be used if you required a greater degree of control over where elements are positioned on your webpage. As the name may suggest to you, relative positioning allows you to position an element *relative to where it would otherwise be located.* We make use of relative positioning with the ``position: relative;`` property and value pairing. However, that's only part of the story. + +Let's explain how this works. Consider our previous example where two ```` elements are sitting within their container. + +.. code-block:: html + +
+ Span 1 + Span 2 +
+ +.. code-block:: css + + .container { + border: 1px solid black; + height: 200px; + } + + .yellow { + background-color: yellow; + border: 1px solid black; + } + + .blue { + background-color: blue; + border: 1px solid black; + } + +This produces the following result - just as we would expect. Note that we have artificially increased the ``height`` of our ``container`` element to 150 pixels. This will allow us more room with which to play with. + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +Now let's attempt to position our ``.blue`` ```` element relatively. First, we apply the ``position: relative;`` property and value pairing to our ``.blue`` class, like so. + +.. code-block:: css + + .blue { + background-color: blue; + border: 1px solid black; + position: relative; + } + +This has no effect on the positioning of our ``.blue`` element. What it does do however is change the positioning of ``.blue`` from ``static`` to ``relative``. This paves the way for us to specify where - from the original position of our element - we now wish the element to be located at. + +.. code-block:: css + + .blue { + background-color: blue; + border: 1px solid black; + position: relative; + left: 150px; + top: 80px; + } + +By applying the ``left`` and ``top`` properties as shown in the example above, we are wanting the ``.blue`` element to be *pushed* 150 pixels *from the left*. In other words, we move the element 150 pixels to the right. Think about that carefully! The ``top`` property indicates that the element should be pushed 80 pixels from the *top* of the element. The result our experimentation can be seen below. + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +From this behaviour, we can deduce that the properties ``right`` and ``bottom`` *push* elements from the right and bottom respectively. We can test this out by applying the properties to our ``.yellow`` class as shown below. + +.. code-block:: css + + .yellow { + background-color: blue; + border: 1px solid black; + float: right; + position: relative; + right: 10px; + bottom: 10px; + } + +This produces the following output. The ``.yellow`` container is pushed into the top left-hand corner of our container by pushing up and to the right. + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +.. note:: What happens if you apply both a ``top`` and ``bottom`` property, or a ``left`` and ``right`` property? Interestingly, the *first* property for the relevant axis is applied. For example, if ``bottom`` is specified before ``top``, the ``bottom`` property is used. + +We can even apply relative positioning to elements which are floated. Consider our earlier example where the two ```` elements were positioned on either side of the container by floating ``.blue`` to the right. + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +We can then alter the ``.blue`` class to the following. + +.. code-block:: css + + .blue { + background-color: blue; + border: 1px solid black; + float: right; + position: relative; + right: 100px; + } + +.. raw:: html + + + +
+ Span 1 + Span 2 +
+ +This therefore means that relative positioning works from the position at which the element would have otherwise been at - regardless of any other position-changing properties being applied. Neat! + +Absolute Positioning +.................... +Our final positioning technique is *absolute positioning.* While we still modify the ``position`` parameter of a style, we use ``absolute`` as the value instead of ``relative``. In contrast to relative positioning, absolute positioning places an element *relative to its first parent element that has a position value other than static.* This may sound a little bit confusing, but let's go through it step by step to figure out what exactly happens. + +First, we can again take our earlier example of the two coloured ```` elements within a ``
`` container. The two ```` elements are placed side-by-side as they would naturally. + +.. code-block:: html + +
+ Span 1 + Span 2 +
+ +.. code-block:: css + + .container { + border: 1px solid black; + height: 70px; + } + + .yellow { + background-color: yellow; + border: 1px solid black; + } + + .blue { + background-color: blue; + border: 1px solid black; + } + +This produces the output shown below. Note that we again set our ``.container`` height to an artificial value of 70 pixels to give us more room. + +.. raw:: html + + + +
+
+ Span 1 + Span 2 +
+
+ +We now apply absolute positioning to our ``.blue`` element. + +.. code-block:: css + + .blue { + background-color: blue; + border: 1px solid black; + position: absolute; + } + +Like with relative positioning, this has no overall effect on the positioning of our blue element in the webpage. We must apply one or more of ``top``, ``bottom``, ``left`` or ``right`` in order for a new position to take effect. As a demonstration, we can apply ``top`` and ``left`` properties to our blue element like in the example below. + +.. code-block:: css + + .blue { + background-color: blue; + border: 1px solid black; + position: absolute; + top: 0; + left: 0; + } + + +.. raw:: html + + + +
+
+ Span 1 + Span 2 +
+
+ +Wow, what happened here? Our blue element is now positioned outside of our container! You'll note that if you run this code within your own web browser window, the blue element appears in the top left-hand corner of the viewport. This therefore means that our ``top``, ``bottom``, ``left`` and ``right`` properties take on a slightly different meaning when absolute positioning is concerned. + +As our container element's position is by default set to ``position: static``, the blue and yellow elements are moving to the top left and bottom right of our screen respectively. Let's now modify our ``.yellow`` class to move the yellow ```` to 5 pixels from the bottom right-hand corner of our page. The ``.yellow`` class now looks like the example below. + +.. code-block:: css + + .yellow { + background-color: yellow; + border: 1px solid black; + position: absolute; + bottom: 5px; + right: 5px; + } + +This produces the following result. + +.. raw:: html + + + +
+
+ Span 1 + Span 2 +
+
+ +But what if we don't want our elements to be positioned absolutely in relation to the entire page? More often than not, we'll be looking to adjusting the positioning of our elements in relation to a container. If we recall our definition for absolute positioning, we will note that absolute positions are calculated *relative to the first parent element that has a position value other than static.* As our container is the only parent for our two ```` elements, the container to which the absolutely positioned elements is therefore the ```` of our HTML page. We can fix this by adding ``position: relative;`` to our ``.container`` class, just like in the example below. + +.. code-block:: css + + .container { + border: 1px solid black; + height: 70px; + position: relative; + } + +This produces the following result. ``.container`` becomes the first parent element with a position value of anything other than ``relative``, meaning our ```` elements latch on! + +.. raw:: html + + + +
+
+ Span 1 + Span 2 +
+
+ +Our elements are now absolutely positioned in relation to ``.container``. Awesome! Let's adjust the positioning values of our two ```` elements to move them around. + +.. code-block:: css + + .yellow { + background-color: yellow; + border: 1px solid black; + position: absolute; + top: 20px; + right: 100px; + } + + .blue { + background-color: blue; + border: 1px solid black; + position: absolute; + float: right; + bottom: 50px; + left: 40px; + } + +.. raw:: html + + + +
+
+ Span 1 + Span 2 +
+
+ +Note that we also apply ``float: right;`` to our ``.blue`` element. This is to demonstrate that unlike relative positioning, absolute positioning *ignores any other positioning properties applied to an element*. ``top: 10px`` for example will always ensure that an element appears 10 pixels down from its parent (set with ``position: relative;``), regardless of whether the element has been floated or not. + +.. _css-course-box-model-label: + +The Box Model +------------- +When using CSS, you're never too far away from using *padding*, *borders* and *margins*. These properties are some of the most fundamental styling techniques which you can apply to the elements within your webpages. They are incredibly important and are all related to what we call the *CSS box model.* + +Each element that you create on a webpage can be considered as a box. The `CSS box model `_ is defined by the `W3C `_ as a formal means of describing the elements or boxes that you create, and how they are rendered in your web browser's viewport. Each element or box consists of *four separate areas*, all of which are illustrated in Figure :num:`fig-css-box-model`. The areas - listed from inside to outside - are the *content area*, the *padding area*, the *border area* and the *margin area*. + +.. _fig-css-box-model: + +.. figure:: ../images/css-box-model.svg + :figclass: align-center + + An illustration demonstrating the CSS box model, complete with key showing the four areas of the model. + +For each element within a webpage, you can create a margin, apply some padding or a border with the respective properties ``margin``, ``padding`` and ``border``. Margins clear a transparent area around the border of your element, meaning margins are incredibly useful for creating a gap between elements. In contrast, padding creates a gap between the content of an element and its border. This therefore gives the impression that the element appears wider. If you supply a background colour for an element, the background colour is extended with the element's padding. Finally, borders are what you might expect them to be - they provide a border around your element's content and padding. + +For more information on the CSS box model, check out `addedbytes excellent explanation of the model `_. Heck, `why not even order a t-shirt with the box model on it `_? + +.. warning:: As you may gather from examining Figure :num:`fig-css-box-model`, the width of an element isn't defined simply by the value you enter as the element's ``width``. Rather, you should always consider the width of the border and padding on both sides of your element. This can be represented mathematically as: + + ``total_width = content_width + left padding + right padding + left border + left margin + right margin`` + + Don't forget this. You'll save yourself a lot of trouble if you don't! + +Styling Lists +------------- +Lists are everywhere. Whether you're reading a list of learning outcomes for a course or a reading a list of times for the train, you know what a list looks like and appreciate its simplicity. If you have a list of items on a webpage, why not use a HTML list? Using lists within your webpages - `according to Brainstorm and Raves `_ - promotes good HTML document structure, allowing text-based browsers, screen readers and other browsers that do not support CSS to render your page in a sensible manner. + +Lists however don't look particularly appealing to end-users. Take the following HTML list that we'll be styling as we go along trying out different things. + +.. code-block:: html + +
    +
  • Django
    • +
  • How to Tango with Django
    • +
  • Two Scoops of Django
    • +
+ +Rendered without styling, the list looks pretty boring. + +.. raw:: html + + + +
+
    +
  • Django
    • +
  • How to Tango with Django
    • +
  • Two Scoops of Django
    • +
+
+ +Let's make some modifications. First, let's get rid of the ugly bullet points. With our ``
    `` element already (and conveniently) set with class ``sample-list``, we can create the following style. + +.. code-block:: css + + .sample-list { + list-style-type: none; + } + +This produces the following result. Note the now lacking bullet points! + +.. raw:: html + + + +
    +
      +
    • Django
      • +
    • How to Tango with Django
      • +
    • Two Scoops of Django
      • +
    +
    + +Let's now change the orientation of our list. We can do this by altering the ``display`` property of each of our list's elements (``
  • ``). The following style maps to this for us. + +.. code-block:: css + + .sample-list li { + display: inline; + } + +When applied, our list elements now appear on a single line, just like in the example below. + +.. raw:: html + + + +
    +
    +
      +
    • Django
      • +
    • How to Tango with Django
      • +
    • Two Scoops of Django
      • +
    +
    +
    + +While we may have the correct orientation, our list now looks awful. Where does one element start and the other end? It's a complete mess! Let's adjust our list element style and add some contrast and padding to make things look nicer. + +.. code-block:: css + + .example-list li { + display: inline; + background-color: #333333; + color: #FFFFFF; + padding: 10px; + } + +When applied, our list looks so much better - and quite professional, too! + +.. raw:: html + + + +
    +
    +
      +
    • Django
      • +
    • How to Tango with Django
      • +
    • Two Scoops of Django
      • +
    +
    +
    + +From the example, it is hopefully clear that lists can be easily customised to suit the requirements of your webpages. For more information and inspiration on how to style lists, you can check out some of the selected links below. + +* Have a look at `this excellent tutorial on styling lists on A List Apart `_. +* Have a look at `this about.com article which demonstrates how to use your own bullets `_! +* Check out `this advanced tutorial from Web Designer Wall `_ which uses graphics to make awesome looking lists. In the tutorial, the author uses Photoshop - you could try using a simpler graphics package if you don't feel confident with Photoshop. +* `This awesome site compilation from devsnippets.com `_ provides some great inspiration and tips on how you can style lists. + +The possibilities of styling lists is endless! You could say it's a never-ending list... + +.. _css-course-links-label: + +Styling Links +------------- +CSS provides you with the ability to easily style hyperlinks in any way you wish. You can change their colour, their font or any other aspect that you wish - and you can even change how they look when you hover over them! + +Hyperlinks are represented within a HTML page through the ```` tag, which is short for *anchor*. We can apply styling to all hyperlinks within your webpage as shown in following example. + +.. code-block:: css + + a { + color: red; + text-decoration: none; + } + +Every hyperlink's text colour is changed to red, with the default underline of the text removed. If we then want to change the ``color`` and ``text-decoration`` properties again when a user hovers over a link, we can create another style using the so-called `pseudo-selector `_ ``:hover``. Our two styles now look like the example below. + +.. code-block:: css + + a { + color: red; + text-decoration: none; + } + + a:hover { + color: blue; + text-decoration: underline; + } + +This produces links as shown below. Hover over them to see them change! + +.. raw:: html + + + +
    + Django   + How to Tango with Django   + Two Scoops of Django +
    + +You may not however wish for the same link styles across the entire webpage. For example, your navigation bar may have a dark background while the rest of your page has a light background. This would necessitate having different link stylings for the two areas of your webpage. The example below demonstrates how you can apply different link styles by using a slightly more complex CSS style selector. + +.. code-block:: css + + #dark { + background-color: black; + } + + #dark a { + color: white; + text-decoration: underline; + } + + #dark a:hover { + color: aqua; + } + + .light { + background-color: white; + } + + .light a { + color: black; + text-decoration: none; + } + + .light a:hover { + color: olive; + text-decoration: underline; + } + +We can then construct some simple markup to demonstrate these classes. + +.. code-block:: html + + + +
    + Bing Search +
    + +The resultant output looks similar to the example shown below. Again, hover over the links to see them change! + +.. raw:: html + + + +
    + + +
    + Bing Search +
    +
    + +With a small amount of CSS, you can make some big changes in the way your webpages appear to end users. + +The Cascade +----------- +It's worth pointing out where the *Cascading* in *Cascading Style Sheets* comes into play. You may have noticed in the example rendered output in Figure :num:`fig-css-render` that the red text is **bold**, yet no such property is defined in our ``h1`` style. This is a perfect example of what we mean by *cascading styles*. Most HTML elements have associated with them a *default style* which web browsers apply. For ``

    `` elements, the `W3C website provides a typical style that is applied `_. If you check the typical style, you'll notice that it contains a ``font-weight: bold;`` property and value pairing, explaining where the **bold** text comes from. As we define a further style for ``

    `` elements, typical property/value pairings *cascade* down into our style. If we define a new value for an existing property/value pairing (such as we do for ``font-size``), we *override* the existing value. This process can be repeated many times - and the property/value pairings at the end of the process are applied to the relevant element. Check out :num:`fig-css-cascading` for a graphical representation of the cascading process. + +.. _fig-css-cascading: + +.. figure:: ../images/css-cascading.png + :figclass: align-center + + Illustration demonstrating the *cascading* in *Cascading Style Sheets* at work. Take note of the ``font-size`` property in our ``h1`` style - it is overridden from the default value. The cascading styles produce the resultant style, shown on the right of the illustration. + +.. _css-course-reading-label: + +Additional Reading +------------------ +What we've discussed in this section is by no means a definitive guide to CSS. There are `300-page books `_ devoted to CSS alone! What we have provided you with here is a very brief introduction showing you the very basics of what CSS is and how you can use it. + +As you develop your web applications, you'll undoubtedly run into issues and frustrating problems with styling web content. This is part of the learning experience, and you still have a bit to learn. We strongly recommend that you invest some time trying out several online tutorials about CSS - there isn't really any need to buy a book (unless you want to). + +- The *W3C* `provides a neat tutorial on CSS `_, taking you by the hand and guiding you through the different stages required. They also introduce you to several new HTML elements along the way, and show you how to style them accordingly. + +- `W3Schools also provides some cool CSS tutorials `_. Instead of guiding you through the process of creating a webpage with CSS, *W3Schools* has a series of mini-tutorials and code examples to show you to to achieve a particular feature, such as setting a background image. We highly recommend that you have a look here. + +- `html.net has a series of lessons on CSS `_ which you can work through. Like W3Schools, the tutorials on *html.net* are split into different parts, allowing you to jump into a particular part you may be stuck with. + +- It's also worth having a look at `CSSeasy.com `_'s collection of tutorials, providing you with the basics on how to develop different kinds of page layouts. + +This list is by no means exhaustive, and a quick web search will indeed yield much more about CSS for you to chew on. Just remember: CSS can be tricky to learn, and there may be times where you feel you want to throw your computer through the window. We say this is pretty normal - but take a break if you get to that stage. We'll be tackling some more advanced CSS stuff as we progress through the tutorial in the next few sections. + +.. note:: With an increasing array of devices equipped with more and more powerful processors, we can make our web-based content do more. To keep up, `CSS has constantly evolved `_ to provide new and intuitive ways to express the presentational semantics of our SGML-based markup. To this end, support `for relatively new CSS properties `_ may be limited on several browsers, which can be a source of frustration. The only way to reliably ensure that your website works across a wide range of different browsers and platforms is to `test, test and test some more! `_ + + diff --git a/17/chapters/deploy.rst b/17/chapters/deploy.rst new file mode 100644 index 0000000..b8d32be --- /dev/null +++ b/17/chapters/deploy.rst @@ -0,0 +1,228 @@ +.. _deploy-label: + +Deploying Your Project +====================== + +This chapter provides a step-by-step guide on how to deploy your Django applications. We'll be looking at deploying applications on `PythonAnywhere `_, an online IDE and web hosting service. The service provides in-browser access to the server-based Python and Bash command line interfaces, meaning you can interact with PythonAnywhere's servers just like you would with a regular terminal instance on your own computer. Currently, PythonAnywhere are offering a free account which sets you up with an adequate amount of storage space and CPU time to get a Django application up and running. + +Creating a PythonAnywhere Account +--------------------------------- +First `sign up for a Beginner PythonAnywhere account `_. If your application takes off and becomes popular, you can always upgrade your account at a later stage to gain more storage space and CPU time along with a number of other benefits (like hosting specific domains and ssh abilities). + +Once your account has been created, you will have your own little slice of the World Wide Web at ``http://.pythonanywhere.com``, where ```` is your PythonAnywhere username. It is from this URL that your hosted application will be available from. + +The PythonAnywhere Web Interface +-------------------------------- +The PythonAnywhere web interface contains a *dashboard* which in turn provides a series of tabs allowing you to manage your application. The tabs as illustrated in Figure :num:`fig-deploy-pythonanywhere` include: + +* a *consoles* tab, allowing you to create and interact with Python and Bash console instances; +* a *files* tab, which allows you to upload to and organise files within your disk quota; +* a *web* tab, allowing you to configure settings for your hosted web application; +* a *schedule* tab, allowing you to setup tasks to be executed at particular times; and +* a *databases* tab, which allows you to configure a MySQL instance for your applications should you require it. + +Of the the five tabs provided, we'll be working primarily with the *consoles* and *web* tabs. The `PythonAnywhere wiki `_ provides a series of detailed explanations on how to use the other tabs. + +.. _fig-deploy-pythonanywhere: + +.. figure:: ../images/deploy-pythonanywhere.png + :figclass: align-center + + The PythonAnywhere dashboard, showing the *Consoles* tab. + + +.. _virtual-environment: + +Creating a Virtual Environment +------------------------------ +As part of a its standard installation, PythonAnywhere comes with a number of packages pre-installed (i.e Python 2.7.4 and Django 1.3). However, since we are using a different setup, we need to setup a virtual environment and run our application inside that. Since our code base is compatible with Python 2.7.4 we can continue use that, but we will have to set up our virtual environment to use Django 1.5.4. + +First, open a Bash console from the PythonAnywhere *Consoles* tab by clicking the *Bash* link. When the terminal is ready for you to interact, enter the following commands. + +:: + + $ source virtualenvwrapper.sh + $ mkvirtualenv rango + +The first command imports the virtual environment wrapper. The wrapper provides a series of extensions by `Doug Hellman `_ to the original ``virtualenv`` tool, making it easier for us to create, delete and use virtual environments. The second command creates a new virtual environment called ``rango``. This process should take a short while to create, after which you will be presented with a slightly different prompt. + +:: + + (rango)16:38 ~ $ + +Note the inclusion of ``(rango)`` compared to your previous command prompt. This signifies that we have activated the ``rango`` virtual environment, so any package installations will be done within that environment, leaving the wider system setup alone. If you then issue the command ``ls -la``, you will see that a directory called ``.virtualenvs`` has been created. This is the directory in which all of your virtual environments and associated packages will be stored. To confirm the setup, issue the command ``which pip``. This will print the location in which the active ``pip`` binary is located - hopefully within ``.virtualenvs`` and ``rango``, as shown in the example below. + +:: + + /home//.virtualenvs/test/bin/pip + +Now we can customise our virtual environment by installing the required packages for our Rango application. Installing may take a considerable amount of time to install as your CPU time is limited - so have some patience. Issue the following two commands within your console: + +:: + + $ pip install -U django==1.5.4 + $ pip install pil + + +After these have executed, check if Django has been installed with the command ``which django-admin.py``. You should receive output similar to the following example. We'll be using this virtual environment to work on the Rango application - whether we're synchronising the database or running population scripts. + +:: + + /home//.virtualenvs/rango/bin/django-admin.py + +.. note:: PythonAnywhere also provides instructions on how to setup virtual environments, see https://www.pythonanywhere.com/wiki/VirtualEnvForNewerDjango. + +Virtual Environment Switching +............................. +Moving between virtual environments can be done pretty easily. First you need to make sure that ``virtualenvwrapper.sh`` has been loaded by running ``source virtualenvwrapper.sh``. + +Rather than doing this each time you open up a console, you can add it to your ``.bashrc`` profile which is located in your home directory. Doing so will ensure the command is executed automatically for you every time you start a new Bash console instance. Any Bash consoles active will need to be closed for the changes to take effect. + +With this done, you can then launch into a pre-existing virtual environment with the ``workon`` command. To load up the rango environment, enter: + +:: + + 16:48 ~ $ workon rango + +where ``rango`` can be replaced with the name of the virtual environment you wish to use. Your prompt should then change to indicate you are working within a virtual environment. + +:: + + (rango) 16:49 ~ $ + + +You can then leave the virtual environment using the ``deactivate`` command. Your prompt should then be missing the ``(rango)`` prefix, with an example shown below. + +:: + + (rango) 16:49 ~ $ deactivate + 16:51 ~ $ + +Cloning your Git Repository +--------------------------- +Now that your virtual environment for Rango is all setup, you can now clone your Git repository to obtain a copy of your project's files. Clone your repository by issuing the following command from your home directory: + +:: + + $ git clone https://:@github.com//.git + +where you replace +- ```` with your GitHub username; +- ```` with your GitHub password; +- ```` with the username of the person who owns the repository; and +- ```` with the name of your project's repository. + + +If you haven't put your code in a Git repository, you can clone the version we have made, by issuing the following command: + +:: + + 16:54 ~ $ git clone https://github.com/leifos/tango_with_django.git + +.. note:: It doesn't matter if you clone your Git repository within your new virtual environment or not. You're only creating files within your disk quota, which doesn't require your special Python setup. + +Setting Up the Database +....................... +With your files cloned, you must then prepare your database. We'll be using the ``populate_rango.py`` module that we created earlier in the book. As we'll be running the module, you must ensure that you are using the ``rango`` virtual environment (workon rango). From your home directory, move into the ``tango_with_django`` directory, and issue the following commands + +:: + + + (rango) 16:55 ~/tango_with_django $ python manage.py syncdb + (rango) 16:56 ~/tango_with_django $ python populate_rango.py + +As discussed earlier in the book, the first command synchronises your database with your project's installed models, and the second populates the database with some sample data. + +Setting up your Web Application +------------------------------- +Now that the database is setup, we need to configure the PythonAnywhere NGINX webserver to serve up your application . Within PythonAnywhere's web interface, navigate to your *dashboard* and click on the *Web* tab. On the left of the page that appears, click *Add a new web app.* + +A popup box will then appear. Follow the instructions on-screen, and when the time comes, select the *manual configuration* option and complete the wizard. + +Then, navigate to the PythonAnywhere subdomain at ``http://.pythonanywhere.com`` in a new browser tab. You should be presented with the default ``Hello, World!`` webpage. This is because the WSGI script is currently serving up this page and not your Django application. + +Configuring the WSGI Script +........................... +The `Web Server Gateway Interface `_, a.k.a. WSGI provides a simple and universal interface between web servers and web applications. PythonAnywhere uses WSGI to bridge the server-application link and map incoming requests to your subdomain to your web application. + +To configure the WSGI script, navigate to the *Web* tab in PythonAnywhere's dashboard. From there, click the WSGI link located at the top of the page. The link should be preceded with text similar to ``It is configured via a WSGI file stored at:``. The good people at PythonAnywhere have set up a sample WSGI file for us with several possible configurations. For your web application, you'll need to configure the Django section of the file. The example below demonstrates a possible configuration for you application. + +.. code-block:: python + + # TURN ON THE VIRTUAL ENVIRONMENT FOR YOUR APPLICATION + activate_this = '/home//.virtualenvs/rango/bin/activate_this.py' + execfile(activate_this, dict(__file__=activate_this)) + + import os + import sys + + # ADD YOUR PROJECT TO THE PYTHONPATH FOR THE PYTHON INSTANCE + path = '/home//tango_with_django/tango_with_django_project' + + if path not in sys.path: + sys.path.append(path) + + os.chdir(path) + + # TELL DJANGO WHERE YOUR SETTINGS MODULE IS LOCATED + os.environ['DJANGO_SETTINGS_MODULE'] = 'tango_with_django_project.settings' + + # IMPORT THE DJANGO WSGI HANDLER TO TAKE CARE OF REQUESTS + import django.core.handlers.wsgi + application = django.core.handlers.wsgi.WSGIHandler() + +Ensure that you replace ```` with your username, and update any other path settings to suit your application. You should also remove all other code from the WSGI configuration script to ensure no conflicts take place. + +The code sample above begins by activating your virtual environment ``rango`` as this has been configured with all the required packages. The script then adds your project's directory to the ``PYTHONPATH`` for the Python instance that runs your web application. This allows Python to access your project's modules. If you have additional paths to add, you can easily insert them here. You can then specify the location of your project's ``settings.py`` module. The final step is to include the Django WSGI handler and invoke it for your application. + +When you have completed the WSGI configuration, click the *Save* button at the top-right of the webpage. Navigate back to the *Web* tab within the PythonAnywhere dashboard, and click the *Reload* button at the top of the page. When the application is reloaded, visiting ``http://.pythonanywhere.com`` should present you with your Django application, all ready to go! + +.. note:: During testing, we noted that you can sometimes receive ``HTTP 502 - Bad Gateway`` errors instead of your application. Try reloading your application again, and then waiting a longer. If the problem persists, try reloading again. If the problem still persists, check out your log files to see if any accesses/errors are occurring, before contacting the PythonAnywhere support. + + +Assigning Static Paths +...................... +We're almost there. One issue which we still have to address is to sort out paths for our application. Doing so will allow PythonAnywhere's servers to serve your static content, for example From the PythonAnywhere dashboard, click the *Web* tab and choose the subdomain hosting your application from the list on the left. + +Underneath the *Static files* header, perform the following. + +#. Click ``Enter URL`` and enter ``/static/admin``, followed by return. +#. Click the corresponding ``Enter path`` text. Set this to ``/home//.virtualenvs/rango/lib/python2.7/site-packages/django/contrib/admin/static/admin``, where ```` should be replaced with your PythonAnywhere username. You may also need to change ``rango`` if this is not the name of your application's virtual environment. Remember to hit return to confirm the path. +#. Repeat the two steps above for the URL ``/static/`` and path ``/home//tango_with_django/tango_with_django_project/static``, with the path setting pointing to the ``static`` directory of your web application. + +With these changes saved, reload your web application by clicking the *Reload* button at the top of the page. Don't forget about potential ``HTTP 502 - Bad Gateway`` errors! + + +Bing API Key +............ +Update ``bing_search.py`` with your own BING API Key to use the search functionality in Rango. Again, you will have to hit the *Reload* button for the changes to take effect. + +Turning off ``DEBUG`` Mode +.......................... +When you application is ready to go, it's a good idea to instruct Django that your application is now hosted on a production server. To do this, open your project's ``settings.py`` file and change ``DEBUG = True`` to ``DEBUG = False``. This disables `Django's debug mode `_, and removes explicit error messages. + +Changing the value of ``DEBUG`` also means you should set the ``ALLOWED_HOSTS`` property. Failing to perform this step will make Django return ``HTTP 400 Bad Request`` errors. Alter ``ALLOWED_HOSTS`` so that it includes your PythonAnywhere subdomain like in the example below. + +.. code-block:: python + + ALLOWED_HOSTS = ['.pythonanywhere.com'] + +Again, ensure ```` is changed to your PythonAnywhere username. Once complete, save the file and reload the application via the PythonAnywhere web interface. + +Log Files +--------- +Deploying your web application to another environment introduces another layer of complexity to your setup. Unfortunately, it most likely won't be all plain sailing and will possibly result in new errors or unsuspecting problems. In order for you to diagnose and rectify the issues you may encounter, PythonAnywhere provides you with three log files that can help provide vital clues. + +Log files can be viewed via the PythonAnywhere web interface by clicking on the *Web* tab, or by viewing the files in ``/var/log/`` within a Bash console instance. The files provided are: + +* ``access.log``, which provides a log of requests made to your subdomain; +* ``error.log``, which logs any error messages produced by your web application; and +* ``server.log``, providing log details for the UNIX processes running your application. + +Note that the names for each log file are prepended with your subdomain. For example, ``access.log`` will have the name ```_. We'd love to know you've succeeded! diff --git a/17/chapters/forms.rst b/17/chapters/forms.rst new file mode 100644 index 0000000..6ba7d07 --- /dev/null +++ b/17/chapters/forms.rst @@ -0,0 +1,306 @@ +.. _forms-label: + +Fun with Forms +============== +So far we have only presented data through the views and templates that we have created. In this chapter, we will run through how to capture data through web forms. Django comes with some neat form handling functionality, making it a pretty straightforward process to gather information from users and send it back to your web application. According to `Django's documentation on forms `_, the form handling functionality allows you to: + +#. display an HTML form with automatically generated *form widgets* (like a text field or date picker); +#. check submitted data against a set of validation rules; +#. redisplay a form in case of validation errors; and +#. convert submitted form data to the relevant Python data types. + +One of the major advantages of using Django's forms functionality is that it can save you a lot of time and HTML hassle. This part of the tutorial will look at how to implement the necessary infrastructure that will allow users of Rango to add categories and pages to the database via forms. + +Basic Workflow +-------------- +The basic steps involved in creating a form and allowing users to enter data via the form is as follows. + +#. If you haven't already got one, create a ``forms.py`` file within your Django application's directory to store form-related classes. +#. Create a ``ModelForm`` class for each model that you wish to represent as a form. +#. Customise the forms as you desire. +#. Create or update a view to handle the form - including *displaying* the form, *saving* the form data, and *flagging up errors* which may occur when the user enters incorrect data (or no data at all) in the form. +#. Create or update a template to display the form. +#. Add a ``urlpattern`` to map to the new view (if you created a new one). + +This workflow is a bit more complicated than previous workflows, and the views that we have to construct have a lot more complexity as well. However, once you undertake the process a few times it will be pretty clear how everything pieces together. + +Page and Category Forms +----------------------- +First, create a file called ``forms.py`` within the ``rango`` application directory. While this step is not absolutely necessary, as you could put the forms in the ``models.py``, this makes the codebase a lot cleaner and clearer to understand. + +Creating ``ModelForm`` Classes +.............................. +Within Rango's ``forms.py`` module, we will be creating a number of classes that inherit from Django's ``ModelForm``. In essence, `a ModelForm `_ is a *helper class* that allows you to create a Django ``Form`` from a pre-existing model. As we've already got two models defined for Rango (``Category`` and ``Page``), we'll create ``ModelForms`` for both. + +In ``rango/forms.py`` add the following code. + +.. code-block:: python + + from django import forms + from rango.models import Page, Category + + class CategoryForm(forms.ModelForm): + name = forms.CharField(max_length=128, help_text="Please enter the category name.") + views = forms.IntegerField(widget=forms.HiddenInput(), initial=0) + likes = forms.IntegerField(widget=forms.HiddenInput(), initial=0) + + # An inline class to provide additional information on the form. + class Meta: + # Provide an association between the ModelForm and a model + model = Category + + class PageForm(forms.ModelForm): + title = forms.CharField(max_length=128, help_text="Please enter the title of the page.") + url = forms.URLField(max_length=200, help_text="Please enter the URL of the page.") + views = forms.IntegerField(widget=forms.HiddenInput(), initial=0) + + class Meta: + # Provide an association between the ModelForm and a model + model = Page + + # What fields do we want to include in our form? + # This way we don't need every field in the model present. + # Some fields may allow NULL values, so we may not want to include them... + # Here, we are hiding the foreign key. + fields = ('title', 'url', 'views') + +Django provides us with a number of ways to customise the forms that are created on our behalf. In the code sample above, we've specified the widgets that we wish to use for each field to be displayed. For example, in our ``PageForm`` class, we've defined ``forms.CharField`` for the ``title`` field, and ``forms.URLField`` for ``url`` field. Both fields provide text entry for users. Note the ``max_length`` parameters we supply to our fields - the lengths that we specify are identical to the maximum length of each field we specified in the underlying data models. Go back to Chapter :ref:`model-label` to check for yourself, or have a look at Rango's ``models.py`` file. + +You will also notice that we have included several ``IntegerField`` entries for the views and likes fields in each form. Note that we have set the widget to be hidden with the parameter setting ``widget=forms.HiddenInput()``, and then set the value to zero with ``initial=0``. This is one way to set the field to zero without giving the control to the user as the field will be hidden, yet the form will provide the value to the model. However, as you can see in the ``PageForm``, despite the fact that we have a hidden field, we still need to include the field in the form. If in ``fields`` we excluded ``views``, then the form would not contain that field (despite it being specified) and so the form would not return the value zero for that field. This may raise an error depending on how the model has been set up. If in the models we specified that the ``default=0`` for these fields then we can rely on the model to automatically populate field with the default value - and thus avoid a ``not null`` error. In this case, it would not be necessary to have these hidden fields. Essentially, you need to be careful when you define your models and forms to make sure that form is going to contain and pass on all the data that is required to populate your model correctly. + +Besides the ``CharField`` and ``IntegerField`` widget, many more are available for use. As an example, Django provides ``EmailField`` (for e-mail address entry), ``ChoiceField`` (for radio input buttons), and ``DateField`` (for date/time entry). There are many other field types you can use, which perform error checking for you (e.g. *is the value provided a valid integer?*). We highly recommend you have a look at the `official Django documentation on widgets `_ to see what components exist and the arguments you can provide to customise them. + +Perhaps the most important aspect of a class inheriting from ``ModelForm`` is the need to define *which model we're wanting to provide a form for.* We take care of this through our nested ``Meta`` class. Set the ``model`` attribute of the nested ``Meta`` class to the model you wish to use. For example, our ``CategoryForm`` class has a reference to the ``Category`` model. This is a crucial step enabling Django to take care of creating a form in the image of the specified model. It will also help in handling flagging up any errors along with saving and displaying the data in the form. + +We also use the ``Meta`` class to specify which fields that we wish to include in our form through the ``fields`` tuple. Use a tuple of field names to specify the fields you wish to include. + +.. note:: We highly recommend you check out the `official Django documentation on forms `_ for further information about how to customise them. + +Creating an *Add Category* View +............................... +With our ``CategoryForm`` class now defined, we're now ready to create a new view to display the form and handle the posting of form data. To do this, add the following code to ``rango/views.py``. + +.. code-block:: python + + from rango.forms import CategoryForm + + def add_category(request): + # Get the context from the request. + context = RequestContext(request) + + # A HTTP POST? + if request.method == 'POST': + form = CategoryForm(request.POST) + + # Have we been provided with a valid form? + if form.is_valid(): + # Save the new category to the database. + form.save(commit=True) + + # Now call the index() view. + # The user will be shown the homepage. + return index(request) + else: + # The supplied form contained errors - just print them to the terminal. + print form.errors + else: + # If the request was not a POST, display the form to enter details. + form = CategoryForm() + + # Bad form (or form details), no form supplied... + # Render the form with error messages (if any). + return render_to_response('rango/add_category.html', {'form': form}, context) + +The new ``add_category()`` view adds several key pieces of functionality for handling forms. First, we access the context surrounding the HTTP request. This then allows us to determine the type of request being made - whether it is a HTTP ``GET`` or ``POST``. This allows us to handle different requests appropriately - whether we want to show a form (i.e. on ``GET``), or process form data (i.e. on ``POST``) - all from the same URL. The ``add_category()`` view function can handle three different scenarios: + +- showing a new, blank form for adding a category; +- saving form data provided by the user to the associated model, and rendering the Rango homepage; and +- if there are errors, redisplay the form with error messages. + +.. note:: + + What do we mean by ``GET`` and ``POST``? They are two different types of *HTTP requests*. + + - A HTTP ``GET`` is used to *request a representation of the specified resource.* In other words, we use a HTTP ``GET`` to retrieve a particular resource, whether it is a webpage, image or other file. + - In contrast, a HTTP ``POST`` *submits data from the client's web browser to be processed.* This type of request is used for example when submitting the contents of a HTML form. + - Ultimately, a HTTP ``POST`` may end up being programmed to create a new resource (e.g. a new database entry) on the server. This can later be accessed through a HTTP ``GET`` request. + +Django's form handling machinery processes the data returned from a user's browser via a HTTP ``POST`` request. It not only handles the saving of form data into the chosen model, but will also automatically generate any error messages for each form field (if any are required). This means that Django will not store any submitted forms with missing information which could potentially cause problems for your database's referential integrity. For example, supplying no value in the category name field will return an error, as the field cannot be blank. + +You'll notice from the line in which we call ``render_to_response()`` that we refer to a new template called ``add_category.html`` which will contain the relevant Django template code and HTML for the form and page. + +Creating the *Add Category* Template +.................................... +Create the file ``templates/rango/add_category.html``. Within the file, add the following HTML markup and Django template code. + +.. code-block:: html + + + + + Rango + + + +

    Add a Category

    + + + + {% csrf_token %} + {% for hidden in form.hidden_fields %} + {{ hidden }} + {% endfor %} + + {% for field in form.visible_fields %} + {{ field.errors }} + {{ field.help_text }} + {{ field }} + {% endfor %} + + + + + + + +Now, what does this code do? You can see that within the ```` of the HTML page that we place a ``
    `` element. Looking at the attributes for the ```` element, you can see that all data captured within this form is sent to the URL ``/rango/add_category/`` as a HTTP ``POST`` request (the ``method`` attribute is case insensitive, so you can do ``POST`` or ``post`` - both provide the same functionality). Within the form, we have two for loops - one controlling *hidden* form fields, the other *visible* form fields - with visible fields controlled by the ``fields`` attribute of your ``ModelForm`` ``Meta`` class. These loops produce HTML markup for each form element. For visible form fields, we also add in any errors that may be present with a particular field and help text which can be used to explain to the user what he or she needs to enter. + +.. note:: The need for hidden as well as visible form fields is necessitated by the fact that HTTP is a stateless protocol. You can't persist state between different HTTP requests which can make certain parts of web applications difficult to implement. To overcome this limitation, hidden HTML form fields were created which allow web applications to pass important information to a client (which cannot be seen on the rendered page) in a HTML form, only to be sent back to the originating server when the user submits the form. + +You should also take note of the code snippet ``{% csrf_token %}``. This is a *Cross-Site Request Forgery (CSRF) token*, which helps to protect and secure the HTTP ``POST`` action that is initiated on the subsequent submission of a form. *The CSRF token is required by the Django framework. If you forget to include a CSRF token in your forms, a user may encounter errors when he or she submits the form.* Check out the `official Django documentation on CSRF tokens `_ for more information about this. + +Mapping the *Add Category* View +............................... +Now we need to map the ``add_category()`` view to a URL. In the template we have used the URL ``/rango/add_category/`` in the form's submit attribute. So we will need to follow suit in ``rango/urls.py`` and modify the ``urlpatterns`` as follows. + +.. code-block:: python + + urlpatterns = patterns('', + url(r'^$', views.index, name='index'), + url(r'^about/$', views.about, name='about'), + url(r'^add_category/$', views.add_category, name='add_category'), # NEW MAPPING! + url(r'^category/(?P\w+)$', views.category, name='category'),) + +Ordering doesn't necessarily matter in this instance. However, take a look at the `official Django documentation on how Django process a request `_ for more information. Our new URL for adding a category is ``/rango/add_category/``. + +Modifying the Index Page View +............................. +As a final step let's put a link on the index page so that we can easily add categories. Edit the template ``rango/index.html`` and add the following HTML hyperlink just before the ```` closing tag. + +.. code-block:: html + + Add a New Category + +Demo +.... +Now let's try it out! Run your Django development server, and navigate to ``http://127.0.0.1:8000/rango/``. Use your new link to jump to the add category page, and try adding a category. Figure :num:`fig-rango-form-steps` shows screenshots of the of the Add Category and Index Pages. + +.. _fig-rango-form-steps: + +.. figure:: ../images/rango-form-steps.png + :figclass: align-center + + Adding a new category to Rango with our new form. The diagram illustrates the steps involved. + +Cleaner Forms +............. +Recall that our ``Page`` model has a ``url`` attribute set to an instance of the ``URLField`` type. In a corresponding HTML form, Django would reasonably expect any text entered into a ``url`` field to be a well-formed, complete URL. However, users can find entering something like ``http://www.url.com`` to be cumbersome - indeed, users `may not even know what forms a correct URL `_! + +In scenarios where user input may not be entirely correct, we can *override* the ``clean()`` method implemented in ``ModelForm``. This method is called upon before saving form data to a new model instance, and thus provides us with a logical place to insert code which can verify - and even fix - any form data the user inputs. In our example above, we can check if the value of ``url`` field entered by the user starts with ``http://`` - and if it doesn't, we can prepend ``http://`` to the user's input. + +.. code-block:: python + + class PageForm(forms.ModelForm): + + ... + + def clean(self): + cleaned_data = self.cleaned_data + url = cleaned_data.get('url') + + # If url is not empty and doesn't start with 'http://', prepend 'http://'. + if url and not url.startswith('http://'): + url = 'http://' + url + cleaned_data['url'] = url + + return cleaned_data + +Within the ``clean()`` method, a simple pattern is observed which you can replicate in your own Django form handling code. + +#. Form data is obtained from the ``ModelForm`` dictionary attribute ``cleaned_data``. +#. Form fields that you wish to check can then be taken from the ``cleaned_data`` dictionary. Use the ``.get()`` method provided by the dictionary object to obtain the form's values. If a user does not enter a value into a form field, its entry will not exist in the ``cleaned_data`` dictionary. In this instance, ``.get()`` would return ``None`` rather than raise a ``KeyError`` exception. This helps your code look that little bit cleaner! +#. For each form field that you wish to process, check that a value was retrieved. If something was entered, check what the value was. If it isn't what you expect, you can then add some logic to fix this issue before *reassigning* the value in the ``cleaned_data`` dictionary for the given field. +#. You *must* always end the ``clean()`` method by returning the reference to the ``cleaned_data`` dictionary. If you don't, you'll get some really frustrating errors! + +This trivial example shows how we can clean the data being passed through the form before being stored. This is pretty handy, especially when particular fields need to have default values - or data within the form is missing, and we need to handle such data entry problems. + +.. note:: Overriding methods implemented as part of the Django framework can provide you with an elegant way to add that extra bit of functionality for your application. There are many methods which you can safely override for your benefit, just like the ``clean()`` method in ``ModelForm`` as shown above. Check out `the Official Django Documentation on Models `_ for more examples on how you can override default functionality to slot your own in. + +Exercises +--------- +Now that you've worked through the chapter, try these exercises to solidify your knowledge on Django's form functionality. + +- What happens when you don't enter in a category name on the add category form? +- What happens when you try to add a category that already exists? +- What happens when you visit a category that does not exist? +- How could you gracefully handle when a user visits a category that does not exist? +- Undertake the `part four of the official Django Tutorial `_ if you have not done so already to reinforce what you have learnt here. + +.. _forms-add-pages-view-label: + +Creating an *Add Pages* View, Template and URL Mapping +....................................................... +A next logical step would be to allow users to add pages to a given category. To do this, repeat the same workflow above for Pages - create a new view (and URL mapping), a new template, the URL mapping and then a link from the category page. To get you started, here's the view logic for you. + +.. code-block:: python + + from rango.forms import PageForm + + def add_page(request, category_name_url): + context = RequestContext(request) + + category_name = decode_url(category_name_url) + if request.method == 'POST': + form = PageForm(request.POST) + + if form.is_valid(): + # This time we cannot commit straight away. + # Not all fields are automatically populated! + page = form.save(commit=False) + + # Retrieve the associated Category object so we can add it. + # Wrap the code in a try block - check if the category actually exists! + try: + cat = Category.objects.get(name=category_name) + page.category = cat + except Category.DoesNotExist: + # If we get here, the category does not exist. + # Go back and render the add category form as a way of saying the category does not exist. + return render_to_response('rango/add_category.html', {}, context) + + # Also, create a default value for the number of views. + page.views = 0 + + # With this, we can then save our new model instance. + page.save() + + # Now that the page is saved, display the category instead. + return category(request, category_name_url) + else: + print form.errors + else: + form = PageForm() + + return render_to_response( 'rango/add_page.html', + {'category_name_url': category_name_url, + 'category_name': category_name, 'form': form}, + context) + +Hints +..... +To help you with the exercises above, the following hints may be of some use to you. + +* Update the ``category()`` view to pass ``category_name_url`` by inserting it to the view's ``context_dict`` dictionary. +* Update the ``category.html`` with a link to ``/rango/category//add_page/``. Ensure that the link only appears when *the requested category exists* - with or without pages. +* Update ``rango/urls.py`` with a URL mapping to handle the above link. +* In the sample code above, we make use of the ``decode_url()`` function created in Chapter :ref:`model-using-label`. If you haven't created this function, you'll need to do so now. diff --git a/17/chapters/game.rst.out b/17/chapters/game.rst.out new file mode 100644 index 0000000..b0c9ced --- /dev/null +++ b/17/chapters/game.rst.out @@ -0,0 +1,46 @@ +Sessions and Cookies: A Search Game +=================================== + +* This part of the tutorial focus on Working with sessions and cookies. +* The aim is to add a game to the application which is like PageHunt/Fu-Finder/PageFetch +* In the game, a player will be able to choose a category +* Then they will be shown a random page from the category, using search functionality they will need to enter a query to find the page. +* They have up to 5 attempts to find the page, and they are shown 5 random pages. + + +Setting up the game +------------------- + +Creating a Game Model +..................... + + +Creating a Game View/Template +............................. + +* Select Category +* Select/Define number of pages (i.e. game length) +* Set Cookie with GameID + +* Add a record into the Game Model (this player is play a game in a certain category) +* Initial the game values + +Creating a Game Play View/Template +.................................. + +* Get Game object for the player (using GameID from cookie) + + + +Creating an End Game View/Template +.................................. + + +Lab Exercises +------------- +* Add a Leaderboard View/Template +* Create a game that is time based (i.e. times out after 3 minutes) + + + + diff --git a/17/chapters/git.rst b/17/chapters/git.rst new file mode 100644 index 0000000..103a336 --- /dev/null +++ b/17/chapters/git.rst @@ -0,0 +1,265 @@ +.. _git-crash-course: + +A Git Crash Course +------------------ +We strongly recommend that you spend some time familiarising yourself with a version control system. For your benefit, this section provides you with a crash course in how to use `Git `_, one of the many version control systems available. Originally developed by `Linus Torvalds `_, Git is today very popular, and is used by open-source and closed-source projects alike. + +This tutorial demonstrates at a high level how Git works, explains the basic commands that you can use, and provides an explanation of Git's workflow. + +Why Use Version Control? +************************ +As your software engineering skills develop, you will find that you are able to plan and implement ever more complex solutions to ever more complex problems. As a rule of thumb, the larger the problem specification, the more code you have to write. The more code you write, the greater the emphasis you should put on software engineering practices. Such practices include the use of design patterns and the DRY (don't repeat yourself) principle. + +Most projects have many files and many people working on those files. This is a recipe for chaos. Have you ever encountered one or more of the following situations: + +* Made a change to code, realised it was a mistake and wanted to go back? +* Lost code (through a faulty drive), or had a backup that was too old? +* Had to maintain multiple versions of a product (perhaps for different organisations)? +* Wanted to see the difference between two (or more) versions of your codebase? +* Wanted to show that a particular change broke of fixed a piece of code? +* Wanted to submit a change (patch) to someone else's code? +* Wanted to see how much work is being done (where it was done, when it was done, or who did it)? +* Wanted to experiment with a new feature without interfering without working code? + +Using a version control system makes your life easier in *all* of the above cases. While using version control systems at the beginning may seem like a hassle it will pay off later - so get into the habit now. + +Git on Windows +************** +Like Python, Git doesn't come as part of a standard Windows installation. However, Windows implementations of the version control system can be downloaded and installed. You can download the official Windows Git client from the Git `website `_. The installer provides the ``git`` command line program, which we use in this crash course. + +You can also download a program called *TortoiseGit*, a graphical extension to the Windows Explorer shell. The program provides a really nice right-click Git context menu for files. This makes version control really easy to use. You can `download TortoiseGit from here `_. Although we do not cover TortoiseGit in this crash course, many tutorials exist online for it. Check `this TortoiseGit tutorial `_ if you are interested in using it. + +The Git System +************** +Essentially, Git comprises of four separate storage locations: your *workspace*, the local *index*, the *local repository* and the *remote repository*. As the name may suggest, the remote repository is stored on some remote server - and is the only part of Git stored outwith your computer. This is considered a huge advantage of Git - you can make changes to your local repository when you may not have Internet access, and then apply those changes to the remote repository at a later stage. + +.. note:: We keep repeating the word *repository*, but what do we actually mean by that? In the context of version control systems, consider a repository as a form of data structure that contains a set of *commit objects*, and a set of references to commit objects, called *heads*. You can find out more about what these are on `this Git tutorial `_ - and we will be explaining what the terminology for head means later on. + +For now though, the following bullet points provide an explanation of each part of the Git system. + +* As already explained, the *remote repository* is the copy of your project's repository stored on some remote server. This is particularly important for Git projects that have more than one contributor - you require a central place to store all the work that your team members produce. If you're feeling adventurous, you can set up a Git server on a computer with Internet access and a properly configured firewall (check out `this Git server tutorial `_, for example), or use one of many services providing free Git repositories. One of the most widely-used services available today is `GitHub `_. In fact, this book has a Git `repository `_ on GitHub! + +* The *local repository* is a copy of the remote repository. The key difference however is that the local repository is stored on your own computer. It is to this repository you make all your additions, changes and deletions. When you reach a particular milestone, you can then push all your local changes to the remote repository. From there, you can instruct your team members to retrieve your changes. This concept is known as *pulling* from the remote repository, and we will explain that in a bit more detail later. + +* The *index* is technically part of the local repository. The index stores a list of files that you want to be managed with version control. This is explained in more detail in the commands and workflow section. You can have a look `here `_ to see a discussion on what exactly a Git index contains. + +* The final aspect of Git is your *workspace*. Think of this folder or directory as the place on your computer where you make changes to your version controlled files. From within your workspace, you can add new files or modify or remove previously existing ones. From there, you then instruct Git to update the repositories to reflect the changes you make in your workspace. This is important - *don't modify code inside the local repository - only ever edit files in your workspace.* The local repository contains a load of files that Git uses to keep track of your version controlled content. If you start messing around with these files, you'll more than likely break something! + +Next, we'll be looking at how to get your Git workspace set up. We'll also discuss the basic workflow you should use when using Git. + +Setting up Git +************** +Setting up your Git workspace is a straightforward process. Once everything is set up, you will begin to make sense of the directory structure that Git uses. Assume that you have signed up for a new account on `GitHub `_ and `created a new repository on the service `_ for your project. With your remote repository setup, follow these steps to get your local repository and workspace setup on your computer. We'll assume you will be working from your ```` directory. + +#. Open a terminal and navigate to your home directory (e.g. ``cd ~``). +#. *Clone* the remote repository - or in other words, make a copy of it. Check out how to do this below. +#. Navigate into the newly created directory. That's your workspace in which you can add files to be version controlled! + +.. _requirements-git-clone-label: + +How to Clone a Remote Repository +................................ +Cloning your repository is a straightforward process with the ``git clone`` command. Supplement this command with the URL of your remote repository - and if required, authentication details, too. The URL of your repository varies depending on the provider you use. If you are unsure of the URL to enter, it may be worth querying it with your search engine or asking someone in the know. + +For GitHub, try the following command, replacing the parts below as appropriate: + +``$ git clone https://:@github.com//.git `` + +where you replace + - ```` with your GitHub username; + - ```` with your GitHub password; + - ```` with the username of the person who owns the repository; + - ```` with the name of your project's repository; and + - ```` with the name for your workspace directory. Although optional, we will specify it here to create the ```` directory. + +If all is successful, you should see some positive messages in your terminal or Command Prompt alerting you to the fact that the clone has been successful. + +The Directory Structure +....................... +Once you have cloned your remote repository onto your local computer, navigate into the directory with your terminal, Command Prompt or GUI file browser. If you have cloned an empty repository the workspace directory should appear empty. This directory is therefore your blank workspace with which you can begin to add files for your project. + +However, the directory isn't blank at all! On closer inspection, you will notice a hidden directory called ``.git``. Stored within this directory are both the local repository and index. Do not alter the contents of the ``.git`` directory. Doing so could damage your Git setup - and break version control functionality. *Your newly-created workspace directory therefore contains the workspace, local repository and index.* + +Final Tweaks +............ +With your workspace setup, now would be a good time to make some final tweaks. Here, we discuss two cool features you can try which could make your life (and your team members') a little bit easier. + +When using your Git repository as part of a team, any changes you make will be associated with the username you use to access your remote Git repository. However, you can also specify your full name and e-mail address to be included with changes that are made by you on the remote repository. This is really easy to do. Simply open a Command Prompt/terminal and navigate to your workspace. From there, issue two commands: one to tell Git your full name, and the other to tell Git your e-mail address. + +``$ git config user.name "John Doe"`` + +``$ git config user.email "johndoe123@me.com"`` + +Obviously, replace the example name and e-mail address with your own. We don't want random commits from some guy called John Doe! How unlucky would it be if you were actually called John Doe? + +Anyway, moving on to the second feature. Git provides you with the capability to stop - or ignore - particular files from being added to version control. For example, you may not wish a file containing unique keys to access web services from being added to version control. If the file were to be added to the remote repository, anyone could theoretically access the file by cloning the repository. + +With Git, files can be ignored by including them in the ``.gitignore`` file. This file which should reside in the root of your workspace. When adding files to version control, Git parses this file. If a file that is being added to version control is listed within ``.gitignore``, the file is ignored. Each line of ``.gitignore`` should be a separate file entry. Check out the following example: + +``config/api_keys.py`` + +``*.pyc`` + +In this example file, there are two entries. The first one prompts git to ignore the file ``api_keys.py`` residing within the ``config`` directory. The second entry prompts Git to ignore *all* instance of files with a ``.pyc`` extension. This is really cool: you can use *wildcards* to make generic entries if you need to! + +Basic Commands and Workflow +*************************** +With your repository cloned and ready to go on your local computer, you're ready to get to grips with the Git workflow. This section shows you the basic Git workflow - and the associated Git commands you can issue. + +.. _fig-git-sequence: + +.. figure:: ../images/git-sequence.svg + :figclass: align-center + + A diagram depicting the basic workflow and associated commands of interacting with a Git repository. + +We have provided a pictorial representation of the basic Git workflow in Figure :num:`fig-git-sequence`. Match each of the numbers in the blue circles to the numbered descriptions below. + +1. Starting Off +............... +Before you can start work on your project, you must prepare Git for your forthcoming geek session. If you haven't yet sorted out your project's Git workspace, you'll need to ``clone`` the repository to obtain a copy of all of its files. Check out Section :ref:`requirements-git-clone-label` for more information on how to achieve this. + +If you have previously made a clone of the remote repository, it's good practice to get into the habit of updating you local copy by using the ``git pull`` command. This 'pulls' changes from the remote repository. By doing this, you'll be working from the same page as your team members, which will help keep the issue of conflicting file contents from making your life a nightmare. + +2. Doing Some Work! +................... +Once your workspace has been updated with the latest changes, the onus is on you to do some work! Within your workspace, you can take existing files and modify them. You can delete them too, or add new files to be version controlled. + +It's not all plain sailing, however. You must be aware that as you work away, you need to keep Git up-to-date on the list of files you have added, removed or updated by modifying the *local index*. The list of files stored within the local index are then used to perform your next *commit*, which we'll be discussing in the next step. To keep Git informed, there are several Git commands which let you update the local index. Three of the commands are near-identical to those that were discussed in Chapter :ref:`requirements-label`, with the addition of a ``git`` prefix. + +- The first command ``git add`` allows you to request Git to add a particular file to the next commit for you. A common newbie mistake is to assume that ``git add`` is used for adding new files to your repository only - *this is not the case! You must tell Git what modified files you wish to commit, too!* The command can be used in the fashion ``git add ``, where ```` is the name of the file you wish to add to your next commit. Multiple files and directories can be added with the command ``git add .`` - `but be careful with this `_! + +- ``git mv`` performs the same function as the Unix ``mv`` command - it moves files. The only difference between the two is that ``git mv`` updates the local index for you before moving the file. Specify the filename with the syntax ``git mv ``. For example, with this command you can move files to a different directory within your repository. This will be reflected in your next commit. + +- ``git cp`` allows you to make a copy of a file or directory while adding references to the new files into the local index for you. The syntax is the same as ``git mv`` above where the filename or directory name is specified thus: ``git cp ``. + +- The command ``git rm`` adds a file or directory delete request into the local index. While the ``git rm`` command does not delete the file straight away, the requested file or directory is removed from your filesystem and the Git repository upon the next commit. The syntax is the same as the above commands, where a filename can be specified thus: ``git rm ``. Note that you can add a large number of requests to your local index in one go, rather than removing each file manually. For example, ``git rm -rf media/`` creates delete requests in your local index for the ``media/`` directory. The ``r`` switch enables Git to *recursively* remove each file within the ``media/`` directory, while ``f`` allows Git to *forcibly* remove the files. Check out the `Wikipedia page `_ on the ``rm`` command for more information. + +Lots of changes between commits can make things pretty confusing. You may easily forgot what files you've already instructed Git to remove, for example. Fortunately, you can run the ``git status`` command to see a list of files which have been modified from your current working directory, but haven't been added to the local index for processing. Check out typical output from the command below to get a taste of what you can see. + +.. code-block:: python + + $ git status + + # On branch master + # Changes to be committed: + # (use "git reset HEAD ..." to unstage) + # + # modified: chapters/requirements.rst + # + # Changes not staged for commit: + # (use "git add/rm ..." to update what will be committed) + # (use "git checkout -- ..." to discard changes in working directory) + # + # modified: ../TODO.txt + # modified: chapters/deploy.rst + # deleted: chapters/index.rst + # deleted: images/css-font.png + # modified: images/git-sequence.pdf + # modified: omnigraffle/git-sequence.graffle + # + +For further information on this useful command, check out the `official Git documentation `_. + +3. Committing your Changes +.......................... +We've mentioned *committing* several times in the previous step - but what on earth does it mean? In the world of Git, committing is when you save changes - which are listed in the local index - that you have made within your workspace. The more often you commit, the greater the number of opportunities you'll have to revert back to an older version of your code if things go disastrously wrong! Make sure you commit often - but don't commit an incomplete or broken version of a particular module or function! There's a lot of online discussion about when the ideal time to commit is - `have a look on this Stack Overflow page `_ for the opinions of several developers. + +To commit, you issue the ``git commit`` command. Any changes to existing files that you have indexed will be saved to version control at this point. Additionally, any files that you've requested to be copied, removed, moved or added to version control via the local index will be undertaken at this point. When you commit, you are updating the *HEAD* of your local repository. The HEAD is essentially the *latest commit at the top of the pile* - have a look at `this Stack Overflow page `_ for more information. + +As part of a commit, it's incredibly useful to your future self and others to explain why you committed when you did. You can supply an optional message with your commit if you wish to do so - though we highly recommend it. Instead of simply issuing ``git commit``, run the following amended command. + +``$ git commit -m "Updated helpers.py to include a Unicode conversion function, str_to_unicode()."`` + +From the example above, you can see that using the ``-m`` switch followed by a string provides you with the opportunity to append a message to your commit. Be as explicit as you can, but don't write too much. People want to see at a glance what you did, and do not want to be bored with a long essay. At the same time, don't be too vague. Simply specifying ``Updated helpers.py`` may tell a developer what file you modified, but they will require further investigation to see exactly what you changed. + +.. note:: Although frequent commits may be a good thing, you will want to ensure that what you have written actually *works* before you commit. This may sound silly, but it's an incredibly easy thing to not think about. Committing code which doesn't actually work can be infuriating to your team members if they then rollback to a version of your project's codebase which is broken! + +4. Synchronising your Repository +................................ +After you've committed your local repository and committed your changes, you're just about ready to send your commits to the remote repository by *pushing* your changes. However, what if someone within your group pushes their changes before you do? This means your local repository will be out of sync with the remote repository, making any ``git push`` command very difficult to do! + +It's therefore always a good idea to check whether changes have been made on the remote repository before updating it. Running a ``git pull`` command will pull down any changes from the remote repository, and attempt to place them within your local repository. If no changes have been made, you're clear to push your changes. If changes have been made and cannot be easily rectified, you'll need to do a little bit more work. + +In scenarios such as this, you have the option to *merge* changes from the remote repository. After running the ``git pull`` command, a text editor will appear in which you can add a comment explaining why the merge is necessary. Upon saving the text document, Git will merge the changes in the remote repository to your local repository. + +.. note:: If you do see a text editor on your Mac or Linux installation, it's probably the `vi `_ text editor. If you've never used vi before, check out `this helpful page containing a list of basic commands `_ on the Colorado State University Computer Science Department website. If you don't like vi, `you can change the default text editor `_ that Git calls upon. Windows installations most likely will bring up Notepad. + +5. Pushing your Commit(s) +......................... +*Pushing* is the phrase used by Git to describe the sending of any changes in your local repository to the remote repository. This is the way in which your changes become available to your other team members, who can then retrieve them by running the ``git pull`` command in their respective local workspaces. The ``git push`` command isn't invoked as often as committing - *you require one or more commits to perform a push.* You could aim for one push per day, when a particular feature is completed, or at the request of a team member who is desperately after your updated code. + +To push your changes, the simplest command to run is: + +``$ git push origin master`` + +As explained on `this Stack Overflow question and answer page `_, this command instructs the ``git push`` command to push your local master branch (where your changes are saved) to the *origin* (the remote server from which you originally cloned). If you are using a more complex setup involving `branching and merging `_, alter ``master`` to the name of the branch you wish to push. + +If what you are pushing is particularly important, you can also optionally alert other team members to the fact they should really update their local repositories by pulling your changes. You can do this through a *pull request.* Issue one after pushing your latest changes by invoking the command ``git request-pull master``, where master is your branch name (this is the default value). If you are using a service such as GitHub, the web interface allows you to generate requests without the need to enter the command. Check out `the official GitHub website's tutorial `_ for more information. + +Recovering from Mistakes +************************ +This section presents a solution to a coder's worst nightmare: what if you find that your code no longer works? Perhaps a refactoring went terribly wrong, someone changed something, or everything is so terribly messed up you have no idea what happened. Whatever the reason, using a form of version control always gives you a last resort: rolling back to a previous commit. This section details how to do just that. We follow the information given from `this Stack Overflow `_ question and answer page. + +.. warning:: You should be aware that this guide will rollback your workspace to a previous iteration. Any uncommitted changes that you have made will be lost, with a very slim chance of recovery! Be wary. If you are having a problem with only one file, you could always view the different versions of the files for comparison. Have a look `at this Stack Overflow page `_ to see how to do that. + +Rolling back your workspace to a previous commit involves two distinct steps: + +- determining which commit to roll back to; and +- performing the rollback. + +To determine what commit to rollback to, you can make use of the ``git log`` command. Issuing this command within your workspace directory will provide a list of recent commits that you made, your name and the date at which you made the commit. Additionally, the message that is stored with each commit is displayed. This is where it is highly beneficial to supply commit messages that provide enough information to explain what is going on. Check out the following output from a ``git log`` invocation below to see for yourself. + +:: + + commit 88f41317640a2b62c2c63ca8d755feb9f17cf16e <- Commit hash + Author: John Doe <- Author + Date: Mon Jul 8 19:56:21 2013 +0100 <- Date/time + + Nearly finished initial version of the requirements chapter <- Message + + commit f910b7d557bf09783b43647f02dd6519fa593b9f + Author: John Doe + Date: Wed Jul 3 11:35:01 2013 +0100 + + Added in the Git figures to the requirements chapter. + + commit c97bb329259ee392767b87cfe7750ce3712a8bdf + Author: John Doe + Date: Tue Jul 2 10:45:29 2013 +0100 + + Added initial copy of Sphinx documentation and tutorial code. + + commit 2952efa9a24dbf16a7f32679315473b66e3ae6ad + Author: John Doe + Date: Mon Jul 1 03:56:53 2013 -0700 + + Initial commit + +From this list, you can choose a commit to rollback to. For the selected commit, you must take the commit hash - the long string of letters and numbers. To demonstrate, the top (or HEAD) commit hash in the example output above is ``88f41317640a2b62c2c63ca8d755feb9f17cf16e``. You can select this in your terminal and copy it to your computer's clipboard. + +With your commit hash selected, you can now rollback your workspace to the previous revision. You can do this with the ``git checkout`` command. The following example command would rollback to the commit with hash ``88f41317640a2b62c2c63ca8d755feb9f17cf16e``. + +``$ git checkout 88f41317640a2b62c2c63ca8d755feb9f17cf16e .`` + +Make sure that you run this command from the root of your workspace, and do not forget to include the dot at the end of the command! The dot indicates that you want to apply the changes to the entire workspace directory tree. After this has completed, you should then immediately commit with a message indicating that you performed a rollback. Push your changes and alert your team members. From there, you can start to recover from the mistake by putting your head down and getting on with your project. + +Exercises +********* +If you haven't undertaken what we've been discussing in this chapter already, you should go through everything now to ensure your system and repository is ready to go. + +First, ensure that you have setup your environment correctly. Install all of the prerequisites, including Python 2.7.5 and Django 1.5.4. Django should be installed by Pip, the package manager. + +Once that is complete, create a new Git repository on Github for your project. To try out the commands, you can create a new file ``readme.md`` in the root of your workspace. The file `will be used by GitHub `_ to provide information on your project's GitHub homepage. + +- Create the file, and write some introductory text to your project. +- Add the file to the local index upon completion of writing, and commit your changes. +- Push the new file to the remote repository and observe the changes on the GitHub website. + +Once you have completed these basic steps, you can then go back and edit the file some more. Add, commit and push - and then try to revert to the initial version to see if it all works as expected. + + +Upon completion of these exercises, all that is left for us to discuss is the environment you just setup. While all may be good just now, what if you have another Python application that requires a different version to run? This is where the concept of `virtual environments `_ comes into play. Virtual environments allow multiple installations of Python and their relevant packages to exist in harmony, without disrupting one another. This is the generally accepted approach to configuring a Python setup nowadays. We don't go into much detail about them in this chapter now but you will be using a virtual environment when it comes to deploying your application. For now though, `check out this article `_ to read up on what they are, and how they can benefit you. + +.. note:: There are many more advanced aspects of Git that we have not covered here, such as branching and merging. There are many fantastic tutorials available online if you are interested in taking your super-awesome version control skills a step further. For more details about such features take a look at this `tutorial on getting started with Git `_, the `Git Guide `_ or `Learning about Git Branching `_. + diff --git a/17/chapters/javascript.rst b/17/chapters/javascript.rst new file mode 100644 index 0000000..42b8d71 --- /dev/null +++ b/17/chapters/javascript.rst @@ -0,0 +1,3 @@ +Javascript and JQuery +--------------------- +In the next edition we'll be adding in tutorials on how to use Javascript and JQuery within Web Application. \ No newline at end of file diff --git a/17/chapters/login.rst b/17/chapters/login.rst new file mode 100644 index 0000000..f61e587 --- /dev/null +++ b/17/chapters/login.rst @@ -0,0 +1,606 @@ +.. _login-label: + +User Authentication +=================== +The aim of this next part of the tutorial is to get you familiar with the user authentication mechanisms provided by Django. We'll be using the ``auth`` application provided as part of a standard Django installation in package ``django.contrib.auth``. According to `Django's official documentation on Authentication `_, the application consists of the following aspects. + +- *Users.* +- *Permissions:* a series of binary flags (e.g. yes/no) determining what a user may or may not do. +- *Groups:* a method of applying permissions to more than one user. +- A configurable *password hashing system:* a must for ensuring data security. +- *Forms and view tools for logging in users,* or restricting content. +- A *pluggable backend system,* allowing you to provide your own authentication-related functionality. + +There's lots that Django can do for you in the area of user authentication. We'll be covering the basics to get you started. This'll help you build your confidence with the available tools and their underlying concepts. + +Setting up Authentication +------------------------- +Before you can begin to play around with Django's authentication offering, you'll need to make sure that the relevant settings are present in your Rango project's ``settings.py`` file. + +Within the ``settings.py`` file find the ``INSTALLED_APPS`` tuple and check that ``django.contrib.auth`` and ``django.contrib.contenttypes`` are listed, so that it looks like the code below: + +.. code-block:: python + + INSTALLED_APPS = ( + 'django.contrib.auth', # THIS LINE SHOULD BE PRESENT AND UNCOMMENTED + 'django.contrib.contenttypes', # THIS LINE SHOULD BE PRESENT AND UNCOMMENTED + 'django.contrib.sessions', + 'django.contrib.sites', + 'django.contrib.messages', + 'django.contrib.staticfiles', + # Uncomment the next line to enable the admin: + 'django.contrib.admin', + # Uncomment the next line to enable admin documentation: + # 'django.contrib.admindocs', + 'rango', + ) + +While ``django.contrib.auth`` provides Django with access to the authentication system, ``django.contrib.contenttypes`` is used by the authentication application to track models installed in your database. Check out the `Official Django documentation for more details `_ on what ``django.contrib.contenttypes`` is and does to make your life easier. + +.. note:: Remember, if you had to add either one of the ``auth`` or ``contenttypes`` applications to your ``INSTALLED_APPS`` tuple, you will need to resynchronise your database with the ``$ python manage.py syncdb`` command. + +Passwords are stored by default in Django using the `PBKDF2 algorithm `_, providing a good level of security for your user's data. You can read more about this as part of the `official Django documentation on how django stores passwords `_. The documentation also provides an explanation of how to use different password hashers if you require a greater level of security. + +The ``User`` Model +------------------ +The core of Django's authentication system is the ``User`` object, located at ``django.contrib.auth.models.User``. A ``User`` object represents each of the people interacting with a Django application. The `Django documentation on User objects `_ states that they are used to allow aspects of the authentication system like access restriction, registration of new user profiles and the association of creators with site content. + +The ``User`` model comes complete with five primary attributes. They are: + +- the username for the user account; +- the account's password; +- the user's email address; +- the user's first name; and +- the user's surname. + +The model also comes with other attributes such as ``is_active`` (which determines whether a particular account is active or not). Check the `official Django documentation on the user model `_ for a full list of attributes provided by the base ``User`` model. + +Additional User Attributes +-------------------------- +However, what if all the provided attributes that the ``User`` model provides isn't enough? For our Rango application, we want to include two more additional attributes for each user account. Specifically, we wish to include: + +- a ``URLField``, allowing a user of Rango to specify their own website; and +- a ``ImageField``, which allows users to specify a picture for their user profile. + +Fortunately, this is a relatively easy task to accomplish. This is achieved through the creation of an additional model in Rango's ``models.py`` file. Let's add the new model - add the following code. + +.. code-block:: python + + class UserProfile(models.Model): + # This line is required. Links UserProfile to a User model instance. + user = models.OneToOneField(User) + + # The additional attributes we wish to include. + website = models.URLField(blank=True) + picture = models.ImageField(upload_to='profile_images', blank=True) + + # Override the __unicode__() method to return out something meaningful! + def __unicode__(self): + return self.user.username + +As we also reference the ``User`` model, we'll need to include the model into the ``models.py`` namespace. Add it with the following import statement at the top of the file. + +.. code-block:: python + + from django.contrib.auth.models import User + +So, how do we accomplish our goal of adding additional user profile fields? This isn't achieved through inheritance, instead the ``UserProfile`` model inherits from Django's ``Model`` class and is linked to the base ``User`` class through a one-to-one relationship via attribute ``user``. This is because various applications may all want to use the User model and extend upon it in different ways. + +For Rango, we've added two fields to complete our user profile, and provided a ``__unicode__()`` method to return a meaningful value when a unicode representation of a ``UserProfile`` model instance is requested. + +For the two fields ``website`` and ``picture``, we have set ``blank=True`` for both. This allows each of the fields to be blank if necessary, meaning that users need not supply values for the attributes if they do not wish to. + +Note that the ``ImageField`` field has an ``upload_to`` attribute. The value of this attribute is conjoined with the project's ``MEDIA_ROOT`` setting to provide a path with which uploaded profile images will be stored. For example, a ``MEDIA_ROOT`` of ``/tango_with_django_project/media/`` and ``upload_to`` attribute of ``profile_images`` will result in all profile images being stored in the directory ``/tango_with_django_project/media/profile_images/``. + +.. warning:: The Django ``ImageField`` field makes use of the *Python Imaging Library (PIL).* Back in Chapter :ref:`requirements-label`, we discussed installing PIL along with Django to your setup. If you haven't got PIL installed, you'll need to install it now. If you don't, you'll be greeted with exceptions stating that the module ``pil`` cannot be found! + +With our ``UserProfile`` model defined, we now edit Rango's ``admin.py`` file to include the new ``UserProfile`` model in the Django administration web interface. In the ``admin.py`` file, add the following line. + +.. code-block:: python + + admin.site.register(UserProfile) + +You also need to import the ``UserProfile`` model by adding one of the following lines at the top of the ``admin.py`` file. Choose which one you like - the first imports ``UserProfile`` with a separate import statement, while the second combines the import of ``UserProfile`` with Rango models that we have used previously in ``admin.py``. + +.. code-block:: python + + # Import the UserProfile model individually. + from rango.models import UserProfile + + # Import the UserProfile model with Category and Page. + # If you choose this option, you'll want to modify the import statement you've already got to include UserProfile. + from rango.models import Category, Page, UserProfile + +.. note:: Remember that your database must be synchronised with the creation of a new model. Run ``$ python manage.py syncdb`` from your terminal to synchronise the new ``UserProfile`` model. This process involves Django creating one or more underlying database tables for the given model. Forgetting to synchronise your changes will result in errors explaining that the required database tables cannot be found. + +Creating a *User Registration* View and Template +------------------------------------------------ +With our authentication infrastructure laid out, we can now begin to build onto it by providing users of our application with the opportunity to create new user accounts. We will achieve this via the creation of a new view and template combination. + +.. note:: We feel it's important to note that there are several off-the-shelf user registration packages available for you to download and use in your Django projects. Examples include the `Django Registration application `_, and you can also check out the table on `this webpage `_ which lists other registration packages. While these exist, we'll be showing you how to set up everything from scratch. While this is at odds with the DRY principle, it is also important to get a feeling for the user authentication package and feature. It will also re-enforce your understanding of working with forms, how to extend upon the user model, and how to upload media. + +To set everything up for the user registration functionality we will go through the following steps: + +#. Create a ``UserForm`` and ``UserProfileForm``. +#. Add a view to handle the creation of a new user. +#. Create a template that displays the ``UserForm`` and ``UserProfileForm``. +#. Map a URL to the view created. +#. Link the index page to the register page + + +.. _login-formclasses-label: + +Creating the ``UserForm`` and ``UserProfileForm`` +................................................. +In ``rango/forms.py``, we now need to create two classes inheriting from ``forms.ModelForm``. We'll be creating one for the base ``User`` class, as well as one for the new ``UserProfile`` model that we just created. The two ``ModelForm`` inheriting classes allow us to display a HTML form displaying the necessary form fields for a particular model, taking away a significant amount of work for us. Neat! + +In ``rango/forms.py``, let's create our two classes which inherit from ``forms.ModelForm``. Add the following code to the module. + +.. code-block:: python + + class UserForm(forms.ModelForm): + password = forms.CharField(widget=forms.PasswordInput()) + + class Meta: + model = User + fields = ('username', 'email', 'password') + + class UserProfileForm(forms.ModelForm): + class Meta: + model = UserProfile + fields = ('website', 'picture') + +You'll notice that within both classes we create, we add a `nested `_ ``Meta`` class. As `the name of the nested class may suggest `_, anything within a nested ``Meta`` class describes additional properties about the particular ``ModelForm`` class it belongs to. Each ``Meta`` class must at a bare minimum supply a ``model`` field, which references back to the model the ``ModelForm`` inheriting class should relate to. Our ``UserForm`` class is therefore associated with the ``User`` model, for example. By default, Django then renders a HTML form for *all* fields within the associated model. + +However, there may be scenarios where we would not want a user to provide information for *all* fields within the associated model. For example, certain form fields may need to be filled in automatically by your code - such as in the ``UserProfileForm``. Recall that the ``UserProfile`` model contains a ``user`` attribute, providing a one-to-one relationship to the ``User`` model. We don't want users to see this abstraction - we want Rango to handle it for them! With the ``fields`` attribute, we can fine tune what fields the user sees in a rendered form. ``UserProfileForm`` will therefore display entries for the ``website`` and ``picture`` fields, but will not provide anything for the ``user`` field. + +You'll also notice that ``UserForm`` includes a definition of the ``password`` attribute. While a ``User`` model instance contains a ``password`` attribute by default, the rendered HTML form element is of the incorrect type. If a user types a password, the password will be visible. By updating the ``password`` attribute definition, we can then specify that the ``CharField`` instance should hide a user's input from prying eyes through use of the ``PasswordInput()`` widget. + +You shouldn't forget to include the required classes at the top of the ``forms.py`` module! + +.. code-block:: python + + from rango.models import UserProfile + from django.contrib.auth.models import User + from django import forms + + +Creating the ``register()`` View +................................ +Next we need to handle both the rendering of the form, and the processing of form input data. Within Rango's ``views.py`` file, add the following view function: + +.. code-block:: python + + from rango.forms import UserForm, UserProfileForm + + def register(request): + # Like before, get the request's context. + context = RequestContext(request) + + # A boolean value for telling the template whether the registration was successful. + # Set to False initially. Code changes value to True when registration succeeds. + registered = False + + # If it's a HTTP POST, we're interested in processing form data. + if request.method == 'POST': + # Attempt to grab information from the raw form information. + # Note that we make use of both UserForm and UserProfileForm. + user_form = UserForm(data=request.POST) + profile_form = UserProfileForm(data=request.POST) + + # If the two forms are valid... + if user_form.is_valid() and profile_form.is_valid(): + # Save the user's form data to the database. + user = user_form.save() + + # Now we hash the password with the set_password method. + # Once hashed, we can update the user object. + user.set_password(user.password) + user.save() + + # Now sort out the UserProfile instance. + # Since we need to set the user attribute ourselves, we set commit=False. + # This delays saving the model until we're ready to avoid integrity problems. + profile = profile_form.save(commit=False) + profile.user = user + + # Did the user provide a profile picture? + # If so, we need to get it from the input form and put it in the UserProfile model. + if 'picture' in request.FILES: + profile.picture = request.FILES['picture'] + + # Now we save the UserProfile model instance. + profile.save() + + # Update our variable to tell the template registration was successful. + registered = True + + # Invalid form or forms - mistakes or something else? + # Print problems to the terminal. + # They'll also be shown to the user. + else: + print user_form.errors, profile_form.errors + + # Not a HTTP POST, so we render our form using two ModelForm instances. + # These forms will be blank, ready for user input. + else: + user_form = UserForm() + profile_form = UserProfileForm() + + # Render the template depending on the context. + return render_to_response( + 'rango/register.html', + {'user_form': user_form, 'profile_form': profile_form, 'registered': registered}, + context) + +Is the view a lot more complex? It might look so at first, but it isn't really. The only added complexity from our previous ``add_category()`` view is the need to handle two distinct ``ModelForm`` instances - one for the ``User`` model, and one for the ``UserProfile`` model. We also need to handle a user's profile image, if he or she chooses to upload one. + +We also establish a link between the two model instances that we create. After creating a new ``User`` model instance, we reference it in the ``UserProfile`` instance with the line ``profile.user = user``. This is where we populate the ``user`` attribute of the ``UserProfileForm`` form, which we hid from users in Section :ref:`login-formclasses-label`. + + +Creating the *Registration* Template +.................................... +Now create a new template file, ``rango/register.html`` and add the following code: + +.. code-block:: html + + + + + Rango + + + +

    Register with Rango

    + + {% if registered %} + Rango says: thank you for registering! + Return to the homepage.
    + {% else %} + Rango says: register here!
    + + + + {% csrf_token %} + + + {{ user_form.as_p }} + {{ profile_form.as_p }} + + + + + {% endif %} + + + +This HTML template makes use of the ``registered`` variable we used in our view indicating whether registration was successful or not. Note that ``registered`` must be ``False`` in order for the template to display the registration form - otherwise, apart from the title, only a success message is displayed. + +.. warning:: + You should be aware of the ``enctype`` attribute for the ``
    `` element. When you want users to upload files from a form, it's an absolute *must* to set ``enctype`` to ``multipart/form-data``. This attribute and value combination instructs your browser to send form data in a special way back to the server. Essentially, the data representing your file is split into a series of chunks and sent. For more information, check out `this great Stack Overflow answer `_. You should also should remember to include the CSRF token, too. Ensure that you include ``{% csrf_token %}`` within your ```` element. + +The ``register()`` View URL Mapping +................................... +Now we can add a URL mapping to our new view. In ``rango/urls.py`` modify the ``urlpatterns`` tuple as shown below: + +.. code-block:: python + + urlpatterns = patterns('', + url(r'^$', views.index, name='index'), + url(r'^about/$', views.about, name='about'), + url(r'^category/(?P\w+)$', views.category, name='category'), + url(r'^add_category/$', views.add_category, name='add_category'), + url(r'^category/(?P\w+)/add_page/$', views.add_page, name='add_page'), + url(r'^register/$', views.register, name='register'), # ADD NEW PATTERN! + ) + +The newly added pattern points the URL ``/rango/register/`` to the ``register()`` view. + +Linking Together +................ +Finally, we can add a link pointing to that URL in our homepage ``index.html`` template. Underneath the link to the category addition page, add the following hyperlink. + +.. code-block:: html + + Register Here + +Demo +.... +Easy! Now you'll have a new hyperlink with the text ``Register Here`` that'll take you to the registration page. Try it out now! Start your Django development server and try to register a new user account. Upload a profile image if you wish. Your registration form should look like the one illustrated in Figure :num:`fig-rango-register-form`. + +.. _fig-rango-register-form: + +.. figure:: ../images/rango-register-form.png + :figclass: align-center + + A screenshot illustrating the basic registration form you create as part of this tutorial. + +Upon seeing the message indicating your details were successfully registered, the database should have two new entries in its tables corresponding to the ``User`` and ``UserProfile`` models. + +Adding Login Functionality +-------------------------- +With the ability to register accounts completed, we now need to add login in functionality. To achieve this we will need to undertake the workflow below: + +* Create a login in view to handle user credentials +* Create a login template to display the login form +* Map the login view to a url +* Provide a link to login from the index page + +Creating the ``login()`` View +............................. +In ``rango/views.py`` create a new function called ``user_login()`` and add the following code: + +.. code-block:: python + + def user_login(request): + # Like before, obtain the context for the user's request. + context = RequestContext(request) + + # If the request is a HTTP POST, try to pull out the relevant information. + if request.method == 'POST': + # Gather the username and password provided by the user. + # This information is obtained from the login form. + username = request.POST['username'] + password = request.POST['password'] + + # Use Django's machinery to attempt to see if the username/password + # combination is valid - a User object is returned if it is. + user = authenticate(username=username, password=password) + + # If we have a User object, the details are correct. + # If None (Python's way of representing the absence of a value), no user + # with matching credentials was found. + if user: + # Is the account active? It could have been disabled. + if user.is_active: + # If the account is valid and active, we can log the user in. + # We'll send the user back to the homepage. + login(request, user) + return HttpResponseRedirect('/rango/') + else: + # An inactive account was used - no logging in! + return HttpResponse("Your Rango account is disabled.") + else: + # Bad login details were provided. So we can't log the user in. + print "Invalid login details: {0}, {1}".format(username, password) + return HttpResponse("Invalid login details supplied.") + + # The request is not a HTTP POST, so display the login form. + # This scenario would most likely be a HTTP GET. + else: + # No context variables to pass to the template system, hence the + # blank dictionary object... + return render_to_response('rango/login.html', {}, context) + +This view may seem rather complicated as it has to handle a variety of situations. Like in previous examples, the ``user_login()`` view handles form rendering and processing. + +First, if the view is accessed via the HTTP GET method, then the login form is displayed. However, if the form has been posted via the HTTP POST method, then we can handle processing the form. + +If a valid form is sent, the username and password are extracted from the form. These details are then used to attempt to authenticate the user (with Django's ``authenticate()`` function). ``authenticate()`` then returns a ``User`` object if the username/password combination exists within the database - or ``None`` if no match was found. + +If we retrieve a ``User`` object, we can then check if the account is active or inactive - and return the appropriate response to the client's browser. + +However, if an invalid form is sent, because the user did not add both a username and password the login form is presented back to the user with form error messages (i.e. username/password is missing). + +Of particular interest in the code sample above is the use of the built-in Django machinery to help with the authentication process. Note the use of the ``authenticate()`` function to check whether the username and password provided match to a valid user account, and the ``login()`` function to signify to Django that the user is to be logged in. + +You'll also notice that we make use of a new class, ``HttpResponseRedirect``. As the name may suggest to you, the response generated by an instance of the ``HttpResponseRedirect`` class tells the client's browser to redirect to the URL you provide as the argument. Note that this will return a HTTP status code of 302, which denotes a redirect, as opposed to an status code of 200 i.e. OK. See the `official Django documentation on Redirection `_, to learn more. + +All of these functions and classes are provided by Django, and as such you'll need to import them, so add the following imports to ``rango/views.py``: + +.. code-block:: python + + from django.contrib.auth import authenticate, login + from django.http import HttpResponseRedirect, HttpResponse + +Creating a *Login* Template +........................... +With our new view created, we'll need to create a new template allowing users to login. While we know that the template will live in the ``templates/rango/`` directory, we'll leave you to figure out the name of the file. Look at the code example above to work out the name. In your new template file, add the following code: + +.. code-block:: html + + + + + + Rango + + + +

    Login to Rango

    + + + {% csrf_token %} + Username: +
    + Password: +
    + + + + + + + +Ensure that you match up the input ``name`` attributes to those that you specified in the ``user_login()`` view - i.e. ``username`` for the username, and ``password`` for password. Don't forget the ``{% csrf_token %}``, either! + +Mapping the Login View to a URL +............................... +With your login template created, we can now match up the ``user_login()`` view to a URL. Modify Rango's ``urls.py`` file so that its ``urlpatterns`` tuple now looks like the code below: + +.. code-block:: python + + urlpatterns = patterns('', + url(r'^$', views.index, name='index'), + url(r'^about/$', views.about, name='about'), + url(r'^category/(?P\w+)$', views.category, name='category'), + url(r'^add_category/$', views.add_category, name='add_category'), + url(r'^category/(?P\w+)/add_page/$', views.add_page, name='add_page'), + url(r'^register/$', views.register, name='register'), + url(r'^login/$', views.user_login, name='login'), + ) + +Linking Together +................ +Our final step is to provide users of Rango with a handy link to access the login page. To do this, we'll edit the ``index.html`` template inside of the ``templates/rango/`` directory. Find the previously created category addition and registration links, and add the following hyperlink underneath. You may wish to include a line break (``
    ``) before the link. + +.. code-block:: python + + Login + +If you like, you can also modify the header of the index page to provide a personalised message if a user is logged in, and a more generic message if the user isn't. Within the ``index.html`` template, find the header, as shown in the code snippet below. + +.. code-block:: python + +

    Rango says..hello world!

    + +Replace this header with the following markup and Django template code. Note that we make use of the ``user`` object, which is available to Django's template system via the context. We can tell from this object if the user is logged in (authenticated). If he or she is logged in, we can also obtain details about him or her. + +.. code-block:: python + + {% if user.is_authenticated %} +

    Rango says... hello {{ user.username }}!

    + {% else %} +

    Rango says... hello world!

    + {% endif %} + +As you can see we have used Django's Template Language to check if the user is authenticated with ``{% if user.is_authenticated %}``. The context variable which we pass through to the template will include a user variable if the user is logged in - so we can check whether they are authenticated or not. If so they will receive a personalised greeting in the header, i.e. ``Rango says... hello leifos!``. Otherwise, the generic ``Rango says... hello world!`` header is displayed. + +Demo +.... +Check out Figure :num:`fig-rango-login-message` for screenshots of what everything should look like. + +.. _fig-rango-login-message: + +.. figure:: ../images/rango-login-message.png + :figclass: align-center + + Screenshots illustrating the header users receive when not logged in, and logged in with username ``somebody``. + +With this completed, user logins should now be completed! To test everything out, try starting Django's development server and attempt to register a new account. After successful registration, you should then be able to login with the details you just provided. + +Restricting Access +------------------ +Now that users can login to Rango, we can now go about restricting access to particular parts of the application as per the specification, i.e. that only registered users can add categories and pages. With Django, there are two ways in which we can achieve this goal: + +* directly, by examining the ``request`` object and check if the user is authenticated, or, +* using a convenience *decorator* function that check if the user is authenticated. + +The direct approach checks to see whether a user is logged in, via the ``user.is_authenticated()`` method. The ``user`` object is available via the ``request`` object passed into a view. The following example demonstrates this approach. + +.. code-block:: python + + def some_view(request): + if not request.user.is_authenticated(): + return HttpResponse("You are logged in.") + else: + return HttpResponse("You are not logged in.") + +The second approach uses `Python decorators `_. Decorators are named after a `software design pattern by the same name `_. They can dynamically alter the functionality of a function, method or class without having to directly edit the source code of the given function, method or class. + +Django provides a decorator called ``login_required()``, which we can attach to any view where we require the user to be logged in. If a user is not logged in and they try to access a page which calls that view, then the user is redirected to another page which you can set, typically the login page. + +Restricting Access with a Decorator +................................... +To try this out, create a view in Rango's ``views.py`` file, called ``restricted()`` and add the following code: + +.. code-block:: python + + @login_required + def restricted(request): + return HttpResponse("Since you're logged in, you can see this text!") + +Note that to use a decorator, you place it *directly above* the function signature, and put a ``@`` before naming the decorator. Python will execute the decorator before executing the code of your function/method. To use the decorator you will have to import it, so also add the following import: + +.. code-block:: python + + from django.contrib.auth.decorators import login_required + +We'll also add in another pattern to Rango's ``urlpatterns`` tuple in the ``urls.py`` file. Our tuple should then look something like the following example. Note the inclusion of mapping of the ``views.restricted`` view - this is the mapping you need to add. + +.. code-block:: python + + urlpatterns = patterns('', + url(r'^$', views.index, name='index'), + url(r'^add_category/$', views.add_category, name='add_category'), + url(r'^register/$', views.register, name='register'), + url(r'^login/$', views.user_login, name='login'), + url(r'^(?P\w+)', views.category, name='category'), + url(r'^restricted/', views.restricted, name='restricted'), + ) + +We'll also need to handle the scenario where a user attempts to access the ``restricted()`` view, but is not logged in. What do we do with the user? The simplest approach is to redirect his or her browser. Django allows us to specify this in our project's ``settings.py`` file, located in the project configuration directory. In ``settings.py``, define the variable ``LOGIN_URL`` with the URL you'd like to redirect users to that aren't logged in, i.e. the login page located at ``/rango/login/``: + +.. code-block:: python + + LOGIN_URL = '/rango/login/' + +This ensures that the ``login_required()`` decorator will redirect any user not logged in to the URL ``/rango/login/``. + +Logging Out +----------- +To enable users to log out gracefully it would be nice to provide a logout option to users. Django comes with a handy ``logout()`` function that takes care of ensuring that the user is logged out, that their session is ended, and that if they subsequently try to access a view, it will deny them access. + +To provide log out functionality in ``rango/views.py`` add the a view called ``user_logout()`` with the following code: + +.. code-block:: python + + from django.contrib.auth import logout + + # Use the login_required() decorator to ensure only those logged in can access the view. + @login_required + def user_logout(request): + # Since we know the user is logged in, we can now just log them out. + logout(request) + + # Take the user back to the homepage. + return HttpResponseRedirect('/rango/') + +.. note:: Where's ``RequestContext()``? In this simple user logout view, there's no need to obtain the request's context from Django's backend. If we don't need it, why ask for it? + +With the view created, map the URL ``/rango/logout/`` to the ``user_logout()`` view by modifying the ``urlpatterns`` tuple in Rango's ``urls.py`` module: + +.. code-block:: python + + urlpatterns = patterns('', + url(r'^$', views.index, name='index'), + url(r'^about/$', views.about, name='about'), + url(r'^category/(?P\w+)$', views.category, name='category'), + url(r'^add_category/$', views.add_category, name='add_category'), + url(r'^category/(?P\w+)/add_page/$', views.add_page, name='add_page'), + url(r'^register/$', views.register, name='register'), + url(r'^login/$', views.user_login, name='login'), + url(r'^restricted/$', views.restricted, name='restricted'), + url(r'^logout/$', views.user_logout, name='logout'), + ) + +Now that all the machinery for logging a user out has been completed, it'd be handy to provide a link from the homepage to allow users to simply click a link to logout. However, let's be smart about this: is there any point providing the logout link to a user who isn't logged in? Perhaps not - it may be more beneficial for a user who isn't logged in to be given the chance to register, for example. + +Like in the previous section, we'll be modifying Rango's ``index.html`` template, and making use of the ``user`` object in the template's context to determine what links we want to show. Find your growing list of links at the bottom of the page and replace it with the following HTML markup and Django template code. Note we also add a link to our restricted page at ``/rango/restricted/``. + +.. code-block:: html + + {% if user.is_authenticated %} + Restricted Page
    + Logout
    + {% else %} + Register Here
    + Login
    + {% endif %} + + About
    + Add a New Category
    + +Simple - when a user is authenticated and logged in, he or she can see the ``Restricted Page`` and ``Logout`` links. If he or she isn't logged in, ``Register Here`` and ``Login`` are presented. As ``About`` and ``Add a New Category`` are not within the template conditional blocks, these links are available to both anonymous and logged in users. + +Exercises +--------- +This chapter has covered several important aspects of managing user authentication within Django. We've covered the basics of installing Django's ``django.contrib.auth`` application into our project. Additionally, we have also shown how to implement a user profile model that can provide additional fields to the base ``django.contrib.auth.models.User`` model. We have also detailed how to setup the functionality to allow user registrations, login, logout, and to control access. For more information about user authentication and registration consult `Django's official documentation on Authentication `_. + +* Customise the application so that only registered users can add/edit, while non-registered can only view/use the categories/pages. You'll also have ensure links to add/edit pages appear only if the user browsing the website is logged in. +* Provide informative error messages when users incorrectly enter their username or password. + +In most applications you are going to require different levels of security when registering and managing users - for example, making sure the user enters an email address that they have access to, or sending users passwords that they have forgotten. While we could extend the current approach and build all the necessary infrastructure to support such functionality a ``django-registration`` application has been developed which greatly simplifies the process - visit https://django-registration.readthedocs.org/en/latest/ to find out more about using this package. diff --git a/17/chapters/models.rst b/17/chapters/models.rst new file mode 100644 index 0000000..952775c --- /dev/null +++ b/17/chapters/models.rst @@ -0,0 +1,402 @@ +.. _model-label: + +Models and Databases +==================== +Working with databases often requires you to get your hands dirty messing about with SQL. In Django, a lot of this hassle is taken care of for you by Django's *object relational mapping (ORM)* functions, and how Django encapsulates databases tables through models. Essentially, a model is a Python object that describes your data model/table. Instead of directly working on the database table via SQL, all you have to do is manipulate the corresponding Python object. In this chapter, we'll walkthrough how to setup a database and the models required for Rango. + +Rango's Requirements +-------------------- +First, let's go over the data requirements for Rango. The following list provides the key details of Rango's data requirements. + +* Rango is a essentially a *web page directory* - a site containing links to other websites. +* There are a number of different *webpage categories*, and each category houses a number of links. We assumed in Chapter :ref:`overview-label` that this is a one-to-many relationship. See the Entity Relationship Diagram below. +* A category has a name, number of visits, and number of likes. +* A page refers to a category, has a title, URL and a number of views. + +.. figure:: ../images/rango-erd.svg + :scale: 100% + :figclass: align-center + + The Entity Relationship Diagram of Rango's two main entities. + +Telling Django About Your Database +---------------------------------- +Before we can create any models, the database configuration needs to be setup. In Django 1.7, when you create a project, Django automatically populates the dictionary called ``DATABASES``, which is located in your ``settings.py``. It will contain something like: + +.. code-block:: python + + DATABASES = { + 'default': { + 'ENGINE': 'django.db.backends.sqlite3', + 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), + } + } + + + + +As you can see the default engine will be a SQLite3 backend. This provides us with access to the lightweight python database, `SQLite `_, which is great for development purposes. +The only other value we need to set is the ``NAME`` key/value pair, which we have set to ``DATABASE_PATH``. For other database engines, other keys like ``USER``, ``PASSWORD``, ``HOST`` and ``PORT`` can also be added to the dictionary. + +.. note:: While using an SQLite engine for this tutorial is fine, it may not perhaps be the best option when it comes to deploying your application. Instead, it may be better to use a more robust and scalable database engine. Django comes with out of the box support for several other popular database engines, such as `PostgreSQL `_ and `MySQL `_. See the `official Django documentation on Database Engines `_ for more details. You can also check out `this excellent article `_ on the SQLite website which explains situation where you should and you shouldn't consider using the lightweight SQLite engine. + +Creating Models +--------------- +With your database configured in ``settings.py``, let's create the two initial data models for the Rango application. + +In ``rango/models.py``, we will define two classes - both of which must inherit from ``django.db.models.Model``. The two Python classes will be the definitions for models representing *categories* and *pages*. Define the ``Category`` and ``Page`` models as follows. + +.. code-block:: python + + class Category(models.Model): + name = models.CharField(max_length=128, unique=True) + + def __unicode__(self): + return self.name + + class Page(models.Model): + category = models.ForeignKey(Category) + title = models.CharField(max_length=128) + url = models.URLField() + views = models.IntegerField(default=0) + + def __unicode__(self): + return self.title + +When you define a model, you need to specify the list of attributes and their associated types along with any optional parameters. Django provides a number of built-in fields. Some of the most commonly used are listed below. + +* ``CharField``, a field for storing character data (e.g. strings). Specify ``max_length`` to provide a maximum number of characters the field can store. +* ``URLField``, much like a ``CharField``, but designed for storing resource URLs. You may also specify a ``max_length`` parameter. +* ``IntegerField``, which stores integers. +* ``DateField``, which stores a Python ``datetime.date``. + +Check out the `Django documentation on model fields `_ for a full listing. + +For each field, you can specify the ``unique`` attribute. If set to ``True``, only one instance of a particular value in that field may exist throughout the entire database model. For example, take a look at our ``Category`` model defined above. The field ``name`` has been set to unique - thus every category name must be unique. + +This is useful if you wish to use a particular field as an additional database key. You can also specify additional attributes for each field such as specifying a default value (``default='value'``), and whether the value for a field can be ``NULL`` (``null=True``) or not. + +Django also provides simple mechanisms that allows us to relate models/database tables together. These mechanisms are encapsulated in three further field types, and are listed below. + +* ``ForeignKey``, a field type that allows us to create a one-to-many relationship. +* ``OneToOneField``, a field type that allows us to define a strict one-to-one relationship. +* ``ManyToManyField``, a field type which allows us to define a many-to-many relationship. + +From our model examples above, the field ``category`` in model ``Page`` is of type ``ForeignKey``. This allows us to create a one-to-many relationship with model/table ``Category``, which is specified as an argument to the field's constructor. *You should be aware that Django creates an ID field for you automatically in each table relating to a model. You therefore do not need to explicitly define a primary key for each model - it's done for you!* + +.. note:: When creating a Django model, it's good practice to make sure you include the ``__unicode__()`` method - a method almost identical to the ``__str__()`` method. If you're unfamiliar with both of these, think of them as methods analogous to the ``toString()`` method in a Java class. The ``__unicode()__`` method is therefore used to provide a unicode representation of a model instance. Our ``Category`` model for example returns the name of the category in the ``__unicode__()`` method - something which will be incredibly handy to you when you begin to use the Django admin interface later on in this chapter. + + Including a ``__unicode__()`` method in your classes is also useful when debugging your code. Issuing a ``print`` on a ``Category`` model instance *without* a ``__unicode()__`` method will return ````. We know it's a category, but *which one?* Including ``__unicode()__`` would then return ````, where ``python`` is the ``name`` of a given category. Much better! + +Creating and Migrating the Database +--------------------------------------- +With our models defined, we can now let Django work its magic and create the table representations in our database. In previous versions of Django this would be performed using the command: + +``$ python manage.py syncdb`` + +However, Django 1.7 provides a migration tool to setup and update the database to reflect changes in the models. So the process has become a little more complicated - but the idea is tht if you make changes to the models, you will be able to update the database without having to delete it. + +Setup Database and Create Superuser +.................................... +If you have not done so already you first need to initial the database. This is done via the migrate command. + + +:: + + + $ python manage.py migrate + + + Operations to perform: + Apply all migrations: admin, contenttypes, auth, sessions + Running migrations: + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying sessions.0001_initial... OK + + +If you rememnber in ``settings.py`` there was a list of INSTALLED_APPS, this initial call to migrate, creates the tables for the associated apps, i.e. auth, admin, etc. There should be a file called, ``db.sqlite`` in your project base directory. + +Now you will want to create a superuser to manage the database. Run the following command. + +:: + + + $ python manage.py createsuperuser + +The superuser account will be used to access the Django admin interface later on in this tutorial. Enter a username for the account, e-mail address and provide a password when prompted. Once completed, the script should finish successfully. Make sure you take a note of the username and password for your superuser account. + +Creating / Updating Models / Tables +.................................... + +Whenever you make changes to the models, then you need to register the changes, via the ``makemigrations`` command for the particular app. So for *rango*, we need to issue: + +:: + + $ python manage.py makemigrations rango + + Migrations for 'rango': + 0001_initial.py: + - Create model Category + - Create model Page + +If you inspect the ``rango/migrations`` folder, you will see that a python script have been created, called, ``0001_initial.py''. To see the SQL that will be performed to make this migration, you can issue the command, ``python manage.py sqlmigrate ``. The migration number is show above as 0001, so we would issue the command, ``python manage.py sqlmigrate rango 0001`` for *rango* to see the SQL. Try it out. + +Now, to apply these migrations (which will essentially create the database tables), then you need to issue: + + +:: + + + $ python manage.py migrate + + Operations to perform: + Apply all migrations: admin, rango, contenttypes, auth, sessions + Running migrations: + Applying rango.0001_initial... OK + + + + +.. warning:: Whenever you add to existing models, *you will have to repeat this processrunning* ``python manage.py makemigrations ``, and then ``python manage.py migrate`` + +You may have also noticed that our ``Category`` model is currently lacking some fields that we defined in Rango's requirements. We will add these in later to remind you of the updating process. + + +Django Models and the Django Shell +---------------------------------- +Before we turn our attention to demonstrating the Django admin interface, it's worth noting that you can interact with Django models from the Django shell - a very useful aid for debugging purposes. We'll demonstrate how to create a ``Category`` instance using this method. + +To access the shell, we need to call ``manage.py`` from within your Django project's root directory once more. Run the following command. + +``$ python manage.py shell`` + +This will start an instance of the Python interpreter and load in your project's settings for you. You can then interact with the models. The following terminal session demonstrates this functionality. Check out the inline commentary to see what each command does. + +.. code-block:: python + + # Import the Category model from the Rango application + >>> from rango.models import Category + + # Show all the current categories + >>> print Category.objects.all() + [] # Returns an empty list (no categories have been defined!) + + # Create a new category object, and save it to the database. + >>> c = Category(name="Test") + >>> c.save() + + # Now list all the category objects stored once more. + >>> print Category.objects.all() + [] # We now have a category called 'test' saved in the database! + + # Quit the Django shell. + >>> quit() + +In the example, we first import the model that we want to manipulate. We then print out all the existing categories, of which there are none because our table is empty. Then we create and save a Category, before printing out all the categories again. This second ``print`` should then show the ``Category`` just added. + +.. note:: The example we provide above is only a very basic taster on database related activities you can perform in the Django shell. If you have not done so already, it is good time to complete part one of the `official Django Tutorial to learn more about interacting with the models `_. Also check out the `official Django documentation on the list of available commands `_ for working with models. + +Configuring the Admin Interface +------------------------------- +One of the stand-out features of Django is that it provides a built in, web-based administrative interface that allows us to browse and edit data stored within our models and corresponding database tables. In the ``settings.py`` file, you will notice that one of the pre-installed apps is ``django.contrib.admin``, and in your project's ``urls.py`` there is a urlpattern that matches ``admin/``. + +Start the development server: + +:: + + + $ python manage.py runserver + + +and visit the url, ``http://127.0.0.1:8000/admin/``. You should be able to log into the Django Admin interface using the username and password created for the superuser. The admin interface only contains tables relevant to the sites adminstration, ``Groups`` and ``Users``. So we will need to instruct Django to also include the models from ``rango``. + + To do this, open the file ``rango/admin.py`` and add the following code: + +.. code-block:: python + + from django.contrib import admin + from rango.models import Category, Page + + admin.site.register(Category) + admin.site.register(Page) + +This will *register* the models with the admin interface. If we were to have another model, it would be a trivial case of calling the ``admin.site.register()`` function, passing the model in as a parameter. + +With all of these changes made, re-visit/refresh: ``http://127.0.0.1:8000/admin/``. You should now be able to see the Category and Page models, like in Figure :num:`fig-rango-admin`. + +.. _fig-rango-admin: + +.. figure:: ../images/ch5-rango-admin-models.png + :figclass: align-center + + The Django admin interface. Note the Rango category, and the two models contained within. + +Try clicking the ``Categorys`` link within the ``Rango`` section. From here, you should see the ``test`` category that we created via the Django shell. Try deleting the category as we'll be populating the database with a population script next. The interface is easy to use. Spend a few minutes creating, modifying and deleting both categories and pages. You can also add new users who can login to the Django admin interface for your project by adding a user to the ``User`` in the ``Auth`` application. + +.. note:: Note the typo within the admin interface (categorys, not categories). This problem can be fixed by adding a nested ``Meta`` class into your model definitions with the ``verbose_name_plural`` attribute. Check out `Django's official documentation on models `_ for more information. + +.. note:: The example ``admin.py`` file for our Rango application is the most simple, functional example available. There are many different features which you can use in the ``admin.py`` to perform all sorts of cool customisations, such as changing the way models appear in the admin interface. For this tutorial, we'll stick with the bare-bones admin interface, but you can check out the `official Django documentation on the admin interface `_ for more information if you're interested. + +.. _model-population-script-label: + +Creating a Population Script +---------------------------- +It's highly likely that during the course of development, you'll come to a point where you will need to modify a Django model. When you do this, the easiest option - without external software - is to re-create your entire database and run ``python manage.py syncdb`` ...again! Since this slow and repetitive task can be such a pain, it's good practice to create what we call a *population script* for your database. This script is designed to automatically populate your database with test data for you, which can potentially save you lots of time. + +To create a population script for Rango's database, we start by creating a new Python module within our Django project's root directory (e.g. ``/tango_with_django_project/``). Create the ``populate_rango.py`` file and add the following code. + +.. code-block:: python + + import os + os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'tango_with_django_project.settings') + + import django + django.setup() + + from rango.models import Category, Page + + + def populate(): + python_cat = add_cat('Python') + + add_page(cat=python_cat, + title="Official Python Tutorial", + url="http://docs.python.org/2/tutorial/") + + add_page(cat=python_cat, + title="How to Think like a Computer Scientist", + url="http://www.greenteapress.com/thinkpython/") + + add_page(cat=python_cat, + title="Learn Python in 10 Minutes", + url="http://www.korokithakis.net/tutorials/python/") + + django_cat = add_cat("Django") + + add_page(cat=django_cat, + title="Official Django Tutorial", + url="https://docs.djangoproject.com/en/1.5/intro/tutorial01/") + + add_page(cat=django_cat, + title="Django Rocks", + url="http://www.djangorocks.com/") + + add_page(cat=django_cat, + title="How to Tango with Django", + url="http://www.tangowithdjango.com/") + + frame_cat = add_cat("Other Frameworks") + + add_page(cat=frame_cat, + title="Bottle", + url="http://bottlepy.org/docs/dev/") + + add_page(cat=frame_cat, + title="Flask", + url="http://flask.pocoo.org") + + # Print out what we have added to the user. + for c in Category.objects.all(): + for p in Page.objects.filter(category=c): + print "- {0} - {1}".format(str(c), str(p)) + + def add_page(cat, title, url, views=0): + p = Page.objects.get_or_create(category=cat, title=title, url=url, views=views)[0] + return p + + def add_cat(name): + c = Category.objects.get_or_create(name=name)[0] + return c + + # Start execution here! + if __name__ == '__main__': + print "Starting Rango population script..." + populate() + +While this looks like a lot of code, what it does is relatively simple. As we define a series of functions at the top of the file, code execution begins towards the bottom - look for the line ``if __name__ == '__main__'``. We call the ``populate()`` function. + +.. warning:: When importing Django models, make sure you have imported your project's settings by importing django and setting the environment variable ``DJANGO_SETTINGS_MODULE`` to be the project setting file. Then you can call ``django.setup()`` to import the django settings. If you don't, an exception will be raised. This is why we import ``Category`` and ``Page`` after the settings have been loaded. + +The ``populate()`` function is responsible for the calling the ``add_cat()`` and ``add_page()`` functions, who are in turn responsible for the creation of new categories and pages respectively. ``populate()`` keeps tabs on category references for us as we create each individual ``Page`` model instance and store them within our database. Finally, we loop through our ``Category`` and ``Page`` models to print to the user all the ``Page`` instances and their corresponding categories. + +.. note:: We make use of the convenience ``get_or_create()`` method for creating model instances. As we don't want to create duplicates of the same entry, we can use ``get_or_create()`` to check if the entry exists in the database for us. If it doesn't exist, the method creates it. This can remove a lot of repetitive code for us - rather than doing this laborious check ourselves, we can make use of code that does exactly this for us. As we mentioned previously, why reinvent the wheel if it’s already there? + + The ``get_or_create()`` method returns a tuple of ``(object, created)``. The first element ``object`` is a reference to the model instance that the ``get_or_create()`` method creates if the database entry was not found. The entry is created using the parameters you pass to the method - just like ``category``, ``title``, ``url`` and ``views`` in the example above. If the entry already exists in the database, the method simply returns the model instance corresponding to the entry. ``created`` is a boolean value; ``true`` is returned if ``get_or_create()`` had to create a model instance. + + The ``[0]`` at the end of our call to the method to retrieve the ``object`` portion of the tuple returned from ``get_or_create()``. Like most other programming language data structures, Python tuples use `zero-based numbering `_. + + You can check out the `official Django documentation `_ for more information on the handy ``get_or_create()`` method. + +When saved, we can run the script by changing the current working directory in a terminal to our Django project's root and executing the module with the command ``$ python populate_rango.py``. You should then see output similar to that shown below. + +:: + + $ python populate_rango.py + + Starting Rango population script... + - Python - Official Python Tutorial + - Python - How to Think like a Computer Scientist + - Python - Learn Python in 10 Minutes + - Django - Official Django Tutorial + - Django - Django Rocks + - Django - How to Tango with Django + - Other Frameworks - Bottle + - Other Frameworks - Flask + +Now let's verify that the population script populated the database. Restart the Django development server, navigate to the admin interface, and check that you have some new categories and pages. Do you see all the pages if you click ``Pages``, like in Figure :num:`fig-admin-populated`? + +.. _fig-admin-populated: + +.. figure:: ../images/ch5-rango-admin.png + :figclass: align-center + + The Django admin interface, showing the Page table populated with sample data from our population script. + +A population script takes a little bit of time to write but when you are working with a team, you will be able to share the population script so that everyone can create the database and have it populated. Also, for unit testing it will come in handy. + +Basic Workflows +--------------- +Now that we've covered the core principles of dealing with Django's models functionality, now is a good time to summarise the processes involved in setting everything up. We've split the core tasks into separate sections for you. + +Setting up your Database +........................ +With a new Django project, you should first tell Django about the database you intend to use (i.e. configure ``DATABASES`` in settings.py). You can also register any models in the ``admin.py`` file to make them accessible via the admin interface. + +Adding a Model +.............. +The workflow for adding models can be broken down into five steps. + +#. First, create your new model(s) in your Django application's ``models.py`` file. +#. Update ``admin.py`` to include and register your new model(s). +#. Then perform the migration ``$ python manage.py migratesql `` +#. Apply the changes ``$ python manage.py migrate``. This will create the necessary infrastructure within the database for your new model(s). +#. Create/Edit your population script for your new model(s). + +Invariably there will be times when you will have to delete your database. In which case you will have to run the ``migrate`` command, then ``createsuperuser`` command, followed by the ``migratesql`` commands for each app, then you can populate the database. + +Exercises +--------- +Now that you've completed the chapter, try out these exercises to reinforce and practice what you have learnt. + +* Update the Category model to include the additional attributes, ``views`` and ``likes`` where the default value is zero. +* Re-sync your database, and update your population script so that the Python category has 128 views and 64 likes, the Django category has 64 views and 32 likes, and the Other Frameworks category has 32 views and 16 likes. +* Undertake the `part two of official Django tutorial `_ if you have not done so. This will help to reinforce further what you have learnt here, and to learn more about customising the admin interface. +* Customise the Admin Interface - so that when you view the Page model it displays in a list the category, the name of the page and the url. + +Hints +..... +If you require some help or inspiration to get these exercises done, these hints will hopefully help you out. + +* To customise the admin interface, you will need to edit ``rango/admin.py`` and create a ``PageAdmin`` class that inherits from ``admin.ModelAdmin``. +* Within your new ``PageAdmin`` class, add ``list_display = ('title', 'category', 'url')``. +* Finally, register the ``PageAdmin`` class with Django's admin interface. You should modify the line ``admin.site.register(Page)``. Change it to ``admin.site.register(Page, PageAdmin)`` in Rango's ``admin.py`` file. + +.. _fig-admin-customised: + +.. figure:: ../images/ch5-rango-admin-custom.png + :figclass: align-center + + The updated admin interface page view, complete with columns for category and URL. + diff --git a/17/chapters/models_templates.rst b/17/chapters/models_templates.rst new file mode 100644 index 0000000..aba3825 --- /dev/null +++ b/17/chapters/models_templates.rst @@ -0,0 +1,329 @@ +.. _model-using-label: + +Models, Templates and Views +=========================== +Now that we have our models set up and populated with some data, we can now start putting things together. We'll be figuring out how to source data from our models in our views, and how to present this data within our templates. + +Basic Workflow: Data Driven Pages +--------------------------------- +There are five main steps that you must undertake to create a data driven webpage in Django. + +#. First, import the models you wish to use into your application's ``views.py`` file. +#. Within the view you wish to use, query the model to get the data you want to present. +#. Pass the results from your model into the template's context. +#. Setup your template to present the data to the user in whatever way you wish. +#. If you have not done so already, map a URL to your view. + +These steps highlight how Django's framework separates the concerns between models, views and templates. + +Showing Categories on Rango's Homepage +-------------------------------------- +One of the requirements regarding the main pages was to show the top five rango'ed categories. + +Importing Required Models +......................... +To fulfil this requirement, we will go through each of the above steps. First, open ``rango/views.py`` and import the ``Category`` model from Rango's ``models.py`` file. + +.. code-block:: python + + # Import the Category model + from rango.models import Category + +Modifying the Index View +........................ +With the first step out of the way, we then want to modify our ``index()`` function. If we cast our minds back, we should remember the ``index()`` function is responsible for the main page view. Modify the function to look like the example below. + +.. code-block:: python + + def index(request): + # Obtain the context from the HTTP request. + context = RequestContext(request) + + # Query the database for a list of ALL categories currently stored. + # Order the categories by no. likes in descending order. + # Retrieve the top 5 only - or all if less than 5. + # Place the list in our context_dict dictionary which will be passed to the template engine. + category_list = Category.objects.order_by('-likes')[:5] + context_dict = {'categories': category_list} + + # Render the response and send it back! + return render_to_response('rango/index.html', context_dict, context) + +Here we have performed steps two and three in one go. First, we queried the ``Category`` model to retrieve the top five categories. Here we used the ``order_by()`` method to sort by the number of likes in descending order - hence the inclusion of the ``-``. We then restricted this list to the first 5 ``Category`` objects in the list. + +With the query complete, we passed a reference to the list (stored as variable ``category_list``) to a new dictionary, ``context_dict``. This dictionary is then passed as part of the context for the template engine in the ``render_to_response()`` call. + +Modifying the Index Template +............................ +With the view updated, all that is left for us to do is update the template ``rango/index.html``, located within your project's ``templates`` directory. Change the HTML code of the file so that it looks like the example shown below. + +.. code-block:: html + + + + + Rango + + + +

    Rango says...hello world!

    + + {% if categories %} +
      + {% for category in categories %} +
    • {{ category.name }}
      • + {% endfor %} +
    + {% else %} + There are no categories present. + {% endif %} + + About + + + +Here, we make use of Django's template language to present the data using ``if`` and ``for`` control statements. Within the ```` of the page, we test to see if ``categories`` - the name of the context variable containing our list - actually contains any categories (i.e. ``{% if categories %}``). + +If so, we proceed to construct an unordered HTML list (within the ``
      `` tags). The for loop (``{% for category in categories %}``) then iterates through the list of results, printing out each category's name (``{{ category.name }})`` within a pair of ``
    • `` tags to indicate a list element. + +If no categories exist, a message is displayed instead indicating so. + +As the example shows in Django's template language, all commands are enclosed within the tags ``{%`` and ``%}``, while variables are referenced within ``{{`` and ``}}`` brackets. + +If you now visit Rango's homepage at http://127.0.0.1:8000/rango/, you should see a list of three categories underneath the page title just like in Figure :num:`fig-rango-categories-simple`. + +.. _fig-rango-categories-simple: + +.. figure:: ../images/rango-categories-simple.png + :figclass: align-center + + The Rango homepage - now dynamically generated - showing a list of categories. How exciting! + + +Creating a Details Page +----------------------- +According to Rango's specification, we also need to show a list of pages that are associated with each category. +We have a number of challenges here to overcome. A new view must be created, which should be parameterised. We also need to create URL patterns and URL strings that encode category names. + +URL Design and Mapping +...................... +Let's start by considering the URL problem. One way we could handle this problem is to use the unique ID for each category within the URL. For example, we could create URLs like ``/rango/category/1/`` or ``/rango/category/2/``, where the numbers correspond to the categories with unique IDs 1 and 2 respectively. However, these URLs are not easily understood by humans. Although we could probably infer that the number relates to a category, how would a user know what category relates to unique IDs 1 or 2? The user wouldn't know without trying. + +Instead, we could just use the category name as part of the URL. ``/rango/category/Python/`` should give us a list of pages related to the Python category. This is a simple, readable and meaningful URL. If we go with this approach, we'll have to handle categories which have multiple words, like 'Other Frameworks', etc. + +.. note:: Designing clean URLs is an important aspect of web design. See `Wikipedia's article on Clean URLs `_ for more details. + +Category Page Workflow +...................... +With our URLs design chosen, let's get started. We'll undertake the following steps. + +#. Import the Page model into ``rango/views.py``. +#. Create a new view in ``rango/views.py`` - called ``category`` - The ``category`` view will take an additional parameter, ``category_name_url`` which will stored the encoded category name. + * We will need some help functions to encode and decode the ``category_name_url``. +#. Create a new template, ``templates/rango/category.html``. +#. Update Rango's ``urlpatterns`` to map the new ``category`` view to a URL pattern in ``rango/urls.py``. + +We'll also need to update the ``index()`` view and ``index.html`` template to provide links to the category page view. + +Category View +............. +In ``rango/views.py``, we first need to import the ``Page`` model. This means we must add the following import statement at the top of the file. + +.. code-block:: python + + from rango.models import Page + +Next, we can add our new view, ``category()``. + +.. code-block:: python + + def category(request, category_name_url): + # Request our context from the request passed to us. + context = RequestContext(request) + + # Change underscores in the category name to spaces. + # URLs don't handle spaces well, so we encode them as underscores. + # We can then simply replace the underscores with spaces again to get the name. + category_name = category_name_url.replace('_', ' ') + + # Create a context dictionary which we can pass to the template rendering engine. + # We start by containing the name of the category passed by the user. + context_dict = {'category_name': category_name} + + try: + # Can we find a category with the given name? + # If we can't, the .get() method raises a DoesNotExist exception. + # So the .get() method returns one model instance or raises an exception. + category = Category.objects.get(name=category_name) + + # Retrieve all of the associated pages. + # Note that filter returns >= 1 model instance. + pages = Page.objects.filter(category=category) + + # Adds our results list to the template context under name pages. + context_dict['pages'] = pages + # We also add the category object from the database to the context dictionary. + # We'll use this in the template to verify that the category exists. + context_dict['category'] = category + except Category.DoesNotExist: + # We get here if we didn't find the specified category. + # Don't do anything - the template displays the "no category" message for us. + pass + + # Go render the response and return it to the client. + return render_to_response('rango/category.html', context_dict, context) + +Our new view follows the same basic steps as our ``index()`` view. We first obtain the context of the request, then build a context dictionary, render the template, and send the result back. In this case, the difference is that the context dictionary building is a little more complex. To build our context dictionary, we need to determine which category to look at by using the value passed as parameter ``category_name_url`` to the ``category()`` view function. Once we have determined which category to look for, we can pull the relevant information from the database and append the results to our context dictionary, ``context_dict``. We'll figure out how to get the value for ``category_name_url`` from the URL shortly. + +You will have also seen in the ``category()`` view function we assume that the ``category_name_url`` is the category name where spaces are converted to underscores. We therefore replace all the underscores with spaces. This is unfortunately a pretty crude way to handle the decoding and encoding of the category name within the URL. As an exercise later, it'll be your job to create two functions to encode and decode category name. + +.. warning:: While you can use spaces in URLs, it is considered to be unsafe to use them. Check out `IETF Memo on URLs `_ to read more. + +Category Template +................. +Now let's create our template for the new view. In ``/tango_with_django_project/templates/rango/`` directory, create ``category.html``. In the new file, add the following code. + +.. code-block:: html + + + + + Rango + + + +

      {{ category_name }}

      + {% if category %} + {% if pages %} + + {% else %} + No pages currently in category. + {% endif %} + {% else %} + The specified category {{ category_name }} does not exist! + {% endif %} + + + +The HTML code example again demonstrates how we utilise the data passed to the template via its context. We make use of the ``category_name`` variable and our ``category`` and ``pages`` objects. If ``category`` is not defined within our template context, the category was not found within the database, and a friendly error message is displayed stating this fact. If the opposite is true, we then proceed to check for ``pages``. If ``pages`` is undefined or contains no elements, we display a message stating there are no pages present. Otherwise, the pages within the category are presented in a HTML list. For each page in the ``pages`` list, we present their ``title`` and ``url`` attributes. + +.. note:: The Django template conditional tag - ``{% if %}`` - is a really neat way of determining the existence of an object within the template's context. Try getting into the habit of performing these checks to reduce the scope for potential exceptions that could be raised within your code. + + Placing conditional checks in your templates - like ``{% if category %}`` in the example above - also makes sense semantically. The outcome of the conditional check directly affects the way in which the rendered page is presented to the user - and presentational aspects of your Django applications should be encapsulated within templates. + +Parameterised URL Mapping +......................... +Now let's have a look at how we actually pass the value of the ``category_name_url`` parameter to the ``category()`` function. To do so, we need to modify Rango's ``urls.py`` file and update the ``urlpatterns`` tuple as follows. + +.. code-block:: python + + urlpatterns = patterns('', + url(r'^$', views.index, name='index'), + url(r'^about/$', views.about, name='about'), + url(r'^category/(?P\w+)/$', views.category, name='category'),) # New! + +As you can see, we have added in a rather complex entry that will invoke ``view.category()`` when the regular expression ``r'^(?P\w+)/$'`` is matched. We set up our regular expression to look for any sequence of alphanumeric characters (e.g. a-z, A-Z, or 0-9) and underscores (_) before the trailing URL slash. This value is then passed to the view ``views.category()`` as parameter ``category_name_url``, the only argument after the mandatory ``request`` argument. + +.. note:: When you wish to parameterise URLs, it's important to ensure that your URL pattern matches the parameters that the corresponding view takes in. To elaborate further, let's take the example we added above. The pattern added was as follows. + + .. code-block:: python + + url(r'^category/(?P\w+)/$', views.category, name='category') + + We can from here deduce that the characters (both alphanumeric and underscores) between ``category/`` and the trailing ``/`` at the end of a matching URL are to be passed to method ``views.category()`` as named parameter ``category_name_url``. For example, the URL ``category/python_books/`` would yield a ``category_name_url`` of ``python_books``. + + As you should remember, all view functions defined as part of a Django project *must* take at least one parameter. This is typically called ``request`` - and provides access to information related to the given HTTP request made by the user. When parameterising URLs, you supply additional named parameters to the signature for the given view. Using the same example, our ``category`` view signature is altered such that it now looks like the following. + + .. code-block:: python + + def category(request, category_name_url): + # ... code here ... + + It's not the position of the additional parameters that matters, it's the *name* that must match anything defined within the URL pattern. Note how ``category_name_url`` defined in the URL pattern matches the ``category_name_url`` parameter defined for our view. Using ``category_name_url`` in our view will give ``python_books``, or whatever value was supplied as that part of the URL. + +.. note:: Regular expressions may seem horrible and confusing at first, but there are tons of resources online to help you. `This cheat sheet `_ is an excellent resource for fixing regular expression problems. + +Modifying the Index View and Template +..................................... +Our new view is set up and ready to go - but we need to do one more thing. Our index page view needs to be updated to provide users with a means to view the category pages that are listed. Update in the ``index()`` in ``rango/views.py`` as follows. + +.. code-block:: python + + def index(request): + # Obtain the context from the HTTP request. + context = RequestContext(request) + + # Query for categories - add the list to our context dictionary. + category_list = Category.objects.order_by('-likes')[:5] + context_dict = {'categories': category_list} + + # The following two lines are new. + # We loop through each category returned, and create a URL attribute. + # This attribute stores an encoded URL (e.g. spaces replaced with underscores). + for category in category_list: + category.url = category.name.replace(' ', '_') + + # Render the response and return to the client. + return render_to_response('rango/index.html', context_dict, context) + +As explained in the inline commentary, we take each category that the database returns, then iterate through the list of categories encoding the name to make it URL friendly. This URL friendly value is then placed as an attribute inside the ``Category`` object (i.e. we take advantage of Python's dynamic typing to add this attribute on the fly). + +We then pass the list of categories - ``category_list`` - to the context of the template so it can be rendered. With a ``url`` attribute now available for each category, we can update our ``index.html`` template to look like the example below. + +.. code-block:: html + + + + + Rango + + + +

      Rango says..hello world!

      + + {% if categories %} + + {% else %} + There are no categories present. + {% endif %} + + + + +Here we have updated each list element (``
    • ``) adding a HTML hyperlink (````). The hyperlink has an ``href`` attribute, which we use to specify the target URL defined by ``{{ category.url }}``. + +Demo +.... +Let's try everything out now by visiting the Rango's homepage. You should see your homepage listing all the categories. The categories should now be clickable links. Clicking on ``Python`` should then take you to the ``Python`` detailed category view, as demonstrated in Figure :num:`fig-rango-links`. If you see a list of links like ``Official Python Tutorial``, then you've successfully set up the new view. Try navigating a category which doesn't exist, like ``/rango/category/computers``. You should see a message telling you that no pages exist in the category. + +.. _fig-rango-links: + +.. figure:: ../images/rango-links.png + :figclass: align-center + + What your link structure should now look like. Starting with the Rango homepage, you are then presented with the category detail page. Clicking on a page link takes you to the linked website. + +Exercises +--------- +Reinforce what you've learnt in this chapter by trying out the following exercises. + +* Modify the index page to also include the top 5 most viewed pages. +* The encoding and decoding of the Category name to a URL is not particularly robust as every time we need to access the page we need to decode the URL. One way we can make sure the encoding and decoding is to use some functions to perform the encoding and decoding. +* While the encode and decode function help it is only part of the solution. How would you redesign the URL encoding so that it is more seamless and doesn't require encoding and decoding every time? +* Undertake the `part three of official Django tutorial `_ if you have not done so already to further what you've learnt here. + +Hints +..... +To help you with the exercises above, the following hints may be of some use to you. Good luck! + +* Update the population script to add some value to the views count for each page. +* Create an encode and decode function to convert ``category_name_url`` to ``category_name`` and vice versa. diff --git a/17/chapters/outtakes.rst.out b/17/chapters/outtakes.rst.out new file mode 100644 index 0000000..510d76c --- /dev/null +++ b/17/chapters/outtakes.rst.out @@ -0,0 +1,171 @@ +Online Manuals +************** +Most programs that can be launched from a terminal come with them a comprehensive form of online software documentation manual. These manuals can be easily accessed from the terminal directly by issuing the ``man`` command - short for manual. The ``man`` command should be supplied with the name of the program you wish to find out more about. For example, to discover more about the ``ls`` command, type ``man ls``. The prompt will disappear from the terminal, and you will be presented with documentation for ``ls``. Check out Figure :num:`fig-man` for a screenshot of the ``man`` program in operation. + +.. _fig-man: + +.. figure:: ../images/man.png + :figclass: align-center + + The ``man`` program displaying the online manual for the ``ls`` command. + +It's easy to navigate through documentation. The most straightforward way to do this is to use your up and down arrow keys to move up and down through the documentation respectively. Generally, the syntax of how to use the program is displayed at the top, with more in-depth discussion following after. To quit the manual and return to the prompt, simply push q on your keyboard. + +.. note:: Although manual documentation is available on your computer, you can also access the manuals on the World Wide Web. Websites such as http://www.linuxmanpages.com provide manual pages for thousands of programs, all neatly categorised. + +.. _requirements-installation-label: + + + +you will be essentially creating a number of URL to view mappings. Views don't just have to return web pages. As you will see later on, they can return `JSON `_/`XML `_ objects (useful for `AJAX requests `_), or any other type of file you like (through the use of static files). More complex URL mappings that include forms of parameterisation can also be handled by Django - see `here `_ for more information. *Creating clear, logical URL mappings is a hugely important aspect of developing a web application.* + + + +In an attempt to make this concept easier to understand, Figure :num:`fig-relational-schema-basic-models` shows a relational schema representing the two models defined above. + +.. _fig-relational-schema-basic-models: + +.. figure:: ../images/relational-schema-basic-models.pdf + :figclass: align-center + + A relational schema diagram which shows the two database tables created as a result of the Django models defined previously. + + + However, there are external libraries which can perform such checks and sort out such changes, for example, + + `South `_,. However, we don't discuss South in this tutorial. Have a look at the `official South tutorial `_ if you'd like to learn more. + + + Getting to grips with Django's Model-View-Template pattern is an important part of using the framework - and is often a stumbling block for many students. It can also be difficult to conform to the pattern if you have been developing in other frameworks or other tools, where you have had to do all the SQL grunt work yourself. However + + + These are stored within a Python list, demonstrated with the example taken from the Django shell below. + + .. code-block:: python + + >>> Category.objects.all() + [, , ] + + + +LOGIN +----- + + Using Django's form functionality, user registration can be provided in the following steps. + +#. First, a form should be created which maps to our ``User`` model - and if we create a secondary ``User`` model with additional fields, a form should be created to correspond to that, too. +#. We then create a view which corresponds to our one or two ``User`` form classes. +#. A template can be provided which helps describe how the forms should be displayed to the user. +#. A URL is then mapped to the view. + +User logins also make use of forms - though the number details required is usually very small (only username and password). As such, we can create a simple HTML form within a login page template, without the need to use Django's form functionality. + +#. Create a login view, ensuring that the view can process both HTTP ``GET`` and ``POST`` requests. For ``GET`` requests, the login form should be displayed to the user. For ``POST`` requests, the view should attempt to process login information provided by the user via the form. +#. Produce a template which displays a login form, containing a username and password input box. The form should also contain a login button to submit the form to the *same URL*, but using a HTTP ``POST`` request. +#. Map the login view to a URL. + +TEMPLATES +--------- + +In most applications, there is often a lot of repetition in HTML markup. This isn't a particularly bad thing. Indeed, a well-designed website includes plenty of repetition, providing users of the site with a familiarity - as well as potentially making it easier for users to find what they are looking for. Most websites have repetitive page headers, navigation bars, sidebars and footers. In terms of code, there are often identical scripts which are added to each page. Repetitive navigation bars may require the same JavaScript and styling properties! + +In essence, the identified HTML is the barebones for creating a blank HTML5 page. We identify the page as HTML5 with the ```` document type declaration - and set the title of the page to ``Rango`` like in all previous templates. Differences occur within the ```` of each page - so we have included only a HTML comment which we will replace in the next section. The ``{% load static %}`` Django template command includes the ``static`` library, which will allow us to include any static media in our base template (or inheriting templates) with minimum hassle. + + We'll be replacing the comment with a Django template block - a portion of the template which can be `overridden by an inheriting template `_. We can replace the HTML comment we previously placed with a Django block. Let's call it ``body_block`` so we can clearly identify what it should contain. Our template should now look something like the code sample below. + + + SESSIONS + -------- + + While a majority of data storage requirements will be satisfied through the use of Django's session framework, there `may be scenarios `_ where cookies would be a sensible approach. Before committing to cookies, examine the following considerations. + + + exercises + + - Using cookies will only work with the cookie persists in the user's browser. A more permanent solution is to record the number of times the user visits and to store that in their UserPro + + The ``User`` object which corresponds to the currently logged in user can be accessed at ``request.user``, where ``request`` is a reference to the single required parameter for a view. Modify the existing ``UserProfile`` model you created so that it now includes an additional field to store the number of times a user has visited the website. The end result should mean the number of times each user has visited the site should now also be stored server-side. *Remember, you will need to recreate and synchronise your database!* + + + + + + .. note:: Most web APIs provide the ability to specify in what format results are returned to the requesting computer. For an example, `check out the documentation for the Echo Nest's API `_. Note that the same data is returned in the two examples - the format in which the data is presented is the only difference. + + + + + * Update the Index page to reflect the dynamic and changing content in Rango + * List the most recently added Pages on the Index page + * List the most viewed Pages on the Index page + + + Dynamically Generating the Index page + ------------------------------------- + + To list the most recently added Pages and the most viewed Pages on the Index page you will need to: + + * Add a new field into the pages model to track when the page was added. + * when a page is added the current date will need to be inserted + * to be completed (tbc) + + + + + + + Restricting add category/pages + ............................... + + * Decorate the *add_page* and *add_category* views with the @login_required decorator method. + + + :: + + @login_required + def add_category(request): + ... + + + @login_required + def add_page(request, category_name_url): + ... + + + * Optionally, only show the "add new page" and "add new category" functionality to the user if the user is authenticated. + * If you don't do this then users will be redirected to the login page (which is fine too). + + + :: + + {% if user.is_authenticated %} +
    • Add category
      • + {% endif %} + +CSS + +*style sheet language used for describing the presentation semantics of a document written in a markup language.* CSS therefore allows you to define the look and feel of your HTML documents, all while providing a neat separation of document presentation from the document markup itself. Such separation can be pretty handy for several reasons. Most notably, the separation of presentation and markup allows for one *stylesheet* to be used to style several HTML pages. This reduces the overall complexity of your implementation, and makes maintainability of the website easier - much like Django's template inheritance functionality. The separation can also improve the accessibility of your website. For example, different styling rules can be applied for people viewing on a smartphone than on a desktop computer. + + + + While this may be easy to understand, selectors can get a `whole lot more complex `_. + + + + Experimenting + ------------- + CSS can be a tricky thing to master at the best of times. Fortunately for you, there are many tools which you can make use of to make the development of your website easier. For example, `JSFiddle `_ allows you to add markup and CSS to a really cool web-based interface and observe the changes your CSS styles make as you progress. It's a great learning tool, and `we highly recommend trying it out `_ to see what it can do for you. As a basic guide, enter markup into the top-left box, enter CSS into the top-right box, and click *Run* to see what the output is in the bottom-right. + + .. note:: We'll be using some JSFiddles as we work through different parts of the CSS tutorial. You can load them up and experiment by modifying the CSS styles to see what your changes do to the resultant output. + + + + * Update the "like" functionality so that the application keeps track of what each user likes. i.e. you will have to add in another model to record whether the user likes a category. + + +
      + {% if cat_list %} +
      • Category List
      + {% include 'rango/category_list.html' with cat_list=cat_list %} + {% endif %} +
      diff --git a/17/chapters/overview.rst b/17/chapters/overview.rst new file mode 100644 index 0000000..14e0a53 --- /dev/null +++ b/17/chapters/overview.rst @@ -0,0 +1,352 @@ +.. _overview-label: + +Overview +======== +The aim of this book is to provide you with a practical guide to web development using *Django 1.7.* The book is designed primarily for students, providing a walkthrough of the steps involved in getting your first web applications up and running, as well as deploying them to a web server. + +This book seeks to complement the `official Django Tutorials `_ and many of the other excellent tutorials available online. By putting everything together in one place, this book fills in many of the gaps in the official Django documentation providing an example-based design driven approach to learning the Django framework. Furthermore, this book provides an introduction to many of the aspects required to master web application development. + +Why Work with this Book? +------------------------ +**This book will save you time.** On many occasions we've seen clever students get stuck, spending hours trying to fight with Django and other aspects of web development. More often than not, the problem was usually because a key piece of information was not provided, or something was not made clear. While the occasional blip might set you back 10-15 minutes, sometimes they can take hours to resolve. We've tried to remove as many of these hurdles as possible. This will mean you can get on with developing your application, and not have to sit there scratching your head. + +**This book will lower the learning curve.** Web application frameworks can save you a lot of hassle and lot of time. Well, that is if you know how to use them in the first place! Often the learning curve is steep. This book tries to get you going - and going fast. By showing you how to put together a web application with all the bells and whistle from the onset, the book shortens the learning curve. + +**This book will improve your workflow.** Using web application frameworks requires you to pick up and run with a particular design pattern - so you only have to fill in certain pieces in certain places. After working with many students, we heard lots of complaints about using web application frameworks - specifically about how they take control away from them (i.e. inversion of control). To help you, we've created a number of workflows to focus your development process so that you can regain that sense of control and build your web application in a disciplined manner. + +**This book is not designed to be read.** Whatever you do, do not read this book! It is a hands-on guide to building web applications in Django. Reading is not doing. To increase the value you gain from this experience, go through and develop the application. When you code up the application, *do not just cut and paste the code.* Type it in, think about what it does, then read the explanations we have provided to describe what is going on. If you still do not understand, then check out the Django documentation, go to `Stack Overflow `_ or other helpful websites and fill in this gap in your knowledge. If you think it is worth mentioning, please get in touch with us so that we can improve the book - we already have a number of contributors and we will happily acknowledge your contribution! + +What You will Learn +------------------- +In this book, we will be taking an exampled-based approach (or inquiry-based learning). The book will show you how to design a web application called *Rango* (see the Design Brief in Section :ref:`overview-design-brief-label` below). Along the way, we'll show you how to perform the following tasks. + +* Setup a development environment - including how to use the terminal, the Pip installer, how to work with Git, etc. +* Setup a Django project and create a basic Django application. +* Configure the Django project to serve static media and other media files. +* Work with Django's *Model-View-Template* design pattern. +* Create database models and use the object relational mapping functionality provided by Django. +* Create forms that can utilise your database models to create dynamically generated webpages. +* Use the User Authentication services provided by Django. +* Incorporate external services into the application. +* Include *Cascading Styling Sheets (CSS)* and *JavaScript* within a web application. +* Design and apply CSS to improve the look and feel the web application. +* Work with cookies and sessions with Django. +* Include more advanced functionality like *AJAX* into your application. +* Deploy your application to a web server using *PythonAnywhere.* + +At the end of each chapter, we have included a number of exercises designed to push you harder and to see if you can apply what you have learned. The later chapters of the book provide a number of open development exercises along with coded solutions and explanations. Finally, all the code is available from *GitHub* at https://github.com/leifos/tango_with_django. + +To see a fully-functional version of the application, you can also visit the `How to Tango with Django `_ website at http://www.tangowithdjango.com/rango/. + +Technologies and Services +------------------------- +Through the course of this book, we will used various technologies and external services, including: + +* Python, http://www.python.org +* Pip, http://www.pip-installer.org +* Django, https://www.djangoproject.com +* Git, http://git-scm.com +* GitHub, https://github.com +* HTML, http://www.w3.org/html/ +* CSS, http://www.w3.org/Style/CSS/ +* Javascript +* JQuery, http://jquery.com +* Twitter Bootstrap, http://getbootstrap.com/ +* Bing Search API via Azure Datamarket, http://datamarket.azure.com +* PythonAnywhere, https://www.pythonanywhere.com + +We've selected these technologies and services as they are either fundamental to web development, and/or enable us to provide examples on how to integrate your web application with CSS toolkits (like *Twitter Bootstrap*), external services like (those provided by *Microsoft Azure*) and deploy your application quickly and easily (with PythonAnywhere). + +Rango: Initial Design and Specification +--------------------------------------- +As previously mentioned, the focus of this book will be to develop an application called *Rango*. As we develop this application, it will cover the core components that need to be developed when building any web application. + +.. _overview-design-brief-label: + +Design Brief +............ +Your client would like you to create a website called *Rango* that lets users browse through user-defined categories to access various web pages. In Spanish, the word rango is used to mean *"a league ranked by quality"* or *"a position in a social hierarchy"* (see https://www.vocabulary.com/dictionary/es/rango). + +* For the *main page* of the site, they would like visitors to be able to see: + * the 5 most viewed pages; + * the five most rango'ed categories; and + * some way for visitors to browse or search through categories. +* When a user views a *category page*, they would like it to display: + * the category name, the number of visits, the number of likes; + * along with the list of associated pages in that category (showing the page's title and linking to its url); and. + * some search functionality (via Bing's Search API) to find other pages that can be linked to this category. +* For a particular category, the client would like the name of the category to be recorded, the number of times each category page has been visited, and how many users have clicked a "like" button (i.e. the page gets rango'ed, and voted up the social hierarchy). +* Each category should be accessible via a readable URL - for example, ``/rango/books-about-django/``. +* Only registered users will be able to search and add pages to categories. And so, visitors to the site should be able to register for an account. + +At first glance, the application to develop seems reasonably straightforward. In essence, it is just a list of categories which link to pages, right? However, there are a number of complexities and challenges that need to be addressed. First, let's try and build up a better picture of what needs to be developed by laying down some high-level designs. + +Exercises +--------- +Before going any further, think about these specifications and draw up the following design artefacts. + +* An N-Tier or System Architecture diagram. +* Wireframes of the Main Page and the Category Page. +* The URL Mappings. +* An Entity-Relationship diagram to describe the data model that we'll be implementing. + +N-Tier Architecture +------------------- +The high-level architecture for most web applications is a *3-Tier architecture.* Rango will be a variant on this architecture as it interfaces with an external service. + +.. _fig-ntier: + +.. figure:: ../images/rango-ntier-architecture.svg + :scale: 100% + :figclass: align-center + + Overview of the system architecture for Rango. Note the inclusion of an external Search *Application Programming Interface (API).* + +Since we are building a web application with Django, we will use the following technologies for the following tiers. + +* The *client* will be a web browser (i.e Chrome, Firefox, Safari, etc.) which will render HTML/CSS pages. +* The *middleware* will be a Django application, and will be dispatched through Django's built-in development web server while we develop. +* The *database* will be the Python-based *SQLite3* Database engine. +* The *search API* will be the *Bing Search API.* + +For the most part, this book will focus on developing the middleware, though it should be quite evident from Figure :num:`fig-ntier` that we will have to interface with all the other components. + +Wireframes +---------- +Wireframes are great way to provide clients with some idea of what the application should look like when complete. They save a lot of time, and can vary from hand drawn sketches to exact mockups depending on the tools that you have available. For Rango, we'd like to make the index page of the site look like the screen shot shown in Figure :num:`fig-index-page`. Our category page is shown in Figure :num:`fig-cat-page`. + +.. _fig-index-page: + +.. figure:: ../images/ch1-rango-index.png + :scale: 60% + :figclass: align-center + + The index page with the categories bar on the left, also showing the top five pages and top five categories. + +.. _fig-cat-page: + +.. figure:: ../images/ch1-rango-cat-page.png + :scale: 60% + :figclass: align-center + + The category page showing the pages in the category (along with the number of views). Below, a search for *Python* has been conducted, with the results shown underneath. + +Pages and URL Mappings +---------------------- +From the specification, we have already identified two pages that our application will present to the user at different points in time. To access each of these pages we will need to describe in some fashion the URL mappings. Think of a URL mapping as the text a user will have to enter into a browser's address bar to reach the given page. The basic URL mappings for Rango are shown below. + +* ``/rango/`` will point to the main (or index) page view. +* ``/rango/about/`` will point to an about page view. +* ``/rango/category//`` will point to the category page view for ````, where the category might be: + * games; + * python recipes; or + * code and compilers. +* ``/rango/etc/``, where ``etc`` could be replaced with a URL for any later function we wish to implement. + +As we build our application, we will probably need to create other URL mappings. However, the ones listed above will get us started. We will also at some point have to transform category names in a valid URL string, as well as handle scenarios where the supplied category name does not exist. + +As we progress through the book, we will flesh out how to construct these pages using the Django framework and use its Model-View-Template design pattern. However, now that we have a gist of the URL mappings and what the pages are going to look like, we need to define the data model that will house the data for our web application. + +Entity-Relationship Diagram +--------------------------- +Given the specification, it should be clear that we have at least two entities: a *category* and a *page*. It should also be clear that a *category* can house many *pages*. We can formulate the following ER Diagram to describe this simple data model. + +.. _fig-rango-erd: + +.. figure:: ../images/rango-erd.svg + :scale: 100% + :figclass: align-center + + The Entity Relationship Diagram of Rango's two main entities. + +Note that this specification is vague. One page may be in one or many categories. So we could model the relationship as a many-to-many. This approach however introduces a number of complexities, so we will make the simplifying assumption that *one category contains many pages, but one page is assigned to one category.* This does not preclude that the same page can be assigned to different categories - but the page would have to be entered twice, which may not be ideal. + +It's good practice to note down any working assumptions like this. You never know when they may come back to haunt you! By noting them down, this means you can communicate it with your development team and make sure that the assumption is sensible and that they are happy to proceed under such an assumption. + +The resulting tables are shown below, where ``Str`` denotes a ``string`` or ``char`` field, ``Int`` denotes an ``integer`` field, ``URL`` denotes a URL field and ``FK`` denotes a Foreign Key. + +.. raw:: html + + + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Category Table Page Table
      FieldTypeFieldType
      nameStr categoryFK
      viewsInt titleStr
      likesInt urlURL
         viewsInt
      +
      + +We will also have a ``User`` table - which we have not shown here, but shall introduce later in the book. In the following chapters will we see how to instantiate these data models in Django and how to use Django's Object Relational Mapping to connect to the database. + +Summary +------- +These high level design and specifications will serve as a useful reference point when building our web application. While we will be focusing on using specific technologies, these steps are common to most database driven web sites. It's a good idea to become familiar and comfortable with producing such specifications and designs. + +If you already have Python 2.7 and Django 1.7 installed, you have a good working knowledge of the command line, configured your paths, then you can skip straight to the :ref:`Django Basics ` chapter. Otherwise, get started with Chapter :ref:`requirements-label`. + +Working with The Official Django Tutorials +.......................................... +We suggest undertaking the `Official Django Tutorials `_ as part of the exercises associated with each of this book's chapters. You can find a mapping between the tutorial exercises and book chapters below. The tutorial exercises will help reinforce your understanding of the Django framework, and also help you build up your skills. + +.. raw:: html + + + +
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      Tango with DjangoDjango Tutorial
      Chapter 3Part 1 - Models
      Chapter 5Part 2 - The Admin Interface
      Chapter 6Part 3 - URLs and Views
      Chapter 7Part 4 - Templates
      Chapter 18Part 5 - Testing
      Chapter 11Part 6 - CSS
      +
      + + + + + diff --git a/17/chapters/requirements.rst b/17/chapters/requirements.rst new file mode 100644 index 0000000..6fe3b87 --- /dev/null +++ b/17/chapters/requirements.rst @@ -0,0 +1,395 @@ +.. _requirements-label: + +Getting Ready to Tango +====================== +Let's get set up! To tango with Django, you'll need to ensure that you have everything you need installed on your computer and that you have a sound understanding of your development environment. This chapter walks you through what you need and what you need to know. + +For this tutorial, you'll require the following key pieces of software. + +* Python version 2.7.5+ +* Django version 1.7 + +As Django is a web application framework written in the Python programming language, you will be required to have a working knowledge of Python. If you haven't used Python before or you simply wish to brush up on your skills, then we highly recommend that you check out and work through one or more of the following guides. + +* **A quick tutorial** - Learn Python in 10 Minutes by Stavros, http://www.korokithakis.net/tutorials/python/. +* **The Official Python Tutorial** at http://docs.python.org/2/tutorial/. +* **A brilliant book**: Think Python: How to Think like a Computer Scientist by Allen B. Bowney, available online at http://www.greenteapress.com/thinkpython/. +* **An amazing online course**: Learn to Program, by Jennifer Campbell and Paul Gries at https://www.coursera.org/course/programming1. + +Using the Terminal +------------------ +In order to set up your environment learning how to use the *Command Line Interpreter (CLI)* provided by your Operating System is really important. Through the course of this tutorial, you will be interacting with the CLI routinely. If you are already familiar with using the command line interface you can skip directly to :ref:`Installing the Software ` section. + +UNIX-based operating systems all use a similar-looking `terminal `_. Descendants, derivatives and clones of UNIX include `Apple's OS X `_ and the `many available Linux distributions `_ available today. All of these operating systems contain a core set of commands which help you navigate through your filesystem and launch programs, all without the need of any graphical interface. This section provides the key commands you should familiarise yourself with. + +.. note:: This tutorial is focused towards users of UNIX-based or UNIX-derived operating systems. While Python and Django can run in a Windows-based environment, many of the commands that we use in this book are for UNIX-based terminals. These commands can however be replicated in Windows by using the graphical user interface, `using the relevant command in a Windows Command Prompt `_, or using `Windows PowerShell `_ which provides an CLI like similar to a UNIX terminal. + +Upon launching a new terminal instance, you'll typically be presented with something like: + +.. code-block:: guess + + sibu:~ leif$ + +This is called the *prompt*, and indicates when the system is waiting to execute your every command. The prompt you see varies depending on the operating system you are using, but all look generally very similar. In the example above, there are three key pieces of information to observe: + +* your username and computer name (username of ``leif`` and computer name of ``sibu``); +* your *current working directory* (the tilde, or ``~``); and +* the privilege of your user account (the dollar sign, or ``$``). + +The dollar sign (``$``) typically indicates that the user is a standard user account. Conversely, a hash symbol (``#``) may be used to signify the user logged in has `root privileges `_. Whatever symbol is present is used to signify that the computer is awaiting your input. + +Open up a terminal window and see what your prompt looks like. + +When you are using the terminal, it is important to know where you are in the file system. To find out where you are, you can issue the command ``pwd``. This will display your present working directory. For example, check the example terminal interactions below. + +.. code-block:: guess + + Last login: Mon Sep 23 11:35:44 on ttys003 + sibu:~ leif$ pwd + /Users/leif + sibu:~ leif$ + +You can see that the present working directory in this example is: ``/Users/leif``. + +You'll also note that the prompt indicates that my present working directory is ~. This is because the tilde (``~``) represents your *home directory*. The base directory in any UNIX-based file system is the *root directory*. The path of the root directory is denoted by a single forward slash (``/``). + +If you are not in your home directory you can change directory (``cd``) to your home directory by issuing the following command. + +.. code-block:: guess + + $ cd ~ + +Let's create a directory called ``code``. To do thus, use the make directory command (``mkdir``), as shown below. + +.. code-block:: guess + + $ mkdir code + +To move to the newly-created ``code`` directory, enter ``cd code``. If you now check your current working directory, you'll notice that you will be in ``~/code/``. This may also be reflected by your prompt. Note in the example below that the current working directory is printed after the ``sibu`` computer name. + +.. note:: Whenever we refer to ````, we'll be referring to your ``code`` directory. + +.. code-block:: guess + + sibu:~ leif$ mkdir code + sibu:~ leif$ cd code + sibu:code leif$ + sibu:code leif$ pwd + /Users/leif/code + +To list the files that are in a directory, you can issue the command ``ls``. You can also see hidden files or directories - if you have any - you can issue the command ``ls -a``, where ``a`` stands for *all.* If you ``cd`` back to your home directory (``cd ~``) and then issue ``ls``, you'll see that you have something called ``code`` in your home directory. + +To find out a bit more about what is in your directory, issue ``ls -l``. This will provide a more detailed *listing* of your files and whether it is a directory or not (denoted by a ``d`` at the start of the line). + +.. code-block:: guess + + sibu:~ leif$ cd ~ + sibu:~ leif$ ls -l + + drwxr-xr-x 36 leif staff 1224 23 Sep 10:42 code + +The output also contains information on the `permissions associated to the directory `_, who created it (``leif``), the group (``staff``), the size, the date/time the file was modified at, and, of course, the name. + +You may also find it useful to be able to edit files within your terminal. There are many editors which you can use - some of which may already be installed on your computer. The `nano `_ editor for example is a straightforward editor - unlike `vi `_ which can take some time to learn. Below are a list of commonly-used UNIX commands that you will find useful. + +Core Commands +************* +All UNIX-based operating systems come with a series of built-in commands - with most focusing exclusively on file management. The commands you will use most frequently are listed below, each with a short explanation on what they do and how to use them. + +- ``pwd``: *Prints* your current *working directory* to the terminal. The full path of where you are presently is displayed. +- ``ls``: Prints a list of files in the current working directory to the terminal. By default, you do not see the sizes of files - this can be achieved by appending ``-lh`` to ``ls``, giving the command ``ls -lh``. +- ``cd``: In conjunction with a path, allows you to *change* your current working *directory*. For example, the command ``cd /home/leif/`` changes the current working directory to ``/home/leif/``. You can also move up a directory level without having to provide the `absolute path `_ by using two dots, e.g. ``cd ..``. +- ``cp``: Copies files and/or directories. You must provide the *source* and the *target*. For example, to make a copy of the file ``input.py`` in the same directory, you could issue the command ``cp input.py input_backup.py``. +- ``mv``: Moves files/directories. Like ``cp``, you must provide the *source* and *target*. This command is also used to rename files. For example, to rename ``numbers.txt`` to ``letters.txt``, issue the command ``mv numbers.txt letters.txt``. To move a file to a different directory, you would supply either an absolute or relative path as part of the target - like ``mv numbers.txt /home/david/numbers.txt``. +- ``mkdir``: Creates a directory in your current working directory. You need to supply a name for the new directory after the ``mkdir`` command. For example, if your current working directory was ``/home/david/`` and you ran ``mkdir music``, you would then have a directory ``/home/david/music/``. You will need to then ``cd`` into the newly created directory to access it. +- ``rm``: Shorthand for *remove*, this command removes or deletes files from your filesystem. You must supply the filename(s) you wish to remove. Upon issuing a ``rm`` command, you will be prompted if you wish to delete the file(s) selected. You can also remove directories `using the recursive switch `_. Be careful with this command - recovering deleted files is very difficult, if not impossible! +- ``rmdir``: An alternative command to remove directories from your filesystem. Provide a directory that you wish to remove. Again, be careful: you will not be prompted to confirm your intentions. +- ``sudo``: A program which allows you to run commands with the security privileges of another user. Typically, the program is used to run other programs as ``root`` - the `superuser `_ of any UNIX-based or UNIX-derived operating system. + +.. note:: This is only a brief list of commands. Check out ubuntu's documentation on `Using the Terminal `_ for a more detailed overview, or the `Cheat Sheet + `_ by FOSSwire for a quick reference guide. + +.. _installing-software: + +Installing the Software +----------------------- +Now that you have a decent understanding of how to interact with the terminal, you can begin to install the software required for this tutorial. + +Installing Python +***************** +So, how do you go about installing Python 2.7.5 on your computer? You may already have Python installed on your computer - and if you are using a Linux distribution or OS X, you will definitely have it installed. Some of your operating system's functionality `is implemented in Python `_, hence the need for an interpreter! + +Unfortunately, nearly all modern operating systems utilise a version of Python that is older than what we require for this tutorial. There's many different ways in which you can install Python, and many of them are sadly rather tricky to accomplish. We demonstrate the most commonly used approaches, and provide links to additional reading for more information. + +.. warning:: This section will detail how to run Python 2.7.5 *alongside* your current Python installation. It is regarded as poor practice to remove your operating system's default Python installation and replace it with a newer version. Doing so could render aspects of your operating system's functionality broken! + +Apple OS X +.......... +The most simple way to get Python 2.7.5 installed on your Mac is to download and run the simple installer provided on the official Python website. You can download the installer by visiting the webpage at http://www.python.org/getit/releases/2.7.5/. + +.. warning:: Ensure that you download the ``.dmg`` file that is relevant to your particular OS X installation! + +#. Once you have downloaded the ``.dmg`` file, double-click it in the Finder. +#. The file mounts as a separate disk and a new Finder window is presented to you. +#. Double-click the file ``Python.mpkg``. This will start the Python installer. +#. Continue through the various screens to the point where you are ready to install the software. You may have to provide your password to confirm that you wish to install the software. +#. Upon completion, close the installer and eject the Python disk. You can now delete the downloaded ``.dmg`` file. + +You should now have an updated version of Python installed, ready for Django! Easy, huh? + +Linux Distributions +................... +Unfortunately, there are many different ways in which you can download, install and run an updated version of Python on your Linux distribution. To make matters worse, methodologies vary from distribution to distribution. For example, the instructions for installing Python on `Fedora `_ may differ from those to install it on an `Ubuntu `_ installation. + +However, not all hope is lost. An awesome tool (or a *Python environment manager*) called `pythonbrew `_ can help us address this difficulty. It provides an easy way to install and manage different versions of Python, meaning you can leave your operating system's default Python installation alone. Hurrah! + +Taken from the instructions provided from `the pythonbrew GitHub page `_ and `this Stack Overflow question and answer page `_, the following steps will install Python 2.7.5 on your Linux distribution. + +#. Open a new terminal instance. +#. Run the command ``curl -kL http://xrl.us/pythonbrewinstall | bash``. This will download the installer and run it within your terminal for you. This installs pythonbrew into the directory ``~/.pythonbrew``. Remember, the tilde (``~``) represents your home directory! +#. You then need to edit the file ``~/.bashrc``. In a text editor (such as ``gedit``, ``nano``, ``vi`` or ``emacs``), add the following to a new line at the end of ``~/.bashrc``: ``[[ -s $HOME/.pythonbrew/etc/bashrc ]] && source $HOME/.pythonbrew/etc/bashrc`` +#. Once you have saved the updated ``~/.bashrc`` file, close your terminal and open a new one. This allows the changes you make to take effect. +#. Run the command ``pythonbrew install 2.7.5`` to install Python 2.7.5. +#. You then have to *switch* Python 2.7.5 to the *active* Python installation. Do this by running the command ``pythonbrew switch 2.7.5``. +#. Python 2.7.5 should now be installed and ready to go. + +.. note:: Directories and files beginning with a period or dot can be considered the equivalent of *hidden files* in Windows. `Dot files `_ are not normally visible to directory-browsing tools, and are commonly used for configuration files. You can use the ``ls`` command to view hidden files by adding the ``-a`` switch to the end of the command, giving the command ``ls -a``. + +.. _requirements-install-python-windows: + +Windows +....... +By default, Microsoft Windows comes with no installations of Python. This means that you do not have to worry about leaving existing versions be; installing from scratch should work just fine. You can download a 64-bit or 32-bit version of Python from `the official Python website `_. If you aren't sure which one to download, you can determine if your computer is 32-bit or 64-bit by looking at the instructions provided `on the Microsoft website `_. + +#. When the installer is downloaded, open the file from the location to which you downloaded it. +#. Follow the on-screen prompts to install Python. +#. Close the installer once completed, and delete the downloaded file. + +Once the installer is complete, you should have a working version of Python ready to go. By default, Python 2.7.5 is installed to the folder ``C:\Python27``. We recommend that you leave the path as it is. + +Upon the completion of the installation, open a Command Prompt and enter the command ``python``. If you see the Python prompt, installation was successful. However, in certain circumstances, the installer may not set your Windows installation's ``PATH`` environment variable correctly. This will result in the ``python`` command not being found. Under Windows 7, you can rectify this by performing the following: + +#. Click the *Start* button, right click *My Computer* and select *Properties*. +#. Click the *Advanced* tab. +#. Click the *Environment Variables* button. +#. In the *System variables* list, find the variable called *Path*, click it, then click the *Edit* button. +#. At the end of the line, enter ``;C:\python27;C:\python27\scripts``. Don't forget the semicolon - and certainly *do not* add a space. +#. Click OK to save your changes in each window. +#. Close any Command Prompt instances, open a new instance, and try run the ``python`` command again. + +This should get your Python installation fully working. Windows XP, `has slightly different instructions `_, and `so do Windows 8 installationsthis `_. + +Setting Up the ``PYTHONPATH`` +***************************** +With Python now installed, we now need to check that the installation was successful. To do this, we need to check that the ``PYTHONPATH`` +`environment variable `_ is setup correctly. ``PYTHONPATH`` provides the Python interpreter with the location of additional Python `packages and modules `_ which add extra functionality to the base Python installation. Without a correctly set ``PYTHONPATH``, we'll be unable to install and use Django! + +First, let's verify that our ``PYTHONPATH`` variable exists. Depending on the installation technique that you chose, this may or may not have been done for you. To do this on your UNIX-based operating system, issue the following command in a terminal. + +.. code-block:: guess + + $ echo $PYTHONPATH + +On a Windows-based machine, open a Command Prompt and issue the following. + +.. code-block:: guess + + $ echo %PYTHONPATH% + +If all works, you should then see output that looks something similar to the example below. On a Windows-based machine, you will obviously see a Windows path, most likely originating from the C drive. + +.. code-block:: guess + + /opt/local/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages: + +This is the path to your Python installation's ``site-packages`` directory, where additional Python packages and modules are stored. If you see a path, you can continue to the next part of this tutorial. If you however do not see anything, you'll need to do a little bit of detective work to find out the path. On a Windows installation, this should be a trivial exercise: ``site-packages`` is located within the ``lib`` folder of your Python installation directory. For example, if you installed Python to ``C:\Python27``, ``site-packages`` will be at ``C:\Python27\Lib\site-packages\``. + +UNIX-based operating systems however require a little bit of detective work to discover the path of your ``site-packages`` installation. To do this, launch the Python interpreter. The following terminal session demonstrates the commands you should issue. + +.. code-block:: python + + $ python + + Python 2.7.5 (v2.7.5:ab05e7dd2788, May 13 2013, 13:18:45) + [GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwin + Type "help", "copyright", "credits" or "license" for more information. + + >>> import site + >>> print site.getsitepackages()[0] + + '/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/site-packages' + + >>> quit() + +Calling ``site.getsitepackages()`` returns a list of paths that point to additional Python package and module stores. The first typically returns the path to your ``site-packages`` directory - changing the list index position may be required depending on your installation. If you receive an error stating that ``getsitepackages()`` is not present within the ``site`` module, verify you're running the correct version of Python. Version 2.7.5 should include this function. Previous versions of the language do not include this function. + +The string which is shown as a result of executing ``print site.getsitepackages()[0]`` is the path to your installation's ``site-packages`` directory. Taking the path, we now need to add it to your configuration. On a UNIX-based or UNIX-derived operating system, edit your ``.bashrc`` file once more, adding the following to the bottom of the file. + + +.. code-block:: guess + + export PYTHONPATH=$PYTHONPATH: + +Replace ```` with the path to your ``site-packages`` directory. Save the file, and quit and reopen any instances of your terminal. + +On a Windows-based computer, you must follow the instructions shown in Section :num:`requirements-install-python-windows` to bring up the environment variables settings dialog. Add a ``PYTHONPATH`` variable with the value being set to your ``site-packages`` folder, which is typically ``C:\Python27\Lib\site-packages\``. + +Using Setuptools and Pip +************************ +Installing and setting up your development environment is a really important part of any project. While it is possible to install Python Packages such as Django separately, this can lead to numerous problems and hassles later on. For example, how would you share your setup with another developer? How would you set up the same environment on your new machine? How would you upgrade to the latest version of the package? Using a package manager removes much of the hassle involved in setting up and configuring your environment. It will also ensure that the package you install is the correct for the version of Python you are using, along with installing any other packages that are dependent upon the one you want to install. + +In this book, we will be using *Pip*. Pip is a user-friendly wrapper over the *Setuptools* Python package manager. Because Pip depends on Setuptools, we are required to ensure that both are installed on your computer. + +To start, we should download Setuptools from the `official Python package website `_. You can download the package in a compressed ``.tar.gz`` file. Using your favourite file extracting program, extract the files. They should all appear in a directory called ``setuptools-1.1.6`` - where ``1.1.6`` represents the Setuptools version number. From a terminal instance, you can then change into the directory and execute the script ``ez_setup.py`` as shown below. + +.. code-block:: guess + + $ cd setuptools-1.1.6 + $ sudo python ez_setup.py + +In the example above, we also use ``sudo`` to allow the changes to become system-wide. The second command should install Setuptools for you. To verify that the installation was successful, you should be able to see output similar to that shown below. + +.. code-block:: guess + + Finished processing dependencies for setuptools==1.1.6 + +Of course, ``1.1.6`` is substituted with the version of Setuptools you are installing. If this line can be seen, you can move onto installing Pip. This is a trivial process, and can be completed with one simple command. From your terminal instance, enter the following. + +.. code-block:: guess + + $ sudo easy_install pip + +This command should download and install Pip, again with system-wide access. You should see the following output, verifying Pip has been successfully installed. + +.. code-block:: guess + + Finished processing dependencies for pip + +Upon seeing this output, you should be able to launch Pip from your terminal. To do so, just type ``pip``. Instead of an unrecognised command error, you should be presented with a list of commands and switches that Pip accepts. If you see this, you're ready to move on! + +.. note:: With Windows-based computers, follow the same basic process. You won't need to enter the ``sudo`` command, however. + +Installing Django +***************** +Once the Python package manager Pip is successfully installed on your computer, installing Django is easy. Open a Command Prompt or terminal window, and issue the following command. + +.. code-block:: guess + + $ pip install -U django==1.7 + +If you are using a UNIX-based operating system and receive complaints about insufficient permissions, you will need to run the command with elevated privileges using the ``sudo`` command. If this is the case, you must then run the following command instead. + +.. code-block:: guess + + $ sudo pip install -U django==1.7 + +The package manager will download Django and install it in the correct location for you. Upon completion, Django should be successfully installed. Note, if you didn't include the ``==1.5.4``, then a different version of Django may be installed. + +Installing the Python Imaging Library +************************************* +During the course of building Rango, we will be uploading and handling images. This means we will need support from the `Pillow (Python Imaging Library) `_. To install this package issue the following command. + +.. code-block:: guess + + $ pip install pillow + +Again, use ``sudo`` if required. + + +Installing Other Python Packages +******************************** +It is worth noting that additional Python packages can be easily downloaded using the same manner. `The Python Package Index `_ provides a listing of all the packages available through Pip. + +To get a list of the packages installed, you can run the following command. + +.. code-block:: guess + + $ pip list + +Sharing your Package List +************************* +You can also get a list of the packages installed in a format that can be shared with other developers. To do this issue the following command. + +.. code-block:: guess + + $ pip freeze > requirements.txt + +If you examine ``requirements.txt`` using either the command ``more``, ``less`` or ``cat``, you will see the same information but in a slightly different format. The ``requirements.txt`` can then use to install the same setup by issuing the following command. This is incredibly useful for setting up your environment on another computer, for example. + +:: + + $ pip install -r requirements.txt + +Integrated Development Environment +---------------------------------- +While not absolutely necessary, a good Python-based integrated development environment (IDE) can be very helpful to you during the development process. Several exist, with perhaps JetBrains' `*PyCharm* `_ and *PyDev* (a plugin of the `Eclipse IDE `_) standing out as popular choices. The `Python Wiki `_ provides an up-to-date list of Python IDEs. + +Research which one is right for you, and be aware that some may require you to purchase a licence. Ideally, you'll want to select an IDE that supports integration with Django. PyCharm and PyDev both support Django integration out of the box - though you will have to point the IDE to the version of Python that you are using. + + + +Virtual Environments +******************** +We're almost all set to go! However, before we continue, it's worth pointing out that while this setup is fine to begin with, there are some drawbacks. What if you had another Python application that requires a different version to run? Or you wanted to switch to the new version of Django, but still wanted to maintain your Django 1.7 project? + +The solution to this is to use `virtual environments `_. Virtual environments allow multiple installations of Python and their relevant packages to exist in harmony. This is the generally accepted approach to configuring a Python setup nowadays. + + +They are pretty easy to setup, once you have pip installed, and you know the right commands. You need to install a couple of additional packages. + +:: + + $ pip install virtualenv + $ pip install virtualenvwrapper + + +The first package provides you with the infrastructure to create a virtual environment. See `a non-magical introduction to Pip and Virtualenv for Python Beginners `_ by Jamie Matthews for details about using virtualenv. However, using just *virtualenv* alone is rather complex. The second package provides a wrapper to the functionality in the virtualenv package and makes life a lot easier. + + +To use the wrapper you need to call the following shell script from your command line: +:: + + $ source virtualenvwrapper.sh + +It is a good idea to add this to your bash/profile script. So you dont have to run it each and every time you want to use virtualenvironments. + + +To create a virtual environment: + +:: + + $ mkvirtualenv rango + +You can list the virtual environments created with ``lsvirtualenv'', and you can activate a virtual environment as follows: + +:: + + $ workon rango + (rango)$ + +Your prompt with change and the current virtual environment will be displayed, i.e. rango. Now within this environment you will be able to install all the packages you like, without interferring with your standard or other environements. Try ``pip list'' to see you dont have Django or Pillow installed in your virtual environment. You can now install them with pip so that they exist in your virtual environment. + +Later on when we go to deploy the application, we will go through a similar process see Chapter :ref:`Deploying your Application` and set up a virtual environment on PythonAnywhere. + +Code Repository +*************** +We should also point out that when you develop code, you should always house your code within a version-controlled repository such as `SVN `_ or `GIT `_. We won't be going through this right now so that we can get stuck into developing an application in Django. We have however provided a :ref:`crash course on GIT `. We highly recommend that you set up a GIT repository for your own projects. Doing so could save you from disaster. + + + + +Exercises +--------- +To get comfortable with your environment, try out the following exercises. + +* Install Python 2.7.5+ and Pip. +* Play around with your CLI and create a directory called ``code``, which we use to create our projects in. +* Install the Django and Pillow packages. +* Setup your Virtual Environment +* Setup your account on GitHub +* Download and setup a Integrated Development Environemnt (like PyCharm) +* We have made the code for the book and application that you build available on GitHub, see `Tango With Django Book `_ and `Rango Application `_ . + * If you spot any errors or problem with the book, you can make a change request! + * If you have any problems with the exercises, you can check out the repository and see how we completed them. + + diff --git a/17/chapters/setup.rst b/17/chapters/setup.rst new file mode 100644 index 0000000..25cd1ac --- /dev/null +++ b/17/chapters/setup.rst @@ -0,0 +1,283 @@ +.. _setup-label: + +.. _django-basics: + +Django Basics +============= +Let's get started with Django! In this chapter, we'll be giving you an overview of the how to get started with Django. You'll be setting up a new project and a new web application. By the end of this chapter, you will have a simple Django-power webpage up and running! + +Testing your Setup +------------------ +Let's start by checking that your Python and Django installations are installed correctly, and are at the correct version for this tutorial. To do this, open a new terminal instance and issue the following command. + +:: + + $ python --version + 2.7.5 + +This starts your Python interpreter and executes the code within the string provided as part of the ``-c`` switch. You should see the version of your Python installation printed as the output to the process. If the version displayed is anything but ``2.7.5``, you will need to go back to Section :ref:`installing-software` and verify you have completed all the relevant steps for your operating system. + +After verifying your Python installation, check your Django installation by issuing the following command. + +:: + + $ python -c "import django; print(django.get_version())" + 1.7 + +The command again executes the code within the string provided as part of the ``-c`` switch. After importing Django, you should see ``1.5.4`` printed underneath. If you see a different set of numbers or are greeted with a Python ``ImportError``, go back to Section :ref:`installing-software` or consult the `Django Documentation on Installing Django `_ for more information. If you find that you have got a different version of Django, it is possible that you will come across problems at some point. It's definitely worth making sure you have Django 1.7 installed. + +Creating your Django Project +---------------------------- +To create a new Django Project, go to your ``code`` directory (i.e. your ```` directory), and issue the following command: + +``$ python django-admin.py startproject tango_with_django_project`` + +.. note:: On Windows you may have to use the full path to the django-admin.py script. i.e. ``python c:\python27\scripts\django-admin.py startproject tango_with_django_project`` as suggested on `StackOverflow `_. + +This command will invoke the ``django-admin.py`` script, which will set up a new Django project called ``tango_with_django_project`` for you. Typically, we append ``_project`` to the end of our Django project directories so we know exactly what they contain - but the naming convention is entirely up to you. + +You'll now notice within your workspace is a directory set to the name of your new project, ``tango_with_django_project``. Within this newly created directory, you should see two items: + +* another directory with the same name as your project, ``tango_with_django_project``; and +* a Python script called ``manage.py``. + +For the purposes of this tutorial, we call this nested directory the *project configuration directory*. Within this directory, you will find four Python scripts. We will discuss this scripts in detail later on, but for now you should see: + +* ``__init__.py``, a blank Python script whose presence indicates to the Python interpreter that the directory is a Python package; +* ``settings.py``, the place to store all of your Django project's settings; +* ``urls.py``, a Python script to store URL patterns for your project; and +* ``wsgi.py``, a Python script used to help run your development server and deploy your project to a production environment. + +.. note:: The project configuration directory has been created with new Django projects since version 1.4. Having two directories with the same name may seem quite a bit odd, but the change was made to separate out project-related components from its individual applications. + +In the project directory, you will see there is a file called ``manage.py``. We will be calling this script time and time again as we develop our project, as it provides you with a series of commands you can run to maintain your Django project. For example, ``manage.py`` allows you to run the built-in Django development server to test your work and run database commands. You'll be using this script a lot throughout the development cycle. + +.. note:: See the Django documentation for more details about the `Admin and Manage scripts `_. + +You can try using the ``manage.py`` script now, by issuing the following command. + +``$ python manage.py runserver`` + +Executing this command will instruct Django to initiate its lightweight development server. You should see the output in your terminal similar to the example shown below: + +:: + + $ python manage.py runserver + + System check identified no issues (0 silenced). + + You have unapplied migrations; your app may not work properly until they are applied. + Run 'python manage.py migrate' to apply them. + + October 01, 2014 - 19:49:05 + Django version 1.7c2, using settings 'tango_with_django_project.settings' + Starting development server at http://127.0.0.1:8000/ + Quit the server with CONTROL-C. + + + +:: + + $ python manage.py migrate + + Operations to perform: + Apply all migrations: admin, contenttypes, auth, sessions + Running migrations: + Applying contenttypes.0001_initial... OK + Applying auth.0001_initial... OK + Applying admin.0001_initial... OK + Applying sessions.0001_initial... OK + + +#TODO(leifos): add description of migrate command: from django tutorial: The migrate command looks at the INSTALLED_APPS setting and creates any necessary database tables according to the database settings in your mysite/settings.py file and the database migrations shipped with the app (we’ll cover those later). You’ll see a message for each migration it applies. If you’re interested, run the command-line client for your database and type \dt (PostgreSQL), SHOW TABLES; (MySQL), or .schema (SQLite) to display the tables Django created. + + + + +Now open up your favourite web browser and enter the URL http://127.0.0.1:8000/ [#f1]_. You should see a webpage similar to the one shown in Figure :num:`fig-django-dev-server-firstrun`. + +.. _fig-django-dev-server-firstrun: + +.. figure:: ../images/django-dev-server-firstrun.png + :figclass: align-center + + A screenshot of the initial Django page you will see when running the development server for the first time. + +You can stop the development server at anytime by pushing ``CTRL + C`` in your terminal window. If you wish to run the development server on a different port, or allow users from other machines to access it, you can do so by supplying optional arguments. Consider the following command: + +``$ python manage.py runserver :5555`` + +Executing this command will force the development server to respond to incoming requests on TCP port 5555. You will need to replace ```` with your computer's IP address. + +When setting ports, it is unlikely that you will be able to use TCP port 80 as this is traditionally reserved for HTTP traffic. Also, any port below 1024 is considered to be `privileged `_ by your operating system. + +While you won't be using the lightweight development server to deploy your application, sometimes it is nice to be able to demo your application on a computer of a colleague. Running the server with your machine's IP address will enable others to enter in ``http://:/`` and view your web application. Of course, this will depend on how your network is configured. There may be proxy servers or firewalls in the way which would need to be configured before this would work. Check with the administrator of the network you are using if you can't view the development server remotely. + +.. note:: The ``django-admin.py`` and ``manage.py`` scripts provides a lot of useful, time-saving functionality for you. ``django-admin.py`` allows you to start new projects and apps, along with other commands. Within your project directory, ``manage.py`` allows you to perform administrative tasks within the scope of your project only. Simply execute the relevant script name without any arguments to see what you can do with each. The `official Django documentation provides a detailed list and explanation of each possible command `_ you can supply for both scripts. + +If you are using version control, now may be a good time to commit the changes you have made to your workspace. Refer to the :ref:`crash course on GIT ` if you can't remember the commands and steps involved in doing this. + +Creating a Django Application +----------------------------- +A Django project is a collection of *configurations* and *applications* that together make up a given web application or website. One of the intended outcomes of using this approach is to promote good software engineering practices. By developing a small series of applications, the idea is that you can theoretically drop an existing application into a different Django project and have it working with minimal effort. Why reinvent the wheel if it's already there? [#f2]_ + +A Django application exists to perform a particular task. You need to create specific applications that are responsible for providing your site with particular kinds of functionality. For example, we could imagine that a project might consist of several applications including a polling app, a registration app, and a specific content related app. In another project, we may wish to re-use the polling and registration apps and use them with to dispatch different content. There are many Django applications you can `download `_ and use in your projects. Since we are getting started, we'll kick off by walking through how to create your own application. + +To start, create a new application called *Rango*. From within your Django project directory (e.g. ``/tango_with_django_project``), run the following command. + +:: + + $ python manage.py startapp rango + +The ``startapp`` command creates a new directory within your project's root. Unsurprisingly, this directory is called ``rango`` - and contained within it are another five Python scripts: + +- another ``__init__.py``, serving the exact same purpose as discussed previously; +- models.py, a place to store your application's data models - where you specify the entities and relationships between data; +- tests.py, where you can store a series of functions to test your application's code; and +- views.py, where you can store a series of functions that take a clients's requests and return responses. +- admin.py, where you can register your models so that you can benefit from some Django machinery which creates an admin interface for you (see #TODO(leifos):add link to admin chapter) + + +``views.py`` and ``models.py`` are the two files you will use for any given application, and form part of the main architectural design pattern employed by Django, i.e. the *Model-View-Template* pattern. You can check out `the official Django documentation `_ to see how models, views and templates relate to each other in more detail. + +Before you can get started with creating your own models and views, you must first tell your Django project about your new application's existence. To do this, you need to modify the ``settings.py`` file, contained within your project's configuration directory. Open the file and find the ``INSTALLED_APPS`` tuple. Add the ``rango`` application to the end of the tuple, which should then look like the following example. + +.. code-block:: python + + INSTALLED_APPS = ( + 'django.contrib.admin', + 'django.contrib.auth', + 'django.contrib.contenttypes', + 'django.contrib.sessions', + 'django.contrib.messages', + 'django.contrib.staticfiles', + 'rango', + ) + +Verify that Django picked up your new application by running the development server again. If you can start the server without errors, your application was picked up and you will be ready to proceed to the next step. + +Creating a View +--------------- +With our Rango application created, let's now create a simple view. For our first view, let's just send some simple text back to the client - we won't concern ourselves about using models or templates just yet. + +In your favourite IDE, open the file ``views.py``, located within your newly created ``rango`` application directory. Remove the comment ``# Create your views here.`` so that you now have a blank file. + +You can now add in the following code. + +.. code-block:: python + + from django.http import HttpResponse + + def index(request): + return HttpResponse("Rango says hey there world!") + +Breaking down the three lines of code, we observe the following points about creating this simple view. + +* We first import the `HttpResponse `_ object from the ``django.http`` module. +* Each view exists within the ``views.py`` file as a series of individual functions. In this instance, we only created one view - called ``index``. +* Each view takes in at least one argument - a `HttpRequest `_ object, which also lives in the ``django.http`` module. Convention dictates that this is named ``request``, but you can rename this to whatever you want if you so desire. +* Each view must return a HttpResponse object. A simple HttpResponse object takes a string parameter representing the content of the page we wish to send to the client requesting the view. + +With the view created, you're only part of the way to allowing a user to access it. For a user to see your view, you must map a `Uniform Resources Locator (URL) `_ to the view. + +Mapping URLs +------------ +Within the ``rango`` application directory, we now need to create a new file called ``urls.py``. The contents of the file will allow you to map URLs for your application (e.g. ``http://www.tangowithdjango.com/rango/``) to specific views. Check out the simple ``urls.py`` file below. + +.. code-block:: python + + from django.conf.urls import patterns, url + from rango import views + + urlpatterns = patterns('', + url(r'^$', views.index, name='index')) + +This code imports the relevant Django machinery that we use to create URL mappings. Importing the ``views`` module from ``rango`` also provides us with access to our simple view implemented previously, allowing us to reference the view in the URL mapping we will create. + +To create our mappings, we use a `tuple `_. For Django to pick your mappings up, this tuple *must* be called ``urlpatterns``. The ``urlpatterns`` tuple contains a series of calls to the ``django.conf.urls.url()`` function, with each call handling a unique mapping. In the code example above, we only use ``url()`` once, so we have therefore defined only one URL mapping. The first parameter we provide to the ``django.conf.urls.url()`` function is the regular expression ``^$``, which matches to an empty string. Any URL supplied by the user that matches this pattern means that the view ``views.index()`` would be invoked by Django. The view would be passed a ``HttpRequest`` object as a parameter, containing information about the user's request to the server. We also make use of the optional parameter to the ``url()`` function, ``name``, using the string ``'index'`` as the associated value. + +.. note:: You might be thinking that matching a blank URL is pretty pointless - what use would it serve? When the URL pattern matching takes place, only a portion of the original URL string is considered. This is because our Django project will first process the original URL string (i.e. ``http://www.tangowithdjango.com/rango/``). Once this has been processed, it is removed, with the remained being passed for pattern matching. In this instance, there would be nothing left - so an empty string would match! + +.. note:: The ``name`` parameter is optional to the ``django.conf.urls.url()`` function. This is provided by Django to allow you to distinguish one mapping from another. It is entirely plausible that two separate URL mappings expressions could end calling the same view. ``name`` allows you to differentiate between them - something which is useful for *reverse URL matching.* Check out `the Official Django documentation on this topic `_ for more information. + +You may have seen that within your project configuration directory a ``urls.py`` file already exists. Why make another? Technically, you can put *all* the URLs for your project's applications within this file. However, this is considered bad practice as it increases coupling on your individual applications. A separate ``urls.py`` file for each application allows you to set URLs for individual applications. With minimal coupling, you can then join them up to your project's master ``urls.py`` file later. + +This means we need to configure the ``urls.py`` of our project ``tango_with_django_project`` and connect up our main project with our Rango application. + +How do we do this? It's quite simple. Open the project's ``urls.py`` file which is located inside your project configuration directory. As a relative path from your workspace directory, this would be the file ``/tango_with_django_project/tango_with_django_project/urls.py``. Update the ``urlpatterns`` tuple as shown in the example below. + +.. code-block:: python + + + urlpatterns = patterns('', + # Examples: + # url(r'^$', 'tango_with_django_project_17.views.home', name='home'), + # url(r'^blog/', include('blog.urls')), + + url(r'^admin/', include(admin.site.urls)), + url(r'^rango/', include('rango.urls')), # ADD THIS NEW TUPLE! + ) + +The added mapping looks for url strings that match the patterns ``^rango/``. When a match is made the remainder of the url string is then passed onto and handled by ``rango.urls`` (which we have already configured). This is done with the help of the ``include()`` function from within ``django.conf.urls``. Think of this as a chain that processors the URL string - as illustrated in Figure :num:`fig-url-chain`. In this chain, the domain is stripped out and the remainder of the url string (``rango/``) is passed on to tango_with_django project, where it finds a match and strips away ``rango/`` leaving and empty string to be passed on to the application rango. Rango now tries to match the empty string, which it does, and this then dispatches the ``index()`` view that we created. + +Restart the Django development server and visit ``http://127.0.0.1:8000/rango``. If all went well, you should see the text ``Rango says hello world!``. It should look just like the screenshot shown in Figure :num:`fig-rango-hello-world`. + +.. _fig-url-chain: + +.. figure:: ../images/url-chain.svg + :figclass: align-center + + An illustration of a URL, showing how the different parts of the URL are the responsibility of different ``url.py`` files. + +.. _fig-rango-hello-world: + +.. figure:: ../images/rango-hello-world.png + :figclass: align-center + + A screenshot of Google Chrome displaying our first Django-powered webpage. Hello, Rango! + +Within each application, you will create a number of URL to view mappings. This initial mapping is quite simple. As we progress, we will create more sophisticated mappings that using allow the URLs to be parameterised. + +It's important to have a good understanding of how URLs are handled in Django. If you are still bit confused or would like to know more check out the `official Django documentation on URLs `_ for further details and further examples. + +.. note:: The URL patterns use `regular expressions `_ to perform the matching. It is worthwhile familiarising yourself on how to use regular expressions in Python. The official Python documentation contains a `useful guide on regular expressions `_ , while regexcheatsheet.com provides a `neat summary of regular expressions `_. + +Basic Workflows +--------------- +What you've just learnt in this chapter can be succinctly summarised into a list of actions. Here, we provide these lists for the two distinct tasks you have performed. You can use this section for a quick reference if you need to remind yourself about particular actions. + +Creating a new Django Project +............................. +#. To create the project run, ``python django-admin.py startproject ``, where ```` is the name of the project you wish to create. + +Creating a new Django application +................................. +#. To create a new application run, ``$ python manage.py startapp ``, where ```` is the name of the application you wish to create. +#. Tell your Django project about the new application by adding it to the ``INSTALLED_APPS`` tuple in your project's ``settings.py`` file. +#. In your project ``urls.py`` file, add a mapping to the application. +#. In your application's directory, create a ``urls.py`` file to direct incoming URL strings to views. +#. In your application's ``view.py``, create the required views ensuring that they return a ``HttpResponse`` object. + +Exercises +--------- +Congratulations! You have got Rango up and running. This is a significant landmark in working with Django. Creating views and mapping URLs to views is the first step towards developing more complex and usable web applications. Now try the following exercises to reinforce what you've learnt. + +* Revise the procedure and make sure you follow how the URLs are mapped to views. +* Now create a new view called ``about`` which returns the following: ``Rango says here is the about page.`` +* Now map the this view to ``/rango/about/``. For this step, you'll only need to edit the ``urls.py`` of the rango application. +* Revise the ``HttpResponse`` in the ``index`` view to include a link to the about page. +* In the ``HttpResponse`` in the ``about`` view include a link back to the main page. +* If you haven't done so already, it is a good point to go off an complete part one of the official `Django Tutorial `_. + +Hints +..... +If you're struggling to get the exercises done, the following hints will hopefully provide you with some inspiration on how to progress. + +* Your ``index`` view should be updated to include a link to the ``about`` view. Keep it simple for now - something like ``Rango says: Hello world!
      About`` will suffice. We'll be going back later to improve the presentation of these pages. +* The regular expression to match ``about/`` is ``r'^about/'`` - this will be handy when thinking about your URL pattern. +* The HTML to link back to the index page is ``Index``. The link uses the same structure as the link to the ``about`` page shown above. + +.. rubric:: Footnotes +.. [#f1] This assumes that you are using the IP address 127.0.0.1 and port 8000 when running your Django development web server. If you do not explicitly provide a port to run the development server on, Django defaults to port 8000 for you. + +.. [#f2] There are many applications available out there that you can use in your project. Take a look at `PyPI `_ and `Django Packages `_ to search for reusable apps which you can drop into your projects. diff --git a/17/chapters/summary.rst b/17/chapters/summary.rst new file mode 100644 index 0000000..5783066 --- /dev/null +++ b/17/chapters/summary.rst @@ -0,0 +1,6 @@ +Summary +======= + +In this book, we have gone through the process of web development from specification to deployment. Along the way we have shown how to use the Django framework to construct the models, views and templates associated with a web application. We have also demonstrated how toolkits and services like Bootstrap, JQuery, Bing Search, PythonAnywhere, etc can be integrated within an application. However, the road doesn't stop here. While, as we have only painted the broad brush strokes of a web application - as you have probably noticed there are lots of improvements that could be made to Rango - and these finer details often take a lot more time to complete as you polish the application. By developing your application on a firm base and good setup you will be able to construct up to 80% of your site very rapidly and get a working version up to demo fast. + +In future versions of this book we intend to provide some more details on various aspects of the framework, along with covering the basics of some of the other fundamental technologies associated with web development. If you have any suggestions or comments about how to improve the book please get in touch. \ No newline at end of file diff --git a/17/chapters/tango.rst b/17/chapters/tango.rst new file mode 100644 index 0000000..a7c5113 --- /dev/null +++ b/17/chapters/tango.rst @@ -0,0 +1,83 @@ +.. _tango-label: + +Making Rango Tango! Exercises +============================= + +So far we have been adding in different pieces of functionality to Rango. We've been building up the application in this manner to get you familiar with the Django Framework, and to learn about how to construct the various parts of a website that you are likely to make in your own projects. Rango however at the present moment is not very cohesive. In this chapter, we challenge you to improve the application and its user experience by bringing together functionality that we've already implemented alongside some awesome new additions. + +To make Rango more coherent and integrated it would be nice to add the following functionality. + +* Integrate the browsing and searching within categories, i.e.: + * provide categories on every page; + * provide some way to search through categories (see Chapter :ref:`ajax-label`); and + * instead of have a disconnected search page, let users search for pages within a category so that they can then add these pages to the category (see Chapter :ref:`ajax-label`) + +* Provide services for Registered Users, i.e.: + * let users view their profile; + * let users edit their profile; and + * let users see the list of users and their profiles. + +* Track the click throughs of Categories and Pages, i.e.: + * count the number of times a category is viewed; + * count the number of times a page is viewed via Rango; and + * collect likes for categories (see Chapter :ref:`ajax-label`). + +.. note:: We won't be working through all of these tasks right now. Some will be taken care of in Chapter :ref:`ajax-label`, while some will be left to you to complete as additional exercises. + +Before we start to add this additional functionality we will make a todo list to plan our workflow for each task. Breaking tasks down into sub-tasks will greatly simplify the implementation and mean that we are attacking each one with a clear plan. In this chapter, we will provide you with the workflow for a number of the above tasks. From what you have learnt so far, you should be able to fill in the gaps and implement most of it on your own. The following chapter however includes the code walkthrough, along with notes on how we have implemented each task. + + +Providing Categories on Every Page +---------------------------------- + +It would be nice to show the different categories that users can browse through on any page, and not just the index page. There are a number of ways that this can be achieved, but given what we have learnt so far, we could undertake the following workflow: + +* Create a ``category_list.html`` template and migrate the template code for presenting the categories list from ``index.html`` to this new template. This template won't be a full HTML document, but a portion of one which we can include in other templates. +* Use the ``{% include "rango/category_list.html" %}`` to now include this template code into the ``base.html`` template within the sidebar. This means that all pages will now include categories, assuming the ``cat_list`` data is passed through in the context dictionary. + * To handle the scenario where ``cat_list`` isn't available, add the conditional ``{% if cat_list %}`` to ensure that only templates providing ``cat_list`` attempt to render this component. +* Migrate the code that gathers the list of categories from the ``index()`` view and place it into your ``category()`` view. While it's really tempting to simply copy and paste, there's a much better way to go about this! + * Create a helper function called ``get_category_list()`` within ``views.py`` that returns the list of categories. + * We can then call this function whenever we want to get the category list to be presented in the sidebar. This saves a lot of code repetition! +* Pass the category list data (``cat_list``) through to the template to complete the process. + +Searching Within a Category Page +-------------------------------- +Rango aims to provide users with a helpful directory of page links. At the moment, the search functionality is essentially independent of the categories. It would be nicer however to have search integrated into category browsing. Let's assume that a user will first browse their category of interest first. If they can't find the page that they want, they can then search for it. If they find a page that is suitable, then they can add it to the category that they are in. Let's tackle the first part of this description here. + +We first need to remove the global search functionality and only let users search within a category. This will mean that we essentially decommission the current search page and search view. After this, we'll need to perform the following steps. + +* Remove the generic *Search* link from the menu bar. +* Take the search form and results template markup from ``search.html`` and place it into ``category.html``. +* Update the category view to handle a HTTP ``POST`` request. The view must then include any search results in the context dictionary for the template to render. + +View Profile +------------ +Another useful feature to add is a profile page, where users can view details of their Rango profile. Undertake the following steps to add this functionality. + +* First, create a template called ``profile.html``. In this template, add in the fields associated with the user profile and the user (i.e. username, email, website and picture). +* Create a view called ``profile()``. This view will obtain the data required to render the user profile template. +* Map the URL ``/rango/profile/`` to your new ``profile()`` view. +* In the base template add a link called *Profile* into the menu bar, preferably on the right-hand side with other user-related links. This should only be available to users who are logged in (i.e. ``{% if user.is_authenticated %}``). + +Track Page Click Throughs +------------------------- +Currently, Rango provides a direct link to external pages. This is not very good if you want to track the number of times each page is clicked and viewed. To count the number of times a page is viewed via Rango you will need to perform the following steps. + +* Create a new view called ``track_url()``, and map it to URL ``/rango/goto/``. +* The ``track_url()`` view will examine the HTTP ``GET`` request parameters and pull out the ``page_id``. The HTTP ``GET`` requests will look something like ``/rango/goto/?page_id=1``. + * Your view should then be able to find the relevant ``Page`` model for the selected page, and add 1 to the associated ``views`` field. + * The view will then redirect the user to the specified URL using Django's ``redirect`` method. + * In the scenario where no parameters are in the HTTP ``GET`` request for ``page_id``, or the parameters do not return a ``Page`` object, redirect the user to Rango's homepage. +* Update the ``category.html`` so that it uses ``/rango/goto/?page_id=XXX`` instead of using the direct URL. + +Hint +.... +If you're unsure of how to retrieve the ``page_id`` *querystring* from the HTTP ``GET`` request, the following code sample should help you. + +.. code-block:: python + + if request.method == 'GET': + if 'page_id' in request.GET: + page_id = request.GET['page_id'] + +Always check the request method is of type ``GET`` first, then you can access the dictionary ``request.GET`` which contains values passed as part of the request. If ``page_id`` exists within the dictionary, you can pull the required value out with ``request.GET['page_id']``. \ No newline at end of file diff --git a/17/chapters/tango_too.rst b/17/chapters/tango_too.rst new file mode 100644 index 0000000..c6ed4ae --- /dev/null +++ b/17/chapters/tango_too.rst @@ -0,0 +1,320 @@ +.. _tango-too-label: + +Doing the Tango with Rango! +=========================== + +Hopefully, you will have been able to complete the exercises given the workflows we provided, if not, or if you need a little help checkout snippets of code and use them within your version of Rango. + + + +.. ######################################################################### + +List Categories on Each Page +---------------------------- + +Creating a Category List Template +................................. +Create a ``category_list.html`` template so that it looks like the code below: + +.. code-block:: html + +
        + {% if cat_list %} + {% for cat in cat_list %} +
      • {{ cat.name }}
        • + {% endfor %} + {% else %} +
      • No categories at present.
        • + {% endif %} +
      + +Updating the Base Template +.......................... +In the sidebar ``
      ``, add ``{% include "rango/category_list.html" %}`` so that the ``base.html`` contains: + +.. code-block:: html + +
      + {% block sidebar %} + {% endblock %} +
      + {% if cat_list %} +
      • Category List
      + {% include 'rango/category_list.html' with cat_list=cat_list %} + {% endif %} +
      +
      + +Creating Get Category List Function +................................... +In ``rango/views.py``, create a function called ``get_category_list()`` that returns the list of categories. + +.. code-block:: python + + def get_category_list(): + cat_list = Category.objects.all() + + for cat in cat_list: + cat.url = encode_url(cat.name) + + return cat_list + +Updating Views +.............. +Then call this function in each of the views that you want to display the category list in the sidebar, and pass the list into the context dictionary. For example, to have the categories showing on the index page, alter the ``index()`` view as follows: + +.. code-block:: python + + def index(request): + context = RequestContext(request) + cat_list = get_category_list() + + context_dict['cat_list'] = cat_list + + .... + + return render_to_response('rango/index.html', context_dict, context) + +Note: to add the category list to all the other pages, you will need to do some refactoring to pass in all the context variables. + +.. ######################################################################### + +Searching Within a Category Page +-------------------------------- +Rango aims to provide users with a helpful directory of page links. At the moment, the search functionality is essentially independent of the categories. It would be nicer however to have search integrated into category browsing. Let's assume that a user will first browse their category of interest first. If they can't find the page that they want, they can then search for it. If they find a page that is suitable, then they can add it to the category that they are in. Let's tackle the first part of this description here. + +We first need to remove the global search functionality and only let users search within a category. This will mean that we essentially decommission the current search page and search view. After this, we'll need to perform the following. + +Decommissioning Generic Search +.............................. +Remove the generic *Search* link from the menu bar by editing the ``base.html`` template. You can also remove or comment out the URL mapping in ``rango/urls.py``. + +Creating a Search Form Template +............................... +Take the search form from ``search.html`` and put it into the ``category.html``. Be sure to change the action to point to the ``category()`` view as shown below. + +.. code-block:: html + +
      +

      Search for a page.

      + +
      + +Also include a ``
      `` to house the results underneath. + +.. code-block:: html + +
      + {% if result_list %} + +
        + {% for result in result_list %} +
      1. + {{ result.title }}
        +

        {{ result.summary }}

        +
        2. + {% endfor %} +
      + {% else %} +
      +

      No results found

      + {% endif %} +
      + +Updating the Category View +.......................... +Update the category view to handle a HTTP ``POST`` request (i.e. when the user submits a search) and inject the results list into the context. The following code demonstrates this new functionality. + +.. code-block:: python + + def category(request, category_name_url): + # Request our context + context = RequestContext(request) + + # Change underscores in the category name to spaces. + # URL's don't handle spaces well, so we encode them as underscores. + category_name = decode_url(category_name_url) + + # Build up the dictionary we will use as out template context dictionary. + context_dict = {'category_name': category_name, 'category_name_url': category_name_url} + + cat_list = get_category_list() + context_dict['cat_list'] = cat_list + + try: + # Find the category with the given name. + # Raises an exception if the category doesn't exist. + # We also do a case insensitive match. + category = Category.objects.get(name__iexact=category_name) + context_dict['category'] = category + # Retrieve all the associated pages. + # Note that filter returns >= 1 model instance. + pages = Page.objects.filter(category=category).order_by('-views') + + # Adds our results list to the template context under name pages. + context_dict['pages'] = pages + except Category.DoesNotExist: + # We get here if the category does not exist. + # Will trigger the template to display the 'no category' message. + pass + + if request.method == 'POST': + query = request.POST['query'].strip() + if query: + result_list = run_query(query) + context_dict['result_list'] = result_list + + # Go render the response and return it to the client. + return render_to_response('rango/category.html', context_dict, context) + +.. ######################################################################### + +View Profile +------------ +To add the view profile functionality, undertake the following steps. + +Creating the Profile Template +............................. +First, create a new template called ``profile.html``. In this template, add the following code. + +.. code-block:: html + + {% extends "rango/base.html" %} + + {% block title %}Profile{% endblock %} + + {% block body_block %} +
      +

      Profile


      +

      {{ user.username }}

      +

      Email: {{ user.email }}

      + + {% if userprofile %} +

      Website: {{ userprofile.website }}

      +
      + {% if userprofile.picture %} + + {% endif %} + {% endif %} +
      + {% endblock %} + + +Creating Profile View +...................... +Create a view called ``profile`` and add the following code. + +.. code-block:: python + + from django.contrib.auth.models import User + + @login_required + def profile(request): + context = RequestContext(request) + cat_list = get_category_list() + context_dict = {'cat_list': cat_list} + u = User.objects.get(username=request.user) + + try: + up = UserProfile.objects.get(user=u) + except: + up = None + + context_dict['user'] = u + context_dict['userprofile'] = up + return render_to_response('rango/profile.html', context_dict, context) + +Mapping the Profile View and URL +................................ +Create a mapping between the URL ``/rango/profile`` and the ``profile()`` view. Do this by updating the ``urlpatterns`` tuple in ``rango/urls.py`` so that it includes the following entry. + +.. code-block:: python + + url(r'^profile/$', views.profile, name='profile'), + +Updating the Base Template +.......................... +In the ``base.html`` template, update the code to put a link to the profile page in the menu bar. + +.. code-block:: html + + {% if user.is_authenticated %} +
    • Profile
      • + {% endif %} + +.. ######################################################################### + +Track Page Click Throughs +------------------------- +Currently, Rango provides a direct link to external pages. This is not very good if you want to track the number of times each page is clicked and viewed. To count the number of times a page is viewed via Rango you will need to perform the following steps. + +Creating a URL Tracking View +............................ +Create a new view called ``track_url()`` in ``/rango/views.py`` which takes a parameterised HTTP ``GET`` request (i.e. ``rango/goto/?page_id=1``) and updates the number of views for the page. The view should then redirect to the actual URL. + +.. code-block:: python + + def track_url(request): + context = RequestContext(request) + page_id = None + url = '/rango/' + if request.method == 'GET': + if 'page_id' in request.GET: + page_id = request.GET['page_id'] + try: + page = Page.objects.get(id=page_id) + page.views = page.views + 1 + page.save() + url = page.url + except: + pass + + return redirect(url) + +Be sure that you import the ``redirect()`` function to ``views.py`` if it isn't included already! + +.. code-block:: python + + from django.shortcuts import redirect + +Mapping URL +........... +In ``/rango/urls.py`` add the following code to the ``urlpatterns`` tuple. + +.. code-block:: python + + url(r'^goto/$', views.track_url, name='track_url'), + + +Updating the Category Template +............................... +Update the ``category.html`` template so that it uses ``rango/goto/?page_id=XXX`` instead of providing the direct URL for users to click. + +.. code-block:: html + + {% if pages %} +
        + {% for page in pages %} +
      • + {{page.title}} + {% if page.views > 1 %} + - ({{ page.views }} views) + {% elif page.views == 1 %} + - ({{ page.views }} view) + {% endif %} +
        • + {% endfor %} +
      + {% else %} + No pages currently in category.
      + {% endif %} + +Here you can see that in the template we have added some control statements to display ``view``, ``views`` or nothing depending on the value of ``page.views``. + +Updating Category View +...................... +Since we are tracking the number of click throughs you can now update the ``category()`` view so that you order the pages by the number of views. To confirm this works, click on a link and refresh the category view - the link you clicked should jump up the rankings. diff --git a/17/chapters/templates.rst b/17/chapters/templates.rst new file mode 100644 index 0000000..f9fb10a --- /dev/null +++ b/17/chapters/templates.rst @@ -0,0 +1,239 @@ +Working with Templates +====================== +So far we've created several Django HTML templates for different pages in the application. You've probably already noticed that there is a lot of repeated HTML code in these templates. + +While most sites will have lots of repeated structure (i.e. headers, sidebars, footers, etc) repeating the HTML in each template is a not good way to handle this. So instead of doing the same cut and paste hack job, we can minimize the amount of repetition in our code base by employing *template inheritance* provided by Django's Template Language. + +The basic approach to using inheritance in templates is as follows. + +#. Identify the re-occurring parts of each page that are repeated across your application (i.e. header bar, sidebar, footer, content pane) +#. In a *base template*, provide the skeleton structure of a standard page along with any common content (i.e. the copyright notice that goes in the footer, the logo and title that appears in the section), and then define a number of *blocks* which are subject to change depending on which page the user is viewing. +#. Create specific templates - all of which inherit from the base template - and specify the contents of each block. + +Reoccurring HTML and The Base Template +-------------------------------------- +Given the templates that we have created so far it should be pretty obvious that we have been repeating a fair bit of HTML code. Below we have abstracted away any page specific details to show the skeleton structure that we have been repeating within each template. + +.. code-block:: html + + + + + + Rango + + + + + + + +Let's make this our base template, for the time being, and save it as ``base.html`` in Rango's ``templates`` directory (e.g. ``templates/rango/base.html``). + +.. note:: You should always aim to extract as much reoccurring content for your base templates. While it may be a bit more of a challenge for you to do initially, the time you will save in maintenance of your templates in the future far outweighs the initial overhead. Think about it: would you rather maintain one copy of your markup or multiple copies? + +.. warning:: Remember that your page ```` declaration absolutely must be placed on the first line for your page! Not doing so will mean your markup will not comply with the W3C HTML5 guidelines. + +Template Blocks +--------------- +Now that we've identified our base template, we can prepare it for our inheriting templates. To do this, we need to include a Template Tag to indicate what can be overridden in the base template - this is done through the use of *blocks*. + +Add a ``body_block`` to the base template as follows: + +.. code-block:: html + + + + + + Rango + + + + {% block body_block %}{% endblock %} + + + +Recall that standard Django template commands are denoted by ``{%`` and ``%}`` tags. To start a block, the command is ``block ``, where ```` is the name of the block you wish to create. You must also ensure that you close the block with the ``endblock`` command, again enclosed within Django template tags. + +You can also specify 'default content' for your blocks, if you so desire. Our ``body_block`` defined above presently has no default content associated with it. This means that if no inheriting template were to employ the use of ``body_block``, nothing would be rendered - as shown in the code snippet below. + +.. code-block:: html + + + + + + Rango + + + + + + + +However, we can overcome this by placing default content within the block definition, like so: + +.. code-block:: html + + + + + + Rango + + + + {% block body_block %}This is body_block's default content.{% endblock %} + + + +If a template were to inherit from the base template without employing the use of ``body_block``, the rendered outcome would now look something like the markup shown below. + +.. code-block:: html + + + + + + Rango + + + + This is body_block's default content. + + + +Hopefully this all makes sense - and for now, we'll be leaving ``body_block`` blank by default. All of our inheriting templates will be making use of ``body_block``. You can place as many blocks in your templates as you so desire. For example, you could create a block for the page title, meaning you can alter the title of each page while still inheriting from the same base template. + +Blocks are a really powerful feature of Django's template system to learn more about them check out the `official Django documentation on templates `_. + +Abstracting Further +................... +Now that you have an understanding of Django blocks, let's take the opportunity to abstract our base template a little bit further. Reopen the ``base.html`` template and modify it to look like the following. + +.. code-block:: html + + + + + + Rango - {% block title %}How to Tango with Django!{% endblock %} + + + +
      + {% block body_block %}{% endblock %} +
      + +
      + +
      + +
      + + + +We introduce two new features into the template. + +* The first is a new Django template block, ``title``. This will allow us to specify a custom page title for each page inheriting from our base template. If an inheriting page does not make use of this feature, the title is defaulted to ``Rango - How to Tango with Django!`` +* We also bring across the list of links from our current ``index.html`` template and place them into a HTML ``
      `` tag underneath our ``body_block`` block. This will ensure the links are present across all pages inheriting from the base template. The links are preceded by a *horizontal rule* (``
      ``) which provides a visual separation between the ``body_block`` content and the links. + +Also note that we enclose the ``body_block`` within a HTML ``
      `` tag - we'll be explaining the meaning of the ``
      `` tag in Chapter :ref:`css-course-label`. Our links are also converted to an unordered HTML list through use of the ``
        `` and ``
      • `` tags. + +Template Inheritance +-------------------- +Now that we've created a base template with a block, we can now update the templates we have created to inherit from the base template. For example, let's refactor the template ``rango/category.html``. + +To do this, first remove all the repeated HTML code leaving only the HTML and Template Tags/Commands specific to the page. Then at the beginning of the template add the following line of code: + +.. code-block:: html + + {% extends 'rango/base.html' %} + +The ``extends`` command takes one parameter, the template which is to be extended/inherited from (i.e. ``rango/base.html``). We can then modify the ``category.html`` template so it looks like the following complete example. + +.. note:: The parameter you supply to the ``extends`` command should be relative from your project's ``templates`` directory. For example, all templates we use for Rango should extend from ``rango/base.html``, not ``base.html``. + +.. code-block:: html + + {% extends 'rango/base.html' %} + + {% block title %}{{ category_name }}{% endblock %} + + {% block body_block %} +

        {{ category_name }}

        + + {% if pages %} + + {% else %} + No pages currently in category. + {% endif %} + + {% if user.is_authenticated %} + Add a Page + {% endif %} + {% endblock %} + +Now that we inherit from ``base.html``, all that exists within the ``category.html`` template is the ``extends`` command, the ``title`` block and the ``body_block`` block. You don't need a well-formatted HTML document because ``base.html`` provides all the groundwork for you. All you're doing is plugging in additional content to the base template to create the complete HTML document which is sent to the client's browser. + +.. note:: + + Templates are very powerful and you can even create your own template tags. Here we have shown how we can minimise the repetition of structure HTML in our templates. + + However, templates can also be used to minimise code within your application's views. For example, if you wanted to include the same database-driven content on each page of your application, you could construct a template that calls a specific view to handle the repeating portion of your webpages. This then saves you from having to call the Django ORM functions which gather the required data for the template in every view that renders it. + + To learn more about the extensive functionality offered by Django's template language, check out the official `Django documentation on templates `_. + +Exercises +--------- +Now that you've worked through this chapter, we've got several exercises for you to work through. After completing them, you'll be a Django templating pro. + +* Update all other existing templates within Rango's repertoire to extend from the ``rango/base.html`` template. Follow the same process as we demonstrated above. Once completed, your templates should all inherit from ``base.html``, as demonstrated in Figure :num:`fig-rango-template-inheritance`. While you're at it, make sure you remove the links from our ``index.html`` template. We don't need them anymore! You can also remove the link to Rango's homepage within the ``about.html`` template. +* Convert the restricted page to use a template. Call the template ``restricted.html``, and ensure that it too extends from our ``base.html`` template. +* Add another link to our growing link collection that allows users to navigate back to Rango's homepage from anywhere on the website. + +.. warning:: Remember to add ``{% load static %}`` to the top of each template that makes use of static media. If you don't, you'll get an error! Django template modules must be imported individually for each template that requires them - *you can't make use of modules included in templates you extend from!* + +.. _fig-rango-template-inheritance: + +.. figure:: ../images/rango-template-inheritance.svg + :figclass: align-center + + A class diagram demonstrating how your templates should inherit from ``base.html``. + +.. note:: Upon completion of these exercises, all of Rango's templates should inherit from ``base.html``. Looking back at the contents of ``base.html``, the ``user`` object - found within the context of a given Django request - is used to determine if the current user of Rango is logged in (through use of ``user.is_authenticated``). As all of Rango's templates should inherit from this base template, we can say that *all of Rango's templates now depend on having access to the context of a given request.* + + Due to this new dependency, you must check each of Rango's Django views. For each view, ensure that the context for each request is made available to the Django template engine. Throughout this tutorial, we've been using ``render_to_response()`` to achieve this. If you don't ensure this happens, your views may be rendered incorrectly - users may appear to be not logged in, even though Django thinks that they are! + + As a quick example of the checks you must carry out, have a look at the ``about`` view. Initially, this was implemented with a hard-coded string response, as shown below. Note that we only send the string - we don't make use of the request passed as the ``request`` parameter. + + .. code-block:: python + + def about(request): + return HttpResponse('Rango says: Here is the about page. Index') + + To employ the use of a template, we call the ``render_to_response()`` function and use the ``RequestContext`` class to obtain the request's current context. This will allow the template engine access to objects such as ``user``, which will now allowing the template engine to determine if the user is logged in. + + .. code-block:: python + + def about(request): + context = RequestContext(request) + return render_to_response('rango/about.html', {}, context) + + Remember, the second parameter of ``render_to_response()`` is a dictionary with which you can use to pass additional data to the Django template engine. Have a look at Section :ref:`adding-a-template-label` to refresh your memory on ``render_to_response()``. diff --git a/17/chapters/templates_static.rst b/17/chapters/templates_static.rst new file mode 100644 index 0000000..7d1eaaa --- /dev/null +++ b/17/chapters/templates_static.rst @@ -0,0 +1,333 @@ +.. _templates-label: + +Templates and Static Media +========================== +In this chapter, we'll be extending your knowledge of Django by introducing you to the template engine as well as how to serve *static media* within your web pages. + +.. _model-setup-templates-label: + +Using Templates +--------------- +Up to this point, you have plugged a few things together to create a Django-powered webpage. This is coupled a view, which is in turn coupled with a series of URL mappings. Here we will delve into how to combine templates into the mix. + +Well-designed websites use a lot of repetition in their structure or layout. Whether you see a common header or footer on a website's pages, the `repetition of page layouts `_ aids users with navigation, promotes organisation of the website and reinforces a sense of continuity. Django provides `templates `_ to make it easier for developers to achieve this design goal, as well as separating application logic from presentational concerns. In this chapter, you'll create a basic template which will be used to create a HTML page. This template will then be dispatched via a Django view. In Chapter :ref:`model-using-label`, we will take this a step further by using templates in conjunction with models to dispatch dynamically generated data. + +Configuring the Templates Directory +................................... +To get templates up and running, you will need to setup a directory in which template files are stored. + +In your Django project's directory (e.g. ``/tango_with_django_project/``), create a new directory called ``templates``. Within the new templates directory, create another directory called ``rango``. So the directory ``/tango_with_django_project/templates/rango/`` will be the location in which we will be storing templates associated with our ``rango`` application. + +To tell your Django project where the templates will be housed, open your project's ``settings.py`` file. Find the tuple ``TEMPLATE_DIRS`` and add in the path to your newly created ``templates`` directory, so it looks like the following example. + +.. code-block:: python + + + TEMPLATE_DIRS = ['/tango_with_django_project/'] + +Note that you are *required to use absolute paths* to locate the ``templates`` directory. If you are part of a team or working on different computers, this may become a problem in the future. You'll have different usernames, meaning different paths to your ```` directory. The *hard-coded* path you entered above would not be the same on different computers. Of course, you could add in the template directory for each different setup, but that would be a pretty nasty way to tackle the problem. So, what can we do? + +.. warning:: + The road to hell is paved with hard-coded paths. + `Hard-coding `_ paths is considered to be a `software engineering anti-pattern `_, and will make your project less `portable `_. + +Dynamic Paths +............. +The solution to the problem of hard-coding paths is to make use of built-in Python functions to work out the path of our ``templates`` directory automatically for us. This way, an absolute path can be obtained regardless of where you place your Django project's code on your filesystem. This in turn means that your project's code becomes more *portable.* + +In Django 1.7 the ``settings.py`` file, now contains a variable called, ``BASE_DIR``. This stores the path to the directory in which your project's ``settings.py`` module will be contained. This is obtained by using the special Python ``__file__`` attribute, which is `set to the absolute path of your settings module `_. The ``__file__`` gives theabsolute path to the settings file, then the call to ``os.path.dirname()`` provides the reference to the absolute path of the directory. Calling ``os.path.dirname()`` again, remvoes another layer, so that ``BASE_DIR`` contains, ``/tango_with_django_project/``. You can see this process in action, if you are curious, by adding the following lines: + +.. code-block:: python + + print __file__ + print os.path.dirname(__file__) + print os.path.dirname(os.path.dirname(__file__)) + + + +Let's make use of it now. Create a new variable in ``settings.py`` called ``TEMPLATE_PATH`` and store the path to the ``templates`` directory you created earlier. Using the ``os.path.join()`` function, your code should look like the following example. + +.. code-block:: python + + TEMPLATE_PATH = os.path.join(BASE_DIR, 'templates') + +Here we make use of the ``os.path.join()`` to mash together the ``BASE_DIR`` variable and ``'templates'``, which would for example yield ``/tango_with_django_project/templates/``. We can then replace the hard-coded path we put in the ``TEMPLATE_DIRS`` with ``TEMPLATE_PATH``, just like in the example below. + +.. code-block:: python + + TEMPLATE_DIRS = [ + # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates". + # Always use forward slashes, even on Windows. + # Don't forget to use absolute paths, not relative paths. + TEMPLATE_PATH, + ] + +We can keep the ``TEMPLATE_PATH`` variable at the top of our ``settings.py`` module to make it easy to access should it ever need to be changed. This is why we created an additional variable to store the template path. + +.. warning:: When joining or concatenating system paths together, using ``os.path.join()`` is the preferred approach. Using this function ensures that the correct slashes are used depending on your operating system. On a POSIX-compatible operating system, forward slashes would be used to separate directories, whereas a Windows operating system would use backward slashes. If you manually append slashes to paths, you may end up with path errors when attempting to run your code on a different operating system. + + + + +.. _adding-a-template-label: + +Adding a Template +................. +With your template directory and path set up, create a file called ``index.html`` and place it in the ``templates/rango/`` directory. Within this new file, add the following HTML code: + +.. code-block:: html + + + + + + Rango + + + +

        Rango says...

        + hello world! {{ boldmessage }}
        + About
        + + + + +From this HTML code, it should be clear that a simple HTML page is going to be generated that greets a user with a *hello world* message. You might also notice some non-HTML in the form of ``{{ boldmessage }}``. This is a *Django template variable*, and we will be able to set a value for this variable to be displayed within the rendered output. We'll get to that in a moment. + +To use this template, we need to re-configure the ``index()`` view that we created earlier. Instead of dispatching a simple message, we will change it to dispatch our template. + +In ``rango/views.py``, make sure the following import statement is at the top of the file. + +.. code-block:: python + + from django.template import render + +You can then update the ``index()`` view function as follows. Check out the inline commentary to see what each line does. + +.. code-block:: python + + def index(request): + + # Construct a dictionary to pass to the template engine as its context. + # Note the key boldmessage is the same as {{ boldmessage }} in the template! + context_dict = {'boldmessage': "I am bold font from the context"} + + # Return a rendered response to send to the client. + # We make use of the shortcut function to make our lives easier. + # Note that the first parameter is the template we wish to use. + + return render(request, 'rango/index.html', context_dict) + + +First we construct a dictionary of key-values pairs that we want to use within the template, then we call the ``render()`` helper function. This function takes as input the user's ``request``, the template file name, and the context dictionary. The ``render()`` function will take this data and mash it together with the template to produce a complete HTML page. This is then returned and dispatched to the user's web browser. + +When a template file is loaded with the Django templating system, a *template context* is created. In simple terms, a template context is essentially a Python dictionary that maps template variable names with Python variables. In the template we created earlier, we included a template variable name called ``boldmessage``. In our ``index(request)`` view example, the string ``I am bold font from the context`` is mapped to template variable ``boldmessage``. The string ``I am bold font from the context`` therefore replaces any instance of ``{{ boldmessage }}`` within the template. + +Now that you have updated the view to employ the use of your template, run the Django development server and visit http://127.0.0.1:8000/rango/. You should see your template rendered in all its glory, just like the example shown in Figure :num:`fig-rango-hello-world-template`. + +If you don't, read the error message presented to see what the problem is, and then double check all the changes that you have made. Ensure that all the changes required have been made. One of the most common issues people have with templates is that the path is set incorrectly in ``settings.py``. Sometimes it's worth adding a ``print`` statement to ``settings.py`` to report the ``BASE_DIR`` and ``TEMPLATE_PATH``. + +This example demonstrates how to use templates within your views. However, we have only touched upon some of the functionality provided by Django regarding templates. We will use templates in more sophisticated ways as we progress through this tutorial. In the meantime, you can find out more about `templates from the official Django documentation `_. + +.. _fig-rango-hello-world-template: + +.. figure:: ../images/rango-hello-world-template.png + :figclass: align-center + + A screenshot of Google Chrome rendering the template used with this tutorial. + +Serving Static Media +-------------------- +Admittedly, the *Rango* website is pretty plain as we have not included any styling or imagery. `Cascading Style Sheets (CSS) `_, `JavaScript `_ and images are essentially *static media* files which we can include in our webpages to add style and introduce dynamic behaviour. These files are served in a slightly different way from webpages. This is because they aren't generated on the fly like our HTML pages. This section shows you how to setup your Django project to serve static media to the client. We'll also modify our template to include some example static media. + +Configuring the Static Media Directory +...................................... +To get static media up and running, you will need to set up a directory in which static media files are stored. In your project directory (e.g. ``/tango_with_django_project/``), create a new directory called ``static``. + +Now place an image within the ``static`` directory. As shown in Figure :num:`fig-rango-picture`, we chose a picture of the chameleon, `Rango `_ - a fitting mascot, if ever there was one. + +.. _fig-rango-picture: + +.. figure:: ../images/rango-picture.png + :figclass: align-center + + Rango the chameleon within our static media directory. + +With our ``static`` directory created, we need to tell Django about it, just like we did with our ``templates`` directory earlier. In ``settings.py`` file, we need to update two variables: ``STATIC_URL`` and the ``STATICFILES_DIRS`` tuple. First, create a variable to store the path to the static directory (``STATIC_PATH``) as follows. + +.. code-block:: python + + STATIC_PATH = os.path.join(BASE_DIR,'static') + + STATIC_URL = '/static/' # You may find this is already defined as such. + + STATICFILES_DIRS = ( + STATIC_PATH, + ) + +You've typed in some code, but what does it represent? The first variable ``STATIC_URL`` defines the base URL with which your Django applications will find static media files when the server is running. For example, when running the Django development server with ``STATIC_URL`` set to ``/static/`` like in the code example above, static media will be available at ``http://127.0.0.1:8000/static/``. The `official documentation on serving up static media `_ warns that it is vitally important to make sure that those slashes are there. Not configuring this problem can lead to a world of pain. + +While ``STATIC_URL`` defines the URL to access media via the web server, ``STATICFILES_DIRS`` allows you to specify the location of the newly created ``static`` directory on your local disk. Just like the ``TEMPLATE_DIRS`` tuple, ``STATICFILES_DIRS`` requires an absolute path to the ``static`` directory. Here, we re-used the ``BASE_DIR`` defined in Section :ref:`model-setup-templates-label` to create the ``STATIC_PATH``. + +With those two settings updated, run your Django project's development server once more. If we want to view our image of Rango, visit the URL ``http://127.0.0.1:8000/static/rango.jpg``. If it doesn't appear, you will want to check to see if everything has been correctly spelt and that you saved your ``settings.py`` file, and restart the development server. If it does appear, try putting in additional file types into the ``static`` directory and request them via your browser. + +.. caution:: While using the Django development server to serve your static media files is fine for a development environment, it's highly unsuitable for a production - or *live* - environment. The `official Django documentation on Deployment `_ provides further information about deploying static files in a production environment. + +Static Media Files and Templates +-------------------------------- +Now that you have your Django project set up to handle static media, you can now access such media within your templates. + +To demonstrate how to include static media, open up ``index.html`` located in the ``/templates/rango/`` directory. Modify the HTML source code as follows. The two lines that we add are shown with a HTML comment next to them for easy identification. + +.. code-block:: html + + + + {% load staticfiles %} + + + + + Rango + + + +

        Rango says...

        + hello world! {{ boldmessage }}
        + About
        + Picture of Rango + + + + +First, we need to inform Django's template system that we will be using static media with the ``{% load static %}`` tag. This allows us to call the ``static`` template tag as done in ``{% static "rango.jpg" %}``. As you can see, Django template tags are denoted by curly brackets ``{ }``. In this example, the ``static`` tag will combine the ``STATIC_URL`` with ``"rango.jpg"`` so that the rendered HTML looks like the following. + +.. code-block:: html + + Picture of Rango + +If for some reason the image cannot be loaded, it is always nice to specify an alternative text tagline. This is what the ``alt`` attribute provides - the text here is used in the event the image fails to load. + +With these minor changes in place, kick off the Django development server once more and visit ``http://127.0.0.1:8000/rango``. Hopefully, you will see web page something like the one shown in Figure :num:`fig-rango-site-with-pic`. + +.. _fig-rango-site-with-pic: + +.. figure:: ../images/rango-site-with-pic.png + :figclass: align-center + + Our first Rango template, complete with a picture of Rango the chameleon. + +The ``{% static %}`` function call should be used whenever you wish to reference static media within a template. The code example below demonstrates how you could include JavaScript, CSS and images into your templates - all with the correct HTML markup. + +.. code-block:: html + + + + {% load static %} + + + + + Rango + + + + + +

        Including Static Media

        + Picture of Rango + + + + +Static files you reference will obviously need to be present within your ``static`` directory. If the file is not there or you have referenced it incorrectly, the console output provide by Django's lightweight development server will flag up any errors. Try referencing a non-existent file and see what happens. + +For further information about including static media you can read through the official `Django documentation on working with static files in templates `_. + +.. caution:: Care should be taken in your templates to ensure that any `document type declaration `_ (e.g. ````) you use in your webpages appears in the rendered output on the *first line*. This is why we put the Django template command ``{% load static %}`` on a line underneath the document type declaration, rather than at the very top. It is a requirement of HTML/XHTML variations that the document type declaration be declared on the very first line. Django commands placed before will obviously be removed in the final rendered output, but they may leave behind residual whitespace which means your output `will fail validation `_ on `the W3C markup validation service `_. + +#TODO(leifos): Note that this not the best practice when you go to deployment, and that they should see: https://docs.djangoproject.com/en/1.7/howto/static-files/deployment/ and that the following solution works when ``DEBUG=True`` + +#TODO(leifos): the DEBUG variable in settings.py, lets you control the output when an error occurs, and is used for debugging. When the application is deployed it is not secure to leave DEBUG equal to True. When you set DEBUG to be False, then you will need to set the ALLOWED_HOSTS variable in settings.py, when running on your local machine this would be ``127.0.0.1``. You will also need to update the project urls.py file: + + +.. code-block:: python + + + from django.conf import settings # New Import + from django.conf.urls.static import static # New Import + + + if not settings.DEBUG: + urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) + + +#TODO(leifos): Maybe we should describe all this in the deployment chapter... probably makes the most sense + + +The Static Media Server +----------------------- +Now that you can dispatch static files, let's look at uploading media. Many websites provide their users with the ability to do this - for example, to upload a profile image. This section shows you how to add a simple development media server to your Django project. The development media server can be used in conjunction with file uploading forms which we will touch upon in Chapter :ref:`login-label`. + +So, how do we go about setting up a development media server? The first step is to create another new directory called ``media`` within our Django project's root (e.g. ``/tango_with_django_project/``). The new ``media`` directory should now be sitting alongside your ``templates`` and ``static`` directories. After you create the directory, you must then modify your Django project's ``urls.py`` file, located in the project configuration directory (e.g. ``/tango_with_django_project/tango_with_django_project/``). Add the following code to the ``urls.py`` file. + +.. code-block:: python + + # At the top of your urls.py file, add the following line: + from django.conf import settings + + # UNDERNEATH your urlpatterns definition, add the following two lines: + if settings.DEBUG: + urlpatterns += patterns( + 'django.views.static', + (r'media/(?P.*)', + 'serve', + {'document_root': settings.MEDIA_ROOT}), ) + +The ``settings`` module from ``django.conf`` allows us access to the variables defined within our project's ``settings.py`` file. The conditional statement then checks if the Django project is being run in `DEBUG `_ mode. If the project's ``DEBUG`` setting is set to ``True``, then an additional URL matching pattern is appended to the ``urlpatterns`` tuple. The pattern states that for any file requested with a URL starting with ``media/``, the request will be passed to the ``django.views.static`` view. This view handles the dispatching of uploaded media files for you. + +With your ``urls.py`` file updated, we now need to modify our project's ``settings.py`` file. We now need to set the values of two variables. In your file, add ``MEDIA_URL`` and ``MEDIA_ROOT``, setting them to the values as shown below. + + + + +.. code-block:: python + + MEDIA_URL = '/media/' + MEDIA_ROOT = os.path.join(PROJECT_PATH, 'media') # Absolute path to the media directory + +The first variable ``MEDIA_URL`` defines the base URL from which all media files will be accessible on your development server. Setting the ``MEDIA_URL`` for example to ``/media/`` will mean that user uploaded files will be available from the URL ``http://127.0.0.1:8000/media/``. ``MEDIA_ROOT`` is used to tell Django where uploaded files should be stored on your local disk. In the example above, we set this variable to the result of joining our ``PROJECT_PATH`` variable defined in Section :ref:`model-setup-templates-label` with ``/media/``. This gives an absolute path of ``/tango_with_django_project/media/``. + +.. caution:: As previously mentioned, the development media server supplied with Django is very useful for debugging purposes. However, it should **not** be used in a production environment. The official `Django documentation on static files `_ warns that such an approach is *"grossly inefficient and insecure"*. If you do come to deploying your Django project, read the documentation to see an alternative solution for file uploading that can handle a high volume of requests in a much more secure manner. + +You can test this setup works by placing an image file in your newly created ``media`` directory. Drop the file in, start the Django development server, and request the image in your browser. For example, if you added the file ``rango.jpg`` to ``media``, the URL you should enter would look like ``http://127.0.0.1:8000/media/rango.jpg``. The image should show in your browser. If it doesn't, you'll need to go back and check your setup. + +#TODO(leifos): check that this still works (certainly you can access the images.. need to check the uploading) + +Basic Workflow +-------------- +With the chapter complete, you should now know how to setup and create templates, use templates within your views, setup and use Django to send static media files, include images within your templates *and* setup Django's static media server to allow for file uploads. We've actually covered quite a lot! + +Creating a template and integrating it within a Django view is a key concept for you to understand. It takes several steps, but becomes second nature to you after a few attempts. + +#. First, create the template you wish to use and save it within the ``templates`` directory you specified in your project's ``settings.py`` file. You may wish to use Django template variables (e.g. ``{{ variable_name }}``) within your template. You'll be able to replace these with whatever you like within the corresponding view. +#. Find or create a new view within an application's ``views.py`` file. +#. Add your view-specific logic (if you have any) to the view. For example, this may involve extracting data from a database. +#. Within the view, construct a dictionary object which you can pass to the template engine as part of the template's *context*. +#. Make use of the ``render()`` helper function to generate the rendered response. Ensure you reference the request, then the template file, followed by the context dictionary! +#. If you haven't already done so, map the view to a URL by modifying your project's ``urls.py`` file - and the application-specific ``urls.py`` file if you have one. + +The steps involved for getting a static media file onto one of your pages is another important process you should be familiar with. Check out the steps below on how to do this. + +#. Take the static media file you wish to use and place it within your project's ``static`` directory. This is the directory you specify in your project's ``STATICFILES_DIRS`` tuple within ``settings.py``. +#. Add a reference to the static media file to a template. For example, an image would be inserted into an HTML page through the use of the ```` tag. +#. Remember to use the ``{% load staticfiles %}`` and ``{% static "filename" %}`` commands within the template to access the static files. + +The next chapter will look at databases. We'll see how to make use of Django's excellent database layer to make your life easier and SQL free! + +Exercises +--------- +Give the following exercises a go to reinforce what you've learnt from this chapter. + +* Convert the about page to use a template too from a template called ``about.html``. +* Within the ``about.html`` template, add a picture stored within your project's static media. diff --git a/17/chapters/test.rst b/17/chapters/test.rst new file mode 100644 index 0000000..745c51a --- /dev/null +++ b/17/chapters/test.rst @@ -0,0 +1,10 @@ +Test Driven Development +======================= + +In the next edition, we'll be adding in a chapter about Test Driven Development - in the meantime we highly recommend checking out the `tutorial on test driven development by Harry Percival `_. + +Exercises +--------- + +* Undertake `Part Five of the official Django Tutorial `_ to learn about automated testing. + diff --git a/17/chapters/virtual.rst b/17/chapters/virtual.rst new file mode 100644 index 0000000..d2948b3 --- /dev/null +++ b/17/chapters/virtual.rst @@ -0,0 +1,16 @@ +Virtual Environments +==================== + +To create a virtual enironment use: + +mkvirtualenv + + + + + +To list what virtual environments use: + +lsvirtualenv + +-b provides a brief listing. diff --git a/17/conf.py b/17/conf.py new file mode 100644 index 0000000..afec2f7 --- /dev/null +++ b/17/conf.py @@ -0,0 +1,301 @@ +# -*- coding: utf-8 -*- +# +# How_To_Tango_With_Django documentation build configuration file, created by +# sphinx-quickstart on Thu Dec 20 15:10:50 2012. +# +# This file is execfile()d with the current directory set to its containing dir. +# +# Note that not all possible configuration values are present in this +# autogenerated file. +# +# All configuration values have a default; values that are commented out +# serve to show the default. + +import sys, os +sys.path.append(os.path.abspath('sphinx-extensions')) # Added the sphinx-extensions directory so we can include custom extensions (e.g. numfig) +#import sphinx_bootstrap_theme + + + +# If extensions (or modules to document with autodoc) are in another directory, +# add these directories to sys.path here. If the directory is relative to the +# documentation root, use os.path.abspath to make it absolute, like shown here. +#sys.path.insert(0, os.path.abspath('.')) + +# -- General configuration ----------------------------------------------------- + +# If your documentation needs a minimal Sphinx version, state it here. +#needs_sphinx = '1.0' + +# Add any Sphinx extension module names here, as strings. They can be extensions +# coming with Sphinx (named 'sphinx.ext.*') or your custom ones. +extensions = ['sphinx.ext.todo', 'numfig', 'numsec'] + +# Add any paths that contain templates here, relative to this directory. +templates_path = ['_templates', 'templates'] + +# The suffix of source filenames. +source_suffix = '.rst' + +# The encoding of source files. +#source_encoding = 'utf-8-sig' + +# The master toctree document. +master_doc = 'index' + +# General information about the project. +project = u'How To Tango With Django' +copyright = u'2013, Leif Azzopardi and David Maxwell' + +# The version info for the project you're documenting, acts as replacement for +# |version| and |release|, also used in various other places throughout the +# built documents. +# +# The short X.Y version. +version = '1' +# The full version, including alpha/beta/rc tags. +release = '1' + +# The language for content autogenerated by Sphinx. Refer to documentation +# for a list of supported languages. +#language = None + +# There are two options for replacing |today|: either, you set today to some +# non-false value, then it is used: +#today = '' +# Else, today_fmt is used as the format for a strftime call. +#today_fmt = '%B %d, %Y' + +# List of patterns, relative to source directory, that match files and +# directories to ignore when looking for source files. +exclude_patterns = ['_build'] + +# The reST default role (used for this markup: `text`) to use for all documents. +#default_role = None + +# If true, '()' will be appended to :func: etc. cross-reference text. +#add_function_parentheses = True + +# If true, the current module name will be prepended to all description +# unit titles (such as .. function::). +#add_module_names = True + +# If true, sectionauthor and moduleauthor directives will be shown in the +# output. They are ignored by default. +#show_authors = False + +# The name of the Pygments (syntax highlighting) style to use. +pygments_style = 'sphinx' + +# A list of ignored prefixes for module index sorting. +#modindex_common_prefix = [] + + +# -- Options for HTML output --------------------------------------------------- + +# The theme to use for HTML and HTML Help pages. See the documentation for +# a list of builtin themes. +html_theme = 'sphinxdoc' + +#html_theme = 'bootstrap' +#html_theme_path = sphinx_bootstrap_theme.get_html_theme_path() +#print html_theme_path +# Theme options are theme-specific and customize the look and feel of a theme +# further. For a list of options available for each theme, see the +# documentation. +html_theme_options = { +#'navbar_sidebarrel': True, +#'bootswatch_theme': "cerulean", +#'navbar_class': "navbar navbar-inverse", +# 'bootstrap_version': "2", +#'navbar_pagenav': True, +} + +# Add any paths that contain custom themes here, relative to this directory. +#html_theme_path = [] +#html_theme_path = sphinx_bootstrap_theme.get_html_theme_path() + +#html_translator_class = 'bootstrap.HTMLTranslator' + +# The name for this set of Sphinx documents. If None, it defaults to +# " v documentation". +html_title = 'How to Tango with Django' + +# A shorter title for the navigation bar. Default is the same as html_title. +#html_short_title = '' + +# The name of an image file (relative to this directory) to place at the top +# of the sidebar. +html_logo = 'images/twd200x200.jpg' + +# The name of an image file (within the static path) to use as favicon of the +# docs. This file should be a Windows icon file (.ico) being 16x16 or 32x32 +# pixels large. +html_favicon = 'images/twd.ico' + +# Add any paths that contain custom static files (such as style sheets) here, +# relative to this directory. They are copied after the builtin static files, +# so a file named "default.css" will overwrite the builtin "default.css". +html_static_path = ['_static'] + +# If not '', a 'Last updated on:' timestamp is inserted at every page bottom, +# using the given strftime format. +#html_last_updated_fmt = '%b %d, %Y' + +# If true, SmartyPants will be used to convert quotes and dashes to +# typographically correct entities. +html_use_smartypants = True + +# Custom sidebar templates, maps document names to template names. +#html_sidebars = {} + +# Additional templates that should be rendered to pages, maps page names to +# template names. +#html_additional_pages = {} + +# If false, no module index is generated. +#html_domain_indices = True + +# If false, no index is generated. +html_use_index = True + +# If true, the index is split into individual pages for each letter. +#html_split_index = False + +# If true, links to the reST sources are added to the pages. +#html_show_sourcelink = True + +# If true, "Created using Sphinx" is shown in the HTML footer. Default is True. +#html_show_sphinx = True + +# If true, "(C) Copyright ..." is shown in the HTML footer. Default is True. +html_show_copyright = True + +# If true, an OpenSearch description file will be output, and all pages will +# contain a tag referring to it. The value of this option must be the +# base URL from which the finished HTML is served. +#html_use_opensearch = '' + +# This is the file name suffix for HTML files (e.g. ".xhtml"). +#html_file_suffix = None + +# Output file base name for HTML help builder. +htmlhelp_basename = 'How_To_Tango_With_Djangodoc' + + +# -- Options for LaTeX output -------------------------------------------------- + +latex_elements = { +# The paper size ('letterpaper' or 'a4paper'). +#'papersize': 'letterpaper', + +# The font size ('10pt', '11pt' or '12pt'). +#'pointsize': '10pt', + +# Additional stuff for the LaTeX preamble. +#'preamble': '', +} + +# Grouping the document tree into LaTeX files. List of tuples +# (source start file, target name, title, author, documentclass [howto/manual]). +latex_documents = [ + ('index', 'How_To_Tango_With_Django.tex', u'How to Tango with Django', + u'Leif Azzopardi and David Maxwell', 'manual'), +] + +# The name of an image file (relative to this directory) to place at the top of +# the title page. +latex_logo = 'images/twd200x200.jpg' + +# For "manual" documents, if this is true, then toplevel headings are parts, +# not chapters. +#latex_use_parts = False + +# If true, show page references after internal links. +#latex_show_pagerefs = False + +# If true, show URL addresses after external links. +#latex_show_urls = False + +# Documents to append as an appendix to all manuals. +#latex_appendices = [] + +# If false, no module index is generated. +#latex_domain_indices = True + + +# -- Options for manual page output -------------------------------------------- + +# One entry per manual page. List of tuples +# (source start file, name, description, authors, manual section). +man_pages = [ + ('index', 'how to tango with django', u'How To Tango With Django', + [u'Leif Azzopardi and David Maxwell'], 1) +] + +# If true, show URL addresses after external links. +#man_show_urls = False + + +# -- Options for Texinfo output ------------------------------------------------ + +# Grouping the document tree into Texinfo files. List of tuples +# (source start file, target name, title, author, +# dir menu entry, description, category) +texinfo_documents = [ + ('index', 'How To Tango With Django', u'How To Tango With Django', + u'Leif Azzopardi and David Maxwell', 'How To Tango With Django', 'A starters Guide to Web Development in Django 1.5', + 'Miscellaneous'), +] + +# Documents to append as an appendix to all manuals. +#texinfo_appendices = [] + +# If false, no module index is generated. +#texinfo_domain_indices = True + +# How to display URL addresses: 'footnote', 'no', or 'inline'. +#texinfo_show_urls = 'footnote' + + +# -- Options for Epub output --------------------------------------------------- + +# Bibliographic Dublin Core info. +epub_title = u'How To Tango With Django' +epub_author = u'Leif Azzopardi and David Maxwell' +epub_publisher = u'Leif Azzopardi and David Maxwell' +epub_copyright = u'2013, Leif Azzopardi and David Maxwell' + +# The language of the text. It defaults to the language option +# or en if the language is not set. +#epub_language = '' + +# The scheme of the identifier. Typical schemes are ISBN or URL. +#epub_scheme = '' + +# The unique identifier of the text. This can be a ISBN number +# or the project homepage. +#epub_identifier = '' + +# A unique identification for the text. +#epub_uid = '' + +# A tuple containing the cover image and cover page html template filenames. +#epub_cover = () + +# HTML files that should be inserted before the pages created by sphinx. +# The format is a list of tuples containing the path and title. +#epub_pre_files = [] + +# HTML files shat should be inserted after the pages created by sphinx. +# The format is a list of tuples containing the path and title. +#epub_post_files = [] + +# A list of files that should not be packed into the epub file. +#epub_exclude_files = [] + +# The depth of the table of contents in toc.ncx. +#epub_tocdepth = 3 + +# Allow duplicate toc entries. +#epub_tocdup = True diff --git a/17/images/admin-populated.png b/17/images/admin-populated.png new file mode 100644 index 0000000..9cae09c Binary files /dev/null and b/17/images/admin-populated.png differ diff --git a/17/images/bbcnews-cookies.png b/17/images/bbcnews-cookies.png new file mode 100644 index 0000000..6c947cd Binary files /dev/null and b/17/images/bbcnews-cookies.png differ diff --git a/17/images/bing-explore.png b/17/images/bing-explore.png new file mode 100644 index 0000000..44f64a4 Binary files /dev/null and b/17/images/bing-explore.png differ diff --git a/17/images/canvas.svg b/17/images/canvas.svg new file mode 100644 index 0000000..c45e446 --- /dev/null +++ b/17/images/canvas.svg @@ -0,0 +1,3 @@ + + +2013-07-26 20:44ZCanvas 1Layer 1Rango image hosted on flickr under Creative Commons licence - user elbragon diff --git a/17/images/ch1-rango-cat-page.png b/17/images/ch1-rango-cat-page.png new file mode 100644 index 0000000..3836a7a Binary files /dev/null and b/17/images/ch1-rango-cat-page.png differ diff --git a/17/images/ch1-rango-index.png b/17/images/ch1-rango-index.png new file mode 100644 index 0000000..d2a422a Binary files /dev/null and b/17/images/ch1-rango-index.png differ diff --git a/17/images/ch11-bootstrap-about.png b/17/images/ch11-bootstrap-about.png new file mode 100644 index 0000000..17d2937 Binary files /dev/null and b/17/images/ch11-bootstrap-about.png differ diff --git a/17/images/ch11-bootstrap-category-initial.png b/17/images/ch11-bootstrap-category-initial.png new file mode 100644 index 0000000..7c51b8f Binary files /dev/null and b/17/images/ch11-bootstrap-category-initial.png differ diff --git a/17/images/ch11-bootstrap-index-initial.png b/17/images/ch11-bootstrap-index-initial.png new file mode 100644 index 0000000..08306cf Binary files /dev/null and b/17/images/ch11-bootstrap-index-initial.png differ diff --git a/17/images/ch11-bootstrap-index-rows.png b/17/images/ch11-bootstrap-index-rows.png new file mode 100644 index 0000000..2d33366 Binary files /dev/null and b/17/images/ch11-bootstrap-index-rows.png differ diff --git a/17/images/ch11-bootstrap-login-custom.png b/17/images/ch11-bootstrap-login-custom.png new file mode 100644 index 0000000..fdf4821 Binary files /dev/null and b/17/images/ch11-bootstrap-login-custom.png differ diff --git a/17/images/ch11-bootstrap-register-custom.png b/17/images/ch11-bootstrap-register-custom.png new file mode 100644 index 0000000..647d778 Binary files /dev/null and b/17/images/ch11-bootstrap-register-custom.png differ diff --git a/17/images/ch11-bootstrap-register-initial.png b/17/images/ch11-bootstrap-register-initial.png new file mode 100644 index 0000000..121e5c5 Binary files /dev/null and b/17/images/ch11-bootstrap-register-initial.png differ diff --git a/17/images/ch4-rango-about.png b/17/images/ch4-rango-about.png new file mode 100644 index 0000000..42f692c Binary files /dev/null and b/17/images/ch4-rango-about.png differ diff --git a/17/images/ch4-rango-index.png b/17/images/ch4-rango-index.png new file mode 100644 index 0000000..b471ac8 Binary files /dev/null and b/17/images/ch4-rango-index.png differ diff --git a/17/images/ch5-rango-admin-custom.png b/17/images/ch5-rango-admin-custom.png new file mode 100644 index 0000000..e78e114 Binary files /dev/null and b/17/images/ch5-rango-admin-custom.png differ diff --git a/17/images/ch5-rango-admin-models.png b/17/images/ch5-rango-admin-models.png new file mode 100644 index 0000000..abe1c6e Binary files /dev/null and b/17/images/ch5-rango-admin-models.png differ diff --git a/17/images/ch5-rango-admin.png b/17/images/ch5-rango-admin.png new file mode 100644 index 0000000..197cc44 Binary files /dev/null and b/17/images/ch5-rango-admin.png differ diff --git a/17/images/ch6-rango-index-category-pages.png b/17/images/ch6-rango-index-category-pages.png new file mode 100644 index 0000000..69fe842 Binary files /dev/null and b/17/images/ch6-rango-index-category-pages.png differ diff --git a/17/images/ch6-rango-index-category.png b/17/images/ch6-rango-index-category.png new file mode 100644 index 0000000..3f9f248 Binary files /dev/null and b/17/images/ch6-rango-index-category.png differ diff --git a/17/images/ch7-rango-category-add.png b/17/images/ch7-rango-category-add.png new file mode 100644 index 0000000..af7d939 Binary files /dev/null and b/17/images/ch7-rango-category-add.png differ diff --git a/17/images/ch7-rango-category.png b/17/images/ch7-rango-category.png new file mode 100644 index 0000000..48b5d94 Binary files /dev/null and b/17/images/ch7-rango-category.png differ diff --git a/17/images/ch9-rango-add-category.png b/17/images/ch9-rango-add-category.png new file mode 100644 index 0000000..36ee484 Binary files /dev/null and b/17/images/ch9-rango-add-category.png differ diff --git a/17/images/ch9-rango-index.png b/17/images/ch9-rango-index.png new file mode 100644 index 0000000..243de40 Binary files /dev/null and b/17/images/ch9-rango-index.png differ diff --git a/17/images/ch9-rango-python-page.png b/17/images/ch9-rango-python-page.png new file mode 100644 index 0000000..0da76ed Binary files /dev/null and b/17/images/ch9-rango-python-page.png differ diff --git a/17/images/cookie-visits.png b/17/images/cookie-visits.png new file mode 100644 index 0000000..50e1f62 Binary files /dev/null and b/17/images/cookie-visits.png differ diff --git a/17/images/cover_image.pdf b/17/images/cover_image.pdf new file mode 100644 index 0000000..617ce8c Binary files /dev/null and b/17/images/cover_image.pdf differ diff --git a/17/images/css-basic.png b/17/images/css-basic.png new file mode 100644 index 0000000..e6c0c88 Binary files /dev/null and b/17/images/css-basic.png differ diff --git a/17/images/css-blocks-before.pdf b/17/images/css-blocks-before.pdf new file mode 100644 index 0000000..134f460 Binary files /dev/null and b/17/images/css-blocks-before.pdf differ diff --git a/17/images/css-blocks.pdf b/17/images/css-blocks.pdf new file mode 100644 index 0000000..ad47c76 Binary files /dev/null and b/17/images/css-blocks.pdf differ diff --git a/17/images/css-box-example.pdf b/17/images/css-box-example.pdf new file mode 100644 index 0000000..53c7b37 Binary files /dev/null and b/17/images/css-box-example.pdf differ diff --git a/17/images/css-box-example2.pdf b/17/images/css-box-example2.pdf new file mode 100644 index 0000000..f8767f6 Binary files /dev/null and b/17/images/css-box-example2.pdf differ diff --git a/17/images/css-box-model.pdf b/17/images/css-box-model.pdf new file mode 100644 index 0000000..ba212d6 Binary files /dev/null and b/17/images/css-box-model.pdf differ diff --git a/17/images/css-box-model.svg b/17/images/css-box-model.svg new file mode 100644 index 0000000..160eb16 --- /dev/null +++ b/17/images/css-box-model.svg @@ -0,0 +1,3 @@ + + +2013-09-15 15:32ZCanvas 1Layer 1Content of ElementKey:ContentPaddingBorderMargin diff --git a/17/images/css-cascading.pdf b/17/images/css-cascading.pdf new file mode 100644 index 0000000..26f6d2d Binary files /dev/null and b/17/images/css-cascading.pdf differ diff --git a/17/images/css-cascading.png b/17/images/css-cascading.png new file mode 100644 index 0000000..910717c Binary files /dev/null and b/17/images/css-cascading.png differ diff --git a/17/images/css-cascading.svg/Canvas_1.svg b/17/images/css-cascading.svg/Canvas_1.svg new file mode 100644 index 0000000..4475cbb --- /dev/null +++ b/17/images/css-cascading.svg/Canvas_1.svg @@ -0,0 +1,3 @@ + + +2013-09-02 15:44ZCanvas 1Layer 1h1 { display: block; font-size: 2em; font-weight: bold;}h1 { font-size: 16pt; font-style: italic; text-align: center; color: #FF0000;}h1 { display: block; font-size: 16pt; font-style: italic; font-weight: bold; text-align: center; color: #FF0000;}= diff --git a/17/images/css-cascading.svg/image1.tiff b/17/images/css-cascading.svg/image1.tiff new file mode 100644 index 0000000..8579597 Binary files /dev/null and b/17/images/css-cascading.svg/image1.tiff differ diff --git a/17/images/css-cascading.svg/image2.tiff b/17/images/css-cascading.svg/image2.tiff new file mode 100644 index 0000000..320a870 Binary files /dev/null and b/17/images/css-cascading.svg/image2.tiff differ diff --git a/17/images/css-cascading.svg/image3.tiff b/17/images/css-cascading.svg/image3.tiff new file mode 100644 index 0000000..7c76780 Binary files /dev/null and b/17/images/css-cascading.svg/image3.tiff differ diff --git a/17/images/css-class.pdf b/17/images/css-class.pdf new file mode 100644 index 0000000..b71e333 Binary files /dev/null and b/17/images/css-class.pdf differ diff --git a/17/images/css-class.png b/17/images/css-class.png new file mode 100644 index 0000000..a5026a0 Binary files /dev/null and b/17/images/css-class.png differ diff --git a/17/images/css-colours.pdf b/17/images/css-colours.pdf new file mode 100644 index 0000000..efe18c2 Binary files /dev/null and b/17/images/css-colours.pdf differ diff --git a/17/images/css-colours.svg b/17/images/css-colours.svg new file mode 100644 index 0000000..22ad3fa --- /dev/null +++ b/17/images/css-colours.svg @@ -0,0 +1,3 @@ + + +2013-09-17 16:42ZCanvas 1Layer 1Red: #FF0000 or rgb(255,0,0)Black: #000000 or rgb(0,0,0)Green: #00FF00 or rgb(0,255,0)Blue: #0000FF or rgb(0,0,255)Yellow: #FFFF00 or rgb(255,255,0)Cyan: #00FFFF or rgb(0,255,255)Magenta: #FF00FF or rgb(255,0,255)Grey: #C0C0C0 or rgb(192,192,192)White: #FFFFFF or rgb(255,255,255) diff --git a/17/images/css-h1-highlighting.pdf b/17/images/css-h1-highlighting.pdf new file mode 100644 index 0000000..f6f9c88 Binary files /dev/null and b/17/images/css-h1-highlighting.pdf differ diff --git a/17/images/css-id.pdf b/17/images/css-id.pdf new file mode 100644 index 0000000..be59149 Binary files /dev/null and b/17/images/css-id.pdf differ diff --git a/17/images/css-id.png b/17/images/css-id.png new file mode 100644 index 0000000..f2dfcad Binary files /dev/null and b/17/images/css-id.png differ diff --git a/17/images/css-links-hover.pdf b/17/images/css-links-hover.pdf new file mode 100644 index 0000000..cf33fb9 Binary files /dev/null and b/17/images/css-links-hover.pdf differ diff --git a/17/images/css-lists-cats-end.png b/17/images/css-lists-cats-end.png new file mode 100644 index 0000000..7db3f9c Binary files /dev/null and b/17/images/css-lists-cats-end.png differ diff --git a/17/images/css-lists-cats-float.pdf b/17/images/css-lists-cats-float.pdf new file mode 100644 index 0000000..1e24a06 Binary files /dev/null and b/17/images/css-lists-cats-float.pdf differ diff --git a/17/images/css-lists-which.png b/17/images/css-lists-which.png new file mode 100644 index 0000000..0170aa4 Binary files /dev/null and b/17/images/css-lists-which.png differ diff --git a/17/images/css-navbar-basic.png b/17/images/css-navbar-basic.png new file mode 100644 index 0000000..afb7928 Binary files /dev/null and b/17/images/css-navbar-basic.png differ diff --git a/17/images/css-nesting-blocks.pdf b/17/images/css-nesting-blocks.pdf new file mode 100644 index 0000000..1eb94a2 Binary files /dev/null and b/17/images/css-nesting-blocks.pdf differ diff --git a/17/images/css-nesting-blocks.svg b/17/images/css-nesting-blocks.svg new file mode 100644 index 0000000..2ff710a --- /dev/null +++ b/17/images/css-nesting-blocks.svg @@ -0,0 +1,3 @@ + + +2013-09-14 21:20ZCanvas 1Layer 1<div> Element<div> Element<span> Element<span> Element<span> Element<span> ElementNested <div> Element<span> Element<span> ElementNested <span><span> Element<span> Element diff --git a/17/images/css-positioning-absolute1.pdf b/17/images/css-positioning-absolute1.pdf new file mode 100644 index 0000000..362befa Binary files /dev/null and b/17/images/css-positioning-absolute1.pdf differ diff --git a/17/images/css-positioning-absolute2.pdf b/17/images/css-positioning-absolute2.pdf new file mode 100644 index 0000000..6694238 Binary files /dev/null and b/17/images/css-positioning-absolute2.pdf differ diff --git a/17/images/css-positioning-float1.pdf b/17/images/css-positioning-float1.pdf new file mode 100644 index 0000000..10179a4 Binary files /dev/null and b/17/images/css-positioning-float1.pdf differ diff --git a/17/images/css-positioning-float2.pdf b/17/images/css-positioning-float2.pdf new file mode 100644 index 0000000..b236a39 Binary files /dev/null and b/17/images/css-positioning-float2.pdf differ diff --git a/17/images/css-positioning-relative.pdf b/17/images/css-positioning-relative.pdf new file mode 100644 index 0000000..e82f074 Binary files /dev/null and b/17/images/css-positioning-relative.pdf differ diff --git a/17/images/css-render.pdf b/17/images/css-render.pdf new file mode 100644 index 0000000..78423e9 Binary files /dev/null and b/17/images/css-render.pdf differ diff --git a/17/images/css-render.png b/17/images/css-render.png new file mode 100644 index 0000000..7855b19 Binary files /dev/null and b/17/images/css-render.png differ diff --git a/17/images/css-tidied.png b/17/images/css-tidied.png new file mode 100644 index 0000000..531f4bd Binary files /dev/null and b/17/images/css-tidied.png differ diff --git a/17/images/deploy-pythonanywhere.png b/17/images/deploy-pythonanywhere.png new file mode 100644 index 0000000..219eee2 Binary files /dev/null and b/17/images/deploy-pythonanywhere.png differ diff --git a/17/images/django-dev-server-firstrun.png b/17/images/django-dev-server-firstrun.png new file mode 100644 index 0000000..9556d67 Binary files /dev/null and b/17/images/django-dev-server-firstrun.png differ diff --git a/17/images/git-sequence.pdf b/17/images/git-sequence.pdf new file mode 100644 index 0000000..0f4d24f Binary files /dev/null and b/17/images/git-sequence.pdf differ diff --git a/17/images/git-sequence.svg b/17/images/git-sequence.svg new file mode 100644 index 0000000..6cd8e9f --- /dev/null +++ b/17/images/git-sequence.svg @@ -0,0 +1,3 @@ + + +2013-09-20 13:13ZCanvas 1Layer 1ORDo some work!git clonegit pullgit addgit mvgit cpgit rmgit statusgit commitgit pushgit mergegit stashgit pull12345 diff --git a/17/images/man.png b/17/images/man.png new file mode 100644 index 0000000..5606514 Binary files /dev/null and b/17/images/man.png differ diff --git a/17/images/rango-admin.png b/17/images/rango-admin.png new file mode 100644 index 0000000..eb840bf Binary files /dev/null and b/17/images/rango-admin.png differ diff --git a/17/images/rango-categories-simple.png b/17/images/rango-categories-simple.png new file mode 100644 index 0000000..996ab1b Binary files /dev/null and b/17/images/rango-categories-simple.png differ diff --git a/17/images/rango-css-1.png b/17/images/rango-css-1.png new file mode 100644 index 0000000..c70ab55 Binary files /dev/null and b/17/images/rango-css-1.png differ diff --git a/17/images/rango-css-2.png b/17/images/rango-css-2.png new file mode 100644 index 0000000..e1da68d Binary files /dev/null and b/17/images/rango-css-2.png differ diff --git a/17/images/rango-css-3.png b/17/images/rango-css-3.png new file mode 100644 index 0000000..a4a6ce3 Binary files /dev/null and b/17/images/rango-css-3.png differ diff --git a/17/images/rango-css-4.png b/17/images/rango-css-4.png new file mode 100644 index 0000000..221db9d Binary files /dev/null and b/17/images/rango-css-4.png differ diff --git a/17/images/rango-erd.png b/17/images/rango-erd.png new file mode 100644 index 0000000..fee8bf9 Binary files /dev/null and b/17/images/rango-erd.png differ diff --git a/17/images/rango-erd.svg b/17/images/rango-erd.svg new file mode 100644 index 0000000..de7e349 --- /dev/null +++ b/17/images/rango-erd.svg @@ -0,0 +1 @@ +CategoryPage
        houses
        [Object]         \ No newline at end of file diff --git a/17/images/rango-erd.xml b/17/images/rango-erd.xml new file mode 100644 index 0000000..125a384 --- /dev/null +++ b/17/images/rango-erd.xml @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/17/images/rango-form-steps.pdf b/17/images/rango-form-steps.pdf new file mode 100644 index 0000000..16613ea Binary files /dev/null and b/17/images/rango-form-steps.pdf differ diff --git a/17/images/rango-form-steps.png b/17/images/rango-form-steps.png new file mode 100644 index 0000000..e66a328 Binary files /dev/null and b/17/images/rango-form-steps.png differ diff --git a/17/images/rango-hello-world-template.png b/17/images/rango-hello-world-template.png new file mode 100644 index 0000000..702ca77 Binary files /dev/null and b/17/images/rango-hello-world-template.png differ diff --git a/17/images/rango-hello-world.png b/17/images/rango-hello-world.png new file mode 100644 index 0000000..ca6795b Binary files /dev/null and b/17/images/rango-hello-world.png differ diff --git a/17/images/rango-links.pdf b/17/images/rango-links.pdf new file mode 100644 index 0000000..ecaef22 Binary files /dev/null and b/17/images/rango-links.pdf differ diff --git a/17/images/rango-links.png b/17/images/rango-links.png new file mode 100644 index 0000000..faeef6a Binary files /dev/null and b/17/images/rango-links.png differ diff --git a/17/images/rango-login-message.png b/17/images/rango-login-message.png new file mode 100644 index 0000000..6d7939b Binary files /dev/null and b/17/images/rango-login-message.png differ diff --git a/17/images/rango-ntier-architecture.png b/17/images/rango-ntier-architecture.png new file mode 100644 index 0000000..b4578a9 Binary files /dev/null and b/17/images/rango-ntier-architecture.png differ diff --git a/17/images/rango-ntier-architecture.svg b/17/images/rango-ntier-architecture.svg new file mode 100644 index 0000000..a4288f7 --- /dev/null +++ b/17/images/rango-ntier-architecture.svg @@ -0,0 +1 @@ +

        Search API
        [Object]
        Database
        [Object]
        Middleware
        [Object]
        Client
        [Object]         \ No newline at end of file diff --git a/17/images/rango-ntier-architecture.xml b/17/images/rango-ntier-architecture.xml new file mode 100644 index 0000000..7e4ab87 --- /dev/null +++ b/17/images/rango-ntier-architecture.xml @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/17/images/rango-picture.pdf b/17/images/rango-picture.pdf new file mode 100644 index 0000000..2d78892 Binary files /dev/null and b/17/images/rango-picture.pdf differ diff --git a/17/images/rango-picture.png b/17/images/rango-picture.png new file mode 100644 index 0000000..97b2903 Binary files /dev/null and b/17/images/rango-picture.png differ diff --git a/17/images/rango-register-form.png b/17/images/rango-register-form.png new file mode 100644 index 0000000..6d64c69 Binary files /dev/null and b/17/images/rango-register-form.png differ diff --git a/17/images/rango-site-with-pic.pdf b/17/images/rango-site-with-pic.pdf new file mode 100644 index 0000000..a3eedbf Binary files /dev/null and b/17/images/rango-site-with-pic.pdf differ diff --git a/17/images/rango-site-with-pic.png b/17/images/rango-site-with-pic.png new file mode 100644 index 0000000..5487d49 Binary files /dev/null and b/17/images/rango-site-with-pic.png differ diff --git a/17/images/rango-template-inheritance.pdf b/17/images/rango-template-inheritance.pdf new file mode 100644 index 0000000..c6d9566 Binary files /dev/null and b/17/images/rango-template-inheritance.pdf differ diff --git a/17/images/rango-template-inheritance.svg b/17/images/rango-template-inheritance.svg new file mode 100644 index 0000000..25f9e10 --- /dev/null +++ b/17/images/rango-template-inheritance.svg @@ -0,0 +1,3 @@ + + +2013-09-28 16:17ZCanvas 1Layer 1base.htmlindex.htmllogin.htmlregister.htmlrestricted.htmlabout.htmlcategory.htmladd_category.htmladd_page.html diff --git a/17/images/relational-schema-basic-models.pdf b/17/images/relational-schema-basic-models.pdf new file mode 100644 index 0000000..671cfa1 Binary files /dev/null and b/17/images/relational-schema-basic-models.pdf differ diff --git a/17/images/session-id.png b/17/images/session-id.png new file mode 100644 index 0000000..9f9e47d Binary files /dev/null and b/17/images/session-id.png differ diff --git a/17/images/terminal_directory.png b/17/images/terminal_directory.png new file mode 100644 index 0000000..e61562d Binary files /dev/null and b/17/images/terminal_directory.png differ diff --git a/17/images/test-cookie.png b/17/images/test-cookie.png new file mode 100644 index 0000000..85b4d28 Binary files /dev/null and b/17/images/test-cookie.png differ diff --git a/17/images/twd.ico b/17/images/twd.ico new file mode 100644 index 0000000..2209948 Binary files /dev/null and b/17/images/twd.ico differ diff --git a/17/images/twd200x200.jpg b/17/images/twd200x200.jpg new file mode 100644 index 0000000..52c9663 Binary files /dev/null and b/17/images/twd200x200.jpg differ diff --git a/17/images/url-chain.pdf b/17/images/url-chain.pdf new file mode 100644 index 0000000..5f91eef Binary files /dev/null and b/17/images/url-chain.pdf differ diff --git a/17/images/url-chain.svg b/17/images/url-chain.svg new file mode 100644 index 0000000..608830e --- /dev/null +++ b/17/images/url-chain.svg @@ -0,0 +1,3 @@ + + +2013-10-02 13:26ZCanvas 1Layer 1http://www.servername.com/rango/indexDomain nameProject configuration urls.pyRango urls.py diff --git a/17/images/wireframe_cat.pdf b/17/images/wireframe_cat.pdf new file mode 100644 index 0000000..962bbff Binary files /dev/null and b/17/images/wireframe_cat.pdf differ diff --git a/17/images/wireframe_default.pdf b/17/images/wireframe_default.pdf new file mode 100644 index 0000000..e2b6b2d Binary files /dev/null and b/17/images/wireframe_default.pdf differ diff --git a/17/index.rst b/17/index.rst new file mode 100644 index 0000000..ba2252d --- /dev/null +++ b/17/index.rst @@ -0,0 +1,43 @@ +.. How_To_Tango_With_Django documentation master file, created by + sphinx-quickstart on Thu Dec 20 15:10:50 2012. + You can adapt this file completely to your liking, but it should at least + contain the root `toctree` directive. + +How To Tango With Django +==================================================== + +.. toctree:: + :maxdepth: 3 + :numbered: + + chapters/overview + chapters/requirements + chapters/setup + chapters/templates_static + chapters/models + chapters/models_templates + chapters/forms + chapters/login + chapters/templates + chapters/cookie + chapters/bootstrap + chapters/bing_search + chapters/tango + chapters/tango_too + chapters/ajax + chapters/deploy + chapters/summary + chapters/git + chapters/css_intro + chapters/javascript + chapters/test + chapters/acknowledgements + + +Indices and tables +================== + +* :ref:`genindex` +* :ref:`modindex` +* :ref:`search` + diff --git a/17/new_images/ch_models_admin_interface.png b/17/new_images/ch_models_admin_interface.png new file mode 100644 index 0000000..89dba2a Binary files /dev/null and b/17/new_images/ch_models_admin_interface.png differ diff --git a/17/new_images/ch_setup_it_worked.png b/17/new_images/ch_setup_it_worked.png new file mode 100644 index 0000000..094fb2d Binary files /dev/null and b/17/new_images/ch_setup_it_worked.png differ diff --git a/17/omnigraffle/css-blocks-before.graffle/data.plist b/17/omnigraffle/css-blocks-before.graffle/data.plist new file mode 100644 index 0000000..ad6045a --- /dev/null +++ b/17/omnigraffle/css-blocks-before.graffle/data.plist @@ -0,0 +1,497 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1677.8699340820312, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-14 11:48:21 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{430.97875353231223, 426.45745308229743}, {159.57444763183594, 29}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 10 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs48 \cf2 Other Links} + VerticalPad + 0 + + + + Bounds + {{348.80851151793206, 344.92552902278737}, {187.23403930664062, 29}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 9 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs48 \cf2 Category Links} + VerticalPad + 0 + + + + Bounds + {{695.74468261572815, 264.43616575221239}, {142.55319213867188, 29}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 8 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green0\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs48 \cf2 Page Title} + VerticalPad + 0 + + + + Bounds + {{227.65957892788293, 403.36170336886329}, {193.61701965332031, 75.191490173339844}} + Class + ShapedGraphic + ID + 7 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 4 + + + + + Bounds + {{247.87235792010199, 321.82978815684959}, {89.361686706542969, 75.191490173339844}} + Class + ShapedGraphic + ID + 6 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 4 + + + + + Bounds + {{227.65958347845094, 251.27659643273807}, {455.31915283203125, 55.319149017333984}} + Class + ShapedGraphic + ID + 5 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 4 + + + + + Bounds + {{176.59574512876281, 125.53191521201143}, {1014, 465}} + Class + ShapedGraphic + ID + 11 + ImageID + 4 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 3 + ImageCounter + 5 + ImageLinkBack + + + + ImageList + + image4.png + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-14 11:55:17 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{116, 848}, {1013, 929}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{117.02127689255369, -20}, {934.04255556056478, 824.46808719753733}} + Zoom + 0.93999999761581421 + ZoomValues + + + Canvas 1 + 0.93999999761581421 + 0.97000002861022949 + + + + + diff --git a/17/omnigraffle/css-blocks-before.graffle/image4.png b/17/omnigraffle/css-blocks-before.graffle/image4.png new file mode 100644 index 0000000..58aab82 Binary files /dev/null and b/17/omnigraffle/css-blocks-before.graffle/image4.png differ diff --git a/17/omnigraffle/css-blocks.graffle b/17/omnigraffle/css-blocks.graffle new file mode 100644 index 0000000..0801c08 --- /dev/null +++ b/17/omnigraffle/css-blocks.graffle @@ -0,0 +1,3774 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + FontInfo + + Font + Helvetica-BoldOblique + Size + 19 + + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-14 14:08:23 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43490 + Points + + {470.90072330555739, 524.44846021741478} + {473.20353092274485, 522.17246021741494} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43491 + Points + + {467.41647525868251, 524.44846021741478} + {473.19351871571342, 518.72246021741512} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43492 + Points + + {463.82209293446402, 524.44846021741478} + {473.20353092274507, 515.16346021741481} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43489 + + + Bounds + {{26.303043832427875, 510.09098107612544}, {450, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43493 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + ID + 43488 + + + Bounds + {{58.990700419838277, 326.67687766932806}, {384.62469210145048, 181.37681579589844}} + Class + ShapedGraphic + ID + 43498 + Shape + Rectangle + Style + + fill + + Draws + NO + GradientCenter + {0, 0.1333333333} + + shadow + + Draws + NO + + stroke + + Color + + b + 1 + g + 0.501961 + r + 0 + + Width + 3 + + + + + Bounds + {{25.999988191931891, 326.67691040039062}, {450, 33}} + Class + ShapedGraphic + ID + 43494 + Shape + Rectangle + Style + + fill + + Draws + NO + GradientCenter + {0, 0.1333333333} + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + + + Bounds + {{58.990700419838333, 467.2079902799897}, {384.32160760663561, 33}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43503 + Shape + Rectangle + Style + + fill + + GradientCenter + {0, 0.1333333333} + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Category Block} + + + + Bounds + {{58.990700419838333, 426.33843729763913}, {384.62469210145042, 33}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43501 + Shape + Rectangle + Style + + fill + + GradientCenter + {0, 0.1333333333} + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Text Block} + + + + Bounds + {{58.990700235029166, 366.25379393792014}, {194.44142150878906, 38}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Color + + b + 0 + g + 0 + r + 0 + + Font + Helvetica-Bold + Size + 32 + + ID + 43499 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 0.0 + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs64 \cf0 Page Header} + VerticalPad + 0 + + + + Bounds + {{311.53847296562469, 334.67688980892478}, {132.07691955566406, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Color + + b + 0 + g + 0 + r + 0 + + Font + Helvetica-Bold + Size + 14 + + ID + 43497 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 User-Related Links} + VerticalPad + 0 + + + + Bounds + {{125.91604655409652, 334.67688290748362}, {144.45522358897222, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Color + + b + 0 + g + 0 + r + 0 + + Font + Helvetica-Bold + Size + 14 + + ID + 43496 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Rango-Related Links} + VerticalPad + 0 + + + + Bounds + {{58.990700419838333, 334.67687600604233}, {57.393924713134766, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Color + + b + 0 + g + 0 + r + 0 + + Font + Helvetica-Bold + Size + 14 + + ID + 43495 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 RANGO} + VerticalPad + 0 + + + + Bounds + {{102.36949939686764, 277.49736742187639}, {357.63050415039061, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Rango - Thinking in Blocks} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{136.8559993968677, 313.09486742187624}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.8559993968677, 311.09386742187627}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.85599939686765, 313.52886742187621}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{136.85599939686765, 311.49686742187623}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43421 + Points + + {135.32399939686772, 310.99986742187622} + {135.33299939686771, 315.55186742187624} + {144.27599939686772, 315.55186742187624} + {144.2669993968677, 310.99986742187622} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.29299939686769, 310.96886742187627}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98899939686771, 310.39486742187626}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{135.69899939686766, 307.77086742187623}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98499939686772, 307.77086742187623}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{132.65699939686763, 306.46586742187623}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43427 + Points + + {135.32399939686772, 307.75286742187626} + {135.32399939686772, 302.80186742187624} + {144.2669993968677, 302.80186742187624} + {144.2669993968677, 307.75286742187626} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.32399939686766, 302.80186742187624}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{127.79599939686761, 298.67686742187624}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{108.47999939686758, 311.68986742187622}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{103.17239939686755, 303.17686742187624}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{97.522399396867627, 298.67686742187624}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{47.716799396867657, 303.17686742187624}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{74.265499396867654, 303.17686742187624}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {65.473899396867637, 298.86056742187623} + {65.473899396867637, 319.49286742187627} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{39.250899396867652, 298.67686742187624}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{165.32699939686756, 303.17686742187624}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{158.06899939686753, 298.67686742187624}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{192.46699939686761, 302.55206742187619}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{192.46299939686759, 304.79286742187617}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{185.29799939686762, 306.13786742187619}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{187.74099939686766, 302.48936742187624}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{177.32699939686762, 298.67686742187624}, {282.67300415039062, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{80.367299396867622, 278.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{78.730499396867629, 277.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{60.62749939686762, 278.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{58.990699396867633, 277.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{40.887799396867621, 278.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{39.250899396867624, 277.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Bounds + {{25.999999396867622, 271.67686742187658}, {450, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{25.999999822244519, 359.67691897217202}, {450, 55}} + Class + ShapedGraphic + ID + 43502 + Shape + Rectangle + Style + + fill + + GradientCenter + {0, 0.1333333333} + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + + + Bounds + {{25.999985780901881, 271.67686742187658}, {450, 257.41412353515625}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-14 20:53:07 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{225, 868}, {990, 922}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-2, 130.87248238382736}, {564.42952658871172, 525.50335234121439}} + Zoom + 1.4900000095367432 + ZoomValues + + + Canvas 1 + 1.4900000095367432 + 1.4600000381469727 + + + + + diff --git a/17/omnigraffle/css-box-example.graffle b/17/omnigraffle/css-box-example.graffle new file mode 100644 index 0000000..efc8ada --- /dev/null +++ b/17/omnigraffle/css-box-example.graffle @@ -0,0 +1,447 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 15:44:37 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{320, 244}, {197, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 39 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 126px} + VerticalPad + 0 + + + + Bounds + {{266.07249450683594, 188.25}, {73.5, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 38 + Rotation + 90 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 86px} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 37 + Points + + {312, 158} + {312, 231.5} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + Width + 2 + + + + + Class + LineGraphic + ID + 36 + Points + + {319, 242} + {517, 242} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + Width + 2 + + + + + Bounds + {{320, 158.5}, {197, 73}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-BoldOblique + Size + 12 + + ID + 35 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 1 + + + shadow + + Draws + NO + + stroke + + Width + 3 + + + Text + + Align + 0 + Pad + 10 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\i\fs24 \cf2 Content of element} + VerticalPad + 10 + + TextPlacement + 0 + + + Bounds + {{25.644989013671875, 149}, {254, 108}} + Class + ShapedGraphic + ID + 34 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;\red0\green0\blue255;\red64\green128\blue0;\red128\green0\blue64; +} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf2 .box\cf0 \{\ + \cf3 width\cf0 : \cf4 100px\cf0 ;\ + \cf3 height\cf0 : \cf4 60px\cf0 ;\ + \cf3 padding\cf0 : \cf4 10px\cf0 ;\ + \cf3 border\cf0 : \cf4 3 px solid #000000\cf0 ;\ + \cf3 background\cf0 : \cf4 #FF0000\cf0 ;\ +\}} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 16:16:11 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{36, 869}, {759, 926}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-32, -2}, {624, 787}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/css-box-example2.graffle b/17/omnigraffle/css-box-example2.graffle new file mode 100644 index 0000000..aed22b5 --- /dev/null +++ b/17/omnigraffle/css-box-example2.graffle @@ -0,0 +1,647 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 16:16:28 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{453.75204825559337, 232.64462280273455}, {53.677699863727071, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 47 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 40px} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 46 + Points + + {453.42975266954795, 231.64462146038667} + {507.10745253327491, 231.64462146038667} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + Width + 2 + + + + + Class + LineGraphic + ID + 45 + Points + + {438.6446017066072, 219.24792763633391} + {455.90908001918694, 219.24792763633391} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + Width + 2 + + + + + Bounds + {{453.42974125437638, 148.99999487500219}, {54, 64.628105163574219}} + Class + ShapedGraphic + ID + 44 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{384.01652198146957, 232.64462280273438}, {53.677699863727071, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 40px} + VerticalPad + 0 + + + + Bounds + {{315.694218695681, 232.64462280273438}, {53.677699863727071, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 42 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 40px} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 41 + Points + + {383.69422639542415, 231.6446214603865} + {437.37192625915111, 231.6446214603865} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + Width + 2 + + + + + Class + LineGraphic + ID + 40 + Points + + {316.01651511652551, 231.64462146038636} + {369.69421498025258, 231.64462146038636} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + Width + 2 + + + + + Class + LineGraphic + ID + 39 + Points + + {299.17354428713622, 219.24792763633388} + {316.43802259971596, 219.24792763633388} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + Width + 2 + + + + + Class + LineGraphic + ID + 38 + Points + + {368.90907543248341, 219.24792763633374} + {386.17355374506315, 219.24792763633374} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + Width + 2 + + + + + Bounds + {{383.69421498025258, 148.99999487500202}, {54, 64.628105163574219}} + Class + ShapedGraphic + ID + 36 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{315.69421498025258, 148.99999487500202}, {54, 64.628105163574219}} + Class + ShapedGraphic + ID + 35 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{25.644989013671875, 149}, {254, 94}} + Class + ShapedGraphic + ID + 34 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;\red0\green0\blue255;\red64\green128\blue0;\red128\green0\blue64; +} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf2 .box\cf0 \{\ + \cf3 width\cf0 : \cf4 40px\cf0 ;\ + \cf3 height\cf0 : \cf4 60px\cf0 ;\ + \cf3 margin-left\cf0 : \cf4 10px\cf0 ;\ + \cf3 background\cf0 : \cf4 #FF6600\cf0 ;\ +\}} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 16:23:18 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{22, 1019}, {1124, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-122, 59.504130355452531}, {805.78509856341975, 528.09915690464129}} + Zoom + 1.2100000381469727 + ZoomValues + + + Canvas 1 + 1.2100000381469727 + 1.1499999761581421 + + + + + diff --git a/17/omnigraffle/css-box-model.graffle b/17/omnigraffle/css-box-model.graffle new file mode 100644 index 0000000..5ccb046 --- /dev/null +++ b/17/omnigraffle/css-box-model.graffle @@ -0,0 +1,532 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 15:06:21 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{504, 108}, {117, 27}} + Class + ShapedGraphic + ID + 22 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Pattern + 2 + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Margin} + + + + Bounds + {{378, 108}, {117, 27}} + Class + ShapedGraphic + ID + 21 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 1 + + + shadow + + Draws + NO + + stroke + + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf2 Border} + + + + Bounds + {{504, 72}, {117, 27}} + Class + ShapedGraphic + ID + 20 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Pattern + 1 + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Padding} + + + + Bounds + {{378, 72}, {117, 27}} + Class + ShapedGraphic + ID + 19 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Content} + + + + Bounds + {{369, 41}, {45, 22}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-BoldOblique + Size + 18 + + ID + 18 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs36 \cf0 Key:} + VerticalPad + 0 + + + + Bounds + {{72, 72}, {252, 98}} + Class + ShapedGraphic + ID + 13 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Width + 3 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Content of Element} + + + + Bounds + {{63, 63}, {270, 117}} + Class + ShapedGraphic + ID + 15 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Pattern + 1 + Width + 3 + + + + + Bounds + {{54, 54}, {288, 135}} + Class + ShapedGraphic + ID + 16 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 1 + + + shadow + + Draws + NO + + stroke + + Width + 3 + + + + + Bounds + {{45, 45}, {306, 153}} + Class + ShapedGraphic + ID + 17 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Pattern + 2 + Width + 3 + + + + + GridInfo + + SnapsToGrid + YES + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 3 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 15:32:39 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{110, 881}, {1014, 922}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 0}, {865, 768}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/css-cascading.graffle/data.plist b/17/omnigraffle/css-cascading.graffle/data.plist new file mode 100644 index 0000000..e3829a4 Binary files /dev/null and b/17/omnigraffle/css-cascading.graffle/data.plist differ diff --git a/17/omnigraffle/css-cascading.graffle/image1.tiff b/17/omnigraffle/css-cascading.graffle/image1.tiff new file mode 100644 index 0000000..8579597 Binary files /dev/null and b/17/omnigraffle/css-cascading.graffle/image1.tiff differ diff --git a/17/omnigraffle/css-cascading.graffle/image2.tiff b/17/omnigraffle/css-cascading.graffle/image2.tiff new file mode 100644 index 0000000..320a870 Binary files /dev/null and b/17/omnigraffle/css-cascading.graffle/image2.tiff differ diff --git a/17/omnigraffle/css-cascading.graffle/image3.tiff b/17/omnigraffle/css-cascading.graffle/image3.tiff new file mode 100644 index 0000000..7c76780 Binary files /dev/null and b/17/omnigraffle/css-cascading.graffle/image3.tiff differ diff --git a/17/omnigraffle/css-class.graffle b/17/omnigraffle/css-class.graffle new file mode 100644 index 0000000..e90f39c --- /dev/null +++ b/17/omnigraffle/css-class.graffle @@ -0,0 +1,3565 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-02 16:39:26 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{398, 134}, {208, 148}} + Class + ShapedGraphic + ID + 34 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;\red0\green0\blue255;\red64\green128\blue0;\red128\green0\blue64; +} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf2 h1\cf0 \{\ + \cf3 font-size\cf0 : \cf4 16pt\cf0 ;\ + \cf3 font-style\cf0 : \cf4 italic\cf0 ;\ + \cf3 text-align\cf0 : \cf4 center\cf0 ;\ + \cf3 color\cf0 : \cf4 #FF0000\cf0 ;\ +\}\ +\ +\cf2 .blue\cf0 \{\ + \cf3 color\cf0 : \cf4 #003366\cf0 ;\ +\}} + + TextPlacement + 0 + + + Bounds + {{26, 247.40595898153782}, {450, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43489 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Resulting Page Render} + VerticalPad + 0 + + + + Bounds + {{39.250898624212823, 335.60440484560246}, {420.74910492304542, 57}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 16 + + ID + 43487 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red0\green51\blue102;\red255\green3\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs32 \cf2 Hello World!\cf3 \ +I'm in the middle...\ +\cf2 Goodbye World!} + VerticalPad + 0 + + + + Bounds + {{102.36949939686764, 277.49736742187639}, {357.63050415039061, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Rango CSS Example} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{136.8559993968677, 313.09486742187624}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.8559993968677, 311.09386742187627}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.85599939686765, 313.52886742187621}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{136.85599939686765, 311.49686742187623}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43421 + Points + + {135.32399939686772, 310.99986742187622} + {135.33299939686771, 315.55186742187624} + {144.27599939686772, 315.55186742187624} + {144.2669993968677, 310.99986742187622} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.29299939686769, 310.96886742187627}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98899939686771, 310.39486742187626}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{135.69899939686766, 307.77086742187623}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98499939686772, 307.77086742187623}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{132.65699939686763, 306.46586742187623}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43427 + Points + + {135.32399939686772, 307.75286742187626} + {135.32399939686772, 302.80186742187624} + {144.2669993968677, 302.80186742187624} + {144.2669993968677, 307.75286742187626} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.32399939686766, 302.80186742187624}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{127.79599939686761, 298.67686742187624}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{108.47999939686758, 311.68986742187622}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{103.17239939686755, 303.17686742187624}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{97.522399396867627, 298.67686742187624}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{47.716799396867657, 303.17686742187624}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{74.265499396867654, 303.17686742187624}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {65.473899396867637, 298.86056742187623} + {65.473899396867637, 319.49286742187627} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{39.250899396867652, 298.67686742187624}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{165.32699939686756, 303.17686742187624}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{158.06899939686753, 298.67686742187624}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{192.46699939686761, 302.55206742187619}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{192.46299939686759, 304.79286742187617}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{185.29799939686762, 306.13786742187619}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{187.74099939686766, 302.48936742187624}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{177.32699939686762, 298.67686742187624}, {282.67300415039062, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{80.367299396867622, 278.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{78.730499396867629, 277.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{60.62749939686762, 278.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{58.990699396867633, 277.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{40.887799396867621, 278.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{39.250899396867624, 277.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43472 + Points + + {470.59767926115256, 420.21122695261721} + {472.90048687834002, 417.93522695261737} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43473 + Points + + {467.11343121427768, 420.21122695261721} + {472.8904746713086, 414.48522695261755} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43474 + Points + + {463.5190488900592, 420.21122695261721} + {472.90048687834025, 410.9262269526173} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43471 + + + Bounds + {{25.999999788023104, 405.85374781132776}, {450, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43475 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{25.999999396867622, 271.67686742187658}, {450, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{25.999999396867622, 271.67686742187658}, {450, 153.1768798828125}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{349.92562389197963, 152.49999606154188}, {42.14875900177887, 43}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43488 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs72 \cf0 +} + VerticalPad + 0 + + + + Bounds + {{398, 108}, {208, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 36 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 CSS} + VerticalPad + 0 + + + + Bounds + {{26, 108}, {318, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 35 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 HTML Markup} + VerticalPad + 0 + + + + Bounds + {{26, 134}, {318, 105}} + Class + ShapedGraphic + ID + 33 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <html>\ +<body>\ + <h1 class="blue">Hello World!</h1>\ + <h1>I'm in the middle...</h1>\ + <h1 class="blue">Goodbye World!</h1>\ +</body>\ +</html>} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-02 16:49:18 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{313, 882}, {694, 922}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 15}, {545, 768}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/css-colours.graffle b/17/omnigraffle/css-colours.graffle new file mode 100644 index 0000000..54de91f --- /dev/null +++ b/17/omnigraffle/css-colours.graffle @@ -0,0 +1,537 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-17 16:31:59 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{57.481463812997006, 424.44449309025708}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 11 + Shape + Rectangle + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 White: +\f1 #FFFFFF +\f0 or +\f1 rgb(255,255,255)} + + + + Bounds + {{57.481443737433139, 390.70425622183666}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 10 + Shape + Rectangle + Style + + fill + + Color + + b + 0.752941 + g + 0.752941 + r + 0.752941 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 Grey: +\f1 #C0C0C0 +\f0 or +\f1 rgb(192,192,192)} + + + + Bounds + {{57.481486361049775, 355.55559133248778}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 9 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0 + r + 1 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 Magenta: +\f1 #FF00FF +\f0 or +\f1 rgb(255,0,255)} + + + + Bounds + {{57.481486361049768, 320.74075928833275}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 8 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 1 + r + 0 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 Cyan: +\f1 #00FFFF +\f0 or +\f1 rgb(0,255,255)} + + + + Bounds + {{57.481464474943692, 285.92593383789062}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 7 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 1 + r + 1 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 Yellow: +\f1 #FFFF00 +\f0 or +\f1 rgb(255,255,0)} + + + + Bounds + {{57.48148917366948, 251.11111450195312}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 6 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0 + r + 0 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf1 Blue: +\f1 #0000FF +\f0 or +\f1 rgb(0,0,255)} + + + + Bounds + {{57.481465477021239, 216.29629516601562}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 5 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 1 + r + 0 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 Green: +\f1 #00FF00 +\f0 or +\f1 rgb(0,255,0)} + + + + Bounds + {{57.481477923190539, 146.66666407644018}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 3 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf1 Black: +\f1 #000000 +\f0 or +\f1 rgb(0,0,0)} + + + + Bounds + {{57.481483548429992, 181.48147583007812}, {428.14813232421875, 34.814815521240234}} + Class + ShapedGraphic + ID + 4 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 1 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPSMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf1 Red: +\f1 #FF0000 +\f0 or +\f1 rgb(255,0,0)} + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-17 16:42:28 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{1379, -4}, {1296, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-144, 83.703702225443124}, {849.62961462463068, 473.33332497396606}} + Zoom + 1.3500000238418579 + ZoomValues + + + Canvas 1 + 1.3500000238418579 + 1.2899999618530273 + + + + + diff --git a/17/omnigraffle/css-h1-highlighting.graffle/data.plist b/17/omnigraffle/css-h1-highlighting.graffle/data.plist new file mode 100644 index 0000000..58101f4 --- /dev/null +++ b/17/omnigraffle/css-h1-highlighting.graffle/data.plist @@ -0,0 +1,397 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1677.8699340820312, 782.8900146484375}} + Class + SolidGraphic + FontInfo + + Font + Helvetica + Size + 11 + + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-14 19:50:54 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{43.215129283238184, 184.3417701325418}, {1039.240478515625, 86.075950622558594}} + Class + ShapedGraphic + ID + 9 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0.501961 + r + 1 + + Width + 3 + + + + + Bounds + {{84.810112089057156, 200.79746281896311}, {955.6961669921875, 58.227848052978516}} + Class + ShapedGraphic + ID + 8 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0 + g + 0 + r + 1 + + Width + 3 + + + + + Class + LineGraphic + ID + 6 + Points + + {1048.5949365025708, 65} + {1048.5949365025708, 527} + + Style + + stroke + + Color + + b + 0 + g + 0.501961 + r + 0.25098 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 7 + + + + + Class + LineGraphic + ID + 5 + Points + + {80, 65} + {80, 527} + + Style + + stroke + + Color + + b + 0 + g + 0.501961 + r + 0.25098 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 7 + + + + + Bounds + {{0.8353820103074785, 52.961965189437123}, {1124, 529}} + Class + ShapedGraphic + ID + 10 + ImageID + 2 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 3 + ImageCounter + 3 + ImageLinkBack + + + + ImageList + + image2.pdf + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-14 20:08:52 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{41, 1001}, {1222, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, -3}, {1375.9493297156082, 789.87339626728567}} + Zoom + 0.79000002145767212 + ZoomValues + + + Canvas 1 + 0.79000002145767212 + 0.80000001192092896 + + + + + diff --git a/17/omnigraffle/css-h1-highlighting.graffle/image2.pdf b/17/omnigraffle/css-h1-highlighting.graffle/image2.pdf new file mode 100644 index 0000000..4b58a10 Binary files /dev/null and b/17/omnigraffle/css-h1-highlighting.graffle/image2.pdf differ diff --git a/17/omnigraffle/css-id.graffle b/17/omnigraffle/css-id.graffle new file mode 100644 index 0000000..4fd7b82 --- /dev/null +++ b/17/omnigraffle/css-id.graffle @@ -0,0 +1,3563 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-02 16:39:26 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{398, 134}, {208, 148}} + Class + ShapedGraphic + ID + 34 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;\red0\green0\blue255;\red64\green128\blue0;\red128\green0\blue64; +} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf2 h1\cf0 \{\ + \cf3 font-size\cf0 : \cf4 16pt\cf0 ;\ + \cf3 font-style\cf0 : \cf4 italic\cf0 ;\ + \cf3 text-align\cf0 : \cf4 center\cf0 ;\ + \cf3 color\cf0 : \cf4 #FF0000\cf0 ;\ +\}\ +\ +\cf2 #blue_header\cf0 \{\ + \cf3 color\cf0 : \cf4 #003366\cf0 ;\ +\}} + + TextPlacement + 0 + + + Bounds + {{26, 237.40595898153782}, {450, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43489 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Resulting Page Render} + VerticalPad + 0 + + + + Bounds + {{39.250898624212823, 325.60440484560246}, {420.74910492304542, 38}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 16 + + ID + 43487 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red0\green51\blue102;\red255\green3\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs32 \cf2 Hello World!\cf3 \ +Goodbye World!} + VerticalPad + 0 + + + + Bounds + {{102.36949939686764, 267.49736742187639}, {357.63050415039061, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Rango CSS Example} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{136.8559993968677, 303.09486742187624}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.8559993968677, 301.09386742187627}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.85599939686765, 303.52886742187621}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{136.85599939686765, 301.49686742187623}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43421 + Points + + {135.32399939686772, 300.99986742187622} + {135.33299939686771, 305.55186742187624} + {144.27599939686772, 305.55186742187624} + {144.2669993968677, 300.99986742187622} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.29299939686769, 300.96886742187627}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98899939686771, 300.39486742187626}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{135.69899939686766, 297.77086742187623}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98499939686772, 297.77086742187623}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{132.65699939686763, 296.46586742187623}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43427 + Points + + {135.32399939686772, 297.75286742187626} + {135.32399939686772, 292.80186742187624} + {144.2669993968677, 292.80186742187624} + {144.2669993968677, 297.75286742187626} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.32399939686766, 292.80186742187624}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{127.79599939686761, 288.67686742187624}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{108.47999939686758, 301.68986742187622}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{103.17239939686755, 293.17686742187624}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{97.522399396867627, 288.67686742187624}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{47.716799396867657, 293.17686742187624}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{74.265499396867654, 293.17686742187624}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {65.473899396867637, 288.86056742187623} + {65.473899396867637, 309.49286742187627} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{39.250899396867652, 288.67686742187624}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{165.32699939686756, 293.17686742187624}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{158.06899939686753, 288.67686742187624}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{192.46699939686761, 292.55206742187619}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{192.46299939686759, 294.79286742187617}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{185.29799939686762, 296.13786742187619}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{187.74099939686766, 292.48936742187624}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{177.32699939686762, 288.67686742187624}, {282.67300415039062, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{80.367299396867622, 268.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{78.730499396867629, 267.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{60.62749939686762, 268.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{58.990699396867633, 267.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{40.887799396867621, 268.23356742187639}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{39.250899396867624, 267.49736742187639}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43472 + Points + + {470.59767926115256, 410.21122695261721} + {472.90048687834002, 407.93522695261737} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43473 + Points + + {467.11343121427768, 410.21122695261721} + {472.8904746713086, 404.48522695261755} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43474 + Points + + {463.5190488900592, 410.21122695261721} + {472.90048687834025, 400.9262269526173} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43471 + + + Bounds + {{25.999999788023104, 395.85374781132776}, {450, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43475 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{25.999999396867622, 261.67686742187658}, {450, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{25.999999396867622, 261.67686742187658}, {450, 153.1768798828125}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{349.92562389197963, 152.49999606154188}, {42.14875900177887, 43}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43488 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs72 \cf0 +} + VerticalPad + 0 + + + + Bounds + {{398, 108}, {208, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 36 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 CSS} + VerticalPad + 0 + + + + Bounds + {{26, 108}, {318, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 35 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 HTML Markup} + VerticalPad + 0 + + + + Bounds + {{26, 134}, {318, 92}} + Class + ShapedGraphic + ID + 33 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <html>\ +<body>\ + <h1 id="blue_header">Hello World!</h1>\ + <h1>Goodbye World!</h1>\ +</body>\ +</html>} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-02 16:50:17 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{313, 882}, {694, 922}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 15}, {545, 768}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/css-links-hover.graffle/data.plist b/17/omnigraffle/css-links-hover.graffle/data.plist new file mode 100644 index 0000000..ac72853 --- /dev/null +++ b/17/omnigraffle/css-links-hover.graffle/data.plist @@ -0,0 +1,406 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-17 16:04:14 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{71.709675403092731, 304.93548143344185}, {286.07945317658061, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 7 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 No hovering} + VerticalPad + 0 + + + + Bounds + {{434.30655705643483, 304.93548870012251}, {179.40312194824219, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 6 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Hovering!} + VerticalPad + 0 + + + + Bounds + {{572.9213864432719, 187.10448268941744}, {116.47543334960938, 149.62612915039062}} + Class + ShapedGraphic + ID + 5 + ImageID + 3 + Rotation + 345 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{433.80644603078258, 164.90323389953434}, {287.07973098489032, 129}} + Class + ShapedGraphic + ID + 4 + ImageID + 2 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{62.838706948382601, 164.90322455357585}, {286.07945317658061, 128}} + Class + ShapedGraphic + ID + 3 + ImageID + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 4 + ImageLinkBack + + + + + + ImageList + + image3.eps + image2.png + image1.png + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-17 16:12:26 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{1417, -10}, {1207, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 61.290322109266079}, {853.22579988951986, 503.22580258134258}} + Zoom + 1.2400000095367432 + ZoomValues + + + Canvas 1 + 1.2400000095367432 + 1.1399999856948853 + + + + + diff --git a/17/omnigraffle/css-links-hover.graffle/image1.png b/17/omnigraffle/css-links-hover.graffle/image1.png new file mode 100644 index 0000000..f12a481 Binary files /dev/null and b/17/omnigraffle/css-links-hover.graffle/image1.png differ diff --git a/17/omnigraffle/css-links-hover.graffle/image2.png b/17/omnigraffle/css-links-hover.graffle/image2.png new file mode 100644 index 0000000..48c1098 Binary files /dev/null and b/17/omnigraffle/css-links-hover.graffle/image2.png differ diff --git a/17/omnigraffle/css-links-hover.graffle/image3.eps b/17/omnigraffle/css-links-hover.graffle/image3.eps new file mode 100644 index 0000000..48dac65 Binary files /dev/null and b/17/omnigraffle/css-links-hover.graffle/image3.eps differ diff --git a/17/omnigraffle/css-lists-cats-float.graffle b/17/omnigraffle/css-lists-cats-float.graffle new file mode 100644 index 0000000..2bac9ab --- /dev/null +++ b/17/omnigraffle/css-lists-cats-float.graffle @@ -0,0 +1,1204 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-17 14:09:03 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{196.24867768903175, 163.36508807413543}, {292.78839048999293, 28}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 36 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\i\fs24 \cf0 Width calculation:\ +310 + 15 + 310 + 15 + 310 = +\b 960 pixels} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 35 + Points + + {172.30952421912241, 214.28835640890614} + {172.30952421912241, 225.28835596318535} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + + + + + Bounds + {{117.62169556967338, 213.34391986904274}, {50, 11}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Font + Helvetica + Size + 9 + + ID + 34 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs18 \cf0 15px margin} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + ID + 33 + Points + + {175.15344096355417, 129.62963061077605} + {175.15344096355417, 140.62963016505526} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + + + + + Bounds + {{317.53175008502194, 85.27272991961722}, {50, 11}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Font + Helvetica + Size + 9 + + ID + 31 + Rotation + 90 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs18 \cf0 15px margin} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{162.00264971652905, 86.330928963464189}, {50, 11}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Font + Helvetica + Size + 9 + + ID + 30 + Rotation + 90 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs18 \cf0 15px margin} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{120.46561231410517, 128.68519407091264}, {50, 11}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Font + Helvetica + Size + 9 + + ID + 29 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs18 \cf0 15px margin} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + ID + 28 + Points + + {334.5423287966268, 122.75132322035132} + {350.39418028405277, 122.75132322035132} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + + + + + Class + LineGraphic + ID + 27 + Points + + {179.38624522839586, 122.75132368040835} + {195.23809671582185, 122.75132368040835} + + Style + + stroke + + HeadArrow + FilledArrow + HeadScale + 0.25 + Legacy + + TailArrow + FilledArrow + TailScale + 0.25 + + + + + Bounds + {{39.883599237659858, 191.47618824697412}, {138.09521989429126, 18.243626024709844}} + Class + ShapedGraphic + ID + 26 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf1 <li> +\f1\b0 width: 310 pixels} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 25 + Points + + {39.8836183111463, 190.4761919178751} + {91.555556732931265, 190.47619191787501} + {177.97883820543768, 190.4761919178751} + + Style + + stroke + + Color + + b + 1 + g + 1 + r + 1 + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + + + + + Bounds + {{351.91535319867114, 108.36531269130927}, {138.09521989429126, 18.243626024709844}} + Class + ShapedGraphic + ID + 24 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf1 <li> +\f1\b0 width: 310 pixels} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 23 + Points + + {351.91537227215747, 107.36531636221027} + {490.01059216644887, 107.36531636221027} + + Style + + stroke + + Color + + b + 1 + g + 1 + r + 1 + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + + + + + Bounds + {{196.24867791906047, 107.36531627597729}, {138.09521989429126, 18.243626024709844}} + Class + ShapedGraphic + ID + 22 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf1 <li> +\f1\b0 width: 310 pixels} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 21 + Points + + {196.24869699254688, 106.36531994687829} + {334.34391688683831, 106.36531994687829} + + Style + + stroke + + Color + + b + 1 + g + 1 + r + 1 + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + + + + + Bounds + {{40.23280322939172, 107.36531829833984}, {138.09521989429126, 18.243626024709844}} + Class + ShapedGraphic + ID + 20 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf2 <li> +\f1\b0 width: 310 pixels} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 19 + Points + + {40.232822302878112, 106.36532196924084} + {178.32804219716937, 106.36532196924084} + + Style + + stroke + + Color + + b + 1 + g + 1 + r + 1 + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + + + + + AllowConnections + NO + Bounds + {{39.88359944814593, 141.91534500461756}, {138.44444274902344, 70.89947509765625}} + Class + ShapedGraphic + ID + 17 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red102\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs20 \cf2 \ul \ulc2 Category link 4} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{350.59262543000125, 57.671940827316575}, {138.44444274902344, 70.89947509765625}} + Class + ShapedGraphic + ID + 16 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red102\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs20 \cf2 \ul \ulc2 Category link 3} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{195.23809671582185, 57.67194487204214}, {138.44444274902344, 70.89947509765625}} + Class + ShapedGraphic + ID + 15 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red102\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs20 \cf2 \ul \ulc2 Category link 2} + + TextPlacement + 0 + + + Bounds + {{43.232799874752061, 242.6029380332831}, {443.42857236182158, 18.243626024709844}} + Class + ShapedGraphic + ID + 8 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Total width: 960 pixels} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 7 + Points + + {40.232805021726051, 237.16294334598109} + {490.35977626037089, 237.16294334598109} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + FilledArrow + + + + + AllowConnections + NO + Bounds + {{39.88359944814593, 57.671958108467706}, {138.44444274902344, 70.89947509765625}} + Class + ShapedGraphic + ID + 5 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red102\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs20 \cf2 \ul \ulc2 Category link 1} + + TextPlacement + 0 + + + AllowConnections + NO + Bounds + {{39.883600138231998, 35.978836251154206}, {450.12698364257812, 190.4761962890625}} + Class + ShapedGraphic + ID + 4 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <ul> +\f1\b0 Element} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-17 14:32:50 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{1303, -3}, {1453, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-64, 31.216931453207295}, {689.9470951691917, 338.09524065422818}} + Zoom + 1.8899999856948853 + ZoomValues + + + Canvas 1 + 1.8899999856948853 + 1.6699999570846558 + + + + + diff --git a/17/omnigraffle/css-nesting-blocks.graffle b/17/omnigraffle/css-nesting-blocks.graffle new file mode 100644 index 0000000..aa39e34 --- /dev/null +++ b/17/omnigraffle/css-nesting-blocks.graffle @@ -0,0 +1,680 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-14 16:19:21 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{412.66665871938108, 181.41665649413952}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 19 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{417.33333269755178, 71.999997456864804}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 18 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{304.66666650772152, 185.49998982747158}, {97.666669368743328, 13.833343505859375}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 17 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Nested +\f1 <span>} + + + + Bounds + {{196.66666666666731, 181.66665903727105}, {209.66667175292969, 22}} + Class + ShapedGraphic + ID + 16 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{84.000000000000355, 181.66666158040309}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 15 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{79.333333333333371, 159.99999999997857}, {444.33333524068325, 48.666667938232422}} + Class + ShapedGraphic + ID + 12 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 0.525376 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 Nested +\f1 <div> +\f0 Element} + + TextPlacement + 0 + + + Bounds + {{79.333333174388258, 98.666671752926533}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 11 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{304.66666650772152, 72.000002543130464}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 10 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{192.00000000000043, 71.999997456867987}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 9 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{79.333333333333428, 72.000000000000028}, {106.33333587646484, 22}} + Class + ShapedGraphic + ID + 8 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span> +\f1 Element} + + + + Bounds + {{73.666661580403684, 137.33333333332868}, {455.33334350585938, 76.666664123535156}} + Class + ShapedGraphic + ID + 7 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <div> +\f1 Element} + + TextPlacement + 0 + + + Bounds + {{73.666666666666742, 48}, {455.33334350585938, 80.666664123535156}} + Class + ShapedGraphic + ID + 6 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <div> +\f1 Element} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-14 21:20:06 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{255, 959}, {1005, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-5, 0}, {570.66666666666663, 426}} + Zoom + 1.5 + ZoomValues + + + Canvas 1 + 1.5 + 1.4199999570846558 + + + + + diff --git a/17/omnigraffle/css-positioning-absolute1.graffle b/17/omnigraffle/css-positioning-absolute1.graffle new file mode 100644 index 0000000..d337549 --- /dev/null +++ b/17/omnigraffle/css-positioning-absolute1.graffle @@ -0,0 +1,3572 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 14:15:42 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{53.846155821219071, 218.51282860118275}, {13.096399999999999, 13.096399999999999}} + Class + ShapedGraphic + ID + 43498 + Shape + Circle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{201.00397011682634, 240.53844719298397}, {29.504383337853568, 29.504383337853568}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 20 + + ID + 43497 + Shape + Circle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs36 \cf0 2} + + + + Bounds + {{83.447525247787198, 248.65720019467875}, {29.504383337853568, 29.504383337853568}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 20 + + ID + 43496 + Shape + Circle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs36 \cf0 1} + + + + Bounds + {{439.63200648716611, 357.04697758049355}, {67, 14}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 19 + + ID + 43495 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Not to scale!} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{125.48471226100455, 225.47707391208451}, {53.154936872658709, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 19 + + ID + 43493 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 200px} + VerticalPad + 0 + + + + Class + LineGraphic + FontInfo + + Font + Helvetica-Bold + Size + 19 + + ID + 43492 + Points + + {59.731544222632579, 224.53374322748988} + {184.40888149968791, 224.53374322748988} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + Pattern + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{185.21925394948556, 224.753722226462}, {61.073825836181641, 61.073825836181641}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 19 + + ID + 43489 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{68.444532520271366, 232.87248174377743}, {61.073825836181641, 61.073825836181641}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 19 + + ID + 43488 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.10104324184942, 175.01551565660452}, {357.63050415039061, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Positioning Elements Absolutely} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{170.58754324184952, 210.61301565660432}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{170.58754324184952, 208.61201565660434}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{170.58754324184946, 211.04701565660429}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{170.58754324184946, 209.01501565660431}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43421 + Points + + {169.05554324184953, 208.51801565660429} + {169.06454324184952, 213.07001565660431} + {178.00754324184953, 213.07001565660431} + {177.99854324184952, 208.51801565660429} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{169.0245432418495, 208.48701565660434}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{167.72054324184953, 207.91301565660433}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{169.43054324184948, 205.28901565660431}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{167.71654324184954, 205.28901565660431}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{166.38854324184945, 203.9840156566043}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43427 + Points + + {169.05554324184953, 205.27101565660433} + {169.05554324184953, 200.32001565660431} + {177.99854324184952, 200.32001565660431} + {177.99854324184952, 205.27101565660433} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{169.05554324184948, 200.32001565660431}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{161.52754324184943, 196.19501565660431}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{142.21154324184937, 209.20801565660429}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{136.90394324184933, 200.69501565660431}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{131.25394324184941, 196.19501565660431}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{81.448343241849443, 200.69501565660431}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 14 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{107.99704324184944, 200.69501565660431}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {99.205443241849423, 196.3787156566043} + {99.205443241849423, 217.01101565660434} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{72.982443241849438, 196.19501565660431}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 14 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{199.05854324184938, 200.69501565660431}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{191.80054324184934, 196.19501565660431}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{226.19854324184942, 200.07021565660432}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{226.1945432418494, 202.3110156566043}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{219.02954324184944, 203.65601565660432}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{221.47254324184948, 200.00751565660431}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 15 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{211.05854324184943, 196.19501565660431}, {282.67300415039062, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{114.09884324184941, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{112.46204324184941, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{94.359043241849392, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{92.722243241849398, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{74.619343241849421, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{72.98244324184941, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 12 + + ID + 43472 + Points + + {504.32922310613429, 386.80248767513825} + {506.63203072332175, 384.52648767513841} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 12 + + ID + 43473 + Points + + {500.84497505925941, 386.80248767513825} + {506.62201851629032, 381.07648767513859} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 12 + + ID + 43474 + Points + + {497.25059273504093, 386.80248767513825} + {506.63203072332198, 377.51748767513834} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43471 + + + Bounds + {{59.73154363300489, 372.44500853384875}, {450, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43475 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{59.731543241849408, 169.19501565660465}, {450, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + AllowConnections + NO + Bounds + {{59.731541599026087, 169.19501401378133}, {450, 222.25}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 15 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 14:17:17 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{26, 1001}, {1208, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-59, 117.9487222750513}, {678.8461787460833, 409.61539963998791}} + Zoom + 1.559999942779541 + ZoomValues + + + Canvas 1 + 1.559999942779541 + 1.4800000190734863 + + + + + diff --git a/17/omnigraffle/css-positioning-absolute2.graffle b/17/omnigraffle/css-positioning-absolute2.graffle new file mode 100644 index 0000000..cd759c0 --- /dev/null +++ b/17/omnigraffle/css-positioning-absolute2.graffle @@ -0,0 +1,6207 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 14:32:31 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{440.66666666666669, 338.66665649413972}, {13.096399999999999, 13.096399999999999}} + Class + ShapedGraphic + ID + 43554 + Shape + Circle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{731.26542099251321, 355.42728340805695}, {67, 14}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 43553 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Not to scale!} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{450.61082386813962, 312.46084086100257}, {67, 30.666666030883789}} + Class + ShapedGraphic + ID + 43552 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{447.27749460122811, 232.66666158040309}, {246.55546569824219, 113.79418182373047}} + Class + ShapedGraphic + ID + 43551 + Shape + Rectangle + Style + + fill + + Color + + b + 0.701961 + g + 0.701961 + r + 0.701961 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{514.69981012349854, 175.01551057034101}, {283.5656186930338, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43550 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Positioning Elements Absolutely} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{549.18631012349863, 210.6130105703408}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43537 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{549.18631012349863, 208.61201057034083}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43538 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{549.18631012349852, 211.04701057034077}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43539 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{549.18631012349852, 209.01501057034079}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43540 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43541 + Points + + {547.65431012349859, 208.51801057034078} + {547.6633101234986, 213.0700105703408} + {556.60631012349859, 213.0700105703408} + {556.59731012349857, 208.51801057034078} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{547.62331012349864, 208.48701057034083}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43542 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{546.31931012349844, 207.91301057034082}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43543 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{548.02931012349848, 205.28901057034079}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43544 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{546.31531012349876, 205.28901057034079}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43545 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{544.98731012349856, 203.98401057034079}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43546 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43547 + Points + + {547.65431012349859, 205.27101057034082} + {547.65431012349859, 200.3200105703408} + {556.59731012349857, 200.3200105703408} + {556.59731012349857, 205.27101057034082} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{547.65431012349859, 200.3200105703408}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43548 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43536 + + + Bounds + {{540.12631012349846, 196.1950105703408}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43549 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43535 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{520.81031012349831, 209.20801057034078}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43532 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{515.50271012349822, 200.6950105703408}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43533 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43531 + + + Bounds + {{509.85271012349835, 196.1950105703408}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43534 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43530 + + + Class + Group + Graphics + + + Bounds + {{460.04711012349844, 200.6950105703408}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43525 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{486.59581012349838, 200.6950105703408}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43526 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43528 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {477.80421012349836, 196.37871057034079} + {477.80421012349836, 217.01101057034083} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{451.58121012349841, 196.1950105703408}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43529 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43527 + + + ID + 43524 + + + Class + Group + Graphics + + + Bounds + {{577.65731012349863, 200.6950105703408}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43522 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{570.39931012349859, 196.1950105703408}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43523 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43521 + + + Class + Group + Graphics + + + Bounds + {{604.79731012349839, 200.07021057034081}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43518 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{604.79331012349849, 202.31101057034078}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43519 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{597.62831012349852, 203.65601057034081}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43520 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43517 + + + Bounds + {{600.07131012349862, 200.0075105703408}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43516 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{587.2110007159464, 196.04873473212464}, {211.05442810058594, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43515 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{492.69761012349835, 175.75171057034095}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43513 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{491.06081012349858, 175.01551057034095}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43514 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43512 + + + Class + Group + Graphics + + + Bounds + {{472.9578101234984, 175.75171057034095}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43510 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{471.32101012349835, 175.01551057034095}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43511 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43509 + + + Class + Group + Graphics + + + Bounds + {{453.21811012349838, 175.75171057034095}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43507 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{451.58121012349835, 175.01551057034095}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43508 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43506 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43503 + Points + + {795.96261726642899, 386.58749642351023} + {798.26542488361656, 384.31149642351039} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43504 + Points + + {792.47836921955411, 386.58749642351023} + {798.25541267658514, 380.86149642351057} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43505 + Points + + {788.88398689533562, 386.58749642351023} + {798.26542488361667, 377.30249642351032} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43502 + + + Bounds + {{438.33031051465377, 372.44500344758524}, {365.93511962890625, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43501 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{438.33031012349829, 169.19501057034114}, {365.93511962890625, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43500 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + AllowConnections + NO + Bounds + {{438.33030848067506, 169.19498858246573}, {365.93511962890625, 222.25001525878906}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43499 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{53.40123311835103, 218}, {13.096399999999999, 13.096399999999999}} + Class + ShapedGraphic + ID + 43498 + Shape + Circle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{352.66665411086421, 355.42728849432046}, {67, 14}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 43495 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Not to scale!} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{68.678723653157533, 232.66667683919283}, {67, 30.666666030883789}} + Class + ShapedGraphic + ID + 43489 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0.501961 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{68.678727719579186, 232.6666666666666}, {246.55546569824219, 113.79418182373047}} + Class + ShapedGraphic + ID + 43488 + Shape + Rectangle + Style + + fill + + Color + + b + 0.701961 + g + 0.701961 + r + 0.701961 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.10104324184942, 175.01551565660452}, {283.5656186930338, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Positioning Elements Absolutely} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{170.58754324184952, 210.61301565660432}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{170.58754324184952, 208.61201565660434}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{170.58754324184946, 211.04701565660429}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{170.58754324184946, 209.01501565660431}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43421 + Points + + {169.05554324184953, 208.51801565660429} + {169.06454324184952, 213.07001565660431} + {178.00754324184953, 213.07001565660431} + {177.99854324184952, 208.51801565660429} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{169.0245432418495, 208.48701565660434}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{167.72054324184953, 207.91301565660433}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{169.43054324184948, 205.28901565660431}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{167.71654324184954, 205.28901565660431}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{166.38854324184945, 203.9840156566043}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43427 + Points + + {169.05554324184953, 205.27101565660433} + {169.05554324184953, 200.32001565660431} + {177.99854324184952, 200.32001565660431} + {177.99854324184952, 205.27101565660433} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{169.05554324184948, 200.32001565660431}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{161.52754324184943, 196.19501565660431}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{142.21154324184937, 209.20801565660429}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{136.90394324184933, 200.69501565660431}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{131.25394324184941, 196.19501565660431}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{81.448343241849443, 200.69501565660431}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{107.99704324184944, 200.69501565660431}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {99.205443241849423, 196.3787156566043} + {99.205443241849423, 217.01101565660434} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{72.982443241849438, 196.19501565660431}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{199.05854324184938, 200.69501565660431}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{191.80054324184934, 196.19501565660431}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{226.19854324184942, 200.07021565660432}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{226.1945432418494, 202.3110156566043}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{219.02954324184944, 203.65601565660432}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{221.47254324184948, 200.00751565660431}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{208.61223383429729, 196.04873981838816}, {211.05442810058594, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{114.09884324184941, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{112.46204324184941, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{94.359043241849392, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{92.722243241849398, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{74.619343241849421, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{72.98244324184941, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43472 + Points + + {417.36385038478011, 386.58750150977374} + {419.66665800196756, 384.3115015097739} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43473 + Points + + {413.87960233790523, 386.58750150977374} + {419.65664579493614, 380.86150150977409} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43474 + Points + + {410.28522001368674, 386.58750150977374} + {419.66665800196779, 377.30250150977383} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43471 + + + Bounds + {{59.73154363300489, 372.44500853384875}, {365.93511962890625, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43475 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{59.731543241849408, 169.19501565660465}, {365.93511962890625, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + AllowConnections + NO + Bounds + {{59.731541599026116, 169.19499366872924}, {365.93511962890625, 222.25001525878906}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 14:35:23 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{59, 987}, {1148, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{25.333333333333332, 106.66666666666667}, {666, 415.99999999999994}} + Zoom + 1.5 + ZoomValues + + + Canvas 1 + 1.5 + 1.4700000286102295 + + + + + diff --git a/17/omnigraffle/css-positioning-float1.graffle b/17/omnigraffle/css-positioning-float1.graffle new file mode 100644 index 0000000..11832ba --- /dev/null +++ b/17/omnigraffle/css-positioning-float1.graffle @@ -0,0 +1,398 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 11:34:59 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{225.96083250880486, 229.62090698725311}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 26 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.8 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{167.1830344952389, 229.6209064255346}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 25 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.8 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{108.40525144200359, 229.62090530209787}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 24 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{49.627462236755818, 229.62092037364724}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 8 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{43.960795570089147, 205.62092037364724}, {455.33334350585938, 56.470588684082031}} + Class + ShapedGraphic + ID + 6 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <div> +\f1 Container} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 13:02:56 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{47, 937}, {1164, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-51, 109.80392362190554}, {663.39870521567934, 417.6470666333193}} + Zoom + 1.5299999713897705 + ZoomValues + + + Canvas 1 + 1.5299999713897705 + 1.3500000238418579 + + + + + diff --git a/17/omnigraffle/css-positioning-float2.graffle b/17/omnigraffle/css-positioning-float2.graffle new file mode 100644 index 0000000..0cfeebf --- /dev/null +++ b/17/omnigraffle/css-positioning-float2.graffle @@ -0,0 +1,586 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 13:03:03 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{439.36155797989545, 161.77246971028842}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 36 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.8 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{380.58375996632958, 161.77246914856994}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 35 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.8 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{108.40525620362293, 161.77244324310573}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 34 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{49.627466998375141, 161.77245831465513}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 33 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{43.960800331708469, 137.77245831465513}, {455.33334350585938, 3.724137544631958}} + Class + ShapedGraphic + ID + 32 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <div> +\f1 Container} + + TextPlacement + 0 + + + Bounds + {{439.36155321827607, 229.62093176928056}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 26 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.8 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{380.5837552047102, 229.62093120756205}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 25 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.8 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{108.40525144200359, 229.62090530209787}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 24 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{49.627462236755818, 229.62092037364724}, {53.620906829833984, 22}} + Class + ShapedGraphic + ID + 8 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 1 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <span>} + + + + Bounds + {{43.960795570089147, 205.62092037364724}, {455.33334350585938, 56.470588684082031}} + Class + ShapedGraphic + ID + 6 + Shape + Rectangle + Style + + fill + + Color + + b + 0.4 + g + 1 + r + 0.4 + + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;\f1\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <div> +\f1 Container} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 13:03:42 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{44, 958}, {1055, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-28, 102.72108643614024}, {616.32651861684144, 434.69386909068612}} + Zoom + 1.4700000286102295 + ZoomValues + + + Canvas 1 + 1.4700000286102295 + 1.440000057220459 + + + + + diff --git a/17/omnigraffle/css-positioning-relative.graffle b/17/omnigraffle/css-positioning-relative.graffle new file mode 100644 index 0000000..9ba9e41 --- /dev/null +++ b/17/omnigraffle/css-positioning-relative.graffle @@ -0,0 +1,3612 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-15 13:29:25 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{63.183641612921093, 226.82428505479615}, {13.096399999999999, 13.096399999999999}} + Class + ShapedGraphic + ID + 43498 + Shape + Circle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{234.35588622386382, 278.16158511968325}, {29.504383337853568, 29.504383337853568}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 18 + + ID + 43497 + Shape + Circle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs36 \cf0 2} + + + + Bounds + {{83.447525247787198, 248.65720019467875}, {29.504383337853568, 29.504383337853568}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 18 + + ID + 43496 + Shape + Circle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs36 \cf0 1} + + + + Bounds + {{439.63200648716611, 357.04697758049355}, {67, 14}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 43495 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Not to scale!} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{204.76580284365738, 237.25606368156252}, {36.241607666015625, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43494 + Rotation + 270 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 80px} + VerticalPad + 0 + + + + Bounds + {{133.9384849993024, 233.87248229980469}, {61.073825836181641, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43493 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 200px} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 43492 + Points + + {133.93849031850357, 232.87248714562762} + {212.46197974879993, 232.87248714562762} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + Pattern + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ID + 43491 + Points + + {210.38740464480236, 232.87247517248414} + {210.38740464480236, 262.3768585103378} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + Pattern + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{218.57117005652304, 262.37686015316103}, {61.073825836181641, 61.073825836181641}} + Class + ShapedGraphic + ID + 43489 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.501961 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{68.444532520271366, 232.87248174377743}, {61.073825836181641, 61.073825836181641}} + Class + ShapedGraphic + ID + 43488 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.501961 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.10104324184942, 175.01551565660452}, {357.63050415039061, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Positioning Elements Relatively} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{170.58754324184952, 210.61301565660432}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{170.58754324184952, 208.61201565660434}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{170.58754324184946, 211.04701565660429}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{170.58754324184946, 209.01501565660431}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43421 + Points + + {169.05554324184953, 208.51801565660429} + {169.06454324184952, 213.07001565660431} + {178.00754324184953, 213.07001565660431} + {177.99854324184952, 208.51801565660429} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{169.0245432418495, 208.48701565660434}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{167.72054324184953, 207.91301565660433}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{169.43054324184948, 205.28901565660431}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{167.71654324184954, 205.28901565660431}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{166.38854324184945, 203.9840156566043}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43427 + Points + + {169.05554324184953, 205.27101565660433} + {169.05554324184953, 200.32001565660431} + {177.99854324184952, 200.32001565660431} + {177.99854324184952, 205.27101565660433} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{169.05554324184948, 200.32001565660431}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{161.52754324184943, 196.19501565660431}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{142.21154324184937, 209.20801565660429}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{136.90394324184933, 200.69501565660431}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{131.25394324184941, 196.19501565660431}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{81.448343241849443, 200.69501565660431}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{107.99704324184944, 200.69501565660431}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {99.205443241849423, 196.3787156566043} + {99.205443241849423, 217.01101565660434} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{72.982443241849438, 196.19501565660431}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{199.05854324184938, 200.69501565660431}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{191.80054324184934, 196.19501565660431}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{226.19854324184942, 200.07021565660432}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{226.1945432418494, 202.3110156566043}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{219.02954324184944, 203.65601565660432}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{221.47254324184948, 200.00751565660431}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{211.05854324184943, 196.19501565660431}, {282.67300415039062, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{114.09884324184941, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{112.46204324184941, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{94.359043241849392, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{92.722243241849398, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{74.619343241849421, 175.75171565660446}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{72.98244324184941, 175.01551565660446}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43472 + Points + + {504.32922310613429, 386.80248767513825} + {506.63203072332175, 384.52648767513841} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43473 + Points + + {500.84497505925941, 386.80248767513825} + {506.62201851629032, 381.07648767513859} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43474 + Points + + {497.25059273504093, 386.80248767513825} + {506.63203072332198, 377.51748767513834} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43471 + + + Bounds + {{59.73154363300489, 372.44500853384875}, {450, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43475 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{59.731543241849408, 169.19501565660465}, {450, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + AllowConnections + NO + Bounds + {{59.731541599026087, 169.19501401378133}, {450, 222.25}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-15 14:21:13 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{22, 1000}, {1234, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-33, 146.24277295412747}, {627.16762314319476, 369.36415777742076}} + Zoom + 1.7300000190734863 + ZoomValues + + + Canvas 1 + 1.7300000190734863 + 1.6499999761581421 + + + + + diff --git a/17/omnigraffle/css-render.graffle b/17/omnigraffle/css-render.graffle new file mode 100644 index 0000000..c4b690a --- /dev/null +++ b/17/omnigraffle/css-render.graffle @@ -0,0 +1,3559 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-02 14:20:11 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.5} + + + element + LINETO + point + {-0.12722800000000001, -0.12722800000000001} + + + element + LINETO + point + {-0.5, -0.12722800000000001} + + + element + LINETO + point + {-0.5, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {-0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.5} + + + element + LINETO + point + {0.12722800000000001, 0.12722800000000001} + + + element + LINETO + point + {0.5, 0.12722800000000001} + + + element + LINETO + point + {0.5, -0.12722800000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.12722800000000001, -0.12722800000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{26, 245.70297949076891}, {450, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43489 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 Resulting Page Render} + VerticalPad + 0 + + + + Bounds + {{229.92561864764997, 154.19009202491154}, {42.14875900177887, 43}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43488 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs72 \cf0 +} + VerticalPad + 0 + + + + Bounds + {{39.250898624212823, 333.90142535483358}, {420.74910492304542, 38}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 16 + + ID + 43487 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green3\blue0;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs32 \cf2 Hello World!\ +Goodbye World!} + VerticalPad + 0 + + + + Bounds + {{102.36949939686764, 275.79438793110751}, {357.63050415039061, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43413 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Rango CSS Example} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{136.8559993968677, 311.39188793110731}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43417 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.8559993968677, 309.39088793110733}, {6.1442300000000003, 1.0068999999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43418 + Shape + Rectangle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{136.85599939686765, 311.82588793110727}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43419 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + Bounds + {{136.85599939686765, 309.79388793110729}, {0, 0}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43420 + Shape + Bezier + ShapeData + + UnitPoints + + {0, 0} + {0, 0} + {6.5719900000000004, 0} + {6.5719900000000004, 0} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + Join + 0 + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43421 + Points + + {135.32399939686772, 309.29688793110728} + {135.33299939686771, 313.8488879311073} + {144.27599939686772, 313.8488879311073} + {144.2669993968677, 309.29688793110728} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.29299939686769, 309.26588793110733}, {9.0050600000000003, 4.5829500000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43422 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, -0.5} + {0.49998500000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.46903600000000001, -0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {0.49313000000000001, 0.5} + {0.49313000000000001, 0.5} + {0.487595, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98899939686771, 308.69188793110732}, {11.613799999999999, 1.8446400000000001}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43423 + Shape + Bezier + ShapeData + + UnitPoints + + {0.50000199999999995, -0.5} + {0.50000199999999995, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, -0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {-0.499998, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, 0.5} + {0.50000199999999995, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{135.69899939686766, 306.06788793110729}, {0.91381500000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43424 + Shape + Bezier + ShapeData + + UnitPoints + + {0.5, 0.5} + {0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, 0.5} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{133.98499939686772, 306.06788793110729}, {0.91384200000000004, 0.91381500000000004}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43425 + Shape + Bezier + ShapeData + + UnitPoints + + {0.499969, 0.500031} + {0.499969, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, 0.500031} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {-0.500031, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, -0.499969} + {0.499969, 0.500031} + + + Style + + fill + + Color + + b + 0.999842 + g + 1 + r + 0.999899 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{132.65699939686763, 304.76288793110729}, {14.2774, 6.8155900000000003}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43426 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, 0.5} + {-0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, 0.5} + + + Style + + fill + + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43427 + Points + + {135.32399939686772, 306.04988793110732} + {135.32399939686772, 301.0988879311073} + {144.2669993968677, 301.0988879311073} + {144.2669993968677, 306.04988793110732} + + Style + + stroke + + Cap + 0 + Color + + b + 0.325799 + g + 0.325869 + r + 0.325818 + + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + + + + + Bounds + {{135.32399939686766, 301.0988879311073}, {8.9429800000000004, 4.1394700000000002}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43428 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48188799999999998, 0.5} + {0.48191800000000001, 0.49993100000000001} + {-0.49389300000000003, 0.41894500000000001} + {-0.49388500000000002, 0.41894500000000001} + {-0.49388500000000002, 0.418991} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + {0.5, -0.5} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + ID + 43416 + + + Bounds + {{127.79599939686761, 296.9738879311073}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43429 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43415 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{108.47999939686758, 309.98688793110728}, {2.3601700000000001, 3.4871799999999999}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43432 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.500004} + {-0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, -0.500004} + {0.5, 0.499996} + {0.5, 0.499996} + {0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, 0.499996} + {-0.5, -0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + VFlip + YES + + + Bounds + {{103.17239939686755, 301.4738879311073}, {12.699999999999999, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43433 + Shape + Bezier + ShapeData + + UnitPoints + + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.13215499999999999} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.33185900000000002, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.5} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {0.14601800000000001, -0.33348100000000003} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {4.76837e-07, -0.49166900000000002} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.5, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.049999200000000001} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {-0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.5} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.36283199999999999, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.5, 0.049999200000000001} + {0.33185900000000002, -0.13215499999999999} + + + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43431 + + + Bounds + {{97.522399396867627, 296.9738879311073}, {24, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43434 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43430 + + + Class + Group + Graphics + + + Bounds + {{47.716799396867657, 301.4738879311073}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43436 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{74.265499396867654, 301.4738879311073}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43437 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43439 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {56.4739, 57.499899999999997} + OrthogonalBarPosition + -1 + Points + + {65.473899396867637, 297.15758793110729} + {65.473899396867637, 317.78988793110733} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{39.250899396867652, 296.9738879311073}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43440 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43438 + + + ID + 43435 + + + Class + Group + Graphics + + + Bounds + {{165.32699939686756, 301.4738879311073}, {12, 12}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43443 + Shape + D2FA67C3-8C31-4D33-961B-D8932CCAA11A-1616-00004F369AF8FB9C + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{158.06899939686753, 296.9738879311073}, {25.633099999999999, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43444 + Shape + Bezier + ShapeData + + UnitPoints + + {0.49999300000000002, -0.5} + {0.5, -0.5} + {-0.304925, -0.5} + {-0.304925, -0.5} + {-0.41266399999999998, -0.5} + {-0.5, -0.393403} + {-0.5, -0.26190400000000003} + {-0.5, -0.26190400000000003} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.261905} + {-0.5, 0.393403} + {-0.41266399999999998, 0.5} + {-0.304925, 0.5} + {-0.304925, 0.5} + {0.5, 0.5} + {0.5, 0.5} + {0.50000100000000003, 0.5} + {0.49998999999999999, -0.5} + + + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43442 + + + Class + Group + Graphics + + + Bounds + {{192.46699939686761, 300.84908793110731}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43448 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{192.46299939686759, 303.08988793110728}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43449 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{185.29799939686762, 304.43488793110731}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43450 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43447 + + + Bounds + {{187.74099939686766, 300.7863879311073}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + Font + LucidaGrande + Size + 13 + + ID + 43451 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + Bounds + {{177.32699939686762, 296.9738879311073}, {282.67300415039062, 21}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43452 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + CornerRadius + 5 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.example.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{80.367299396867622, 276.53058793110745}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43460 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{78.730499396867629, 275.79438793110745}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43461 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43459 + + + Class + Group + Graphics + + + Bounds + {{60.62749939686762, 276.53058793110745}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43463 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{58.990699396867633, 275.79438793110745}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43464 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43462 + + + Class + Group + Graphics + + + Bounds + {{40.887799396867621, 276.53058793110745}, {9.2444299999999995, 5.3925799999999997}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43466 + Shape + Circle + Style + + fill + + Color + + a + 0.49 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0 + b + 1 + g + 1 + r + 1 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{39.250899396867624, 275.79438793110745}, {12.5185, 12.5185}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43467 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + ID + 43465 + + + Class + Group + Graphics + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43472 + Points + + {470.59767926115256, 487.58135994964124} + {472.90048687834002, 485.3053599496414} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43473 + Points + + {467.11343121427768, 487.58135994964124} + {472.8904746713086, 481.85535994964158} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + Class + LineGraphic + FontInfo + + Font + Helvetica + Size + 10 + + ID + 43474 + Points + + {463.5190488900592, 487.58135994964124} + {472.90048687834025, 478.29635994964133} + + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + TailArrow + 0 + + + + + ID + 43471 + + + Bounds + {{25.999999788023104, 473.22388080835179}, {450, 19}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43475 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + + + + + Bounds + {{25.999999396867622, 269.97388793110764}, {450, 55}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43476 + Shape + Rectangle + Style + + fill + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{25.999999396867622, 269.97388793110764}, {450, 222.25}} + Class + ShapedGraphic + FontInfo + + Font + LucidaGrande + Size + 13 + + ID + 43486 + Shape + Rectangle + Style + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + + + + Bounds + {{268, 108}, {208, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 36 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 CSS} + VerticalPad + 0 + + + + Bounds + {{26, 108}, {208, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 35 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 HTML Markup} + VerticalPad + 0 + + + + Bounds + {{268, 134}, {208, 92}} + Class + ShapedGraphic + ID + 34 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;\red0\green0\blue255;\red64\green128\blue0;\red128\green0\blue64; +} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf2 h1\cf0 \{\ + \cf3 font-size\cf0 : \cf4 16pt\cf0 ;\ + \cf3 font-style\cf0 : \cf4 italic\cf0 ;\ + \cf3 text-align\cf0 : \cf4 center\cf0 ;\ + \cf3 color\cf0 : \cf4 #FF0000\cf0 ;\ +\}} + + TextPlacement + 0 + + + Bounds + {{26, 134}, {208, 92}} + Class + ShapedGraphic + ID + 33 + Shape + Rectangle + Style + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 <html>\ +<body>\ + <h1>Hello World!</h1>\ + <h1>Goodbye World!</h1>\ +</body>\ +</html>} + + TextPlacement + 0 + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-02 16:39:13 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{105, 999}, {994, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-69, 3.3057850197473631}, {698.34708542163048, 528.09915690464118}} + Zoom + 1.2100000381469727 + ZoomValues + + + Canvas 1 + 1.2100000381469727 + 1.1499999761581421 + + + + + diff --git a/17/omnigraffle/git-sequence.graffle b/17/omnigraffle/git-sequence.graffle new file mode 100644 index 0000000..6f44bd8 --- /dev/null +++ b/17/omnigraffle/git-sequence.graffle @@ -0,0 +1,1371 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-09-20 12:09:06 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{173.53158569335938, 618}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 33951 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 5} + + + + Bounds + {{173.53158569335938, 514}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 33950 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 4} + + + + Bounds + {{173.53158569335938, 412}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 33949 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 3} + + + + Bounds + {{247.76579284667969, 330}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 33948 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 2} + + + + Bounds + {{229.06040954589844, 201.5}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 9 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 1} + + + + Class + LineGraphic + Head + + ID + 33944 + + ID + 33947 + Points + + {244.99998372505232, 525.00000107288361} + {271, 490} + {396, 493} + {416.65573770491801, 538} + + Style + + stroke + + HeadArrow + 0 + Legacy + + LineType + 1 + Pattern + 2 + TailArrow + 0 + Width + 2 + + + Tail + + ID + 33941 + Position + 0.91666668653488159 + + + + Bounds + {{189.23077392578125, 530}, {111.5384521484375, 48}} + Class + ShapedGraphic + FontInfo + + Font + Courier-Bold + Size + 14 + + ID + 33939 + Shape + Rectangle + Style + + fill + + Color + + b + 0.917863 + g + 0.917863 + r + 0.917863 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.891814 + g + 0.891814 + r + 0.891814 + + + shadow + + ShadowVector + {0, 2} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 git pull} + + + + Class + LineGraphic + Head + + ID + 33944 + + ID + 33946 + Points + + {301.26922607421875, 554} + {376, 554} + + Style + + stroke + + HeadArrow + Arrow + Legacy + + Pattern + 2 + TailArrow + 0 + Width + 2 + + + Tail + + ID + 33939 + + + + Bounds + {{376, 538}, {96, 32}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 33944 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 10 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs28 \cf0 git merge\ +git stash} + VerticalPad + 0 + + Wrap + NO + + + Class + LineGraphic + Head + + ID + 33942 + + ID + 33943 + Points + + {245.00001177194406, 578.5} + {245.00001177194406, 632.5} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + Width + 3 + + + Tail + + ID + 33939 + + + + Bounds + {{189.23077392578125, 633}, {111.5384521484375, 48}} + Class + ShapedGraphic + FontInfo + + Font + Courier-Bold + Size + 14 + + ID + 33942 + Shape + Rectangle + Style + + fill + + Color + + b + 0.917863 + g + 0.917863 + r + 0.917863 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.891814 + g + 0.891814 + r + 0.891814 + + + shadow + + ShadowVector + {0, 2} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 git push} + + + + Bounds + {{189.23077392578125, 427}, {111.5384521484375, 48}} + Class + ShapedGraphic + FontInfo + + Font + Courier-Bold + Size + 14 + + ID + 33937 + Shape + Rectangle + Style + + fill + + Color + + b + 0.917863 + g + 0.917863 + r + 0.917863 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.891814 + g + 0.891814 + r + 0.891814 + + + shadow + + ShadowVector + {0, 2} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 git commit} + + + + Class + LineGraphic + Head + + ID + 33939 + + ID + 33941 + Points + + {244.99998372505232, 475.5} + {244.99998372505232, 529.5} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + Width + 3 + + + Tail + + ID + 33937 + + + + Class + LineGraphic + Head + + ID + 33937 + + ID + 33938 + Points + + {245.00001343977647, 369.75340742999924} + {245.00001343977647, 426.50000000790737} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + Width + 3 + + + Tail + + ID + 33879 + + + + Class + LineGraphic + Head + + ID + 33934 + + ID + 33936 + Points + + {170.43032105362596, 318.99998428205294} + {114.00001525878906, 318.99998428205294} + + Style + + stroke + + HeadArrow + Arrow + Legacy + + Pattern + 2 + TailArrow + 0 + Width + 2 + + + Tail + + ID + 33879 + + + + Class + LineGraphic + ID + 33935 + Points + + {321.37339281154766, 319} + {376, 319} + + Style + + stroke + + HeadArrow + Arrow + Legacy + + Pattern + 2 + TailArrow + 0 + Width + 2 + + + Tail + + ID + 33879 + + + + Bounds + {{9.0000152587890625, 310.5}, {105, 17}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 33934 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 10 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs28 \cf0 git status} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{376, 287}, {79, 64}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 33931 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 10 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs28 \cf0 git add\ +git mv\ +git cp\ +git rm} + VerticalPad + 0 + + Wrap + NO + + + Bounds + {{279.64498901367188, 163}, {111.5384521484375, 48}} + Class + ShapedGraphic + FontInfo + + Font + Courier-Bold + Size + 14 + + ID + 33920 + Shape + Rectangle + Style + + fill + + Color + + b + 0.917863 + g + 0.917863 + r + 0.917863 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.891814 + g + 0.891814 + r + 0.891814 + + + shadow + + ShadowVector + {0, 2} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 git pull} + + + + Bounds + {{100, 163}, {111.5384521484375, 48}} + Class + ShapedGraphic + FontInfo + + Font + Courier-Bold + Size + 14 + + ID + 33886 + Shape + Rectangle + Style + + fill + + Color + + b + 0.917863 + g + 0.917863 + r + 0.917863 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.891814 + g + 0.891814 + r + 0.891814 + + + shadow + + ShadowVector + {0, 2} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf0 git clone} + + + + Class + LineGraphic + Head + + ID + 33879 + + ID + 33929 + Points + + {321.94583912419387, 211.4378994599372} + {304, 244} + {280.1288077247994, 274.34473986698367} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + Tail + + ID + 33920 + + + + Class + LineGraphic + Head + + ID + 33879 + + ID + 33928 + Points + + {168.96279038475976, 211.43998301876758} + {186, 243} + {210.88427481881754, 275.05431596059509} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + Tail + + ID + 33886 + + + + Bounds + {{158.99635314941406, 266}, {172.00730895996094, 106}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica + Size + 14 + + ID + 33879 + Shape + Cloud + Style + + shadow + + ShadowVector + {0, 2} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs28 \cf0 Do some work!} + + + + Bounds + {{219, 172.5}, {52, 29}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 33921 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs48 \cf0 OR} + VerticalPad + 0 + + + + Bounds + {{217, 186}, {2, 12}} + Class + ShapedGraphic + FitText + YES + Flow + Resize + ID + 33918 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + VerticalPad + 0 + + Wrap + NO + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-20 13:13:16 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{295, 0}, {694, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 144}, {559, 639}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/data.plist b/17/omnigraffle/konigi_wireframe_stencils.gstencil/data.plist new file mode 100644 index 0000000..9a97b5d Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/data.plist differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf new file mode 100644 index 0000000..aea82d1 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image1.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf new file mode 100644 index 0000000..c1480b5 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image10.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf new file mode 100644 index 0000000..01393f9 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image11.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf new file mode 100644 index 0000000..4637282 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image12.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf new file mode 100644 index 0000000..3784c49 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image13.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf new file mode 100644 index 0000000..95e3d4a Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image14.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf new file mode 100644 index 0000000..065ce21 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image15.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf new file mode 100644 index 0000000..18a4167 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image16.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf new file mode 100644 index 0000000..bd3ed88 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image17.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf new file mode 100644 index 0000000..6780f34 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image18.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf new file mode 100644 index 0000000..dd96468 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image19.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf new file mode 100644 index 0000000..df576cd Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image2.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf new file mode 100644 index 0000000..af6d5ef Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image20.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf new file mode 100644 index 0000000..84a7ccc Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image21.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf new file mode 100644 index 0000000..b9b2525 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image22.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf new file mode 100644 index 0000000..43bc31d Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image23.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf new file mode 100644 index 0000000..08cfa53 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image24.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf new file mode 100644 index 0000000..400a487 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image25.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf new file mode 100644 index 0000000..6436e77 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image26.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf new file mode 100644 index 0000000..9f0d1dd Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image3.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf new file mode 100644 index 0000000..cdeb34d Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image4.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf new file mode 100644 index 0000000..44fcb78 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image5.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf new file mode 100644 index 0000000..488e97d Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image6.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf new file mode 100644 index 0000000..7d186a2 Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image7.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf new file mode 100644 index 0000000..7b995dd Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image8.pdf differ diff --git a/17/omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf new file mode 100644 index 0000000..ecc91cc Binary files /dev/null and b/17/omnigraffle/konigi_wireframe_stencils.gstencil/image9.pdf differ diff --git a/17/omnigraffle/rango-form-steps.graffle/data.plist b/17/omnigraffle/rango-form-steps.graffle/data.plist new file mode 100644 index 0000000..db77cc7 --- /dev/null +++ b/17/omnigraffle/rango-form-steps.graffle/data.plist @@ -0,0 +1,594 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118, 783}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-08-06 14:49:31 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{658.32765291742817, 227.37587275084792}, {290, 22}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 28 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs36 \cf0 Success! Category added!} + VerticalPad + 0 + + + + Bounds + {{612.65828035883408, 222.43627994136293}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 27 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 2} + + + + Bounds + {{658.32761428348988, 183.42056688984974}, {290, 22}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 26 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs36 \cf0 Enter a new category and submit} + VerticalPad + 0 + + + + Bounds + {{612.65821120731778, 178.48100840251152}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 25 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 1} + + + + Bounds + {{496.20251816791023, 178.48100781039628}, {50, 50}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 36 + + ID + 20 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs72 \cf1 2} + + + + Bounds + {{314.55694580078125, 215.9240448223899}, {50, 50}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 36 + + ID + 6 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs72 \cf1 1} + + + + Bounds + {{364.55695212336263, 35.518882677013828}, {491.04824829101562, 302.30401611328125}} + Class + ShapedGraphic + ID + 17 + ImageID + 6 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{44.999997196891385, 5.1708770404162294}, {514, 363}} + Class + ShapedGraphic + ID + 35 + ImageID + 11 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 12 + ImageLinkBack + + + + + ImageList + + image11.png + image6.png + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-08-06 15:27:27 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595, 842} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{121, 978}, {1159, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-89, -12}, {1296.2024964386226, 807.59491477328243}} + Zoom + 0.79000002145767212 + ZoomValues + + + Canvas 1 + 0.79000002145767212 + 0.81000000238418579 + + + + + diff --git a/17/omnigraffle/rango-form-steps.graffle/image11.png b/17/omnigraffle/rango-form-steps.graffle/image11.png new file mode 100644 index 0000000..e01d5f9 Binary files /dev/null and b/17/omnigraffle/rango-form-steps.graffle/image11.png differ diff --git a/17/omnigraffle/rango-form-steps.graffle/image6.png b/17/omnigraffle/rango-form-steps.graffle/image6.png new file mode 100644 index 0000000..e3d865a Binary files /dev/null and b/17/omnigraffle/rango-form-steps.graffle/image6.png differ diff --git a/17/omnigraffle/rango-links.graffle/data.plist b/17/omnigraffle/rango-links.graffle/data.plist new file mode 100644 index 0000000..172226c --- /dev/null +++ b/17/omnigraffle/rango-links.graffle/data.plist @@ -0,0 +1,784 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-08-01 14:57:26 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{733, 559.81878662109375}, {290, 22}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 14 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs36 \cf0 Read up on sport!} + VerticalPad + 0 + + + + Bounds + {{733, 508.9395751953125}, {290, 22}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 13 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs36 \cf0 Click +\i BBC Sport} + VerticalPad + 0 + + + + Bounds + {{733, 458.06039428710938}, {290, 22}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 12 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs36 \cf0 Click on the sport category} + VerticalPad + 0 + + + + Bounds + {{687.33068847656273, 554.87921105455234}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 11 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\li120\fi-120\pardirnatural\qc + +\f0\b\fs36 \cf1 3} + + + + Bounds + {{687.33064341705108, 503.99999999999955}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 10 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\li160\fi-160\pardirnatural\qc + +\f0\b\fs36 \cf1 2} + + + + Bounds + {{687.33062744140625, 453.12080147762447}, {31.879194630872473, 31.879194630872501}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 18 + + ID + 9 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs36 \cf1 1} + + + + Bounds + {{262, 406}, {50, 50}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 36 + + ID + 8 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\li120\fi-120\pardirnatural\qc + +\f0\b\fs72 \cf1 3} + + + + Bounds + {{509.28997802734375, 307}, {50, 50}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 36 + + ID + 7 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\li160\fi-160\pardirnatural\qc + +\f0\b\fs72 \cf1 2} + + + + Bounds + {{224, 206}, {50, 50}} + Class + ShapedGraphic + FontInfo + + Color + + b + 1 + g + 1 + r + 1 + + Font + Helvetica-Bold + Size + 36 + + ID + 6 + Shape + Circle + Style + + fill + + Color + + b + 0.744071 + g + 0.171028 + r + 0.0348818 + + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\fi40\pardirnatural\qc + +\f0\b\fs72 \cf1 1} + + + + Bounds + {{118.99999999999989, 361}, {568.33064516129036, 278}} + Class + ShapedGraphic + ID + 5 + ImageID + 4 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{380, 207}, {711.8485107421875, 278}} + Class + ShapedGraphic + ID + 4 + ImageID + 3 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{63, 33}, {1014, 396}} + Class + ShapedGraphic + ID + 3 + ImageID + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 5 + ImageLinkBack + + + + + + ImageList + + image4.png + image3.png + image1.png + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-08-01 15:05:38 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{1, 897}, {1226, 939}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{26, -1}, {1091, 785}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/rango-links.graffle/image1.png b/17/omnigraffle/rango-links.graffle/image1.png new file mode 100644 index 0000000..3fef8c9 Binary files /dev/null and b/17/omnigraffle/rango-links.graffle/image1.png differ diff --git a/17/omnigraffle/rango-links.graffle/image3.png b/17/omnigraffle/rango-links.graffle/image3.png new file mode 100644 index 0000000..68b9cdb Binary files /dev/null and b/17/omnigraffle/rango-links.graffle/image3.png differ diff --git a/17/omnigraffle/rango-links.graffle/image4.png b/17/omnigraffle/rango-links.graffle/image4.png new file mode 100644 index 0000000..7248d7e Binary files /dev/null and b/17/omnigraffle/rango-links.graffle/image4.png differ diff --git a/17/omnigraffle/rango-picture.graffle/data.plist b/17/omnigraffle/rango-picture.graffle/data.plist new file mode 100644 index 0000000..cbad3d3 --- /dev/null +++ b/17/omnigraffle/rango-picture.graffle/data.plist @@ -0,0 +1,354 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118, 783}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-07-26 20:34:45 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{237.1851758397664, 369.46293931390119}, {157.40740966796875, 68}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 7 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 2 + Pad + 0 + RTFD + + BAtzdHJlYW10eXBlZIHoA4QBQISEhBJOU0F0dHJpYnV0 + ZWRTdHJpbmcAhIQITlNPYmplY3QAhZKEhIQITlNTdHJp + bmcBlIQBK0tSYW5nbyBpbWFnZSBob3N0ZWQgb24gZmxp + Y2tyIHVuZGVyIENyZWF0aXZlIENvbW1vbnMgbGljZW5j + ZSAtIHVzZXIgZWxicmFnb26GhAJpSQEWkoSEhAxOU0Rp + Y3Rpb25hcnkAlIQBaQKShJaWEE5TUGFyYWdyYXBoU3R5 + bGWGkoSEhBBOU1BhcmFncmFwaFN0eWxlAJSEBENDQFMB + AISEhAdOU0FycmF5AJSZDJKEhIQJTlNUZXh0VGFiAJSE + AkNmAByGkoSfngA4hpKEn54AVIaShJ+eAHCGkoSfngCB + jACGkoSfngCBqACGkoSfngCBxACGkoSfngCB4ACGkoSf + ngCB/ACGkoSfngCBGAGGkoSfngCBNAGGkoSfngCBUAGG + hoEACIQEWzFmXYPNzEw9hpKElpYGTlNGb250hpKEhIQG + TlNGb250HpSZHIQFWzI4Y10GAAAAFAAAAP/+SABlAGwA + dgBlAHQAaQBjAGEAhAFmDoQBYwCjAaMAowCGhpcCBZKE + mJkDkoSWlgdOU0NvbG9yhpKEhIQHTlNDb2xvcgCUowKE + BGZmZmaD3txcPoPIxsY+g93bWz8BhpKZkpqSq5KErZko + hAVbNDBjXQYAAAAeAAAA//5IAGUAbAB2AGUAdABpAGMA + YQAtAEIAbwBsAGQAAACiDqMAowGjAKMAhoaXAwGShJiZ + A5KvkoSxowKlg/PxcT+DhYQEPoOFhAQ/AYaSmZKakquS + soaXBAGShJiZApKZkpqSq5KyhpcBJpcECIY= + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red43\green69\blue220;\red228\green0\blue117;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qr + +\f0\fs28 \cf0 Rango image hosted on +\b \cf2 flick\cf3 r\cf0 +\b0 under Creative Commons licence - user +\b elbragon} + VerticalPad + 0 + + + + Bounds + {{401.51850288149922, 151.85184581780209}, {380.97451782226562, 285.611083984375}} + Class + ShapedGraphic + ID + 6 + ImageID + 4 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{46.387096402052165, 66.064517989739031}, {702, 481}} + Class + ShapedGraphic + ID + 5 + ImageID + 3 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 5 + ImageLinkBack + + + + + ImageList + + image4.tiff + image3.pdf + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-10-02 14:15:04 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595, 842} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{4, 0}, {1090, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{26.851850784855166, 0}, {871.29626167409356, 577.77775481895253}} + Zoom + 1.0800000429153442 + ZoomValues + + + Canvas 1 + 1.0800000429153442 + 1.0499999523162842 + + + + + diff --git a/17/omnigraffle/rango-picture.graffle/image3.pdf b/17/omnigraffle/rango-picture.graffle/image3.pdf new file mode 100644 index 0000000..f0b3464 Binary files /dev/null and b/17/omnigraffle/rango-picture.graffle/image3.pdf differ diff --git a/17/omnigraffle/rango-picture.graffle/image4.tiff b/17/omnigraffle/rango-picture.graffle/image4.tiff new file mode 100644 index 0000000..1a6df23 Binary files /dev/null and b/17/omnigraffle/rango-picture.graffle/image4.tiff differ diff --git a/17/omnigraffle/rango-site-with-pic.graffle/data.plist b/17/omnigraffle/rango-site-with-pic.graffle/data.plist new file mode 100644 index 0000000..d20655b --- /dev/null +++ b/17/omnigraffle/rango-site-with-pic.graffle/data.plist @@ -0,0 +1,328 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-07-27 16:37:18 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{509.43398976419502, 487.84166510788071}, {157.40740966796875, 68}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 7 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + RTFD + + BAtzdHJlYW10eXBlZIHoA4QBQISEhBJOU0F0dHJpYnV0 + ZWRTdHJpbmcAhIQITlNPYmplY3QAhZKEhIQITlNTdHJp + bmcBlIQBK0tSYW5nbyBpbWFnZSBob3N0ZWQgb24gZmxp + Y2tyIHVuZGVyIENyZWF0aXZlIENvbW1vbnMgbGljZW5j + ZSAtIHVzZXIgZWxicmFnb26GhAJpSQEWkoSEhAxOU0Rp + Y3Rpb25hcnkAlIQBaQKShJaWEE5TUGFyYWdyYXBoU3R5 + bGWGkoSEhBdOU011dGFibGVQYXJhZ3JhcGhTdHlsZQCE + hBBOU1BhcmFncmFwaFN0eWxlAJSEBENDQFMAAISEhA5O + U011dGFibGVBcnJheQCEhAdOU0FycmF5AJSZDJKEhIQJ + TlNUZXh0VGFiAJSEAkNmAByGkoShoAA4hpKEoaAAVIaS + hKGgAHCGkoShoACBjACGkoShoACBqACGkoShoACBxACG + koShoACB4ACGkoShoACB/ACGkoShoACBGAGGkoShoACB + NAGGkoShoACBUAGGhoEACIQEWzFmXYPNzEw9hpKElpYG + TlNGb250hpKEhIQGTlNGb250HpSZHIQFWzI4Y10GAAAA + FAAAAP/+SABlAGwAdgBlAHQAaQBjAGEAhAFmDoQBYwCl + AaUApQCGhpcCBZKEmJkDkoSWlgdOU0NvbG9yhpKEhIQH + TlNDb2xvcgCUpQKEBGZmZmaD3txcPoPIxsY+g93bWz8B + hpKZkoSbnAAAhJ6ZDJKgkqKSo5KkkqWSppKnkqiSqZKq + kquSrIaBAAihg83MTD2Gkq2ShK+ZKIQFWzQwY10GAAAA + HgAAAP/+SABlAGwAdgBlAHQAaQBjAGEALQBCAG8AbABk + AAAApA6lAKUBpQClAIaGlwMBkoSYmQOSsZKEs6UCp4Pz + 8XE/g4WEBD6DhYQEPwGGkpmShJucAACEnpkMkqCSopKj + kqSSpZKmkqeSqJKpkqqSq5KshoEACKGDzcxMPYaSrZK2 + hpcEAZKEmJkCkpmShJucAACEnpkMkqCSopKjkqSSpZKm + kqeSqJKpkqqSq5KshoEACKGDzcxMPYaSrZK2hpcBJpcE + CIY= + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red43\green69\blue220;\red228\green0\blue117;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs28 \cf0 Rango image hosted on +\b \cf2 flick\cf3 r\cf0 +\b0 under Creative Commons licence - user +\b elbragon} + VerticalPad + 0 + + + + Bounds + {{103.33332520944077, 136.44443714471481}, {980.27225214352791, 492.13668168838342}} + Class + ShapedGraphic + ID + 3 + ImageID + 1 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 2 + ImageLinkBack + + + + ImageList + + image1.png + + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-07-27 16:38:09 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{-58, 895}, {694, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{39.285714118456355, -165}, {998.21428146441372, 1114.2857095416712}} + Zoom + 0.56000000238418579 + ZoomValues + + + Canvas 1 + 0.56000000238418579 + 0.57999998331069946 + + + + + diff --git a/17/omnigraffle/rango-site-with-pic.graffle/image1.png b/17/omnigraffle/rango-site-with-pic.graffle/image1.png new file mode 100644 index 0000000..acf86db Binary files /dev/null and b/17/omnigraffle/rango-site-with-pic.graffle/image1.png differ diff --git a/17/omnigraffle/rango-template-inheritance.graffle b/17/omnigraffle/rango-template-inheritance.graffle new file mode 100644 index 0000000..18ca069 --- /dev/null +++ b/17/omnigraffle/rango-template-inheritance.graffle @@ -0,0 +1,901 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118.5799560546875, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-08-28 13:03:59 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{309.34307502123863, 390.88294978419975}, {124, 36}} + Class + ShapedGraphic + ID + 46 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 add_page.html} + VerticalPad + 0 + + + + Bounds + {{168.6568989230102, 390.88295296293239}, {124, 36}} + Class + ShapedGraphic + ID + 45 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 add_category.html} + VerticalPad + 0 + + + + Bounds + {{450.02924401413748, 390.88296569684587}, {124, 36}} + Class + ShapedGraphic + ID + 47 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 category.html} + VerticalPad + 0 + + + + Bounds + {{27.970733289237142, 390.88296810526128}, {124, 36}} + Class + ShapedGraphic + ID + 44 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 about.html} + VerticalPad + 0 + + + + Bounds + {{450.02928932466762, 456.40850172084191}, {124, 36}} + Class + ShapedGraphic + ID + 51 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 restricted.html} + VerticalPad + 0 + + + + Bounds + {{309.34309392003593, 456.4085020119872}, {124, 36}} + Class + ShapedGraphic + ID + 50 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 register.html} + VerticalPad + 0 + + + + Bounds + {{168.65690036452276, 456.40850248310869}, {124, 36}} + Class + ShapedGraphic + ID + 49 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 login.html} + VerticalPad + 0 + + + + Bounds + {{27.970737035440646, 456.40850830078125}, {124, 36}} + Class + ShapedGraphic + ID + 48 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 index.html} + VerticalPad + 0 + + + + Class + LineGraphic + Head + + ID + 57 + Position + 0.33414444327354431 + + ID + 64 + Points + + {371.35107721095602, 455.90856575067636} + {371.53284834360136, 444.52554321289062} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 50 + Info + 2 + + + + Class + LineGraphic + Head + + ID + 58 + Position + 0.3355734646320343 + + ID + 63 + Points + + {230.65690200357753, 455.90850248713235} + {230.65693931816526, 444.52554321289062} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 49 + Info + 2 + + + + Class + LineGraphic + Head + + ID + 52 + Position + 0.33828115463256836 + + ID + 62 + Points + + {371.35105897124919, 390.38301354110268} + {371.53284497363813, 379} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 46 + Info + 2 + + + + Class + LineGraphic + Head + + ID + 53 + Position + 0.33145123720169067 + + ID + 61 + Points + + {230.65690039484844, 390.38295295145343} + {230.65693390257854, 379} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 45 + Info + 2 + + + + Class + LineGraphic + ID + 60 + Points + + {511.54002298321234, 457.40851131815191} + {511.35031127929688, 445.52554321289062} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ID + 59 + Points + + {89.660445755421591, 456.40849838986622} + {89.470734051506128, 444.52553028460494} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ID + 58 + Points + + {301.36863696850173, 444.52554321289062} + {90.649658553823386, 444.52554321289062} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 57 + + + + Class + LineGraphic + ID + 57 + Points + + {301.36863696850173, 444.52554321289062} + {511.35031641142558, 444.52554321289062} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ID + 55 + Points + + {512.02924401413748, 390.38296571135061} + {512.02924401413748, 379} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 47 + Info + 2 + + + + Class + LineGraphic + Head + + ID + 53 + Info + 1 + + ID + 54 + Points + + {89.970733289237145, 390.88296810526128} + {89.781021585321696, 379} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 44 + + + + Class + LineGraphic + ID + 53 + Points + + {300.5, 379} + {89.781021585321696, 379} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + Tail + + ID + 52 + + + + Class + LineGraphic + ID + 52 + Points + + {300.5, 379} + {510.48167944292391, 379} + + Style + + stroke + + HeadArrow + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ID + 27 + Points + + {300.5, 444.52554589805624} + {300.5, 322} + + Style + + stroke + + HeadArrow + UMLInheritance + Legacy + + LineType + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{239, 286}, {124, 36}} + Class + ShapedGraphic + ID + 10 + Magnets + + {0, 1} + {0, -1} + {1, 0} + {-1, 0} + + Shape + Rectangle + Style + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 base.html} + VerticalPad + 0 + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-09-28 16:17:07 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{4, 0}, {1276, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 85.401459556769424}, {822.62773436306952, 455.47445096943693}} + Zoom + 1.3700000047683716 + ZoomValues + + + Canvas 1 + 1.3700000047683716 + 1.4900000095367432 + + + + + diff --git a/17/omnigraffle/relational-schema-basic-models.graffle b/17/omnigraffle/relational-schema-basic-models.graffle new file mode 100644 index 0000000..66534ee --- /dev/null +++ b/17/omnigraffle/relational-schema-basic-models.graffle @@ -0,0 +1,563 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {559.28997802734375, 782.8900146484375}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-07-29 12:38:03 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{159.42147110481986, 203.13221820853897}, {190.16527622268012, 13}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 42 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs22 \cf0 Contains} + VerticalPad + 0 + + + + Bounds + {{331.43291664123535, 201.13221740722656}, {18.153844833374023, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 41 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 \uc0\u8734 } + VerticalPad + 0 + + + + Bounds + {{159.42147827148438, 201.13221377310668}, {18.153844833374023, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 40 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs28 \cf0 1} + VerticalPad + 0 + + + + Bounds + {{69.421485414694629, 218.13222496939977}, {90, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 35 + Shape + Rectangle + Style + + fill + + GradientCenter + {-0.29411799999999999, -0.264706} + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720 + +\f0\fs24 \cf0 name} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{69.421485414694629, 204.13222496939977}, {90, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 34 + Shape + Rectangle + Style + + fill + + GradientCenter + {-0.29411799999999999, -0.264706} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 Category} + VerticalPad + 0 + + TextPlacement + 0 + + + Class + TableGroup + Graphics + + + Bounds + {{349.58676583828367, 183.13221471940435}, {89.999992370605469, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 37 + Shape + Rectangle + Style + + fill + + GradientCenter + {-0.29411799999999999, -0.264706} + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc + +\f0\b\fs24 \cf0 Page} + VerticalPad + 0 + + TextPlacement + 0 + + + Bounds + {{349.58676583828367, 197.13221471940435}, {89.999992370605469, 56}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 38 + Shape + Rectangle + Style + + fill + + GradientCenter + {-0.29411799999999999, -0.264706} + + + Text + + Align + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720 + +\f0\fs24 \cf0 category\ +title\ +url\ +views} + VerticalPad + 0 + + TextPlacement + 0 + + + GridH + + 37 + 38 + + + ID + 36 + + + AllowConnections + NO + AllowLabelDrop + + AllowToConnect + + Class + LineGraphic + ID + 12 + Points + + {147.95918079377813, 218.13221814184425} + {369.53847736719854, 218.13221814184425} + + Style + + stroke + + Cap + 0 + HeadArrow + 0 + Join + 0 + Legacy + + TailArrow + 0 + Width + 2 + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 1 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-07-29 16:02:36 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595.28997802734375, 841.8900146484375} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{242, 934}, {1039, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{-62, 0}, {683.84617892948211, 491.53847956798552}} + Zoom + 1.2999999523162842 + ZoomValues + + + Canvas 1 + 1.2999999523162842 + 1.4800000190734863 + + + + + diff --git a/17/omnigraffle/url-chain.graffle b/17/omnigraffle/url-chain.graffle new file mode 100644 index 0000000..227edb9 --- /dev/null +++ b/17/omnigraffle/url-chain.graffle @@ -0,0 +1,541 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118, 783}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-07-24 13:35:41 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + GraphDocumentVersion + 8 + GraphicsList + + + Class + LineGraphic + Head + + ID + 6 + + ID + 12 + Points + + {515.5, 241.50001686861739} + {543.5, 241.50001686861739} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 5 + + + + Class + LineGraphic + Head + + ID + 5 + + ID + 11 + Points + + {315.49999873428334, 241.30642066809369} + {343.50000224055725, 241.24339483028098} + + Style + + stroke + + HeadArrow + FilledArrow + Legacy + + TailArrow + 0 + + + Tail + + ID + 4 + + + + Bounds + {{544, 197}, {171, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 10 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Rango +\f1\i0\b urls.py} + VerticalPad + 0 + + + + Bounds + {{344, 197}, {171, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 9 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fmodern\fcharset0 CourierNewPS-BoldMT;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Project configuration +\f1\i0\b urls.py} + VerticalPad + 0 + + + + Bounds + {{144, 197}, {171, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 8 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\fs24 \cf0 Domain name} + VerticalPad + 0 + + + + Bounds + {{544, 223.5}, {171, 36}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica + Size + 12 + + ID + 6 + Shape + Rectangle + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 index} + + + + Bounds + {{344, 223.5}, {171, 36}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica + Size + 12 + + ID + 5 + Shape + Rectangle + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 rango/} + + + + Bounds + {{144, 223.5}, {171, 36}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica + Size + 12 + + ID + 4 + Shape + Rectangle + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf0 http://www.servername.com/} + + + + Bounds + {{144, 181}, {571, 85}} + Class + ShapedGraphic + ID + 13 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 1 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-10-02 13:26:36 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595, 842} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{221, 844}, {971, 778}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, 0}, {822, 624}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/wireframe-cat.graffle b/17/omnigraffle/wireframe-cat.graffle new file mode 100644 index 0000000..3ff936e --- /dev/null +++ b/17/omnigraffle/wireframe-cat.graffle @@ -0,0 +1,3267 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118, 783}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-07-02 10:40:57 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1.0000 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Bounds + {{166.5, 647}, {197, 31}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43150 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 Add Page} + VerticalPad + 0 + + + + Class + LineGraphic + ID + 43761 + Points + + {389.60101318359375, 235} + {389.60101318359375, 746} + + Style + + stroke + + Color + + b + 0 + g + 0 + r + 0.322308 + + HeadArrow + 0 + Legacy + + Pattern + 1 + TailArrow + 0 + Width + 2 + + + + + Class + LineGraphic + ID + 43760 + Points + + {139.67100524902344, 235} + {139.67100524902344, 746} + + Style + + stroke + + Color + + b + 0 + g + 0 + r + 0.322308 + + HeadArrow + 0 + Legacy + + Pattern + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{166.5, 617}, {197, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43758 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Top 20 documents\'85} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 533.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43724 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 532.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43725 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43723 + + + Bounds + {{170.5, 533}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43726 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 528}, {197, 73}} + Class + ShapedGraphic + ID + 43727 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43722 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 449.34844180513625}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43712 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 448.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43713 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43711 + + + Bounds + {{170.5, 449}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43714 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 444}, {197, 73}} + Class + ShapedGraphic + ID + 43715 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43710 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 364.34844180513625}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43718 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 363.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43719 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43717 + + + Bounds + {{170.5, 364}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43720 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 360}, {197, 73}} + Class + ShapedGraphic + ID + 43721 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43716 + + + Bounds + {{154, 330}, {222, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 43688 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf0 Category Name} + VerticalPad + 0 + + + + Bounds + {{154, 231}, {137, 73}} + Class + ShapedGraphic + ID + 43683 + Shape + Rectangle + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs48 \cf0 LOGO} + + + + Bounds + {{40.062957763671875, 221}, {595.06295776367188, 93}} + Class + ShapedGraphic + ID + 43684 + Shape + Rectangle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.763056 + g + 0.763056 + r + 0.763056 + + + shadow + + Draws + NO + + stroke + + Cap + 2 + Join + 0 + + + + + Bounds + {{538.99999890136723, 199.5}, {90.998001098632812, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43682 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf1 Register / Login} + VerticalPad + 0 + + + + Bounds + {{139.67100524902344, 197.64671802520752}, {51.99799999999999, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43681 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf1 Rango} + VerticalPad + 0 + + + + Bounds + {{41, 191}, {595.06295776367188, 31}} + Class + ShapedGraphic + ID + 43680 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{154, 352}, {222, 390}} + Class + ShapedGraphic + ID + 6 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48486400000000002, 0.5} + {0.48486400000000002, 0.5} + {0.48486400000000002, 0.45982200000000001} + {0.48486400000000002, 0.45982200000000001} + {0.48486400000000002, 0.45982200000000001} + {0.47073700000000002, 0.44419700000000001} + {0.47073700000000002, 0.44419700000000001} + {0.47073700000000002, 0.44419700000000001} + {0.5, 0.41182999999999997} + {0.5, 0.41182999999999997} + {0.5, 0.41182999999999997} + {0.48385499999999998, 0.39174100000000001} + {0.48385499999999998, 0.39174100000000001} + {0.48385499999999998, 0.39174100000000001} + {0.48486400000000002, -0.5} + {0.48486400000000002, -0.5} + {0.48486400000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, 0.39285700000000001} + {-0.48206100000000002, 0.39285700000000001} + {-0.48206100000000002, 0.39285700000000001} + {-0.46770899999999999, 0.41071400000000002} + {-0.46770899999999999, 0.41071400000000002} + {-0.46770899999999999, 0.41071400000000002} + {-0.5, 0.44642900000000002} + {-0.5, 0.44642900000000002} + {-0.5, 0.44642900000000002} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.5} + {-0.48206100000000002, 0.5} + {-0.48206100000000002, 0.5} + {0.48486400000000002, 0.5} + + + Style + + fill + + Draws + NO + + shadow + + Color + + b + 0 + g + 0 + r + 0 + + Draws + NO + ShadowVector + {0, -4} + + stroke + + Color + + b + 0.281271 + g + 0.281271 + r + 0.281271 + + PointAtLeast + + Width + 2 + + + + + Bounds + {{52.125900000000001, 143.82050000000004}, {571.87410415039062, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43580 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Rango Category Page Wireframe} + VerticalPad + 0 + + + + Bounds + {{140.67099999999999, 162.00000000000006}, {24, 21}} + Class + ShapedGraphic + ID + 43582 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 4 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + Bounds + {{110.3974, 162.00000000000006}, {24, 21}} + Class + ShapedGraphic + ID + 43583 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 4 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{60.591800000000035, 166.50000000000006}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43585 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{87.140500000000031, 166.50000000000006}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43586 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + ID + 43588 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {0, 0} + OrthogonalBarPosition + -1 + Points + + {78.348900000000029, 162.18370000000004} + {78.348900000000029, 182.81600000000006} + + Style + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 3 + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{52.12590000000003, 162.00000000000006}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43589 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 4 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43587 + + + ID + 43584 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{184.34200000000001, 165.87520000000004}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + ID + 43593 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{184.33799999999999, 168.11600000000004}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43594 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{177.173, 169.46100000000007}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43595 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43592 + + + Bounds + {{179.61600000000001, 165.81250000000006}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + + ID + 43596 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + ID + 43591 + + + Bounds + {{172.202, 162.00000000000006}, {451.79800415039062, 21}} + Class + ShapedGraphic + ID + 43597 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 3 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.rango.com/catname} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{605.5, 165.81250000000006}, {6.8902799999999997, 7.9509600000000002}} + Class + ShapedGraphic + ID + 43599 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.500004, 0.500004} + {-0.500004, 0.500004} + {-0.49920700000000001, -0.499996} + {-0.49920700000000001, -0.499996} + {-0.49920700000000001, -0.499996} + {0.499996, 0.00063323999999999997} + {0.499996, 0.00063323999999999997} + {0.499996, 0.00063323999999999997} + {-0.500004, 0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + ControlPoints + + {1.04789, -1.5266299999999999} + {-1.9916100000000001, -0.00092005699999999995} + {3.2112699999999998, 0} + {0, -3.2122000000000002} + {0, 3.2112500000000002} + {3.2112699999999998, 0} + {-1.8774200000000001, 0} + {1.06342, 1.3794999999999999} + + ID + 43600 + Points + + {608.096, 168.71050000000005} + {612.89300000000003, 166.18250000000006} + {618.70799999999997, 171.99850000000006} + {612.89300000000003, 177.81250000000006} + {608.28200000000004, 175.54350000000005} + + Style + + stroke + + Bezier + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + + + ID + 43598 + + + Bounds + {{91.605500000000021, 144.82050000000007}, {12.5185, 12.5185}} + Class + ShapedGraphic + ID + 43601 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + + + + Bounds + {{71.865700000000004, 144.82050000000007}, {12.5185, 12.5185}} + Class + ShapedGraphic + ID + 43602 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + + + + Bounds + {{52.125900000000009, 144.82050000000007}, {12.5185, 12.5185}} + Class + ShapedGraphic + ID + 43603 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + + + + Bounds + {{40.062957763671875, 142.15953923850577}, {595.126953125, 49.133907129367216}} + Class + ShapedGraphic + ID + 43577 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Draws + NO + + + + + Bounds + {{40.062957763671932, 140.82049560546886}, {595.99999999999989, 618.17950439453125}} + Class + ShapedGraphic + ID + 43578 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 3 + Width + 3 + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 7 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-07-02 11:36:14 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595, 842} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{28, 800}, {1252, 1024}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, -51}, {1117, 885}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/omnigraffle/wireframe-default.graffle b/17/omnigraffle/wireframe-default.graffle new file mode 100644 index 0000000..7d7e014 --- /dev/null +++ b/17/omnigraffle/wireframe-default.graffle @@ -0,0 +1,4767 @@ + + + + + ActiveLayerIndex + 0 + ApplicationVersion + + com.omnigroup.OmniGrafflePro + 139.17.0.185490 + + AutoAdjust + + BackgroundGraphic + + Bounds + {{0, 0}, {1118, 783}} + Class + SolidGraphic + ID + 2 + Style + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + BaseZoom + 0 + CanvasOrigin + {0, 0} + ColumnAlign + 1 + ColumnSpacing + 36 + CreationDate + 2013-07-02 10:40:57 +0000 + Creator + David Maxwell + DisplayScale + 1 0/72 in = 1 0/72 in + ExportShapes + + + InspectorGroup + 255 + ShapeImageRect + {{2, 2}, {22, 22}} + ShapeName + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + ShouldExport + YES + StrokePath + + elements + + + element + MOVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + control1 + {-0.48616700000000002, -0.44672600000000001} + control2 + {-0.121809, -0.51649699999999998} + element + CURVETO + point + {0.0106769, -0.31465700000000002} + + + control1 + {0.143174, -0.112791} + control2 + {-0.00348234, -0.31097399999999997} + element + CURVETO + point + {-0.046100599999999999, -0.28896300000000003} + + + control1 + {-0.088702199999999995, -0.26696399999999998} + control2 + {-0.0035176299999999999, -0.15686800000000001} + element + CURVETO + point + {-0.0035176299999999999, -0.15686800000000001} + + + element + LINETO + point + {0.039069199999999998, -0.13481899999999999} + + + element + LINETO + point + {0.029609199999999999, -0.094430899999999998} + + + control1 + {0.029609199999999999, -0.094430899999999998} + control2 + {-0.027162599999999999, -0.14594299999999999} + element + CURVETO + point + {-0.055568699999999999, -0.138567} + + + control1 + {-0.083970100000000006, -0.131191} + control2 + {-0.0461016, -0.072433499999999998} + element + CURVETO + point + {-0.0461016, -0.072433499999999998} + + + control1 + {-0.0461016, -0.072433499999999998} + control2 + {0.076928099999999999, -0.054073299999999998} + element + CURVETO + point + {0.058003899999999997, -0.017383599999999999} + + + control1 + {0.039069199999999998, 0.019306199999999999} + control2 + {-0.0177112, 0.022974000000000001} + element + CURVETO + point + {0.024878500000000001, 0.078023899999999993} + + + control1 + {0.067471000000000003, 0.089023599999999994} + control2 + {0.058005300000000003, 0.055969199999999997} + element + CURVETO + point + {0.072205500000000006, 0.085327100000000003} + + + control1 + {0.086394799999999994, 0.114595} + control2 + {0.0627418, 0.12568299999999999} + element + CURVETO + point + {0.048543000000000003, 0.15504100000000001} + + + control1 + {0.034182499999999998, 0.18439900000000001} + control2 + {0.0012264299999999999, 0.18439900000000001} + element + CURVETO + point + {-0.0129762, 0.23580599999999999} + + + control1 + {-0.0035190600000000001, 0.29080400000000001} + control2 + {0.020143999999999999, 0.41192400000000001} + element + CURVETO + point + {0.16209899999999999, 0.36787799999999998} + + + control1 + {0.30405500000000002, 0.323826} + control2 + {0.218892, 0.34218599999999999} + element + CURVETO + point + {0.294603, 0.33854699999999999} + + + control1 + {0.29933199999999999, 0.38257200000000002} + control2 + {0.33244400000000002, 0.35691099999999998} + element + CURVETO + point + {0.31825199999999998, 0.39353900000000003} + + + control1 + {0.30405500000000002, 0.43025799999999997} + control2 + {0.28512500000000002, 0.5} + element + CURVETO + point + {0.28512500000000002, 0.5} + + + control1 + {0.28512500000000002, 0.5} + control2 + {0.701511, 0.22842000000000001} + element + CURVETO + point + {0.37502099999999999, -0.219252} + + + control1 + {0.110043, -0.57518199999999997} + control2 + {-0.372581, -0.49441299999999999} + element + CURVETO + point + {-0.45304100000000003, -0.48708200000000001} + + + control1 + {-0.533501, -0.47977399999999998} + control2 + {-0.48617100000000002, -0.44672600000000001} + element + CURVETO + point + {-0.48617100000000002, -0.44672600000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + element + LINETO + point + {0.110039, 0.048606900000000001} + + + control1 + {0.110039, 0.048606900000000001} + control2 + {0.10057099999999999, -0.083496100000000004} + element + CURVETO + point + {0.19994100000000001, -0.057804099999999997} + + + control1 + {0.29931000000000002, -0.032121700000000003} + control2 + {0.27564899999999998, -0.087165800000000002} + element + CURVETO + point + {0.27564899999999998, -0.087165800000000002} + + + control1 + {0.27564899999999998, -0.087165800000000002} + control2 + {0.289852, -0.105516} + element + CURVETO + point + {0.32297100000000001, -0.0945053} + + + control1 + {0.35609099999999999, -0.083496100000000004} + control2 + {0.31350800000000001, -0.0027790100000000002} + element + CURVETO + point + {0.31350800000000001, -0.0027599299999999998} + + + control1 + {0.31350800000000001, -0.0027599299999999998} + control2 + {0.26619100000000001, 0.074289300000000003} + element + CURVETO + point + {0.21414, 0.037595700000000003} + + + control1 + {0.16208900000000001, 0.00090026899999999998} + control2 + {0.110039, 0.048606900000000001} + element + CURVETO + point + {0.110039, 0.048606900000000001} + + + element + CLOSE + + + element + MOVETO + point + {0.110039, 0.048606900000000001} + + + + TextBounds + {{0, 0}, {1, 1}} + + + GraphDocumentVersion + 8 + GraphicsList + + + Class + LineGraphic + ID + 43760 + Points + + {139.67100524902344, 235} + {139.67100524902344, 746} + + Style + + stroke + + Color + + b + 0 + g + 0 + r + 0.322308 + + HeadArrow + 0 + Legacy + + Pattern + 1 + TailArrow + 0 + Width + 2 + + + + + Bounds + {{401.8289794921875, 710}, {197, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43759 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Top 20 documents\'85} + VerticalPad + 0 + + + + Bounds + {{166.5, 710}, {197, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + ID + 43758 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\i\b\fs24 \cf0 Top 20 documents\'85} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{522.94757258313894, 615.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43754 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{522.32897907714846, 614.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43755 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43753 + + + Bounds + {{405.8289794921875, 615}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43756 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{401.8289794921875, 610}, {197, 73}} + Class + ShapedGraphic + ID + 43757 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43752 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{522.94757258313894, 533.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43748 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{522.32897907714846, 532.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43749 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43747 + + + Bounds + {{405.8289794921875, 533}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43750 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{401.8289794921875, 528}, {197, 73}} + Class + ShapedGraphic + ID + 43751 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43746 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{522.94757258313894, 449.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43742 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{522.32897907714846, 448.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43743 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43741 + + + Bounds + {{405.8289794921875, 449}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43744 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{401.8289794921875, 444}, {197, 73}} + Class + ShapedGraphic + ID + 43745 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43740 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{522.94757258313894, 365.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43736 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{522.32897907714846, 364.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43737 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43735 + + + Bounds + {{405.8289794921875, 365}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43738 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{401.8289794921875, 360}, {197, 73}} + Class + ShapedGraphic + ID + 43739 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43734 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 615.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43730 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 614.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43731 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43729 + + + Bounds + {{170.5, 615}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43732 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 610}, {197, 73}} + Class + ShapedGraphic + ID + 43733 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43728 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 533.34844180513619}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43724 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 532.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43725 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43723 + + + Bounds + {{170.5, 533}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43726 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 528}, {197, 73}} + Class + ShapedGraphic + ID + 43727 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43722 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 449.34844180513625}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43712 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 448.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43713 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43711 + + + Bounds + {{170.5, 449}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43714 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\b0 \cf0 http://url.com\ +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\i\fs22 \cf0 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 444}, {197, 73}} + Class + ShapedGraphic + ID + 43715 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43710 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{287.61859309095138, 364.34844180513625}, {70.988455765241568, 8.6231790154826005}} + Class + ShapedGraphic + ID + 43718 + Shape + Rectangle + Style + + fill + + Color + + a + 0.7 + b + 1 + g + 1 + r + 1 + + FillType + 2 + GradientAngle + 90 + GradientColor + + a + 0.1 + w + 1 + + MiddleFraction + 0.23015870153903961 + + shadow + + Draws + NO + + stroke + + CornerRadius + 2 + Draws + NO + + + + + Bounds + {{286.99999958496096, 363.99999853515624}, {72.000015258789034, 16.999999999999996}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43719 + Shape + Rectangle + Style + + fill + + Color + + b + 1 + g + 0.499831 + r + 0 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 1 + g + 0.873456 + r + 0.714187 + + MiddleColor + + b + 0.8 + g + 0.4 + r + 0 + + MiddleFraction + 0.88095235824584961 + TrippleBlend + YES + + shadow + + Beneath + YES + Color + + b + 0.498039 + g + 0.498039 + r + 0.498039 + + Fuzziness + 0.79578721523284912 + ShadowVector + {0, 1} + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + CornerRadius + 3 + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf1 #catname} + VerticalPad + 0 + + + + ID + 43717 + + + Bounds + {{170.5, 364}, {188.5, 56}} + Class + ShapedGraphic + FitText + Clip + Flow + Clip + ID + 43720 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Align + 0 + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\b\fs24 \cf0 \ul \ulc0 PAGE TITLE\ulnone \ + +\b0 http://url.com\ + +\i\fs22 Snippet for the document at this rank\ +Blah blah blah blah...} + VerticalPad + 0 + + + + Bounds + {{166.5, 360}, {197, 73}} + Class + ShapedGraphic + ID + 43721 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.273586 + g + 0.273586 + r + 0.273586 + + Join + 0 + Width + 2 + + + Text + + Align + 0 + VerticalPad + 0 + + TextPlacement + 0 + + + ID + 43716 + + + Bounds + {{389.3289794921875, 352}, {222, 390}} + Class + ShapedGraphic + ID + 43696 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48486400000000002, 0.5} + {0.48486400000000002, 0.5} + {0.48486400000000002, 0.45982200000000001} + {0.48486400000000002, 0.45982200000000001} + {0.48486400000000002, 0.45982200000000001} + {0.47073700000000002, 0.44419700000000001} + {0.47073700000000002, 0.44419700000000001} + {0.47073700000000002, 0.44419700000000001} + {0.5, 0.41182999999999997} + {0.5, 0.41182999999999997} + {0.5, 0.41182999999999997} + {0.48385499999999998, 0.39174100000000001} + {0.48385499999999998, 0.39174100000000001} + {0.48385499999999998, 0.39174100000000001} + {0.48486400000000002, -0.5} + {0.48486400000000002, -0.5} + {0.48486400000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, 0.39285700000000001} + {-0.48206100000000002, 0.39285700000000001} + {-0.48206100000000002, 0.39285700000000001} + {-0.46770899999999999, 0.41071400000000002} + {-0.46770899999999999, 0.41071400000000002} + {-0.46770899999999999, 0.41071400000000002} + {-0.5, 0.44642900000000002} + {-0.5, 0.44642900000000002} + {-0.5, 0.44642900000000002} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.5} + {-0.48206100000000002, 0.5} + {-0.48206100000000002, 0.5} + {0.48486400000000002, 0.5} + + + Style + + fill + + Draws + NO + + shadow + + Color + + b + 0 + g + 0 + r + 0 + + Draws + NO + ShadowVector + {0, -4} + + stroke + + Color + + b + 0.281271 + g + 0.281271 + r + 0.281271 + + PointAtLeast + + Width + 2 + + + + + Bounds + {{389.32899475097656, 330}, {222, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 43695 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf0 Most Popular +\i\b0 (ordered by #views)} + VerticalPad + 0 + + + + Bounds + {{154, 330}, {222, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica + Size + 12 + + ID + 43688 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf0 Latest +\i\b0 (ordered by date)} + VerticalPad + 0 + + + + Bounds + {{154, 231}, {137, 73}} + Class + ShapedGraphic + ID + 43683 + Shape + Rectangle + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs48 \cf0 LOGO} + + + + Bounds + {{40.062957763671875, 221}, {595.06295776367188, 93}} + Class + ShapedGraphic + ID + 43684 + Shape + Rectangle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.763056 + g + 0.763056 + r + 0.763056 + + + shadow + + Draws + NO + + stroke + + Cap + 2 + Join + 0 + + + + + Bounds + {{538.99999890136723, 199.5}, {90.998001098632812, 14}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43682 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs24 \cf1 Register / Login} + VerticalPad + 0 + + + + Bounds + {{139.67100524902344, 197.64671802520752}, {51.99799999999999, 17}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 14 + + ID + 43681 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Draws + NO + + + Text + + Pad + 0 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fswiss\fcharset0 Helvetica;} +{\colortbl;\red255\green255\blue255;\red255\green255\blue255;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\b\fs28 \cf2 Rango} + VerticalPad + 0 + + + + Bounds + {{41, 191}, {595.06295776367188, 31}} + Class + ShapedGraphic + ID + 43680 + Shape + Rectangle + Style + + fill + + Color + + b + 0 + g + 0 + r + 0 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + Bounds + {{154, 352}, {222, 390}} + Class + ShapedGraphic + ID + 6 + Shape + Bezier + ShapeData + + UnitPoints + + {0.48486400000000002, 0.5} + {0.48486400000000002, 0.5} + {0.48486400000000002, 0.45982200000000001} + {0.48486400000000002, 0.45982200000000001} + {0.48486400000000002, 0.45982200000000001} + {0.47073700000000002, 0.44419700000000001} + {0.47073700000000002, 0.44419700000000001} + {0.47073700000000002, 0.44419700000000001} + {0.5, 0.41182999999999997} + {0.5, 0.41182999999999997} + {0.5, 0.41182999999999997} + {0.48385499999999998, 0.39174100000000001} + {0.48385499999999998, 0.39174100000000001} + {0.48385499999999998, 0.39174100000000001} + {0.48486400000000002, -0.5} + {0.48486400000000002, -0.5} + {0.48486400000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, -0.5} + {-0.48206100000000002, 0.39285700000000001} + {-0.48206100000000002, 0.39285700000000001} + {-0.48206100000000002, 0.39285700000000001} + {-0.46770899999999999, 0.41071400000000002} + {-0.46770899999999999, 0.41071400000000002} + {-0.46770899999999999, 0.41071400000000002} + {-0.5, 0.44642900000000002} + {-0.5, 0.44642900000000002} + {-0.5, 0.44642900000000002} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.46428599999999998} + {-0.48206100000000002, 0.5} + {-0.48206100000000002, 0.5} + {-0.48206100000000002, 0.5} + {0.48486400000000002, 0.5} + + + Style + + fill + + Draws + NO + + shadow + + Color + + b + 0 + g + 0 + r + 0 + + Draws + NO + ShadowVector + {0, -4} + + stroke + + Color + + b + 0.281271 + g + 0.281271 + r + 0.281271 + + PointAtLeast + + Width + 2 + + + + + Bounds + {{52.125900000000001, 143.82050000000004}, {571.87410415039062, 15}} + Class + ShapedGraphic + FitText + Vertical + Flow + Resize + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43580 + Shape + Rectangle + Style + + fill + + Draws + NO + MiddleFraction + 0.13492070138454437 + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.494118 + g + 0.494118 + r + 0.494118 + + Draws + NO + Join + 0 + + + Text + + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc + +\f0\fs24 \cf2 Rango Index Page Wireframe} + VerticalPad + 0 + + + + Bounds + {{140.67099999999999, 162.00000000000006}, {24, 21}} + Class + ShapedGraphic + ID + 43582 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 4 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + Bounds + {{110.3974, 162.00000000000006}, {24, 21}} + Class + ShapedGraphic + ID + 43583 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 4 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{60.591800000000035, 166.50000000000006}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + HFlip + YES + ID + 43585 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Bounds + {{87.140500000000031, 166.50000000000006}, {9.2068399999999997, 12}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43586 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.5, -0.5} + {-0.5, -0.5} + {0.5, 0} + {0.5, 0} + {0.5, 0} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, 0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + {-0.5, -0.5} + + + Style + + fill + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Draws + NO + + + Wrap + NO + + + Class + Group + Graphics + + + Class + LineGraphic + ID + 43588 + OrthogonalBarAutomatic + + OrthogonalBarPoint + {0, 0} + OrthogonalBarPosition + -1 + Points + + {78.348900000000029, 162.18370000000004} + {78.348900000000029, 182.81600000000006} + + Style + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 3 + HeadArrow + 0 + Legacy + + LineType + 2 + TailArrow + 0 + + + + + Bounds + {{52.12590000000003, 162.00000000000006}, {51.997999999999998, 21}} + Class + ShapedGraphic + FontInfo + + Color + + b + 0.2 + g + 0.2 + r + 0.2 + + Font + Helvetica + NSKern + 0.0 + Size + 12 + + ID + 43589 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 4 + Join + 0 + + + Text + + Align + 0 + VerticalPad + 0 + + + + ID + 43587 + + + ID + 43584 + + + Class + Group + Graphics + + + Class + Group + Graphics + + + Bounds + {{184.34200000000001, 165.87520000000004}, {8.4472500000000004, 10.9816}} + Class + ShapedGraphic + ID + 43593 + Shape + CFFEAC74-0EEC-460B-9C60-3C8729BCA9C4-759-0000171ACCDBB04D + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{184.33799999999999, 168.11600000000004}, {2.3397700000000001, 1.6963600000000001}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43594 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.39417999999999997, -0.48077999999999999} + {0.51661699999999999, -0.36118899999999998} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.49913800000000003, 0.045496000000000002} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {0.44663999999999998, 0.30862800000000001} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.0079650899999999993, 0.5} + {-0.21775800000000001, 0.26078600000000002} + {-0.44500000000000001, -0.0023479500000000001} + {-0.67235599999999995, -0.26549} + {-0.13034799999999999, -0.17006299999999999} + {0.0095291100000000004, -0.14588699999999999} + {0.149399, -0.12196700000000001} + {0.27180500000000002, -0.60035700000000003} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + Bounds + {{177.173, 169.46100000000007}, {12.571899999999999, 6.1706000000000003}} + Class + ShapedGraphic + FontInfo + + Font + Helvetica-Bold + Size + 12 + + ID + 43595 + Rotation + 270 + Shape + Bezier + ShapeData + + UnitPoints + + {0.42505999999999999, -0.038557099999999997} + {0.42505999999999999, -0.038557099999999997} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.29863400000000001, -0.28275} + {0.28898200000000002, -0.40981600000000001} + {0.21402199999999999, -0.46030799999999999} + {0.13909099999999999, -0.51079799999999997} + {0.100254, -0.52662500000000001} + {-0.057970000000000001, -0.425645} + {-0.216194, -0.32466699999999998} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.182865, -0.24051500000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.25783299999999998, -0.27417900000000001} + {-0.34944700000000001, -0.15636800000000001} + {-0.37443900000000002, -0.122707} + {-0.39940799999999999, -0.0890484} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.45769300000000002, -0.105879} + {-0.50617999999999996, 0.0055499099999999999} + {-0.499338, 0.180229} + {-0.49249999999999999, 0.35491499999999998} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.44936799999999999, 0.36536099999999999} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.37443900000000002, 0.5} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.29947099999999999, 0.19705900000000001} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.216194, -0.0048985499999999998} + {-0.21162600000000001, -0.19173799999999999} + {-0.17454700000000001, -0.24051500000000001} + {-0.13742099999999999, -0.28931699999999999} + {-0.056074100000000002, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.056064599999999999, -0.32219599999999998} + {-0.012905099999999999, -0.43470799999999998} + {0.041961699999999998, -0.37515799999999999} + {0.096876100000000007, -0.31562099999999998} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.00075149500000000003, -0.236707} + {-0.111391, -0.19725000000000001} + {-0.130911, -0.11833399999999999} + {-0.020278899999999999, -0.19725000000000001} + {0.00537682, -0.25667800000000002} + {0.091936100000000007, 0.0287595} + {0.116909, 0.26437899999999998} + {0.084245700000000007, 0.177844} + {0.096876100000000007, 0.25651299999999999} + {0.10950500000000001, 0.33518599999999998} + {0.21728900000000001, 0.151283} + {0.34177400000000002, 0.23071800000000001} + {0.37843500000000002, 0.21149799999999999} + {0.181479, 0.12731500000000001} + {0.181479, 0.026334799999999998} + {0.27910400000000002, -0.10519100000000001} + {0.29303699999999999, 0.068738900000000006} + {0.32510899999999998, 0.12973999999999999} + {0.35721199999999997, 0.190743} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.409271, 0.059216499999999998} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.5, 0.062420400000000001} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.475018, -0.055387499999999999} + {0.42505999999999999, -0.038557099999999997} + + + Style + + fill + + Color + + a + 0.5 + b + 1 + g + 1 + r + 1 + + + shadow + + Color + + b + 0.8 + g + 0.8 + r + 0.8 + + Draws + NO + Fuzziness + 5.1873579025268555 + + stroke + + Color + + b + 0.811765 + g + 0.435294 + r + 1 + + Draws + NO + Width + 0.25 + + + Wrap + NO + + + ID + 43592 + + + Bounds + {{179.61600000000001, 165.81250000000006}, {13.096399999999999, 13.375}} + Class + ShapedGraphic + FontInfo + + Color + + w + 1 + + + ID + 43596 + Shape + Circle + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + + + + + ID + 43591 + + + Bounds + {{172.202, 162.00000000000006}, {451.79800415039062, 21}} + Class + ShapedGraphic + ID + 43597 + Shape + Rectangle + Style + + shadow + + Draws + NO + + stroke + + Cap + 0 + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 3 + Join + 0 + + + Text + + Align + 0 + Pad + 30 + Text + {\rtf1\ansi\ansicpg1252\cocoartf1138\cocoasubrtf510 +{\fonttbl\f0\fnil\fcharset0 LucidaGrande;} +{\colortbl;\red255\green255\blue255;\red51\green51\blue51;} +\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural + +\f0\fs24 \cf2 http://www.rango.com} + VerticalPad + 0 + + + + Class + Group + Graphics + + + Bounds + {{605.5, 165.81250000000006}, {6.8902799999999997, 7.9509600000000002}} + Class + ShapedGraphic + ID + 43599 + Shape + Bezier + ShapeData + + UnitPoints + + {-0.500004, 0.500004} + {-0.500004, 0.500004} + {-0.49920700000000001, -0.499996} + {-0.49920700000000001, -0.499996} + {-0.49920700000000001, -0.499996} + {0.499996, 0.00063323999999999997} + {0.499996, 0.00063323999999999997} + {0.499996, 0.00063323999999999997} + {-0.500004, 0.500004} + + + Style + + fill + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + + shadow + + Draws + NO + + stroke + + Draws + NO + + + + + AllowLabelDrop + + Class + LineGraphic + ControlPoints + + {1.04789, -1.5266299999999999} + {-1.9916100000000001, -0.00092005699999999995} + {3.2112699999999998, 0} + {0, -3.2122000000000002} + {0, 3.2112500000000002} + {3.2112699999999998, 0} + {-1.8774200000000001, 0} + {1.06342, 1.3794999999999999} + + ID + 43600 + Points + + {608.096, 168.71050000000005} + {612.89300000000003, 166.18250000000006} + {618.70799999999997, 171.99850000000006} + {612.89300000000003, 177.81250000000006} + {608.28200000000004, 175.54350000000005} + + Style + + stroke + + Bezier + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + HeadArrow + 0 + Legacy + + LineType + 1 + TailArrow + 0 + Width + 3 + + + + + ID + 43598 + + + Bounds + {{91.605500000000021, 144.82050000000007}, {12.5185, 12.5185}} + Class + ShapedGraphic + ID + 43601 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369766235351562 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + + + + Bounds + {{71.865700000000004, 144.82050000000007}, {12.5185, 12.5185}} + Class + ShapedGraphic + ID + 43602 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + + + + Bounds + {{52.125900000000009, 144.82050000000007}, {12.5185, 12.5185}} + Class + ShapedGraphic + ID + 43603 + Shape + Circle + Style + + fill + + FillType + 2 + GradientAngle + 90 + GradientColor + + b + 0.733333 + g + 0.733333 + r + 0.733333 + + + shadow + + Beneath + YES + Color + + b + 0.4 + g + 0.4 + r + 0.4 + + Draws + NO + Fuzziness + 1.2369769811630249 + ShadowVector + {0, 1} + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + + + + + Bounds + {{40.062957763671875, 142.15953923850577}, {595.126953125, 49.133907129367216}} + Class + ShapedGraphic + ID + 43577 + Shape + Rectangle + Style + + fill + + Color + + b + 0.866667 + g + 0.866667 + r + 0.866667 + + + shadow + + Draws + NO + + stroke + + Color + + b + 0.32549 + g + 0.32549 + r + 0.32549 + + Draws + NO + + + + + Bounds + {{40.062957763671932, 140.82049560546886}, {595.99999999999989, 618.17950439453125}} + Class + ShapedGraphic + ID + 43578 + Shape + Rectangle + Style + + fill + + Draws + NO + + shadow + + Draws + NO + + stroke + + Color + + b + 0.6 + g + 0.6 + r + 0.6 + + CornerRadius + 3 + Width + 3 + + + + + GridInfo + + GuidesLocked + NO + GuidesVisible + YES + HPages + 2 + ImageCounter + 7 + KeepToScale + + Layers + + + Lock + NO + Name + Layer 1 + Print + YES + View + YES + + + LayoutInfo + + Animate + NO + circoMinDist + 18 + circoSeparation + 0.0 + layoutEngine + dot + neatoSeparation + 0.0 + twopiSeparation + 0.0 + + LinksVisible + NO + MagnetsVisible + NO + MasterSheets + + ModificationDate + 2013-07-02 11:14:54 +0000 + Modifier + David Maxwell + NotesVisible + NO + Orientation + 2 + OriginVisible + NO + PageBreaks + YES + PrintInfo + + NSBottomMargin + + float + 41 + + NSHorizonalPagination + + coded + BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG + + NSLeftMargin + + float + 18 + + NSPaperSize + + size + {595, 842} + + NSPrintReverseOrientation + + int + 0 + + NSRightMargin + + float + 18 + + NSTopMargin + + float + 18 + + + PrintOnePage + + ReadOnly + NO + RowAlign + 1 + RowSpacing + 36 + SheetTitle + Canvas 1 + SmartAlignmentGuidesActive + YES + SmartDistanceGuidesActive + YES + UniqueID + 1 + UseEntirePage + + VPages + 1 + WindowInfo + + CurrentSheet + 0 + ExpandedCanvases + + + name + Canvas 1 + + + Frame + {{28, 800}, {1252, 1024}} + ListView + + OutlineWidth + 142 + RightSidebar + + ShowRuler + + Sidebar + + SidebarWidth + 120 + VisibleRegion + {{0, -51}, {1117, 885}} + Zoom + 1 + ZoomValues + + + Canvas 1 + 1 + 1 + + + + + diff --git a/17/sphinx-extensions/numfig.py b/17/sphinx-extensions/numfig.py new file mode 100644 index 0000000..8a5b631 --- /dev/null +++ b/17/sphinx-extensions/numfig.py @@ -0,0 +1,115 @@ +from docutils.nodes import figure, caption, Text, reference, raw, SkipNode, Element +from sphinx.roles import XRefRole + +# +# numfig Sphinx extension +# Check out https://bitbucket.org/arjones6/sphinx-numfig/wiki/Home for the documentation (as of 2013-07-16) +# Comment added by dmax +# + +# Element classes + +class page_ref(reference): + pass + +class num_ref(reference): + pass + +def skip_num_ref(self, node): + raise SkipNode + +# Visit/depart functions + +def skip_page_ref(self, node): + raise SkipNode + +def latex_visit_page_ref(self, node): + self.body.append("\\pageref{%s:%s}" % (node['refdoc'], node['reftarget'])) + raise SkipNode + +def latex_visit_num_ref(self, node): + fields = node['reftarget'].split('#') + if len(fields) > 1: + label, target = fields + ref_link = '%s:%s' % (node['refdoc'], target) + latex = "\\hyperref[%s]{%s \\ref*{%s}}" % (ref_link, label, ref_link) + self.body.append(latex) + else: + self.body.append('\\ref{%s:%s}' % (node['refdoc'], fields[0])) + + raise SkipNode + + +def doctree_read(app, doctree): + # first generate figure numbers for each figure + env = app.builder.env + figid_docname_map = getattr(env, 'figid_docname_map', {}) + + for figure_info in doctree.traverse(figure): + for id in figure_info['ids']: + figid_docname_map[id] = env.docname + + env.figid_docname_map = figid_docname_map + + +def doctree_resolved(app, doctree, docname): + i = 1 + figids = {} + for figure_info in doctree.traverse(figure): + if app.builder.name != 'latex' and app.config.number_figures: + for cap in figure_info.traverse(caption): + cap[0] = Text("%s %d: %s" % (app.config.figure_caption_prefix, i, cap[0])) + + for id in figure_info['ids']: + figids[id] = i + + i += 1 + + + # replace numfig nodes with links + if app.builder.name != 'latex': + for ref_info in doctree.traverse(num_ref): + if '#' in ref_info['reftarget']: + label, target = ref_info['reftarget'].split('#') + labelfmt = label + " %d" + else: + labelfmt = '%d' + target = ref_info['reftarget'] + + if target not in figids: + continue + + if app.builder.name == 'html': + target_doc = app.builder.env.figid_docname_map[target] + link = "%s#%s" % (app.builder.get_relative_uri(docname, target_doc), + target) + html = '%s' % (link, labelfmt %(figids[target])) + ref_info.replace_self(raw(html, html, format='html')) + else: + ref_info.replace_self(Text(labelfmt % (figids[target]))) + + +def clean_env(app): + app.builder.env.i=1 + app.builder.env.figid_docname_map = {} + +def setup(app): + app.add_config_value('number_figures', True, True) + app.add_config_value('figure_caption_prefix', "Figure", True) + + app.add_node(page_ref, + text=(skip_page_ref, None), + html=(skip_page_ref, None), + latex=(latex_visit_page_ref, None)) + + app.add_role('page', XRefRole(nodeclass=page_ref)) + + app.add_node(num_ref, + html=(skip_num_ref, None), + latex=(latex_visit_num_ref, None)) + + app.add_role('num', XRefRole(nodeclass=num_ref)) + + app.connect("builder-inited", clean_env) + app.connect('doctree-read', doctree_read) + app.connect('doctree-resolved', doctree_resolved) diff --git a/17/sphinx-extensions/numsec.py b/17/sphinx-extensions/numsec.py new file mode 100644 index 0000000..f133384 --- /dev/null +++ b/17/sphinx-extensions/numsec.py @@ -0,0 +1,51 @@ +""" +Changes section references to be the section number +instead of the title of the section. +""" + +from docutils import nodes +import sphinx.domains.std + +class CustomStandardDomain(sphinx.domains.std.StandardDomain): + + def __init__(self, env): + env.settings['footnote_references'] = 'superscript' + sphinx.domains.std.StandardDomain.__init__(self, env) + + def resolve_xref(self, env, fromdocname, builder, + typ, target, node, contnode): + res = super(CustomStandardDomain, self).resolve_xref(env, fromdocname, builder, + typ, target, node, contnode) + + if res is None: + return res + + if typ == 'ref' and not node['refexplicit']: + docname, labelid, sectname = self.data['labels'].get(target, ('','','')) + res['refdocname'] = docname + + return res + +def doctree_resolved(app, doctree, docname): + secnums = app.builder.env.toc_secnumbers + for node in doctree.traverse(nodes.reference): + if 'refdocname' in node: + refdocname = node['refdocname'] + if refdocname in secnums: + secnum = secnums[refdocname] + emphnode = node.children[0] + textnode = emphnode.children[0] + + toclist = app.builder.env.tocs[refdocname] + anchorname = None + for refnode in toclist.traverse(nodes.reference): + if refnode.astext() == textnode.astext(): + anchorname = refnode['anchorname'] + if anchorname is None: + continue + linktext = '.'.join(map(str, secnum[anchorname])) + node.replace(emphnode, nodes.Text(linktext)) + +def setup(app): + app.override_domain(CustomStandardDomain) + app.connect('doctree-resolved', doctree_resolved) \ No newline at end of file diff --git a/17/tango_with_django_book.tmproj b/17/tango_with_django_book.tmproj new file mode 100644 index 0000000..e462cf3 --- /dev/null +++ b/17/tango_with_django_book.tmproj @@ -0,0 +1,143 @@ + + + + + documents + + + filename + index.rst + + + filename + conf.py + lastUsed + 2013-10-20T17:11:32Z + + + filename + chapters/ajax.rst + + + filename + chapters/bing_search.rst + + + filename + chapters/bootstrap.rst + + + filename + chapters/cookie.rst + lastUsed + 2013-10-17T16:07:45Z + + + filename + chapters/css_intro.rst + + + filename + chapters/css.rst.out + + + filename + chapters/deploy.rst + + + filename + chapters/forms.rst + lastUsed + 2013-10-22T16:14:30Z + + + filename + chapters/game.rst.out + + + filename + chapters/git.rst + + + filename + chapters/javascript.rst + + + filename + chapters/login.rst + lastUsed + 2013-10-22T15:00:23Z + + + filename + chapters/models_templates.rst + lastUsed + 2013-10-22T14:26:12Z + + + filename + chapters/models.rst + lastUsed + 2013-10-17T16:58:33Z + + + filename + chapters/outtakes.rst.out + + + filename + chapters/overview.rst + + + filename + chapters/requirements.rst + lastUsed + 2013-10-24T13:28:40Z + selected + + + + filename + chapters/setup.rst + + + filename + chapters/summary.rst + + + filename + chapters/tango_too.rst + + + filename + chapters/tango.rst + + + filename + chapters/templates_static.rst + + + filename + chapters/templates.rst + + + filename + chapters/test.rst + + + filename + TODO.md + lastUsed + 2013-10-17T16:58:33Z + + + fileHierarchyDrawerWidth + 200 + metaData + + showFileHierarchyDrawer + + windowFrame + {{217, 0}, {1063, 778}} + + diff --git a/17/templates/layout.html b/17/templates/layout.html new file mode 100644 index 0000000..fa97085 --- /dev/null +++ b/17/templates/layout.html @@ -0,0 +1,61 @@ +{% extends "!layout.html" %} + +{%- block extrahead %} + + +{% endblock %} + +{%- macro relbar_custom() %} +
        +

        {{ _('Navigation') }}

        +
          + {%- for rellink in rellinks %} + {% if rellink[3] != 'index' %}
        • + {{ rellink[3] }} +
          • + {% endif %} + {%- endfor %} + {%- block rootrellink %} +
        • {{ shorttitle|e }}{{ reldelim1 }}
          • + {%- endblock %} + {%- for parent in parents %} +
        • {{ parent.title }}{{ reldelim1 }}
          • + {%- endfor %} + {%- block relbaritems %} {% endblock %} + +
        + +
        + + + +{%- endmacro %} + +{% block relbar1 %}{{ relbar_custom() }}{% endblock %} +{% block relbar2 %}{{ relbar_custom() }}{% endblock %} diff --git a/TODO.md b/TODO.md index c952f97..26d6c66 100644 --- a/TODO.md +++ b/TODO.md @@ -1,8 +1,37 @@ +Upgrade to 1.7.1 +---------------- + +- chapter overview DONE +- chapter requirements DONE +- chapter setup DONE: some TODOs, on migrate command +- chapter templates_static DONE: some TODOs +- chapter models - UP TO population script +- chapter models_templates +- chapter forms +- chapter login +- chapter templates +- chapter cookie +- chapter bootstrap +- chapter bing_search +- chapter tango +- chapter tango_too +- chapter ajax +- chapter deploy +- chapter summary +- chapter git +- chapter css_intro +- chapter javascript +- chapter test +- chapter acknowledgements + + + General Comments ---------------- - @Siecje thinks we should start using render() rather than render_to_response() at some point. - He feels it is important to discuss that there's a shorthand way of getting a response to the client. - But I (David) argue it could be confusing - and anyway, render_to_response() drills the concept of context dictionaries into a reader's head. + http://rayed.com/wordpress/?p=1445 - Hmm... I can add a note at some point to discuss this briefly! EBook and Cover Design