Revision 17: A/B-Test, Animationen, Canvas und WebGL

Published: March 8, 2011, 2:34 p.m.

b'Nach ganzen vier(!) Wochen des krankheitsbedingten Ausfallens haben wir uns\\nendlich den Peter wieder in die Sendung zur\\xfcckgeholt. Das war auch dringend\\nerforderlich, denn bedingt durch unsere letztw\\xf6chige Sondersendung haben sich\\nbei uns furchtbar viele interessante Themen angesammelt, die in Augenschein\\ngenommen werden mussten. Die Themenflut hatte zudem zur Folge, dass wir\\nbesonders rigoros sieben mussten. Da wir dieses Material nicht ganz unter den\\nTisch fallen lassen wollten sind im Gegenzug unsere KEINE Schaunotizen sehr\\numfangreich geworden. Also unbedingt mal durchscrollen!\\n\\n\\nSCHAUNOTIZEN\\n\\nREQUESTANIMATIONFRAME FOR SMART ANIMATING\\n\\nDer Befehl requestAnimationFrame steckt in neueren WebKits wie auch im Firefox 4\\nund soll in Zukunft als Animationsger\\xfcst/-prinzip die bisherigen Kr\\xfccken\\nsetTimeout und setInterval abl\\xf6sen. Warum jetzt genau \\u201eKr\\xfccken\\u201c? Weil beide eher\\nunkoordiniert und hysterisch Browser-Repaints erzeugen. requestAnimationFrame\\nhingegen arbeitet umgekehrt und gibt sozusagen \\u201eBescheid\\u201c wenn der Browser\\nwieder Luft und Lust hat, etwas zu animieren. Nur dann werden\\nAnimationsanweisungen abgegeben und die dadurch entstehende ToDo-Liste wird an\\neinem koordinierten Zeitpunkt umgesetzt. Zudem hilft die Methode Strom sparen.\\nSoweit wir das verstanden haben, war Mozilla hier Vordenker. Wir kommen bei dem\\nThema kurz auf das jquery.animate-enhanced plugin zu sprechen, obwohl es nicht\\ndirekt etwas damit zu tun hat. Haben aber gesagt, wir verlinken es dennoch.\\n\\nOPTIMIZELY: A/B TESTING YOU\\u2019LL ACTUALLY USE\\n\\nEin tolles und kinderleicht zu bedienendes Onlinewerkzeug, mit dem man im\\nBrowser Abwandlungen seiner zu testenden Seite erstellen kann. Halt ohne gro\\xdfe\\nund schmerzhafte serverseitige Eingriffe. Statt dessen erh\\xe4lt man einen\\nJavaScript-Code, den man in seine Seite einbinden muss, und von da an erhalten\\nSeitenbesucher reihum die verschiedenen Varianten vorgesetzt, und man selbst\\nkann im Optimizely-Panel die Akzeptanzraten in Echtzeit begutachten.\\n\\nCAMANJS \\u2013 JS IMAGE MANIPULATION\\n\\nEin supersimpel aufgebautes Framework zur Farbmanipulation von Bildern. Zu\\ndiesem Zweck gibt es diverse Filter, die man so im Prinzip auch aus g\\xe4ngigen\\nBildverarbeitungen kennt: Brightness, Contrast, Saturation oder auch\\nFarbkanalmanipulationen oder Bezier-Farbkurvenanpassung. Dar\\xfcberhinaus gibt es\\nnoch Zusammenstellungen von Filtern und bestimmten Einstellungen, die\\nsogenannten Presets, mit denen man auf einen Schlag einen anst\\xe4ndigen Vintage\\noder Sin City Effekt erh\\xe4lt. W\\xe4rend wir \\xfcber CamanJS reden, stellen wir uns\\nFragen zur Canvas-Performance bei bewegtem Quellmaterial\\n\\nHTML TIMING\\n\\nBei diesem Projekt geht es darum, das altehrw\\xfcrdige SMIL-Format auch im\\nNicht-SVG-Bereich wieder auferstehen zu lassen, um damit verschiedene Elemente\\neiner Seite miteinander zeitlich zu synchronisieren und Ihnen einen geordneten\\nZeitablauf vorzugeben. Das alles steuert man deklarativ \\xfcber XML-genamespacedte\\noder HTML5-data-Attribute, oder wahlweise \\xfcber ein externes Timesheet. Damit\\nlassen sich sehr einfach zeitgesteuerte Textslides und Bildrotationen erstellen,\\noder Videos untertiteln. Peter meint sich zu erinnern, dass das Mashi Toolkit\\nund FakeSmile \\xe4hnliches bewerkstelligen.\\n\\nWEBGL 1.0 IST FERTIG\\n\\nDer von der Khronos-Group beigesteuerte Standard WebGL wurde finalisiert. WebGL\\nnutzt die HTML5-Canvas, um darin nicht in 2D sondern in 3D herumzupinseln. WebGL\\nist dabei nichts anderes als OpenGL ES 2.0 mit angeflanschtem\\nJavaScript-Befehlssatz. Wir denken, dass wir uns mit dessen Befehlss\\xe4tzen wohl\\neher selten herumschlagen m\\xfcssen, sondern, wie im klassischen 3D-Bereich auch,\\nwir immer mehr Autorenwerkzeuge f\\xfcr 3D im Web zur Hand bekommen. Zum Bespiel\\nCopperLicht oder PhiloGL. WebGL gibt es im aktuellen Chrome, im kommenden\\nFirefox 4, in einem Snapshot von Opera 11.50, sowie angeblich bald auch im\\nSafari.\\n\\nWEBGL-2D\\n\\nDieses noch im Anfangsstadium befindliche Projekt stellt einen Wrapper von\\nklassischem 2D-Canvas nach WebGL dar, sprich: es nimmt dieselben Befehle wie\\nCanvas entgegen, setzt sie aber hintenrum in WebGL um. Der Sinn des Ganzen?\\nPerformance! WebGL-Zeichenoperationen sind zu 100% grafikkartenbeschleunigt und\\nvor allem wenn es um Sprites und Texturen geht deutlich performanter.\\nEindrucksvoll demonstriert das ein Versuch von Jeff Muizelaar: Drawing Sprites:\\nCanvas 2D vs. WebGL.\\n\\nMOZILLA OPENWEBAPPS\\n\\nAls letztes Thema nehmen wir uns Mozillas OpenWebApps-Spezifikation/API zur\\nBrust. Sinn des Ganzen soll sein, Webapp-Entwicklern einen Werkzeugsatz an die\\nHand zu geben, mit dem sie ihre Webanwendungen mit einem Installer versehen und\\nin einem selbstgebauten App-Store feilbieten k\\xf6nnen.\\n\\n\\nKEINE SCHAUNOTIZEN\\n\\nBLUR-RADIUS EXPLAINED\\n\\nWie die Browser Unsch\\xe4rfen wie die von box-shadow oder text-shadow berechnen.\\n\\nD3\\n\\nWie jQuery, nur nicht f\\xfcr das HTML-Dokument, sondern f\\xfcr Rohdaten. Damit lassen\\nsich diese in eine wundersch\\xf6ne Form pressen und darstellen.\\n\\nWHY HOVER MENUS DO USERS MORE HARM THAN GOOD\\n\\nWarum Hovermen\\xfcs i.d.R. nur abnerven. Und dar\\xfcber, was ein Hovertunnel ist.\\n\\nWHY DO LINTS WARN ABOUT USING PARSEINT WITHOUT A RADIX?\\n\\nWas alles passieren kann, wenn man den zweiten Parameter, die Basiszahl bei\\nparseInt wegl\\xe4sst. Dazu passend:\\n\\nJAVASCRIPT GARDEN\\n\\n> JavaScript Garden is a growing collection of documentation about the most\\n> quirky parts of the JavaScript programming language. It gives advice to avoid\\n> common mistakes, subtle bugs, as well as performance issues and bad practices\\n> that non-expert JavaScript programmers may encounter on their endeavours into\\n> the depths of the language.\\n\\nUNDO.JS\\n\\nEin Framework zum Ablegen und Zur\\xfcckspulen von Arbeitssschritten.'