Html5 Taller Campus Party Vfinal2l

  • 3,097 views
Uploaded on

HTML5 Presentation given @ CampusParty 2010

HTML5 Presentation given @ CampusParty 2010

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
3,097
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
24
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5 An introduction to the language and APIs José M. Cantera Fonseca Senior Technologist TELEFÓNICA I+D Date: July 2010 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 2. 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 Applications will 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 3. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 4. 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, as also 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 5. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 6. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 7. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 8. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >lmth/< >ydob/< >p/<.tnemucod LMTH elpmaxe na si sihT>p< >1h/<elpmaxE>1h< >"elpmaxe"=ssalc ydob< >daeh/< >/ ssc.teehsym =ferh teehselyts =ler knil< “ “ “ “ >eltit/< tnemucoD LMTH nA>eltit< >daeh< >"lmthx/9991/gro.3w.www//:ptth"=snlmx lmth< >?"8-FTU"=gnidocne "0.1"=noisrev lmx?< (application/xhtml+xml) or (application/xml) XML Serialization >lmth/< >ydob/< .tnemucod LMTH elpmaxe na si sihT>p< >1h/<elpmaxE>1h< >elpmaxe=ssalc ydob< >daeh/< >ssc.teehsym=ferh teehselyts=ler knil< >eltit/<tnemucoD LMTH nA>eltit< > "8-FTU"=tesrahc atem< >daeh< >lmth< >lmth EPYTCOD!< (text/html) HTML Serialization Getting Started
  • 9. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 10. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 11. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 12. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 13. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 14. Sectioning Example 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/ >lmth EPYTCOD!< >lmth< >daeh< > "8-FTU"=tesrahc atem< Document Outline >eltit/<tnemucoD LMTH nA>eltit< >daeh/< This is the main header >elpmaxe=ssalc ydob< +--This is a subheader >1h/<redaeh niam eht si sihT>1h< >noitces< +--This is a subsubheader >1h/<redaehbus a si sihT>1h< >noitces< +--This is a second subheader >1h/<redaehbusbus a si sihT>1h< >noitces/< >noitces/< >noitces< >1h/<redaehbus dnoces a si sihT>1h< >noitces/< >ydob/< >lmth/< TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 15. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 16. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D >redaeh/< >van/< >llllu/< >redaeh/< >van/< > u/< >redaeh/< >van/< > u/< >redaeh/< >van/< > u/< > /<>a/< ó > > >iiiillll/<>a/< n inipO>4=yekssecca n inipO =eltit lmth.noinipo"=ferh a<>iiiillll< > /<>a/< > /<>a/< > ó “ “ “ a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<aporuE>3=yekssecca aporuE =eltit lmth.aporue"=ferh a<>iiiillll< > “ “ “ a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<odnuM>2=yekssecca odnuM led otseR =eltit lmth.odnum"=ferh a<>iiiillll< > “ “ “ a<> < a<> < a<> < > /<>a/< > /<>a/< ñ > > >iiiillll/<>a/<a apsE>1=yekssecca a apsE =eltit lmth.a apse"=ferh a<>iiiillll< > /<>a/< > ñ “ “ “ ñ a<> < a<> < a<> < > u< >llllu< > u< > u< >van< >van< >van< >van< >puorgh/< >puorgh/< >puorgh/< >puorgh/< >3h/<>em t/<>rbba/< >3h/<>em t/<>rbba/< ” “ rbba< >3h/<>emiiiit/<>rbba/<.h> saroh =eltit rbba< 73:61 odazilautcA >3h/<>em t/<>rbba/< rbba< rbba< > > .9002/21/01 seveuJ>etadbup "00:10+00:73:61T01-21-9002"=emitetad emiiiit<>3h< > em t<>3h em t<>3h em t<>3h ñ >2h/< >2h/< >2h/<lo apsE ne laidnuM red L>2h< >2h/< í >2h< >2h< >2h< >1h/< >1h/< >1h/<se.odnuM lE>1h< >1h/< >1h< >1h< >1h< >puorgh< >puorgh< >puorgh< >puorgh< >redaeh< >redaeh< >redaeh< >redaeh< > > >ocidoirep=ssalc niam=di noiiiitces< > no tces< no tces< no tces< >redaeh/< >redaeh/< >redaeh/< >redaeh/< >v d/< >v d/< >viiiid/< >v d/< >van/< >van/< >van/< >van/< > u/< >llllu/< > u/< > u/< > /<>a/< > /<>a/< > /<>a/< >> >iiiillll/<>a/<acetoremeH>"lmth.acetoremeh"=ferh a<>iiiillll< > a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<selaicepsE>"lmth.selaicepse"=ferh a<>iiiillll< > a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > > a<> < >iiiillll/<>a/<sgolB>"lmth.sgolb"=ferh a<>iiiillll< a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > >iiiillll/<>a/<aidemitluM>"lmth.aidemitlum"=ferh a<>iiiillll< > a<> < a<> < a<> < > u< >llllu< > u< > u< >van< >van< >van< >van< > > >"odnuM lE ed opitogoL =tla gnp.odnuMlEogol"=crs gmiiii< > “ “ gm < gm < gm < > >rab=ssalc viiiid< > > v d< v d< v d< >redaeh< >redaeh< >redaeh< >redaeh< > > >reniatnoCpot=ssalc pot=di viiiid< > v d< v d< v d< >ydob< >ydob< >ydob< >ydob< >daeh/< >daeh/< >daeh/< >daeh/< > > >"ssc.odnumle =ferh teehselyts=ler kniiiillll< > “ kn < kn < kn < > > > >"8-FTU"=tesrahc atem< atem< atem< atem< >e t t/< >e t t< >e t t< >elllltiiiit/<se.odnumle>elllltiiiit< >e t t/< >e t t/< >e t t< >daeh< >daeh< >daeh< >daeh< > mth< mth< >se=gnal llllmth< > > mth< >lmth EPYTCOD!< Example “Diario El Mundo” as HTML5
  • 17. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal TELEFÓNICA I+D > mth/< >ydob/< > mth/< >ydob/< >llllmth/< >ydob/< >-- lapicnirp euqolb led nif --!< >viiiid/< > mth/< >ydob/< >v d/< >v d/< >v d/< >ed sa/< >ed sa/< >ediiiisa/< >ed sa/< >no tces/<> >no tces/<> >no tces/<> no tces< no tces< >noiiiitces/<> opmeit=ssalc noiiiitces< no tces< >no tces/<> >no tces/<> >no tces/<> no tces< no tces< >noiiiitces/<>soicivres=ssalc noiiiitces< no tces< >ed sa< >ed sa< >ediiiisa< >ed sa< >no tces/< >no tces/< >-- ocidoirep led nif --!< >noiiiitces/< >no tces/< >retoof/< >retoof/< >retoof/< >retoof/< >van/<> u/< >van/<>llllu/< >van/<> u/< >van/<> u/< > /<>a/< > /<>a/< > /<>a/< í > > >iiiillll/<>a/<dadicavirP ed acit loP>lmth.virp=ferh a<>iiiillll< > a<> < a<> < a<> < > /<>a/< > /<>a/< > /<>a/< > > > a<> < >iiiillll/<>a/<lageL osivA>lmth.osiva=ferh a<>iiiillll< a<> < a<> < > u<>van< >llllu<>van< > u<>van< > u<>van< <!– del periódico --> >retoof< >retoof< >retoof< >retoof< >no tces/< >no tces/< >-- adatrop al ed nif --!< >noiiiitces/< >no tces/< >e c tra/< >e c tra/< >ellllciiiitra/< >e c tra/< >v d/<>p/< >v d/<>p/< >viiiid/<>p/< .n isirp ne osac led sodatupmi ocnic sol ed >v d/<>p/< ó ocin le res ,o acraC leugiM ,ollitsaC led atraM anallives nevoj al ed osefnoc onisesa le ,n icalecracxe atse noC >p< ú á ñ ó >p< >p< >p< >> >taolf=ssalc gnp.negami=crs "leumaS ed otoF"=tla gmiiii<>viiiid< > gm <>v d< gm <>v d< gm <>v d< >puorgh/< >puorgh/< >puorgh/< >puorgh/< >1h/<>a/< >1h/<>a/< > > >1h/<>a/<edrat atse rdlas euq ,leumaS a datrebil ne renop anedro aicneiduA aL >"lmth.1n"=ferh a<>1h< >1h/<>a/< á > a<>1h< a<>1h< a<>1h< >2h/< >2h/< >naps/< >naps/< > > >2h/<n icneted us edsed avleuH ed lecr c al ne odatse aH >naps/< ATRAM OSAC>yrogetac=ssalc naps<>2h< >2h/< ó á >naps/< > naps<>2h< naps<>2h< naps<>2h< >puorgh< >puorgh< >puorgh< >puorgh< >e c tra< >e c tra< >ellllciiiitra< >e c tra< >e c tra/< >e c tra/< >ellllciiiitra/< >e c tra/< >retoof/< >retoof/< >retoof/< >retoof/< >van/<>a/< >van/<>a/< ó > > >van/<>a/<yeR led n icaidem al nedip satsitrA soL>"lmth.x"=ferh a<>van< >van/<>a/< > a<>van< a<>van< a<>van< >retoof< >retoof< >retoof< >retoof< >p/< >p/< >p/< .'radiaH osac' le ne >p/< "sairasecen senoitseg sal" razilaer a otseupsid artseum es solraC nauJ nod euq al ne atrac anu od el ah araL oyaC >p< í >p< >p< >p< >redaeh/< >redaeh/< >redaeh/< >redaeh/< >puorgh/< >puorgh/< >puorgh/< >puorgh/< >1h/<>a/< >1h/<>a/< >1h/<>a/< > > a<> a<> >1h/<>a/< jed el on onreiboG le orep 'radiaH' osac le ne raidem osiuq yeR lE >"lmth.1n"=ferh a<>sweNtsrif=ssalc 1h< ó > a<> 1h< 1h< 1h< >2h/< >2h/< >2h< >2h/<iuarahas atsivitca al ed agleuh al aunitnoC>2h< >2h/< >2h< >2h< >puorgh< >puorgh< >puorgh< >puorgh< >redaeh< >redaeh< >redaeh< >redaeh< >e c tra< >e c tra< >ellllciiiitra< >e c tra< >1h/< >1h/< >1h/<odnuM lE ed adatroP>1h< >1h/< >1h< >1h< >1h< > > >anigap=ssalc adatrop=di noiiiitces< > no tces< no tces< no tces< Example “Diario El Mundo” as HTML5
  • 18. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 19. HTML5 Forms and Application Elements @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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 20. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 21. HTML5 Forms and Application Elements 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 22. HTML5 Forms and Application Elements <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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 23. 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 ) >slortnoc reffubotua oediVym=di oediv< >'ggo/oediv'=epyt "ggo.sresworByllib"=crs ecruos< >'4pm/oediv'=epyt "v4m.sresworByllib"=crs ecruos< >p/<detroppus ton oediV>p< >oediv/< TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 24. 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 ……… © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 25. <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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 26. <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 > > oed v< >slortnoc reffubotua oediVym=di oediiiiv< > oed v< oed v< > > > “ ‘ ’” ecruos< > 8pv ,sibrov =scedoc;mbew/oediv =epyt "mbew.sresworByllib"=crs ecruos< ecruos< ecruos< > > > “ ‘ ecruos< > 2.04.a4pm ,E10E24.1cva =scedoc;4pm/oediv =epyt "4pm.sresworByllib"=crs ecruos< ecruos< ecruos< ’” > > > “ ‘ ’” ecruos< > aroeht,sibrov =scedoc;ggo/oediv =epyt "ggo.sresworByllib"=crs ecruos< ecruos< ecruos< > p/ < > p/ < >p< >p/<detroppus ton oediV>p< > p/ < >p< >p< >oed v/< >oediiiiv/< >oed v/< >oed v/< TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 27. 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 > > oed v< >slortnoc reffubotua oediVym=di oediiiiv< > oed v< oed v< > > ecruos< ecruos< >'ggo/oediv'=epyt "ggo.sresworByllib"=crs ecruos< > ecruos< > > ecruos< >'4pm/oediv'=epyt "v4m.sresworByllib"=crs ecruos< > ecruos< ecruos< > > ‘ ’ “ ” kcart< kcart< > se =gnalcrs snoitpac =dnik "trs.halb"=crs kcart< > kcart< > > ‘ ’ “ kcart< kcart< > ne =gnalcrs snoitpac =dnik "trs.ne_halb"=crs kcart< > kcart< ” >oed v/< >oed v/< >oediiiiv/< >oed v/< 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…) TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 28. 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 00:00:20,000 --> 00:00:24,400 Altocumulus clouds occur between six thousand 00:00:24,600 --> 00:00:27,800 and twenty thousand feet above ground level. More info at — http://www.delphiki.com/websrt/ — http://www.whatwg.org/specs/web-apps/current-work/#websrt TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 29. 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 Example { )(savnaCym_ward noiiiitcnuf no tcnuf no tcnuf no tcnuf ;)"savnaCym (dIyBtnemelEteg.tnemucod = savnace rav “ rav rav rav ;)"d2"(txetnoCteg.savnace = xtc rav rav rav rav “ ; " ) 0 , 0 , 0 0 2 ( b g r = e l yt Sllif. xt c ; ) 0 5 , 5 5 , 0 1 , 0 1 (t c e R llif. xt c “ ; " ) 5. 0 , 0 0 2 , 0 , 0 ( a b g r = e l yt Sllif. xt c ; ) 0 5 , 5 5 , 0 3 , 0 3 (t c e R llif. xt c } TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 30. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 31. 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 error callback ‘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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 32. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 33. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 34. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 35. 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/safarijs databaseguide/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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 36. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 37. 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/conceptu al/safarijsdatabaseguide/UsingtheJavascriptDatabase/UsingtheJavascrip tDatabase.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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 38. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 39. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 40. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 41. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 42. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 43. 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 in error — 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 44. 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”> # This line is mandatory Example CACHE MANIFEST images/sound-icon.png images/background.png NETWORK: /resource/* FALLBACK: / /offline.html TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 45. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 46. Other important APIs Cross-Document messaging Web Sockets Server-side events Web notifications File Device APIs TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 47. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 48. 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 © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 49. 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 — whatwg@lists.whatwg.org — public-html@w3.org — public-html-comments@w3.org TELEFÓNICA I+D © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
  • 50. © 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal