Permalink

Rotierende Reklametafel mit CSS-Animationen

Billboard with changing picturesIm Jahre 1998 habe ich “Meiers Billboard” vorgestellt: Eine virtuelle Anzeigentafel, die Bilder durch Rollen austauscht. Damals war es als Java-Applet realisiert. Im Jahr 2009 habe ich dann diese Anwendung mit JavaScript und jQuery nachgebaut (Zum Artikel). Inzwischen kann man mit CSS3 auch einfache Animationen in Stildefinitionen definieren. Damit können wir eine rotierende Reklametafel ganz ohne JavaScript bauen. Wie das geht, zeige ich im Folgenden.

Grundgerüst

Das Grundgerüst setzen wir wie bei der Lösung mit JavaScript auf:Funktionsweise: Eine Liste von Bildern wird unter einem Fenster hindurchgeschoben.Es gibt einen Rahmen und eine Liste von Bildern. Wir manipulieren die “top”-Koordinate der Liste, um die Bewegung zu erzeugen. Die Clipping-Eigenschaft bewirkt, dass wir nur das Innere des Rahmens sehen.

Animation

Die Definition einer CSS3-Animation besteht aus zwei Teilen.Der erste Teil ist die Definition der „Keyframes“, also der Schlüsselszenen. Im einfachsten Fall ist das eine Anfangsszene und eine Endszene. Soll sich ein Bild 200 Punkte nach oben bewegen, so definieren wir das folgendermaßen:

@keyframes slideup {    
  from {    top: 0px;  }    
  to {    top: -200px;  }
}

Als nächstes müssen wir ein Element bestimmen, auf welches die eben definierte Animation angewendet wird. Zusätzlich können wir Parameter für diese Animation bestimmen: Wann startet die Animation und wie oft sie wiederholt wird. Das Feld „animation-name“ muss dabei der Name des @keyframes-Elementes sein.

#billboard ul li{   
  animation-delay: 1s;   
  animation-duration: 3s;   
  animation-iteration-count: infinite;   
  animation-name: slideup;   
... }

Das funktioniert soweit schon ganz gut.

Demo

Mehrere Bilder

Wir wollen mehrere Bilder nacheinander zeigen. Nun ist css keine imperative Programmiersprache, wir können nicht wie mit Javascript die Animationen gesteuert zusammensetzen.Statt dessen können wir umgekehrt vorgehen, und eine große Animation kleine Zwischenschritte unterteilen. Die Zeitpunkte der Zwischenschritten werden in Prozent der Gesamtanimation angegeben:

@keyframes slideup {   
  from { top: 0px; }   
  16% { top: -200px; }   
  33% { top: -200px; }   
  50% { top: -400px; }   
  67% { top: -400px; }   
  84% { top: -600px; }   
  to { top: -600px; }
}

Damit ist die Reklametafel auch schon fast einsatzbereit: Die Animationsdauer von müssen wir gegenüber unser ursprünglichen Lösung noch erhöhen, weil ja die Dauer eines Durchganges aller Bilder anzugeben ist.Um einen sauberen Übergang zwischen letzten und ersten Bild zu erzielen, verwenden wir wieder den Trick, das erste Bild an das letzte Bild nochmal anzuhängen.

Demo

Den Sourcecode finden Sie auch in meinen Repository auf Github.

Permalink

Nokia Asha aus Entwicklersicht

Bild von Nokia Asha 303 und 311

Bei der Nokia Asha Touch Competition 2012 gehörte ich zu den Gewinnern. Ich habe Nokia Rückmeldungen zu ihren neuen Entwicklerwerkzeugen gegeben. Aus der Laudatio:

 “… for his very focused and relevant feedback around core app development. The issues raised showed a great understanding of the product and what areas most need improvement.”

Als Dank habe ich zwei neue Geräte erhalten, ein Asha 303 und ein Asha 311.

Weiterlesen →

Permalink

Codename One – Gitterlayout spiegeln

illustation of swapping cells

Was ist Codename One?

