Archiv für Schlagwort: html5

Multimediatreff #29

Samstags früher aufstehen als unter der Woche. So fing das an. Grund dafür war mein Besuch beim 29. Multimediatreff, den ich mit dem Kollegen besuchte. Allerlei Vorträge standen auf dem Programm und das konnte eigentlich nur interessant werden. Pünktlich angekommen sammelten wir unsere Namensschilder ein und warteten bei Brötchen und Kaffee auf den Beginn der Veranstaltung. Nachdem dann auch der letzte Adapter irgendwie gefunden war, ging es dann mit leichter Verzögerung los.

HTML5 Polyfills – Den Kampf gegen veraltete Browser aufnehmen und gewinnen

Peter Kröner ist der einzige Mensch, der es schaffte ein Fachbuch zu schreiben, dass ich wirklich gelesen habe. Der „HTML5-Erklärbär“ hat einen sehr angenehmen Schreibstil und dementsprechend war ich auf seinen Vortrag sehr gespannt.
Ich wurde nicht enttäuscht. Der Vortrag rund um HTML5-Polyfills war sehr interessant und eine gesunde Mischung aus Vertiefung meines Wissens und neuen Dingen. Imposant fand ich, dass er einen großen Teil seiner Folien dann tatsächlich aus dem Internet Explorer 6 abspielte. Der Vortrag selbst war also das beste Beispiel.

Peter Kröner im Vortrag

Interaktionsdesign und animierter Webcontent mit Adobe Edge

Die Vorstellung der Beta-Version von Adobe Edge durch Jay Meissner hatte mich im Vorfeld nicht so sehr gereizt. Allerdings gefiel mir die Funktionalität die Meissner vorführte dann doch recht gut. Falls ich mal aufwändigere Animationen zu erstellen habe, werde ich mir das auf jeden Fall nochmals anschauen. Am Ende folgte dann noch eine kurze Demo von Adobe Shadow.

CSS3: Sass und Compass – Awesome Stylesheets!

Der Titel des Vortrages klang für mich relativ interessant, allerdings konnte André Laugks mir dann leider nicht mehr viel Neues erzählen. Die Funktionsweise und die Möglichkeiten von CSS-Preprozessoren hatte man mir vor einiger Zeit auf dem Webmontag ja schon detailliert erklärt. Außerdem hatte ich das Gefühl, dass das vorgestellte SCSS mir weniger liegen würde als das beim Webmontag vorgestellte LESS.

Single-Page Web Apps – Möglichkeiten und Fallstricke

Eine Kombination aus „Nicht so mein Thema“, einem vollen Bauch, stickiger Luft und unglaublich unbequemen Stühlen machte es möglich, dass ich aus dem Vortrag von Jörn Zaefferer nicht so viel mitnehmen konnte. Einige Details habe ich mir aber dennoch im Hinterkopf behalten.

„Hab Dich!“ – Wie Angreifer ganz ohne JavaScript an Deine wertvollen Daten kommen

Mario Heiderich weckte mich dann wieder ein wenig auf. Der wirklich gute Vortrag schaffte es, dass mir mehr als einmal der Mund vor Überraschung offen stehen blieb. Heiderich zeigte anhand einiger Beispiele, wie man ganz ohne Scripte dennoch an die Daten von Nutzern kommen kann. Wie er auf all die Ideen kommt und wie er sich die Kombinationen aus verschiedenen HTML- und CSS-Features ausdenkt, ist mir immer noch unerklärlich.

HTML5 in freier Wildbahn

Schließlich zeigte Carlo Blatz dann noch, neben relativ viel Eigenwerbung für sein Unternehmen, einige aktuelle Beispiele für die Möglichkeiten von HTML5 und CSS3. Das war auch ganz unterhaltsam, die meisten Beispiele kannte ich aber auch schon.

Mein Fazit

Ein interessanter Tag der sich durchaus gelohnt hat, auch wenn er etwas lange war und mein Hinterteil vermutlich immer noch Wund ist von den unglaublich unbequemen Stühlen im Komed Veranstaltungszentrum. Ich kann mir durchaus vorstellen, bei Gelegenheit mal wieder einen Multimediatreff zu besuchen.

Das HTML5-Grundgerüst für ein Blog

