Codecandies

PPK weist uns völlig treffend darauf hin, dass media queries allein noch nicht der Weisheit letzter Schlus sind und das man mit Javascript kombinieren müssen wird.

in den Browser eingebauten Players abzuspielen. Dieser Fakt ist ja nun inzwischen hinreichend bekannt. Auch schon gehört hat man davon, dass man diesen Videoplayer selbst gestalten kann, also eigene Buttons, Seekbar und Controls hinzufügen kann. Aber wie genau macht man das?

Bei Opera gibt es genau zu dieser Frage nun ein ausführliches Tutorial: Building a custom HTML5 video player with CSS3 and jQuery. Ganz großes Kino.

Unter dem klanghaften Motto »Sprite up the web« finden wir das Spritely jQuery Plugin, das angetreten ist, die Webseitenwelt mit Spriteanimation ein wenig hübscher zu machen. Und wirklich, dass was wir auf der Seite sehen, und auch einige der Beispiele aus der Early Adopter Gallery, machen wirklich Spass.

Das Plugin stellt zwei Methoden zur Verügung, und zwar sprite(), mit der Elemente aus Einzelbildern animiert werden könne, und pan(), mit der (mehrere) Endloshintergrundbilder animiert verschoben werden können. Das alles soll in den Browsern IE6+, Firefox, Safari, Chrome und Opera funktionieren und außerdem einen angepassten Modus für iPhone, Android und iPad haben. Bitte schön: alles natürlich ohne Flash, Silverlight oder sonstigen Rotz.

EDerzeit liegt Spritely in Version 0.2 vor, es ist also noch Entwicklungsluft nach oben, aber das sieht alles schon ganz brauchbar aus. Bitte testen.

Hurra, ein Wettbewerb.

Es hat sich längst rumgesprochen, unter dem Buzzword HTML5 hat die Entwicklung kleiner Applikationen im Web mit standardkonformen HTML, CSS3 und Javascript Einzug in die Welt der Webseiten gehalten. Eines Tages wird man wahrscheinlich doch noch davon sprechen können, HTML5-Seiten programmiert zu haben (oh-oh!).

Dabei sind die Apps die man jetzt schon kennt oft schwergewichtige Ungetüme aus HTML und vor allem Javascript. Das muss natürlich nicht so sein. Um all dem Rechnung zu tragen (und ein wenig Werbung zu betreiben) haben MIX (≅ Microsoft) und An Event Apart einen Wettbewerb ausgerufen: gesucht werden kleine HTML5-Apps, kleiner als 10K, wobei die Verwendung von jQuery, Prototype und Typekit als Webservices ausgenommen sind. Laufen sollen die Apps in der IE9 Preview, Firefox und einem Webkit Browser. Na, dann mal los…

Derek Powazek über seine Erfahrungen beim Design einer iPad-App und die Abgrenzung vom Webdesign.

Über die Jahre hat sich in meiner Toolbox ganz schön was angesammelt.
Foto: Some rights reserved by See-ming Lee 李思明 SML

Schon vor ewig hatte der gute Frank Bueltge einen Artikel über seine WordPress Entwickler Toolbox gepostet und seitdem habe ich einen ähnlichen Artikel in die Pipe gelegt, der nun endlich fertig ist. Die Frage, womit ich dieses Blog entwickle lässt sich von der Frage, womit ich auch professionell arbeite, nicht trennen. Dieses Blog (und die anderen zuvor) ist ja immer die Spielwiese für das, was ich auf Arbeit mache und umgekehrt, setze ich im Arbeitsleben Gelerntes hier gerne ein und um. Von daher kann ich nur meinen globalen Werkzeugkasten präsentieren, für das, was ich so mache… Digitalkreativer und Internethandwerker.

Betriebsystem(e)

