www.machart-studios.de Making-Off

24. Januar 2012 | , , , | Keine Kommentare

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 Webseiten ankommt. Dabei steht Design und Text an erster Stelle und wird hier nicht diskutiert, da gutes Design und Text nicht sonderlich gut erklärt werden kann.

Ebenso gehe ich hier nicht auf die Entwicklung eines Backends ein. Hier sind wir als Werbeagentur einfach nicht “best-practice” genug.

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 auf 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 “Hardcoreuser”. Für uns, die wir HTML verstehen, ist Typo3 viel zu umständlich realisiert und bietet trotzdem nicht die Möglichkeit flexibel genug jede Seite einzeln zu gestalten, was wir jedoch tun müssen, da wir ja eine Werbeagentur sind und keine Hochschule. Ein weiterer Grund gegen ein CMS ist Speed, sauberer Code, keine Featureüberladung.

HTML5 Doctype

html5

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 zu HTML5 gebracht. 2 Wermutstropfen hat die Wahl, wie immer, aber doch:

 

 

  1. Ist HTML5 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 IE 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/):

IE 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 Javascriptlose User kaum noch 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, gemeint ist der alte IE, den Video-Tag trotzdem nicht. Dafür hat HTML5 einen Fallback vorgesehen. Wir nutzen für 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: 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 beim Ende des Videos ein Overlay einblenden und den User um Feedback bitten. Dies funktioniert (wir nutzen jQuery Selektoren, Achtung: Ohne funktioniert es mit “onpause”) 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

Apache2

Ein bereits zu Beginn der Umsetzung wichtiger Punkt waren URLs. Dabei mussten, da wir bereits eine Website hatten 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 nicht weiter gepflegten Content:
RedirectPermanent /html-oder-xhtml http://www.machart-studios.de

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

# Eleminieren Seiten mit unschönen URLs
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: 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 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 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)

HTML zum Nachladen von legalen Social-Media Buttons

Wir benötigen dafür einen HTML-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 3 Seitenaufrufen anzeigen wollen. Jedoch fügen wir den HTML-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 das 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 3 mal zu setzen, bei Klick auf den Hinweis der 3 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 HTML-Klassen und muss ggf. deinen Ansprüchen angepasst werden.

Es folgen 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 mehr erfahren?

Tags: , , , , , , ,

Hinterlasse eine Antwort

*