ARTISANS OF OPEN SOURCE

HTML 5

New & Enhanced Web

ARTISANS OF OPEN SOURCE

Agenda

• HTML5 Introductiono What is HTML5o HTML5 diff against HTML4

• New Features• Compatibility

o Browser Support• Code Examples & Demos• Q&A

ARTISANS OF OPEN SOURCE

HTML5…What?

• HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML.

• Reflects an effort, started in 2004 to study contemporary HTML implementations and deployed content.o Defines a single language called HTML5 which can be

written in HTML syntax and in XML syntax.o Defines detailed processing models to foster

interoperable implementations.o Improves markup for documents.o Introduces markup and APIs for emerging idioms, such

as Web applications.

ARTISANS OF OPEN SOURCE

HTML5…What?

• New version of HTML4, XHTML1, and DOM Level 2 HTML addressing issues of those specifications & enhancing (X)HTML to more adequately address Web applications.

• HTML5 is a work in progresso Some are features available now […July 2010]

• Firefox• Safari• IE 8+• Opera

ARTISANS OF OPEN SOURCE

HTML5

• HTML5 not based on SGML, but compatible with older HTML parsing.

• Purely presentational elements were dropped• basefont• big• center• font

• strike• tt• u• s

ARTISANS OF OPEN SOURCE

HTML5

• The following elements are not included because they have not been used often, created confusion, or their function can be handled by other elements: o acronym is not included because it has created a

lot of confusion. 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 form

controls. o dir has been obsoleted in favor of ul.

ARTISANS OF OPEN SOURCE

HTML5

• The following elements are not in HTML5 because their usage affected usability and accessibility for the end user in a negative wayo frame o frameset o noframes

• For a more complete reference on attributes an elements changed see here

ARTISANS OF OPEN SOURCE

HTML5

• HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of wayso getElementsByClassName()o innerHTML o activeElement and hasFocuso getSelection()o classList

ARTISANS OF OPEN SOURCE

(New) Features

• Enhanced semanticso <div class=“header”> <header>

(generic block) (semantic)o <footer>, <nav>, <audio>, <video>

• FYI: Semantic Web is a term coined by the W3C director Tim Berners-Lee. It describes methods and technologies to allow machines to understand the meaning of information on the web.

ARTISANS OF OPEN SOURCE

(New) Features(Semantic Web)

• The following elements have been introduced for better structure: • section represents a generic document or application section. It

can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.

• article represents an independent piece of content of a document, such as a blog entry or newspaper article.

• aside represents a piece of content that is only slightly related to the 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 contain

information about the author, copyright information, et cetera. • nav represents a section of the document intended for navigation.

ARTISANS OF OPEN SOURCE

(New) Features(Semantic Web)

• figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

<figure><video src="ogg"></video><figcaption>Example</figcaption>

</figure> o figcaption can be used as caption (it is optional).

• video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.

• embed is used for plugin content. • mark represents a run of text in one document marked or highlighted

for reference purposes, due to its relevance in another context. • progress represents a completion of a task, such as downloading or

when 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

(New) Features(Semantic Web)

• wbr represents a line break opportunity. • canvas is used for rendering dynamic bitmap graphics on the fly, such

as graphs or games. • command represents a command the user can invoke. • details represents additional information or controls which the user

can 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 to make comboboxes:

<input list="browsers”>

<datalist id="browsers”><option value="Opera”><option value="Firefox">

</datalist>

• keygen represents control for key pair generation. • output represents some type of output, such as from a calculation

done through scripting.

ARTISANS OF OPEN SOURCE

(New) Features(Semantic Web)

• Internet Explorer versions older than 9 treats unknown elements in such a way that disallows them to be styled and any element inside them will actually end up as siblings rather than children.

• In order to start using yet unsupported semantic elements we can use the following workaround in IEo Create a dummy element of that type(s) just for

the browser to acknowledge the element and permit styling and hierarchy

ARTISANS OF OPEN SOURCE

(New) Features(Semantic Web)

