jQuery Europe 2013, Tag 2

jquery-europe

Am 20 bis 22. Februar fand der europäische Ableger der jQuery Conference statt. Dieser Post besteht aus einer Zusammenfassung von Tag 2 der Konferenz. Die Zusammenfassung von Tag 1 wurde letzte Woche veröffentlicht. jQuery Mobile and Responsive Web Design – … Weiterlesen

Terrific – a Frontend Development Framework goes Open Source

terrifically.org

Der Frontend Entwicklungsprozess wird durch die rasante Technologie- und Browserentwicklung immer komplexer. Die stetig steigende Vielzahl von Zielgeräten und Auflösungen, Animationen, CSS3, HTML5 etc. tun ihr Bestes, um die Aufwände und die Komplexität schon während der Konzeptionsphase zu erhöhen. Die unendlichen … Weiterlesen

IE support war gestern. Chrome für alle!

3875-Chrome-Frame-Logo.png

Wie schon verschiedentlich berichtet wurde gibt es ein von Google entwickeltes Plugin für Internet Explorer (IE) namens Chrome Frame welches erlaubt in allen gängigen IE Versionen (6, 7, 8, 9) die Rendering Engine von Chrome zu benutzen. Bisher allerdings waren für die Installation Administratoren-Rechte notwendig. Die grosse Neuigkeit ist, dass Chrome Frame nun auch mit normalen Userrechten installiert werden kann. Meine Hoffnung ist das damit die Hemmschwelle Chrome Frame in einem Corporate-Umfeld einzusetzen sinkt. Somit sollte es in vielen Fällen möglich sein IE 6/7 Unterstützung mit Hilfe von Chrome Frame weg-zu-consulten!

HTML5 ohne Abstriche

HTML5 und CSS3 sind soeben einiges näher gerückt. Chrome Frame ermöglicht die Verwendung von HTML5 Features wie Canvas, SVG, WebM, <video>, <audio>, WebGL, CSS Animations, WebSockets, etc mit der Geschwindigkeit wie man sie von Chrome kennt.

Natürlich ist das keine perfekte Lösung, einen Browser im Browser laufen zu lassen: Kontextmenüs kommen von Chrome, IE Erweiterungen sind nicht verfügbar und unbedarfte User könnten potentiell etwas verwirrt werden. Aber gemessen am verhältnislos grossen Aufwand der IE in der Frontend-Entwicklung erzwingt und den massiven Einschränkungen, die sich aus der Unterstützung dieses „Browsers“ ergeben, ist Chrome Frame wohl doch ein Riesengewinn. Chrome Frame ist Open Source und macht meines Erachtens IE 6/7 sicherer und nicht unsicherer, wie Microsoft behauptet.

Wie funktionierts?

Chrome Frame funktioniert folgendermassen: Eine Site, die feststellt, dass der User mit einer nicht unterstützten IE Version surft, kann dem User die Installation von Chrome Frame als IE Plugin vorschlagen. (Hier ist es hilfreich wenn die IT-Umgebung des Users den Download nicht blockiert.) Nach erfolgter Installation kann die Site Chrome Frame als Rendering Engine verlangen. Voilà, der User ist in der Gegenwart des Webs angekommen.

Ich empfehle wenn möglich in IE 6 und 7 Chrome Frame zu verwenden. Ironischerweise haben dann die Nutzer von IE 6 und 7 mehr vom Web als User, die mit IE 8 oder 9 surfen.

Links

Google Chrome Frame Home
Wikipedia: Chrome Frame
Chrome Frame: Developer Guide

Vortrag: Digital Publishing rocks

Auf Einladung von Digicomp durften Raphael und ich unsere Erfahrungen bzgl. Digital Publishing, insbesondere auf Mobile Devices/Tablets vorstellen.

3641-5833369238_c9a9db3076_z-thumb-500x281-3640.jpg

