GRA422 W14 Lecture 2

GRA422 Electronic Document Design II — Lecture #2 CSS //
HTML // Proposals Winter 2013 Instructor: Ahmed Sagarwala

Correction Rendering Engines As of v28 (June 2013), Chrome uses
Blink, not Webkit Chrome = Blink Safari = Webkit Firefox = Gecko Opera = Blink (it was Presto) Internet Explorer = Trident Dreamweaver = Webkit

Group Project Part A – The Proposal Due January 24th
Friday at 12pm Blackboard submission Turnitin.com

HTML Structure + Content CSS Visual Style JavaScript Interactive Effects

Block vs Inline Structure Traits <div> & <span> tags illustrate
effect on layout Block tags ‘clear’ elements Inline elements appear within Inline: a, strong, em, td, input, span, img Block: ul, ol, table, form, h1, blockquote, canvas

GRA422 Electronic Document Design II — Lecture #2 HTML //
CSS // Website Proposals Navigation Proper Techniques <nav> tag encapsulates only primary menus. Best practice to use <li> for each menu item. <nav> <ul id="mainmenu"> <li><a href="index.html" title="Introduction">Home</a></li> <li><a href="/about" title="The Company">About</a></li> <li><a href="#more" title="What We Offer">Products</a></li> <li><a href="./contact.html">Contact</a></li> </ul> </nav>

Images Attributes & Usage <img src="image.jpg" alt="Awesome" height="32" width="32"> Compatible
formats: jpg, gif, png, svg, bmp, ico Tag width in pixels Alternative text image filename height in pixels

CSS // Website Proposals DOCTYPE Declaration HTML5: <!DOCTYPE html> HTML 4.01: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Defines how the document should be interpreted HTML5 is not based on SGML (like past versions) Does not require DTD reference Document Type Definition (DTD)

CSS // Website Proposals Special Characters How to Start with ampersand (&) end with semi-colon (;) Some characters are reserved for code Others have issues with encoding & ’ ” … — é © » ™ ¼

CSS // Website Proposals Header Components Title, Meta, Link, Script Define supporting files (CSS, JS, Favicon) Describe the document content Enhancements (JS) should be in footer Usually before the closing HTML tag

Footers Secondary Scripts CSS in footer causes page to progressively
load JavaScript in footer allows content/design to load first Asynchronously download footer scripts What JS should be in the header?

Accessibility Guidelines Web Content Accessibility Guidelines (WCAG) Web Accessibility Initiative
(W3C) Three levels of compliance (A, AA, AAA) Content must have alternate means to understand it Covers: text descriptions, contrast, syntax, etc. http://www.w3.org/WAI

Our tool for making sites Code and/or design focus Code
colouring, syntax highlighting Autocomplete Site manager Mobile and responsive development Server-side support (PHP, ASP, etc.)

Dreamweaver Why not a text editor or InDesign? Centralized system
for creating Other software generates questional code Crop, resize, optimize images Multiple DOCTYPEs supported WYSIWYG Live View and Live Code Inspect design and much more

CSS // Website Proposals CSS Selectors tag { color: #FF0000; } .class { background-color: rgb(255,255,255); } #id { background: rgba(0,0,0,0.5); } Elements do not require a prefix Class requires a period (.) prefix ID requires a hash (#) prefix

CSS // Website Proposals CSS Properties tag { color: #FF0000; } .class { background-color: rgb(255,255,255); } #id { background: rgba(0,0,0,0.5); } Properties specify what style is changed The color property is applied to the font The background property is shorthand for background-color

CSS // Website Proposals CSS Values tag { color: #FF0000; } .class { background-color: rgb(255, 255, 255); } #id { background: rgba(0, 0, 0, 0.5); } Values change the default behaviour of a property There is a difference between rgb and rgba

