html5 taller campus party vfinal2l

HTML5 An introduction to the language and APIs

José M. Cantera FonsecaSenior Technologist

TELEFÓNICA I+D

Date: July 2010

© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal

TELEFÓNICA I+D


What is HTML5?

� HTML5 reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content in order to improve interoperability on the Web platform

� HTML5

— encompasses the set of technologies (language and APIs) (to be) implemented by web browsers in the short, medium-term (and perhaps long-term)

— will be the core technology (delivery format) on which future Web Applicationswill be based on

� The HTML5 draft:

— Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.

— Defines detailed processing models to foster interoperable implementations.

— Improves markup for documents based on prevailing authoring practices

— Introduces markup and APIs for emerging idioms, such as Web applications.

TELEFÓNICA I+D


HTML History (I)

� The early days (1990-1995) at CERN and IETF

— http://www.w3.org/People/Raggett/the-early-days-of-the-Web.html

� HTML 4.01 (24th December 1999)

— At this time, the W3C membership decided to stop evolving HTML

� 2000 – 2004 XHTML and DOM standardization at W3C

� June 2004 (just after the W3C workshop on web apps) Apple,

Mozilla, and Opera found the WHATWG (Web Hypertext Applications Working Group) http://whatwg.org

— The group aims to develop specifications based on HTML and related technologies to ease the deployment of interoperable

Web Applications [...] for implementation in mass-market Web browsers, in particular Safari, Mozilla, and Opera; [the group] intends to ensure that all its specifications address backwards

compatibility concerns [...] …

TELEFÓNICA I+D


HTML History (II)

� 2005-2006 ��The WHATWG working underground

� October 2006 Reinventing HTML blog entry (Tim Berners-Lee)

— Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work... The plan is to charter a completely new HTML group. Unlike the previous one, this one will be chartered to do incremental improvements to HTML, asalso in parallel xHTML.

� 2007

— 5th W3C HTML Working Group chartered http://www.w3.org/2007/03/HTML-WG-charter.html

– Chairs: Chris Wilson (Microsoft), Sam Ruby (IBM). Team Contact: Dan Connolly

— Apple, Mozilla, and Opera allowed the W3C to publish the specification under the W3C copyright, while keeping a version with the less restrictive license on the WHATWG site.

— Since then, both groups have been working together.

TELEFÓNICA I+D


HTML History (III)

� July 2009 the end of the work on XHTML2 and XHTML Modularization is announced

— http://www.w3.org/2009/06/xhtml-faq.html

� October 2009 WHATWG announces Last Call for Comments for HTML5 http://blog.whatwg.org/html5-at-last-call

� June 2010 latest HTML5 WD published at W3C http://www.w3.org/TR/2010/WD-html5-20100624/

� More info at

— http://esw.w3.org/topic/HTML/history

— http://www.atendesigngroup.com/blog/brief-history-of-html

TELEFÓNICA I+D


HTML5 Main Design Principles

� Differentiating between

— Conforming Language : Pages syntactically correct

— Supported Lang. : Pages not syntactically correct but which actually work

� Compatibility— Support existing content

– to process existing HTML documents as HTML 5 and get results that are compatible with the existing expectations of users and authors, based on the behavior of existing browsers.

– Ex. <b>a<i>b</b>c</i>

— Degrade gracefully

– Web content should degrade gracefully in older or less capable user agents, even when making use of new elements, attributes, APIs and content models.

– Ex. the <video> element allows to define fallback content if video is not supported

— Do not reinvent the wheel

– Ex. contenteditable=“”

— Pave the cowpaths

– Ex. <br/>

— Evolution not revolution

– Switching to XML syntax requires a global change, so continue supporting classic HTML syntax as well.

TELEFÓNICA I+D


HTML5 Main Design Principles (II)

� Interoperability

— Well-Defined behavior

– Prefer to clearly define behavior that content authors could rely on, in

preference to vague or implementation-defined behavior.

– This way, it is easier to author content that works in a variety of

user agents. However, implementations should still be free to make

improvements in areas such as user interface and quality of

rendering.

— Avoid needless complexity

— Handle errors

– Error handling should be defined so that interoperable

implementations can be achieved.

– Prefer graceful error recovery to hard failure, so that users are not

exposed to authoring errors.

TELEFÓNICA I+D


Getting Started

