HTML5
INHALT1. Entstehung2. Generelle Ideen3. Markup & Elemente4. Neue Formularelemente5. Rich Media Einbindung6. Weiterführendes
Entstehung1991 Tim Berners-Lee „HTML Tags“IETF – Internet Engineering Task ForceW3C – World Wide Web Consortium
1999 HTML 4.01XHTML 1.0
EntstehungXHTML 2 – keine AbwärtskompabilitätSchisma im W3CGründung des WHATWGWeb Hypertext Application Technology Working Group
Ian HicksonWeb Forms 2.0 + Web Apps 1.0 = HTML5
2012 Candidate Recommendation
GENERELLE IDEENBestehende Inhalte werden unterstütztFehlerbehandlung für Browser wird definiertSo einfach wie möglich
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
MARKUP & ELEMENTEEinfaches Markup<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<meta charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="text/javascript"></script>
<script src="script.js"></script>
MARKUP & ELEMENTESchreibweiseHTML 4 und XHTML erlaubt<HTML> <html> <Html>
<br><br />
MARKUP & ELEMENTEObsolete ElementeFramesframe, frameset, noframes
Presentational Elementsfont, big, center, strike, u, tt, s, xmp
Doppelte Elementeacronym, applet, dir
Presentational Attributesbgcolor, cellspacing, valign
MARKUP & ELEMENTE(Sinn-)Geänderte Elemente
small Kleingedrucktesb Hervorhebung ohne extra Wichtigkeit i alternative Bedeutung/Stimmung ohne extra Wichtigkeit cite Titel eines Werkes, nicht der Person
MARKUP & ELEMENTEA Element – Heading, Sections & Grouping
<h1><a href="/cience">cience</a></h1><p><a href="/cience">Wissensring</a></p>
<a href="/cience"> <h1>cience</h1> <p>Wissensring</p></a>
MARKUP & ELEMENTEText-Level Semantik<p>Die <mark>7 Ringe</mark> der Station</p>
<time datetime="17:00">17 Uhr</time><time datetime="2010-08-13">13. August
2010</time><time datetime="2010-08-13T17:00">17 Uhr am
13. August 2010</time>
Attribut: pubdate = Veröffentlichungsdatum
MARKUP & ELEMENTEText-Level Semantik
<meter>23 of 70</meter>
<meter low="-10" high=„30" min="-40" max="50" optimum="25" value="19">Sommer in Berlin
</meter>
MARKUP & ELEMENTEText-Level Semantik
Die Profil ist zu <progress>60%</progress> Vollständig.
<progress min="10" max="100" value="60">
MARKUP & ELEMENTEText-Level Semantik<details open>
Details zum Dokument oder Teilen davon</details>
<summary>
Headerelement des Detail-Elements</summary>
MARKUP & ELEMENTEText-Level Semantik<ruby>
Chinesische Anmerkung / Aussprache</ruby>
<rp>Browser kennt Ruby Element nicht</rp><rt>Eigentliche Information</rt>
MARKUP & ELEMENTEStruktur<section>
<h3>Tätigkeit des Circle</h3><p>…</p>
<time>1997-02-20</time></section>Attribute: cite falls Zitat einer URL
<article>Blogpost oder Widget</article>Attribute: cite, pubdate
MARKUP & ELEMENTEStruktur
<h1>c-base Ringe</h1><section> <h1>clamp</h1>
<h1>carbon</h1><h1>cience</h1>
</section><small>Draufsicht</small>
MARKUP & ELEMENTEStruktur
<hgroup> <h1>carbon</h1>
<h2>Die Kohlenstoffeinheiten</h2></hgroup>
MARKUP & ELEMENTEStruktur
<header> <h1>HTML5 Seminar</h1></header>
<footer> <p>macro</p> <p>Creative Commons Namensnennung 3.0 DE Lizenz</p></footer>
MARKUP & ELEMENTEStruktur
<aside> <p>Weiterführende Infos</p></aside>
<nav> <ul>Hauptnavigation <li>Startseite</li> </ul></nav>
MARKUP & ELEMENTE
MARKUP & ELEMENTEStruktur<figure> Diagramm, Abbildung</figure>
<figcaption> Bildunterschrift</figcaption>
NEUE FORMULARELEMENTEDatalist <input type="text" id=„r" name="r"
list="7ringe">
<datalist id="7ringe"> <option value="core">
<option value="com"> <option value="cult">
<option value="cience"> </datalist>
NEUE FORMULARELEMENTEPlatzhalter Text
<input type="text" id="i" name="i" placeholder="sehr schön">
NEUE FORMULARELEMENTEPlatzhalter Text – Abfrage des Elementesfunction elementSupportsAttribute(element,attribute)
{ var test = document.createElement(element); if (attribute in test) { return true; } else { return false; }}if(!elementSupportsAttribute("input","placeholder"))
{ // Javascript fallback}
NEUE FORMULARELEMENTEInput Types <input type="search" id="a" name="a">
<input type="email" id="b" name="b"> <input type="url" id="c" name="c"> <input type="tel" id="d" name="d">
NEUE FORMULARELEMENTEInput Types <input type="range" id="e" name="e">
<input type="range" id="e" name="e" min="1" max="5">
<input type=“number" id="e" name="e" min="5" max="20">
NEUE FORMULARELEMENTEInput Types <input type="date" id="d" name="d">
date 2010-12-31datetime 2010-12-31T23:42:00+01datetime-local 2010-12-31T23:42:00time 23:42:00month 2010-12
NEUE FORMULARELEMENTEInput TypesReg Ex <input id="zip" name="zip“
pattern="[\d]{5}(-[\d]{4})">
Color picker <input type="color" id="c" name="c">
NEUE FORMULARELEMENTECommand<menu> <command onclick="undo()" label="Undo"/> <command onclick="redo()" label="Redo"/> </menu>
Attribute: type (command (default), checkbox, radio), label, icon(url), disabled, radiogroup, checked, title
NEUE FORMULARELEMENTEKeygen<keygen> control for generating a public-private key pair and for
submitting the public key from that key pair</keygen>
Attribute: autofocus, challenge, disabled, form, keytype, name
NEUE FORMULARELEMENTEOutput<output value="Ergebnis" for="input1"
id="o" name="o" />
Attribute: for (auf welche ID sich Output bezieht), form (Formularname)
RICH MEDIASVG<svg> <circle id="myCircle" cx="50%" cy="50%"
r="100" fill="url(#myGradient)" onmousedown="alert('Kreis');"/>
</svg>
RICH MEDIAAudio<audio src="sound.mp3" autoplay loop></audio>
Boolean attributesAutoplay == autoplay="no" == autoplay="false"== autoplay="autoplay"
RICH MEDIAAudio<audio src="sound.mp3" controls></audio>
Bufferingpreload="none" preload="auto"preload="metadata"
RICH MEDIA
RICH MEDIAAudio – Die Formate<audio controls> <source src="sound.ogg" type="audio/ogg"> <source src="sound.mp3" type="audio/mpeg"> <object type="application/x-shockwave-
flash" data="player.swf… > <param … > <a href="sound.mp3">Download</a> </object></audio>
RICH MEDIAScript API<audio controls id="player"> <source src="files/sound.ogg" type="audio/ogg"> <source src="files/sound.mp3" type="audio/mpeg"></audio><div> <button onclick="document.getElementById('player')
.play()"> PLAY </button> <button onclick="document.getElementById('player')
.pause()"> PAUSE </button> <button onclick="document.getElementById('player')
.volume+=0.1()"> LAUTER </button> <button onclick="document.getElementById('player')
.volume-=0.1()"> LEISER </button></div>
RICH MEDIAVideo<video src="movie.mp4" controls
width="360" height="240" poster="startbild.jpg">
</video>
RICH MEDIAVideo – Die Formate<video controls width="360" height="240"
poster="startbild.jpg"> <source src="movie.ogv" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <object type="application/x-shockwave-
flash" data="player.swf… > <param … > <a href="movie.mp4">Download</a> </object></video>
RICH MEDIACanvas – Scriptable Bitmaps<canvas id="c1" width="300" height="200"> <p>Kein canvas? Geh weg!</p></canvas>
var canvas = document.getElementById("c1");var context = canvas.getContext("2d");context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);
RICH MEDIACanvas – Scriptable BitmapsRechtecke
fillRect(x,y,Breite,Höhe);strokeRect(x,y,Breite,Höhe);clearRect(x,y,Breite,Höhe);
PfadebeginPath();closePath();Stroke();fill();
RICH MEDIACanvas – Scriptable BitmapsPfade
moveTo(x,y);lineTo(x1,y1);bezierCurveTo(x2a,y2a,x2,y2);quadraticCurveTo(x2a,y2a,x2,y2);arcs (x,y,r,W1,W2,Gegenuhrzeiger);
RICH MEDIACanvas – Scriptable BitmapsBilder erstellen, laden, verändern, speichern
und exportierenhttp://www.addyosmani.com/resources/canvasphoto/
Ausgangsbild: Bild auf der Seite, Image-Objekt, Canvas-Objekt
drawImage(Bild,x,y,…)-Methode
RICH MEDIACanvas – Scriptable BitmapsTexte, FarbverläufeSchatten, SpiegelungenBilder und Videos auslesen (Pixel per Pixel)Linienstile u.v.m.https://developer.mozilla.org/en/canvas_tutorialhttp://canvas.quaese.de/
RICH MEDIACanvas – Scriptable Bitmapshttp://www.chromeexperiments.com/http://arandomurl.com/2010/07/25/html5-pacman.htmlhttp://www.addyosmani.com/resources/canvasphoto/http://
29a.ch/2010/3/24/normal-mapping-with-javascript-and-canvas-tag
WEITERFÜHRENDESJavascript APIsVideo & Audio CanvasDrag & Drop GeolocationLocal Storage HistorySelectors Inline EditingServer Events MessagingWeb Sockets Offline AppsWebWorkers
WEITERFÜHRENDESStyling der neuen Eletmentesection, article, header, footer, nav, aside,
hgroup { display:block; }
Internet Explorer document.createElement('section');<!- -[if IE]> <script src=
http://html5shiv.googlecode .com/svn/trunk/html5.js</script>
<![endif]- ->
WEITERFÜHRENDESARIA – Accessible Rich Internet Applications
<p role="tooltip">Tooltip</p>
P[role="tooltip"] {font-size:80%;}
http://www.w3.org/TR/wai-aria/roles#role_definitions
WEITERFÜHRENDESValidationhttp://validator.nuhttp://validator.w3.org
http://html5test.com/
Feature detectionhttp://www.modernizr.com
WEITERFÜHRENDESÜber HTML5http://adactio.com/jounal/tag/html5http://html5doctor.comhttp://css3-html5.de/http://html5demos.com
Specshttp://whatwg.org/html5
WEITERFÜHRENDES
Spenden nicht vergessen
Top Related