Html5

INHALT Entstehung Generelle Ideen Markup & Elemente Neue Formularelemente Rich Media Einbindung Weiterführendes

Entstehung 1991 Tim Berners-Lee „HTML Tags“ IETF – Internet Engineering Task Force W3C – World Wide Web Consortium 1999 HTML 4.01 XHTML 1.0

Entstehung XHTML 2 – keine Abwärtskompabilität Schisma im W3C Gründung des WHATWG Web Hypertext Application Technology Working Group Ian Hickson Web Forms 2.0 + Web Apps 1.0 = HTML5 2012 CandidateRecommendation

GENERELLE IDEEN Bestehende Inhalte werden unterstützt Fehlerbehandlung für Browser wird definiert So 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 & ELEMENTE Einfaches Markup <metahttp-equiv="content-type" content="text/html; charset=UTF-8"> <metacharset=UTF-8"> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" href="styles.css"> <scriptsrc="script.js" type="text/javascript"></script> <scriptsrc="script.js"></script>

MARKUP & ELEMENTE Schreibweise HTML 4 und XHTML erlaubt <HTML> <html> <Html> <br> <br />

MARKUP & ELEMENTE Obsolete Elemente Frames frame, frameset, noframes PresentationalElements font, big, center, strike, u, tt, s, xmp Doppelte Elemente acronym, applet, dir Presentational Attributes bgcolor, cellspacing, valign

MARKUP & ELEMENTE (Sinn-)Geänderte Elemente smallKleingedrucktes b Hervorhebung ohne extra Wichtigkeit i alternative Bedeutung/Stimmung ohne extra Wichtigkeit citeTitel eines Werkes, nicht der Person

MARKUP & ELEMENTE A 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 & ELEMENTE Text-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 & ELEMENTE Text-Level Semantik <meter>23 of 70</meter> <meterlow="-10"high=„30" min="-40"max="50" optimum="25"value="19"> Sommer in Berlin </meter>

MARKUP & ELEMENTE Text-Level Semantik Die Profil ist zu <progress>60%</progress> Vollständig. <progress min="10" max="100"value="60">

MARKUP & ELEMENTE Text-Level Semantik <details open> Details zum Dokument oder Teilen davon </details> <summary> Headerelement des Detail-Elements </summary>

MARKUP & ELEMENTE Text-Level Semantik <ruby> Chinesische Anmerkung / Aussprache </ruby> <rp>Browser kennt Ruby Element nicht</rp> <rt>Eigentliche Information</rt>

MARKUP & ELEMENTE Struktur <section> <h3>Tätigkeit des Circle</h3> <p>…</p> <time>1997-02-20</time> </section> Attribute: citefalls Zitat einer URL <article>Blogpost oder Widget</article> Attribute: cite, pubdate

MARKUP & ELEMENTE Struktur <h1>c-base Ringe</h1> <section> <h1>clamp</h1> <h1>carbon</h1> <h1>cience</h1> </section> <small>Draufsicht</small>

MARKUP & ELEMENTE Struktur <hgroup> <h1>carbon</h1> <h2>Die Kohlenstoffeinheiten</h2> </hgroup>

MARKUP & ELEMENTE Struktur <header> <h1>HTML5 Seminar</h1> </header> <footer> <p>macro</p> <p>Creative Commons Namensnennung 3.0 DE Lizenz</p> </footer>

MARKUP & ELEMENTE Struktur <aside> <p>Weiterführende Infos</p> </aside> <nav> <ul>Hauptnavigation <li>Startseite</li> </ul> </nav>

MARKUP & ELEMENTE Struktur <figure> Diagramm, Abbildung </figure> <figcaption> Bildunterschrift </figcaption>

NEUE FORMULARELEMENTE Datalist <input type="text" id=„r" name="r" list="7ringe"> <datalistid="7ringe"> <optionvalue="core"> <optionvalue="com"> <optionvalue="cult"> <optionvalue="cience"> </datalist>

NEUE FORMULARELEMENTE Platzhalter Text <input type="text" id="i" name="i" placeholder="sehr schön">