Ganz grundsätzlich arbeite ich seit Jahren fast nur noch mit Apple-Rechnern, namentlich zur Zeit einem MacBook Pro (2.66 GHz Intel Core 2 Duo, 4GB RAM). Zu Hause steht noch ein kleiner Mac mini. Vor kurzem wurde allerdings zusätzlich ein Samsung Netbook angeschafft, dessen mitgeliefertes Windows 7 Stalker geplättet und durch das aktuelle Netbook-Ubuntu ersetzt. Mein Arbeitgeber stellt mir zusätzlich ein iPhone und zum Testen auch regelmäßig ein iPad. Entwickelt wird bei mir aber eigentlich ausschließlich auf dem MacBook Pro.

Editor/IDE

Ich weiss gar nicht wirklich, ob es derzeit ein sinnvolles IDE für HTML und CSS auf dem Mac gibt. Ich habe in den Jahren viel ausprobiert, Aptana, NetBeans, Espresso, Coda, am Ende des Tages bin ich immer wieder zu meinem heißgeliebten Textmate zurückgekehrt. Textmate ist eben ausdrücklich keine IDE, sondern ein Texteditor, der praktisch alles kann.

Ja, das ist richtig, ich mache alles mit dem Texteditor, bis hin zu kleineren jQuery-Projekten. Unterstützt wird dies durch viele viele Textmate-Bundles, die beispielsweise JS Lint integrieren, für ordentliche Formatierung sorgen, gegen den W3C Validator checken, SVN (oder Git oder Mercurial) bedienen und so weiter und so fort. Hinzu kommen Templates und eine prima Projektverwaltung.

Serverkontakt

Obwohl ich gerne bis zur letzten Sekunde lokal entwickle (Server zur Verfügung gestellt von MAMP), kommt man natürlich ohne Serverkontakt nicht aus. Wenn ich dabei auf das vorsintflutliche und leider noch viel zu verbreitete FTP angewiesen bin, dann nutze ich dazu @work Transmit und sonst gerne Cyberduck. Viel lieber mag ich allerdings entfernte Dateisysteme mounten, mit MacFusion und MacFUSE. Ich kann aber auch eine Shell bedienen und direkt auf dem Server mit vi. Ich habe auch schon mal mit macvim gespielt, für vi-Abhängige am Mac jedenfalls das Richtige. Meine terminal.app erreiche ich übrigens mit dem coolen Visor, aber das ist natürlich nur Spielerei.

Grafik, Konzept

Da ich mir privat kein Photoshop leisten will und kann, und im Beruf nicht zu denen gehöre, die standardmäßig damit ausgestattet sind, habe ich mir vor einiger Zeit schon Acorn zugelegt. Das macht zumindest alles, was man im Blogalltag so braucht und öffnet sogar PSDs (was auch im Büro manchmal hilfreich ist). Zum Webdesign eignet es sich aber weniger. Hin und wieder spiele ich mit GIMP, aber mal ehrlich… naja.

Zur graphischen Analyse von Webseiten (und damit ich mir die Standardpixelwerte von zeit.de nicht merken muss), habe ich mir xScope gekauft. Dieses wirklich grandiose Tool misst alles am Bildschirm aus, zeigt Farbwerte, macht globale Hilfslinien, Grids und und und…

Im Beruf brauche ich noch zusätzlich Helfer für die Visualisierung von Seiten, Abläufen, etc., bspw. bei der Konzeption. Standardmäßig nutzen wir Omni Graffle, was ich auch sehr mag. Trotzdem habe ich mich schon an Balsamiq versucht, da ich Mockups, die aussehen wie Mockups für pädagogisch sinnvoll halte. Zumal wir dann sehr schnell zu HTML-Prototypen übergehen, da muss man Grenzen ziehen. In Omni Graffle nutze ich deswegen das Web Sketch Interface Stencil.

Firefox ist immer noch die Nummer 1.

Browser, Virtualisierung

