1. HTML 5New & Enhanced Web ARTISANS OF OPEN SOURCE

2. Agenda HTML5 Introductiono What is HTML5o HTML5 diff against HTML4 New Features Compatibilityo Browser Support Code Examples & Demos Q&A ARTISANS OF OPEN SOURCE 3. HTML5What? HTML5 defines the fifth major revision of the corelanguage of the World Wide Web, HTML. Reflects an effort, started in 2004 to studycontemporary HTML implementations and deployedcontent.o Defines a single language called HTML5 which can bewritten in HTML syntax and in XML syntax.o Defines detailed processing models to foster interoperableimplementations.o Improves markup for documents.o Introduces markup and APIs for emerging idioms, such asWeb applications. ARTISANS OF OPEN SOURCE 4. HTML5What? New version of HTML4, XHTML1, and DOMLevel 2 HTML addressing issues of thosespecifications & enhancing (X)HTML to moreadequately address Web applications. HTML5 is a work in progresso Some are features available now [July 2010] Firefox Safari IE 8+ OperaARTISANS OF OPEN SOURCE 5. HTML5 HTML5 not based on SGML, but compatible witholder HTML parsing. Purely presentational elements were dropped basefont strike big tt center u font s ARTISANS OF OPEN SOURCE 6. HTML5 The following elements are not included becausethey have not been used often, created confusion,or their function can be handled by otherelements:o acronym is not included because it has created a lot ofconfusion. Authors are to use abbr for abbreviations.o applet has been obsoleted in favor of object.o isindex usage can be replaced by usage of formcontrols.o dir has been obsoleted in favor of ul. ARTISANS OF OPEN SOURCE 7. HTML5 The following elements are not in HTML5because their usage affected usability andaccessibility for the end user in a negative way o frame o frameset o noframes For a more complete reference onattributes an elements changed see hereARTISANS OF OPEN SOURCE 8. HTML5 HTML5 has extended the HTMLDocumentinterface from DOM Level 2 HTML in a numberof wayso getElementsByClassName()o innerHTMLo activeElement and hasFocuso getSelection()o classListARTISANS OF OPEN SOURCE 9. (New) Features Enhanced semanticso

