HTML validation, microformats, jQuery

HTML validation, microformats, jQueryWebTechNY8 October 2008

Jeffrey Barke . Senior Developer / Information Architect

New York Web Standards Meetup

Topics covered in 2008

• Google Maps API• Version targeting and IE 8• Web Samurai errata for Web Content Accessibility Guidelines 1.0• Microformats• WAI-ARIA• Ajax• Cloud computing

• jQuery• Version control with Subversion

HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

New York Web Standards Meetup

http://webstandards.meetup.com/118/


http://webstandards.meetup.com/118/

HTML validation

HTML validation

The W3C Markup Validation Service checks web documents for conformance to HTML and XHTML standards.

Located at http://validator.w3.org/

While valid markup does not guarantee a page will render successfully cross-browser, it makes it easier to ensure that it does, that CSS will be correctly applied and that JavaScript will function correctly.

All HTML user agents have extremely lenient error handling. While it is relatively consistent between browsers, there are plenty of differences in the edge cases and the error handling behavior is not documented or part of any standard.


http://validator.w3.org/

DOCTYPE

A DOCTYPE (Document Type Declaration) associates a document with a Document Type Definition (DTD). Originally it was conceived to determine the type of document, but it is not actually suitable for this.

However, having a correct DOCTYPE is still important:

• Your document won't validate without one.• Essential for the proper rendering and functioning of documents in

modern browsers


DOCTYPE “sniffing” and layout modes

HTML layout engines use DOCTYPE "sniffing" on documents served as text/html to determine a layout mode.

While there are multiple modes, many of which are browser-specific, the two major modes are "quirks mode" and "standards mode.“

In the standards mode the browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser.

Since different browsers are at different stages of compliance, the Standards mode isn’t a single target, either.


DOCTYPE “sniffing” and layout modes (cont’d)

In quirks mode, attempts are made to emulate the behavior of older browsers. This includes the Internet Explorer box model bug.

Obviously, we want to be in standards mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


HTML, XML and XHTML

"Understanding HTML, XML and XHTML" by Maciej Stachowiak http://webkit.org/blog/68/understanding-html-xml-and-xhtml/

HTML was originally an application of SGML.

As actually used on the web, HTML is best described as a custom language influenced by SGML.

XHTML is a reformulation of HTML in XML syntax.


HTML, XML and XHTML (cont’d)

What determines if a document is HTML or XHTML?

None of the following:• Using an XHTML doctype declaration• Putting an XML declaration at the top• Using XHTML-specific syntax like self-closing tags• Validating it as XHTML

Only the MIME type. And the vast majority of documents are served as text/html, not application/xhtml+xml or text/xml.


Validation and its discontents

“'HTML validation' is a good tool, but just a tool” by Jukka "Yucca" Korpela http://www.cs.tut.fi/~jkorpela/html/validation.html:

Although there is really not much to be gained from using XHTML at present, many people have started using it. Then it becomes relevant that validation means different things for XHTML. The reason is that the metalanguage, XML, is considerably less powerful than SGML. For example, the XML DTD for XHTML 1.0 declares the tabindex attribute as CDATA, which allows virtually anything. In the SGML DTDs of "old" HTML, the attribute is declared as NUMBER. This means that in validating against "old" HTML, tabindex="-1" is reported as an error (as it is), in XHTML validation it passes. On the other hand, XML imposes restrictions that forbid constructs that are formally correct in SGML-based HTML but not actually supported by browsers, such as the shorthand <em/text/ for <em>text</em>, and this means that XHTML validation is pragmatically more useful in some ways.


Validation and its discontents (cont’d)

“'HTML validation' is a good tool, but just a tool” by Jukka "Yucca" Korpela http://www.cs.tut.fi/~jkorpela/html/validation.html:

It's useful to write valid markup, in most cases. But it's hardly useful to make a noise about it.

Analogously, it's useful to use proper punctuation when you write in English. This makes texts somewhat easier to read and understand, and it adds to the literary quality a bit. There are slightly different styles of punctuation, and you should choose one and stick to it. But it's hardly useful to make a noise thereof. Would you like to include an icon like "Checked SGUFDFY 42.5!" onto your pages and expect users to decipher that SGUFDFY 42.5 means some particular convention on punctuation?


Validation and its discontents (cont’d)

“Martian Headsets” by Joel Spolsky http://www.joelonsoftware.com/items/2008/03/17.html:

In the real world where people are imperfect, you can’t have a standard with just a spec–you must have a super-strict reference implementation, and everybody has to test against the reference implementation. Otherwise you get 17 different “standards” and you might as well not have one at all.


