Buildling Better Webs

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

Shawnee County's logo is protected by law. All other presentation content is in the public domain.IntroductionShawnee County WebmasterSupport ASP.NET developers for specialized apps.Maintain www.snco.us with HTML, CSS, JavaScript and legacy ASPA Federal Webmaster (KSARNG/OSS)Began learning standards/accessibilityFed: Standards or Die!Good beginningI always use them

Shawnee County's logo is protected by law. All other presentation content is in the public domain.OverviewIntroductionAccessibilitySEO, Semantics, Separation and StandardsPerformance ConsiderationsReturn on Investment (ROI)Questions and Housekeeping

Shawnee County's logo is protected by law. All other presentation content is in the public domain.InseparabilitySEO, semantics, access/accessibility, etc. are like yarn on a sweater:Carefully interwovenIndiscernibly disparateSeparating these topics can be difficultDon’t do it: they work together well

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Accessibility:Some AssumptionsBad Word.Very Expensive.Low ROI.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Access:Not Just AccessibilityWhat it’s notProtection(against those with disabilities)What it isUA-appropriateFlexibleFreeLike speechLike beer

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Access:for PeopleScreenPaperScreen readersMobile/handheld/phone/PDANon-standard devicesDOM—etc.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Access:for MachinesEducational/Industrial Data miningSearch Engines[Spam bots, too: sorry ]DOM—etc.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Access:Document Object ModelAd hoc APIThree 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

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Access:DOM—ExtensibilityIt can be traversed, styled, destroyed, created, and appended to dynamicallyJavaScriptStyle: CSS/XSLTServer-side code: PHP and Ruby (on Rails) among others support thisIn the future in Visual Studio?Don’t be surprised, but don’t hold your breath.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Access:User InterfaceOffer 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.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SEO, Semantics and StandardsStandards are BAD! Err…?Help dumb people (like designers) to excelAvoid Hard Knocks UniversityLevel the playing field

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SEO, Semantics and StandardsContinuedW3C, WHATWG, Ecma Int’l, WaSP, etc.Recognize trendsCodify standardsEducate and Inform Educators (mostly WaSP)Empower developersGuide browser makers…

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SEO, Semantics and StandardsBrowser ChangesFF, Safari implementing Canvas and SVGIE8, FF, Safari implementing <audio> and <video> elements (good and bad):IE8/MS: MS formats Safari/Apple: QuickTime formats Firefox/Mozilla: Ogg formats 

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SEO, Semantics and StandardsStandards ‘Decouple’ DocumentsEncourage document-level separation ofMarkup/Content ([X]HTML)Style (CSS/XSLT)Behavior (JavaScript)

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SEO, Semantics and StandardsStandards save work<video>/<audio> v. non-standard <embed>border-radius v. rounded corner JS/CSS/HTML mess:hover v. old bloated hover image effectCSS font declarations v. non-semantic <font> tag

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SEO, Semantics and StandardsStandards add previously unrealized functionalityMicrosoft’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 RelateSemantic tagging informs contentGood: head>title, h1, span.phone-numberPoor: font, small, big, b, i, blinkMetadata fills in the gaps with keywords, authorship, date and other informationDublin Core metadata is a good frameworkShawnee County's logo is protected by law. All other presentation content is in the public domain.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Organic SEOContinuedConsider:<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>

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SemanticsInforming DataFramework for categorization and the DOM:h1-h6, dl, dt, dd, ol, ul, li, dfn, abbr, p, addressClasses (and IDs) further augment good semanticsabbr.acronym, ol.contents, span.phone-work-voice, span.name-last, ul.ingredients, ol.instructions, div#content, div#footer-legal

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SemanticsInforming DataSemantics help us and machines cull data:Widgets: clips, slices etc.Microformatslike hCard, hCalendar, hAtom and hReviewGoogle now uses RDFa/hReview and hCardYou don’t need to pioneer these technologiesGoogle took years to jump on microformatsFirefox didn’t get over20% market in a dayBut folks are using these nowAll 3 big browsers use Web Slices/Clips

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:Get out of Line: Use the DOMStandards make using JavaScript, DOM scripting and Ajax easier and betterIt eases maintenanceLess inline codeIt keeps code legible…Again, less incline code

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:Get out of Line: Use the DOMIt extends easilyClasses, ID’s and the DOM make good hooks for JS and styleAt best, they require a script tagMore often they will also need more classes, ids and/or elements.It fails wellUsers don’t miss it when it’s gone(Everything still works)

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:JavaScript and AccessibilitySome users and UAs don’t see JavaScript fire:Screen readersAudibly indicating DOM-scripting and Ajax changes through screen readers is a booger.Some UAs neglect it; others handle it poorly.Those behind corporate firewallsSome mobile UAsOthers with JS disabled (purposefully or not)

Shawnee County's logo is protected by law. All other presentation content is in the public domain.SemanticsCost and ValueBuilding sloppy code is cheapMaintaining it isn’t: I know.Inline style (and event handlers) create larger files, and make clean-up tediousSemantics offer ad hoc documentation

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.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.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>

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>

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass TacksSome practical implementation examples and ideas.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:Don’t use XHTMLThe 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 soupHave you ever seen xhtml fail like an XML feed would?IE6-8 downloads well-formed XHTML like a binaryConsider Ian Hickson’s warning, against the improper implementation of XHTML.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:Character EncodingRight after the head, even before <title>:make sure the title and all after are properly encodedIt’s important for good data and security…For displayYou donâ€™t want to see that.For good capture and security:especially with intérñatiönal users

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:Character EncodingUnless 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>

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:JavaScript BottlenecksHTTP/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.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:CSS BottlenecksMake 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 browsersPlace it as soon after the title as possible:<!doctype…>…<title>I am a title</title><link rel="stylesheet"/>

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:More JS ConsiderationsBe 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).

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Brass Tacks:More JS ConsiderationsThe 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.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Conclusion:ROIEase of extensionValue of data: contentis more informedNatural/Accidental/Organic SEOFaster page loads/decreased server loadGreater user access/cullability

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Conclusion:Last ThingsI won’t be there to blame when your app failsAnd, they’ll laugh at you for listening to a designerStandards are usually optimal: but not alwaysStandards change: so don’t follow blindlyIf they don’t help now, they may help laterMake your boss happy: the food will follow

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Questions?No?Good.

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Questions?

Shawnee County's logo is protected by law. All other presentation content is in the public domain.Resources and ToolsFirefox: mozilla.com/firefoxFirebug: getfirebug.comDeveloper’s Toolbar: tr.im/ffwdtbThink Firefox Web Developer’s Toolbar (ffwdtb)Yslow for Firebug: tr.im/yslowGet IE8! It’s out: tr.im/getie8More available at www.snco.us/?dev

Shawnee County's logo is protected by law. All other presentation content is in the public domain.ContactPlease send any more questions todavid.eldridge@snco.us785.233.8200x4497tr.im/rgumFor this presentation and more visitdev.goodbooksfree.comIt’s sparse now…there should be more later.

Buildling Better Webs

Recommended

More Related Content

Similar to Buildling Better Webs (20)

Recently uploaded (20)

Buildling Better Webs