The Cutting Edge of Web

Semantic Markup, AJAX, and Beyond

dimitri.glazkov@gandalfdev.com

Oh My God, There’s so Much Stuff!

I am going to have to talk very fast

This is Where the Web is Going

Or at least where I think it’s going

…

Basically it’s a crapshoot

Overview

• Markup and CSS

• Web Applications

• DOM scripting

• What’s cooking?

• Discussion

Markup and CSS

Semantics, semantics …

Evolution of HTML

• ASCII art, part II

• Styling with CSS

• A language = Syntax + Grammar + Semantics

Semantic markup

• Mean what you say– Markup to convey meaning of data

• Use as prescribed– <p> identifies a block of text– <blockquote> is a block quote (not just an

indented block of text!)

• Gotta keep’em separated– No presentation in content

Structural markup

• Communicate structure of data, but not as concerned about the purity of semantics

• Little brother of semantic markup

• Easier to start with

• Feels more natural for programmers

Concrete Examples

• Graphics– Separate presentational graphics from

content graphics (e.g. http://www.microsoft.com)

• Lists of links– Use <ul> or <ol>, <li> tags

• Content areas– Use id and class names to identify content,

not presentation

Standards

• What are they good for?– Show off in front of your colleagues?– Bring down Microsoft?– Make styling easier?– Improve accessibility of your site?

Bingo!

• Accessibility, accessibility, accessibility, accessibility…

• In its widest definition– for people with disabilities– for browsers– for mechanized agents (search spiders, etc.)– for content managers

The Web Standards Project (WaSP)

• Task Forces to promote and work with industry-influencing vendors specific aspects of Web standards

• Buzz

• Backed by Web luminaries

• … and as of June 5, Microsoft is listening

Evangelization

• Dave Shea and CSS Zen Garden– Do like I do

• A List Apart– Sliding Doors– Image Replacement

• Books– Jeffrey Zeldman– Eric Meyer

Reality bites

• Uneven implementation– Pulling hair is Web developer’s favorite sport– Floatin’ and slidin’ may get you pretty far, but

not far enough

• Limitations of spec– Reordering and structuring content

The “Stretchy Pants” Test

– In each area of the layout that will have changing content, place markup whose presentation exceeds the width and/or height that is originally allocated for the area. Doing so must not cause the areas to:

• Rearrange and change (break) the layout • Bleed one over another • Hide content of other areas.

– This condition should still hold true if the browser window is resized to any width or height.

The Ugly Truth About CSS Layouts

• Yes, you still need tables– Well, 2-dimensional grids, to be exact

The “Anchored Corner”problem

The “Common Edge”problem

Coping

• Validatorians– “My site validates! Ni!”

• Standardistas– “Your browser doesn’t support standards.

Please go away”

• Hackers– “If we put $@#^ in front of the height, only IE6

for Win32 will see it”

Hacking

• Hacks and techniques– display: table-*

• I wish…

– CSS Hacks– JavaScript hacks

• Dean Edwards’ “IE7”• Shaun Inman’s “Absolute Clearance”• TILT

Web applications

Loading, please wait …

JavaScript

• The forgotten jewel of the Web– Flexible– Dynamic– Powerful– Seriously misrepresented– Horribly Mis-taught

JavaScript and Semantics

• No more onclick’ing

• No inlining

• No document.write

• No javascript: protocol

AJAX: The Hype

• Perfect example of why we still need the marketing types

• Invented 9 years prior to being named– Invented by Scott Isaac’s team in 1996 at

Microsoft– Adopted by W3C in 1998– Implemented in Gecko engine in 2002– Named by Jesse James Garrett in 2005– Popularized by Google

AJAX: The Gist

Browser

Page

JavaScript+

XMLHttpRequestObject

Server

Request

Response

Request

Response

Client Implementation

• JavaScript– XMLHttpRequest– IFrame trick

• Flash– ActionScript (based on JavaScript 2.0 spec)

AJAX: Examples

• Old– Outlook Web Access– MSDN Library Site

• New– Google Suggest– Google Maps

Accessibility and usability

• The curse of the back button• UI Madness: Reinvention of the wheel• Degradation• DOM scripting• Unobtrusive JavaScript

– Usability– Progressive enhancement– Accessibility– Separation

Scripting, reborn

• Web Applications

• Accessible dynamic effects

• Presentation and layout– Example: Rounded corners– Example: TILT

Server Side

Come to the dark side, Luke…

URL as Method

• XML-RPC– Use POST request to simulate a remote

procedure call

• WS/SOAP– Standardized method for application

communicationXML-RPC ++

– Drawback: “Swiss army knife” mentality– May get insanely complex!

URL as Resource

• REST– Representational State Transfer– “The old dog is just fine”

• Idea as old as Web itself (link to Fielding dissertation)

REST

• Use HTTP as it was meant to be used

• Stateless

• Resource-oriented

• Use existing HTTP vehicles (authentication, caching, etc.)

Resource Operations

• HTTP Method = operation– Create: POST /posts– Retrieve: GET /posts/HelloWorld– Update: PUT /posts/HelloWorld– Delete: DELETE /posts/HelloWorld

wRESTling with Reality

• Framework support– Next to non-existent

• Browser support– Only GET and POST defined

• Grok-ratio– Very small

Why REST?

• Philosophy, not technology

• URL uniquely identifies a resource– Same request generates same content until

content changes

• GET request is idempotent– No changes in content may occur as a result

of a GET

What’s cooking?

A look ahead

W3C

• XHTML 2.0

• CSS 3

• XML 1.1

WHAT WG

• Developers collaborating on standards development

• Web Forms 2.0– Backward-compatible augmenting of standard

form elements

• Web Applications 1.0 (HTML 5)– No longer just a web page language

Microformats

• Principles– Solve a specific problem– Simple as possible– Humans first, machines second– Reuse widely adopted standards– Modularity– Decentralized

Microformats

• Existing microformats:– hCard– hCalendar– relNoFollow – XFN– XOXO– XMDP

Forward thinking: Web Site = API

• Example: glossary lookup– AJAX– Semantics– REST– Accessibility

Web 2.0

• “Web 2.0 is a term often applied to a perceived ongoing transition of the World Wide Web from a collection of websites to a full-fledged computing platform serving web applications to end users.

• Ultimately Web 2.0 services are expected to replace desktop computing applications for many purposes.”

Do you really have to name everything?

References / Attribution

• Tantek Çelik (http://www.tantek.com/)• WHAT (http://www.whatwg.org/)• W3C (http://www.w3.org/)• REST (http://tinyurl.com/cvamh)• Microformats (http://www.microformats.org/)• WaSP (http://www.webstandards.org/)• Flickr (http://www.flickr.com/)• Technorati (http://www.technorati.com/)• Google Maps (http://maps.google.com/)• My Blog (http://www.glazkov.com/)• Universal reference (http://www.google.com/)