Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5

3,561 views

Published on

  • Be the first to comment

  • Be the first to like this

Html5

  1. 1. HTML5<br />
  2. 2. INHALT<br />Entstehung<br />Generelle Ideen<br />Markup & Elemente<br />Neue Formularelemente<br />Rich Media Einbindung<br />Weiterführendes<br />
  3. 3. Entstehung<br />1991<br />Tim Berners-Lee „HTML Tags“<br />IETF – Internet Engineering Task Force<br />W3C – World Wide Web Consortium<br />1999<br />HTML 4.01<br />XHTML 1.0<br />
  4. 4. Entstehung<br />XHTML 2 – keine Abwärtskompabilität<br />Schisma im W3C<br />Gründung des WHATWG<br />Web Hypertext Application Technology Working Group<br />Ian Hickson<br />Web Forms 2.0 + Web Apps 1.0 = HTML5<br />2012 CandidateRecommendation<br />
  5. 5. GENERELLE IDEEN<br />Bestehende Inhalte werden unterstützt<br />Fehlerbehandlung für Browser wird definiert<br />So einfach wie möglich<br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br /><!DOCTYPE html><br />
  6. 6. MARKUP & ELEMENTE<br />Einfaches Markup<br /><metahttp-equiv="content-type" content="text/html; charset=UTF-8"> <br /><metacharset=UTF-8"> <br /><link rel="stylesheet" type="text/css" href="styles.css"><br /><link rel="stylesheet" href="styles.css"><br /><scriptsrc="script.js" type="text/javascript"></script> <br /><scriptsrc="script.js"></script> <br />
  7. 7. MARKUP & ELEMENTE<br />Schreibweise<br />HTML 4 und XHTML erlaubt<br /><HTML> <br /><html> <br /><Html><br /><br><br /><br /><br />
  8. 8. MARKUP & ELEMENTE<br />Obsolete Elemente<br />Frames<br />frame, frameset, noframes<br />PresentationalElements<br />font, big, center, strike, u, tt, s, xmp<br />Doppelte Elemente<br />acronym, applet, dir<br />Presentational Attributes<br />bgcolor, cellspacing, valign<br />
  9. 9. MARKUP & ELEMENTE<br />(Sinn-)Geänderte Elemente<br />smallKleingedrucktes<br />b Hervorhebung ohne extra Wichtigkeit <br />i alternative Bedeutung/Stimmung ohne extra Wichtigkeit <br />citeTitel eines Werkes, nicht der Person<br />
  10. 10. MARKUP & ELEMENTE<br />A Element – Heading, Sections & Grouping<br /><h1><a href="/cience">cience</a></h1><br /><p><a href="/cience">Wissensring</a></p><br /><a href="/cience"><br /> <h1>cience</h1><br /> <p>Wissensring</p><br /></a><br />
  11. 11. MARKUP & ELEMENTE<br />Text-Level Semantik<br /><p>Die <mark>7 Ringe</mark> der Station</p><br /><time datetime="17:00">17 Uhr</time><br /><time datetime="2010-08-13">13. August 2010</time><br /><time datetime="2010-08-13T17:00">17 Uhr am 13. August 2010</time><br />Attribut: pubdate = Veröffentlichungsdatum<br />
  12. 12. MARKUP & ELEMENTE<br />Text-Level Semantik<br /><meter>23 of 70</meter><br /><meterlow="-10"high=„30"<br />min="-40"max="50" optimum="25"value="19"><br />Sommer in Berlin<br /></meter><br />
  13. 13. MARKUP & ELEMENTE<br />Text-Level Semantik<br />Die Profil ist zu <progress>60%</progress> <br />Vollständig.<br /><progress min="10" max="100"value="60"><br />
  14. 14. MARKUP & ELEMENTE<br />Text-Level Semantik<br /><details open><br />Details zum Dokument oder Teilen davon<br /></details><br /><summary><br />Headerelement des Detail-Elements<br /></summary><br />
  15. 15. MARKUP & ELEMENTE<br />Text-Level Semantik<br /><ruby><br />Chinesische Anmerkung / Aussprache<br /></ruby><br /><rp>Browser kennt Ruby Element nicht</rp><br /><rt>Eigentliche Information</rt><br />
  16. 16. MARKUP & ELEMENTE<br />Struktur<br /><section><br /><h3>Tätigkeit des Circle</h3><br /> <p>…</p><br /> <time>1997-02-20</time><br /></section><br />Attribute: citefalls Zitat einer URL<br /><article>Blogpost oder Widget</article><br />Attribute: cite, pubdate<br />
  17. 17. MARKUP & ELEMENTE<br />Struktur<br /><h1>c-base Ringe</h1><br /><section><br /> <h1>clamp</h1><br /> <h1>carbon</h1><br /> <h1>cience</h1><br /></section><br /><small>Draufsicht</small><br />
  18. 18. MARKUP & ELEMENTE<br />Struktur<br /><hgroup><br /> <h1>carbon</h1><br /> <h2>Die Kohlenstoffeinheiten</h2><br /></hgroup><br />
  19. 19. MARKUP & ELEMENTE<br />Struktur<br /><header><br /> <h1>HTML5 Seminar</h1><br /></header><br /><footer><br /> <p>macro</p><br /> <p>Creative Commons Namensnennung 3.0 DE Lizenz</p><br /></footer><br />
  20. 20. MARKUP & ELEMENTE<br />Struktur<br /><aside><br /><p>Weiterführende Infos</p><br /></aside><br /><nav><br /><ul>Hauptnavigation<br /> <li>Startseite</li><br /></ul><br /></nav><br />
  21. 21. MARKUP & ELEMENTE<br />
  22. 22. MARKUP & ELEMENTE<br />Struktur<br /><figure><br />Diagramm, Abbildung<br /></figure><br /><figcaption><br />Bildunterschrift<br /></figcaption><br />
  23. 23. NEUE FORMULARELEMENTE<br />Datalist<br /> <input type="text" id=„r" name="r" list="7ringe"><br /> <datalistid="7ringe"><br /> <optionvalue="core"><br /> <optionvalue="com"><br /> <optionvalue="cult"><br /> <optionvalue="cience"><br /> </datalist><br />
  24. 24. NEUE FORMULARELEMENTE<br />Platzhalter Text<br /><input type="text" id="i" name="i" placeholder="sehr schön"><br />
  25. 25. NEUE FORMULARELEMENTE<br />Platzhalter Text – Abfrage des Elementes<br />functionelementSupportsAttribute(element,attribute) {<br />vartest = document.createElement(element);<br />if (attribute in test) {<br />returntrue;<br /> } else {<br />returnfalse;<br /> }<br />}<br />if(!elementSupportsAttribute("input","placeholder")) {<br />// Javascriptfallback<br />}<br />
  26. 26. NEUE FORMULARELEMENTE<br />Input Types<br /> <input type="search" id="a" name="a"><br /> <input type="email" id="b" name="b"><br /> <input type="url" id="c" name="c"><br /> <input type="tel" id="d" name="d"><br />
  27. 27. NEUE FORMULARELEMENTE<br />Input Types<br /><input type="range" id="e" name="e"><br /> <input type="range" id="e" name="e"min="1" max="5"><br /> <input type=“number" id="e" name="e" min="5" max="20"><br />
  28. 28. NEUE FORMULARELEMENTE<br />Input Types<br /><input type="date" id="d" name="d"> <br />date 2010-12-31<br />datetime2010-12-31T23:42:00+01<br />datetime-local2010-12-31T23:42:00<br />time 23:42:00<br />month2010-12<br />
  29. 29. NEUE FORMULARELEMENTE<br />Input Types<br />Reg Ex<br /><input id="zip" name="zip“<br /> pattern="[d]{5}(-[d]{4})"><br />Color picker<br /><input type="color" id="c" name="c"><br />
  30. 30. NEUE FORMULARELEMENTE<br />Command<br /><menu><br /> <commandonclick="undo()" label="Undo"/><br /> <commandonclick="redo()" label="Redo"/> <br /></menu><br />Attribute: type (command (default), checkbox, radio), label, icon(url), disabled, radiogroup, checked, title<br />
  31. 31. NEUE FORMULARELEMENTE<br />Keygen<br /><keygen><br />control for generating a public-private key pair and for submitting the public key from that key pair<br /></keygen><br />Attribute: autofocus, challenge, disabled, form, keytype, name<br />
  32. 32. NEUE FORMULARELEMENTE<br />Output<br /><output value="Ergebnis"for="input1" <br />id="o"name="o" /><br />Attribute: for (auf welche ID sich Output bezieht), form (Formularname)<br />
  33. 33. RICH MEDIA<br />SVG<br /><svg> <br /> <circleid="myCircle"cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('Kreis');"/> <br /></svg> <br />
  34. 34. RICH MEDIA<br />Audio<br /><audiosrc="sound.mp3" autoplayloop><br /></audio><br />Boolean attributes<br />Autoplay<br />== autoplay="no" <br />== autoplay="false"<br />== autoplay="autoplay" <br />
  35. 35. RICH MEDIA<br />Audio<br /><audiosrc="sound.mp3" controls><br /></audio><br />Buffering<br />preload="none" <br />preload="auto"<br />preload="metadata" <br />
  36. 36. RICH MEDIA<br />
  37. 37. RICH MEDIA<br />Audio – Die Formate<br /><audiocontrols><br /> <sourcesrc="sound.ogg" type="audio/ogg"><br /> <sourcesrc="sound.mp3" type="audio/mpeg"><br /> <objecttype="application/x-shockwave-flash" data="player.swf… ><br /><param … ><br /> <a href="sound.mp3">Download</a><br /> </object><br /></audio><br />
  38. 38. RICH MEDIA<br />Script API<br /><audiocontrolsid="player"><br /> <sourcesrc="files/sound.ogg" type="audio/ogg"><br /> <sourcesrc="files/sound.mp3" type="audio/mpeg"><br /></audio><br /><div><br /> <buttononclick="document.getElementById('player')<br />.play()"> PLAY </button><br /> <buttononclick="document.getElementById('player')<br />.pause()"> PAUSE </button><br /> <buttononclick="document.getElementById('player')<br />.volume+=0.1()"> LAUTER </button><br /> <buttononclick="document.getElementById('player')<br />.volume-=0.1()"> LEISER </button><br /></div><br />
  39. 39. RICH MEDIA<br />Video<br /><videosrc="movie.mp4" controlswidth="360" height="240" poster="startbild.jpg"><br /></video><br />
  40. 40. RICH MEDIA<br />Video – Die Formate<br /><videocontrolswidth="360" height="240" poster="startbild.jpg"><br /> <sourcesrc="movie.ogv" type="video/ogg"><br /> <sourcesrc="movie.mp4" type="video/mp4"><br /> <objecttype="application/x-shockwave-flash" data="player.swf… ><br /> <param … ><br /> <a href="movie.mp4">Download</a><br /> </object><br /></video><br />
  41. 41. RICH MEDIA<br />Canvas – Scriptable Bitmaps<br /><canvasid="c1" width="300" height="200"><br /><p>Kein canvas? Geh weg!</p><br /></canvas><br />varcanvas = document.getElementById("c1");<br />varcontext = canvas.getContext("2d");<br />context.fillStyle = "rgb(255,0,0)"; <br />context.fillRect(30, 30, 50, 50); <br />
  42. 42. RICH MEDIA<br />Canvas – Scriptable Bitmaps<br />Rechtecke<br />fillRect(x,y,Breite,Höhe);<br />strokeRect(x,y,Breite,Höhe);<br />clearRect(x,y,Breite,Höhe);<br />Pfade<br />beginPath();<br />closePath();<br />Stroke();<br />fill();<br />
  43. 43. RICH MEDIA<br />Canvas – Scriptable Bitmaps<br />Pfade<br />moveTo(x,y);<br />lineTo(x1,y1);<br />bezierCurveTo(x2a,y2a,x2,y2);<br />quadraticCurveTo(x2a,y2a,x2,y2);<br />arcs (x,y,r,W1,W2,Gegenuhrzeiger);<br />
  44. 44. RICH MEDIA<br />Canvas – Scriptable Bitmaps<br />Bilder erstellen, laden, verändern, speichern und exportieren<br />http://www.addyosmani.com/resources/canvasphoto/<br />Ausgangsbild: Bild auf der Seite, Image-Objekt, Canvas-Objekt <br />drawImage(Bild,x,y,…)-Methode<br />
  45. 45. RICH MEDIA<br />Canvas – Scriptable Bitmaps<br />Texte, Farbverläufe<br />Schatten, Spiegelungen<br />Bilder und Videos auslesen (Pixel per Pixel)<br />Linienstile u.v.m.<br />https://developer.mozilla.org/en/canvas_tutorial<br />http://canvas.quaese.de/<br />
  46. 46. RICH MEDIA<br />Canvas – Scriptable Bitmaps<br />http://www.chromeexperiments.com/<br />http://arandomurl.com/2010/07/25/html5-pacman.html<br />http://www.addyosmani.com/resources/canvasphoto/<br />http://29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag<br />
  47. 47. WEITERFÜHRENDES<br />Javascript APIs<br />Video & Audio Canvas<br />Drag & Drop Geolocation<br />Local Storage History<br />SelectorsInlineEditing<br />Server Events Messaging <br />Web Sockets Offline Apps<br />WebWorkers<br />
  48. 48. WEITERFÜHRENDES<br />Styling der neuen Eletmente<br />section, article, header, footer, nav, aside, hgroup<br /> { display:block; }<br />Internet Explorer<br />document.createElement('section');<br /><!- -[if IE]><br /> <script src=http://html5shiv.googlecode .com/svn/trunk/html5.js</script><br /><![endif]- -><br />
  49. 49. WEITERFÜHRENDES<br />ARIA – Accessible Rich Internet Applications<br /><p role="tooltip">Tooltip</p><br />P[role="tooltip"] {font-size:80%;}<br />http://www.w3.org/TR/wai-aria/roles#role_definitions<br />
  50. 50. WEITERFÜHRENDES<br />Validation<br />http://validator.nu<br />http://validator.w3.org<br />http://html5test.com/<br />Feature detection<br />http://www.modernizr.com<br />
  51. 51. WEITERFÜHRENDES<br />Über HTML5<br />http://adactio.com/jounal/tag/html5<br />http://html5doctor.com<br />http://css3-html5.de/<br />http://html5demos.com<br />Specs<br />http://whatwg.org/html5<br />
  52. 52. WEITERFÜHRENDES<br />Spenden nicht vergessen<br />

×