HTML5: features with examples

HTML5Human Computer Interaction 2013

Alfredo Torre

DIEEI

March 26, 2013

University of CataniaElectric, Electronics and Computer Engineering Department (DIEEI)

http://www.unict.it/

https://www.dieei.unict.it/en

What we’ll seeThe web markups

Brief history of HTML5The improvementsBrowser supportHow to start

With this introduction we are goingto show you the new features of thisweb markup language standardizedby W3C. Therefore the contents weare going to present are notsufficient to comprehend all thefeatures of HTML5.

Alfredo Torre (DIEEI) HTML5 March 26, 2013 2 / 100

Part I

HTML 5


TOC

1 IntroductionHTML 5: a story so farObjectives

2 Markup languageUnder the hoodThe Document ModelHow to write HTML5 documentMedia

3 Web ApplicationsClient-Server ArchitectureTowards desktop and web integrationSemantic description of web content


Introduction HTML 5: a story so far

From HTML2 to HTML5

The beginningHTML was first published as an Internet draft in 1993. During the ’90sHTML grew up faster and faster and finally, in 1999, version 4.01 wasreleased. In the course of its development, the World Wide WebConsortium (W3C) assumed control of the specification.

HTML vs XMLAfter the rapid delivery of these four versions though, HTML was widelyconsidered a dead-end; the focus of web standards shifted to XML andXHTML, and HTML was put on the back burner. In the meantime,HTML refused to die, and the majority of content on the web continued tobe served as HTML. To enable new web applications and address HTML’sshortcomings, new features and specifications were needed for HTML.



HTML’s rebirthHTML5 opens its eyes

Wanting to take the web platform to a newlevel, a small group of people started the WebHypertext Application Working Group(WHATWG) in 2004. They created theHTML5 specificationNew features specifically geared to webapplications saw the light.The term Web 2.0 was coinedWe are living this new golden age right nowThe first working draft for HTML5 in 2008The XHTML 2 working group stopped in 2009The specification has not been completelylocked down



HTML5 and multi-platformOne ring to rule them all

HTML5 is an attempt to define a single markuplanguage that can be written in either HTML orXHTML syntax.It introduces markup and application programminginterfaces (APIs) for complex web applications.For the same reasons, HTML5 is also a potentialcandidate for cross-platform mobile applications.Many features of HTML5 have been built with theconsideration of being able to run on low-powereddevices such as smartphones and tablets.


Introduction Objectives

A new vision

CompatibilityIf HTML5 features are not supported, the behavior must degradegracefullyBackward compatibility - The old Internet must survive

UtilityPriority of ConstituenciesUser is KingThis means, when in doubt, the specification values users overauthors, over implementers (browsers), over specifiers (W3C), andover theoretical purity.HTML5 must be practical



A new vision

Interoperability (Simple is better)A new, simplified DOCTYPENative browser ability instead of complex JavaScript codeA new, simplified character set declaration

Universal accessWeb Accessibility Initiative (WAI)Accessible Rich Internet Applications (ARIA)



RulesSome rules for HTML5 were established

New features should be based on HTML, CSS, DOM, and JavaScriptReduce the need for external plugins (like Flash)Better error handlingMore markup to replace scriptingHTML5 should be device independentThe development process should be visible to the public


Markup language Under the hood

The doctype

XHTML: the old one<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5: simplicity<!DOCTYPE html>



A simple example

<!DOCTYPE html><html><head><title>Sample page</title></head><body><h1>Sample page</h1><p>This is a<a href="demo.html">simple</a> sample.</p></body></html>

It looks like the same as HTML4. But there is more...



Some new features

New content-specific elements, like<article>, <footer>, <header>, <nav>, <section>

The <video> and <audio> elements for media playbackNew form controls, like calendar, date, time, email, url,searchSupport for local storageThe <canvas> element for 2D drawing



Tags

Tags have to be nested such that elements are all completely within eachother, without overlapping:

Wrong<p>This is <em>very <strong>wrong</em>!</strong></p>

Correct<p>This <em>is <strong>correct</strong>.</em></p>



Attributes

Elements can have attributes, which control how the elements work. In theexample below, there is a hyperlink, formed using the a element and itshref attribute:

<a href="demo.html">simple</a>

