building webs better

Building Webs Better

Building Better Webs and Web Applications Organically

David Eldridge

Please feel free to use this document however you would like. Attribution is appreciated.

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

[ 2 ]Please feel free to use this document however you would like. Attribution is appreciated.

http://www.snco.us/

Overview

• Introduction

• Accessibility

• SEO, Semantics, Separation and Standards

• Performance Considerations

• Return on Investment (ROI)

• Questions and Housekeeping


Inseparability

• SEO, semantics, access/accessibility, etc. are like yarn on a sweater:

– Carefully interwoven

– Indiscernibly separate

• Separating these topics can be difficultDon’t do it: they work together well


Accessibility:Some Assumptions

• Bad Word.

• Very Expensive.

• Low ROI.


Access:Not Just Accessibility

What it’s not

• Protection(against those with disabilities)

What it is

• UA-appropriate

• Flexible

• Free

– Like speech

– Like beer


Access:for People

• Screen

• Paper

• Screen readers

• Mobile/handheld/phone/PDA

• Non-standard devices

• DOM—etc.


Access:for Machines

• Educational/Industrial Data mining

• Search Engines

• [Spam bots, too: sorry ]

• DOM—etc.


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


http://www.microsoft.com/windows/internet-explorer/features/web-slices.aspx?tabid=1&catid=1

http://www.youtube.com/watch?v=O05zNYn-WCo

https://addons.mozilla.org/en-US/firefox/addon/5850



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.


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.


SEO, Semantics and Standards

• Standards are BAD! Err…?

– Help dumb people (like designers) to excel

– Avoid Hard Knocks University

– Level the playing field


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…


http://www.w3.org/

http://www.whatwg.org/

http://www.ecma-international.org/

http://www.webstandards.org/

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


SEO, Semantics and StandardsStandards ‘Decouple’ Documents

• Encourage document-level separation of

– Markup/Content ([X]HTML)

– Style (CSS/XSLT)

– Behavior (JavaScript)



• 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



• 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


http://dublincore.org/

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>


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


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


http://microformats.org/

http://microformats.org/wiki/hcard

http://microformats.org/wiki/hcalendar

http://googlewebmastercentral.blogspot.com/2009/05/introducing-rich-snippets.html

http://marketshare.hitslink.com/firefox-market-share.aspx?qprid=0&sample=28



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


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)


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)


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


SemanticsWhy Not?

• Learning curve?– Yes.

• Code Bloat?– No…

Consider another simple example.


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>


SemanticsWhy Not?

• HTML4, HTML5, XTHML– <table class="phone-chart"…>…<tr><td class="phone-work-fax">785.555.1212</td></tr></table>


Brass Tacks

• Some practical implementation examples and ideas.


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


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>


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.


http://markmail.org/message/fypi6ifoovoup6pb

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"/>


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


http://msdn.microsoft.com/en-us/library/exc57y7e.aspx





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 somecases, leaving users bewildered.


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


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


Questions?

• No?

• Good.


Questions?


Contact

• Please send any more questions to

– [email protected]

– 785.783.4755

– Google+ j.mp/rgum

• For this presentation visit goo.gl/PmoDw


mailto:[email protected]

http://j.mp/rgum

http://j.mp/rgum

http://goo.gl/PmoDw

http://goo.gl/PmoDw

building webs better

Technology

document object modelad

web clipssafari

web applications

print devices

apithree simple examples

addl codingfireclipsff3

specialized apps

playing field