1 / 40

Better Webs

Better Webs. Building Better Webs and Web Applications Organically David Eldridge. Introduction: Bio Webmastery /Dev/Design. Shawnee County ( www.snco.us ) HTML5 (mostly), CSS, JavaScript, Legacy ASP Supporting ASP.NET programmers Reforming Worship, Good. Books. Free., etc.

talen
Download Presentation

Better Webs

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Overview • Introduction • Accessibility • SEO, Semantics, Separation and Standards • Performance Considerations • Return on Investment (ROI) • Questions and Housekeeping Shawnee County's logo is protected by law. All other presentation content is in the public domain.

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

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

  6. What it’s not Protection(against those with disabilities) What it is UA-appropriate Flexible Free Like speech Like beer Access:Not Just Accessibility Shawnee County's logo is protected by law. All other presentation content is in the public domain.

  7. Access:for People • Screen • Paper • Screen readers • Mobile/handheld/phone/PDA • Non-standard devices • DOM—etc. Shawnee County's logo is protected by law. All other presentation content is in the public domain.

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

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

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

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

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

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

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

  15. SEO, Semantics and StandardsStandards ‘Decouple’ Documents • Encourage document-level separation of • Markup/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.

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

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

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

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

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

  21. 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: • IE8, Safari3/4, Firefox Shawnee County's logo is protected by law. All other presentation content is in the public domain.

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

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

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

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

  26. 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.

  27. 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,'andalemono',mono;">785.555.1212</td></tr></table> • HTML3- would be worse with font tags, etc. Shawnee County's logo is protected by law. All other presentation content is in the public domain.

  28. 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.

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

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

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

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

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

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

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

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

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

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

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

  40. Contact • Please send questions to goodbooksfree@gmail.com785.783.4755j.mp/rgum • For this presentation and more visitdev.goodbooksfree.comIt’s sparse now…there should be more later. Shawnee County's logo is protected by law. All other presentation content is in the public domain.

More Related