Attributes are placed inside the start tag, and consist of a name and avalue, separated by an "=" character. The attribute value can remainunquoted if it doesn’t contain space characters or any of " ’ = < or >.Otherwise, it has to be quoted using either single or double quotes. Thevalue, along with the "=" character, can be omitted altogether if the valueis the empty string.



Attributes

<input name=address disabled><input name=address disabled="">

<input name=address maxlength=200><input name=address maxlength=’200’><input name="address" maxlength="200">



Charset

Short form - Supported by HTML5 and simplest<meta charset=’utf-8’>

Long form - also supported<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8’>

I never use funny characters. Do I still need to declare my characterencoding?Yes! You should always specify a character encoding a on every HTMLpage you serve. Not specifying an encoding can lead to securityvulnerabilities.

aSee also: Stack overflow: Meta charset discussion


http://openmya.hacker.jp/hasegawa/security/utf7cs.html

http://openmya.hacker.jp/hasegawa/security/utf7cs.html

http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type


Namespace and languageKeep it simple please!

XHTML root elementA valid XHTML has to specify the namespace with xmlns (that stands for"XML namespace")<html xmlns="http://www.w3.org/1999/xhtml"

lang="en"xml:lang="en">

Long form - also supportedNow you can easily declare the HTML root element like below:<html lang="en">

The namespace is setted for you placing the HTML elements in theXHTML namespace.



HTML5 is not XML

It is not case sensitive<div>, <DIV>, <dIV> 

You have not to close every tag<BR>, <br>, <br /> <img>, <ImG>, <img /> 

However it is better to use the XHTML code style to maintain acleaner codeNow it is possible to nest elements inside the a tag


Markup language The Document Model

The DOMDocument Object Model

A DOM tree is an in-memoryrepresentation of a document.

HTML user agents (e.g. Web browsers)parse the HTML markup, turning it intoa DOM (Document Object Model) tree.

DOM trees contain several kinds ofnodes, in particular

A DocumentType nodeElement nodesText nodesComment nodesProcessingInstruction nodes(in some cases)



The DOM

A W3C standardDescribes how the document object can betraversed and modifiedRepresented as tree structureCan add new elements to the pageCan change attributes of existing elementsClient-side languages can work on it (like JS)



DOM schematic

Figure: The Document Object Model



The DOM Tree

The root element of the DOM tree (document)is htmla

It contains two elements, head and body

The head element contains:title element, which itself contains a Textnode with the title of the webpage

The body element contains other HTMl entitiesto describe the page partioning.This DOM tree can be manipulated fromscripts in the page.

aSee slide 2



Example

For example, here is a form with a script that sets the value of the form’soutput element to say "Hello World":<form name="main">Result: <output name="result"></output><script>document.forms.main.elements.result.value = ’Hello World’;</script></form>

We are not going to use Javascript in its pure form. We will manipulateour DOM elements via jQuery.


http://www.jquery.com


Example

Each element in the DOM tree is represented by anobject, and these objects have APIs so that theycan be manipulated.For instance, a link (e.g. the a element in the treeabove) can have its "href" attribute changed inseveral ways:

var a = document.links[0]; // obtain the first link in the documenta.href = ’sample.html’; // change the destination URL of the linka.protocol = ’https’; // change just the scheme part of the URL// change the content attribute directlya.setAttribute(’href’, ’http://example.com/’);


Markup language How to write HTML5 document

<HEAD>The head of the document

The first child of the root element is usually <head>. <head> containsmetadata — information about the page, rather than the body of the pageitself. The body of the page is, unsurprisingly, contained in the <body>

element.<head><meta charset=’utf-8’><title>My Weblog</title><link rel="stylesheet" type="text/css" href="style.css" /><link rel="alternate" type="application/atom+xml"

title="Atom␣feed"href="/feed/" />

<link rel="search" type="application/opensearchdescription+xml"title="Search"href="opensearch.xml" />

<link rel="shortcut␣icon" href="/favicon.ico" /></head>



Link relationsHow to specify the kind of a link

The a tag simply give you the ability to link (withan anchor) another page or another resource.Thanks to HTML5 there is also the possibility toexpress why a link points to a given resource withthe rel attribute.

Two categories of links can be created using the linkelement:

links to external resources are links toresources that are to be used to augment thecurrent documenthyperlink links are links to other documents



Link relationsThe rel attribute

rel="stylesheet" links to a CSS stylesheetrel="alternate" helps crawlers to find an alternate source of information