What it all means

1. Use the HTML 4 DOCTYPE declaration.

2. Serve content with the text/html MIME type.

3. Validate content as HTML, not XHTML.

4. Do not use “Valid HTML” icons.


References

• “Quirks mode and strict mode”: http://www.quirksmode.org/css/quirksmode.html

• “Activating Browser Modes with Doctype”: http://hsivonen.iki.fi/doctype/• “Fix Your Site With the Right DOCTYPE!” Jeffrey Zeldman:

http://www.alistapart.com/articles/doctype/


Microformats

What are microformats?

• Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. –Dan Cedarholm with Tantek Çelik for launch of microformats.org

• Microformats are simple conventions for embedding semantics in HTML to enable decentralized development. –from the mailing list

• Microformats are carefully designed (X)HTML class names that extend the semantics of (X)HTML and enable authors to publish higher semantic fidelity content such as people, events, reviews, etc. –Tantek Çelik

• Microformats are a way of identifying and labeling classes of commonly used data that make it easier for humans or computers to locate or distribute such information on websites. –Dave Sanford

Source: http://microformats.org/wiki/what-are-microformats


http://microformats.org/wiki/what-are-microformats

What are microformats? (cont’d)

• A microformat (sometimes abbreviated μF or uF) is a web-based data formatting approach that seeks to re-use existing content as metadata, using only XHTML and HTML classes and other attributes. This approach is intended to allow information intended for end-users (such as contact information, geographic coordinates, calendar events, and the like) to also be automatically processed by software.

Source: http://en.wikipedia.org/wiki/Microformats


http://en.wikipedia.org/wiki/Microformats


Why use microformats?

• Aggregation sites– The general model is the user travels to a particular site, and then

proceeds to enter data (classified add, review, list of friends) for a particular purpose. Your information is scattered all over the Web, and you have to pick which sites you want to use.

– The combination of blogging and microformats is now reversing this model. Now, your information remains in your blog, and the Web sites come to you. For instance, if you want to sell something, you can blog about it using an hListing, and a site like edgeio will find it when it aggregates classified advertisements across the Web.

Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/

Introduction to Microformats • WebTechNY / 8 October 2008

http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/


Why use microformats? (cont’d)

• Sharing information with a specific community– Let’s say you enjoy mountain biking, and would like to share various

trails with other people who also enjoy mountain biking. If you posted this information to your blog, you could geocast (RSS with a payload of geo), the locations of the mountain bike trails, and other people in the community could subscribe to this feed using an application like Google Earth.

• Targeted search– Let’s say you are creating a web comic, and you want other people

to be able to find it. By posting your comic with a microformat agreed upon by the web comic community, the rest of the community will be able to easily find your work using a search engine.

Source: http://blog.mozilla.com/faaborg/2006/12/11/microformats-part-0-introduction/




Why use microformats? (cont’d)

• CSS convenience– Use semantic classes for styling instead of ad-hoc names: “Why

invent your own class names when you can re-use pre-defined ones that give your site extra functionality for free?”

• Enhanced user experience (with the proper browser or plugins)– Version 3 of the Firefox as well as version 8 of Internet Explorer are

expected to include native support for microformats• Ability to leverage markup for your own uses (we’ll see an example of

this later)


Who’s creating the microformats?

• Microformats emerged as part of a grassroots movement to make recognizable data items (such as events, contact details or geographical locations) capable of automated processing by software, as well as directly readable by end-users.

• As the microformats community grew, CommerceNet, a nonprofit organization that promotes electronic commerce on the Internet, helped sponsor and promote the technology and support the microformats community in various ways. CommerceNet also helped co-found the microformats community site microformats.org.





Who’s creating the microformats? (cont’d)

• Neither CommerceNet nor Microformats.org is a standards body. The microformats community is an open wiki, mailing list, and Internet relay chat (IRC) channel. Most of the existing microformats were created at the Microformats.org wiki and associated mailing list, by a process of gathering examples of web publishing behaviour, then codifying it. Some other microformats (such as rel=nofollow and unAPI) have been proposed, or developed, elsewhere.

• Some names associated with microformats: – Dan Cedarholm– Tantek Çelik– Drew McLellan– Eric A. Meyer





Where the specs are located and how to get involved

• Blog: http://microformats.org/• Wiki: http://microformats.org/wiki/Main_Page• Email list: http://microformats.org/discuss/• IRC: irc://irc.freenode.net#microformats


http://microformats.org/

http://microformats.org/wiki/Main_Page

http://microformats.org/wiki/Main_Page

http://microformats.org/discuss/

