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 / CSS3
eine Einführung


  EB RAUTS | Marcus Hofbauer, Teamleader pixelpoint multimedia
Moderne Semantik
HTML5 wird der neue Markup-Standard

Was steckt dahinter?
Weshalb wurde HTML5 entwickelt?
• das Web hat sich seit der Entwicklung von HTML4/XHTML1 grundlegend
  verändert
• statische Dokumente werden zu komplexen...
Prinzipen und Ziele der HTML5-Entwicklung
1. Unterstütze existierende Inhalte

2. Graceful degradation (etwa: „Schrittweises Zurückfallen“)

3. Das Rad nicht neu er...
Muss ich jetzt HTML statt XHTML schreiben?
Nein! Es sind beide Serialisationen (Schreibweisen) möglich
Wichtig! Beide haben selben DOM
HTML5 erlaubt XML Syntax für E...
Das Endoskelett einer Webseite
Wireframe                                                        Grundskelett einer Website mit div-Suppe


              ...
Neue Elementtypen und neue Konzepte
Neue Sektionselemente: header, nav, article, section, aside, footer


 <body>                                    <body>
  ...
Sektionen: Der Elementtyp section

    • Zeichnet eine Sektion aus
    • eine Sektion ist eine Gruppe von Elementen die th...
Navigationsbereich: Der Elementtyp nav

    • Zeichnet einen Bereich mit Navigationslinks aus
    • Nur Haupt- und Bereich...
Eigenständige Bereiche: Der Elementtyp article

    • Zeichnet inhaltlich eigenständige Bereiche einer Webseite aus

     ...
Marginalien und Randbereiche: Der Elementtyp aside

    • enthält erläuternde und weiterführende Informationen als Ergänzu...
Fußbereiche: Der Elementtyp footer

    • enthält sichtbare Metainformationen einer Webseite oder eines
      Sektionselem...
Und die Browser? Einsatz der neuen Elemente
• Aktuelle Versionen von Opera, Safari und Firefox stellen alle vorgestellten
  Elemente wie gewünscht dar
• CSS Anweisung...
Sehen und Hören
Element <video>
Native Einbindung von Filmen in Webseiten

Browser Unterstützung:
   • Firefox ab Version 3.5,
   • Safari ab 3.2,
   • Go...
Element <audio>
Native Einbindung von Filmen in Webseiten

Browser Unterstützung:
   • Firefox ab Version 3.5,
   • Safari ab 3.2,
   • Go...
Malen nach Zahlen: <canvas>
•ermöglicht Zeichenoperationen, mit Hilfe derer wir (fast) beliebige geometrische
 Formen und Pfade zeichnen können.
•beis...
Tipphilfen
Upcoming SlideShare
Loading in …5
×

HTML5 Übersicht

15,714 views

Published on

Übersicht HTML5

Published in: Education
  • Be the first to comment

HTML5 Übersicht

  1. 1. HTML5 / CSS3 eine Einführung EB RAUTS | Marcus Hofbauer, Teamleader pixelpoint multimedia
  2. 2. Moderne Semantik
  3. 3. HTML5 wird der neue Markup-Standard Was steckt dahinter?
  4. 4. Weshalb wurde HTML5 entwickelt?
  5. 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. 6. Prinzipen und Ziele der HTML5-Entwicklung
  7. 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. 8. Muss ich jetzt HTML statt XHTML schreiben?
  9. 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. 10. Das Endoskelett einer Webseite
  11. 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. 12. Neue Elementtypen und neue Konzepte
  13. 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. 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. 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. 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. 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. 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. 19. Und die Browser? Einsatz der neuen Elemente
  20. 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. 21. Sehen und Hören
  22. 22. Element <video>
  23. 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. 24. Element <audio>
  25. 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. 26. Malen nach Zahlen: <canvas>
  27. 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. 28. Tipphilfen

×