<!DOCTYPE html><html><html><html><html><head><head><head><head><meta<meta<meta<meta charset="UTF-8"> > > > <title><title><title><title>An HTML Document</title></title></title></title><link <link <link <link relrelrelrel====stylesheet hrefhrefhrefhref====mysheet.css> > > > </head></head></head></head><body<body<body<body class=example>>>><h1><h1><h1><h1>Example</h1></h1></h1></h1><p><p><p><p>This is an example HTML document. </body></body></body></body></html></html></html></html><?xml<?xml<?xml<?xml version="1.0" encoding="UTF-8"?> ?> ?> ?> <html<html<html<html xmlns="http://www.w3.org/1999/xhtml">>>><head><head><head><head><title><title><title><title>An HTML Document</title></title></title></title><link <link <link <link rel=“stylesheet“ href=“mysheet.css“ />/>/>/></head></head></head></head><body<body<body<body class="example">>>><h1><h1><h1><h1>Example</h1></h1></h1></h1><p><p><p><p>This is an example HTML document.</p></p></p></p></body></body></body></body></html></html></html></html>

XML Serialization(application/xhtml+xml) or (application/xml)

HTML Serialization(text/html)

TELEFÓNICA I+D


HTML5 .- XHTML vs HTML

� XHTML taught us

— lowercase tags!

— close void elements! (img, meta, input, ...)

— no empty attributes! (disabled=”disabled”)

— always put attribute values in double quotes!

� HTML5 says: you choose

TELEFÓNICA I+D


HTML5 .- XHTML vs HTML

� HTML syntax remarks

— HTML syntax is case-insensitive

— Void elements (forbidden from containing any content at all)

– <link type="text/css" rel="stylesheet" href="style.css">

— Empty elements (any element that does not contain any content within it)

– <span></span>

— boolean attributes, <true> value specified using an empty attribute (with no value), the empty string or a value which it is equal to the name of the attribute. ‘false’ or ‘true’ are invalid values!– <input disabled>

— Unquoted attribute values <div class=example> (provided there are no spaces or quotes)

� Any document, including a document authored with the intention of being XHTML, served as text/html is technically an HTML document.

— See current problems with XHTML served as text/html at http://www.hixie.ch/advocacy/xhtml

� Documents with an XML media type are always handled in standards (no quirks) mode

� A polyglot HTML document is a document that conforms to both the HTML and XHTML syntactic requirements, and which can be processed as either by browsers, depending on the MIME type used.

� More info at http://wiki.whatwg.org/wiki/HTML_vs._XHTML

TELEFÓNICA I+D


HTML5 Syntax Remarks

� Tag soup? No!

— small degree of freedom, but very detailed rules for parsing

— validation will matter

– http://html5.validator.nu/

— keep a clean coding style, you’ll thank yourself for it later

� HTML5 is designed so that old HTML 4 browsers can

safely ignore new HTML5 constructs

� “Documents must not use deprecated features. User

agents should support deprecated features.”

— Extensive error handling by UAs

TELEFÓNICA I+D


Global Attributes

� @accesskey � Accessibility / Mobile

� @class

� @contenteditable � Rich in place editing of content

� @contextmenu� For assigning a contextual menu to an element

� @dir � for the reading direction of languages

� @draggable � for drag&drop interaction

� @hidden � In HTML5 any element can be hidden

� @id

� @itemid, @itemprop, @itemref, @itemscope, @itemtype

— Microdata (Semantics)

� @lang

� @spellcheck � Activates spellchecking on a textual input

� @style

� @tabindex

� @title

� @role, @aria-xxx � To instruct Assistive Technology, see later

� @data-xx for extensibility, see later

TELEFÓNICA I+D


New Structural Elements

� They can be employed in many situations where <div> is used today and should help you make more readable, maintainable, HTML source.

� <section>

— a generic document or application section

— Ex. a book chapter

� <nav>

— A section devoted to major navigation blocks

� <article>

— A self-contained composition that is intended to be independently distributable or reusable (e.g. in syndication)

— Ex. forum post, newspaper article, a Web log entry, a gadget …

� <aside>

— A section that consists of content that is tangentially related to the main content

— Ex. sidebars, ads,

TELEFÓNICA I+D


Sectioning Example