Ausgangslage war, dass weltweit bereits über 25 Mio iPads verkauft wurden (und die Konkurrenz schläft nicht) – Mobile ist somit Lifestyle und das iPad dient als Türöffner für den Mauerfall im Publishing – Von der digitalen Ausgabe des Geschäftsberichts, Katalogen über Kundenmagazine bis hin zu komplexeren Anwendungen für Kunden oder Mitarbeiter z.B. im Aussendienst.
Für Unternehmen entsteht somit die Gelegenheit:
1) die eigene Marke zu stärken und
2) die Verbreitung der eigenen Publikationen zu erhöhen

Der Condé Nast Verlag hat es zum Beispiel geschafft, die Markenwerte des 90-jährigen New Yorker „excellence, polish, depth“ auf das digitale Format zu transferieren. Das Look&Feel der Print Publikation wurde zwar weitgehend beibehalten, die Comicsektion und die Bildreportagen, zwei der Hauptgründe der New Yorker-Leser, die Zeitschrift am Kiosk zu ergattern, wurden konzeptionell und redaktionell dem neuen Medium angepasst.

Der Verlag hat damit die Zukunftsfähigkeit seiner Flagship-Publikation dank globaler, digitaler Verbreitung und zeitgemässer Ansprache einer neuen, teils jüngeren Zielgruppe sichergestellt. Den Trend zu erkennen ist zwar lobenswert, purer Aktionismus sollte aber vermieden werden. Print ist nicht online und das Publikum hat hohe Erwartungen an intuitive Bedienungskonzepte.

Ran an den Case…

Folgende Elemente spielen bei der Konzeption eine zentrale Rolle:
Storytelling: Welche Geschichte kann ich erzählen, um meinem Publikum einen Mehrwert zu bieten?
Dramaturgie: Wie führe ich mein Publikum und wie erzähle ich meine Geschichte?
Prototyping: Sollte als Basis zur Darstellung der Idee, Überprüfung der Konzepte, Überzeugung des Managements und als Basis für den Technologie-Entscheid dienen.

Von der Konzeption und Art Direction bis zur Verbreitung des Tablet-Magazins ist es nicht weit. Anbieter wie Adobe, Mag+ oder Woodwing offerieren Tools, die Adobe InDesign als zentrale Schaltzentrale benutzen. Dies erlaubt eine Übernahme der bisherigen Druckdaten, eine effiziente Designanpassung, Weiterentwicklung um Navigationspfade und beispielsweise Multimedia Elemente, aber ebenso die Veröffentlichung der App. Die einfachsten Lizenzmodelle bewegen sich zwischen CHF 3’000.- und CHF 10’000.- pro Jahr.

Da punktet die Umsetzung in HTML5 vergleichsweise, wo keine direkten Lizenzkosten anfallen. Smartphones und Tablets sind mit Webbrowsern ausgestattet, welche die Technologie unterstützen. Eine Umsetzung in HTML5 kann somit auf allen verschiedenen Endgeräten eingesetzt werden.


Best Practice Beispiele

Wie zur Zeit mit Inhalten und Geschichten für verschiedene Zielgruppen und mit verschiedenen Zielen jongliert wird kann am Beispiel der folgenden Publikationen illustriert werden:
The New Yorker
Wired Magazin
Red Bulletin
Letter to Jane
ProfiPhoto
Vontobel Blue
Liberate Eden
Flipboard
Zite

HTML5 Update [Vortrag am Internet-Briefing]

Auf Einladung von Reto haben Thomas und ich heute mal auf unsere Erfahrungen mit HTML5 geblickt. Ausgangslage war die erlebte Realität im Bezug auf User Agents in Kundenprojekten und darauf folgte die Diskussion und Bewertung der folgenden Aspekte (bewusst weggelassen haben wir CSS3):
– Geolocation
– Video Support
– Web Storage
– Web Sockets
– PushState
– Web Forms
– Drag and Drop
– Semantik
– Canvas

