Mit Opera einen HTML5-Videoplayer bauen

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.

10k Apart (by Microsoft)

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…

Webkongress Erlangen 2010

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.

Candies Relaunch

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.

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

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.

IE9, SVG und Canvas

Ja, was macht eigentlich SVG? Die Frage kommt zu Recht auf, wo doch Microsoft gerade vollmundig für IE9 SVG-Unterstützung angekündigt hat. Totgesagte leben eben länger, hier kommt mir aber ein englische Sprichwort in den Sinn: flogging a dead horse! Tatsächlich hat sich SVG bis heute nicht durchgesetzt und daran Mitschuld trägt – wie so oft – Microsoft, wer hätte das gedacht. Jahrelang hat man an VML festgehalten.

Aber auch sonst hat sich SVG nicht sonderlich im Netz verbreitet: obwohl man beispielsweise in Adobe Illustrator schon lange nach SVG speichern kann, findet man ausser in der Wikipedia im Web nur seltentst SVG-Grafiken, dafür aber viele viele in Flash umgesetzte Vektorbilder. Im Gegenzug ist die Unterstützung des SVG-Standards in Webbrowsern auch nicht gerade vollständig: neueste Opera-Versionen bringen es auf eine Unterstützung von rund 95% des Standards, die Webkit(s) immerhin noch auf rund 83%. Die 3.7er Previewversion von Firefox bringt dagegen nur etwa 72% SVG-Umsetzung mit. Am weitesten hinten liegt natürlich die PLatform Preview von IE9 mit derzeit 29% (Quelle: Wikipedia). Aber da mag ja noch etwas kommen.

Soll man nun Microsoft danken, und sich darauf freuen, dass man in einigen Jahren endlich Vektorgrafiken auf seinen Seiten nutzen kann ohne den User ein Plugin installieren zu lassen? Mich dünkt, M$ setzt nun Jahre zu spät auf den alten SVG-Zopf, einzig um HTML5-Canvas auszulassen und damit einem ähnlichen Schicksal auszuliefern wie es SVG vor Jahren hatte. Denn zur Umsetzung von Canvas schweigt man bei Microsoft ausgerechnet. Noch ist es nicht raus, aber ich sehe das kommen (denkt an meine Worte).

SVG kann dabei zum Glück nicht mehr unter die Räder kommen, es ist längst platt gewalzt und begraben.

HTML5 video markup, compatibility and playback

HTML5 video has arrived and is deployed across a wide enough user base for sites and developers to stand up and pay attention. File support and markup varies by browser and there is currently no native support in Internet Explorer.

Sublime HTML5 Video Player

no browser plugin, no Flash dependencies, Custom styled controls, Full-window mode, Full-screen mode by alt-clicking on the full-window button (currently only supported in latest WebKit Nightly Builds), Features we plan to add: Firefox support, Volume controls, IE support by falling back to Flash, Supported Browsers: Safari (v4.0.4+), Google Chrome (v4.0+).

jQSlickWrap

jQSlickWrap is a plugin for jQuery which enables you to easily and accurately wrap your text around the content of floated images. Nutzt HTML5-Canvas.

Geolocating Webbrowser

Hmm, obwohl George Orwells 1984 praktisch schon vor der Tür steht finde ich immer wieder gefallen an mobilen Webanwendungen und damit natürlich auch Dinge wie HTML5 Geolocating im Webbrowser mit Javascript. Über eine Ssssst… einfache API erfährt man namlich bei Firefox 3.5 und Safari 3.0 (auf dem iPhone), wo sich der eben Browsende gerade befindet, und zwar u.a. mit den Werten geografische Länge und Breite und Höhe, sowie Richtung und Geschwindigkeit. Das funktioniert bei Geräten mit GPS ernsthaft, ansonsten werden Einwahlpunkt und ähnliches herangezogen. Cooles Feature, my ass.