Worry-Free Web Development Estelle Weyl EvoTech.Net

Plan Ahead “An ounce of prevention is worth a pound of cure” -Ben Franklin “A stitch in time saves nine” - Thomas Fuller (or his mom), 1732 “Code it right the first time” - Me

“An ounce of prevention is worth a pound of cure”

-Ben Franklin

“A stitch in time saves nine”

- Thomas Fuller (or his mom), 1732

“Code it right the first time”

- Me

Worry-Free Web Development Estelle Weyl EvoTech.Net By coding content, presentation and behavior separately, your code will work cross browser and cross device: without having to re-code when a new technology or device comes on the market. By coding properly, you can create usable, accessible and working web sites while saving yourself headaches down the road

By coding content, presentation and behavior separately, your code will work cross browser and cross device: without having to re-code when a new technology or device comes on the market.

By coding properly, you can create usable, accessible and working web sites while saving yourself headaches down the road

CSSZenGarden All of their sites have their sites have the exact same XHTML with the exception of one line: the call to the external CSS. ~

All of their sites have their sites have the exact same XHTML with the exception of one line: the call to the external CSS. ~

Target Audience Who is your target audience? What devices are they using to access the web? How does it differ from how you access the web? How will it differ 5 years from now? 10 years? What is the purpose of your site? How will that change in the next 10 years?

Who is your target audience?

What devices are they using to access the web?

How does it differ from how you access the web?

How will it differ 5 years from now? 10 years?

What is the purpose of your site?

How will that change in the next 10 years?

Site Structure Expandable, upgradeable, changeable?

Expandable,

upgradeable,

changeable?

The “Right” way Code to the web standards - not to a browser Separate XHTML, CSS, and JavaScript Separation of presentation from structure Separation of behavior from presentation

Code to the web standards - not to a browser

Separate XHTML, CSS, and JavaScript

Separation of presentation from structure

Separation of behavior from presentation

XHTML (how) All elements and attribute names are lower case All attribute values are quoted All elements require a closing tag If empty, the elements is closed with a slash No attribute minimization in strict XHTML, inline elements are in block elements XHTML is an XML application written in well formed XML

All elements and attribute names are lower case

All attribute values are quoted

All elements require a closing tag

If empty, the elements is closed with a slash

No attribute minimization

in strict XHTML, inline elements are in block elements

XHTML is an XML application written in well formed XML

Semantics! Use the correct <element> for each component of your page. Code understood by you & others working it Screen readers understand it Search engines understand it Mobile devices, printers, parsers, etc!

Use the correct <element> for each component of your page.

Code understood by you & others working it

Screen readers understand it

Search engines understand it

Mobile devices, printers, parsers, etc!

XHTML (why) Better: XHTML is easier to manipulate, encourages use of CSS, is extensible, and is supported by mobile devices. and Easier: The syntax rules for XHTML are consistent. XHTML is easier to author and to maintain, the structure is more apparent and problem syntax is easier to spot.

Better: XHTML is easier to manipulate, encourages use of CSS, is extensible, and is supported by mobile devices.

and

Easier: The syntax rules for XHTML are consistent. XHTML is easier to author and to maintain, the structure is more apparent and problem syntax is easier to spot.

XHTML (why, part II) Easier to maintain XML (XSL, XSLT, RSS, Machine readable) Easier to learn Futureproof Difference between XHTML and HTML is invisible to the PC browser user.

Easier to maintain

XML (XSL, XSLT, RSS, Machine readable)

Easier to learn

Futureproof

Difference between XHTML and HTML is invisible to the PC browser user.

Layer and Enhance Your initial document should be pure, valid XHTML Your page should work with just your XHTML ~ Don't create dependencies between XHTML, CSS and JavaScript

Your initial document should be pure, valid XHTML

Your page should work with just your XHTML ~

Don't create dependencies between

XHTML, CSS and JavaScript

Layer and Enhance (XHTML cont.) Your XHTML should be: In the right order to be read In the right order for search engines Accessible Work in all browsers Work in all media

Your XHTML should be:

In the right order to be read

In the right order for search engines

Accessible

Work in all browsers

Work in all media

Layer and Enhance (XHTML cont.) Your XHTML should not: Have divitis Have non-contextual images ~ Have non linking links

Your XHTML should not:

Have divitis

Have non-contextual images ~

Have non linking links

Layer and Enhance (XHTML cont.) Your XHTML should not: Have divitis Have non-contextual images ~ Have non linking links Have tables!!!

Your XHTML should not:

Have divitis

Have non-contextual images ~

Have non linking links

Have tables!!!

Semantics <div> and <span> have virtually no semantic meaning.

<div> and <span> have virtually no semantic meaning.

Semantics <div> and <span> have virtually no semantic meaning. <br /> is only for poetry!

<div> and <span> have virtually no semantic meaning.