<!DOCTYPE html><html><html><html><html><head><head><head><head><meta<meta<meta<meta charset="UTF-8"> > > > <title><title><title><title>An HTML Document</title></title></title></title></head></head></head></head><body<body<body<body class=example>>>><h1><h1><h1><h1>This is the main header</h1></h1></h1></h1><section><section><section><section><h1><h1><h1><h1>This is a subheader</h1></h1></h1></h1><<<<sectionsectionsectionsection>>>><h1><h1><h1><h1>This is a subsubheader</h1></h1></h1></h1></</</</sectionsectionsectionsection>>>></</</</sectionsectionsectionsection>>>><<<<sectionsectionsectionsection>>>><h1><h1><h1><h1>This is a second subheader</h1></h1></h1></h1></</</</sectionsectionsectionsection> > > > </body></body></body></body></html></html></html></html>

This is the main header

+--This is a subheader

+--This is a subsubheader

+--This is a second subheader

Document Outline

If you just go through your document and blindly replace all the<div>s with <section>s you are doing it wrong.

Each time you nest a <section>, you increase the outline depth by 1• http://gsnedders.html5.org/outliner/

TELEFÓNICA I+D


New Structural Elements

� <hgroup>

— represents the heading of a section

� <header>

— a group of introductory or navigational aids

� <footer>

— A footer for its nearest ancestor sectioning content

— Ex. copyright data, links to related documents, …

� <time>

— Represents either a time on a 24 hour clock or a precise date in the proleptic Gregorian calendar

� <mark>

— A run of text marked or highlighred for reference purposes

TELEFÓNICA I+D


Example “Diario El Mundo” as HTML5<!DOCTYPE html><html<html<html<html lang=es>>>><head><head><head><head><title><title><title><title>elmundo.es</title></title></title></title><meta<meta<meta<meta charset="UTF-8">>>><link<link<link<link rel=stylesheet href=“elmundo.css">>>></head></head></head></head><body><body><body><body><div<div<div<div id=top class=topContainer>>>><header><header><header><header><div<div<div<div class=bar>>>><<<<imgimgimgimg src="logoElMundo.png“alt=“Logotipo de El Mundo">>>><<<<navnavnavnav>>>><<<<ulululul>>>><<<<lililili><a><a><a><a href="multimedia.html">>>>Multimedia</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href="blogs.html">>>>Blogs</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href="especiales.html">>>>Especiales</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href="hemeroteca.html">>>>Hemeroteca</a></</a></</a></</a></lililili>>>></</</</ulululul>>>></</</</navnavnavnav>>>></div></div></div></div></header></header></header></header><section<section<section<section id=main class=periodico>>>><header><header><header><header><<<<hgrouphgrouphgrouphgroup>>>><h1><h1><h1><h1>El Mundo.es</h1></h1></h1></h1><h2><h2><h2><h2>Líder Mundial en Español</h2></h2></h2></h2><h3><timeh3><timeh3><timeh3><time datetime="2009-12-10T16:37:00+01:00" pubdate>>>>Jueves 10/12/2009. Actualizado 16:37 <<<<abbrabbrabbrabbr title=“horas”>h.</</</</abbrabbrabbrabbr></time></h3>></time></h3>></time></h3>></time></h3></</</</hgrouphgrouphgrouphgroup>>>><<<<navnavnavnav>>>><<<<ulululul>>>><<<<lililili><a><a><a><a href="españa.html“ title=“España“ accesskey=1>>>>España</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href="mundo.html“ title=“Resto del Mundo“ accesskey=2>>>>Mundo</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href="europa.html“ title=“Europa“ accesskey=3>>>>Europa</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href="opinion.html“ title=“Opinión“ accesskey=4>>>>Opinión</a></</a></</a></</a></lililili>>>></</</</ulululul>>>> </</</</navnavnavnav>>>> </header></header></header></header>

TELEFÓNICA I+D


