Quick Win: E-Mail-CSS in Smarty Templates

Wenn man einer Website ein schönes Design verpasst hat, dann sollen die dazugehörigen E-Mails genauso schön aussehen. Im Fall der zahlreichen und unterschiedlichen E-Mail-Benachrichtigungen von KING.ME kann der dazugehörige Prozess sehr lange andauern, wenn Abläufe nicht optimiert werden.

Wie wir ja in Richards spannenden Artikeln zum Erstellen von HTML-E-Mails – Tipps und Tricks Part 1, Part 2 & Part 3 gelernt haben, ist Inline-Style King.

Das führt auf Dauer leider dazu, dass der gleiche Code immer und immer wieder im HTML vorkommt. Zudem müssen bei einer generellen Änderung des Designs alle entsprechenden Stellen gesucht und angepasst werden. Im Fall von KING.ME können das bis zu 500 Zeilen auf ca. 100 Templates verteilt sein – pro Änderung. (weiterlesen…)

Quick Win: Formular-Validierung mit HTML5 & CSS3 – Ein kurzer Blick in die Zukunft

Neben dem HTML5 enabling script, welches die Darstellung von HTML5-Tags, wie section, aside, article, etc. in fast allen Browsern (auch im IE 6) forciert, umfasst der HTML5 – Draft auch einige Techniken, die nur von neuesten Browser Rendering Engines vollkommen unterstützt werden.

Dazu zählen die neuen Input-Types, wie date z.B.: range, url, email, usw. sowie deren Validierung. Mit HTML5 (soweit vorgesehen) soll es möglich werden, Usereingaben im Frontend ohne Javascript zu überprüfen und die daraus resultierenden Meldungen mit CSS3 zu stylen.

Eine erste volle Unterstützung bieten hier einzig die Webkit-Browser Safari und Google Chrome. Firefox gibt uns zwar die Möglichkeit Meldungen anzuzeigen, lässt uns diese allerdings (zum jetzigen Stand) noch nicht mit CSS stylen. Schade.

Erste Einblicke in die Technik geben uns also eigentlich alle aktuellen Browser (selbstverständlich exklusive IE) und eine kleine Demo, welche ich hier zur Verfügung stelle.

Wie funktioniert das?

Hierzu braucht man eigentlich nur wenige Dinge:

• Webkit- (bevorzugt) bzw. Gecko-Browser
• eine schließendes form element
• und das wichtigste; das required – Attribut

Das könnte dann so aussehen:

Das required-Attribut forciert, dass der Browser bei Klick auf den Submit-Button das jeweilige Input auf ein bestimmtes Pattern überprüft. Stimmt dieses nicht mit der Eingabe überein, schickt er das Formular nicht ab und zeigt eine Meldung, welche sich (im Google Chrome) mit CSS3 auch neu gestalten lässt.

Fazit

Höchst experimentell. Schaut man in die Demo und sich das dazugehörige CSS mal an, wird man feststellen, dass das Styling der Message-Bubbles und das Handling der Status-Pseudoklassen (input:valid) noch einiger Überarbeitung bedarf.

Wem der Standard-Style der Messages reicht, kann hier über eine duale Anwendung mit Javascript nachdenken – für alle Anderen ist Warten angesagt, bis Mozilla und Co. seine CSS-Selektoren für die “Validation Bubbles” freigibt.

Weiterführend

Mehr über WebForms2

Form validation message (Aufbau + Selektoren / Webkit Dokumentation)

Quick Win: CSS-Counter – Eine Linksammlung

Des Öfteren habe ich mich schon gefragt, ob es nicht einen einfachen Weg gibt, bestimme Elemente auf einer Seite zu zählen.

In einem Blog übernimmt normalerweise PHP das Ermitteln der Anzahl und das Nummerieren der Kommentare. Das ist auch nicht besonders schwer, wenn man ein wenig PHP-Basiswissen mitbringt, aber so etwas Einfaches sollte doch auch irgendwie im Frontend möglich sein!?

Im Blog von Peter Kröner bin ich vor kurzem auf eine Möglichkeit gestoßen, solche Counter allein mit CSS umzusetzen. Man braucht dafür nicht einmal zusätzliche HTML-Elemente. Wie man eine Nummerierung von Kommentaren mit Hilfe der Eigenschaften counter-reset, counter-increment und der CSS-Funktion counter() umsetzt, wird in diesem Artikel beschrieben. (weiterlesen…)

Quick-Buchtipp: HTML5 – Webseiten innovativ und zukunftssicher

“HTML5″ – Nur ein hippes Buzz-Word, ein neuer Standard oder schon längst alte Schule?

Egal, wie ihr den ganzen Rummel bisher wahrgenommen habt, eines ist sicher: Es ist ein Ruck, eine Bewegung weit nach vorne. Was Browserhersteller und das W3C hier unternehmen, sind längst überfällige Schritte in die richtige Richtung.