<br /> is only for poetry!

Semantics <div> and <span> have virtually no semantic meaning. <br /> is only for poetry! <table> is for data ~

<div> and <span> have virtually no semantic meaning.

<br /> is only for poetry!

<table> is for data ~

Tableless Float everything? Parent <div> has 100% width and floated { clear: both;} on section <div> Examples: Dreamweaver ~ Grids ~ Faux columns ~

Float everything?

Parent <div> has 100% width and floated

{ clear: both;} on section <div>

Examples:

Dreamweaver ~

Grids ~

Faux columns ~

Backward compatible Don't code to old browsers, but do avoid breaking them Add extra outer div Don't include XML declaration

Don't code to old browsers, but do avoid breaking them

Add extra outer div

Don't include XML declaration

Presentation Layer ... CSS Add the presentation layer Develop in compliant browser Keep browser quirks in mind.... Avoid hacks Reset the default rendering to equalize browser differences Presentation effects

Add the presentation layer

Develop in compliant browser

Keep browser quirks in mind....

Avoid hacks

Reset the default rendering to equalize browser differences

Presentation effects

External stylesheets <link href=&quot;myCSS.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />

<link href=&quot;myCSS.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; />

Develop in Firefox Get the site working with a compliant browser Keep browser quirks in mind, but don't cater to them ex. Double margin on float in IE6 Develop in FireFox rather than Safari

Get the site working with a compliant browser

Keep browser quirks in mind, but don't cater to them

ex. Double margin on float in IE6

Develop in FireFox rather than Safari

Presentation Layer ... CSS Keep browser quirks in mind.... Avoid hacks Set defaults for all elements to minimize browser differences This will reduce typing! http://www.evotech.net/blog/2007/04/css-best-practices/ http://developer.yahoo.com/yui/fonts/ http://developer.yahoo.com/yui/reset/

Keep browser quirks in mind....

Avoid hacks

Set defaults for all elements to minimize browser differences

This will reduce typing!

http://www.evotech.net/blog/2007/04/css-best-practices/

http://developer.yahoo.com/yui/fonts/

http://developer.yahoo.com/yui/reset/

Presentational Effects in CSS Rollovers, Background image changes Drop down menus

Rollovers,

Background image changes

Drop down menus

Presentation Layer ... CSS Once that's all working... enhance with javaScript

Once that's all working...

enhance with javaScript

Behavior Layer ... JavaScript ENHANCEMENT Start with a site that WORKS without JavaScript Use JS to enhance the user experience ex. if a “link” isn't linking anywhere, create it dynamically.

ENHANCEMENT

Start with a site that WORKS without JavaScript

Use JS to enhance the user experience

ex. if a “link” isn't linking anywhere, create it dynamically.

Including JavaScript <script type=”text/javascript”> type=”text/javascript” is required language=”javascript” is not allowed in strict

<script type=”text/javascript”>

type=”text/javascript” is required

language=”javascript” is not allowed in strict

Including JavaScript <script type=”text/javascript”> type=”text/javascript” is required language=”javascript” is not allowed in strict Dreamweaver starter scripts gets this wrong

<script type=”text/javascript”>

type=”text/javascript” is required

language=”javascript” is not allowed in strict

Dreamweaver starter scripts gets this wrong

Including JavaScript <script type=&quot;text/javascript&quot;> //<![CDATA[ code here //]]> </script>

<script type=&quot;text/javascript&quot;>

//<![CDATA[

code here

//]]>

</script>

Including JavaScript <script type=&quot;text/javascript&quot; src=&quot;m.js&quot;></script> Don't include anything between the open and closing tags Include the external javascript file at the BOTTOM of the page Sunday, go to unobtrusive JavaScript at 1:00 on Sunday by Paul Davis. Please heckle him

<script type=&quot;text/javascript&quot; src=&quot;m.js&quot;></script>

Don't include anything between the open and closing tags

Include the external javascript file at the BOTTOM of the page

Sunday, go to unobtrusive JavaScript at 1:00 on Sunday by Paul Davis. Please heckle him

Event Handlers target.addEventListener(type, listener, useCapture); var container = document.getElementById('myId'); var links = container.getElementsByTagName('a'); for (var i=0; i < links.length; i++){ links[i].addEventListener('click', function(){ functionhere;}, false); }

target.addEventListener(type, listener, useCapture);

var container = document.getElementById('myId');

var links = container.getElementsByTagName('a');

for (var i=0; i < links.length; i++){

links[i].addEventListener('click',

function(){ functionhere;}, false);

}

Thanks to: OpenOffice.org Engage.com Adobe / Community MX You

OpenOffice.org

Engage.com

Adobe / Community MX

You

Contact Information Estelle Weyl [email_address] http://evotech.net/blog

Estelle Weyl [email_address] http://evotech.net/blog