irc://irc.freenode.net/#microformats

Using microformats

Microformat specifications and drafts

• http://microformats.org/wiki/Main_Page#Specifications• The ones I use:

– Specifications• hCalendar• hCard• rel-license• rel-nofollow• rel-tag

– Drafts• adr• geo


http://microformats.org/wiki/Main_Page#Specifications

hCard

• hCard is a simple, open, distributed format for representing people, companies, organizations, and places, using a 1:1 representation of vCard (RFC2426) properties and values in semantic HTML or XHTML

• Spec: http://microformats.org/wiki/hcard• Probably easiest way to learn the format is by example:

http://microformats.org/code/hcard/creator• The root class name for an hCard is "vcard". An element with a class

name of "vcard" is itself called an hCard.


http://microformats.org/wiki/hcard

http://microformats.org/code/hcard/creator

hCalendar

• hCalendar is a simple, open, distributed calendaring and events format, based on the iCalendar standard (RFC2445), suitable for embedding in HTML or XHTML, Atom, RSS, and arbitrary XML.

• Spec: http://microformats.org/wiki/hcalendar• Probably easiest way to learn the format is by example: http://

microformats.org/code/hcalendar/creator• Note–the dtstart and dtend classes must be applied to abbr

elements.• DATE_FORMAT(startdate, '%Y-%m-%dT%H:%i:00') AS

startdate


http://microformats.org/wiki/hcalendar

http://microformats.org/wiki/hcalendar

http://microformats.org/code/hcalendar/creator

http://microformats.org/code/hcalendar/creator

Rel-License

• Rel-License is a simple, open, format for indicating content licenses which is embeddable in HTML or XHTML, Atom, RSS, and arbitrary XML

• Spec: http://microformats.org/wiki/rel-license• Rel-License is one of several MicroFormats. By adding

rel="license" to a hyperlink, a page indicates that the destination of that hyperlink is a license for the current page.– E.g. with the following hyperlink: <a

href="http://creativecommons.org/licenses/by/2.0/" rel="license">cc by 2.0</a> the author indicates that the page is licensed under a Creative Commons 2.0 Attribution Required license.

• Multiple such rel="license" hyperlinks indicate that the page is available under any of the referred licenses. E.g. the following hyperlinks could be used to declare that a page is available under either a Creative Commons 2.0 Attribution Required license or the Apache 2.0 license.


http://microformats.org/wiki/rel-license



Rel-License (cont’d)

• Creative Commons license chooser: http://creativecommons.org/license/

• Dreamweaver Extension suite (http://www.webstandards.org/action/dwtf/microformats/) from the Web Standards Project (http://webstandards.org/) enables the authoring of rel-license links from within Dreamweaver 8. Includes (cc) defaults.


http://creativecommons.org/license/



http://www.webstandards.org/action/dwtf/microformats/



http://webstandards.org/



Rel-Tag

Spec: http://microformats.org/wiki/rel-tag

By adding rel="tag" to a hyperlink, a page indicates that the destination of that hyperlink is an author-designated "tag" (or keyword/subject) for the current page. Note that a tag may just refer to a major portion of the current page (i.e. a blog post). e.g. by placing this link on a page, <a href="http://technorati.com/tag/tech" rel="tag">tech</a> the author indicates that the page (or some portion of the page) has the tag "tech".

The linked page SHOULD exist, and it is the linked page, rather than the link text, that defines the tag. The last path component of the URL is the text of the tag, so <a href="http://technorati.com/tag/tech" rel="tag">fish</a> would indicate the tag "tech" rather than "fish".


http://microformats.org/wiki/rel-tag



Consuming microformats

Tools for reading microformats

• Firefox extensions:– Operator

• A microformat detection extension developed by Michael Kaply at IBM.

• https://addons.mozilla.org/en-US/firefox/addon/4106– Tails

• The first microformat detection extension for Firefox by Robert de Bruin.

• http://blog.codeeg.com/tails-firefox-extension-03/

Source: http://labs.mozilla.com/2006/12/introducing-operator/


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

http://blog.codeeg.com/tails-firefox-extension-03/

http://labs.mozilla.com/2006/12/introducing-operator/

Tools for reading microformats (cont’d)

• Operator builds on Tails Export by having a user interface that is based around actions the user can take, instead of data types. Operator also includes support for the microformats geo and rel-tag, and is compatible with Firefox 3.

• Address book + Operator• Blog post tag + Operator• Maps + Operator• Calendar + Operator


http://1515broadway.slgreen.com/contact-us/

http://fredericiana.com/2006/12/08/reusing-the-firefox-summit-lanyard/

http://fredericiana.com/2006/12/08/reusing-the-firefox-summit-lanyard/

http://upcoming.yahoo.com/event/669304/

http://themechanism.com/barkode/

Building your own applications on microformats

• Great tutorial on mapping microformats with jQuery at 24 ways: http://24ways.org/2007/unobtrusively-mapping-microformats-with-jquery– Unobtrusive JavaScript– jQuery– Google Maps API– Mapstraction – http://24ways.org/examples/unobtrusively-mapping-microformats-wit

h-jquery/restaurants-plain.html– http://24ways.org/examples/unobtrusively-mapping-microformats-wit

h-jquery/restaurants.html


http://24ways.org/2007/unobtrusively-mapping-microformats-with-jquery

http://24ways.org/examples/unobtrusively-mapping-microformats-with-jquery/restaurants-plain.html

http://24ways.org/examples/unobtrusively-mapping-microformats-with-jquery/restaurants-plain.html

http://24ways.org/examples/unobtrusively-mapping-microformats-with-jquery/restaurants.html

http://24ways.org/examples/unobtrusively-mapping-microformats-with-jquery/restaurants.html

Some sites that use microformats

• Flickr• Meetup.com• Technorati• Upcoming.org• Yahoo! Local


http://flickr.com/

http://www.meetup.com/

http://kitchen.technorati.com/

http://upcoming.yahoo.com/

http://local.yahoo.com/

Microformat buttons

• http://www.factorycity.net/projects/microformats-icons/• http://microformats.org/wiki/buttons


http://www.factorycity.net/projects/microformats-icons/



http://microformats.org/wiki/buttons

http://microformats.org/wiki/buttons

jQuery

What is jQuery?

jQuery is a JavaScript library. One among many:

• Protoype• Dojo Toolkit• MooTools

jQuery is one of the newer JavaScript libraries. It was released in January 2006 by John Resig, author of Pro JavaScript Techniques. It’s a fast, lightweight library that emphasizes the interaction between HTML and JavaScript using CSS-style selectors.

Has a great development community.

Microsoft and Nokia intend to bundle jQuery on their platforms.

HTML validation, microformats and jQuery • WebTechNY / 8 October 2008

Why jQuery?

JavaScript libraries make it faster and easier to develop distinctive JavaScript applications.

No reason to roll your JS library from scratch or worry about handling cross-browser Ajax quirks.

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks


DOM scripting without and with jQuery

var external_links = document.getElementById('external_links');

var links = external_links.getElementsByTagName('a');for (var i=0;i < links.length;i++) { var link = links.item(i); link.onclick = function() { return confirm('You are going to visit: ' +

this.href); };}

$('#external_links a').click(function() { return confirm('You are going to visit: ' + this.href);});


Another example: zebra-striping with jQuery

$(‘table tr:nth-child(even)’).addClass(‘striped’);

$() returns a JavaScript object containing an array of DOM elements that match the selector.

‘table tr’ would return all table rows. :nth-child(n|odd|even) returns a specific child or all the even or odd children.

.addClass adds the specified class or class name to the wrapped set.


Getting jQuery

Two methods:

1. Download jQuery from http://docs.jquery.com/Downloading_jQuery, upload to your web server and add a script element to the page.

2. Use the Google Ajax Libraries API: http://code.google.com/apis/ajaxlibs/

Which is better?


Google Ajax Libraries API

• Caching is done correctly, and once, by Google. Developers don’t have to do anything.

• Gzipped• Google serves minified versions• The files are hosted by Google which has a distributed CDN at various

points around the world, so the files are "close" to the user• The servers are fast• By using the same URLs, if a critical mass of applications use the

Google infrastructure, when someone comes to your application the file may already be loaded.

• A subtle performance (and security) issue revolves around the headers that you send up and down. Since you are using a special domain (NOTE: not google.com!), no cookies or other verbose headers will be sent up, saving precious bytes.


Next steps

• Documentation and tutorials at the jQuery site: http://docs.jquery.com/Tutorials

• jQuery in Action. Bear Bibeault and Yehuda Katz. Manning. 2008.• “Simplify Ajax development with jQuery.” Jesse Skinner.

http://www.ibm.com/developerworks/library/x-ajaxjquery.html• 15 Days of jQuery: http://15daysofjquery.com/

• Scott Trudeau’s (Apartment Therapy Media) “Introduction to Kicking Ass with jQuery”: http://webstandards.meetup.com/118/calendar/8689977/


HTML validation, microformats, jQuery

Technology

Transcript of HTML validation, microformats, jQuery