• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5: features with examples
 

HTML5: features with examples

on

  • 14,979 views

This presentation is an introduction to the new features of ...

This presentation is an introduction to the new features of
HTML5. The main elements of this document are:
* Brief history of HTML5
*The improvements
* Browser support
* Semantic elements
* Content Editable on pages
* Video Tag
* Canvas tag
* Local storage
* Geolocation API
* Offline applications
* Microdata
* Use cases

Statistics

Views

Total Views
14,979
Views on SlideShare
14,880
Embed Views
99

Actions

Likes
3
Downloads
42
Comments
0

3 Embeds 99

http://ristorantedellamente.wordpress.com 87
http://www.linkedin.com 7
https://www.linkedin.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5: features with examples HTML5: features with examples Presentation Transcript

    • HTML5 Human Computer Interaction 2013 Alfredo Torre DIEEI March 26, 2013 University of Catania Electric, Electronics and Computer Engineering Department (DIEEI)
    • What we’ll see The web markups Brief history of HTML5 The improvements Browser support How to start Alfredo Torre (DIEEI) With this introduction we are going to show you the new features of this web markup language standardized by W3C. Therefore the contents we are going to present are not sufficient to comprehend all the features of HTML5. HTML5 March 26, 2013 2 / 100
    • Part I HTML 5 Alfredo Torre (DIEEI) HTML5 March 26, 2013 3 / 100
    • TOC 1 Introduction HTML 5: a story so far Objectives 2 Markup language Under the hood The Document Model How to write HTML5 document Media 3 Web Applications Client-Server Architecture Towards desktop and web integration Semantic description of web content Alfredo Torre (DIEEI) HTML5 March 26, 2013 4 / 100
    • Introduction HTML 5: a story so far From HTML2 to HTML5 The beginning HTML was first published as an Internet draft in 1993. During the ’90s HTML grew up faster and faster and finally, in 1999, version 4.01 was released. In the course of its development, the World Wide Web Consortium (W3C) assumed control of the specification. HTML vs XML After the rapid delivery of these four versions though, HTML was widely considered a dead-end; the focus of web standards shifted to XML and XHTML, and HTML was put on the back burner. In the meantime, HTML refused to die, and the majority of content on the web continued to be served as HTML. To enable new web applications and address HTML’s shortcomings, new features and specifications were needed for HTML. Alfredo Torre (DIEEI) HTML5 March 26, 2013 5 / 100
    • Introduction HTML 5: a story so far HTML’s rebirth HTML5 opens its eyes Wanting to take the web platform to a new level, a small group of people started the Web Hypertext Application Working Group (WHATWG) in 2004. They created the HTML5 specification New features specifically geared to web applications saw the light. The term Web 2.0 was coined We are living this new golden age right now The first working draft for HTML5 in 2008 The XHTML 2 working group stopped in 2009 The specification has not been completely locked down Alfredo Torre (DIEEI) HTML5 March 26, 2013 6 / 100
    • Introduction HTML 5: a story so far HTML5 and multi-platform One ring to rule them all HTML5 is an attempt to define a single markup language that can be written in either HTML or XHTML syntax. It introduces markup and application programming interfaces (APIs) for complex web applications. For the same reasons, HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets. Alfredo Torre (DIEEI) HTML5 March 26, 2013 7 / 100
    • Introduction Objectives A new vision Compatibility If HTML5 features are not supported, the behavior must degrade gracefully Backward compatibility - The old Internet must survive Utility Priority of Constituencies User is King This means, when in doubt, the specification values users over authors, over implementers (browsers), over specifiers (W3C), and over theoretical purity. HTML5 must be practical Alfredo Torre (DIEEI) HTML5 March 26, 2013 8 / 100
    • Introduction Objectives A new vision Interoperability (Simple is better ) A new, simplified DOCTYPE Native browser ability instead of complex JavaScript code A new, simplified character set declaration Universal access Web Accessibility Initiative (WAI) Accessible Rich Internet Applications (ARIA) Alfredo Torre (DIEEI) HTML5 March 26, 2013 9 / 100
    • Introduction Objectives Rules Some rules for HTML5 were established New features should be based on HTML, CSS, DOM, and JavaScript Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to the public Alfredo Torre (DIEEI) HTML5 March 26, 2013 10 / 100
    • 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/xhtml1transitional.dtd"> HTML5: simplicity <!DOCTYPE html> Alfredo Torre (DIEEI) HTML5 March 26, 2013 11 / 100
    • Markup language Under the hood 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> <!-- this is a comment --> </body> </html> It looks like the same as HTML4. But there is more... Alfredo Torre (DIEEI) HTML5 March 26, 2013 12 / 100
    • Markup language Under the hood Some new features New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> The <video> and <audio> elements for media playback New form controls, like calendar, date, time, email, url, search Support for local storage The <canvas> element for 2D drawing Alfredo Torre (DIEEI) HTML5 March 26, 2013 13 / 100
    • Markup language Under the hood Tags Tags have to be nested such that elements are all completely within each other, without overlapping: Wrong <p>This is <em>very <strong>wrong</em>!</strong></p> Correct <p>This <em>is <strong>correct</strong>.</em></p> Alfredo Torre (DIEEI) HTML5 March 26, 2013 14 / 100
    • Markup language Under the hood Attributes Elements can have attributes, which control how the elements work. In the example below, there is a hyperlink, formed using the a element and its href attribute: <a href="demo.html">simple</a> Attributes are placed inside the start tag, and consist of a name and a value, separated by an "=" character. The attribute value can remain unquoted if it doesn’t contain space characters or any of " ’ = < or >. Otherwise, it has to be quoted using either single or double quotes. The value, along with the "=" character, can be omitted altogether if the value is the empty string. Alfredo Torre (DIEEI) HTML5 March 26, 2013 15 / 100
    • Markup language Under the hood Attributes <!-- empty attributes --> <input name=address disabled> <input name=address disabled=""> <!-- attributes with value --> <input name=address maxlength=200> <input name=address maxlength=’200’> <input name="address" maxlength="200"> Alfredo Torre (DIEEI) HTML5 March 26, 2013 16 / 100
    • Markup language Under the hood 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 character encoding? Yes! You should always specify a character encoding a on every HTML page you serve. Not specifying an encoding can lead to security vulnerabilities. a See also: Stack overflow: Meta charset discussion Alfredo Torre (DIEEI) HTML5 March 26, 2013 17 / 100
    • Markup language Under the hood Namespace and language Keep it simple please! XHTML root element A 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 supported Now you can easily declare the HTML root element like below: <html lang="en"> The namespace is setted for you placing the HTML elements in the XHTML namespace. Alfredo Torre (DIEEI) HTML5 March 26, 2013 18 / 100
    • Markup language Under the hood HTML5 is not XML It is not case sensitive <div>, <DIV>, <dIV> <!-- all valid --> You have not to close every tag <BR>, <br>, <br /> <!-- all valid --> <img>, <ImG>, <img /> <!-- all valid --> However it is better to use the XHTML code style to maintain a cleaner code Now it is possible to nest elements inside the a tag Alfredo Torre (DIEEI) HTML5 March 26, 2013 19 / 100
    • Markup language The Document Model The DOM Document Object Model A DOM tree is an in-memory representation of a document. DOM trees contain several kinds of nodes, in particular HTML user agents (e.g. Web browsers) parse the HTML markup, turning it into a DOM (Document Object Model) tree. A DocumentType node Element nodes Text nodes Comment nodes ProcessingInstruction nodes (in some cases) Alfredo Torre (DIEEI) HTML5 March 26, 2013 20 / 100
    • Markup language The Document Model The DOM A W3C standard Describes how the document object can be traversed and modified Represented as tree structure Can add new elements to the page Can change attributes of existing elements Client-side languages can work on it (like JS) Alfredo Torre (DIEEI) HTML5 March 26, 2013 21 / 100
    • Markup language The Document Model DOM schematic Figure: The Document Object Model Alfredo Torre (DIEEI) HTML5 March 26, 2013 22 / 100
    • Markup language The Document 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 Text node with the title of the webpage The body element contains other HTMl entities to describe the page partioning. This DOM tree can be manipulated from scripts in the page. a Alfredo Torre (DIEEI) See slide 2 HTML5 March 26, 2013 23 / 100
    • Markup language The Document Model Example For example, here is a form with a script that sets the value of the form’s output 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 manipulate our DOM elements via jQuery. Alfredo Torre (DIEEI) HTML5 March 26, 2013 24 / 100
    • Markup language The Document Model Example Each element in the DOM tree is represented by an object, and these objects have APIs so that they can be manipulated. For instance, a link (e.g. the a element in the tree above) can have its "href" attribute changed in several ways: var a = document.links[0]; // obtain the first link in the document a.href = ’sample.html’; // change the destination URL of the link a.protocol = ’https’; // change just the scheme part of the URL // change the content attribute directly a.setAttribute(’href’, ’http://example.com/’); Alfredo Torre (DIEEI) HTML5 March 26, 2013 25 / 100
    • Markup language How to write HTML5 document <HEAD> The head of the document The first child of the root element is usually <head>. <head> contains metadata — information about the page, rather than the body of the page itself. 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> Alfredo Torre (DIEEI) HTML5 March 26, 2013 26 / 100
    • Markup language How to write HTML5 document Link relations How to specify the kind of a link The a tag simply give you the ability to link (with an anchor) another page or another resource. Thanks to HTML5 there is also the possibility to express why a link points to a given resource with the rel attribute. Two categories of links can be created using the link element: links to external resources are links to resources that are to be used to augment the current document hyperlink links are links to other documents Alfredo Torre (DIEEI) HTML5 March 26, 2013 27 / 100
    • Markup language How to write HTML5 document Link relations The rel attribute rel="stylesheet" links to a CSS stylesheet rel="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 document rel="prev" indicates the previous page of a multi-page document rel="shortcut icon" the favicon (new in HTML5: the sizes attribute) Alfredo Torre (DIEEI) HTML5 March 26, 2013 28 / 100
    • Markup language How to write HTML5 document Link relations The rel attribute rel="canonical" defines a single page link to avoid duplicate contents (microformats) rel="nofollow" it was invented by Google and standardized within the microformats community rel="search" it should point to an OpenSearch document that describes how a browser could construct a URL to search the current site for a given keyword rel="tag" for tagging (invented by Technorati) Microformats.org - HTML5 link type extensions HTML5 link types Alfredo Torre (DIEEI) HTML5 March 26, 2013 29 / 100
    • Markup language How to write HTML5 document New Semantic Elements HTML5 introduces new elements that express the semantics associated to specified portions of a webpage and the deriving contents. Google and Opera analyzed millions of pages to discover the common ID names for DIV tags and found a huge amount of repetition. For example, since many people used div id="footer" to mark up footer content, HTML5 provides a set of new sectioning elements that you can use in modern browsers right now. header: header content (for a page or a section of the page) footer: footer content (for a page or a section of the page) section: a section in a web page article: independent article content aside: related content or pull quotes nav: navigational aids Alfredo Torre (DIEEI) HTML5 March 26, 2013 30 / 100
    • Markup language How to write HTML5 document HTML5 page structure Figure: Schematic of HTML5 webpage structure Alfredo Torre (DIEEI) HTML5 March 26, 2013 31 / 100
    • Markup language How to write HTML5 document 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 tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information. <nav> The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. Alfredo Torre (DIEEI) HTML5 March 26, 2013 32 / 100
    • Markup language How to write HTML5 document Semantic elements <article> Like sections, but for self contained content. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content. The lists of articles on a blog it could be made of article elements. A single page could contain a undefined number of articles. <aside> The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. Alfredo Torre (DIEEI) HTML5 March 26, 2013 33 / 100
    • Markup language How to write HTML5 document Semantic elements <hgroup> The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. <header> The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos. Alfredo Torre (DIEEI) HTML5 March 26, 2013 34 / 100
    • Markup language How to write HTML5 document Semantic elements <footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Footers don’t necessarily have to appear at the end of a section, though they usually do. When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content. Alfredo Torre (DIEEI) HTML5 March 26, 2013 35 / 100
    • Markup language How to write HTML5 document Semantic elements <time> The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset. <time datetime="2013-03-14">14 marzo 2013</time> <!-- nested in articles and pages - the publication date: --> <time datetime="2012-12-21" pubdate>End of the World</time> <mark> The mark element represents a run of text in one document marked or highlighted for reference purposes. Alfredo Torre (DIEEI) HTML5 March 26, 2013 36 / 100
    • Markup language How to write HTML5 document Figure element Now 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. Alfredo Torre (DIEEI) HTML5 March 26, 2013 37 / 100
    • Markup language How to write HTML5 document Editable contents on a webpage Towards a UI unification A new attribute can be applied to elements, called contenteditable. As the name implies, this allows the user to edit any of the text contained within the 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. Alfredo Torre (DIEEI) HTML5 March 26, 2013 38 / 100
    • Markup language Media How to insert a video on a web page No more plugins Anyone who has visited YouTube.com in the past years knows how to embed video in a web page. But prior to HTML5, there was no standards-based way to do this. 1 QuickTime 2 RealPlayer 3 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 for Linux amd64 you will reach the point, a sad point... Alfredo Torre (DIEEI) HTML5 March 26, 2013 39 / 100
    • Markup language Media Video/audio codecs Video killed the Net stars? There are many video containers that constitute an envelope of the video/audio stream. As obvious it is impossible to redistribute lossless video stream (and audio, unless you are viewiend a prior 1927 movie). So there is the real need of a compression technique with two codec video and audio streams and put them into a container. Alfredo Torre (DIEEI) HTML5 March 26, 2013 40 / 100
    • Markup language Media Video formats browser support Alfredo Torre (DIEEI) HTML5 March 26, 2013 41 / 100
    • Markup language Media Use several video codecs and containers There is no single combination of containers and codecs that works in all HTML5 browsers. This is not likely to change in the near future. To make your video watchable across all of these devices and platforms, it is necessary to encode your video more than once. Alfredo Torre (DIEEI) HTML5 March 26, 2013 42 / 100
    • Markup language Media 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 fall back to a Flash-based video player. 1 WebM and H.264 have sufficient support. So, unless you’re supporting Firefox 3.5 or Opera 10.5, you can drop Theora. Alfredo Torre (DIEEI) HTML5 March 26, 2013 43 / 100
    • Markup language Media Video tag The code <video src="hci_video.webm" <!-- with controls --> <video src="hci_video.webm" <!-- autoplay --> <video src="hci_video.webm" <!-- preloading video - not <video src="hci_video.webm" video> width="640" height="480"></video> width="640" height="480" controls></video> width="640" height="480" autoplay></video> autoplay --> width="640" height="480" preload controls></ But we have to put three video sources to guarantee the playback with almost 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> Alfredo Torre (DIEEI) HTML5 March 26, 2013 44 / 100
    • Markup language Media Video tag The type of sources The type attribute looks complicated — well, it is complicated. It is a combination 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 noticing anything but the first video source listed. iOS 4 (a free upgrade for all iPads) fixes this bug. If you want to deliver video to iPad owners who haven’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 element Alfredo Torre (DIEEI) HTML5 March 26, 2013 45 / 100
    • Markup language Media Canvas tag How to draw in 2D HTML5 defines the canvas element as "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly." A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. <canvas width="640" height="480"></canvas> Further reading: Mozilla Canvas Tutorial Alfredo Torre (DIEEI) HTML5 March 26, 2013 46 / 100
    • Markup language Media Canvas tag The 2D grid The canvas is a two-dimensional grid. The coordinate (0, 0) is at the upper-left corner of the canvas. Along the X-axis, values increase towards the right edge of the canvas. Along the Y-axis, values increase towards the bottom edge of the canvas. Alfredo Torre (DIEEI) HTML5 March 26, 2013 47 / 100
    • Web Applications Client-Server Architecture Client/Server Model Repetita iuvant A web application normally uses the traditional Client/Server architecture: The Client gathers information from the user and asks the server a service The Server receives a request for information from the client and servs the requested information to it Figure: Client/Server - 2-tier Architecture Alfredo Torre (DIEEI) HTML5 March 26, 2013 48 / 100
    • Web Applications Client-Server Architecture Three-tier Architecture Not only static pages Now we have often a 3-tier (or multi-tier) client/server system, which consists of three distinct pieces: Client tier or User Interface tier or Presentation Tier Processing 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 the requests from the processing tier, answering to it (e.g. MySQL, PostgreSQL). Alfredo Torre (DIEEI) HTML5 March 26, 2013 49 / 100
    • Web Applications Client-Server Architecture Multi-tier Architecture JEE: what you will see in the future... Figure: J2EE multi-tier architecture Alfredo Torre (DIEEI) HTML5 March 26, 2013 50 / 100
    • Web Applications Client-Server Architecture Web Technologies How to distinguish server from client Alfredo Torre (DIEEI) HTML5 March 26, 2013 51 / 100
    • Web Applications Client-Server Architecture Server-side Technology LAMPP: Linux Apache MySQL Python/PHP/Perl If you want to install a LAMPP stack on your machine, you can try XAMPP, an easy to install Apache distribution that contains PHP, Perl and MySQL and is available for the most used operating systems. There is also WAMP for Windows platforms. Alfredo Torre (DIEEI) HTML5 March 26, 2013 52 / 100
    • Web Applications Towards desktop and web integration Local Storage For Web Application A method to save information with a web browser Client Application Web Application XML file INI file SQLite DBMS Specific application file (binary or text) Alfredo Torre (DIEEI) Cookie Nothing else? :/ HTML5 March 26, 2013 53 / 100
    • Web Applications Towards desktop and web integration Using cookies for persistent data Cookies are included with every HTTP request Redundant transmission of the same information Cookies are unencrypted (unless the entire web application is served over SSL) Limited to about 4 KB of data They are not really useful for a web 2.0 application What is really needed A lot of storage space on the client that persists beyond a page refresh and is not transmitted to the server. Alfredo Torre (DIEEI) HTML5 March 26, 2013 54 / 100
    • Web Applications Towards desktop and web integration The first attempts to persistent data In the beginning, there was only Internet Explorer... (more or less) Microsoft Internet Explorer: userData 64 KB (XML-based - without any explicit permission) 2002 - Adobe Flash 6: the flash cookies 100 KB 2006 - From Flash to JS: dojox.storage 2007 - Google Gears: browser plugin with an API to embed a SQLite DB Alfredo Torre (DIEEI) HTML5 March 26, 2013 55 / 100
    • Web Applications Towards desktop and web integration Web Storage (aka DOM Storage) A mechanism for client-side persistent data storage Session Storage It is intended for short-lived data and shared only with pages from the same domain opened in the same window/tab and does not persist after the window/tab is closed. Every time a user opens a page in a new window/tab, the browser creates a new session storage database. Local Storage This mechanism allows storing data for more than a single session. Storage area is persistent and not limited to the lifetime of the window/tab. These ones are exposed through the sessionStorage and localStorage global objects (attribute of the window object), respectively. Alfredo Torre (DIEEI) HTML5 March 26, 2013 56 / 100
    • Web Applications Towards desktop and web integration Session Storage Manipulating the Session Storage with client-side Javascript: // Set and Get an attribute sessionStorage.setItem(key, arbitrary value); var item = sessionStorage.getItem(key); // Removing and clearing data from the Session Storage var item = sessionStorage.removeItem(key); // Clear all items from the list sessionStorage.clear(); // Find out of the number of key/value pairs in the storage var no_of_items = sessionStorage.length; Alfredo Torre (DIEEI) HTML5 March 26, 2013 57 / 100
    • Web Applications Towards desktop and web integration Web Storage facts Local Storage etc. The sessionStorage methods can be also applied to localStorage An application can store up to 5 MB of data All modern browsers support Web Storage There is also jQuery.data() for sessionStorage based on DOM elements See also this webpage (diveintojavascript.com) Further reading: Local Storage for Web Applications Alfredo Torre (DIEEI) HTML5 March 26, 2013 58 / 100
    • Web Applications Towards desktop and web integration Geolocation Detecting the user position during web navigation Before HTML5, geolocation was already possible through the analysis of data from: IP address Wireless network connection (LAN) Mobile phone tracking through triangulation of hello messages from Base Transceiver Stations Tracking latitude and longitude (WGS84) via Global Positioning System Alfredo Torre (DIEEI) HTML5 March 26, 2013 59 / 100
    • Web Applications Towards desktop and web integration HTML5 Geolocation API The geolocation API lets you share your location with trusted web sites Latitude and longitude are available to JavaScript on the page "User Agents must not send location information to Web sites without the express permission of the user" Alfredo Torre (DIEEI) HTML5 March 26, 2013 60 / 100
    • Web Applications Towards desktop and web integration HTML5 Geolocation API How to use Geolocation API 1 First of all check the browser support 2 Include the client-side Javascript request 3 Wait for user permission 4 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! } Alfredo Torre (DIEEI) HTML5 March 26, 2013 61 / 100
    • Web Applications Towards desktop and web integration HTML5 Geolocation API The 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); Alfredo Torre (DIEEI) HTML5 March 26, 2013 62 / 100
    • Web Applications Towards desktop and web integration Geolocation interface API Explaining the interface You can check if an error has occurred with getCurrentPosition() You can set PositionOptions attributes for accuracy, timeout, and so on You can continously monitor user’s position through watchPosition() Reference: http://www.w3.org/TR/geolocation-API Alfredo Torre (DIEEI) HTML5 March 26, 2013 63 / 100
    • Web Applications Towards desktop and web integration Geolocation PositionOptions Property enableHighAccuracy timeout maximumAge Alfredo Torre (DIEEI) Type Boolean long long Default false (no default) 0 HTML5 Notes true might be slower in milliseconds in milliseconds March 26, 2013 64 / 100
    • Web Applications Towards desktop and web integration Offline Web Application It sounds like a contradiction in terms The home page of the offline web application points to a list of resources, called a manifest file The browser downloads all the resources in the manifest, then stores them on a local cache, ad TA-DA When you lose connection it’s your browser that serves the information insteaf of the network How it works? There is a flag on the DOM for discovering if you are online or not Alfredo Torre (DIEEI) HTML5 March 26, 2013 65 / 100
    • Web Applications Towards desktop and web integration Offline Web Application The 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 type text/cache-manifest Every page of the web application needs a manifest attribute that points to the cache manifest for the entire application Alfredo Torre (DIEEI) HTML5 March 26, 2013 66 / 100
    • Web Applications Towards desktop and web integration Offline Web Application Manifest file The manifest file is a file (filename.manifest) composed of three main sections: The CACHE section describing resources to be cached The NETWORK section describing resources that can only be accessed online. The FALLBACK section contains only one line specifying what is the resource to be displayed when the user in offline mode tries to access a resource that has not been cached. Further reading: http://marakana.com/bookshelf/html5_ tutorial/offline_applications.html. Alfredo Torre (DIEEI) HTML5 March 26, 2013 67 / 100
    • Web Applications Towards desktop and web integration Offline Web Application Manifest file example CACHE MANIFEST # Version 1.0 CACHE: /cached.html /style.css /script.js /image.jpg NETWORK: * FALLBACK: /fallback.html Alfredo Torre (DIEEI) HTML5 March 26, 2013 68 / 100
    • Web Applications Towards desktop and web integration Offline Web Application Have we missed anything? And the webpage itself? In the previous example we can assume that the name of the page is index.html. But we have not declared it as cacheable... There already is! When you navigate to an HTML page with a manifest attribute, the page itself is assumed to be part of the web application, so you don’t need to list it in the manifest file itself. Alfredo Torre (DIEEI) HTML5 March 26, 2013 69 / 100
    • Web Applications Towards desktop and web integration Offline Application Event Flow Alfredo Torre (DIEEI) HTML5 March 26, 2013 70 / 100
    • Web Applications Towards desktop and web integration window.applicationCache object You can check the current state of the cache at any time by reading the status 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 the end user refresh the browser or if the window.applicationCache.swapCache() function is called. 6 OBSOLETE: The cache has been marked as obsolete. Alfredo Torre (DIEEI) HTML5 March 26, 2013 71 / 100
    • Web Applications Towards desktop and web integration 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 Boilerplate Try to design and sketch this web application: 4 Get the geolocation and show in a map A form to store citizens information Store the information locally Alfredo Torre (DIEEI) HTML5 March 26, 2013 72 / 100
    • Web Applications Towards desktop and web integration Web Forms Sending data to server from a web page <form action="form_handler.php" method="get"> <input name="message" autofocus> <input type="email" name="email" placeholder= "me@email.com"> <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? Alfredo Torre (DIEEI) HTML5 March 26, 2013 73 / 100
    • Web Applications Towards desktop and web integration Web Forms Other New Features Numbers as Spinboxes Numbers as Sliders Date Pickers Search Boxes Color Pickers Automatic Form Validation! GTK+3 applications in HTML5 Alfredo Torre (DIEEI) HTML5 March 26, 2013 74 / 100
    • Web Applications Semantic description of web content Microdata Making order from chaos Micro... data? Microdata annotates the DOM with scoped name/value pairs from custom vocabularies Ordered information with vocabularies and taxonomies All properties from a specific element of DOM are taken from a certain vocabulary (scope) A namespace is needed for each vocabulary (unique identifier) Add even more semantics to HTML5 Declare your Microdata vocabulary by adding itemtype attribute Alfredo Torre (DIEEI) HTML5 March 26, 2013 75 / 100
    • Web Applications Semantic description of web content Microdata: Hot to describe of a Person An item with the item type http: // data-vocabulary. org/ Person represents a Person. Property Description name (fn) Name nickname Nickname photo An image link title Title. For example, Financial Manager role Role. For example, Accountant url Link to a web page affiliation (org) Organization. friend Another person contact Social relationship between with another person acquaintance Social relationship with another person address (adr) Address (can have subprop) Alfredo Torre (DIEEI) HTML5 March 26, 2013 76 / 100
    • Web Applications Semantic description of web content 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> Alfredo Torre (DIEEI) HTML5 March 26, 2013 77 / 100
    • Web Applications Semantic description of web content Microdata: OOP notation Person Person.address Person.address.street-address Person.address.locality Person.address.region Person.address.postal-code Person.address.country-name Alfredo Torre (DIEEI) HTML5 March 26, 2013 78 / 100
    • Web Applications Semantic description of web content Show Geolocation information with Microdata Add 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> Alfredo Torre (DIEEI) HTML5 March 26, 2013 79 / 100
    • Web Applications Semantic description of web content Microdata: Some Links HTML5 microdata specification Google: Rich snippets Live Microdata About Microdata (Google) About Microformats (Google) About RDFa (Google) Alfredo Torre (DIEEI) HTML5 March 26, 2013 80 / 100
    • Web Applications Semantic description of web content 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 and their 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> Alfredo Torre (DIEEI) HTML5 March 26, 2013 81 / 100
    • Part II Use Cases and Resources Alfredo Torre (DIEEI) HTML5 March 26, 2013 82 / 100
    • Use cases Jobs Skillset required as Fron-End developer A Real Example: Game Client Developer Design and develop enterprise-grade HTML5 game clients Assist with the conceptualization and design of games Rapidly prototype proof-of-concept game ideas and interfaces for usability evaluation prior to full implementation Provide feedback on business requirements, particularly as they relate to browser capabilities Apply an iterative agile methodology to development to ensure regular milestone deliverables and feedback to both technical and business stakeholders Create well-documented common game library components that can be reused for future game designs Ensure that best practices are applied to both design and implementation Alfredo Torre (DIEEI) HTML5 March 26, 2013 83 / 100
    • Use cases Jobs Experience required as Fron-End developer A Real Example: Game Client Developer JavaScript and HTML5 Familiar with cutting-edge HTML5 specifications with particular emphasis on 3D transforms, transitions, and animations Experienced with cross-browser debugging and specific nuances Experience with the SCRUM methodology Read the entire job ad Alfredo Torre (DIEEI) HTML5 March 26, 2013 84 / 100
    • Use cases Examples Flash vs HTML5 browser game http://flashvhtml.com/ Animation, Parallax, Responsive design, Scroll Alfredo Torre (DIEEI) HTML5 March 26, 2013 85 / 100
    • Use cases Examples Personal webpage http://www.vanderson.com.br/ Figure: Swipe navigation, Full Screen, Flexible Alfredo Torre (DIEEI) HTML5 March 26, 2013 86 / 100
    • Use cases Examples Museum with 3D items gallery http://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 HTML5 and has a WebGL interface (with Flash fallback) for 3D exploration of some of the collection items. Alfredo Torre (DIEEI) HTML5 March 26, 2013 87 / 100
    • Use cases Examples A website like an infographic http://jamesanderson613.com/ Scalable Vector Graphics Built with HTML5 with inline SVG being used for the graphic visualisation and animation of the facts and figures, thus making the site perform like a large interactive infographic. Alfredo Torre (DIEEI) HTML5 March 26, 2013 88 / 100
    • Use cases Examples Public Utility Mashup - What you could do http://fixmystreet.com/ An inspiring application FixMyStreet is an HTML5, responsive, Web 2.0 mash up of public data and user-generated content that is an information system. Alfredo Torre (DIEEI) HTML5 March 26, 2013 89 / 100
    • Use cases Examples Online Image Editor Tool http://www.picozu.com/editor Like a desktop application Picozu Editor is a drawing and photo re-touching application built with JavaScript, HTML5 and CSS3. The app uses interesting aspects of HTML5, notably canvas for applying image filters and the Drag and Drop API, which allows users to add images from their desktop. Alfredo Torre (DIEEI) HTML5 March 26, 2013 90 / 100
    • Use cases Examples iPhone Offline Application - How to not pay Apple Market http://currency.io Local Storage, Client-Side programming An offline-capable, html5 currency converter app for the iPhone. All the code runs only on your phone. Alfredo Torre (DIEEI) HTML5 March 26, 2013 91 / 100
    • Use cases Examples How to show a place and its history http://www.unionstationdenver.com/ Navigating Space and Time First of all navigate the map of this place and its neighborhood, then look at the History page to scroll through the infographics and matching content. Alfredo Torre (DIEEI) HTML5 March 26, 2013 92 / 100
    • Use cases Examples Meanwhile in Catania... http://www.albapiana.com Figure: Multi-platform, Full-screen, Design and user interaction, Navigation Alfredo Torre (DIEEI) HTML5 March 26, 2013 93 / 100
    • Use cases Frameworks TideSDK Write HTML5, CSS3, Javascript application then run it on desktop http://www.tidesdk.org Develop your desktop apps quickly using HTML5, CSS3 and JavaScript Extend the functionality of your app with Python PHP Ruby TideSDK Examples Alfredo Torre (DIEEI) HTML5 March 26, 2013 94 / 100
    • Use cases Frameworks PhoneGap Open source solution for building cross-platform mobile apps with standards-based Web technologies http://phonegap.com A PhoneGap application may only use HTML, CSS, and JavaScript Getting Started with PhoneGap Alfredo Torre (DIEEI) HTML5 March 26, 2013 95 / 100
    • Use cases Frameworks Pantheon A rapid web application development playground powered by Drupal Eng. Giuseppe Mastroeni suggests Pantheon This is a complete Drupal application playground. It is FREE and it is simple. Embrace the power of the "best" CMS in 5 minutes! https://www.getpantheon.com Alfredo Torre (DIEEI) HTML5 March 26, 2013 96 / 100
    • References Useful stuff Make a sketch of your design 1 2 maqetta.org 4 Lumzy mockup builder 5 Balsamiq mockup 6 HTML5 HTML 5 Mockup and Wireframing 3 Alfredo Torre (DIEEI) wireframe.cc mockingbird March 26, 2013 97 / 100
    • References Useful stuff Links 1 Web trends 2013 2 Parallax scrolling technique 3 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) Alfredo Torre (DIEEI) HTML5 March 26, 2013 98 / 100
    • References Go deep to the heart References 1 HTML5 - W3C Candidate Recommendation 17 December 2012 2 Mark Pilgrim, Dive Into HTML5 3 Pro HTML5 and CSS3 Design Patterns (Apress - Bowers, Synodinos, Sumner) Alfredo Torre (DIEEI) HTML5 March 26, 2013 99 / 100
    • References Go deep to the heart Contact informations 1 Linkedin: http://www.linkedin.com/in/alfredotorre/en 2 Twitter: @skydiamond 3 Blog: http://blog.skydiamond.org Alfredo Torre (DIEEI) HTML5 March 26, 2013 100 / 100