(e.g. RSS, Atom, PDF)rel="next" indicates the next page of a multi-page documentrel="prev" indicates the previous page of a multi-page document

rel="shortcut icon" the favicon (new in HTML5: the sizes attribute)



Link relationsThe rel attribute

rel="canonical" defines a single page link to avoid duplicate contents(microformats)

rel="nofollow" it was invented by Google and standardized within themicroformats community

rel="search" it should point to an OpenSearch document that describeshow a browser could construct a URL to search the currentsite for a given keyword

rel="tag" for tagging (invented by Technorati)

Microformats.org - HTML5 link type extensionsHTML5 link types


http://googleblog.blogspot.it/2005/01/preventing-comment-spam.html

http://www.opensearch.org/Home

http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions

http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes


New Semantic ElementsHTML5 introduces new elements that express the semantics associated tospecified portions of a webpage and the deriving contents.Google and Opera analyzed millions of pages to discover the common IDnames for DIV tags and found a huge amount of repetition. For example,since many people used div id="footer" to mark up footercontent, HTML5 provides a set of new sectioning elementsthat you can use in modern browsers right now.

header: header content (for a page or a section of thepage)footer: footer content (for a page or a section of thepage)section: a section in a web pagearticle: independent article contentaside: related content or pull quotesnav: navigational aids



HTML5 page structure

Figure: Schematic of HTML5 webpage structure



Semantic elements

<section>Use section to group related contents. It typically has a heading.Examples of sections would be chapters, the tabbed pages in a tabbeddialog box, or the numbered sections of a thesis. A Web site’s home pagecould be split into sections for an introduction, news items, contactinformation.

<nav>The nav element represents a section of a page that links to other pages orto parts within the page: a section with navigation links. Not all groups oflinks on a page need to be in a nav element — only sections that consistof major navigation blocks are appropriate for the nav element.



Semantic elements

<article>Like sections, but for self contained content. This could be a forumpost, a magazine or newspaper article, a Web log entry, a user-submittedcomment, an interactive widget or gadget, or any other independent itemof content.The lists of articles on a blog it could be made of article elements. Asingle page could contain a undefined number of articles.

<aside>The aside element represents a section of a page that consists of contentthat is tangentially related to the content around the aside element, andwhich could be considered separate from that content. Such sections areoften represented as sidebars in printed typography.



Semantic elements

<hgroup>The hgroup element represents the heading of a section. The element isused to group a set of h1–h6 elements when the heading has multiplelevels, such as subheadings, alternative titles, or taglines.

<header>The header element represents a group of introductory or navigationalaids. A header element is intended to usually contain the section’sheading (an h1–h6 element or an hgroup element), but this is notrequired. The header element can also be used to wrap a section’s tableof contents, a search form, or any relevant logos.



Semantic elements

<footer>The footer element represents a footer for its nearest ancestor sectioningcontent or sectioning root element. A footer typically contains informationabout its section such as who wrote it, links to related documents,copyright data, and the like. Footers don’t necessarily have to appear atthe end of a section, though they usually do. When the footer elementcontains entire sections, they represent appendices, indexes, longcolophons, verbose license agreements, and other such content.



Semantic elements

<time>The time element represents either a time on a 24 hour clock, or a precisedate in the proleptic Gregorian calendar, optionally with a time and atime-zone offset.<time datetime="2013-03-14">14 marzo 2013</time>

<time datetime="2012-12-21" pubdate>End of the World</time>

<mark>The mark element represents a run of text in one document marked orhighlighted for reference purposes.



Figure elementNow caption goes with the image

Before:

<img src="path/to/image" alt="The␣sun" /><p>Image of the Sun. </p>

After:

<figure><img src="path/to/image" alt="About␣image" /><figcaption>

<p>This is a caption associated to an image. </p></figcaption>

</figure>

Now an image can have a semantic meaning and it is wrapped into figure

element.



Editable contents on a webpageTowards a UI unification

A new attribute can be applied to elements, called contenteditable. As thename implies, this allows the user to edit any of the text contained withinthe element, including its children.

<ul contenteditable="true"><li> Wake up </li><li> Drink Coffee </li><li> Finally go so </li>

</ul>

It’s a step towards an interface more similar to a classic desktop GUI.


Markup language Media

How to insert a video on a web pageNo more plugins

