jQuery

  • kalinsPDFMeta: {"showLink":"default"}

09_2011

Für Unic aus Bern arbeiten wir seit Juli an Webauftritten großer Unternehmen, die mit Adobe CQ5 umgesetzt werden. Wir sind dabei für Java-, JSP- und Javascript-Programmierungen im CMS verantwortlich. Die Arbeit findet in verteilten internationalen Teams statt, koordiniert werden die Projekte mit täglichen Video-Stand-Up-Meetings. “Distributed Scrum”, sozusagen…

05_2011

Alle Jahre wieder. Das Hochschulranking 2011, eine Kooperation von ZEIT ONLINE und CHE, ist Anfang Mai online gegangen. Neu erhoben wurden in diesem Jahr die Daten in den Fächergruppen Rechts-, Wirtschafts- und Sozialwissenschaften sowie die Medienwissenschaften, Kommunikationswissenschaften und Soziale Arbeit.

Neben der alljährlichen Überarbeitung haben wir das Angebot in diesem Jahr an zwei Stellen weiter entwickelt:

  • Überarbeitung des QuickRankings
  • Empfehlungen bilden, die auf den Klickwegen der User basieren

Kompletten Artikel lesen


05_2011

Es muss nicht immer Canvas sein. Zum Hochschulranking 2011 haben wir das QuickRanking von einer Flash/Flex-Anwendung auf HTML5 umgestellt. Aber das Canvas Objekt haben wir nicht benutzt. Zum Artikel

In the last months we refactored a Flex/Flash app to HTML5.

The app is part of the german university ranking. It allows the user to select criteria and to watch universities rearranging in a circular manner.

It is called Quick Ranking and it is hosted by ZEIT ONLINE.

Why

The main reasons to use HTML5 instead of Flex/Flash were:

  • make the app accessible for IOS-based devices
  • integrate the app more tightly in the surrounding website
  • facilitate app development. No special tools are required, no compilation is needed.

For sure, not every flash app is suitable to be refactored to HTML5. The Flash animation engine is still outstandig and if you have a lot of elements moving and flying around, maybe Sound and Video and cutting edge visual effects, Flash is still state of the art.

But most of the Flash Apps are not cutting edge. They shift some elements from A to B, the user can interact lightly, elements are shown and hidden. No too fancy.

And that is exactly the kind of app we decided to reimplement in HTML5.

Canvas Object

Our first approach was to use the Canvas Object. We saw outstandig examples, very fast browser based games and we thought that Canvas Object is the way to go. Especially if you want to do it real HTML5, like the pros do. But after first experiments we were rather desillusionated. Canvas is fast, regarding the performance in the browser, but it’s very slow, regarding development speed.

With Canvas you have to do all the things again, that you – as a web developer – did the last time some 15 years ago, while you were studying animation arts and discovered that you can use computers as well instead of good old Bolex cameras. With Canvas you need (some say, you are enabled… :)) to do all the basic things from “Essential Computer Graphics, Volume 1″ again. Implement double or tripple buffering for smoothness. Repaint the background when your object moves. Doing dirty region analysis. Re-implement the easing stuff. When the going gets tough, the tough get going…

DIVs

But hold on. What we realized – after understanding what it really means to work with Canvas – is: Modern Browsers have really good graphic engines as well. You don’t have to do it on your own. Why not using div animation and your good old friend jQuery.

That is, what we finally did. With the help of jQuery we create DOM elements on the fly, scale them and move them around. Performance is rather good, however we had a close eye on tuning all the time.

Speed

We found some rules, that increased the speed of our app massively:
* create as few DOM elements as possible. Especially IE was speed up significantly, when creation of DOM elements were reduced
* do not scale images in animations. Remember the concept of key phases from your former analog animation days. If you have an image inside a div and the div has a border, and you want to scale them down, just do the following: Only animate the border and do the resizing of the image in one step at the beginning or at the end. Your audience won’t notice, but your CPU will
* don’t use jQuery live()-Events when you create and delete DOM elements a lot. Live()-events are comfortable, but it is much more performant to attach the event directly to the target element. Remember that live() events mean, that jQuery has to scan the DOM-tree for matching elements. That costs.


12_2010

WebControlling. Zum Jahresende gibt es noch einmal Zuwachs für die ZEIT ONLINE-Counter-Familie.

Der TextCounter zeigt die veröffentlichten Artikel pro Zeitraum / Ressort / Autor. Das Dashboard integriert die wichtigsten Kennziffern aus allen Countern und stellt zusätzlich die aktuellen IVW-Daten für ZEIT ONLINE dar. Mehr Informationen zu den Anwendungen finden Sie auf der Counter-Projekt-Seite.

Beide Projekte sind wieder mit Hilfe des Play Frameworks umgesetzt. Für die Ausgabe benutzen wir HTML 5, die Grafiken rendern wir mit dem sehr leistungsfähigen Flot direkt im Browser. Das reduziert die übertragene Datenmenge und freut den mobilen Nutzer.

Die ZEIT ONLINE Counter sind der Oberbegriff für eine Reihen von Tracking- und Analyse Werkzeugen, die in nahezu Echtzeit die massgeblichen Online-Kennzahlen erfassen. Sie stellen für ZEIT ONLINE in der täglichen Arbeit eine Ergänzung zu Web-Analyse-Tools wie Omniture oder WebTrekk dar.

Die Counter sind optimiert für den schnellen Blick. Die Kennzahlen werden grafisch aufbereitet und beantworten konkrete Fragen wie “Werden die Artikel auf der Startseite im Moment entsprechend den Erwartungen geklickt?” oder “Erreichen wir die zugesagten AIs oder müssen wir nach belegen?”.

Alle Counter bringen eine eigene Web- und HTML5-Mobil-Oberfläche mit und lassen sich darüberhinaus über eine REST-API ins CMS integrieren.

ClickCounter: Der ClickCounter zählt die Zugriffe auf die redaktionellen Seiten von ZEIT ONLINE. Als Quelle dient ein Zählpixel. Die Zugriffe werden jede fünf Minuten für alle Artikel ausgewertet. Die Zahlen werden grafisch aufbereitet und für die letzte Stunde im Fünf-Minuten-Raster und für die letzten 24 Stunden im Ein-Stunden-Raster dargestellt. Der Zugriff erfolgt über eine Weboberfläche. Programmatischer Zugriff ist über eine REST-API möglich. Bei ZEIT ONLINE existiert darüber hinaus eine Integration ins CMS.

AdCounter: Der AdCounter zählt die AdImpressions für einzelne Kampagnen. Als Quelle dient ein Zählpixel. Kampagnen lassen sich zeitlich definieren und verschiedenen Channels zuweisen. Erreichten Werten werden Erwartungen gegenübergestellt. Die Daten werden alle 5 Minuten ausgelesen, grafisch aufbereitet und sind bis auf Channel-Ebene hinunter verfügbar. Vergangene Kampagnen werden archiviert.

TextCounter: Der TextCounter gibt Auskunft über die Anzahl veröffentlichter Texte pro Zeitraum / Ressort / Autor. Als Quelle dient ein von ZEIT ONLINE betriebener Lucene-SOLR-Index. Die Ergebnisse der Abfragen werden auf Artikel-Basis mit den entsprechenden Werten aus dem ClickCounter angereichert.

Dashboard: Das Dashboard versammelt die entscheidenden Kennziffern aus den einzelnen Countern und stellt sie grafisch und textuell dar. Zusätzlich werden die aktuellen IVW-Daten integriert. Damit ersetzt das Dashboard bei ZEIT ONLINE auch die 2011 abgeschaltete IVW-Collectorbox.