Html5 Taller Campus Party Vfinal2l

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

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


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, 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


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


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

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


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


TELEFÓNICA I+D
>redaeh/< >van/< >llllu/<
>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

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

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 )
>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


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


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


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


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


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


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/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


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/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


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


Html5 Taller Campus Party Vfinal2l

Html5 Taller Campus Party Vfinal2l

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Html5 Taller Campus Party Vfinal2l

Ähnlich wie Html5 Taller Campus Party Vfinal2l (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html5 Taller Campus Party Vfinal2l