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>


<hgroup> <h1>carbon</h1>

<h2>Die Kohlenstoffeinheiten</h2></hgroup>


<header> <h1>HTML5 Seminar</h1></header>

<footer> <p>macro</p> <p>Creative Commons Namensnennung 3.0 DE Lizenz</p></footer>


<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

http://www.addyosmani.com/resources/canvasphoto/

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/

https://developer.mozilla.org/en/canvas_tutorial

https://developer.mozilla.org/en/canvas_tutorial

http://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

http://www.chromeexperiments.com/

http://www.chromeexperiments.com/

http://arandomurl.com/2010/07/25/html5-pacman.html

http://arandomurl.com/2010/07/25/html5-pacman.html

http://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]- ->

http://html5shiv.googlecode.com/svn/trunk/html5.js



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

http://validator.nu/

http://validator.w3.org/



http://www.modernizr.com/

WEITERFÜHRENDESÜber HTML5http://adactio.com/jounal/tag/html5http://html5doctor.comhttp://css3-html5.de/http://html5demos.com

Specshttp://whatwg.org/html5

http://adactio.com/jounal/tag/html5

http://html5doctor.com/

http://css3-html5.de/



http://html5demos.com/

http://whatwg.org/html5

WEITERFÜHRENDES

Spenden nicht vergessen

Html5

Documents

Transcript of Html5