The Box Model Determining object size .box { margin: 10px;
border: 1px solid #000; padding: 5px; width: 260px; height: 130px; } Calculate the overall width by adding the margin, border, padding and width. Total Width = 10 + 1 + 5 + 260 + 5 + 1 + 10

Positioning Techniques Floats .left { border: 1px solid #000; float:
left; margin: 10px 10px 10px 0; width: 200px; height: 200px; } <p>Lorem ipsum dolor... </p> <p><div class='left'></div> Molestias, impedit...</p> <p>Officialis...</p> What is the total width of the red box? How about the height of the red box?

Positioning Techniques Clears .left { border: 1px solid #000; float:
left; margin: 10px 10px 10px 0; width: 200px; height: 200px; background: red; } .clear-left { clear:left; background: blue; } <div class='left'>1</div> <div class='left clear-left'>2</div> <div class='left'>3</div> Where would you use this technique?

CSS // Website Proposals Wireframes Design Prototyping Provides perspective and causes a client to be intrigued Include anything that helps the vision: Units, dimensions, colour swatches, font samples, written ideas, icons, UX elements

SOURCE: https://wiki.mozilla.org/ Drumbeat/website/wireframes

CSS // Website Proposals Sitemap Design Organization Visually represents site structure, document requirements and hierarchy There is also a sitemap file used to help spiders find all the content of your site Include filenames, page titles, linking structure and comments on pages

CSS // Website Proposals external links Home About Gallery Recipes VEGETARIAN FACEBOOK OMNIVORE TWITTER CARNIVORE YOUTUBE SPONSORS Contact contact.html index.html recipes.html vege.html omni.html carni.html gallery.html about.html sponsors.html

SOURCE: https://fedoraproject.org/w/uploads/5/5f/Spinsfpo-sitemap.png

Clara Gaggero Project in collaboration with Adrian Westaway. Graphic Design:
Jaakko Tuomivara SOURCE: http://www.claragaggero.com/?p=135 Sitemap for navigating a mobile phone

In Closing Wireframes & Sitemap Sell the client on your
project Provides a concept, is not meant to represent final product 100% Provide something polished that would pursuade the client to use your services

GRA422 W14 Lecture 2

GRA422 W14 Lecture 2

Ahmed Sagarwala

More Decks by Ahmed Sagarwala

Other Decks in Programming

Featured

Transcript

GRA422 Electronic Document Design II — Lecture #2 CSS //

Correction Rendering Engines As of v28 (June 2013), Chrome uses

Group Project Part A – The Proposal Due January 24th

HTML Structure + Content CSS Visual Style JavaScript Interactive Effects

Block vs Inline Structure Traits <div> & <span> tags illustrate

GRA422 Electronic Document Design II — Lecture #2 HTML //

Images Attributes & Usage <img src="image.jpg" alt="Awesome" height="32" width="32"> Compatible

GRA422 Electronic Document Design II — Lecture #2 HTML //

GRA422 Electronic Document Design II — Lecture #2 HTML //

GRA422 Electronic Document Design II — Lecture #2 HTML //

Footers Secondary Scripts CSS in footer causes page to progressively

Accessibility Guidelines Web Content Accessibility Guidelines (WCAG) Web Accessibility Initiative

Our tool for making sites Code and/or design focus Code

Dreamweaver Why not a text editor or InDesign? Centralized system

GRA422 Electronic Document Design II — Lecture #2 HTML //

GRA422 Electronic Document Design II — Lecture #2 HTML //

GRA422 Electronic Document Design II — Lecture #2 HTML //

The Box Model Determining object size .box { margin: 10px;

Positioning Techniques Floats .left { border: 1px solid #000; float:

Positioning Techniques Clears .left { border: 1px solid #000; float:

GRA422 Electronic Document Design II — Lecture #2 HTML //

SOURCE: https://wiki.mozilla.org/ Drumbeat/website/wireframes

GRA422 Electronic Document Design II — Lecture #2 HTML //

GRA422 Electronic Document Design II — Lecture #2 HTML //

SOURCE: https://fedoraproject.org/w/uploads/5/5f/Spinsfpo-sitemap.png

Clara Gaggero Project in collaboration with Adrian Westaway. Graphic Design:

In Closing Wireframes & Sitemap Sell the client on your