Anyone who has visited YouTube.com in the past years knows how toembed video in a web page. But prior to HTML5, there was nostandards-based way to do this.

1 QuickTime2 RealPlayer3 or...

Now, think about those plugins, for example Flash,and the internal policy of its producer (Adobe).If you try to download Flash version 11.3 forLinux amd64 you will reach the point, a sad point...


http://www.youtube.com


Video/audio codecsVideo killed the Net stars?

There are many video containers that constitute an envelope of thevideo/audio stream. As obvious it is impossible to redistribute losslessvideo stream (and audio, unless you are viewiend a prior 1927 movie).So there is the real need of a compression technique with two codec videoand audio streams and put them into a container.



Video formats browser support



Use several video codecs and containers

There is no single combination of containers and codecs that works inall HTML5 browsers.This is not likely to change in the near future.To make your video watchable across all of these devices andplatforms, it is necessary to encode your video more than once.



Codec compatibility

For maximum compatibility, here’s what your video workflow will look like:

1 Make one version that uses WebM (VP8 + Vorbis).2 Make another version that uses H.264 baseline video and AAC "low

complexity" audio in an MP4 container.3 Make another version that uses Theora video and Vorbis audio in an

Ogg container.4 Make another version that uses Theora video and Vorbis audio in an

Ogg container. 1

5 Link to all three video files from a single <video> element, and fallback to a Flash-based video player.

1WebM and H.264 have sufficient support. So, unless you’re supportingFirefox 3.5 or Opera 10.5, you can drop Theora.



Video tagThe code

<video src="hci_video.webm" width="640" height="480"></video><video src="hci_video.webm" width="640" height="480" controls></video><video src="hci_video.webm" width="640" height="480" autoplay></video><video src="hci_video.webm" width="640" height="480" preload controls></

video>

But we have to put three video sources to guarantee the playback withalmost all browsers. How to do it?<video width="640" height="480" controls><source src="hci_video.mp4" type="video/mp4;␣codecs=avc1.42E01E,mp4a

.40.2"><source src="hci_video.webm" type="video/webm;␣codecs=vp8,vorbis"><source src="hci_video.ogv" type="video/ogg;␣codecs=theora,vorbis">

</video>



Video tagThe type of sources

The type attribute looks complicated — well, it is complicated. It is acombination of three pieces of information:

1 the container format,2 the video codec,3 the audio codec.

<source src="hci_video.ogv" type="video/ogg;␣codecs=theora,vorbis">

iPads running iOS 3.x had a bug that prevented them from noticinganything but the first video source listed. iOS 4 (a free upgrade for alliPads) fixes this bug. If you want to deliver video to iPad owners whohaven’t yet upgraded to iOS 4, you will need to list your MP4 file first,followed by the free video formats.

Further reading: HTML5 - the video elementAlfredo Torre (DIEEI) HTML5 March 26, 2013 45 / 100

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#video


Canvas tagHow to draw in 2D

HTML5 defines the canvas element as "aresolution-dependent bitmap canvas which can beused for rendering graphs, game graphics, or othervisual images on the fly." A canvas is a rectanglein your page where you can use JavaScript todraw anything you want.

<canvas width="640" height="480"></canvas>

Further reading: Mozilla Canvas Tutorial


https://developer.mozilla.org/en/Canvas_tutorial


Canvas tagThe 2D grid

The canvas is a two-dimensional grid. The coordinate (0, 0) is at theupper-left corner of the canvas. Along the X-axis, values increase towardsthe right edge of the canvas. Along the Y-axis, values increase towards thebottom edge of the canvas.


Web Applications Client-Server Architecture

Client/Server ModelRepetita iuvant

A web application normally uses the traditional Client/Server architecture:

The Client gathers information from the user and asks the server aserviceThe Server receives a request for information from the client andservs the requested information to it

Figure: Client/Server - 2-tier Architecture



Three-tier ArchitectureNot only static pages

Now we have often a 3-tier (or multi-tier) client/server system, whichconsists of three distinct pieces:

Client tier or User Interface tier or Presentation TierProcessing tier (or middle tier). It is composed by a web server:Apache, nginx, Lighttpd, IIS...Data storage tier, which stores data in a database and receives therequests from the processing tier, answering to it (e.g. MySQL,PostgreSQL).Alfredo Torre (DIEEI) HTML5 March 26, 2013 49 / 100