Die Empfehlung ist stark über die Userbasis und deren Ausrüstung in unseren Projekten geprägt und hier ist es häufig zu früh oder der zusätzliche Nutzen ist (noch?) nicht gegeben. Sind die Zielplattform jedoch „Touch Phones“ so soll kein Weg an HTML5 vorbei führen… Und überhaupt sollte jede Konzeption mit der Lösung für Mobilgeräte beginnen und danach „nach oben“ skalieren (und nicht in die andere Richtung). Was auf dem Handy funktioniert, funktioniert überall!

Weitere Präsentationen von Namics.

Hier der Download:

HTML5 Update am Internet-Briefing [pdf, 11MB]

HTML 5 und andere: Häufigkeit von Doctypes in der Schweiz

In Vorbereitung eines Vortrags über HTML 5 fragte ich mich, wie häufig HTML 5 (resp. der „evolutive“ Doctype HTML) in der Schweiz aktuell genutzt wird. Vielen Dank für Urbans unkomplizierte Unterstützung beim rausfinden.

Die Grafik unten zeigt die Doctypes von des Base Pages einer Million Schweizer Domänen (Breitensuche mit 500’000 Domänen als Startpunkt) in der Übersicht. Kommentar erübrigt sich, ausser dass wir alle erstaunt waren, dass xhtml so einen riesigen Anteil ausmacht.

3583-haeufigkeit-doctypes-schweiz-juni2011-thumb-500x346-3582.png

Und die Antwort auf die Frage nach ist 2,6%.

Eindrücklich: Body Browser von Google

Das Ziel von HTML 5 (Abstand, gell Schnitzel) mit weniger Browser-Erweiterungen (PlugIns) auszukommen beginnt Formen anzunehmen. Die folgende Technologie-Demo von Google zeigt die Mächtigkeit von WebGL (3D Grafik-API als Teil des Canvas-Elementes): Google Body Browser.

Die schlechte Nachricht vorab. WebGL ist erst in sehr wenigen Browser(versionen) verfügbar. Konkret (nach meinem Wissen) im Firefox 4 Beta und ab der aktuellsten Version von Google Chrome. Bei beiden Browsern muss die Funktion zusätzlich aber aktiviert werden:

Firefox 4 Beta – Eingabe von about:config in der Adresszeile und dann…

2840-firefox_about_config.jpg

Google Chrome: Eingabe von about:flags in der Adresszeile und dann…

2841-chrome_about_flags.jpg

Womit man dann aber belohnt wird ist eindrücklich. Eine „zommbare“ Vektorgraphik verschiedener Detailebene des menschlichen Körpers mit einer Navigation im Stil von Google Earth. Alles „nur“ mit HTML 5.

2838-Body_Browser_2-thumb-500x455-2837.jpg

Und weil es so schön ist, hier noch ein Bild der integrierten Suchfunktion, welche den Körper mit entsprechenden Labels versieht.

2835-Body_Browser_1-thumb-500x455-2834.jpg

Und jetzt ausprobieren: Google Body Browser.

Die Zukunft des Webs

Letzte Woche habe ich meinen Orakel-Hut aufgesetzt und einen Vortrag auf der WebTech-Konferenz in Karlsruhe zur Zukunft des Webs gehalten. Natürlich habe ich wieder ein T-Shirt bekommen, was der eigentliche Grund dieses Blogeintrags ist, ;-) aber ehrlich gesagt finde ich es nicht so schön. Es ist einfarbig blau, und auf der Brust prangt groß das Wort „Speaker“, was ich etwas reißerisch finde.

Auch negativ das Rekordtief des Frauenanteils auf der Konferenz: von 65 Vortragenden nicht eine, null, zero Frau! Entsprechend gab es auch im Publikum einen Frauenanteil, der geringer war als der in einer Schwulendisco, und die wenigen anwesenden Frauen gehörten meist zum Catering-Team. Gleichberechtigung geht anders.

822-webkrauts-webtech-thumb-500x342-821.jpg

Schön war aber insbesondere der Thementag der Webkrauts (Foto). Während Eric Eggert sich mehr um CSS3, Webfonts und Browser APIs kümmerte, habe ich in meinem Vortrag heutige und zukünftige W3C-Technologien vorgestellt, hier die Links dazu. Darunter stechen insbesondere das HTML5 Canvas-Element, Video und 3D hervor:

