Download - Better Webs
![Page 1: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/1.jpg)
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 Organically
David Eldridge
![Page 2: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/2.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Introduction: BioWebmastery/Dev/Design
• Shawnee County (www.snco.us)– HTML5 (mostly), CSS, JavaScript, Legacy ASP– Supporting ASP.NET programmers
• Reforming Worship, Good. Books. Free., etc.– XHTML/HTML5, PHP, CSS, and JS
• Federal: State Surgeon (KS Army Nat’l. Guard)– Good beginning with standards/accessibility• Fed: Standards or Die! XHTML/CSS
– Now, I always use them
![Page 3: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/3.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Overview
• Introduction• Accessibility• SEO, Semantics, Separation and Standards• Performance Considerations• Return on Investment (ROI)• Questions and Housekeeping
![Page 4: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/4.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 5: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/5.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Accessibility:Some Assumptions
• Bad Word.• Very Expensive.• Low ROI.
![Page 6: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/6.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Access:Not Just Accessibility
What it’s not• Protection
(against those with disabilities)
What it is• UA-appropriate• Flexible• Free– Like speech– Like beer
![Page 7: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/7.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Access:for People
• Screen• Paper• Screen readers• Mobile/handheld/phone/PDA• Non-standard devices• DOM—etc.
![Page 8: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/8.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Access:for Machines
• Educational/Industrial Data mining• Search Engines• [Spam bots, too: sorry ]• DOM—etc.
![Page 9: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/9.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 10: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/10.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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.
![Page 11: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/11.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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.
![Page 12: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/12.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SEO, Semantics and Standards
• Standards are BAD! Err…?– Help dumb people (like designers) to excel– Avoid Hard Knocks University– Level the playing field
![Page 13: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/13.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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…
![Page 14: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/14.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 15: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/15.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SEO, Semantics and StandardsStandards ‘Decouple’ Documents
• Encourage document-level separation of– Markup/Content ([X]HTML)– Style (CSS/XSLT)– Behavior (JavaScript)
![Page 16: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/16.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SEO, Semantics and Standards
• 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
![Page 17: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/17.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SEO, Semantics and Standards
• 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
![Page 18: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/18.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 19: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/19.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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>
![Page 20: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/20.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 21: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/21.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsInforming Data
• Semantics help us and machines cull data:– Widgets: clips, slices etc.– Microformats like 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 over 20% market in a day• But folks are using these now
• All 3 big browsers use Web Slices/Clips:– IE8, Safari3/4, Firefox
![Page 22: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/22.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsUsing the DOM with JavaScript
• Standards make using JavaScript, DOM scripting and Ajax easier and better– It eases maintenance• Less inline code
– It keeps code legible…• Again, less inline code
![Page 23: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/23.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsUsing the DOM with JavaScript
– 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)
![Page 24: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/24.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsThe JavaScript, DOM and Access
• 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)
![Page 25: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/25.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 26: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/26.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsWhy Not?
• Learning curve?– Yes.
• Code Bloat?– No…
Consider another simple example.
![Page 27: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/27.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsWhy Not?
• HTML4 (the hard way):– <table style="color:#555;background-color:#eee;border:1px #333;vertical-align:bottom; "…>…<tr><td style="text-align:right;font-family:consolas,'andale mono',mono;">785.555.1212</td></tr></table>
• HTML3- would be worse with font tags, etc.
![Page 28: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/28.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
SemanticsWhy Not?
• HTML4, HTML5, XTHML– <table class="phone-chart"…>…<tr><td class="phone-work-fax">785.555.1212</td></tr>…</table>
![Page 29: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/29.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Brass Tacks
• Some practical implementation examples and ideas.
![Page 30: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/30.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Brass Tacks:Don’t use XHTML
• The popular XHTML implementation is incomplete/incorrect.– It’s "application/xhtml+xml" not "text/html"– Browsers treat it like tag soup (<=HTML4)• XHTML doesn’t fail (as it should) like an XML feed
– IE6-8 treat well-formed XHTML like a binary file– Consider Ian Hickson’s warning, against the
improper implementation of XHTML.
![Page 31: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/31.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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
![Page 32: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/32.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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>
![Page 33: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/33.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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.
![Page 34: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/34.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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"/>
![Page 35: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/35.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
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.
![Page 36: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/36.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Conclusion:ROI
• Ease of extension• Value of data: content is more informed• Natural/Accidental/Organic SEO• Faster page loads/decreased server load• Greater user access/cullability
![Page 37: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/37.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Conclusion:Last Things
• I won’t be there to blame when your app fails• Standards are usually optimal: but not always• Standards change: so don’t follow blindly• If they don’t help now, they may help later
![Page 38: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/38.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Questions?
• No? Good.
![Page 39: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/39.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Resources and Tools
• Chrome: chrome.google.com• Firefox: mozilla.com/firefox• Firebug (for Firefox): getfirebug.com• Yslow (for Firebug [for Firefox]): j.mp/yslow• Developer’s Toolbar: j.mp/mfwdtb– Think: Mozilla Firefox Web Developer’s Toolbar
• Latest IE: ie.microsoft.com• More available at www.snco.us/?dev
![Page 40: Better Webs](https://reader035.vdocuments.mx/reader035/viewer/2022062521/568163cc550346895dd50e1b/html5/thumbnails/40.jpg)
Shawnee County's logo is protected by law. All other presentation content is in the public domain.
Contact
• Please send questions to [email protected]/rgum
• For this presentation and more visitdev.goodbooksfree.comIt’s sparse now…there should be more later.