Example “Diario El Mundo” as HTML5<section<section<section<section id=portada class=pagina>>>><h1><h1><h1><h1>Portada de El Mundo</h1></h1></h1></h1><article><article><article><article><header><header><header><header><<<<hgrouphgrouphgrouphgroup>>>><h2><h2><h2><h2>Continua la huelga de la activista saharaui</h2></h2></h2></h2><h1<h1<h1<h1 class=firstNews><a><a><a><a href="n1.html">>>> El Rey quiso mediar en el caso 'Haidar' pero el Gobierno no le dejó </a></h1></a></h1></a></h1></a></h1></</</</hgrouphgrouphgrouphgroup>>>></header></header></header></header><p><p><p><p> Cayo Lara ha leído una carta en la que don Juan Carlos se muestra dispuesto a realizar "las gestiones necesarias" en el 'caso Haidar'. </p></p></p></p><footer><footer><footer><footer><<<<navnavnavnav><a><a><a><a href="x.html">>>>Los Artistas piden la mediación del Rey</a></</a></</a></</a></navnavnavnav>>>></footer></footer></footer></footer></article></article></article></article><article><article><article><article><<<<hgrouphgrouphgrouphgroup>>>><h2><span<h2><span<h2><span<h2><span class=category>>>>CASO MARTA</span></span></span></span> Ha estado en la cárcel de Huelva desde su detención</h2></h2></h2></h2><h1><a<h1><a<h1><a<h1><a href="n1.html">>>> La Audiencia ordena poner en libertad a Samuel, que saldrá esta tarde</a></h1></a></h1></a></h1></a></h1></</</</hgrouphgrouphgrouphgroup>>>><div><<div><<div><<div><imgimgimgimg alt="Foto de Samuel" src=imagen.png class=float>>>><p><p><p><p> Con esta excarcelación, el asesino confeso de la joven sevillana Marta del Castillo, Miguel Carcaño, será el únicode los cinco imputados del caso en prisión. </p></div></p></div></p></div></p></div></article></article></article></article></section></section></section></section> <footer><footer><footer><footer> <!– del periódico --><<<<navnavnavnav><><><><ulululul>>>><<<<lililili><a><a><a><a href=aviso.html>>>>Aviso Legal</a></</a></</a></</a></lililili>>>><<<<lililili><a><a><a><a href=priv.html>>>>Política de Privacidad</a></</a></</a></</a></lililili>>>></</</</ulululul></></></></navnavnavnav>>>></footer></footer></footer></footer></section></section></section></section> <aside><aside><aside><aside><section<section<section<section class=servicios></section>></section>></section>></section><section<section<section<section class=tiempo></section>></section>></section>></section></aside></aside></aside></aside></div></div></div></div>  </body></body></body></body> </html></html></html></html>

TELEFÓNICA I+D


HTML5 Forms and Application Elements

� <input> It has been extended to support automatic validations for different

datatypes

— type=number, range

— type=date, time, datetime, month, week (using ISO8601 machine-

readable format)

— type=email, url, tel

— type=color

� <input> can also constrain user’s input

— @max, @min, @step

— @required, @maxlength

— @pattern (Javascript pattern)

� @autofocus attribute to say bye, bye to scripting, i.e. element.focus()

� @autocomplete (on,off) to enable / disable web browser autocompletion

� @readonly, @disabled

TELEFÓNICA I+D



� @placeholder a placeholder string to help users

� @multiple to allow multiple inputs

� @list to associate a list of possible values to an input

� @formnovalidate on <input type=submit> to indicate not to perform validations

� @tabindex (now can be bound to any element)

� @novalidate on <form>

� @formaction on <input type=submit>

� Events

— forminput

— formchange

— invalid

TELEFÓNICA I+D


CSS Pseudo-Classes to support form styling

� Simplify styling of controls by defining a set of pseudo-classes corresponding to the state of elements

— :enabled

— :disabled

— :valid

— :invalid

— :in-range

— :out-of-range

— :required

� Example

input:invalid {

border-color: red;

border-style: solid;

}

TELEFÓNICA I+D



� DOM APIs

— input.value

— input.valueAsNumber

— input.valueAsDate

— input.stepUp()

— input.stepDown()

— input.checkValidity(), form.checkValidity()

— input.validity

– returns a ValidityState object which indicates whether the element is valid and

in case it is not the reason why

— input.validity.valid

— input.setCustomValidity

TELEFÓNICA I+D



� <output> element

— To display a computation output, ex.

– <output id=myout for=“a b” onFormChange=“this.value = a.value + b.value”>

� Assigning labels to form elements

— <label>Name:<input type=text name=i size=10 title=“Enter your name”></label>

— @for attribute on label

� <datalist> element

— It is a set of <option> elements that represent predefined options for other controls.

— Using the @list attribute it can be hooked up to an input

� For more details see my demo using Opera or Google WebForms 2 http://code.google.com/p/webforms2/

TELEFÓNICA I+D


The <video> and <audio> elements

� They can be used to embed multimedia content on a web page

— without Flash or any other proprietary plugin

� Goal: accessible, open, and royalty-free video playing natively

in the browser

� A DOM API allows authors to create their own user interface,

although there is a default one

� Basic syntax

— <video src=myvideo.ogg></video> <audio

src=myaudio.ogg></audio>

