• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Buildling Better Webs
 

Buildling Better Webs

on

  • 2,604 views

A brief outline of some best practices for building webs.

A brief outline of some best practices for building webs.

Statistics

Views

Total Views
2,604
Views on SlideShare
2,602
Embed Views
2

Actions

Likes
0
Downloads
17
Comments
1

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • I have since left the county, if you are interested in contacting me, I can be reached at david@socklint.com.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Buildling Better Webs Buildling Better Webs Presentation Transcript

    • 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
    • Shawnee County's logo is protected by law. All other presentation content is in the public domain.
      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
    • 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
    • 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
    • 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.
    • 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
    • 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.
    • 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.
    • 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
    • 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.
    • 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.
    • 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
    • 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…
    • 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 
    • 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)
    • 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
    • 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
    • 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.
    • 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>
    • 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
    • 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.
      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
    • 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 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
    • 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 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)
    • Shawnee County's logo is protected by law. All other presentation content is in the public domain.
      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)
    • 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
    • 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 Tacks
      Some 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 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.
    • 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
    • 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>
    • 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.
    • 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"/>
    • Shawnee County's logo is protected by law. All other presentation content is in the public domain.
      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).
    • 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.
    • 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: contentis 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.
      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
    • 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 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
    • Shawnee County's logo is protected by law. All other presentation content is in the public domain.
      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.
    • Shawnee County's logo is protected by law. All other presentation content is in the public domain.