Das Making-Of in HTML5

Seit diesem Wochenende ist unsere neue Website online. In diesem Artikel möchte euch einen Einblick in die Features verschaffen und aufzeigen worauf es bei der Entwicklung von HTML5 Webseiten ankommt. Dabei steht Design und Text an erster Stelle und wird hier nicht diskutiert. Denn herausragendes Design und Text lassen sich nicht sonderlich gut erklären. Man muss es fühlen!

Warum kein CMS?

Bewusst haben wir uns gegen die Nutzung von WordPress, Typo3 und Konsorten entschieden. Die Nutzung eines CMS ist einfach zu starr für die flexiblen Wünsche, die wir mit unserer neuen Website realisieren wollten. Unsere Website besteht zudem aus klarem Content in klaren Pages. Die strikte Trennung von Content in Pages ist zwar in Typo3 recht gut umgesetzt, bietet jedoch einige Probleme für „Hardcore-User“. Für solche Leute wie uns, die HTML5 verstehen, ist Typo3 viel zu umständlich realisiert und bietet trotzdem nicht die Möglichkeit flexibel genug jede Seite einzeln zu gestalten. Das müssen wir jedoch tun, da wir ja eine Werbeagentur sind und keine Hochschule. Ein weiterer Grund gegen ein CMS ist Speed, sauberer Code und keine Featureüberladung.

HTML5 Doctype

Beim Doctype haben wir lange gezögert und uns schließlich doch gegen XHTML 1.0 und für HTML5 entschieden. Die gute Abwärtskompatibilität und die semantisch korrektere Art und Weise mit dem Markup umzugehen haben uns von HTML5. Zwei Wermutstropfen hat die Wahl – wie immer – aber doch:

