SophiaConf2010 Présentation des Retours d'expériences de la Conférence du 08 Juillet - HTML 5 : une plateforme contemporaine pour le Web

Commission Open Source

http://www.slicefactory.com

Stefano Crosta
stefano@slicefactory.com


&

Slice the web up!
Save and share what matters...
http://inslices.com <!DOCTYPE html>


CSS 3 & Forms


CSS 3 & Forms text-overflow: ellipsis; (-moz-)border-radius: 5px 10px 10px 5px;
overflow: hidden;
white-space: nowrap; (-moz-)box-shadow: 0 2px 5px 0 gray;

placeholder=“type ....”


Datasets
Tag attribute data-yourtagname

Pour:


Rajouter de l'information
sémantique dans une page

À utiliser pour des donner internes
– JavaScript ou css, non pas pour
exposer des données vers des
crawlers

HTML valide!


'Structure' tags: article, aside, section, header, footer...

Utiliser rel="bookmark"
Utiliser rel="bookmark"
Avantages: pour lier vers les
pour lier vers les
Avantages:
* * markup plus lisible
markup plus lisible pages <article>
pages <article>
* * facilité pour les moteurs de recherche
facilité pour les moteurs de recherche correspondantes
correspondantes


'Structure' tags: article, aside, section, header, footer...
header

aside

section

article


RDFa et donnée semantiques
HTML5 va intégrer RDFa, qui était avant une spec lié à XHTML - encore en draft...!
http://dev.w3.org/html5/rdfa/
Guerre RDFa – MicroData (Microformat) ?

HTML+RDFa 1.1 - Support for RDFa in HTML4 and HTML5
W3C Editor's Draft 05 July 2010
This specification defines rules and guidelines for adapting the RDFa Core 1.1 specification
This specification defines rules and guidelines for adapting the RDFa Core 1.1 specification
for use in HTML5 and XHTML5. The rules defined in this specification not only apply to
for use in HTML5 and XHTML5. The rules defined in this specification not only apply to
HTML5 documents in non-XML and XML mode, but also to HTML4 and XHTML documents
HTML5 documents in non-XML and XML mode, but also to HTML4 and XHTML documents
interpreted through the HTML5 parsing rules.
interpreted through the HTML5 parsing rules.
There are a number of substantive differences between this version and its predecessor,
There are a number of substantive differences between this version and its predecessor,
including:
including:
●
Inheritance of basic processing rules from RDFa 1.1 [RDFA-CORE], instead of
Inheritance of basic processing rules from RDFa 1.1 [RDFA-CORE], instead of
●
XHTML+RDFa 1.0 [RDFA-SYNTAX]
XHTML+RDFa 1.0 [RDFA-SYNTAX]
●
Inclusion of the HTML Default Vocabulary Terms, which mirror the XHTML Default
●
Inclusion of the HTML Default Vocabulary Terms, which mirror the XHTML Default
Vocabulary Terms, for the purpose of HTML/XHTML interoperability
Vocabulary Terms, for the purpose of HTML/XHTML interoperability
●
Inclusion of a HTML 4.01 + RDFa 1.1 DTD for validation purposes
●
Inclusion of a HTML 4.01 + RDFa 1.1 DTD for validation purposes
●
Added normative definition of @version attribute.
●
Added normative definition of @version attribute.


postMessage()
Communication entre différents frames sur une page


JavaScript
* Workers pas encore murs (eg. Mozilla bug 538440* just fixed)
* On utilisait déjà JQuery mais performances accrues pour
getElementsByClassName() et QuerySelectorAll()
* WebStorage pour sauvegarder des données sans besoin de passer pas
une connexion avec nos serveurs
* Web Sockets... SOOON! ('real time, server push...')

CSS3

* Attention aux perfs avec E[foo~="bar"] (et *=, $=, …) !
Même si div.value == div[class~=value] les navigateurs ne sont pas du tout
optimisé pareil!

* https://bugzilla.mozilla.org/show_bug.cgi?id=538440


En général...
Bcp d'améliorations importantes, qui facilitent la vie des développeurs,
mais...

