View
659
Download
1
Category
Preview:
DESCRIPTION
SophiaConf2010 Présentation des Retours d'expériences de la Conférence du 08 Juillet - HTML 5, une plateforme contemporaine pour le Web : Stefano Crosta, Chief Technical Officer de SLICE FACTORY ; Raphaël Troncy, Maître de Conférences à Eurecom.
Citation preview
Commission Open Source
http://www.slicefactory.com
Stefano Crostastefano@slicefactory.com
Commission Open Source
&
http://inslices.com
Slice the web up!Save and share what matters...
<!DOCTYPE html>
CSS 3 & Forms
Commission Open Source
Commission Open Source
CSS 3 & Forms text-overflow: ellipsis;overflow: hidden;white-space: nowrap;
(-moz-)border-radius: 5px 10px 10px 5px;
(-moz-)box-shadow: 0 2px 5px 0 gray;
placeholder=“type ....”
Commission Open Source
Datasets
Tag attribute data-yourtagnameTag attribute data-yourtagnameTag attribute data-yourtagnameTag 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!
Commission Open Source
'Structure' tags: article, aside, section, header, footer...
Avantages:* markup plus lisible* facilité pour les moteurs de recherche
Avantages:* markup plus lisible* facilité pour les moteurs de recherche
Utiliser rel="bookmark" pour lier vers les pages <article> correspondantes
Utiliser rel="bookmark" pour lier vers les pages <article> correspondantes
Commission Open Source
'Structure' tags: article, aside, section, header, footer...header
aside
section
article
Commission Open Source
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 HTML5W3C Editor's Draft 05 July 2010
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 HTML5 documents in non-XML and XML mode, but also to HTML4 and XHTML documents interpreted through the HTML5 parsing rules.There are a number of substantive differences between this version and its predecessor, including:
● Inheritance of basic processing rules from RDFa 1.1 [RDFA-CORE], instead of XHTML+RDFa 1.0 [RDFA-SYNTAX]●Inclusion of the HTML Default Vocabulary Terms, which mirror the XHTML Default Vocabulary Terms, for the purpose of HTML/XHTML interoperability●Inclusion of a HTML 4.01 + RDFa 1.1 DTD for validation purposes●Added normative definition of @version attribute.
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 HTML5 documents in non-XML and XML mode, but also to HTML4 and XHTML documents interpreted through the HTML5 parsing rules.There are a number of substantive differences between this version and its predecessor, including:
● Inheritance of basic processing rules from RDFa 1.1 [RDFA-CORE], instead of XHTML+RDFa 1.0 [RDFA-SYNTAX]●Inclusion of the HTML Default Vocabulary Terms, which mirror the XHTML Default Vocabulary Terms, for the purpose of HTML/XHTML interoperability●Inclusion of a HTML 4.01 + RDFa 1.1 DTD for validation purposes●Added normative definition of @version attribute.
Commission Open Source
postMessage()
Communication entre différents frames sur une page
Commission Open Source
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
Commission Open Source
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!• ...
Commission Open Source
Implementing the Media Fragments URI Specification:
Media Fragments Firefox Extension
Raphaël Troncy <raphael.troncy@eurecom.fr>
@rtroncy
Commission Open Source
• Aidem received on her Facebook wall a status message containing a Media Fragment URI– Use a ‘#’ !
– Highlight a videosequence
– Highlight a regionto pay attention to
Commission Open Source
Use Case
Photo credit: Robert Freund
Provide URI-based mechanisms for uniquely identifying fragments for media objects on the Web, such as video, audio, and images.
Commission Open Source
Media Fragments URI
• 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
Commission Open Source
Requirements
• 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
Commission Open Source
Media Fragments Processing
Commission Open Source
Media Fragments Rendering (temporal)
Fragment beginning Fragment endPlayback progress
Original resourcelength
Commission Open Source
Media Fragments Rendering (spatial)
semi-opaqueoverlay
highlightedfragment
• 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.
Commission Open Source
Recipe: serving playable resources
Commission Open Source
Recipe: serving playable resources
http-on-modify-request
http-on-examine-response
HTTP request
HTTP response
NinSunaServer
Commission Open Source
Observing 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)
Commission Open Source
Examining HTTP Traffic
HTTP/1.1 206 Partial Content
Content-Type: multipart/byteranges;boundary=EndContent-Range-Mapping:{t:npt 4.8-14.8/0-38.33;include-setup}={bytes 0-5998,629578-1690588/4055466}...
--EndContent-Type: video/oggContent-Range: bytes 0-5997/4055466
{binary data}--EndContent-Type: video/oggContent-Range: bytes 629578-1690588/4055466
{binary data}--End--End--
Commission Open Source
Requesting a temporal fragment
Commission Open Source
Requesting a temporal fragment
HTTP/1.1 206 Partial Content
Content-Type: multipart/byteranges;boundary=End...
--EndContent-Type: video/oggContent-Range: bytes 0-5997/4055466
{binary data}--EndContent-Type: video/oggContent-Range: bytes 629578-1690588/4055466
{binary data}--End--End--
HTTP/1.1 206 Partial Content
Content-Type: video/ogg...
{binary data}{binary data}
• We attach a Stream Listener to the HTTP channel
Recommended