• So:o document.createElement(‘tagWeNeed’);o Place it in the head, early in the document before the

browser parses other tags and attributes• HTML5 enabling script is a script that does just

that, you may use it for this purpose• <!--[if lt IE 9]>

Your script should be inside these tags so that it would be executed only when necessary (IE versions older than 9) and ignored (faster) if unnecessary<![endif]-->

ARTISANS OF OPEN SOURCE

(New) Features

• Canvas• Audio• Video• Storage• Web workers• App Cache• Geolocation• New input types

• Microdata• MathML• Web (SQL) database• New Selectors• Web Sockets• SVG• Window Messaging• Drag & Drop

ARTISANS OF OPEN SOURCE

(New) Features(Canvas)

• “a resolution-dependent bitmap canvas that can be used for rendering graphs, game graphics, or other visual images on the fly.”

ARTISANS OF OPEN SOURCE

(New) Features(Video)

• HTML5 defines a new element called <video> for embedding video in your web pages without using third-party plugins

ARTISANS OF OPEN SOURCE

(New) Features(Video)

• You can create auto-fallback behavior on the video element by placing whatever you need the browser to show in case <video> is not supported

• You may (should) specify multiple video sources for different codec types for the different browsers

Flashauto-fallback

ARTISANS OF OPEN SOURCE

(New) Features(Video)

• <video src=“somevideo”

controls></video>o The controls attribute automatically places the

default controls to the player; these will look different depending on the browser’s implementation.

o You may want to create your own controls to maintain cross-browser consistency in the player’s look & feel; the video api provides all the necessary methods for reproduction control so the how (elements, styles, interaction model) its the author’s choise

ARTISANS OF OPEN SOURCE

(New) Features(Storage)

• HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information.Note: Anyone who has physical access to your computer could look and even change your HTML5 storage database

ARTISANS OF OPEN SOURCE

(New) Features(Storage)

Cookies HTML5 Storage• Limited in size• The browser sends them back to the web server every time it requests a new page this takes extra time and bandwidth

• Larger storage• Stays on your computer• Web sites can access it with JavaScript after the page is loaded• Any web site can read and modify its own values• Sites can’t access values stored by other sites (same-origin restriction)

ARTISANS OF OPEN SOURCE

(New) Features(Storage)

• Kinds Storage:o Local storage: persistent data storage, remains

on your computero Session storage: its life span is the current

session life span (per-tab)

ARTISANS OF OPEN SOURCE

(New) Features(Web Workers)

• Web Workers provide a standard way for browsers to run JavaScript in the background

• These “background threads” can do complex mathematical calculations, make network requests, or access local storage while the main web page responds to the user scrolling, clicking, or typing.

ARTISANS OF OPEN SOURCE

(New) Features(Application Cache)

• Start out as an online web application, the web server tells your browser which files need to be downloaded in order for the app to work offline, these files can be anything. Once the files are cached, you can revisit the site offline.

• When you’re online, any changes made can be uploaded to the remote server.

ARTISANS OF OPEN SOURCE

(New) Features(Geolocation)

• This specification defines an API that provides scripted access to geographical location information associated with the hosting device

• Not part of the HTML5 specification, geolocation is being standardized by the Geolocation Work Group

• You can see this spec here• geo.js is a geolocation API wrapper

ARTISANS OF OPEN SOURCE

(New) Features(input types)

o tel o search o url o email o datetime o date

o month o week o time o datetime-local o number o range o color

• The input element's type attribute now has the following new values:

ARTISANS OF OPEN SOURCE

(New) Features(Microdata)

• This mechanism allows machine-readable data to be embedded in HTML documents in an easy-to-write manner, with an unambiguous parsing model. It is compatible with numerous other data formats including RDF and JSON

• A standardized way to provide additional semantics in your web pages. o i.e. you can use microdata to declare that a

photograph is available under a specific Creative Commons license.

ARTISANS OF OPEN SOURCE

(New) Features(Microdata)

• The HTML5 microdata standard includes both HTML markup (primarily for search engines) and a set of DOM functions (primarily for browsers)

