Better Webs - Dark Roast Web Services

numbergrandioseInternet and Web Development

Feb 5, 2013 (4 years and 9 months ago)

178 views

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

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

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.


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.

Overview


Introduction


Access
ibility


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 difficult

Don’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
Standards

Continued


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
Standards

Browser 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
Standards

Standards

‘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 SEO

How 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 SEO

Continued


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.

Semantics

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

Semantics

Informing 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

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

Semantics

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

Semantics

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

Semantics

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

Semantics

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

Semantics

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

Semantics

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

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

Semantics

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

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


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

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.

Questions?


No
? Good
.

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:
M
ozilla
F
irefox
W
eb
D
eveloper’s
T
ool
b
ar


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.

Contact


Please send

questions to
goodbooksfree@gmail.com

785.783.4755

j.mp/rgum


For this presentation and more visit

dev.
g
ood
b
ooks
f
ree.com

It’s sparse now…there should be more later.