Im Rahmen der Neuausrichtung meiner Seite beschäftigte ich mich auch eingehend mit HTML5 und den damit neu gegebenen Möglichkeiten. Vorweg: HTML5 ist nach wie vor kein festgelegter Standard, sondern weiterhin in Entwicklung. Dennoch unterstützen moderne Browser auch heute schon viele Möglichkeiten, die HTML5 bietet. Einen interessanten Artikel über die Inhalte von HTML5 mit einer durchdachten Grafik hat Peter Kröner mit Was ist HTML5 und was nicht? Und was hätte der Kaiser dazu gesagt? veröffentlicht. Dieser bietet eine erste Übersicht mit der man sich dann leicht in die einzelnen Themen abtauchen kann.

Ich will mich nun erst einmal mit den neuen semantischen Möglichkeiten von HTML5 auseinandersetzen. „Semantisch“ will heißen, dass man versucht durch den Einsatz diverser HTML-Elemente den Inhalt einer Webseite zu strukturieren. Natürlich könnte man auch alle Inhalte rigoros div-Elemente packen. Das Ergebnis würde im Browser vermutlich gleich aussehen. Durch die Verwendung von semantisch korrekten Elementen, die für den jeweiligen Inhalt-Typ vorgesehen sind, macht man den Code aber auch lesbar. Und zwar nicht nur für einen selbst oder andere Menschen, sondern auch für Screenreader und Suchmaschinen. Insgesamt also eine gute Sache.

Bisher bot (X)HTML hier nur eine beschränkte Anzahl von Elementen an. Überschriften, Listen und Textabsätze wurden im wesentlichen abgedeckt. HTML5 geht nun einen Schritt weiter und bietet die Möglichkeit eine Seite komplett semantisch zu strukturieren. Es gibt nun Elemente für den Kopf einer Seite (header), die Navigation (nav), den Inhalt (section, article) und seinen logischen Aufbau und den Fuss (footer) einer Seite. Ohne diese nun all zu lange eingehen zu wollen, verweise ich auf den Artikel Structural Tags in HTML5 bei Ordered List. Der Artikel dort beschreibt jedes Element kurz und zeigt auch einen beispielhaften Quellcode.

Im neu zu bauenden Layout meiner Seite möchte ich am oberen Ende der Seite eine Navigationsleiste mit den neuen Kategorien haben. Danach der eigentliche Inhalt und dann schließlich eine Sidebar, die eigentlich mehr eine „Bottombar“ ist. Dementsprechend ergibt sich folgende Struktur im Code:

[html]
<!– der tag und ich = header.php –>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>der tag und ich</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<h1><a href="#">der tag und ich</a></h1>
</header>
<nav id="nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
<!– der tag und ich = index.php –>
<section>
<article>
<header>
<h2><a href="#">Die Überschrift eines Artikels</a></h2>
</header>
<section>
<p>Der Inhalt eines Artikels</p>
</section>
</article>
</section>
<!– der tag und ich = sidebar.php –>
<aside>
<p>Hier kommt die Sidebar hin</p>
</aside>
<!– der tag und ich = footer.php –>
<footer>
<p>Der Footer der Seite mit einigen wichtigen Links.</p>
</footer>
</body>
</html>
[/html]

In diese Grundstruktur kommt nun der erste WordPress-Code, damit die Inhalte ausgegeben werden können. Anschließend werden die gewünschten zusätzlichen Informationen eingebaut, wie etwa die Kommentaranzahl pro Beitrag oder das Veröffentlichungsdatum. Und natürlich das ganze drumherum, wie etwa Meta-Tags und externe Dateien die eingebunden werden wollen.

Ein kleiner Tipp am Rande: Nicht alle Browser unterstützen die neuen HTML-Elemente bereits, gerendert werden sie aber schon irgendwie. Damit das alles aber auch so tut wie es soll, setzt der kluge Webentwickler in einem Rundumschlag alle neuen Elemente im CSS der Seite manuell auf display: block;.

[css]
/* Nun bringen wir den HTML5-Tags erst mal ordentliches Benehmen bei */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
[/css]
So sind die Elemente nämlich spezifiziert, werden aber unter anderem im Internet Explorer mangels Kenntnis als inline gerendert.