• Microdata annotates the DOM with scoped name/value pairs from custom vocabularies

• For further reading go here

ARTISANS OF OPEN SOURCE

(New) Features(Microdata)

ARTISANS OF OPEN SOURCE

(New) Features(MathML)

• The goal of MathML is to enable mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for text

• While MathML is human-readable, it is anticipated that, in all but the simplest cases, authors will use equation editors, conversion programs, and other specialized software tools to generate MathML (there are existing tools already)

ARTISANS OF OPEN SOURCE

(New) Features(MathML)

• The expression ax2 + bx + c could be represented as

ARTISANS OF OPEN SOURCE

(New) Features(MathML)

• Further readingo Speco Wikipedia

ARTISANS OF OPEN SOURCE

(New) Features(Web database)

• Defines an API for storing data in databases that can be queried using a variant of SQL

• APIs to manipulate client-side databases using SQL

• Each database has a name and a current version and they can't exist in multiple versions at onceo 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 valid database names

• Database names are case-sensitive

ARTISANS OF OPEN SOURCE

(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 with a SQLResultSet object as an argument

ARTISANS OF OPEN SOURCE

(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

(New) Features(Web Sockets)

• Bi-directional, full-duplex communications channels over TCP socket, designed to be implemented in web browsers and web servers

• API that enables two-way communication with a remote host

ARTISANS OF OPEN SOURCE

(New) Features(SVG)

• Is a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML

• HTML5 allows the embedding of scalable vector graphics in your document

ARTISANS OF OPEN SOURCE

(New) Features(SVG)

• Can be interactive and dynamic. Animations can be defined and triggered declaratively or via scripting

• Further readingo SVG Spec

ARTISANS OF OPEN SOURCE

(New) Features(Window Messaging)

• You can use this technique to talk across related windows (documents)

• You can post a message from document A to document B by calling the postMessage method which 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

Compatibility

• HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents

ARTISANS OF OPEN SOURCE

Compatibility

• The basic compatibility consideration is the browser's feature support.o Detection techniques

• You can (should) test for the browser’s support for the HTML5 feature you need

• A library might come in handy for this purpose

ARTISANS OF OPEN SOURCE

Compatibility(feature detection)

• Example: Detecting Geolocation Supporto if ( navigator.geolocation )

// browser supports geolocation…else

alert(‘Sorry, no geolocation support’);

Note: detecting geolocation is fairly simple, some other features require a bit more work to check for support, that’s why…

ARTISANS OF OPEN SOURCE

Compatibility(feature detection: Modernizr)

• Mordernizr: is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features.

• Use it to easily figure if the user agent supports an specific featureo Example: Detecting geolocation

• Modernizr.geolocation ? alert(‘We know where you are!!’): alert(‘Where the heck are you!?’);

ARTISANS OF OPEN SOURCE

Compatibility(feature detection: Modernizr)

• @font-face• Canvas• Canvas Text• HTML5 Audio• HTML5 Video• rgba()• hsla()• border-image:• border-radius:• box-shadow:• opacity:• Multiple

backgrounds

• CSS Animations• CSS Columns• CSS Gradients• CSS Reflections• CSS 2D

Transforms• CSS 3D

Transforms• CSS Transitions• Geolocation API• localStorage• sessionStorage• SVG• SMIL

• SVG Clipping• Drag and Drop• hashchange• X-window

Messaging• History

Management• applicationCache• Web Sockets• Web Workers• Web SQL Database• IndexedDB• Input Types• Input Attributes

Current version is 1.5 (July 2010), it detects the following features:

ARTISANS OF OPEN SOURCE

Compatibility

• Opera feature support

• Firefox feature support

ARTISANS OF OPEN SOURCE

Compatibility

• Chrome feature Support

• Safari Feature Support

ARTISANS OF OPEN SOURCE

Compatibility

• IE feature support

ARTISANS OF OPEN SOURCE

Blah blah blah…show me!

• Code examples and featureso Presentation by Google site html5rocks.com