Ich entwickle nach wie vor im Firefox. Ich habe mit Chrome geliebäugelt, aber es geht doch nichts über Firefox mit Firebug. Dazu habe ich noch ein paar Addons am Start: natürlich die Web Developer Extension, den User Agent Switcher, den Fangs Screenreader und die Selenium IDE und die passenden Selenium IDE Buttons. Natürlich habe ich trotzdem zusätzlich jede Menge Browser auf dem Rechner installiert, zum Testen eben.

Dafür betreibe ich auch gezwungenermaßen Virtualisierung und zwar mit VirtualBox, wo diverse Auswüchse der Windows-Ära zu Hause sind und diverse Browserversionen von IE verfügbar machen.

Und sonst so?

Puh, das war ja eine lange Liste. Aber alle diese Programme und Tools brauche ich für meinen gelungenen Arbeitsalltag. Und es werden immer mehr. Seitdem ich zum Beispiel viel mit dem iPad zu tun habe, nutze ich immer öfter Simplenote zusammen mit Notational Velocity und gerne auch in Kombination mit Dropbox, mit dessen Hilfe ich Dateien zwischen meinen verschiedenen Rechnern share. Und man will ja auch kommunizieren, obwohl sich immer alle beschweren, dass ich viel zu selten mein Adium am Start habe. Und Gmail und Tweetie und Skype…

Eine mittlere Premiere gibt es für den 7. und 8. Oktober in diesem Jahr zu verkünden. Der Webkongress Erlangen findet zu diesem Termin zwar schon zum dritten Mal statt, ich werde dort aber zum erste Male zu hören sein. Unter dem Titel »Relaunching ZEIT ONLINE« werde ich ein wenig über den Relaunch von zeit.de im September 2009, den Weg dorthin und den Erlebnissen seitdem berichten. Dabei geht es natürlich in der Hauptsache um den Fachbereich Frontendentwicklung und -technologie, sowie meine immerwehrenden Freunde: Usabilty und Accessibilty.

Nun kommen natürlich wegen mir alleine zu wenig Teilnehmer zu einem Kongress, deswegen sind weitere hochkarätige Webexperten geladen worden, bspw. Jens Grochtdreis, Vladimir Simovic und Alvar Freude. Übergeordnetes Thema des Kongresses sind Lösungen für barrierefreie Webseiten, soll heissen es geht nicht mehr nur um die Technik und den Prozess, sondern vielmehr um Webangebote, die diese Techniken auch ein- und umsetzen.

Mehr gibt es auf der Homepage des WKE 2010 nachzulesen. Man sieht sich.

Was Feedlesern gar nicht auffällt, ist selbst für Besucher der Artikelseiten von Codecandies nur schwierig zu entdecken: am Freitag hat Codecandies ein neues Template bekommen. Dabei hat sich an der Artikeln nicht viel geändert, dafür erstrahlen die Homepage und alle Übersichtsseiten in neuem Glanze, nachdem ich hier in letzter Zeit viel herumexperimentiert hatte.

Dabei habe ich vor allem darauf Wert gelegt, viel der Techniken auszuprobieren, die ich in den letzten Wochen und Monaten gelernt und an anderen Stellen gelernt habe. Darum ist auch viel mehr unter der Motorhaube passiert, als die Dinge, die man nach aussen sehen kann. Namentlich sind das: Nutzung vieler neuer HTML5-Elemente, Verschlankung des CSS-Codes und Nutzung von CSS media queries um eine angepasste Version für das iPad und Browser mit verkleinertem Fenster anzubieten, Verschlankung des Javascriptcodes, Verbesserung der WordPress-Templates und meiner geliebten functions.php. Aber eins nach dem anderen.

Welcome figure und figcaption

