HTML5 für Webdesigner

HTML5-Nachhilfe für alte und ganz alte Browser

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Natürlich stellt sich die Frage, was alte Browser mit HTML5 anfangen können. Die passenden Themen lauten HTML5Shiv und CSS-Nachhilfe. Außerdem lernen Sie die Vorlage HTML5Bones kennen, die den Einstieg in HTML5 erleichtert.

Transkript

Was bedeutet HTML5 jetzt im Alltag für Webdesigner? Und da gibt es zuerst einmal natürlich das Thema alte Browser. Für nicht nur ganz alte Browser, sollte man am Anfang seines Style Sheetes hier ein Style schreiben, nämlich alle neuen Elemente auflisten, die Blockelemente sein sollen und das explizit hinschreiben. Das ist nicht nur für ganz alte Browser nötig, sondern auch das ein oder andere verstehen neuere nicht. Sie sehen hier im Sublime Text zum Beispiel im Editor, dass Main von der Einfärbung der Elemente noch gar nicht betroffen ist. Das kennt der Editor also nicht. Und genauso geht vielen Browsern das auch noch. Wenn man das hinschreibt, ist die Sache damit erledigt, das verstehen alle Browser. Thema alte Browser gibt es dann natürlich den Sonderfall: HTML5 und alte Internet Explorer, die brauchen etwas mehr Nachhilfe. Und zwar zum einen ein html5shiv, nennt man das, ein JavaScript zur Erstellung der neuen Elemente, die kennen die nämlich gar nicht - also überhaupt gar nicht, wie Sie gleich sehen werden - und dann braucht man eventuell noch ein spezielles Style Sheet für Old IE, oder ausgesprochen Oldie. Dieser Name geht auf eine Anregung von Jens Kochtreis zurück und ich finde den einfach klasse für Style Sheets für alte Internet Explorer. Damit muss man moderne Selektoren wie first-of-type und last-of-type durch irgendetwas anderes ersetzen, und Einheiten wie Rem durch ebenfalls ein Pixel Fallback oder irgendsoetwas, weil sonst begreifen die das nicht. Beides wird im Head der Seite mit einem Conditional Comment eingebunden. Und hier geht es los mit dem html5shiv per Conditional Comment, per CC. Ich zeige Ihnen erstmal die Download-Seite: Code.google.com/p/html5shiv. Da kann man das downloaden und dann entpacken. Und hier steht ein Beispiel, wie es eingebunden wird mit dem Conditional Comment. Hier nochmal auf der Folie: Wenn Internet Explorer kleiner 9, dann dieses Skript und "and if". So, was macht dieses Skript jetzt? Dazu wechsel ich mal rüber in einen Internet Explorer modernerer Bauart, das ist der 11er hier. Und Sie sehen, der versteht sogar das Video. Und hier in den Entwicklertools, die komplett überarbeitet sind, gehe ich mal runter und wechsle hier auf den IE8 - nicht erschrecken. Der versteht rein gar nichts von dem Kram da oben. Der erste Grund liegt hierin: Der versteht also nicht Header und Head hier, sondern Header und /Header, da würde er gleich wieder zu--. Dann kommt das, was im Header eigentlich drin ist. Und ganz unten drunter sehen Sie hier /Header und //Header. Das ist also so ein HTML-Müll, was der daraus macht. Genau wie hier Main und  /Main, da wird gleich wieder geschlossen, da kann man mit CSS nichts mehr machen. Da muss dieses JavaScript her. Und genau an dieser Stelle setzt das HtmlShiv-Skript an, das bringt dem Internet Explorer 8 und älter bei, wie so etwas gemacht wird. Dann ist da also eine vernünftige HTML-Struktur und man kann dann nachbessern. Das IE Style Sheet, was da genau drin steht, das hängt natürlich auch vom CSS ab, das wird also genau in den selben Conditional Comment eingebunden letztendlich, weil er hat die gleiche Zielgruppe. Und da würden dann Sachen drin stehen, wie eben Ersatz für diese Lektoren, die er nicht versteht, Ersatz für Einheiten, die er nicht versteht, und dergleichen mehr. Was das genau ist, hängt von der jeweiligen Seite ab. Eine gute Starthilfe für diese Sache mit alten Browsern und HTML5 ist dieses Template: HTML5 Bones - Back to Basics, ein Mini-Projekt, wie Ian Devlin das selbst umschreibt hier unten. Und es ist ein Template, das einfach nur die wichtigsten Dinge versorgt. Es ist Normalized CSS drin, als Style Sheet zur Normalisierung von CSS. Und das html5shiv ist gleich mit eingebaut, und es gibt sehr schöne Vorlagen zum Einbinden von Audio und Video, sogar mit einem Flash Fallback, der eingebaut werden kann. Das heißt HTML5 Bones macht für die ersten eigenen Versuche mit HTML5 das Leben ein bisschen leichter. Es bietet die wichtigsten Hilfen, wie gesagt, Normalize, der Shiv ist gleich mit drin, und es gibt sehr schöne Vorlagen für Audio und Video. Ausführliche Inline Kommentare erläutern dazu auch noch den Aufbau von dieser Vorlage. HTML5 Bones ist sicher einen Blick wert. Und wenn es Ihnen gefällt und Sie ein Konto bei Gidhab haben, dann klicken Sie hier oben einfach auf Star, und dann kommt der auch bald über 1000.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
sehr lehrreich und unterhaltsam
Anonym

Dieses Training und sonst auch alle Trainings von Peter M. Müller die ich bis jetzt gesehen habe sind sehr lehrreich und unterhaltsam. Gute Arbeit.

Sehr gut
Anonym

Noch etwas intensiver als der Little Boxes HTML-Teil. Was mir fehlt - vielleicht als Anregung an Herrn Müller - ist ein Werk oder eine Unterseite auf Ihrem Webauftritt, mit kleinen Übungsaufgaben. Ich habe mir schon die Finger wund gesucht nach sowas. Einfach nur eine Anweisung: gestalte diese Webseite nach... beachte dabei das... Irgendeine Seite spontan nachzubauen ist nämlich im Zeitalter von Joomla, t3, WP gar nicht so einfach. Das wird schnell ziemlich frustrierend überhaupt was zu finden.

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!