Multi-tier ArchitectureJEE: what you will see in the future...

Figure: J2EE multi-tier architecture



Web TechnologiesHow to distinguish server from client



Server-side TechnologyLAMPP: Linux Apache MySQL Python/PHP/Perl

If you want to install a LAMPP stack on your machine, you can tryXAMPP, an easy to install Apache distribution that contains PHP, Perland MySQL and is available for the most used operating systems. There isalso WAMP for Windows platforms.


Web Applications Towards desktop and web integration

Local Storage For Web ApplicationA method to save information with a web browser

Client ApplicationXML fileINI fileSQLiteDBMSSpecific application file(binary or text)

Web ApplicationCookieNothing else? :/



Using cookies for persistent data

Cookies are included with every HTTP requestRedundant transmission of the same informationCookies are unencrypted (unless the entire web application is servedover SSL)Limited to about 4 KB of dataThey are not really useful for a web 2.0 application

What is really neededA lot of storage space on the client that persists beyond a page refreshand is not transmitted to the server.



The first attempts to persistent dataIn the beginning, there was only Internet Explorer... (more or less)

Microsoft Internet Explorer: userData 64 KB (XML-based - withoutany explicit permission)2002 - Adobe Flash 6: the flash cookies 100 KB2006 - From Flash to JS: dojox.storage

2007 - Google Gears: browser plugin with an API to embed a SQLiteDB



Web Storage (aka DOM Storage)A mechanism for client-side persistent data storage

Session StorageIt is intended for short-lived data and shared only with pages from thesame domain opened in the same window/tab and does not persist afterthe window/tab is closed. Every time a user opens a page in a newwindow/tab, the browser creates a new session storage database.

Local StorageThis mechanism allows storing data for more than a single session.Storage area is persistent and not limited to the lifetime of thewindow/tab.

These ones are exposed through the sessionStorage and localStorageglobal objects (attribute of the window object), respectively.



Session Storage

Manipulating the Session Storage with client-side Javascript:// Set and Get an attributesessionStorage.setItem(key, arbitrary value);var item = sessionStorage.getItem(key);

// Removing and clearing data from the Session Storagevar item = sessionStorage.removeItem(key);

// Clear all items from the listsessionStorage.clear();

// Find out of the number of key/value pairs in the storagevar no_of_items = sessionStorage.length;



Web Storage factsLocal Storage etc.

The sessionStorage methods can be also applied to localStorageAn application can store up to 5 MB of dataAll modern browsers support Web StorageThere is also jQuery.data() for sessionStorage based on DOMelementsSee also this webpage (diveintojavascript.com)Further reading: Local Storage for Web Applications


http://www.diveintojavascript.com/javascript-apis/web-storage-dom-storage

http://diveintohtml5.info/storage.html


GeolocationDetecting the user position during web navigation

Before HTML5, geolocation was already possible through the analysis ofdata from:

IP addressWireless network connection (LAN)Mobile phone tracking through triangulation of hello messages fromBase Transceiver StationsTracking latitude and longitude (WGS84) via Global PositioningSystem



HTML5 Geolocation API

The geolocation API lets you share your location withtrusted web sitesLatitude and longitude are available to JavaScript on the page"User Agents must not send location information to Web siteswithout the express permission of the user"



HTML5 Geolocation APIHow to use Geolocation API

1 First of all check the browser support2 Include the client-side Javascript request3 Wait for user permission4 If positive then do something with the location (maps, graphs, near

services, etc.)

function get_location() {navigator.geolocation.getCurrentPosition(show_map);

}/* Callback @position: coords and timestamps attributes */function show_map(position) {

var latitude = position.coords.latitude;var longitude = position.coords.longitude;// let’s show a map or do something interesting!

}


http://caniuse.com/geolocation


HTML5 Geolocation APIThe Geolocation interface

interface Geolocation {void getCurrentPosition(PositionCallback successCallback,

optional PositionErrorCallback errorCallback,optional PositionOptions options);

long watchPosition(PositionCallback successCallback,optional PositionErrorCallback errorCallback,optional PositionOptions options);

void clearWatch(long watchId);};

callback PositionCallback = void (Position position);

callback PositionErrorCallback = void (PositionError positionError);



Geolocation interface APIExplaining the interface

You can check if an error has occurred with getCurrentPosition()