(generic block) (semantic)o , , , FYI: Semantic Web is a term coined by the W3Cdirector Tim Berners-Lee. It describes methodsand technologies to allow machines tounderstand the meaning of information on theweb.ARTISANS OF OPEN SOURCE 10. (New) Features(Semantic Web) The following elements have been introduced for betterstructure: section represents a generic document or application section. Itcan be used together with the h1, h2, h3, h4, h5, and h6elements to indicate the document structure. article represents an independent piece of content of adocument, such as a blog entry or newspaper article. aside represents a piece of content that is only slightly related tothe rest of the page. header represents a group of introductory or navigational aids. hgroup represents the header of a section. footer represents a footer for a section and can containinformation about the author, copyright information, et cetera. nav represents a section of the document intended fornavigation.ARTISANS OF OPEN SOURCE 11. (New) Features(Semantic Web) figure represents a piece of self-contained flow content, typicallyreferenced as a single unit from the main flow of the document. Exampleo figcaption can be used as caption (it is optional). video and audio for multimedia content. Both provide an API soapplication authors can script their own user interface, but there isalso a way to trigger a user interface provided by the user agent.source elements are used together with these elements if there aremultiple streams available of different types. embed is used for plugin content. mark represents a run of text in one document marked or highlightedfor reference purposes, due to its relevance in another context. progress represents a completion of a task, such as downloading orwhen performing a series of expensive operations. meter represents a measurement, such as disk usage. time represents a date and/or time. ruby, rt and rp allow for marking up ruby annotations.ARTISANS OF OPEN SOURCE 12. (New) Features(Semantic Web) wbr represents a line break opportunity. canvas is used for rendering dynamic bitmap graphics on the fly, suchas graphs or games. command represents a command the user can invoke. details represents additional information or controls which the usercan obtain on demand. The summary element provides its summary,legend, or caption. datalist together with the a new list attribute for input can be used tomake comboboxes: keygen represents control for key pair generation. output represents some type of output, such as from a calculationdone through scripting.ARTISANS OF OPEN SOURCE 13. (New) Features(Semantic Web) Internet Explorer versions older than 9 treatsunknown elements in such a way that disallowsthem to be styled and any element inside themwill actually end up as siblings rather thanchildren. In order to start using yet unsupported semanticelements we can use the following workaround inIEo Create a dummy element of that type(s) just for thebrowser to acknowledge the element and permit stylingand hierarchyARTISANS OF OPEN SOURCE 14. (New) Features(Semantic Web) So:o document.createElement(tagWeNeed);o Place it in the head, early in the document before thebrowser parses other tags and attributes HTML5 enabling script is a script that does just that,you may use it for this purpose ARTISANS OF OPEN SOURCE 15. (New) Features Canvas Microdata Audio MathML Video Web (SQL) database Storage New Selectors Web workers Web Sockets App Cache SVG Geolocation Window Messaging New input types Drag & Drop ARTISANS OF OPEN SOURCE 16. (New) Features(Canvas) a resolution-dependent bitmap canvas that canbe used for rendering graphs, game graphics, orother visual images on the fly. ARTISANS OF OPEN SOURCE 17. (New) Features(Video) HTML5 defines a new element called forembedding video in your web pages without usingthird-party pluginsARTISANS OF OPEN SOURCE 18. (New) Features (Video) You can create auto-fallback behavior on the video element by placing whatever you need the browser to show in case is not supported You may (should) specify multiple video sources for different codec types for the different browsers Flashauto-fallback ARTISANS OF OPEN SOURCE 19. (New) Features(Video) o The controls attribute automatically places the defaultcontrols to the player; these will look differentdepending on the browsers implementation.o You may want to create your own controls to maintaincross-browser consistency in the players look & feel;the video api provides all the necessary methods forreproduction control so the how (elements, styles,interaction model) its the authors choiseARTISANS OF OPEN SOURCE 20. (New) Features(Storage) HTML5 storage provides a way for web sites tostore information on your computer and retrieveit later. The concept is similar to cookies, but itsdesigned for larger quantities of information.Note: Anyone who has physical access to yourcomputer could look and even change yourHTML5 storage databaseARTISANS OF OPEN SOURCE 21. (New) Features(Storage)CookiesHTML5 Storage Limited in size Larger storage The browser sends them Stays on your computerback to the web server every Web sites can access it withtime it requests a new pageJavaScript after the page isthis takes extra time andloadedbandwidth Any web site can read and modify its own values Sites cant access values stored by other sites (same-origin restriction)ARTISANS OF OPEN SOURCE 22. (New) Features(Storage) Kinds Storage:o Local storage: persistent data storage, remains on yourcomputero Session storage: its life span is the current session lifespan (per-tab)ARTISANS OF OPEN SOURCE 23. (New) Features(Web Workers) Web Workers provide a standard way forbrowsers to run JavaScript in the background These background threads can do complexmathematical calculations, make networkrequests, or access local storage while the mainweb page responds to the user scrolling, clicking,or typing. ARTISANS OF OPEN SOURCE 24. (New) Features(Application Cache) Start out as an online web application, the webserver tells your browser which files need to bedownloaded in order for the app to work offline,these files can be anything. Once the files arecached, you can revisit the site offline. When youre online, any changes made can beuploaded to the remote server.ARTISANS OF OPEN SOURCE 25. (New) Features(Geolocation) This specification defines an API that providesscripted access to geographical locationinformation associated with the hosting device Not part of the HTML5 specification, geolocationis being standardized by the Geolocation WorkGroup You can see this spec here geo.js is a geolocation API wrapper ARTISANS OF OPEN SOURCE 26. (New) Features(input types) The input elements type attribute now hasthe following new values:o telo montho search o weeko urlo timeo emailo datetime-localo datetime o numbero date o range o colorARTISANS OF OPEN SOURCE 27. (New) Features(Microdata) This mechanism allows machine-readable data tobe embedded in HTML documents in an easy-to-write manner, with an unambiguous parsingmodel. It is compatible with numerous other dataformats including RDF and JSON A standardized way to provide additionalsemantics in your web pages.o i.e. you can use microdata to declare that a photographis available under a specific Creative Commons license.ARTISANS OF OPEN SOURCE 28. (New) Features(Microdata) The HTML5 microdata standard includes bothHTML markup (primarily for search engines) anda set of DOM functions (primarily for browsers) Microdata annotates the DOM with scopedname/value pairs from custom vocabularies For further reading go hereARTISANS OF OPEN SOURCE 29. (New) Features(Microdata) ARTISANS OF OPEN SOURCE 30. (New) Features(MathML) The goal of MathML is to enable mathematics tobe served, received, and processed on the WorldWide Web, just as HTML has enabled thisfunctionality for text While MathML is human-readable, it isanticipated that, in all but the simplest cases,authors will use equation editors, conversionprograms, and other specialized software tools togenerate MathML (there are existing toolsalready)ARTISANS OF OPEN SOURCE 31. (New) Features(MathML) The expression ax2 + bx + c could be representedas ARTISANS OF OPEN SOURCE 32. (New) Features(MathML) Further readingo Speco WikipediaARTISANS OF OPEN SOURCE 33. (New) Features(Web database) Defines an API for storing data in databases that canbe queried using a variant of SQL APIs to manipulate client-side databases using SQL Each database has a name and a current version andthey cant exist in multiple versions at once o Versions are intended to allow authors to manage schema changes incrementally & non-destructively, and without the risk of old code writing to a database with incorrect assumptions All strings including the empty string are validdatabase names Database names are case-sensitive ARTISANS OF OPEN SOURCE 34. (New) Features(Web database) Transaction support Synchronous & Asynchronous APIs For SQL query execution:o executeSql(sqlStatement, arguments, callback, errorCallback) The executeSql() method invokes its callback witha SQLResultSet object as an argumentARTISANS OF OPEN SOURCE 35. (New) Features(New Selectors) getElementsByClassNameo Get a set of elements matching a CSS class getSelectiono Get a set of elements that match a CSS syntax ARTISANS OF OPEN SOURCE 36. (New) Features(Web Sockets) Bi-directional, full-duplex communicationschannels over TCP socket, designed to beimplemented in web browsers and web servers API that enables two-way communication with aremote host ARTISANS OF OPEN SOURCE 37. (New) Features(SVG) Is a modularizedlanguage for describingtwo-dimensional vectorand mixedvector/raster graphicsin XML HTML5 allows theembedding of scalablevector graphics in yourdocumentARTISANS OF OPEN SOURCE 38. (New) Features(SVG) Can be interactive and dynamic. Animations canbe defined and triggered declaratively or viascripting Further readingo SVG SpecARTISANS OF OPEN SOURCE 39. (New) Features(Window Messaging) You can use this technique to talk across relatedwindows (documents) You can post a message from document A todocument B by calling the postMessage methodwhich receives two parameterso The actual messageo The URL to which you expect to pass that message The * wildcard can be used here but for security it should be avoided ARTISANS OF OPEN SOURCE 40. Compatibility HTML5 defines an HTML syntax that iscompatible with HTML4 and XHTML1documents published on the Web, but is notcompatible with the more esoteric SGML featuresof HTML4, such as processing instructions andshorthand markup as these are not supported bymost user agentsARTISANS OF OPEN SOURCE 41. Compatibility The basic compatibility consideration is thebrowsers feature support.o Detection techniques You can (should) test for the browsers support for the HTML5 feature you need A library might come in handy for this purposeARTISANS OF OPEN SOURCE 42. Compatibility(feature detection) Example: Detecting Geolocation Supporto if ( navigator.geolocation )// browser supports geolocationelsealert(Sorry, no geolocation support);Note: detecting geolocation is fairly simple, some other features require a bit more work to check for support, thats whyARTISANS OF OPEN SOURCE 43. Compatibility(feature detection: Modernizr) Mordernizr: is an open source, MIT-licensedJavaScript library that detects support for manyHTML5 & CSS3 features. Use it to easily figure if the user agent supports anspecific feature o Example: Detecting geolocation Modernizr.geolocation ? alert(We know where you are!!) : alert(Where the heck are you!?);ARTISANS OF OPEN SOURCE 44. Compatibility(feature detection: Modernizr)Current version is 1.5 (July 2010), it detects the following feature @font-face CSS Gradients History Management Canvas CSS Reflections applicationCache Canvas Text CSS 2D Transforms Web Sockets HTML5 Audio CSS 3D Transforms Web Workers HTML5 Video CSS Transitions Web SQL Database rgba() Geolocation API IndexedDB hsla() localStorage Input Types border-image: sessionStorage Input Attributes border-radius: SVG box-shadow: SMIL opacity: SVG Clipping Multiple Drag and Dropbackgrounds hashchange CSS Animations X-window CSS Columns Messaging ARTISANS OF OPEN SOURCE 45. Compatibility Opera feature support Firefox feature support ARTISANS OF OPEN SOURCE 46. Compatibility Chrome feature Safari Feature SupportSupportARTISANS OF OPEN SOURCE 47. Compatibility IE feature support ARTISANS OF OPEN SOURCE 48. Blah blah blahshow me! Code examples and featureso Presentation by Google site html5rocks.comARTISANS OF OPEN SOURCE