Canvas kann Inhalte verzerren, drehen, wölben, filtern und einige Dinge mehr, und es ist dynamisch per JavaScript programmierbar.

&lt;video&gt;

direkt im Browser ohne Flash ermöglicht Unabhängigkeit von Adobe, was gerade für Geschäftsmodelle wie das von YouTube, Dailymotion oder die BBC wichtig ist. Darüberhinaus können Canvas und Video in Kombination spannende Effekte erzielen. Dailymotion hat ein paar davon in der Demo eingebaut.

Und 3D im Browser eröffnet völlig neue Möglichkeiten für Spiele und andere Anwendungen, bei denen per WebGL dreidimensionale Daten und Modelle effizient übertragen werden können. Stereoskopische Effekte wie im Film „Oben“ habe ich allerdings noch in keiner Browser-Demo gesehen.

Bislang ist Barrierefreiheit von den Browserherstellern in den neuen Technologien kaum berücksichtigt worden, aber die neugegründete HTML Accessibility Task Force, deren Mitglied ich bin, wird sich der Themen annehmen.

Uns steht jedenfalls eine sehr aufregende Zukunft bevor!

Mozilla Camp Europe

Irgendwie hat Namics einen Fetisch für T-Shirts. Es bloggen nicht nur manche Personen obsessiv darüber, mein Arbeitgeber möchte nun auch noch, dass ich jedesmal darüber blogge, wenn ich selbst ein T-Shirt bekomme!? Also, ich habe zwei T-Shirts geschenkt bekommen:

611-mozcamp-shirt.jpg 610-mozcamp-mobile.jpg

Das eine T-Shirt gehört zur Mozilla Mobile Community und hat auf der Vorderseite diesen verzweifelt gegen die Scheibe seines Sputnik hämmernden Weltraumbiber, auf der Rückseite den Spruch “You took back the Web. Now take it with you.” (eine Referenz auf das andere Shirt, “Take back the Web”), das zweite T-Shirt zeigt die Silhouette von Prag auf olivgrünem Grund mit schönen Jugendstil-Elementen.

Die Jugendstil-Elemente waren auch in Prag zu finden, denn dahin mußte ich reisen, um die beiden T-Shirts in Empfang zu nehmen. Von diesem bedeutenden Übergabeakt abgesehen mußte ich zuvor an einer Podiumsdiskussion über HTML5 teilnehmen und dabei etwas über die Barrierefreiheit des zukünftigen Standards erzählen. Ich weiß, Ihr interessiert Euch eigentlich nur für T-Shirts in diesem Blog, darum verzeiht, wenn ich ein wenig off-topic zu diesem Thema langweile:

615-mozcamp-tag.jpg Ich bin Invited Expert in der HTML-Arbeitsgruppe des W3C. Außerdem befasse ich mich seit ungefähr zehn Jahren mit dem barrierefreien Web. Wie kommt das nun zusammen? Vorerst gar nicht. Denn im Moment sind die neuen HTML-Elemente wie

&lt;section&gt;

oder

&lt;nav&gt;

für Blinde unsichtbar, denn sie werden noch nicht vom Browser maschinenlesbar-semantisch auf die Betriebssystemebene „übersetzt“. Hingegen erfasst der Browser die Rolle als Navigation hervorragend und lässt Screenreader „Menü“ vorlesen, wenn diese mit einem anderen Standard des W3C übermittelt wird, ARIA. Da muss also noch etwas getan werden. Ebenso weitgehend undefiniert sind die Bedienmechanismen für Video und Audio im Browser oder das Universaltalent Canvas. Die gute Nachricht: eine gemeinsame Task Force mit HTML– und Barrierefreiheitsexperten wird sich beim W3C dieses Themas annehmen. Denn wie wir alle wissen, profitieren Projekte davon, frühzeitig Barrierefreiheit ins Konzept zu zu integrieren, statt später aufwendig „ein bißchen“ Barrierefreiheit grob dranzudübeln. Und Euer bescheidener Gastgeber wird versuchen, dazu beizutragen. Dazu möchte ich zum Beispiel Mozilla-Genie Paul Rouget zu einem Panel bei der Konferenz South by Southwest einladen, wo er ein paar seiner progressiven Demos zeigen kann, mit deren Hilfe sich innovative Mensch-Computer-Schnittstellen realisieren lassen.

