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.

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

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…

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

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

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>

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

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

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

– david@wd2.us

– 785.783.4755

– Google+ j.mp/rgum

• For this presentation visit goo.gl/PmoDw

Building Webs Better

Technology

Building better readers

Building Better Models

Building Better, Building Beautiful Commission

FOOD WEBS ACTIVITY: BUILDING A FOOD WEB

Building Better Bottles

WEBs-AX Building Security & Automation 2012 Video CCTV Integration

Building Better Childhoods

Building back better

Building Better Neighbourhoods

Building Better Lives

UNDER THE INFLUENCE: WEBS AND BUILDING … · UNDER THE INFLUENCE: WEBS AND BUILDING BEHAVIOR OF PLESIOMETA ARGYRA (ARANEAE, TETRAGNATHIDAE) WHEN PARASITIZED BY HYMENOEPIMECIS ARGYRAPHAGA

Better Webs

Building Better Communities by Building Better Businesses · Building Better Communities by Building Better Businesses Wyoming-Kentwood Area Chamber of Commerce Wyoming-Kentwood Area

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

Building better emails

WEBs-AX Building Security & Automation

Buildling Better Webs

Assistive Technology: Building Bridges for Better Transitions€¦ · Building Bridges for Better Transitions ... Dragon Dictation ... Assistive Technology: Building Bridges for Better

WEBs BUILDING AUTOMATION SYSTEM ... - hbtmkto.honeywell…

Building Better Health