Buildling Better Webs

Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Better Webs
Building Better Webs and Web Applications OrganicallyDavid Eldridge

Introduction
Shawnee County Webmaster
Support ASP.NET developers for specialized apps.
Maintain www.snco.us with HTML, CSS, JavaScript and legacy ASP
A Federal Webmaster (KSARNG/OSS)
Began learning standards/accessibility
Fed: Standards or Die!
Good beginning
I always use them

Overview
Introduction
Accessibility
SEO, Semantics, Separation and Standards
Performance Considerations
Return on Investment (ROI)
Questions and Housekeeping

Inseparability
SEO, semantics, access/accessibility, etc. are like yarn on a sweater:
Carefully interwoven
Indiscernibly disparate
Separating these topics can be difficultDon’t do it: they work together well

Accessibility:Some Assumptions
Bad Word.
Very Expensive.
Low ROI.

Access:Not Just Accessibility
What it’s not
Protection(against those with disabilities)
What it is
UA-appropriate
Flexible
Free
Like speech
Like beer

Access:for People
Screen
Paper
Screen readers
Mobile/handheld/phone/PDA
Non-standard devices
DOM—etc.

Access:for Machines
Educational/Industrial Data mining
Search Engines
[Spam bots, too: sorry ]
DOM—etc.

Access:Document Object Model
Ad hoc API
Three simple examples:
Web Clips—Safari 3+
Web Slices—IE8 (product site)
Requires some add’l coding
“FireClips”—FF3 (video|add-on)
Other capabilities available and coming

Access:DOM—Extensibility
It can be traversed, styled, destroyed, created, and appended to dynamically
JavaScript
Style: CSS/XSLT
Server-side code:
PHP and Ruby (on Rails) among others support this
In the future in Visual Studio?Don’t be surprised, but don’t hold your breath.

Access:User Interface
Offer users early access to the whole page:
e.g. “Go directly to content, or navigation.”
Hide it from screen and print devices, etc.
Offer it to mobile, non-standard devices, etc.
JavaScript is not everywhere. Consider your audience.

SEO, Semantics and Standards
Standards are BAD! Err…?
Help dumb people (like designers) to excel
Avoid Hard Knocks University
Level the playing field

SEO, Semantics and StandardsContinued
W3C, WHATWG, Ecma Int’l, WaSP, etc.
Recognize trends
Codify standards
Educate and Inform Educators (mostly WaSP)
Empower developers
Guide browser makers…

SEO, Semantics and StandardsBrowser Changes
FF, Safari implementing Canvas and SVG
IE8, FF, Safari implementing <audio> and <video> elements (good and bad):
IE8/MS: MS formats 
Safari/Apple: QuickTime formats 
Firefox/Mozilla: Ogg formats 

SEO, Semantics and StandardsStandards ‘Decouple’ Documents
Encourage document-level separation of
Markup/Content ([X]HTML)
Style (CSS/XSLT)
Behavior (JavaScript)

Standards save work
<video>/<audio> v. non-standard <embed>
border-radius v. rounded corner JS/CSS/HTML mess
:hover v. old bloated hover image effect
CSS font declarations v. non-semantic <font> tag

Standards add previously unrealized functionality
Microsoft’s XHR (XML HTTP Request):Now Ajax (or AJAX if you insist)
Microsoft’s JPEG XR (HD Photo, previously Windows Media Photo): Better compression for even larger image files, both lossy and lossless

Organic SEOHow Standards and SEO Relate
Semantic tagging informs content
Good: head>title, h1, span.phone-number
Poor: font, small, big, b, i, blink
Metadata fills in the gaps with keywords, authorship, date and other information
Dublin Core metadata is a good framework

Organic SEOContinued
Consider:
<title>Banking Security • BankTwo</title>…<h1>Security Procedures</h1>
Or:
<title>BankTwo</title>…<span style="font-size:16px;color:#333333;font-family:georgia;display:block;">Security</span>

SemanticsInforming Data
Framework for categorization and the DOM:
h1-h6, dl, dt, dd, ol, ul, li, dfn, abbr, p, address
Classes (and IDs) further augment good semantics
abbr.acronym, ol.contents, span.phone-work-voice, span.name-last, ul.ingredients, ol.instructions, div#content, div#footer-legal

SemanticsInforming Data
Semantics help us and machines cull data:
Widgets: clips, slices etc.
Microformatslike hCard, hCalendar, hAtom and hReview
Google now uses RDFa/hReview and hCard
You don’t need to pioneer these technologies
Google took years to jump on microformats
Firefox didn’t get over20% market in a day
But folks are using these now
All 3 big browsers use Web Slices/Clips