Das neue HTML5-Element figure gehört wirklich zu den sinnvollen Elementen, die schon immer gefehlt haben. Bei figcaption allein bin ich mir nicht so sicher. Der Name zeigt schon, dass man Schwierigkeiten hatte, das neue Element zu integrieren. In einem früheren Stadium war es auch tatsächlich geplant, die Elemente in figure als Definitionslisten zu gestalten. Mit diese Semantik war man schlussendlich aber nicht zufrieden, weshalb man ein eigenes Element erfinden musste und das erhielt den üblen Namen: figcaption. What a word. Ihhhh. Aber sei’s drum, beide Elemente finden sich nun prominent in der Homepage wieder.

Außerdem habe ich die Seite, nicht nur visuell, sondern eben auch im Code, in sections unterteilt. Die HTML5-Elemente header, article , footer und noch ein paar mehr, waren schon vor diesem Relaunch Teil des Codes. Damit bin ich der HTML5fizierung der Seite schon ein ganzes Stück weiter gekommen, ganz abseits der Buzzwordklopperei, rein im Code. Nun müsste man die Elemente nur noch ordentlich in den Artikeln nutzen können, ohne das WordPress anfängt rumzumucken, aber da kümmere ich mich auch noch drum.

Eine neue Brotschrift gibt’s nun auch, hier geht Droid Serif ins Rennen und ersetzt die Georgia, wo sie kann.

CSS Media Queries

Man konnte ja schon vorher lesen, dass ich mich in der Vorbereitung auf das iPad schon ausgiebig mit den praktischen Media-Queries auseinanderhesetzt habe. Nun habe ich auch hier im Blog eine entsprechende Regeln implementiert. Ab sofort bekommen das iPhone im Portraitformat und Browser deren Fensterbreite unter 920px liegt, eine verschmälerte Version der Seite angezeigt. Das kann ja jeder, der mit einem modernen Browser hier vorbeischaut leicht nachvollziehen, sonst hier auch mal ein Beispiel: so sieht’s breit aus:

Und so die schmale Version, 620px-einspaltig. Eigentlich hatte ich die schmale Version im normalen Browser nur zum Testen genutzt, bis mir am Netbook auffiel, dass das natürlich auch für den Firefox durchaus Sinn machen kann.

Der eigentliche Seitencontent ist 940px breit, ich habe 20px Karenz gelassen, weil mir auffiel, dass wenn man bspw. genau 940px nimmt, der Sprung zur schmalen Version auch passiert, wenn er gar nicht nötig ist, zum Beispiel, wenn man das Fentser genau auf Contentbreite bringen will. Insgesamt stört mich der Moment des schwitchens ein wenig, das ist schade, das das so abrupt erfolgt.

@media only screen and (max-width:920px), only screen and (max-device-width: 768px) and (orientation:portrait) { … }

Für das iPad im Landscape-Modus wird übrigens kein spezielles CSS geliefert. Stattdessen habe ich versucht, die normale Seite so iPad gerecht wie möglich zu gestalten.

Zudem werden wohl nicht alle art directed Artikel in die schmale Version passen. Da kann der geneigte iPad-Nutzer ja noch den Landscape-Modus nutzen.

WordPress- und/oder Javascriptcode

Nach längerer Zeit bin ich auch mal dabei gegangen und habe meine functions.php ein wenig aufgeräumt. Da meine Templates immer ziemlich egozentrisch gestaltet sind, habe ich keine Plugins gebaut, sondern alles was ich an zusätzlichen Funktionen benötigte in diese Datei codiert. Kann man machen, ist wie gesagt nicht so freundlich, wenn man das Theme veröffentlichen will. In der genannten Datei hat sich die letzten Jahre über aber auch ziemlich viel Müll angesammelt, den ich ersatzlos entsorgt habe.

Für meine art directed Artikel habe ich mir ja selbst eine kleine Erweiterung geschrieben, mit der man zusätzliche CSS-Sourcen als Meta-Feld an den Artikel hängen kann. Ich habe mir nun das Art Direction Plugin nocheinmal genauer angesehen und es wieder verworfen, nicht nur wegen der dämlichen Zeile Pay your respects to print, get Art Direction. auf der Plugin-Seite, sondern auch weil ich es für überflüssig halte. Stattdessen habe ich meine Lösung erweitert und verbessert, sowie das Silbentrennungsscript als Option auch für andere Artikel zugänglich gemacht.

