Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Presentation xHtml5
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
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
