40
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

Better Webs

  • Upload
    talen

  • View
    46

  • Download
    0

Embed Size (px)

DESCRIPTION

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. - PowerPoint PPT Presentation

Citation preview

Page 1: 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 Organically

David Eldridge

Page 2: Better Webs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Questions?

• No? Good.

Page 39: Better Webs

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

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.