You can set PositionOptions attributes for accuracy, timeout, and soonYou can continously monitor user’s position throughwatchPosition()

Reference: http://www.w3.org/TR/geolocation-API


http://www.w3.org/TR/geolocation-API


Geolocation PositionOptions

Property Type Default NotesenableHighAccuracy Boolean false true might be slowertimeout long (no default) in millisecondsmaximumAge long 0 in milliseconds



Offline Web Application

It sounds like a contradiction in termsThe home page of the offline web application points to a list ofresources, called a manifest fileThe browser downloads all the resources in the manifest, then storesthem on a local cache, ad TA-DAWhen you lose connection it’s your browser that serves theinformation insteaf of the networkHow it works? There is a flag on the DOM for discovering if you areonline or not



Offline Web ApplicationThe Manifest file declaration

<!DOCTYPE html><html manifest="/cache.manifest"><body>...</body></html>

The cache manifest file can be located anywhere on your web server,but it must be served with the content typetext/cache-manifest

Every page of the web application needs a manifest attribute thatpoints to the cache manifest for the entire application



Offline Web ApplicationManifest file

The manifest file is a file (filename.manifest) composed of three mainsections:

The CACHE section describing resources to be cachedThe NETWORK section describing resources that can only be accessedonline.The FALLBACK section contains only one line specifying what is theresource to be displayed when the user in offline mode tries to accessa resource that has not been cached.Further reading: http://marakana.com/bookshelf/html5_tutorial/offline_applications.html.


http://marakana.com/bookshelf/html5_tutorial/offline_applications.html

http://marakana.com/bookshelf/html5_tutorial/offline_applications.html


Offline Web ApplicationManifest file example

CACHE MANIFEST# Version 1.0

CACHE:/cached.html/style.css/script.js/image.jpgNETWORK:*FALLBACK:/fallback.html



Offline Web ApplicationHave we missed anything?

And the webpage itself?In the previous example we can assume that the name of the page isindex.html. But we have not declared it as cacheable...

There already is!When you navigate to an HTML page with a manifest attribute, the pageitself is assumed to be part of the web application, so you don’t need tolist it in the manifest file itself.



Offline Application Event Flow



window.applicationCache object

You can check the current state of the cache at any time by reading thestatus attribute of the applicationCache object:

1 UNCACHED: There is nothing in the cache.2 IDLE: The cache that is used is the latest one.3 CHECKING: Currently checking for a new updated version of the

cache.4 DOWNLOADING: Currently downloading the new cache.5 UPDATEREADY: When a new version of the cache is available, has

been downloaded and ready to be used but not yet in use until theend user refresh the browser or if thewindow.applicationCache.swapCache() function is called.

6 OBSOLETE: The cache has been marked as obsolete.



Try it yourself!

1 Try the HTML5 demos here: http://html5demos.com/

2 Clone the examples at git://github.com/remy/html5demos.git

3 Get HTML5 Boilerplate4 Try to design and sketch this web application:

Get the geolocation and show in a mapA form to store citizens informationStore the information locally


http://html5demos.com/

https://github.com/remy/html5demos

git://github.com/remy/html5demos.git

https://github.com/h5bp/html5-boilerplate


Web FormsSending data to server from a web page

<form action="form_handler.php" method="get"><input name="message" autofocus><input type="email" name="email" placeholder=

"[email protected]"><input type="url" name="website" placeholder=

"http://mywebsite.com"><input name="nickname" placeholder="Insert␣

you␣nickname"><input type="submit" value="Save">

</form>

Can you guess the differences with HTML4?



Web FormsOther New Features

Numbers as SpinboxesNumbers as SlidersDate PickersSearch BoxesColor PickersAutomatic Form Validation!GTK+3 applications in HTML5


https://developer.gnome.org/gtk3/stable/gtk-broadway.html

Web Applications Semantic description of web content

MicrodataMaking order from chaos

Micro... data?Microdata annotates the DOM with scoped name/value pairs from customvocabularies

Ordered information with vocabularies and taxonomiesAll properties from a specific element of DOM aretaken from a certain vocabulary (scope)A namespace is needed for each vocabulary (uniqueidentifier)Add even more semantics to HTML5Declare your Microdata vocabulary by addingitemtype attribute



Microdata: Hot to describe of a Person