Brass Tacks:Get out of Line: Use the DOM
Standards make using JavaScript, DOM scripting and Ajax easier and better
It eases maintenance
Less inline code
It keeps code legible…
Again, less incline code

Brass Tacks:Get out of Line: Use the DOM
It extends easily
Classes, ID’s and the DOM make good hooks for JS and style
At best, they require a script tag
More often they will also need more classes, ids and/or elements.
It fails well
Users don’t miss it when it’s gone(Everything still works)

Brass Tacks:JavaScript and Accessibility
Some users and UAs don’t see JavaScript fire:
Screen readers
Audibly indicating DOM-scripting and Ajax changes through screen readers is a booger.
Some UAs neglect it; others handle it poorly.
Those behind corporate firewalls
Some mobile UAs
Others with JS disabled (purposefully or not)

SemanticsCost and Value
Building sloppy code is cheap
Maintaining it isn’t: I know.
Inline style (and event handlers) create larger files, and make clean-up tedious
Semantics offer ad hoc documentation

SemanticsWhy Not?
Learning curve?
Yes.
Code Bloat?
No…Consider another simple example.

SemanticsWhy Not?
HTML3 and earlier
<table style="color:#555;background-color:#eee;border:1px #333;vertical-align:bottom; "…>…<tr><td style="text-align:right;font-family:consolas,'andalemono',mono;">785.555.1212</td></tr></table>

SemanticsWhy Not?
HTML4, HTML5, XTHML
<table class="phone-chart"…>…<tr><td class="phone-work-fax">785.555.1212</td></tr></table>

Brass Tacks
Some practical implementation examples and ideas.

Brass Tacks:Don’t use XHTML
The popular XHTML implementation is incomplete/incorrect.
It’s incorrect to send it as "text/html",
It should be "application/xhtml+xml"
It’s treated by most browsers as tag soup
Have you ever seen xhtml fail like an XML feed would?
IE6-8 downloads well-formed XHTML like a binary
Consider Ian Hickson’s warning, against the improper implementation of XHTML.

Brass Tacks:Character Encoding
Right after the head, even before <title>:
make sure the title and all after are properly encoded
It’s important for good data and security…
For display
You donâ€™t want to see that.
For good capture and security:
especially with intérñatiönal users

Brass Tacks:Character Encoding
Unless you have particular needs use UTF-8
<!DOCTYPE HTML…><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Hello, World</title>

Brass Tacks:JavaScript Bottlenecks
HTTP/1.1 allows multiple persistent connections.
Modern browsers load multiple resources (text, image, audio, etc.) at once:
Without manipulation, UAs don’t allow over two scripts to pull in at once.
When able, load scripts last (i.e. before </body>), or use the onload event handler (or similar device) to build your script request dynamically at full load.

Brass Tacks:CSS Bottlenecks
Make CSS external (usu. automatic in VS)
But if not, avoid using the @import command in <style> tags, as it causes problems with concurrent downloading in some browsers
Place it as soon after the title as possible:
<!doctype…>…<title>I am a title</title><link rel="stylesheet"/>

Brass Tacks:More JS Considerations
Be aware of VS controls that generate non-standard mark-up:
e.g. ListBox, DropDownList, AdRotator and more.
As our DBA always reminds us, never trust the client (device).

Brass Tacks:More JS Considerations
The JS pseudo-protocol is not a protocol…
If you use it or inline event handlers with href="#", the event will not fire in some cases, leaving users bewildered.

Conclusion:ROI
Ease of extension
Value of data: contentis more informed
Natural/Accidental/Organic SEO
Faster page loads/decreased server load
Greater user access/cullability

Conclusion:Last Things
I won’t be there to blame when your app fails
And, they’ll laugh at you for listening to a designer
Standards are usually optimal: but not always
Standards change: so don’t follow blindly
If they don’t help now, they may help later
Make your boss happy: the food will follow

Questions?
No?
Good.

Questions?

Resources and Tools
Firefox: mozilla.com/firefox
Firebug: getfirebug.com
Developer’s Toolbar: tr.im/ffwdtb
Think Firefox Web Developer’s Toolbar (ffwdtb)
Yslow for Firebug: tr.im/yslow
Get IE8! It’s out: tr.im/getie8
More available at www.snco.us/?dev

Contact
Please send any more questions todavid.eldridge@snco.us785.233.8200x4497tr.im/rgum
For this presentation and more visitdev.goodbooksfree.comIt’s sparse now…there should be more later.

Buildling Better Webs

by guesta429c09e

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Buildling Better Webs Presentation Transcript