Il faut attendre l'implémentation dans les navigateurs: support très partiel
pour...
• Structural tags pour IE: document.createElement('header');
• CSS3
• Nouveaux contrôles pour les formulaires
• Tags multimedia
• Canvas et certains selecteurs: problèmes mémoire et performance!
• ...

Implementing the Media
Fragments URI Specification:
Media Fragments Firefox Extension
Raphaël Troncy <raphael.troncy@eurecom.fr>
@rtroncy


Use Case
• Aidem received on her Facebook
wall a status message containing a
Media Fragment URI
– Use a ‘#’ !
– Highlight a video
sequence
– Highlight a region
to pay attention to


Media Fragments URI
Provide URI-based
mechanisms for uniquely
identifying fragments for
media objects on the Web,
such as video, audio, and
images.

Photo credit: Robert Freund


Requirements
• r01: Temporal fragments:
– a clipping along the time dimension from a start to an end time that
are within the duration of the media resource
• r02: Spatial fragments:
– a clipping of an image region, only consider rectangular regions
• r03: Track fragments:
– a track as exposed by a container format of the media resource
• r04: Named fragments:
– a media fragment - either a track, a time section, or a spatial region -
that has been given a name through some sort of annotation
mechanism


Media Fragments Processing

• General principle:
– Smart UA will strip out the fragment definition and encode
it into custom http headers ...
– (Media) Servers will handle the request, slice the media
content and serve just the fragment while old ones will
serve the whole resource
• Four recipes proposed for:
– Enabling caching or not;
– Perform unit to bytes mapping on server or client side


Media Fragments Rendering (temporal)

Original resource
length

Fragment beginning Playback progress Fragment end


Media Fragments Rendering (spatial)

highlighted
fragment
semi-opaque
overlay


Recipe: serving playable resources
• The UA sends a Range request expressed in a custom unit (e.g. seconds),
the server provides a multipart message body reply (multipart/byte-
ranges) containing not only the bytes corresponding to requested media
fragment but also the media header data making the resource playable.


Recipe: serving playable resources


Observing HTTP Traffic
HTTP
request
http-on-modify-request

NinSuna
Server

HTTP
response
http-on-examine-response


Examining HTTP Traffic

• HTTP request:
– retrieving URI
– parsing key=values pairs from the fragment part
– setting Range header
• HTTP response:
– checking Content-Type
and Content-Range-Mapping headers values
– attaching custom playback controls to the HTML5 page
– creating spatial dimension overlay (if specified)


Requesting a temporal fragment
HTTP/1.1 206 Partial Content

Content-Type: multipart/byteranges;boundary=End
Content-Range-Mapping:
{t:npt 4.8-14.8/0-38.33;include-setup}
={bytes 0-5998,629578-1690588/4055466}
...

--End
Content-Type: video/ogg
Content-Range: bytes 0-5997/4055466

{binary data}
--End
Content-Range: bytes 629578-1690588/4055466

{binary data}
--End
--End--


Requesting a temporal fragment
• We attach a Stream Listener to the HTTP channel

Content-Type:
multipart/byteranges;boundary=End
...
--End
Content-Type: video/ogg Content-Type: video/ogg
Content-Range: bytes 0-5997/4055466 ...

{binary data} {binary data}
--End {binary data}
Content-Range: bytes 629578-
1690588/4055466

{binary data}
--End
--End--


Demo

SophiaConf2010 Présentation des Retours d'expériences de la Conférence du 08 Juillet - HTML 5 : une plateforme contemporaine pour le Web

Recommended

Recommended

More Related Content

What's hot

What's hot (16)

Viewers also liked

Viewers also liked (9)

Similar to SophiaConf2010 Présentation des Retours d'expériences de la Conférence du 08 Juillet - HTML 5 : une plateforme contemporaine pour le Web

Similar to SophiaConf2010 Présentation des Retours d'expériences de la Conférence du 08 Juillet - HTML 5 : une plateforme contemporaine pour le Web (20)

More from TelecomValley

More from TelecomValley (20)

Recently uploaded

Recently uploaded (20)

SophiaConf2010 Présentation des Retours d'expériences de la Conférence du 08 Juillet - HTML 5 : une plateforme contemporaine pour le Web