Neue Firma Filmwords gegründet

Cinergy war seit Beginn meiner Selbständigkeit ein treuer Kunde von Château Web. Vor allem im Bereich Social TV auf Teleboy wurde ich für viele Entwicklungen herbeigezogen. Seit kurzem wurde quasi ein Spin-Off namens Filmwords gegründet, das sich aus­schliesslich um Social-TV-Aspekte kümmert. Neben Tobias Asch und Martin Glauser bin auch ich bei Filmwords mit dabei.

Filmwords hat das Ziel, Social TV plattform-übergreifend anzubieten, sowohl als Second-Screen-App als auch auf First-Screen-Geräten. Mit Zwap.tv wird Filmwords diesen Sommer eine eigene App launchen.

Ein Teil meines Arbeitspensums ist also fix für Filmwords reserviert, für eigentliche Château-Web-Projekte wird aber weiterhin genügend Zeit zur Verfügung stehen.

Endlich: IE7 sinkt auf unter 3% Marktanteil.

Kürzlich habe auch ich dem Volkssport, mittels CSS eine Zeichnung anzufertigen, nachgegeben. Gut, es war nur ein kleines Dreieck in einem nachgebauten Dropdownmenü.

.element:after {
    content: "";
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #444444;
}

Nach Vollendung des Dreiecks wich der Stolz schnell der Frage, ob das auch im Internet Explorer vernünftig angezeigt wird. Tatsächlich kann der IE8 mit dem Pseudo-Element :after umgehen, der IE7 jedoch noch nicht.

Muss dafür nun ein Workaround her, oder darf man auf den IE7 pfeifen? Ich setze die Grenze von vernachlässigbaren Browsern bei 3% Nutzeranteil an. Und siehe da: Laut Statcounter ist im März 2012 der IE7-Anteil unter diese Marke gesunken. Hallelujah, kein Workaround nötig.

Weniger als 3% verwenden noch IE7

Spamsichere E-Mail-Links in WordPress

Vielen Leuten ist es nicht geheuer, die eigene E-Mail-Adresse auf Webseiten zu publizieren, weil zu Recht befürchtet wird, dass die E-Mail-Adresse früher oder später automatisch gefunden und in eine Spam-Verteilerliste eingetragen wird.

Da man aber dem aufrichtigen Besucher durchaus eine Kontaktmöglichkeit anbieten sollte, steht man vor dem Dilemma, dem üblicherweise mit einer der folgenden Strategien begegnet wird.

1. Kontaktformular bereitstellen
Nachteil: Besucher weiss nicht, ob die Nachricht korrekt verschickt worden ist und hat keine Kopie davon im Gesendet-Ordner

2. E-Mail-Adresse als Bild speichern
Nachteil: Besucher muss die Adresse abtippen.

3. Leicht verschlüsselt hinschreiben, z.B. info ÄT company PUNKT com
Nachteil: Sieht merkwürdig aus.

4. Nichts unternehmen und dem Spam-Filter des E-Mail-Programms vertrauen
Nachteil: Es werden immer wieder Tricks gefunden, um die gängigen Spam-Filter zu umgehen. Zu ambitioniert arbeitende Spam-Filter klassieren richtige E-Mails fälschlicherweise als Spam.

5. Die E-Mail-Adresse mit Javascript setzen
Nachteil: Diese Strategie geht davon aus, dass die bösartigen E-Mail-Sammler-Skripte kein Javascript können.

Ich verwende gerne diese letztgenannte Javascript-Lösung, da sie bislang recht gute Resultate geliefert hat. Wenn eine Website mit WordPress umgesetzt wird, verwende ich einen Shortcode, so dass der Autor relativ einfach eine E-Mail-Adresse erfassen kann.

Schreiben Sie uns: [email address="info@company.com"]

Im Theme (Datei functions.php) muss der folgende Code eingefügt werden, um den obigen Shortcode in die Java­script-Lösung umzuwandeln.

<?php

add_shortcode('email', 'scf_email');

