Your SlideShare is downloading. ×
Presentation xHtml5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Presentation xHtml5

718

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Sympa comme présentation Seb! Je te laisse l’adresse de mon blog : http://www.thibautlemay.info/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
718
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1.
  • 2. sommaire
    La naissance
    Le document
    Les web forms
    Le multimédia
    L’avenir
    15/06/2008
    2
    Université d'Evry Val d'Essonne
  • 3. La naissance
    HTML4 déjà vieux de 10 ans
    Nombreuses balises obsolètes
    Nouvelles attentes des webmasters et des internautes
    Plus d’un an de travail du W3C pour définir le futur de l’HTML
    15/06/2008
    3
    Université d'Evry Val d'Essonne
  • 4. Le document
    Nouvelles balises:
    Sémantiques (<time>, <details>,…)
    Section de document (<section>, <article>, <aside>, <header>, <footer>, <nav>,…)
    15/06/2008
    Université d'Evry Val d'Essonne
    4
  • 5. Le document
    Les nouveaux événements JavaScript pris en compte par le HTML 5
    Onabort
    Onbeforeunload
    Oncontextmenu
    Ondrag
    Ondragend
    Ondragenter
    15/06/2008
    Université d'Evry Val d'Essonne
    5
    Ondragleave
    Ondragover
    Ondragstart
    Ondrop
    Onerror
    Onstorage
  • 6. Le document
    Vers un code plus lisible…
    15/06/2008
    Université d'Evry Val d'Essonne
    6
    <body><header>
    <h1>Wake up sheeple!</h1>
    <p><a href="news.html">News</a> -
    <a href="blog.html">Blog</a> -
    <a href="forums.html">Forums</a></p>
    </header>
    <nav>
    <h1>Navigation</h1>
    <ul>
    <li><a href="articles.html">Index of all articles</a><li>
    <li><a href="today.html">Things sheepleneed to wake up for today</a><li>
    <li><a href="successes.html">Sheeple we have managed to wake</a><li>
    </ul>
    </nav>
    <article>
    <p>...page content wouldbehere...</p>
    </article>
    <footer>
    <p>Copyright © 2006 The ExampleCompany</p>
    <p><a href="about.html">About</a> -
    <a href="policy.html">Privacy Policy</a> -
    <a href="contact.html">Contact Us</a></p>
    </footer></body>
  • 7. Le document
    Nouvelles balises sémantiques
    <aside>
    <footer>
    <header>
    <dialog>
    <q>
    <cite>
    <dfn>
    15/06/2008
    Université d'Evry Val d'Essonne
    7
    <time>
    <meter>
    <var>
    <kbd>
    <progress>
    <samp>
  • 8. Les web forms
    Extension des formulaires HTML
    Nouveaux types d’entrée
    date
    time
    datetime
    datetime-local
    month
    week
    range
    number
    url
    email
    15/06/2008
    8
    Université d'Evry Val d'Essonne
  • 9. Les web forms
    Nouveaux attributs
    min
    max
    step
    wrap
    Attributs dépréciés
    size
    autocomplete
    autofocus
    accept
    list
    required
    pattern
    title
    form
    15/06/2008
    9
    Université d'Evry Val d'Essonne
  • 10. Les web forms
    Exemple (1)
    <form id='test'action='test.php' method='post'>
    <input name='email' type='email' autofocus='autofocus' required/>
    <input name='date' type='date' value='2008-12-31'/>
    <input name='phone' type='text' autocomplete='off' maxlength='10'
    pattern='^0[1-68][0-9]{8}$'
    title='Votre numéro de téléphone est incorrect'/>
    <input name='submit' type='submit' value='OK'/>
    </form>
    I
    2008-12-31
    OK
    15/06/2008
    10
    Université d'Evry Val d'Essonne
  • 11. Les web forms
    Exemple (2)
    <form id='nowhereform'action='nowhere.php'method='post'>
    <!– The query is only active for googleform and yahooform -->
    <input type='text'name='query'form='googleform yahooform'/>
    <input type='submit'name='nowhere'value='Nowhere'/>
    </form>
    <form id='googleform'action='google.php'>
    <input type='submit'name='google'value='Google'>
    </form>
    <form id='yahooform'action='yahoo.php'>
    <input type='submit'name='yahoo'value='Yahoo'/>
    </form>
    Google
    Nowhere
    Yahoo
    15/06/2008
    11
    Université d'Evry Val d'Essonne
  • 12. Les web forms
    Nouveaux éléments
    datalist
    output
    Modèle de répétition
    add
    remove
    move-up
    move-down
    15/06/2008
    12
    Université d'Evry Val d'Essonne
  • 13. Les web forms
    Exemple (3)
    <form id='test'action='test.php' method='post'>
    <input type='url' name='location' list='urls'/>
    <datalist id='urls'>
    <option label='W3C' value='http://www.w3c.org'/>
    <option label='W3C Validator' value='http://www.validator.w3.org'/>
    </datalist>
    </form>
    I
    W3
    http://www.w3.org W3C
    http://www.validator.w3.org W3C Validator
    15/06/2008
    13
    Université d'Evry Val d'Essonne
  • 14. Les web forms
    Exemple (4)
    <form id='test'action='test.php' method='post'>
    <input type='range' name='power' list='powers' min='-100' max='100'/>
    <datalist id='powers'>
    <option value='+50'/> <!– invalid values are not displayed -->
    <option value='30'/>
    <option value='0' selected='selected'/>
    <option value='-30'/>
    </datalist>
    </form>
    15/06/2008
    14
    Université d'Evry Val d'Essonne
  • 15. Les web forms
    Exemple (5)
    <form id='test'action='test.php' method='post'>
    <input type='range' name='power' list='powers' min='-100' max='100'/>
    <datalist id='powers'>
    <option value='+50'/> <!– invalid values are not displayed -->
    <option value='30'/>
    <option value='0' selected='selected'/>
    <option value='-30'/>
    </datalist>
    <outputonformchange="value=power.value">0</output>
    </form>
    30
    15/06/2008
    15
    Université d'Evry Val d'Essonne
  • 16. Les web forms
    Exemple (6)
    <form id='test'action='test.php' method='post'>
    <table>
    <thead>
    <tr>
    <th>Product</th>
    <th>Quantity</th>
    </tr>
    </thead>
    </tbody>
    <tr id='order' repeat='template' repeat-start='3'>
    <td><input type='text' name='row[order].product' value=''/></td>
    <td><input type='number' name='row[order].quantity' value='1'/></td>
    <td><button type='remove'>Remove This Row</button></td>
    </tr>
    </tbody>
    </table>
    <p><button type='add' template='order'>Add Row</button></p>
    <p><button type='submit' name='submit'>Submit</button></p>
    </form>
    15/06/2008
    16
    Université d'Evry Val d'Essonne
  • 17. Les web forms
    Exemple (6)
    <form id='test'action='test.php' method='post'>
    <table>
    <thead>
    <tr>
    <th>Product</th>
    <th>Quantity</th>
    </tr>
    </thead>
    </tbody>
    <tr id='0'>
    <td><input type='text' name='row0.product' value=''/></td>
    <td><input type='number' name='row0.quantity' value='1'/></td>
    <td><button type='remove'>Remove This Row</button></td>
    </tr>
    <tr id='1'>
    <td><input type='text' name='row1.product' value=''/></td>
    <td><input type='number' name='row1.quantity' value='1'/></td>
    <td><button type='remove'>Remove This Row</button></td>
    </tr>
    <tr id='2'>
    <td><input type='text' name='row2.product' value=''/></td>
    <td><input type='number' name='row2.quantity' value='1'/></td>
    <td><button type='remove'>Remove This Row</button></td>
    </tr>
    </tbody>
    </table>
    <p><button type='add' template='order'>Add Row</button></p>
    <p><button type='submit' name='submit'>Submit</button></p>
    </form>
    15/06/2008
    17
    Université d'Evry Val d'Essonne
  • 18. Les web forms
    Nouveaux évènements et améliorations
    onchange
    onformchange
    oninput
    onforminput
    oninvalid
    15/06/2008
    18
    Université d'Evry Val d'Essonne
    onsubmit
    onreset
    onreceived
    onDOMControlValueChanged
  • 19. Les web forms
    Exemple (7)
    <head>
    <!– Some heading instructions here, before JavaScript -->
    <script type='text/javascript'>
    <![CDATA[
    function failed(event) {
    var form = event.target.form;
    form.error.value = 'The value is wrong for a reason I did not expect.';
    if (event.target.validity.typeMismatch)
    form.error.value = 'You must enter a number.';
    else if (event.target.validity.stepMismatch)
    form.error.value = 'Fractional numbers are not allowed.';
    else if (event.target.validity.rangeUnderflow)
    form.error.value = 'The number must be zero or greater.';
    else if (event.target.validity.rangeOverflow)
    form.error.value = 'The number must be 255 or less.';
    else if (event.target.validity.valueMissing)
    form.error.value = 'You must enter a number.';
    event.preventDefault(); /* don't want the User Agent to do its own reporting */
    }
    ]]>
    </script>
    </head>
    <body>
    <form id='test'action='test.php' method='post'>
    <label>order:</label>
    <input name='order' type='number' min='0' max='5' required='required' oninvalid="javascript:failed(event);"/>
    <output name='error'/>
    </form>
    </body>
    15/06/2008
    19
    Université d'Evry Val d'Essonne
  • 20. Les web forms
    Nouveaux selecteurs
    :enabled
    :disabled
    :checked
    :indeterminate
    :default
    :valid
    :invalid
    15/06/2008
    20
    Université d'Evry Val d'Essonne
    :in-range
    :out-of-range
    :required
    :optional
    :redonly
    :read-write
  • 21. Le multimédia
    Balise <canvas>
    Création d’éléments graphiques simples ou complexes
    La méthode getContext()
    Accès aux fonctions de dessin
    Une forme primitive : le rectangle
    15/06/2008
    Université d'Evry Val d'Essonne
    21
  • 22. Le multimédia
    Une forme primitive : le rectangle
    15/06/2008
    Université d'Evry Val d'Essonne
    22
    beginPath() // Débute la création d’un cheminclosePath() // Ferme le cheminstroke() // Dessine le bord d’une formefill() // créée une forme pleine
    functiondraw(){
    var canvas = document.getElementById('rapport');
    if (canvas.getContext){
    varctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); //rectangle plein ctx.clearRect(45,45,60,60); //Zone éffacéectx.strokeRect(50,50,50,50); //rectangle vide
    }
    }
  • 23. Le multimédia
    Formes géométriques et dessins de chemin
    moveTo() - lineTo() – arcTo()
    quadraticCurveTo() / bezierCurveTo()
    15/06/2008
    Université d'Evry Val d'Essonne
    23
  • 24. Le multimédia
    Les Animations
    Etapes 
    15/06/2008
    Université d'Evry Val d'Essonne
    24
  • 25. Le multimédia
    Les images
    Récupération d’une image
    A partir de rien
    A partir d’un lien URL
    La méthode drawImage()
    Affichage sur le canevas
    15/06/2008
    Université d'Evry Val d'Essonne
    25
  • 26. Le multimédia
    Styles et couleurs
    Couleurs
    Styles de ligne
    Transparence
    Dégradés
    Motifs
    15/06/2008
    Université d'Evry Val d'Essonne
    26
  • 27. Le multimédia
    Les transformations
    Translation
    Rotation
    Mise à l’échelle
    Les compositions
    La propriété « globalCompositeOperation »
    Dessiner
    Masquer des zones du canevas
    effacer
    Chemins et découpe
    15/06/2008
    Université d'Evry Val d'Essonne
    27
  • 28. Le multimédia
    Exemple d’implémentation de base
    15/06/2008
    Université d'Evry Val d'Essonne
    28
    <html>
    <head
    <title>Canvas tutorial</title>
    <script type="text/javascript">
    functiondraw(){
    var canvas = document.getElementById('rapport');
    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    }
    }
    </script>
    <style type="text/css"> canvas { border: 1px solid black; } </style>
    </head>
    <body onload="draw();">
    <canvasid= "rapport"width="150"height="150">
    </canvas>
    </body>
    </html>
  • 29. Le multimédia
    La balise Vidéo
    Controls : spécifier le démarrage automatique
    Poster : image pour les navigateurs qui ne supportent pas les vidéos
    La balise Audio
    Conteneur d’objets sonores
    15/06/2008
    Université d'Evry Val d'Essonne
    29
    <videosrc='video.avi' controls poster='poster.jpg‘ width='320' height='240'>
    </video>
    <audio>
    <a href='music.mp3'>Download song</a>
    <source src='music.mp3' type='audio/mpeg'>
    </audio>
  • 30. L’avenir
    Intégration par les navigateurs
    Utilisation par les développeurs
    15/06/2008
    Université d'Evry Val d'Essonne
    30

×