Womit wir beim Javascript sind, denn auch hier habe ich ein wenig den Hammer kreisen lassen. Früher globale Scripte, die nur auf einigen wenigen Seiten gebraucht wurden, werden nun nur noch an den entsprechenden Orten geladen. Dafür habe ich mit meiner selbstgeschriebenem Artikelgalerie mal wieder echten Betacode auf Euch losgelassen. Das ist wie immer work in progress.

A CSS3 Property That Works in Every Browser. Muss man sich einfach mal merken.

Früher als im TV kamen die knuddeligen japanischen Zeichentrickfiguren in das deutsche Kino. Schon 1961 wurde der von MGM vertriebene »Der Zauberer und die Banditen« (engl. Titel »Magic Boy«, Originaltitel »Sasuke the Ninja Boy«) in den deutschen Kinos gezeigt. Produziert wurde er 1959 als zweites Werk von Toei Animation, die uns viel später Dragoball, Sailor Moon oder One Piece in die Wohnzimmer brachten.

Seitdem gab es in Deutschland nicht sonderlich viele Animes im Kino zu bewundern, seit 1961 vielleicht 40 Stück. Und in den 70ern und 80ern war das, was es zu sehen gab nicht wirklich erwähnenswert. Ausser vielleicht »Perix der Kater und die drei Mausketiere« von 1970, weil das nämlich widerum der erste Anime war, der in den Kinos der DDR gezeigt wurde und zwar nur ein Jahr später. 1974 brachte man außerdem einen Biene Maja „Film” in die Kinos, der aber nur aus zusammengeschnittenen Folgen bestand. Die gleiche Frechheit wiederholte sich nocheinmal 1978 mit Wickie, sowie 1986 mit Nils Holgersson.

1984 dann der erste Lichtblick, mit »Lupin Sansei: Cagliostro no Shiro« oder »Die Jäger des Cagliostro« oder »Hardyman schafft alle – Freiheit für Prinzessin Yasmin« (Videotitel) kommt der erste Film unter der Regie von Hayao Miyazaki ins deutsche Kino. Ein Flop mithin, dafür aber auf VHS-Kassetten wohl erfolgreicher.

1991, dreißig Jahre nach Magic Boy und drei Jahre nach seiner Produktion, erreicht dann endlich der cineastische Anime-Meilenstein die deutschen Kinos: »Akira«. Für mich markiert er den Wechsel vom Kinder-Anime zum Erwachsenen-Genre, denn er beendete eine fast 10 jährige Animepause bei mir. Und gleichzeitig ist Akira auch der erste Manga, den ich gekauft habe. Zufälligerweise war das auch die erste Manga-Serie, die man in Deutschland kaufen konnte (allerdings noch in gespiegelter Bildreihenfolge und daher mit diversen Änderungen zum Original). Akira jedenfalls stellt als Kinofilm, wie als Buch, eine neue Qualität dar, die im Westen bis dahin noch nicht zu sehen war.

Sechs Jahre später sorgte dann »Ghost In The Shell« endgültig dafür, dass Manga und Anime ihren Platz in der deutschsprachigen Popkultur gefunden haben. Damit war sozusagen das Fundament, dass die ersten Kinderserien in den Siebzigern legten, endlich bebaut. So war es jedenfalls bei mir. ;) Denn seitdem verschlinge ich jeden Anime, dessen ich habhaft werden kann. Und das waren dann noch so einige. Wobei mir die Werke des schon vielzitierten Herrn Myazaki aus dem Studio Ghibli inzwischen die liebsten sind. Und das sind dann ja oft auch wieder Kinderfilme.