Quick Win: SpriteCow

Natürlich verwenden wir bei unseren großen Webprojekten längst CSS Sprites, denn wir müssen Serveranfragen und Dateigrößen so gering wie möglich halten, damit die Seiten rennen. Kein Icon darf alleine als einzelne Grafik gespeichert werden.

Das Erstellen des Sprites gehört allerdings nicht zu meinem Lieblingsbeschäftigungen. Es nimmt einfach zu viel Zeit in Anspruch, für jedes einzelne Icon die Position, Höhe und Breite in Photoshop abzumessen, um dann die entsprechenden CSS-Regeln festzulegen. Da gibt es spannendere Aufgaben. Einen Sprite-Generator habe ich nie verwendet, ich muss einfach selbst die Kontrolle über die Positionen der Grafiken im Sprite haben.

Nun bin ich zufällig auf SpriteCow gestoßen. Dieser geniale Webservice übernimmt den lästigen Job des Abmessens und gibt die entsprechenden CSS Regeln für Background-Position, Height und Width zurück.

Dazu muss man nur sein Sprite hochladen und kann dann jede einzelne Grafik im Sprite anklicken. Alle gefüllten, benachbarten Pixel werden automatisch mit ausgewählt. Man kann auch mit gedrückter Maustaste einen Bereich auswählen, falls die Pixel der gewünschten Grafik nicht direkt nebeneinander liegen.

Quick Win: Responsive CSS Grids

CSS Grids wie 960.gs und BlueprintCSS dürften mittlerweile jedem bekannt sein. Sie helfen, die Website in ein festes Raster zu unterteilen und mehrspaltige Layouts umzusetzen. Nun beschäftigt uns ein Thema, das immer häufiger in den Entwickler-Blogs zu lesen ist: responsives Webdesign.

In letzter Zeit wurden einige Raster unter dem Grundsatz entwickelt, dass Websites für alle Bildschirmbreiten und Endgeräte optimiert sein sollten. Dabei reicht es nicht aus, die Breite der Website flexibel zu machen. Oft müssen Spalten neu angeordnet und Texte vergrößert werden, damit auch auf dem kleinsten Smartphone-Display der Inhalt optimal wahrzunehmen ist. Ich habe mir einige dieser Frameworks angeschaut und möchte hier zunächst drei sehr unterschiedliche Lösungen vorstellen.

Columnal CSS

Die Macher von Columnal haben sich vom 960 Grid inspirieren lassen. Die Maximalbreite beträgt jedoch 1140px. Bei kleineren Browserfenstern wird das Layout flexibel, bis sich schließlich bei geringster Breite die Spalten untereinander setzen.

Skeleton

Auch bei Skeleton wurden Ideen vom 960 Grid übernommen. Allerdings wird es nicht flexibel bei einer kleineren Breite als 960px, sondern setzt zunächst eine feste Breite von 768px. Auch für mobile Displays gibt es zwei feste Gesamtbreiten. Skeleton liefert auch einige Styles für Text, Formulare und sogar Tabs und Buttons mit, wodurch es sich gut zum Erstellen von Wireframes eignet.

SimpleGrid

Das SimpleGrid ist nicht an das 960 Grid angelehnt. Man muss z.B. keine Klassen für die erste bzw. letzte Spalte einer Reihe vergeben, was viele als Nachteil des 960 Grids sehen. Auch sonst verhält sich das SimpleGrid anders: Es gibt 4 feste Breiten für große Bildschirme, wobei das Layout für Displays unter 720px Breite flexibel wird. Ein Vorteil vom SimpleGrid ist, dass sich auch die Schriftgröße je nach Auflösung anpasst.

Diese drei Frameworks helfen auf sehr unterschiedlichen Wegen, ein responsives Layout umzusetzen. Es gibt noch unzählige andere Frameworks für diesen Zweck. Gerne könnt ihr eure Favoriten in einem Kommentar vorstellen.

Quick Win: Javascript Tests in Jenkins integrieren

„untested code is broken code“

Nicht nur Hardliner werden zustimmen. Natürlich gilt das auch für Javascript, insbesondere da heutzutage viel Logik in den Client verlagert wird.