function scf_email($atts) {
  extract(shortcode_atts(array(
    'address' => 'info@company.com'
  ), $atts));

  $parts = explode('@', $address);

  return '<script>
    var a = "' . $parts[1] . '",
      s = "&#64;",
      b = "' . $parts[0] . '";
    var m = b + s + a;
    var n = "&#109;&#97;i&#108;&#116;&#111;&#58;";
    document.write("<a href=\"" + n + m + "\">" + m + "</a>");
  </script>
  <noscript>' . $parts[0] . ' ät ' . $parts[1] . '</noscript>';
}

Und so sieht es dann im Endprodukt aus:

Popstar in HSL-Farben

Zwischendurch etwas Ausserthematisches.

Wenn der grösste Popmusiker seit Ludwig van Beethoven nach Zürich kommt, lass ich mir das natürlich nicht entgehen. Im Gegenteil: In infantiler Vorfreude habe ich eine Fan-Seite gestaltet. Hier geht’s zur Fan-Seite

Aus technischer Sicht ist die wechselnde Hintergrundfarbe interessant. Pro Sekunde wird der Farbkreis um 5 Grad gedreht. Das ist natürlich nur möglich, wenn die Farbe nicht mit der RGB-Methode definiert wird, sondern mit HSL, wo die Farbton (H) direkt gesetzt und mittels Javascript entsprechend manipuliert werden kann. Die beiden weiteren Parameter bei HSL sind die Sättigung (S), die zwischen 0% (grau) und 100% (super-farbig) liegt, und der Helligkeit (L), welche zwischen 0% (dunkel / schwarz) und 100% (hell / weiss) gesetzt wird.

Alle Browser können mit HSL-Angaben umgehen, der Internet Explorer erst ab Version 9.

Beispiele für HSL-Farben

/* 240 = blau, 
   100% = voll farbig, 
    50% = weder heller noch dunkler gemacht
*/
div.hslbox1 { background: hsl(240, 100%, 50%); }  

/* 0 = rot, 
   30% = ziemlich grau (entsättigt), 
   80% = ziemlich hell (pastellig)
*/
div.hslbox2 { background: hsl(0, 30%, 80%); }  

Neue Website der Hotels Ambassador und Opera aufgeschaltet

Seit diesem Donnerstag erstrahlen die Websites der beiden Zürcher Vier-Sterne-Hotels Ambassador und Opera in neuem Glanz. Die Projektleitung und das Erstellen des Designs hatte die Agentur HBH inne, die technischen Umsetzung wurde Château Web Sprenger anvertraut.

Screenshot aus der Ambassador-Website

Beide Sites benutzen dasselbe, speziell für den Kunden angefertigte WordPress-Theme. Eine besondere Stellung nimmt die Team-Seite ein, auf welcher alle Mitarbeiter abgebildet sind. Die Fotos sind zufällig angeordnet und lappen mit unterschiedlichen Abständen und Winkel leicht übereinander. Die Effekte sind mittels Javascript / jQuery umgesetzt, wobei für die Verwaltung der Mitarbeiter das praktische WordPress-Feature Custom-Post-Type zum Einsatz kommt.

Meiner Meinung nach eine gelungene Website mit modernem Design, umgesetzt mit zeitgemässen Web-Techniken. Solltest du mal in einem dieser Hotels absteigen, dann erwähne doch an der Reception die Website mit lobenden Worten.

CSS3 ohne Moz- und Webkit-Präfixe

Die beiden CSS3-Eigenschaften border-radius und box-shadow habe ich nun erstmals in einem ernstgemeinten Projekt ohne die Browser-Präfixe -moz- und -webkit- eingesetzt. Und war etwas erstaunt, dass dies in praktisch allen verbreiteten Browserversionen reibungslos funktioniert.

Selbst der Internet Explorer 9 beherrscht diese beiden Features ohne zu zucken. Doof nur, dass die Windows-XP-Nutzer nicht auf IE9 upgraden können, selbst wenn sie wollen (und doof, dass in gewissen Kreisen alte Computer noch gang und gäbe sind und genau dort auch geringe Bereitschaft vorzufinden ist, auf einen Nicht-IE-Browser zu setzen.)

Auf meiner systematischen Test-Seite kann man feststellen, dass auch background: rgba() und text-overflow: ellipsis problemlos funktionieren. Hingegen ist background: linear-gradient weiterhin präfixpflichtig.