An item with the item type http: // data-vocabulary. org/ Personrepresents a Person.Property Descriptionname (fn) Namenickname Nicknamephoto An image linktitle Title. For example, Financial Managerrole Role. For example, Accountanturl Link to a web pageaffiliation (org) Organization.friend Another personcontact Social relationship between with another personacquaintance Social relationship with another personaddress (adr) Address (can have subprop)


http://data-vocabulary.org/Person


Microdata: a Person description example

<section itemscope itemtype="http://data-vocabulary.org/Person"><img itemprop="photo" src="me.jpg" alt="[Alfredo␣Torre,␣circa␣2013]"

><h1>Contact Information</h1><dl><dt>Name</dt><dd itemprop="name">Alfredo Torre</dd><dt>Position</dt><dd><span itemprop="title">Software developer</span> for

<span itemprop="affiliation">A2PLAB</span></dd><dt>Mailing address</dt><dd itemprop="address" itemscope

itemtype="http://data-vocabulary.org/Address"><span itemprop="street-address">100 Main Street</span><br><span itemprop="locality">Anytown</span>,<span itemprop="region">WX</span><span itemprop="postal-code">95199</span><br><span itemprop="country-name">Iceland</span>

</dd>



Microdata: OOP notation

PersonPerson.addressPerson.address.street-addressPerson.address.localityPerson.address.regionPerson.address.postal-codePerson.address.country-name



Show Geolocation information with MicrodataAdd Semantics to your information

See slide 7 about Geolocation API.<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"

><meta itemprop="latitude" content="37.4149" /><meta itemprop="longitude" content="-122.078" />

</span>



Microdata: Some Links

HTML5 microdata specificationGoogle: Rich snippetsLive MicrodataAbout Microdata (Google)About Microformats (Google)About RDFa (Google)


http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html#microdata

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=99170

http://foolip.org/microdatajs/live/





Microformats vs Microdata

In general, microformats use the class attribute in HTML tags (often<span> or <div>) to assign brief and descriptive names to entities andtheir properties.<div class="vcard">

<img class="photo" src="www.example.com/bobsmith.jpg" /><strong class="fn">Bob Smith</strong><span class="title">Senior editor</span> at <span class="org">ACME

Reviews</span><span class="adr">

<span class="street-address">200 Main St</span><span class="locality">Desertville</span>, <span class="region">AZ<

/span><span class="postal-code">12345</span>

</span></div>


Part II

Use Cases and Resources


Use cases Jobs

Skillset required as Fron-End developerA Real Example: Game Client Developer

Design and develop enterprise-grade HTML5 game clientsAssist with the conceptualization and design of gamesRapidly prototype proof-of-concept game ideas and interfaces forusability evaluation prior to full implementationProvide feedback on business requirements, particularly as they relateto browser capabilitiesApply an iterative agile methodology to development to ensureregular milestone deliverables and feedback to both technical andbusiness stakeholdersCreate well-documented common game library components that canbe reused for future game designsEnsure that best practices are applied to both design andimplementationAlfredo Torre (DIEEI) HTML5 March 26, 2013 83 / 100

Use cases Jobs

Experience required as Fron-End developerA Real Example: Game Client Developer

JavaScript and HTML5Familiar with cutting-edge HTML5 specifications with particularemphasis on 3D transforms, transitions, and animationsExperienced with cross-browser debugging and specific nuancesExperience with the SCRUM methodology

Read the entire job ad


http://www.aplitrak.com/?adid=ci5nbG92ZXIuNDA2NDEuMzM3MEBleWVzcHlyZWNydWl0bWVudC5hcGxpdHJhay5jb20

Use cases Examples

Flash vs HTML5 browser gamehttp://flashvhtml.com/

Animation, Parallax, Responsive design, Scroll


http://flashvhtml.com/

Use cases Examples

Personal webpagehttp://www.vanderson.com.br/

Figure: Swipe navigation, Full Screen, Flexible


http://www.vanderson.com.br/

Use cases Examples

Museum with 3D items galleryhttp://www.museums-sheffield.org.uk/

Figure: Home Page with a piece of code from Firebug

The site uses a host of the new semantic elements provided by HTML5and has a WebGL interface (with Flash fallback) for 3D exploration ofsome of the collection items.


http://www.museums-sheffield.org.uk/

Use cases Examples

A website like an infographichttp://jamesanderson613.com/

Scalable Vector GraphicsBuilt with HTML5 with inline SVG being used for the graphic visualisationand animation of the facts and figures, thus making the site perform like alarge interactive infographic.


