HTML5 Übersicht

  • 14,062 views
Uploaded on

Übersicht HTML5

Übersicht HTML5

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
14,062
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
56
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • das Web hat sich seit 1999, als HTML4/XHTML1 entwickelt wurde, grundlegend verändert. Aus einem Web von statischen Dokumenten wurden hochkomplexe Applikationen, für die aber kaum semantisches Fundament vorhanden ist. Das soll sich in HTML5 ändern.
    Die Entwicklung begann bei der WHATWG, einer Gruppe von Browserherstellern, die mit dem W3C-Prozess nicht einverstanden waren. Dort wurde der (zu vorigen (X)HTML-Versionen inkompatible) XHTML2-Standard entwickelt, der aber auf keinerlei Akzeptanz bei den Browserherstellern stieß. 2006 sah das W3C ein, dass HTML5 eine gute Sache ist und reaktivierte die alte HTML-Arbeitsgruppe. Beide Organisationen existieren heute nebeneinander und arbeiten an einer gemeinsamen Spezifikation, Editor Ian Hickson (Google) sammelt die Vorschläge und führt sie zusammen.
  • Unterstütze existierende Inhalte: Parser (nicht Autoren!) sollen mit alten, aber dennoch existierenden Techniken umgehen können, auch wenn sie nicht in HTML5 festgelegt sind. So werden bspw. fehlerhaft verschachtelte Elemente (<b>a<i>b</b>c</i>) genauso unterstützt wie Elemente, die nicht mehr zum Standard gehören (<u> etwa).
    Graceful degradation (etwa: „Schrittweises Zurückfallen“): Wird eine Komponente in HTML5 nicht von einem Browser unterstützt, so darf das nicht dazu führen, dass die gesamte Webseite unzugänglich wird. Beispiel: Das (vorgeschlagene) irrelevant-Attribut kann per CSS emuliert werden: [irrelevant] {display:none;}
    Das Rad nicht neu erfinden: Wenn es schon eine weit verbreitete und implementierte Technik gibt, dann sollte sie übernommen werden statt etwas komplett neues zu entwickeln. Beispiel: contenteditable="" (um Bereiche der Seite bearbeitbar zu machen) ist bereits in vielen Browsern vorhanden und wird daher übernommen.
    Paving the Cowpaths (etwa: „Trampelpfade pflastern“): Wenn es schon weit verbreitete Techniken gibt, dann sollte in Erwägung gezogen werden diese zu nutzen. Beispiel: <br /> kommt oft in HTML statt <br> vor und es schadet niemandem, wenn man die Nutzung erlaubt.
    Evolution statt Revolution: HTML5 entwickelt (X)HTML weiter und wirft altbekannte Grundsätze nicht weg. Das bedeutet, dass Webentwickler nichts komplett neues erlernen müssen, sondern nach und nach neue Features einbauen können. Das gilt natürlich auch für die Hersteller von Browsern.
  • Nein. HTML5 verfügt über beide Serialisationen (Schreibweisen), kann also sowohl als X(HT)ML als auch als HTML geschrieben und interpretiert werden. Wichtig ist: Beide verfügen nach dem Parsen über den selben DOM-Baum. Es wird also tendenziell einfacher JavaScripts für HTML und XHTML zu schreiben.
    Der DOM-Baum von HTML4 und XHTML1-Dokumenten konnte zuvor trotz gleicher Schreibweise unterschiedlich sein. Bei einem HTML4-Dokument wird zum Beispiel bei folgender Tabelle ein <tbody> explizit in das DOM eingefügt, bei XHTML nicht:
    <table><tr><td>Text</td></tr></table>
    Das bedeutet, dass CSS wie table > tr > td in HTML4 keine Wirkung zeigt.
    Zum anderen erlaubt HTML5 ausdrücklich die Nutzung der XML-Syntax für Elemente ohne End-Tag: <img … /> führt nicht mehr zu Validierungsfehlern, auch wenn man ein HTML-Dokument benutzt.
  • Viele Webdesigner beginnen ihre Entwürfe mit der Entwicklung eines Wireframes (Drahtgitter, Gittermodell). Damit wird ein sehr früher konzeptueller Prototyp einer Website bezeichnet, der die wichtigsten Bereiche wie Header, Navigation, Spaltenraster und Footer schematisch darstellt, häufig in Form verschiedenfarbiger oder in verschiedenen Grautönen abgestufter Kästen. Dabei reicht es aus, den grundlegenden konzeptuellen Entwurf nur sehr rudimentär abzubilden, um die Platzierung der einzelnen Bereiche zu verdeutlichen, und anschließend Schritt für Schritt zu verfeinern. Abbildung 1 zeigt, wie ein Wireframe in einem fortgeschrittenen Stadium aussehen könnte.Abb. 1: Ein Wireframe veranschaulicht Größe, Position und Wirkung der Hauptelemente einer Website
    Webautoren gehen so ähnlich vor, wenn sie beginnen, das Markup für eine Webseite aufzubauen. Auch sie arbeiten sich von außen nach innen vor. Am Anfang steht die Auszeichnung der groben Struktur, deren Inhalte im Anschluss Schritt für Schritt ausgezeichnet werden. In Ermangelung geeigneter Elemente für Seitenbereiche wie Header, Logo, Suche, Hauptmenü, Seitenspalte oder Footer greifen Webautoren auf div-Elemente zurück und vergeben geeignete Bezeichner und Klassen. Ein solches »Grundskelett« einer Website zeigt Listing 1.
  • Sektionen: Der Elementtyp section
    Das Element section zeichnet eine Sektion in einem Dokument oder einer Web-Applikation aus.
    Eine Sektion ist eine Gruppe von Elementen, die thematisch zusammengehören. Beispiele dafür sind Abschnitte eines Textes, einzelne Register (Tabs) in einer registerbasierten Benutzeroberfläche oder einzelne Bereiche einer Website wie die Einleitung, der Newsbereich oder Kontaktinformationen. Sektionen enthalten häufig eine Überschrift und gelegentlich einen Footer, der (sichtbare) Metainformationen zur Sektion enthält.
    Sektionen eignen sich dazu, Inhalte und deren Überschriften in einem gemeinsamen Element zusammenzufassen. Das geht in HTML5 über die reine Auzeichnungsebene hinaus; dazu später mehr. section ist kein semantisch leeres, bedeutungsloses Element; ebenso wenig wie die anderen in diesem Artikel vorgestellten Elemente. Wer einen Container benötigt, um Elemente fürs Styling zusammenzufassen, der sollte weiterhin div verwenden.
    Kopfbereiche: Der Elementtyp header
    Das Element header definiert den »Kopfbereich« einer Webseite oder eines Sektionselements.
    Als Auszeichnung des Kopfbereichs einer Webseite enthält es Elemente wie die Hauptüberschrift, das Logo, das Suchfeld oder die Hauptnavigation. Innerhalb eines Sektionselements enthält es Überschriften oder Elemente wie das Inhaltsverzeichnis oder die Einleitung der Sektion.
  • Das Element nav zeichnet einen Bereich mit Navigationslinks aus, entweder mit Links zu anderen Seiten oder zu Sprungankern innerhalb derselben Seite.
    Webautoren sollten nicht jede Gruppe von Links mit nav auszeichnen, sondern nur zentrale Navigationsbereiche wie das Haupt- und das Bereichsmenü. Typischerweise enthält das nav-Element Listen, welche die Navigation repräsentieren.
  • Das Element article zeichnet einen inhaltlich eigenständigen Bereich auf einer Webseite aus, der zwar im Kontext der Seite steht, aber für sich unabhängig ist.
    Ein Inhalt ist dann eigenständig, wenn er auch außerhalb der Seite für sich allein Sinn ergibt, beispielsweise wenn er in einem anderen Kontext wiedergeben oder in einem Portal als eigenständige Komponente dargestellt wird. Das kann ein Weblog-Eintrag sein, ein Artikel, ein Forumsbeitrag oder ein interaktives Widget.
  • Das Element aside enthält erläuternde und weiterführende Informationen, welche die Hauptinhalte ergänzen.
    Gute Beispiele für den richtigen Einsatz dieses Elements sind Marginalien mit Definitionen oder Erläuterungen, Querverweise zu anderen relevanten Ressourcen oder Kästen mit Hintergrundinformationen, aber häufig wird aside auch einfach zur Auszeichnung von Randspalten mit Navigationsbereichen, Kommentaren etc. verwendet werden. In einem Artikel über Webstandards und das diesbezügliche Engagement der Webkrauts könnten wir wie folgt vorgestellt werden.
  • Das Element footer enthält sichtbare Metainformationen über eine Webseite oder ein Sektionselement.
    Typische Inhalte sind Informationen darüber, wer den Inhalt der Seite oder Sektion verfasst hat (wobei diese mit address ausgezeichnet werden), oder Links zu anderen Dokumenten, beispielsweise das Impressum oder Angaben zum Datenschutz. Der Footer muss nicht unbedingt am Ende der Sektion stehen, aber üblicherweise tut er das (daher der Name). footer-Elemente können section-Elemente enthalten, um die Inhalte zu unterteilen.
  • Aktuelle Versionen von Opera, Safari und Firefox stellen alle in diesem Artikel vorgestellten Elemente wie gewünscht dar. Lediglich ein
    article, aside, footer, header, hgroup, nav, section
    { display: block; }
    ist notwendig, damit die neuen Elemente sich so verhalten, wie man es erwarten könnte. Ältere Browser haben allerdings einige Probleme.
    Firefox 2 (und jeder andere Browser mit einer Gecko-Version kleiner als 1.9b5) schließt unbekannte Elemente, sobald er auf ein Blockelement stößt wie p, h1, div und so weiter. Auf diese Browser brauchen Webentwickler allerdings heute nicht mehr zu achten. Die Mozilla Foundation hat die Unterstützung für Firefox 2 mittlerweile eingestellt – und auch wir sollten das tun.
    Im Internet Explorer gibt es ein ähnliches Problem, und das zieht sich durch sämtliche Versionen, die heute noch relevant sind – leider sind das alle Versionen bis hinab zum IE 6. Der IE schließt unbekannte Elemente stets sofort, ganz gleich, welches Element dem unbekannten Element nachfolgt.
    Im DOM (Document Object Model) dieser Browser wird aus
    <section class="sektion">
    <h1>Foo</h1>

    <p>Bar</p>
    </section>

    <p>Baz</p>
    folgendes:
    <section class="sektion"></section>
    <h1>Foo</h1>
    <p>Bar</p>
    </section><//section>
    <p>Baz</p>
    <section> und </section>; werden also nicht als öffnenden und schließenden Tag eines Elements erkannt, sondern in beiden Fällen als Start-Tag eines eigenen Elements, dem jeweils ein schließender Tag hinzugefügt wird. So entsteht <//section> als schließendes Tag für </section>. Aus Container-Elementen, die sich per CSS stylen oder per Scripting ansprechen lassen, werden so leere Elemente, mit denen Webautoren nichts mehr anfangen können.
    Dieses Problem können Webautoren nicht ignorieren. Peter Kröner schlägt daher in einem lesenswerten Artikel einige Workarounds vor.
    Die beste Lösung stellt dabei das HTML5 enabling script von Remy Sharp dar. Darüber kann jedes (unbekannte) Element beim Browser per JavaScript angemeldet werden. Für das section-Element sieht das beispielsweise so aus:
    document.createElement('section');
    Die angemeldeten Elemente werden dann wie bekannte Elemente behandelt, d.h. Webautoren können mit ihnen in allen Belangen arbeiten. Das HTML5 enabling script meldet alle neuen HTML5-Elemente an und wird im Gleichschritt mit dem HTML5-Entwurf aktualisiert. Gewissenhafte Webautoren sehen jedoch sofort das Problem an dieser Methode: Wenn im Browser JavaScript nicht aktiviert ist, funktioniert das Skript und somit vermutlich die gesamte Website nicht. Im professionellen Einsatz ist diese Methode folglich untauglich, da es schlichtweg schlechter Stil ist, aktiviertes JavaScript vorauszusetzen.

