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.

.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

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:

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%); }  

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.

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.

Es stellte sich heraus, das der jQuery-Befehl outerWidth(true), der die Breite eines Elementes inkl. Aussenabstand ausgeben soll, auf iOS5 einen falschen Wert zurückgibt. Im Stylesheet sind die Breiten und Abstände in Prozentwerten definiert, doch jQuery sollte diese in Pixelwerte umrechnen. Dies tut es aber lediglich bei der Innenbreite, der Aussenabstand hingegen wird in Prozentangaben dazugerechnet, und so werden Äpfel und Birnen bzw. Pixelwerte und Prozentwerte ohne weiteres addiert, was zu skandalösen Resultaten führt.

Ein Beispiel

HTML: Ein Element in einem übergeordneten Element.

<div id="container">
    <div id="element"></div>
</div>

<div id="console"></div>

CSS: Übergeordnetes Element: 400px breit, inneres Element: 50% breit, 50% rechter Rand (sollte also je 200px ergeben)

#container {
    width: 400px;
    border: 1px solid black; padding: 2px;
}
#element {
    width: 50%;
    margin-right: 50%;
    height: 100px; background: green;
}

Javascript: Mit den erwarteten und unerwarteten Ergebnissen

var el = jQuery('#element');
var cons = document.getElementById('console');

// expected: 200, iOS5: 200 (correct)
cons.innerHTML  = 'el.width() = ' + el.width() + '<br />';

 // expected: 400, iOS5: 250 (px and % added)
cons.innerHTML += 'el.outerWidth(true) = ' + el.outerWidth(true) + '<br />';

// expected: 200px, iOS5: 200px (correct)
cons.innerHTML += 'el.css(width) = ' + el.css('width') + '<br />';   

// expected: 200px, iOS5: 50% (not incorrect, but not as expected)
cons.innerHTML += 'el.css(margin-right) = ' + el.css('margin-right') + '<br />';

Javascript-Workaround: Den Wert selber ausrechnen.

var value = el.css('margin-right');
if (value.substr(value.length - 1, 1) === '%') {
    var valPercentage = value.substr(0, value.length - 1);
    var valWidth = jQuery('#element').parent().width();
    value = (valWidth * valPercentage) / 100 + 'px';
}

// expected: 200px, iOS5: 200px
cons.innerHTML += 'corrected margin value = ' + value + '<br />';

Das ganze Beispiel kann hier eingesehen werden

Screenshot eines iPads mit iOS5: 200px + 50% = 250

EDIT, 17.01.2012: Der daraus entstandene jQuery-Bugreport wurde artig diskutiert, und auf einen Fehler bei Webkit abgeschoben.

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Damit bricht nun die Zeit an, in welcher man im Web auch schmale Textspalten und Blocksatz anwenden kann. Dies klappte bislang nur mit dem Einsatz von schweren Javascript-Bibliotheken (z.B. hyphenator.js).

Einige Hindernisse sind natürlich noch nicht ausgeräumt. Schmale Spalten und Blocksatz kann man natürlich erst dann verwenden, wenn alle verbreiteten Browser die Worttrennung beherrschen. Jedoch kann man es durchaus bereits heute wagen, die Trennungsanweisungen in den Stylesheets einzubauen, so wie ich das auf dieser Website gemacht habe.

Skeptiker murren zwar, dass die Browser nicht richtig und schön trennen könnten, und man deshalb die Finger davon lassen sollte. Nach meinen neu gewonnen Erfahrungen funktioniert richtiges Trennen beim Firefox 6 aber schon recht gut, oder könnt ihr hier irgendwo eine Falschtrennung erkennen? Schönes Trennen hingegen, so wie es Menschen hinkriegen, wird wohl nie ganz automatisch gehen.

So sieht die Worttrennung bei mir (Firefox 6) aus.

Nachtrag, 18.05.2012: Ich habe die automatische Silbentrennung wieder entfernt, da sie doch im Schnitt bei jedem neuen Artikel eine Stelle verursacht hat, die ziemlich hässlich war.

Ich weiche jetzt wieder auf die ältere Lösung aus, manuell ­-Zeichen zu setzen, wenn ich finde, ein Wort solle umgebrochen werden. Wünschenswert wären aber zwei andere Sachen:

• Mittels CSS zentral sagen zu können, ab wievielen Buchstaben eine Silbe auf einer neuen Zeile stehen darf, und
• ein Anti-­-Zeichen, um Silbentrennung an einer bestimmten Stelle zu unterbinden.

Admin Sys

Sysadmin

Balise

Tag (bspw. in XML)

Barre latéral

Sidebar

Base de données

Datenbank

Bloc-notes

Notepad (Microsoft)

Boucle

Schleife (z.B. «For»-Schleife)

Bouton radio

Radiobutton

Bureau

Desktop

Cadriciel

Framework

Case à cocher

Checkbox

Champ de saisie

Textfeld

Crochet

Eckige Klammer

Digital

Den Finger betreffend (z.B. empreinte digitale = Fingerabdruck, vgl. «Numérique»)

Données

Daten

Dossier

Verzeichnis (Ordner)

Externalisation

Outsourcing

Fichier

Datei

Fil d’Ariane

Breadcrumbs

Flux

Feed

Frimousse

Smiley

Génie logiciel

Software Engineering

Hébergeur

Hoster (für Webspace)

Infobulle

Tooltip

Logiciel

Software

Mémoire

Dimplomarbeit (u.a.)

Mis à jour

Update

Molette de souris

Scrollrad

Numérique

Digital

Octet

Byte

Onglet

Tab (Registerkarte)

Référencement

Search Engine Optimization

Tableau

Array

Télécharger

Herunterladen (auch Uploaden)

Touche dièse

Rautetaste

Touche entrée

Enter-Taste

Touche majuscule

Shift-Taste

Screenshot aus Apples Administrationsseite

Screenshot aus dem Motlies-Memory

• Zum App-Store
• Zur Web-App