Tests für Javascript-Code lassen sich recht einfach z.B. mit qunit schreiben. Der Testcase ist dann eine HTML-Datei, die Javascript enthält und einfach im Browser geöffnet werden kann. Man sieht dort direkt, ob der Test durchgelaufen oder fehlgeschlagen ist.

Nun sollen diese Tests auch in den kontinuierlichen Build-Prozess integriert sein, da wohl kaum jemand die Tests ständig per Hand aufrufen will. In unserem Fall integrieren wir die Tests dafür in Jenkins. (weiterlesen…)

Recap: International PHP Conference 2011

“Besser spät als nie”, sagt man doch so schön. Das gleiche gilt nun auch für unseren kleinen Abriss über die International PHP Conference 2011. Gab es doch dieses Jahr schon, denkt ihr? Richtig, nämlich im Frühjahr. Da findet die sogenannte “Spring Edition” statt. Die Hauptkonferenz wird dagegen immer im Herbst zusammen mit der WebTech veranstaltet.

Die IPC ist in der deutschsprachigen PHP-Szene ja inzwischen eine feste Institution. Will man wissen, was das PHP-Umfeld derzeit bewegt und mit den Köpfen, die hinter Projekten wie PHPUnit stecken, ein wenig plaudern, dann ist man hier genau richtig.

Kanban Pizza, agile Pudel und weitere Highlights

Über jede Session zu berichten, die ich besucht habe, würde sicherlich zu lange dauern, daher möchte ich einfach nur auf ein paar kleine “Schmankerl” eingehen. Denn für mich war auf der Konferenz vor allem der “Methoden Day” interessant, bei dem es allerlei Stoff zum Thema Agile & Lean gab. (weiterlesen…)

Recap: Webmontag Frankfurt #33

Alle klatschen, allgemeines Dankesagen, Brotfabrik-Harry bekommt eine Schachtel „Merci“ und man fragt sich „Schon wieder ein Jahr rum?“. Aber beginnen wir am Anfang des Abends, und betrachten den letzten, ziemlich abwechslungsreichen Webmontag in 2011 im, ähm, Zeitraffer ;)

Unity 3D

3D-Spieleengine auch für Webprojekte – In der ersten Session gab Roman Engel von Daubit einen kleinen Überblick, wie mit Unity 3D Spiele entstehen. Dank Unity kann gleich für mehrere Plattformen entwickelt werden, wie z.B. iOS, Android, Browser, Xbox 360 oder PS3. Entweder war das Publikum noch nicht ganz angekommen oder nur wenig Spiele-Entwickler im Raum, jedenfalls gab es auf Romans Fragen recht wenig Feedback.

Die Macht des Überraschungseffekts beim Netzwerken

Make friends, not contacts. Hilf anderen, sei interessant. Von Karim Mustaghni, Head of Relations bei Hanse Ventures, erfuhr man nicht wirklich viel Neues über das Netzwerken, er hatte aber auch keinen “never-heard-before-Ph.D.-Ted-Talk“ (oder so ähnlich stand es auf dem ersten Slide) angekündigt. Seine Beispiele dürften trotzdem vielen in Erinnerung bleiben: Darren als großer, gelber Punkt im Qasar Circle (klingt besser als Netzwerk, oder?), sich einfach mal als zukünftiger Sponsor ausgeben, wenn man nicht auf die TechCrunch-Party kommt (Arrogance als Tool nutzen) oder eine Visitenkarte ohne Kontaktdaten rausgeben (surprise effect). (weiterlesen…)

Daten aus MySQL in Excel importieren

Nicht selten kommt es vor, dass man Daten aus einer externen Quelle in Excel importieren möchte. Für einmalige Imports bietet sich hier oft das CSV-Format an. Möchte man die Daten allerdings leicht aktualisieren können, ist es weitaus komfortabler, eine direkte Verbindung zur Datenbank zu haben.

Wie funktioniert das?

Hierfür wollen wir kurz betrachten, wie man mit Excel auf eine MySQL-Datenbank zugreifen kann.

Zudem gibt es auch die nicht ganz offensichtliche Möglichkeit, eigene (komplexere) SQL-Queries zu nutzen. Als Voraussetzung muss Oracles MySQL ODBC Connector installiert sein. Er kann hier kostenlos heruntergeladen werden (Man muss sich nicht registrieren, sondern kann einfach auch „No thanks, just take me to the downloads!“ klicken).