Transcript

  • 1. HTML5 / CSS3 eine Einführung EB RAUTS | Marcus Hofbauer, Teamleader pixelpoint multimedia
  • 2. Moderne Semantik
  • 3. HTML5 wird der neue Markup-Standard Was steckt dahinter?
  • 4. Weshalb wurde HTML5 entwickelt?
  • 5. • das Web hat sich seit der Entwicklung von HTML4/XHTML1 grundlegend verändert • statische Dokumente werden zu komplexen Applikationen • semantisches Fundament fehlt • HTML5 soll das ändern • Entwicklung begann bei WHATWG • 2006 reaktiviert W3C die alte HTML-Arbeitsgruppe • beide Organisationen arbeiten an gemeinsamer Spezifikation • Editor Ian Hickson (google) sammelt und fürht Vorschläge zusammen
  • 6. Prinzipen und Ziele der HTML5-Entwicklung
  • 7. 1. Unterstütze existierende Inhalte 2. Graceful degradation (etwa: „Schrittweises Zurückfallen“) 3. Das Rad nicht neu erfinden 4. Paving the Cowpaths (etwa: „Trampelpfade pflastern“) 5. Evolution statt Revolution
  • 8. Muss ich jetzt HTML statt XHTML schreiben?
  • 9. Nein! Es sind beide Serialisationen (Schreibweisen) möglich Wichtig! Beide haben selben DOM HTML5 erlaubt XML Syntax für Elemente ohne End-Tag: <img … /> Bsp: Unterschiedlicher DOM bei HTML4 und XHTML HTML4 - bei einer Tabelle wird explizit <tbody> in das DOM eingefügt in XHTML nicht <table><tr><td>Text</td></tr></table> in HTML4 zeigt das CSS table > tr > td bei keine Wirkung
  • 10. Das Endoskelett einer Webseite
  • 11. Wireframe Grundskelett einer Website mit div-Suppe <body> <div id="header"> <div id="logo">Logo</div> <div id="search">Suche</div> <div id="nav">Hauptmenü</div> </div> <div id="content"> <h1>Hauptbereich</h1> <div class="section"> <h2>Sektion</h2> <h3>Abschnitt</h3> <!-- Content --> </div> <div class="section"> <h2>Sektion</h2> <!-- Content --> </div> </div> Abb. Ein Wireframe veranschaulicht Größe, Position und Wirkung <div id="sidebar"> der Hauptelemente einer Website <div id="subnav">Bereichsmenü</div> </div> <div id="footer">Footer</div> </body>
  • 12. Neue Elementtypen und neue Konzepte
  • 13. Neue Sektionselemente: header, nav, article, section, aside, footer <body> <body> <div id="header"> <header> <div id="logo">Logo</div> <div id="logo">Logo</div> <div id="search">Suche</div> <div id="search">Suche</div> <div id="nav">Hauptmenü</div> <nav>Hauptmenü</nav> </div> </header> <div id="content"> <article> <h1>Hauptbereich</h1> <h1>Hauptbereich</h1> <div class="section"> <section> <h2>Sektion</h2> <h2>Sektion</h2> <h3>Abschnitt</h3> <h3>Abschnitt</h3> <!-- Content --> <!-- Content --> </div> </section> <div class="section"> <section> <h2>Sektion</h2> <h2>Sektion</h2> <!-- Content --> <!-- Content --> </div> </section> </div> </article> <div id="sidebar"> <aside> <div id="subnav">Bereichsmenü</div> <nav>Bereichsmenü</nav> </div> </aside> <div id="footer">Footer</div> <footer>Footer</footer> </body> </body> Grundskelett einer Website mit div-Suppe Grundskelett einer Website HTML5
  • 14. Sektionen: Der Elementtyp section • Zeichnet eine Sektion aus • eine Sektion ist eine Gruppe von Elementen die thematisch zusammengehören -z.B. Inhalte und dazugehörige Überschriften zusammenfassen • ist semantisch nicht leer bzw. bedeutungslos • zur Zusammenfassung von Elementen fürs Styling div verwenden Kopfbereich: Der Elementtyp header • definiert „Kopfbereich“ einer Webseite oder einer Sektion
  • 15. Navigationsbereich: Der Elementtyp nav • Zeichnet einen Bereich mit Navigationslinks aus • Nur Haupt- und Bereichsmenüs auszeichnen <nav> <h2>Navigation</h2> <ul> <li class="home"><strong title="Hier befinden Sie sich gerade.">Startseite</strong></li> <li><a href="/adventskalender/">Adventskalender</a></li> <li><a href="/mission-statement/">Mission Statement</a></li> <li><a href="/linkliste/">Linkliste</a></li> <li><a href="/krautcosmos/">KrautCosmos </a></li> <li><a href="/impressum/">Impressum</a></li> </ul> </nav> Navigationsbereich mit Hauptmenü
  • 16. Eigenständige Bereiche: Der Elementtyp article • Zeichnet inhaltlich eigenständige Bereiche einer Webseite aus <article> <header> <h1>Frontendentwicklung ist nicht einfach!</h1> <p class="postmetadata">31. Juli 2009 | Abgelegt in <a href="/category/artikel/" rel="category tag">Artikel</a> | Tags: <a href="/tag/css/">CSS</a>, <a href="/tag/html/">HTML</a></p> </header> <p>»Aber CSS ist doch einfach!« Man könnte stattdessen auch »Frontendentwicklung« oder »HTML« setzen. (...) Lasst es Euch nicht einreden: Frontendentwicklung ist nicht einfach, sondern eine ständige Herausforderung!</p> <section> <h2>1 Kommentar</h2> <p>Du kannst einen Kommentar hinterlassen oder einen Trackback auf deiner Website einrichten.</p> <article id="comment-42"> <header> <h3><cite>Kommentar von Max Mustermann</cite></h3> <p class="commentmetadata">02. August 2009</p> </header> <p>Toller Artikel! Danke!</p> </article> </section> </article> Auszeichnung eines Kommentars als verschachteltes article-Element
  • 17. Marginalien und Randbereiche: Der Elementtyp aside • enthält erläuternde und weiterführende Informationen als Ergänzung zum Hauptinhalt <aside> <h1>Webkrauts Mission Statement</h1> <p>Die Webkrauts setzen sich dafür ein, die Vorteile der Webstandards auch im deutschsprachigen Raum stärker zur Geltung zu bringen.</p> <p>Sie leisten Aufklärungsarbeit durch Veröffentlichungen im Netz und in anderen Medien.</p> </aside> Informationen über die Webkrauts als erläuternder Kasten
  • 18. Fußbereiche: Der Elementtyp footer • enthält sichtbare Metainformationen einer Webseite oder eines Sektionselementes <footer> <section> <h1>Systemlinks</h1> <ul> <li><a href="/login/">Anmelden</a></li> <li><a href="/login/?action=register"> Registrieren</a></li> </ul> </section> <section> <h1>Lizenzbestimmungen</h1> <p>© Webkrauts 2005-2009. Alle Rechte vorbehalten.</p> </section> </footer> Systemlinks und Copyrighthinweise gehören in footer-Elemente
  • 19. Und die Browser? Einsatz der neuen Elemente
  • 20. • Aktuelle Versionen von Opera, Safari und Firefox stellen alle vorgestellten Elemente wie gewünscht dar • CSS Anweisung notwendig: article, aside, footer, header, hgroup, nav, section { display: block; } • Ältere Browser haben allerdings einige Probleme. • Firefox 2 (und jeder andere Browser mit einer Gecko-Version kleiner als 1.9b5) schließt unbekannte Elemente, sobald er auf ein Blockelement stößt wie p, h1, div und so weiter. • Im Internet Explorer gibt es ein ähnliches Problem, und das zieht sich durch sämtliche Versionen, die heute noch relevant sind – bis IE6 <section class="sektion"> <h1>Foo</h1> <section class="sektion"></section> <h1>Foo</h1> <p>Bar</p> <p>Bar</p> </section> </section><//section> <p>Baz</p> <p>Baz</p> • Die beste Lösung stellt dabei das HTML5 enabling script von Remy Sharp dar. document.createElement('section');
  • 21. Sehen und Hören
  • 22. Element <video>
  • 23. Native Einbindung von Filmen in Webseiten Browser Unterstützung: • Firefox ab Version 3.5, • Safari ab 3.2, • Google Chrome Browser (Version 3.x). • Opera hat für Version 10.1 eine Unterstützung angekündigt. • Redmonder Browser (IE) bleiben augenblicklich komplett außen vor. Codecs und Formate • Mozilla Foundation und Opera ausschließlich Ogg Media Container(.ogg, .ogv) und den Theora Video Codec • Apple's Safari H.264 Codec (.mp4, .mp4v) • Google Browser Chrome unterstützt beide • Redmond schweigt Einbindung <video src="sample.ogg" controls> <video src="sample.mp4" controls> Ihr Browser unterstützt das Element Ihr Browser unterstützt das Element <code>video</code> nicht <code>video</code> nicht oder erkennt das Format der Datei nicht. oder erkennt das Format der Datei nicht. </video> </video>
  • 24. Element <audio>
  • 25. Native Einbindung von Filmen in Webseiten Browser Unterstützung: • Firefox ab Version 3.5, • Safari ab 3.2, • Google Chrome Browser (Version 3.x). • Opera hat für Version 10.1 eine Unterstützung angekündigt. • Redmonder Browser (IE) bleiben augenblicklich komplett außen vor. Codecs und Formate • Mozilla Foundation und Opera ausschließlich Ogg Media Container(.ogg) und Vorbis Audio Codec, Wave (.wav) • Apple's Safari MPEG-1, Audio Layer 3 Format (.mp3), Wave (.wav) • Google Browser Chrome unterstützt beide • Redmond schweigt Einbindung <audio controls> <source src="sample-audio.ogg" type="audio/ogg" /> <source src="sample-audio.mp3" type="audio/mpeg" /> Ihr Browser unterstützt das Element <code>audio</code> nicht oder beide Formate (Ogg/Vorbis, MPEG3) der Audiodatei(en) sind unbekannt. </audio>
  • 26. Malen nach Zahlen: <canvas>
  • 27. •ermöglicht Zeichenoperationen, mit Hilfe derer wir (fast) beliebige geometrische Formen und Pfade zeichnen können. •beispielsweise die Erstellung von Charts und/oder Diagrammen •umfangreiche Möglichkeiten zur Komposition, Animation und Manipulation von Bilder und Grafiken und Filmen. •ähnlich wie Actionscript Browser Unterstützung: • Alle Browser mit mind. Gecko 1.8 Engine (Firefox ab 1.5), • Safari ab 3.x, • Opera ab 9.x • der aktuelle Google-Browser Chrome • Internet Explorer interpretiert das Element noch nicht. Javascript Lösung Einbindung <canvas id="sample" width="290" height="150"> Ihr Browser unterstützt das Element <code>canvas</code> nicht. </canvas>
  • 28. Tipphilfen