Die Plattform „Codename One“ dient der betriebsystemübergreifenden Entwicklung von Apps für Smartphones. Wichtiger Bestandteil ist eine Bibliothek für Benutzerschnittstellen. Codename One ist ein Nachfolger von LWUIT, welches wiederum Konzepte der Java-Swing-Bibliothek nutzt.

Die verschiedenen Bedienelemente wie Labels, Buttons oder Eingabefelder platziert man in einem Container. Die Positionierung wird nun nicht von den Container selbst übernommen, sondern von von einem assoziierten Objekt der Klasse LayoutManager. Zum Beispiel plaziert das Gridlayout die Elemente in einer Tabelle. Dies ist oft sehr nützlich, weil sich die Platzierung automatisch verschiedenen Displaygrößen anpasst. Weiterlesen →

Permalink

Präsentation zur Rails-Datenbankoptimierung

Layersof an object-relation-mapper: databae,objects, html

Bei der Ruby User Group Hamburg habe ich am 9. August 2012 einen Vortrag gehalten.

Hier sind die dazugehörigen Folien zur Optimierung von Datenbankaufrufen in Ruby-on-Rails

Den Vortrag gibt es jetzt auch bei Slideshare und Speakerdeck:

Ergänzende Links

ActiveRecord ist ein “Object Relational Mapper” (ORM). Über das Für und Wider hat Martin Fowler einen interessanten Artikel verfasst: OrmHate

Permalink

Ruby On Rails Datenbankoptimierung Teil 2

[Zu Teil 1]

Verknüpfungen mit dem SQL-join

Relationale Datenbanken erlauben es, Tabellen miteinander zu verknüpfen. In SQL gibt es für diese Verknüpfung das Schlüsselwort “JOIN”. Eine solche Verknüpfung kann theoretisch sehr frei spezifiziert werden, in der Praxis wird man fast immer an der Gleichheit bestimmter ID-Spalten verknüpfen.

In unserem Beispiel eines Schiffsinformationssystems haben wir eine Tabelle”vessels” mit den Schiffsdaten und eine Tabelle “countries” mit den Daten zu einem Flaggenstaat. Typischerweise wollen wir die Schiffsdaten zusammen mit der Daten des dazugehörigen Flaggenstaates ausgeben. Dazu verknüpfen wir die Tabellen an Hand des Fremdschlüssels “legal_country_id”.

In unserem Beispiel liefert ein SQL-Join eine Tabelle, in der Schiffe gleich mit den dazugehörigen Flaggenstaaten eingetragen sind. Die Daten der Tabelle kann man dann auf einer Übersichtseite darstellen. Es ist nur eine Datenbankabfrage nötig, obwohl man Daten aus zwei Tabellen anzeigt.

Es stellt sich dann allerdings die Frage, was eigentlich mit Schiffen ohne Flaggenstaat passiert?
Weiterlesen →

Permalink

Ruby-on-Rails Datenbankoptimierung Teil 1

Anzahl der Datenbankabfragen optimieren

Eine typische Webanwendung stellt viele Datenbankanfragen, bevor sie die Antwortseite an den Webbrowser ausliefert. Bei jeder dieser Datenbankabfragen muss die Anwendung auf die Antwort warten, dazu kommen noch Prozessumschaltungen, die zusätzlich bremsen. Der Datenbankserver muss jede Anfrage analysieren, und auch die Kommunikation zwischen Datenbank und Anwendung braucht Zeit. Weniger Datenbankanfragen reduzieren die Gesamtbelastung des Systems, das System skaliert besser.
Weiterlesen →

Permalink

Ilias-Funktionen verändern

Autobahnzeichen für Pannenhilfe

Beispiele zur Umgestaltung

Das Lernmanagementsystem Ilias lässt sich mit Skins umgestalten. (Darüber habe ich in einem früheren Blogeintrag geschrieben.) Ein Ilias-Skin kann aber sogar die Funktionalität verändern. Hierfür gebe ich nachfolgend einige Beispiele.

Loginseite

Die Templates zu Login, Logout und zur Nutzungsvereinbarung finden Sie unter Services /init/default In unserem Projekt haben wir folgende Änderungen an der Loginseite durchgeführt:

Weiterlesen →