• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Presentation xHtml5
 

Presentation xHtml5

on

  • 913 views

 

Statistics

Views

Total Views
913
Views on SlideShare
912
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
1

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Sympa comme présentation Seb! Je te laisse l’adresse de mon blog : http://www.thibautlemay.info/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Presentation xHtml5 Presentation xHtml5 Presentation Transcript

    • sommaire
      La naissance
      Le document
      Les web forms
      Le multimédia
      L’avenir
      15/06/2008
      2
      Université d'Evry Val d'Essonne
    • 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
    • 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
    • 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
    • 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>
    • 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>
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
      }
      }
    • 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
    • Le multimédia
      Les Animations
      Etapes 
      15/06/2008
      Université d'Evry Val d'Essonne
      24
    • 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
    • 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
    • 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
    • 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>
    • 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>
    • L’avenir
      Intégration par les navigateurs
      Utilisation par les développeurs
      15/06/2008
      Université d'Evry Val d'Essonne
      30