NEUE FORMULARELEMENTE Platzhalter Text – Abfrage des Elementes functionelementSupportsAttribute(element,attribute) { vartest = document.createElement(element); if (attribute in test) { returntrue; } else { returnfalse; } } if(!elementSupportsAttribute("input","placeholder")) { // Javascriptfallback }

NEUE FORMULARELEMENTE Input 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 FORMULARELEMENTE Input 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 FORMULARELEMENTE Input Types <input type="date" id="d" name="d"> date 2010-12-31 datetime2010-12-31T23:42:00+01 datetime-local2010-12-31T23:42:00 time 23:42:00 month2010-12

NEUE FORMULARELEMENTE Input Types Reg Ex <input id="zip" name="zip“ pattern="[]{5}(-[]{4})"> Color picker <input type="color" id="c" name="c">

NEUE FORMULARELEMENTE Command <menu> <commandonclick="undo()" label="Undo"/> <commandonclick="redo()" label="Redo"/> </menu> Attribute: type (command (default), checkbox, radio), label, icon(url), disabled, radiogroup, checked, title

NEUE FORMULARELEMENTE Keygen <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 FORMULARELEMENTE Output <output value="Ergebnis"for="input1" id="o"name="o" /> Attribute: for (auf welche ID sich Output bezieht), form (Formularname)

RICH MEDIA SVG <svg> <circleid="myCircle"cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('Kreis');"/> </svg>

RICH MEDIA Audio <audiosrc="sound.mp3" autoplayloop> </audio> Boolean attributes Autoplay == autoplay="no" == autoplay="false" == autoplay="autoplay"

RICH MEDIA Audio <audiosrc="sound.mp3" controls> </audio> Buffering preload="none" preload="auto" preload="metadata"

RICH MEDIA Audio – Die Formate <audiocontrols> <sourcesrc="sound.ogg" type="audio/ogg"> <sourcesrc="sound.mp3" type="audio/mpeg"> <objecttype="application/x-shockwave-flash" data="player.swf… > <param … > <a href="sound.mp3">Download</a> </object> </audio>

RICH MEDIA Script API <audiocontrolsid="player"> <sourcesrc="files/sound.ogg" type="audio/ogg"> <sourcesrc="files/sound.mp3" type="audio/mpeg"> </audio> <div> <buttononclick="document.getElementById('player') .play()"> PLAY </button> <buttononclick="document.getElementById('player') .pause()"> PAUSE </button> <buttononclick="document.getElementById('player') .volume+=0.1()"> LAUTER </button> <buttononclick="document.getElementById('player') .volume-=0.1()"> LEISER </button> </div>

RICH MEDIA Video <videosrc="movie.mp4" controlswidth="360" height="240" poster="startbild.jpg"> </video>

RICH MEDIA Video – Die Formate <videocontrolswidth="360" height="240" poster="startbild.jpg"> <sourcesrc="movie.ogv" type="video/ogg"> <sourcesrc="movie.mp4" type="video/mp4"> <objecttype="application/x-shockwave-flash" data="player.swf… > <param … > <a href="movie.mp4">Download</a> </object> </video>

RICH MEDIA Canvas – Scriptable Bitmaps <canvasid="c1" width="300" height="200"> <p>Kein canvas? Geh weg!</p> </canvas> varcanvas = document.getElementById("c1"); varcontext = canvas.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);

RICH MEDIA Canvas – Scriptable Bitmaps Rechtecke fillRect(x,y,Breite,Höhe); strokeRect(x,y,Breite,Höhe); clearRect(x,y,Breite,Höhe); Pfade beginPath(); closePath(); Stroke(); fill();

RICH MEDIA Canvas – Scriptable Bitmaps Pfade moveTo(x,y); lineTo(x1,y1); bezierCurveTo(x2a,y2a,x2,y2); quadraticCurveTo(x2a,y2a,x2,y2); arcs (x,y,r,W1,W2,Gegenuhrzeiger);

RICH MEDIA Canvas – Scriptable Bitmaps Bilder erstellen, laden, verändern, speichern und exportieren http://www.addyosmani.com/resources/canvasphoto/ Ausgangsbild: Bild auf der Seite, Image-Objekt, Canvas-Objekt drawImage(Bild,x,y,…)-Methode

RICH MEDIA Canvas – Scriptable Bitmaps Texte, Farbverläufe Schatten, Spiegelungen Bilder und Videos auslesen (Pixel per Pixel) Linienstile u.v.m. https://developer.mozilla.org/en/canvas_tutorial http://canvas.quaese.de/

RICH MEDIA Canvas – Scriptable Bitmaps http://www.chromeexperiments.com/ 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ÜHRENDES Javascript APIs Video & Audio Canvas Drag & Drop Geolocation Local Storage History SelectorsInlineEditing Server Events Messaging Web Sockets Offline Apps WebWorkers

WEITERFÜHRENDES Styling der neuen Eletmente section, 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ÜHRENDES ARIA – 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ÜHRENDES Validation http://validator.nu http://validator.w3.org http://html5test.com/ Feature detection http://www.modernizr.com

WEITERFÜHRENDES Über HTML5 http://adactio.com/jounal/tag/html5 http://html5doctor.com http://css3-html5.de/ http://html5demos.com Specs http://whatwg.org/html5

WEITERFÜHRENDES Spenden nicht vergessen

Html5

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (7)

Html5