Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Wird geladen in …3
×

Hier ansehen

1 von 16 Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie Html5 einführung (20)

Anzeige

Html5 einführung

  1. 1. HTML 5 Erster Einblick, H. Mittendorfer http://www.whatwg.org/ P. Kröner: „HTML 5- Webseiten Innovativ und zukunftssicher
  2. 2. HTML 5 • Stammt nicht vom W3C, sondern von der whatwg (www.whatwg.org) • W3C Working Draft 11 October 2012 • HTML 5 ist XHTML und mehr • Kümmert sich um Vieles, was bisher nicht Sache von HTML war.
  3. 3. Video einbetten http://www.whatwg.org/demos/2008-sept/video/video.html
  4. 4. Proprietär versus Standard
  5. 5. <Video> Scenario: Embedding a video <video src="firefox.ogg" controls></video> To make it autoplay: <video src="firefox.ogg" controls autoplay></video> Remove controls and add script: <script> var video = document.getElementsByTagName('video')[0]; </script> <p> <input type=button value="&#x25FC;" onclick="video.pause();"> <input type=button value="&#x25B6;" onclick="video.play();"> </p> http://www.whatwg.org/demos/2008-sept/
  6. 6. Drag and Drop http://www.whatwg.org/demos/2008-sept/dnd/dnd.html
  7. 7. CANVAS http://www.whatwg.org/demos/2008-sept/color/color.html
  8. 8. Spiele mit Canvas http://www.chip.de/artikel/HTML5-Das-Web-von-morgen-4_41539553.html
  9. 9. Lokales Speichern http://www.whatwg.org/demos/2008-sept/editor/editor.html
  10. 10. <form> Scenario: A text editor that stores the user's files client-side. Start with a simple text editor: <form name=editor> <p><textarea name=data></textarea></p> </form> Then add Open and Save buttons: <p> <label>Filename: <input name=filename></label> <input type=button value="Open" onclick="doOpen()"> <input type=button value="Save" onclick="doSave()"> </p> Saving: <script> function doSave() { var filename = document.forms.editor.filename.value; var data = document.forms.editor.data.value; localStorage.setItem('file-' + filename, data); } </script>
  11. 11. Validator http://html5.validator.nu/
  12. 12. Plain HTML5
  13. 13. Wiederbelebt aber rein semantisch • <b> Hervorhebung (statt <strong>) • <i> Namen und Begriffe (statt <span>) • <hr> Inhaltlicher Bruch, stärker als Absatz • Das CSS formatiert und sonst keiner!
  14. 14. Rausgeschmissen • <acronym> dafür <abbr> • <applet> dafür <object> • <dir> dafür <ul> • ersatzlos: <frame>, <frameset>, <noframes>, <big>, <font>, <center>, <strike>, .. (alle Präsentationselemente) • aber wieder hineinurgiert: <iframe>
  15. 15. Der <div> lebt noch, aber es gibt neue, strukturbildende Elemente • <section> • <header>, <footer> • <nav> • <aside> • <article> • <hgroup>
  16. 16. Und ganz neu.. • <time> • <mark> • <figure>, <figcaption> • <video> <audio> • <canvas> • <ruby>, <rp>, <rt>

Hinweis der Redaktion

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×