Wie zu erwarten, tummeln sich auf dem Markt auch schon einige Bücher über den neuen “Standard”. Ganz vorne natürlich wieder mit dabei, die Jungs von O´Reilly & Google Press, welche aber mit ihrem sehr früh veröffentlichten Werk nicht ganz den Nerv der Zeit treffen. Zudem entsteht der Eindruck, Autor Mark Pilgrim hätte einfach seine Website diveintohtml5.org zusätzlich auf Papier gebracht. (weiterlesen…)

Regressionstest – wie viel Last hält dein Webserver aus?

Neben der regelmäßigen Kontrolle im Betrieb können automatisierte Tests aufzeigen, ab welcher Last die Grenze eines Servers zu erwarten ist oder welche Auswirkungen eine Änderung an der Konfiguration bewirkt. Es gibt zahlreiche Tools, mit denen man eine Last künstlich erzeugen kann.

siege ist ein solches, kostenloses Programm von Jeffrey Fulmer, welches eine oder mehrere URLs mit Anfragen „belagert“ (engl. „to siege“). Das Programm sendet während des Belastungstests wiederholt Requests an den Server und wertet die Antworten aus.
(weiterlesen…)

Recap: Linuxwochen Wien 2011

Vom 5. bis 7. Mai fanden in der FH Technikum Wien die diesjährigen Linuxwochen der “Linux Österreich Tour” statt. Mit über 100 Sessions und 15 Workshops wurde dabei ein umfangreiches Programm geboten – und natürlich war auch LOTUM am Start.

Dass es bei dem Event aber nicht nur um Linux ging, sondern für jeden etwas dabei war, bewies unter anderem der “Developer Day” eindrucksvoll.

(weiterlesen…)

Quick Win: Griddle.it

Für alle Fans von Rasterlayouts im Web gibt es bei uns ja bereits einen ausführlichen Artikel zu CSS Grid Systems.

Wer sich nicht an ein solches Grid System binden möchte, aber dennoch vor hat, sein Layout mit Hilfe eines Rasters in mehrere Spalten aufteilen, für den gibt es das kleine aber hilfreiche Tool Griddle.it.

Mit Griddle.it lässt sich sehr einfach ein Hilfsraster als Hintergrundbild einbinden, worauf man sein Spaltenlayout mit komplett eigenem CSS bauen kann. Dazu weist man dem body per CSS die Grafik von Griddle.it als background zu, an die URL hängt man die gewünschte Gesamtbreite sowie die Anzahl und den Zwischenabstand der Spalten. (weiterlesen…)

LOTUM Talks im April

Fleißige Talker, wissbegierige LOTUMler, der letzte Freitag im Monat. Was kann das sein? Richtig: Die allmonatlichen LOTUM-Talks!

Los ging es mit einem Beitrag von Artur, der uns den Zusammenhang von Interprozesskommunikation mit PHP und Dämonen erklärte. Wir erfuhren von Marco, wie eine Dating-Seite Traumpaare ermittelt. Und abschließend zeigte uns Martin, inwieweit der Facebook-Edge-Rank-Algorithmus unsere Hauptmeldungen bei Facebook beeinflusst.

(weiterlesen…)

Monitoring mit Nagios

Stark besuchte Webseiten unterliegen großen Herausforderungen in der Sicherstellung der Erreichbarkeit.

Oft kommen mehrere Server zum Einsatz, die gemeinsam einen reibungslosen Betrieb sicherstellen. Auch bei präzisestem Arbeiten kommt es jedoch vor, dass sich Fehler einschleichen und Services aufgrund von Hardware-, Netzwerk- oder Lastproblemen oder einfach aufgrund eines Softwarefehlers nicht einwandfrei laufen.

Um die Ausfallzeiten der eigenen Webseiten möglichst gering zu halten, muss man überhaupt erst einmal erfahren, dass eine Störung vorliegt. Denn erst wenn man davon weiß, kann man gegensteuern und die Services wieder zum Laufen bringen.

Um von Störungen zu erfahren, ist eine automatisierte Monitoring-Lösung die beste Wahl, denn wer sitzt schon 24/7 vor der eigenen Webseite, um die Verfügbarkeit zu testen.

Als mögliches Tool möchte ich heute Nagios vorstellen, eine Grundinstallation beschreiben und einen ersten Monitoring-Service einrichten. Als Ziel definieren wir die Überprüfung der Webseite http://www.lotum.de/. Wir möchten eine E-Mail erhalten, sobald die Webseite für Besucher nicht erreichbar ist und eine Entwarnung, wenn sie dann wieder erreichbar ist. (weiterlesen…)

Quick Win: Daten im Browser speichern via HTML5 Local Data Storage

Neben der herkömmlichen Möglichkeit Cookies via JavaScript anzulegen, erlaubt uns der neue Standard von HTML5 die Speicherung von Daten direkt im Browser. Die Vorteile dieser Technik liegen auf der Hand: Die Daten sind persistenter, schneller abrufbar und können mehr Daten beinhalten (bei Cookies liegt die maximale Größe bei 4 KB pro Datei).

Trotzdem bleibt der direkte Vergleich zu Cookies hier aus, denn Local Data Storage kommt nur clientseitig zum Einsatz. (weiterlesen…)