1. HTML5 ist noch nicht vollständig fertig entwickelt. Das sollte jedoch kein Problem sein. Das Web ist schnelllebig und trotzdem wird sich die W3C keine skandalösen Änderungen einfallen lassen. Somit werden wir damit sicher zurecht kommen.
2. Der Internet Explorer verträgt in alten Versionen diverse HTML5 Tags nicht. Dadurch wird das CSS einfach nicht angewendet, was natürlich kein Zustand ist. Abhilfe schafft ein kleines JavaScript (Code von: http://code.google.com/p/html5shiv/):

Dem Internet Explorer HTML5 beibringen

Durch dieses Script wird auch dem IE 5.5-8 beigebracht HTML5 zu verstehen. Diese Einschränkung dürfte heute kaum noch relevant sein, da kaum noch Javascriptlose User unterwegs sind und diese dann auch noch den Internet Explorer nutzen müssten. User die das doch tun, erhalten einen unschönen aber nutzbaren Header und werden somit auch nicht ausgeschlossen.

Firefox auch online HTML5-Videos beibringen

Damit auch der Video-Tag funktioniert muss der richtige MIME-Type gesetzt werden. Das sollte in der httpd.conf im Webserver geschehen oder Verzeichnisabhängig in einer .htaccess.

AddType video/ogg ogv
AddType video/mp4 mp4
AddType video/flv flv

Fallbacklösung per Flash und der Video-Tag

Natürlich kennen viele Browser, insbesondere der alte IE, den Video-Tag trotzdem nicht. Dafür hat HTML5 einen Fallback vorgesehen. Wir nutzen für das Flash-Fallback-Video Flowplayer. Unser Code sieht dann am Ende so aus:

<video id="showreelplayer" width="960" height="540" autoplay controls>
    <source src="/daten/video/showreel_111216.mp4video.mp4"  />
    <source src="/daten/video/showreel_111216.webmvp8.webm" />
    <source src="/daten/video/showreel_111216.theora.ogv"  />
    <a href="/daten/video/showreel_111216.flv" title="..." id="videoshowreel"></a>
</video>

Dank HTML5 sind die kurzen „True/False“-Tags valid. Wichtig dabei ist: Der Browser versucht zuerst die mp4 abzuspielen bis er, wenn er keine „source“ erkennt, das darstellt und somit Flowplayer aktiviert. Ihr solltet darauf achten das MP4-Video zuerst anzubieten (iOS enthält in bestimmten Versionen diesbezügliche Bugs).

Mit HTML5 Videos und Flowplayer kommunizieren

Nachdem das Video nun eingebunden ist wollen wir mit dem Video kommunizieren. In unserem Fall wollen wir am Ende des Videos ein Overlay einblenden und den User um ein Feedback bitten. Wir nutzen jQuery Selektoren, Achtung: Ohne funktioniert es mit „onpause“. Dies funktioniert folgendermaßen:

$("#showreelp").bind('ended', function(){
        $(".message").slideDown();
});

Dadurch blenden wir eine „.message“ ein, wenn das Video beendet ist. Zudem lassen wir ein Overlay einblenden und ausblenden bei „play“ und „pause“.

Natürlich wollen wir dies auch für das Fallback per Flowplayer in der Form haben. Dank der Dokumentation von Flowplayer ist auch dies einfach realisierbar:

flowplayer("videoshowreel", {src: 'flowplayer.commercial-3.1.5.swf', wmode: 'transparent'},  {
            clip: {
               onFinish: function() {
                   $(".message").slideDown();
                }
            }
});

Wichtig: Ein typischer Fehler beim Flowplayer-Code: „Nicht vergessen, die letzte Einstellung hat kein Komma“

URL-Rewrite

Ein bereits zu Beginn der Umsetzung wichtiger Punkt waren die URLs. Da wir bereits eine Website hatten mussten sowohl alle neuen URLs gut aussehen, als auch alte URLs bestehen bleiben und zum Teil weitergeleitet werden. Folgende .htaccess hilft hierbei:

RewriteEngine on

# Fast schon obligatorisch: Leitet www-lose-URLs auf URLs mit www weiter:
RewriteCond %{HTTP_HOST} ^machart-studios.de [NC]
RewriteRule (.*) http://www.machart-studios.de/$1 [R=301,L]

# Wir leiten unseren alten Newsordner auf den neuen Ordner "Aktuelles" um:
rewriteRule ^news/$ http://www.machart-studios.de/aktuelles/ [R=permanent,L] 

# Eleminieren von nicht weiter gepflegtem Content:
RedirectPermanent /html-oder-xhtml http://www.machart-studios.de

# Seiten auf neue URL-Strukturen umleiten:
RedirectPermanent /werbeagentur http://www.machart-studios.de/lexikon/w/werbeagentur

# Seiten mit unschönen URLs eleminieren
RewriteRule ^aktuelles/$ index.php?seite=aktuelles

Nachdem alle Seiten nach besten Wissen und Gewissen eingetragen wurden kann man die Redirects ohne Go-Live aber nicht mehr ordentlich testen. Ich lege dazu imer eine NACHGOLIVE.txt in den Websiteroot. Immer mit drin: Sobald die Website online geht werden alle Links geprüft die sich mit „site:www.machart-studios.de“ bei google finden lassen. Auch immer dabei: Das Aktivieren des „www und nicht-www“-Redirects.

„Gefällt mir“ per Klick seitenweit nachladen (Datenschutz)

Die Überlegung ist ganz einfach. Facebook und Co. sollen Userdaten nicht ungefragt sammeln können. Auf heise.de wurde das Thema schon ausgiebig behandelt. Ein Paar Dinge gefallen uns an der Umsetzung von heise aber leider nicht. Das Design ist nicht sonderlich individuell und das Script ist viel zu groß. Mit ein paar jQuery Zeilen lässt sich das „2 Klicks für mehr Datenschutz“ deutlich netter umsetzen. Zudem hat es uns nicht sonderlich gut gefallen, dass der User ohne Mouseover nicht auf die Funktion hingewiesen werden kann und, dass die Möglichkeit einen seitenweiten Social-Modus zu nutzen viel angenehmer ist, als auf jeder Seite einen „Doppelklick“ zu erwarten. (Benötigt wird ein Hinweis-IMG, eine statische HTML-Datei mit Buttoncode, jQuery und jQuery.Cookie)

HTML5 zum Nachladen von legalen Social-Media Buttons

Wir benötigen dafür einen HTML5 Button (oder einen per jQuery eingefügten Button):

<a class="changelikemode" href="javascript:void(0);">Off</a>

Daraufhin benötigen wir noch einen HTML-Hinweis, den wir in unserem Beispiel bei den ersten drei Seitenaufrufen anzeigen wollen. Jedoch fügen wir den HTML5 Code nicht in die Seite ein, sondern lassen ihn per jQuery erscheinen:

<img src="/daten/content/socialjanein.png" alt="" class="socialhinweis" />

Dann benötigen wir noch ein <div> , in welches die Social Buttons eingefügt werden sollen:

<div class="socialpanel"></div>

Damit unser Code funktioniert ist kein CSS notwendig. Wir nutzen jQuery um ein Cookie drei mal zu setzen. Beim Klick auf den Hinweis, der drei mal erscheint den Hinweis nicht erneut anzuzeigen, den Buttontext von „Off“ auf „On“ und zurück zu ändern, in unserem Fall die Buttons hereinzuanimieren und per Ajax die Socialbuttons von Facebook, Google+ und Twitter nachzuladen. (Vorsicht: der Code ist umständlich verständlich, bei entsprechenden Kenntnissen bitte anpassen)

JavaScript-Code für die Einbindung von Buttons

if( $.cookie('social')) {
 }else{
 if ( $.cookie('socialnachfrage') =='ichfragnimmer'){
  /* Hier könnte auch etwas passieren (Nachdem 3mal gefragt wurde) */
 }else if ( $.cookie('socialnachfrage') =='2'){
  /* Wir fügen vor unserem Buttoncontainer einen Hinweis ein */
  $('footer .wrapper').before('<img src="/daten/content/socialjanein.png" alt="" class="socialhinweis" />');
  $.cookie('socialnachfrage','ichfragnimmer', {path: '/', expires: 100000});
 }else if( $.cookie('socialnachfrage') =='1') {
  /* Wir fügen vor unserem Buttoncontainer einen Hinweis ein */
  $('footer .wrapper').before('<img src="/daten/content/socialjanein.png" alt="" class="socialhinweis" />');
  $.cookie('socialnachfrage','2', {path: '/', expires: 100000});
 }else{
  /* Wir fügen vor unserem Buttoncontainer einen Hinweis ein */
  $.cookie('socialnachfrage','1', {path: '/', expires: 100000});
  $('footer .wrapper').before('<img src="/daten/content/socialjanein.png" alt="" class="socialhinweis" />');
 }
}
$('.socialhinweis').click(function() {
 /* Bei Klick auf den Hinweis wird er nicht mehr eingeblendet */
 $(this).fadeOut(500);
 $.cookie('socialnachfrage','ichfragnimmer', {path: '/', expires: 100000});
});
/* Socialmodus einschalten */
if( $.cookie('social') =='inaktiv') {
 /* Linktext ändern wenn Social Inaktiv */
 $('.changelikemode').html('Off');
}
if( $.cookie('social') =='aktiv') {
 /* Linktext ändern wenn Social Aktiv*/
 $('.changelikemode').html('On');
 /* Wenn Aktiv: Datei "social.html" nachladen: Hier alle
 Social-Buttoncodes rein*/
 $.ajax({
  type: "POST",
  url: "/social.html",
  success: function(msg){
   $(".socialpanel").html(msg);
  }
 });
}
$('.changelikemode').click(function() {
 /* Bei Klick auf den Socialbutton ist der Hinweis unnötig */
 $('.socialhinweis').fadeOut(500);
 /* Wenn schon Aktiv wird der Status auf Inaktiv gesetzt, Button auf Off */
 if( $.cookie('social') =='aktiv') {
  $.cookie('social','inaktiv', {path: '/', expires: 100000});
  $('.changelikemode').html('Off');
  /* In unserem Fall blenden wir die Box nach rechts aus
  (position:absolute) */
  $(".socialpanel").animate({
   right: "-440px"
  }, 1200, function() {
  });
 }
 /* Wenn noch Inaktiv wird der Status auf Aktiv gesetzt */
 else {
  $('.changelikemode').html('On');
  $.cookie('social','aktiv', {path: '/', expires: 100000});
  $(".socialpanel").animate({
   right: "0px"
  }, 1200, function() {
   /* Hier wird nochmal abgefragt ob das HTML schon die
   Facebook-Buttons beinhaltet wenn der User die Buttons einblendet und
   ausblendet und einblendet usw... werden die Buttons nicht laufend
   erneuert */
   if( $(".socialpanel").html() =='') {
    $.ajax({
     type: "POST",
     url: "/social.html",
     success: function(msg){
      $(".socialpanel").html(msg);
     }
    });
   }
  });
 }
});

Der Code basiert auf unseren HTML5 Klassen und muss ggf. deinen Ansprüchen angepasst werden.

Das Ergebnis gibt es bei www.machart-studios.de zu sehen.

Ihr wollt noch mehr über HTML5 und Co. lesen? Bald gibt es noch folgende Themen:

• CSS, Javascript, JPGs und Requests (Optimierung von Dateigröße und Ladezeit) und Pingdom
• Overlays/Layer mit schrägen Kanten ohne CSS3
• Mit CSS-Sprites Imagemaps bauen
• iPhone und iPad Optimierung
• Rechtsklick > Speichern unter für Logodiebe vereinfachen

Worüber wollt Ihr noch mehr erfahren?