HTML5
An introduction to the language and APIs




José M. Cantera Fonseca
Senior Technologist

TELEFÓNICA I+D
Date: July ...
What is HTML5?

                      HTML5 reflects an effort, started in 2004, to study contemporary HTML
              ...
HTML History (I)

         The early days (1990-1995) at CERN and IETF
         —          http://www.w3.org/People/Ragget...
HTML History (II)

                 2005-2006                                 The WHATWG working underground
             ...
HTML History (III)

            July 2009 the end of the work on XHTML2 and XHTML
            Modularization is announced
...
HTML5 Main Design Principles
             Differentiating between
             —          Conforming Language : Pages synt...
HTML5 Main Design Principles (II)

                     Interoperability
                     —          Well-Defined beha...
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
                                                           ...
HTML5 .- XHTML vs HTML

                        XHTML taught us


                        —          lowercase tags!


   ...
HTML5 .- XHTML vs HTML
             HTML syntax remarks
             —          HTML syntax is case-insensitive
          ...
HTML5 Syntax Remarks

            Tag soup? No!
            —          small degree of freedom, but very detailed rules fo...
Global Attributes
                         @accesskey                              Accessibility / Mobile
                ...
New Structural Elements

            They can be employed in many situations where <div> is used today and should help
   ...
Sectioning Example
              If you just go through your document and blindly replace all the
              <div>s wit...
New Structural Elements

            <hgroup>
            —          represents the heading of a section
            <head...
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
                                                           ...
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
                                                           ...
HTML5 Forms and Application Elements
             <input> It has been extended to support automatic validations for differ...
HTML5 Forms and Application Elements

            @placeholder a placeholder string to help users
            @multiple to...
CSS Pseudo-Classes to support form styling

            Simplify styling of controls by defining a set of pseudo-classes
 ...
HTML5 Forms and Application Elements

            DOM APIs
            —          input.value
            —          input...
HTML5 Forms and Application Elements

           <output> element
           —          To display a computation output, e...
The <video> and <audio> elements
              They can be used to embed multimedia content on a web page
              — ...
The <video> and <audio> elements (II)
                           Attributes
                           —     @autoplay the...
<video> and <audio> codecs

            No agreement in a common format to be supported by all web
            browsers
  ...
<video> and <audio> codecs (II)
            2010 : WebM to the rescue
            —          Offers high-quality video wit...
The <track> element

           It is intended to improve the accessibility of media content
           A children of <aud...
WebSRT

            Web SubRip Text file format
            —          Competes with other formats for timed text, includi...
The <canvas> element
               a resolution-dependent bitmap canvas which can be used for rendering graphs, game
    ...
The <canvas> API
                     Controlling filling and stroke
                    —         fillStyle, strokeStyle ...
Geolocation API (I)

            Allows to obtain the user’s current position (WGS-84 coordinates)
            —          ...
Geolocation API (II)

            maximumAge       indicates that the application is willing
            to accept a cache...
Geolocation API (III)

            Monitoring the user location
            —          watchLocation(successCB,errorCB,opt...
Geolocation API (IV)

            Privacy
            —          User agents must ask users
                       –      ...
Web Storage (I)
                Data storage on the browser side without relying on cookies
                —          htt...
Web Storage (II)

            <storage> event
            —          fired when a storage area changes
            —      ...
Web SQL Database

            Allows to store data on SQL local databases
            —          http://dev.w3.org/html5/w...
Web SQL Database (II)
            Creating a database
            —          openDatabase(name,version,label,estimatedSize...
Web SQL Database (III)

            SQLResultSetRowList
            —          To get access to the rows selected
        ...
WEB SQL (IV)
                    Security considerations
                    —          User agents should establish db qu...
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Html5 Taller Campus Party Vfinal2l
Upcoming SlideShare
Loading in...5
×

Html5 Taller Campus Party Vfinal2l

3,210

Published on

HTML5 Presentation given @ CampusParty 2010

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,210
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 Taller Campus Party Vfinal2l

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×