HTML validation, microformats, jQuery

HTML validation, microformats, jQuery WebTechNY 8 October 2008 Jeffrey Barke . Senior Developer / Information Architect

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/ HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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. HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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 HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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. HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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 validation, microformats, jQuery • WebTechNY / 8 October 2008

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 validation, microformats, jQuery • WebTechNY / 8 October 2008

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 . HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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. HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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? HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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. HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

What it all means Use the HTML 4 DOCTYPE declaration. Serve content with the text/html MIME type. Validate content as HTML, not XHTML. Do not use “Valid HTML” icons. HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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 / HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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 HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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 HTML validation, microformats, jQuery • WebTechNY / 8 October 2008

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

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/ Introduction to Microformats • WebTechNY / 8 October 2008

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) Introduction to Microformats • WebTechNY / 8 October 2008

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. Source: http:// en.wikipedia.org/wiki/Microformats Introduction to Microformats • WebTechNY / 8 October 2008

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 Source: http:// en.wikipedia.org/wiki/Microformats Introduction to Microformats • WebTechNY / 8 October 2008

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 Introduction to Microformats • WebTechNY / 8 October 2008

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 Introduction to Microformats • WebTechNY / 8 October 2008

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 . Introduction to Microformats • WebTechNY / 8 October 2008

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 Introduction to Microformats • WebTechNY / 8 October 2008

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. Introduction to Microformats • WebTechNY / 8 October 2008

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. Introduction to Microformats • WebTechNY / 8 October 2008

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". Introduction to Microformats • WebTechNY / 8 October 2008

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/ Introduction to Microformats • WebTechNY / 8 October 2008

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 Introduction to Microformats • WebTechNY / 8 October 2008

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-with-jquery/restaurants-plain.html http://24ways.org/examples/unobtrusively-mapping-microformats-with-jquery/restaurants.html Introduction to Microformats • WebTechNY / 8 October 2008

Some sites that use microformats Flickr Meetup.com Technorati Upcoming.org Yahoo! Local Introduction to Microformats • WebTechNY / 8 October 2008

Microformat buttons http:// www.factorycity.net/projects/microformats -icons/ http:// microformats.org/wiki/buttons Introduction to Microformats • WebTechNY / 8 October 2008

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 HTML validation, microformats and jQuery • WebTechNY / 8 October 2008

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); }); HTML validation, microformats and jQuery • WebTechNY / 8 October 2008

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. HTML validation, microformats and jQuery • WebTechNY / 8 October 2008

Getting jQuery Two methods: Download jQuery from http://docs.jquery.com/Downloading_jQuery , upload to your web server and add a script element to the page. Use the Google Ajax Libraries API: http://code.google.com/apis/ajaxlibs/ Which is better? HTML validation, microformats and jQuery • WebTechNY / 8 October 2008

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. HTML validation, microformats and jQuery • WebTechNY / 8 October 2008

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 and jQuery • WebTechNY / 8 October 2008

HTML validation, microformats, jQuery

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to HTML validation, microformats, jQuery (20)

Recently uploaded (20)

HTML validation, microformats, jQuery