In Excel muss man dann im Bereich „Daten“ auf „Aus anderen Quellen“ klicken und hier „Von Microsoft Query“ auswählen.

(weiterlesen…)

Quick Win: Eigene Code-Schnipsel in der Code-Completion

Neu in der Quick Win-Serie reihe ich mich nun mit Themen rund um die iOS-Entwicklung ein. Dabei wird es mal um kompliziertere Techniken zum Programmieren gehen oder, so wie in diesem Beitrag, um die Optimierung der Entwicklungsumgebung.

Wäre es nicht cool, wenn man durch ein Keyword direkt einen ganzen Code-Block erzeugen könnte, so wie es z.B. Xcode standardmäßig mit for-Schleifen macht? „For“ eintippen, Enter drücken, fertig? Kein Problem:

Häufig gibt es bei mir Code-Abschnitte, die 1:1 (mit anderen Variablen) wiederverwendet werden. Hierfür gibt es in Xcode 4 die sogenannte „Code Snippet Library“, die ihr im rechten Arbeitsbereich (Utilities) findet. Dort können eigene Code-Schnipsel hinzugefügt und mit einem Shortcut versehen werden. So geht’s: (weiterlesen…)

Recap: Webmontag Frankfurt #31

Webmontag, der 31. in Frankfurt.

In seiner Begrüßung konnte Darren Cooper seine Freude und ein wenig Stolz über die mittlerweile stattliche Zahl an Veranstaltungen nicht verbergen. Noch besser gestimmt haben dürfte ihn und Ali Pasha Foroughi, dass sich der Veranstaltungssaal in der Brotfabrik nach dem ersten Programmpunkt „Ankommen, Tach sagen, Drinks bestellen“ bis auf den letzten Sitzplatz gefüllt hatte. Nach der kurzen Sommerpause waren wohl einige hungrig auf Networking, Trends und Vorträge zum Thema Web 2.0.

Cloud in Plain German

Jörg Thoß, Solution Sales Manager bei Open Text, eröffnete den eigentlichen Teil des Abends mit seiner Präsentation „Cloud in Plain German“. Anschaulich erläuterte er Sinn und Zweck von Cloud-Systemen, ohne in Fach-Chinesisch zu verfallen.

Dass dieser Webmontag bewusst ein breiteres Themenfeld abdecken würde als bisher, hatte Darren Cooper bereits in seiner Begrüßung angekündigt. Umgesetzt wurde es spätestens in den Vorträgen 2 und 3, die man unter dem Begriff „Der Trend geht zum Selbstmachen“ zusammenfassen kann:

Do it yourself I

Annabelle Hornung und Tine Nowak waren gekommen, um die Ausstellung „Do It Yourself – Die Mitmach-Revolution“ vorzustellen, die ab dem 24. August 2011 (19 Uhr) im Museum für Kommunikation in Frankfurt zu sehen ist. Und der Untertitel ist Programm: Besucher dürfen Vitrinen mit eigenen DIY-Exponaten füllen und sich gegenseitig über Tipps und Tricks austauschen.
(weiterlesen…)

Quick Win: Time Logging mit Firebug

Wie der Titel schon verrät, handelt es sich hier um einen einfachen Codeschnipsel zum Tracken von Ausführungszeiten. Dazu bietet Firebug zwei Varianten: Zum einen das einfache console.time, welches die Ausführungszeit vom Aufruf bis zum Ende der Funktion misst, und als Summe in einem Wert ausgibt. Zum anderen das komplexer gebündelte console.profile, welches ich bevorzuge. Es gibt zusätzlich noch Aufschluss darüber, wie viele Funktionen ausgeführt wurden und wie lange.

console.profile

In meiner Demo, wird eine vom Nutzer definierte Anzahl von Zufallszahlen zwischen 0-10 in ein Array geschrieben und anschließend ausgegeben:

console.profile('foobar');

// do something
// ***************

console.profileEnd('foobar');

BTW: Ich habe die Eingabe auf 6 Stellen begrenzt, damit das Skript nicht den Browser lahm legt. Es sei so viel gesagt: Die Eingabe von 999999 ist schon etwas für die Mutigen unter uns ;)
(weiterlesen…)

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…)