� Safer syntax (encoders can be specified in the MIME type

http://wiki.whatwg.org/wiki/Video_type_parameters )<video<video<video<video id=myVideo autobuffer controls>>>><source<source<source<source src="billyBrowsers.ogg" type='video/ogg'>>>><source<source<source<source src="billyBrowsers.m4v" type='video/mp4'>>>><p><p><p><p>Video not supported</p></p></p></p></video></video></video></video>

TELEFÓNICA I+D


The <video> and <audio> elements (II)

� Attributes

— @autoplay the content should be played automatically as soon as possible

— @autobuffer the content should be downloaded as soon as the page loads

— @controls triggers the default video controls provided by the browser

— @loop the content should be played again when the end is reached

� DOM APIs

— canPlayType()

— play(), pause()

— volume for getting / setting the volume

— muted

— currentTime, startTime, duration

— playbackRate

— currentSrc, videoWidth, videoHeight

— timedTracks

� DOM Events

— timeupdate

— pause

— playing

— ended

— loadedmetadata

— ………

TELEFÓNICA I+D


<video> and <audio> codecs

� No agreement in a common format to be supported by all web browsers

� Theora video and Vorbis audio in an Ogg container (royalty free)

– Firefox 3.5 and later

– Google Chrome 3.0 and later

– Opera 9.62 (experimental release)

— H.264 video and AAC audio in an MP4 container (patent encumbered)

– Google Chrome 3.0 and later

– Safari 3.0 and later

– iPhone (H.264 baseline profile, AAC low complexity)

– Android (H.264 baseline profile, AAC low complexity)

� That was the situation at the end of 2009

TELEFÓNICA I+D


<video> and <audio> codecs (II)� 2010 : WebM to the rescue

— Offers high-quality video with fast seeking

– YouTube is adopting it

— VP8 video codec (open sourced by Google)

– successor of VP3, (used by Theora)

– available also for streaming

— Vorbis audio codec (used by Spotify)

— All wrapped in a subset of the Matroska container format (.webm)

� WebM Support

– Already available on the dev version of Google Chrome

– Opera 10.60

– Firefox nightly build

– IE9 has also announced support<video<video<video<video id=myVideo autobuffer controls>>>><source<source<source<source src="billyBrowsers.webm" type=“video/webm;codecs=‘vorbis, vp8’ ”>>>><source<source<source<source src="billyBrowsers.mp4" type=“video/mp4;codecs=‘avc1.42E01E, mp4a.40.2’ ”>>>><source<source<source<source src="billyBrowsers.ogg" type=“video/ogg;codecs=‘vorbis,theora’ ”>>>><p><p><p><p>Video not supported</p></p></p></p></video></video></video></video>

TELEFÓNICA I+D


The <track> element

� It is intended to improve the accessibility of media content

� A children of <audio> or <video> that links to time-based data

— closed captions for deaf people

— subtitles for i18n

— TADs: Textual audio descriptions, for the blind

— KTV: text that appears step by step intended to be used in Karaoke systems

— cue points: DVD style chapter markers and similar navigational landmarks

— Other: ex. Lyrics, …

� Proposed syntax

� supported kinds (possible values of the kind attribute)

— <subtitles, captions, descriptions, chapters, metadata>

� The src attribute must point to a WebSRT file

� The srclang attribute indicates a language tag

� Issue: Format to be supported (SSA, SubRip, USF…)

<video<video<video<video id=myVideo autobuffer controls>>>><source<source<source<source src="billyBrowsers.ogg" type='video/ogg'>>>><source<source<source<source src="billyBrowsers.m4v" type='video/mp4'>>>><track <track <track <track src="blah.srt" kind=‘captions’ srclang=“es”>>>><track <track <track <track src="blah_en.srt" kind=‘captions’ srclang=“en”>>>></video></video></video></video>

TELEFÓNICA I+D


WebSRT

� Web SubRip Text file format

— Competes with other formats for timed text, including W3C’s one

— Based on the subrip file format

— MIME type : text/srt (to be registered by IANA)

� It is the format chosen (for the moment) by HTML5 for timed-based data

� Example

� More info at

— http://www.delphiki.com/websrt/

— http://www.whatwg.org/specs/web-apps/current-work/#websrt

00:00:20,000 --> 00:00:24,400Altocumulus clouds occur between six thousand00:00:24,600 --> 00:00:27,800 and twenty thousand feet above ground level.

TELEFÓNICA I+D


The <canvas> element

� a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly

� Syntax

— <canvas id=myCanvas

width="300" height="225"></canvas>

� 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.

� Several <canvas> elements can appear on the same page.

— Each canvas will show up in the DOM, and each canvas maintains its own state.

— The drawing context is where all the drawing methods and properties are defined.

� A 3D context (compliant with OpenGL ES 2.0 API) is also planned to be standardized

— https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html

— Nightly builds of Firefox, Chromium, and Safari have support for the draft specification

� API Examplefunctionfunctionfunctionfunction draw_myCanvas() {varvarvarvar ecanvas = document.getElementById(“myCanvas"); varvarvarvar ctx = ecanvas.getContext("2d"); ctx.fillStyle = “rgb(200,0,0)";ctx.fillRect(10, 10, 55, 50);ctx.fillStyle = “rgba(0,0,200,0.5)";ctx.fillRect(30, 30, 55, 50);}

TELEFÓNICA I+D


The <canvas> API

� Controlling filling and stroke

— fillStyle, strokeStyle can be a CSS color, a pattern, or a gradient

� Drawing Rectangles

— fillRect(x, y, width, height)

— strokeRect(x, y, width, height)

— clearRect(x, y, width, height)

� Drawing Lines or Polygons

— moveTo(x, y) moves the pencil to the starting point.

— lineTo(x, y) draws a line to an ending point.

— fill()

— stroke()

� Drawing Text

— fillText(‘text’,x,y)

— font can be anything you would put in a CSS font rule

� Drawing images

— drawImage(image, dx, dy)

� Gradients, patterns, transformations (rotations, scales …)

TELEFÓNICA I+D


Geolocation API (I)

� Allows to obtain the user’s current position (WGS-84 coordinates)

— latitude, longitude, altitude, speed, heading

— It can take advantage of a GPS device but it is independent of the location provider

– IP address, mobile network, SkyHook (WiFi), …

� W3C Standard (Google Gears was the embryo)

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

� How it works : Asynchronously

— Through the navigator.geolocation object

— getCurrentPosition(successCB,errorCB,options)

– ‘errorCB’ and ‘options’ are optional but it is advisable to specify, at least the errorcallback

� ‘options’ object composed by the following properties

— maximumAge : denotes a position caching time

— timeout : indicates a maximum time to wait for the calculation of a position

TELEFÓNICA I+D


Geolocation API (II)

� maximumAge � indicates that the application is willing to accept a cached position whose age is no greater than the specified time in milliseconds

— otherwise a new position must be calculated

— Values:

– 0 or ‘falsy’ indicates that a new position must be immediately obtained

– ‘Infinity’ indicates that a previously cached position must be returned

� timeout� number of seconds to wait for position calculation

— If time is over the error callback is invoked (timeout error code)

— Values

– If omitted, Infinity

– If 0, no call to the location provider will be issued and a timeout exception will be raised if there is no an already available position (according to the caching policies)

TELEFÓNICA I+D


Geolocation API (III)

� Monitoring the user location

— watchLocation(successCB,errorCB,options)

��watchId

– Acquires a new position object and starts watching the user location in accordance with the options

– Every time a new position is available the successCB is invoked

– Ex. if maximumAge == 10 minutes then every 10 minutes

a new position will be made available to the application

– A watchId is returned that can be used later to stop watching

— clearWatch(watchId)

– Stops the monitoring process

TELEFÓNICA I+D


Geolocation API (IV)

� Privacy

— User agents must ask users

– Opt-in / Opt-out

— Applications must be prepared for ‘opt-out’

– through exception handling and fallback mechanisms

— Timeout does not include the time the user spent in deciding if opting in or out

– Google’s Chrome bug

� Example: Google Chrome

TELEFÓNICA I+D


Web Storage (I)� Data storage on the browser side without relying on cookies

— http://dev.w3.org/html5/webstorage/

— http://developer.apple.com/safari/library/documentation/iphone/conceptual/safarijsdatabaseguide/Name-ValueStorage/Name-ValueStorage.html

� Two flavors

— window.sessionStorage � provides storage for the current top-level browsing context (window)

– If the browser context is destroyed, the data is no longer available

– data will be accessible to any page from the same origin opened in that window.

– A session storage is cloned if a new browsing context is created (window.open)

— window.localStorage � provides storage for an origin, regardless of browsing contexts

– designed for storage that spans multiple windows, and lasts beyond the current session.

� Methods

— setItem(key,object)

— getItem(key) �� object

— removeItem(key)

— clear() �� Removes all the items

— sessionStorage.<item> / localStorage.<item>

TELEFÓNICA I+D


Web Storage (II)

� <storage> event

— fired when a storage area changes

— event data

– key, oldValue, newValue

— works in Opera and Firefox

� Issues

— Security

– Cross-Directory attacks on hosting domains

– host.com/account1, host.com/account2

– Possible solution: Encrypt your sensitive data

– DNS Spoofing

— Privacy

– User-Agent configured policies for removing data after a period of time

– Allow to store data only to trusted sites

TELEFÓNICA I+D


Web SQL Database

� Allows to store data on SQL local databases

— http://dev.w3.org/html5/webdatabase/

— http://developer.apple.com/safari/library/documentation/iphone/conceptual/safarijsdatabaseguide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html

� Asynchronous API � Callback functions need to be used

— A synchronous flavor can be used with Web Workers

� Different browser implementations based on SQLite

— In fact, SQLite determines the SQL subset supported

� How it works

— Each origin has an associated private set of databases

– Each database has a name and a current version

— The window object gives access to the database API

– if(window.openDatabase) then Web SQL DB API is supported

TELEFÓNICA I+D


Web SQL Database (II)� Creating a database

— openDatabase(name,version,label,estimatedSize,openCB)

– openCB is an optional callback to be invoked if the database has not yet been created.

— changeVersion() allows scripts to atomically verify the version number and change it at the same time as doing a schema update.

� Executing statements

— db.readTransaction(txCB,txErrorCB) � For select

— db.transaction(txCB,txErrorCB) � For insert / update / delete

— The tx callback is the function which will actually do the work. It receives an SQLTransaction object as parameter

� SQLTransaction

— sqtx.executeSql(SQL,params*,successCB,errorCB)

– The successCB will receive a SQLResultSet as parameter

– The SQL can be parameterized using the param = ? syntax

� SQLResultSet

— Encapsulates the result of executing a transaction

— affectedRows � For insert / update / delete

— SQLResultSetRowList � For select

TELEFÓNICA I+D


Web SQL Database (III)

� SQLResultSetRowList

— To get access to the rows selected

— Methods

– length

– item(index) �� 0 .. length – 1

– null is returned if there is no such item

— Each item has a property whose name is equal to the corresponding column

� Synchronous execution

— Intended to be used with Web Workers (threads)

– openDatabaseSync �� DatabaseSync

– dbsync.transaction(SQLTransactionSync)

– txsync.executeSql(SQL,params*) �� SQLResultSet

TELEFÓNICA I+D


WEB SQL (IV)

� Security considerations

— User agents should establish db quotas to avoid malicious attacks

— Be careful with SQL injection, use bound parameters (=?)

— Information leaking

– Get non-permitted access to information

— Information spoofing

– change a DB without permission to take advantage. This could be potentially done by users themselves!

— Cross-Directory, DNS Spoofing attacks

� Privacy considerations

— Sensitive information can be exposed, ex. Navigation history, e-mail, calendar

— Users should be aware of what data is stored

– Enabling users to drop data from the DBs

— Allow to use DBs only to trusted sites

TELEFÓNICA I+D


Web Workers (Threads)� Defines an API that allows to spawn background workers running scripts in

parallel to their main page

— http://www.whatwg.org/specs/web-workers/current-work

— Message-passing as the coordination mechanism between workers and browsing contexts

— To perform a computationally expensive task without interrupting the user interface

— Workers have their own execution context different than the browsing context

– Ex. window.alert cannot be used within a worker

� How to use it (dedicated workers)

— Worker w = new Worker(‘code_to_be_executed.js’)

– Code must come from the same origin

— w.onmessage = handler to respond to worker’s messages

— Bi-directional messaging : using the postMessage(<data>) method

– From worker to its creator

– From the creator to the worker

— onmessage = worker_message_handler to respond to creator messages

— A message handler obtains the data passed through an <event.data> attribute

� See my progress bar example

TELEFÓNICA I+D


Web Workers (II)

� Two kind of workers

— Shared Workers

– new SharedWorker(‘code_to_be_executed.js’)

– They can be shared by different browsing contexts, thus the same worker can have multiple connections

– It allows to synchronize various pages through the same worker

– SharedWorker.port represents the MessagePort for communicating with the shared worker

– Message event handlers are registered over the port message queue corresponding to the browsing context <worker.port>

– There is one port message queue per connection to the worker

— Dedicated Workers

– new Worker(‘code_to_be_executed.js’)

– Private to a browsing context

– An implicit and unique port to send / receive messages

� Workers can create other workers

TELEFÓNICA I+D


Web Workers (III)

� Worker Execution Environment

— location � to get access to the worker location

— close() � closing flag. no further tasks will be processed

— onerror � to register an event handler to be executed if the worker is inerror

— Shared Workers

– onconnect� to register an event handler to be executed when a browsing context connects to the worker

– applicationCache� to get access to the application cache

— Dedicated Workers

– onmessage� to respond to messages coming from its browsing context

– postMessage� to send messages to the browsing context (implicit port)

— importScripts � to import other scripts

— XMLHttpRequest � AJAX requests

— navigator.onLine � to check if the browser is online

— setTimeout � timers

— Everything defined in the WorkerUtils interface

– For instance Web SQL Database APIs

TELEFÓNICA I+D


Offline Web Applications (I)

� To enable users to continue interacting with Web applications and documents even when their network connection is unavailable— http://developer.apple.com/safari/library/documentation/iphone/conceptual/safarijsdatabas

eguide/OfflineApplicationCache/OfflineApplicationCache.html

� a manifest file (served as text/cache-manifest)

— lists the files that are needed to work offline

— The browser copies such files locally

– in the so-called ‘Application Cache’

— <html manifest=“mymanifest.mf”>

� Example # This line is mandatoryCACHE MANIFESTimages/sound-icon.pngimages/background.pngNETWORK:/resource/*FALLBACK:/ /offline.html

TELEFÓNICA I+D


Offline Web Applications (II)

� An application cache per cache host

— document or shared worker

� The application cache automatically updates only if the manifest file changes.

— It does not automatically update if resources listed in the manifest file change.

� Application Cache API

— window.applicationCache

— applicationCache.update + applicationCache.swapCache � to force an update

— applicationCache.status � to check the status

— Events

– noupdate

– updateready

– cached

� Browser state

— window.navigator.onLine

– Returns false if the user agent is definitely disconnected from the network

– it is unreliable

— Events

– online / offline over the window object

TELEFÓNICA I+D


Other important APIs

� Cross-Document messaging

� Web Sockets

� Server-side events

� Web notifications

� File

� Device APIs

TELEFÓNICA I+D


Device APIs

� To get access to device capabilities

— Camera, Agenda, Calendar, SysInfo, Messaging …

— All started with Bondi but now WAC is taking over

– http://en.wikipedia.org/wiki/BONDI_(OMTP)

– http://en.wikipedia.org/wiki/Wholesale_Application_Community

� WAC (Wholesale Applications Community)

— is a joint effort by more than 40 mobile operators to create a unified and open platform to allow mobile software developers to more easily

write applications usable on many disparate devices

— “Joint –Venture” : Bondi + JIL + GSMA One API

� W3C DAP WG � Device APIs and Policies WG

— http://www.w3.org/2009/dap/

TELEFÓNICA I+D


Device APIs (II)

� Ongoing specs

— HTML Media Capture

– http://www.w3.org/TR/2010/WD-html-media-capture-20100720/

– <input type=file accept=“image/*;capture=camera”>

— Media Capture API

– http://dev.w3.org/2009/dap/camera/Overview-API.html

— Contacts API

– http://www.w3.org/TR/2010/WD-contacts-api-20100701/

— Messaging API

– http://dev.w3.org/2009/dap/messaging/

— SysInfo API

– http://dev.w3.org/2009/dap/system-info/

— ….

� Last but not least

— Policy framework for security

TELEFÓNICA I+D


HTML5 Roadmap

� HTML5 WHATWG is in Last Call for Comments

— W3C will wait more as there are outstanding issues

� I cannot say now when the whole HTML5 spec (900 pages) will be totally implemented by the major vendors (it could be in 5 years time)

— Web browsers will continue implementing the most stable features of HTML5 (IE9???)

— Some of the features of HTML5 are already available

– Or you can always implement them using Javascript and later migrate to

– Google Chrome Frame: http://code.google.com/intl/es-ES/chrome/chromeframe/

� It is important to follow an evolutionary approach and start using features which are considered stable

� Follow the specs evolution on W3C and WHATWG

— http://dev.w3.org/html5

— http://whatwg.org/specs

— [email protected]



html5 taller campus party vfinal2l

Technology

web content

html5 http

web platform html5

new html group

existing html documents

w3c http

classic html syntax

html history iiijuly