Ansonsten kann man sich das MozCamp ungefähr so vorstellen wie ein internationaleres, geekigeres Namics-Camp. Hier noch ein paar meiner Randnotizen von twitter:

  • Eine Mozilla-Kampagne zum Internet-Gesundheitscheck greift bereits das Zitat von Microsoft-Managerin Amy Bazdukas auf: “friends don’t let friends use IE6”. Zwar sind der größte Hemmschuh nach wie vor die großen Dinosaurier Unternehmen, deren IT-Abteilungen lieber auf ungeschützten Browserverkehr setzen als auf Updates ihrer internen, zehn Jahre alten Software. Aber wenn wir zumindest unseren Freunden und Verwandten einen ordentlichen Browser installieren, kommen sie ja vielleicht auf den Geschmack und lassen sich nicht mehr ewig am Arbeitsplatz vertrösten.
  • Damit Mozilla sich gegen die zunehmend agiler werdende Konkurrenz, und hier vor allem gegen Adobe, Silverlight und Gears, durchsetzen kann, müssen die Entwicklungszyklen schneller werden. Ziel ist es, alle 6 Monate ein großes Release zu machen. Darum müssen interne Prozesse entkoppelt werden, was nicht nur positive Auswirkungen auf die Testbarkeit von Nightly Builds hat, sondern auch auf die Stabilität des Browsers.
  • Firefox 3.6 ist für November geplant und wird skinbar über Personas sein, Video im Vollbildformat haben, CSS-Gradienten, JavaScript Ctypes. 3.7 könnte schon auf Android laufen. Und 4.0 kommt in einem Jahr mit Jetpack.
  • Jetpack lohnt sich etwas näher anzuschauen, denn dabei handelt es sich um eine Middleware für Mozilla-Extensions. Programmierer von Add-Ons müssen also nicht mehr bei Null beginnen, sondern haben einen bestimmten Grundumfang von Funktionen zur Verfügung. Dadurch steigt die Sicherheit, aber ich denke auch, dass die Qualität und Barrierefreiheit besser werden. Die Tastaturbedienbarkeit der Menüs sollte dann etwa selbstverständlich sein. Relevant für Webentwickler ist dabei, dass eine Seite ein Jetpack einfach per
    &lt;link&gt;

    einbauen kann. Du möchtest in einem Shop die Webcam des Besuchers verwenden, um ein T-Shirt-Motiv direkt im Browser mit

    &lt;video&gt;

    und

    &lt;canvas&gt;

    als augmented reality auf die Brust des Nutzers zu projizieren? Ein Jetpack hat die Rechte dazu.

  • Mozilla arbeitet an Multitouch-Events und wartet noch auf Feedback der anderen Browserhersteller.
  • Artzilla widmet sich vermeintlich „nutzlosen“ Extensions: die offene Browser-Software als Kunstwerkzeug.

616-mozcamp.jpg

Fast hätte ich noch ein drittes T-Shirt bekommen mit dem pupsenden Maskottchen von Mozilla Songbird darauf. Damit hätte ich mir noch mehr von der großartigen Musik von Jiří Wehle anhören können, einem begnadeten Straßenmusiker in Prag’s Altstadt (die übrigens voller Teehäuser ist – ein Traum!), aber dann musste ich auch schon wieder zum Flughafen. Am nächsten Tag hielt ich nämlich einen Vortrag beim Webmontag Mannheim, wozu ich allerdings die Folien aus London recycelte. Und es gab dort auch kein T-Shirt, weswegen ich auch keinen Blogeintrag schreiben muss. ;-)