Commission Open Source




     http://www.slicefactory.com




                          Stefano Crosta
                 ...
Commission Open Source




                                   &


      Slice the web up!
Save and share what matters...
 ...
Commission Open Source



CSS 3 & Forms
Commission Open Source



CSS 3 & Forms              text-overflow: ellipsis;   (-moz-)border-radius: 5px 10px 10px 5px;
 ...
Commission Open Source



Datasets
Tag attribute data-yourtagname




Pour:


  Rajouter de l'information
sémantique dans...
Commission Open Source


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




                              ...
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...
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à ...
Commission Open Source



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

...
Commission Open Source
Implementing the Media
  Fragments URI Specification:
Media Fragments Firefox Extension
 Raphaël Troncy <raphael.troncy@eu...
Commission Open Source




 Use Case
• Aidem received on her Facebook
  wall a status message containing a
  Media Fragmen...
Commission Open Source




  Media Fragments URI
                                              Provide URI-based
         ...
Commission Open Source




Requirements
• r01: Temporal fragments:
   – a clipping along the time dimension from a start t...
Commission Open Source




Media Fragments Processing

• General principle:
   – Smart UA will strip out the fragment defi...
Commission Open Source




Media Fragments Rendering (temporal)



Original resource
length




Fragment beginning      Pl...
Commission Open Source




   Media Fragments Rendering (spatial)



                                         highlighted
...
Commission Open Source




Recipe: serving playable resources
• The UA sends a Range request expressed in a custom unit (e...
Commission Open Source




Recipe: serving playable resources
Commission Open Source




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




        ...
Commission Open Source




Examining HTTP Traffic

• HTTP request:
  – retrieving URI
  – parsing key=values pairs from th...
Commission Open Source




Requesting a temporal fragment
HTTP/1.1 206 Partial Content

Content-Type: multipart/byteranges...
Commission Open Source




  Requesting a temporal fragment
  • We attach a Stream Listener to the HTTP channel
HTTP/1.1 2...
Commission Open Source




Demo
Upcoming SlideShare
Loading in …5
×

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

1,036 views

Published on

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.

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
1,036
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Commission Open Source http://www.slicefactory.com Stefano Crosta stefano@slicefactory.com
  2. 2. Commission Open Source & Slice the web up! Save and share what matters... http://inslices.com <!DOCTYPE html>
  3. 3. Commission Open Source CSS 3 & Forms
  4. 4. Commission Open Source 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 ....”
  5. 5. Commission Open Source 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!
  6. 6. Commission Open Source '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
  7. 7. Commission Open Source 'Structure' tags: article, aside, section, header, footer... header aside section article
  8. 8. 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 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.
  9. 9. Commission Open Source postMessage() Communication entre différents frames sur une page
  10. 10. 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
  11. 11. 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! • ...
  12. 12. Commission Open Source
  13. 13. Implementing the Media Fragments URI Specification: Media Fragments Firefox Extension Raphaël Troncy <raphael.troncy@eurecom.fr> @rtroncy Commission Open Source
  14. 14. Commission Open Source 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
  15. 15. Commission Open Source 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
  16. 16. Commission Open Source 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
  17. 17. Commission Open Source 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
  18. 18. Commission Open Source Media Fragments Rendering (temporal) Original resource length Fragment beginning Playback progress Fragment end
  19. 19. Commission Open Source Media Fragments Rendering (spatial) highlighted fragment semi-opaque overlay
  20. 20. Commission Open Source 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.
  21. 21. Commission Open Source Recipe: serving playable resources
  22. 22. Commission Open Source Observing HTTP Traffic HTTP request http-on-modify-request NinSuna Server HTTP response http-on-examine-response
  23. 23. Commission Open Source 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)
  24. 24. Commission Open Source 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-Type: video/ogg Content-Range: bytes 629578-1690588/4055466 {binary data} --End --End--
  25. 25. Commission Open Source Requesting a temporal fragment • We attach a Stream Listener to the HTTP channel HTTP/1.1 206 Partial Content Content-Type: multipart/byteranges;boundary=End ... HTTP/1.1 206 Partial Content --End Content-Type: video/ogg Content-Type: video/ogg Content-Range: bytes 0-5997/4055466 ... {binary data} {binary data} --End {binary data} Content-Type: video/ogg Content-Range: bytes 629578- 1690588/4055466 {binary data} --End --End--
  26. 26. Commission Open Source Demo

×