http://jamesanderson613.com/

Use cases Examples

Public Utility Mashup - What you could dohttp://fixmystreet.com/

An inspiring applicationFixMyStreet is an HTML5, responsive, Web 2.0 mash up of public dataand user-generated content that is an information system.


http://fixmystreet.com/

Use cases Examples

Online Image Editor Toolhttp://www.picozu.com/editor

Like a desktop applicationPicozu Editor is a drawing and photo re-touching application built withJavaScript, HTML5 and CSS3. The app uses interesting aspects ofHTML5, notably canvas for applying image filters and the Drag and DropAPI, which allows users to add images from their desktop.


http://www.picozu.com/editor

http://www.picozu.com/editor

Use cases Examples

iPhone Offline Application - How to not pay Apple Markethttp://currency.io

Local Storage, Client-Side programmingAn offline-capable, html5 currency converter app for the iPhone. All thecode runs only on your phone.


http://currency.io

Use cases Examples

How to show a place and its historyhttp://www.unionstationdenver.com/

Navigating Space and TimeFirst of all navigate the map of this place and its neighborhood, then lookat the History page to scroll through the infographics and matchingcontent.


http://www.unionstationdenver.com/

Use cases Examples

Meanwhile in Catania...http://www.albapiana.com

Figure: Multi-platform, Full-screen, Design and user interaction, Navigation


http://www.albapiana.com

Use cases Frameworks

TideSDKWrite HTML5, CSS3, Javascript application then run it on desktop

http://www.tidesdk.orgDevelop your desktop apps quickly using HTML5, CSS3 andJavaScriptExtend the functionality of your app with

PythonPHPRuby

TideSDK Examples


http://www.tidesdk.org

https://github.com/TideSDK/TideSDK-Examples


PhoneGapOpen source solution for building cross-platform mobile apps with standards-based Webtechnologies

http://phonegap.com

A PhoneGap application may only use HTML, CSS, and JavaScriptGetting Started with PhoneGap


http://phonegap.com

http://docs.phonegap.com/en/2.5.0/guide_getting-started_index.md.html


PantheonA rapid web application development playground powered by Drupal

Eng. Giuseppe Mastroeni suggests PantheonThis is a complete Drupal application playground. It is FREE andit is simple. Embrace the power of the "best" CMS in 5 minutes!

https://www.getpantheon.com


http://www.linkedin.com/in/giuseppemastroeni/en

https://www.getpantheon.com

References Useful stuff

Make a sketch of your design

1 wireframe.cc2 HTML 5 Mockup and

Wireframing3 maqetta.org4 Lumzy mockup builder5 Balsamiq mockup6 mockingbird


http://wireframe.cc

https://moqups.com

https://moqups.com

http://www.maqetta.org/

http://lumzy.com/

http://www.balsamiq.com/

https://gomockingbird.com/

References Useful stuff

Links

1 Web trends 20132 Parallax scrolling technique3 Offline (GDD)4 HTML5 bleeding edge (GDD)5 Creating modern Web Apps for Chrome (GDD)6 http://www.shinydemos.com/ (Opera)7 http://www.brandongenerator.com (Microsoft)


http://www.netmagazine.com/features/20-top-web-design-and-development-trends-2013

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://offline-11.appspot.com

http://tokyo.bleedinghtml5.appspot.com

http://html5-demos.appspot.com/static/gdd11-modern-web-apps/index.html

http://www.shinydemos.com/

http://www.brandongenerator.com

References Go deep to the heart

References

1 HTML5 - W3C Candidate Recommendation 17 December 20122 Mark Pilgrim, Dive Into HTML53 Pro HTML5 and CSS3 Design Patterns (Apress - Bowers, Synodinos,

Sumner)


http://www.w3.org/TR/html5/

http://diveintohtml5.info/

http://www.apress.com/9781430237808

References Go deep to the heart

Contact informations

1 Linkedin: http://www.linkedin.com/in/alfredotorre/en

2 Twitter: @skydiamond3 Blog: http://blog.skydiamond.org


http://www.linkedin.com/in/alfredotorre/en

http://twitter.com/skydiamond

http://blog.skydiamond.org

Date post:	08-May-2015
Category:	Technology
Upload:	alfredo-torre
View:	17,298 times
Download:	0 times