Seit einiger Zeit gibt es ein Plug-In für Adobe Illustrator, um Vektorgrafiken in Richtung HTML5 zu exportieren. Das kostenlose „Ai->Canvas Plug-in” wandelt eine Illustratordatei in HTML-/JavaScript-Code um, der die Inhalte in ein HTML5-Canvas-Element zeichnet. Dies funktioniert nicht nur mit einfachen Grafiken, sondern auch mit komplexen Gestaltungen sehr gut.

The Ai->Canvas plug-in enables Adobe Illustrator to export vector and bitmap artwork directly to an HTML5 canvas element using JavaScript drawing commands. Animation can be added to control rotation, scaling, opacity, and motion along a path. Then, events can be used to trigger other animations.

weiterlesen

Ein neues Feature von HTML5 sind frei wählbare data-Attribute für HTML-Elemente, die sogenannten „Custom Data Attributes”.

Die Idee ist dahinter ganz einfach: Man möchte eigene Daten an einem HTML-Element abspeichern, für die es kein vorgefertigtes Attribut gibt und die auch nicht direkt im Frontend zu sehen sein sollen. Insgesamt ein sehr nützliches Features, das im Folgenden vorgestellt wird.

weiterlesen

In mobilen Websites oder Web-Apps kann es vorkommen, dass man gerne auf native Apps verlinken möchte. Ob Telefonnummer wählen, SMS schicken oder Facebook-App öffnen: Dies alles funktioniert üblicherweise über spezielle URLs, bei denen das http durch ein anderes Kürzel ersetzt wird (sogenannte URL-Schemes).

Hier einige Aktionen, die man per Link aus dem mobilen Safari-Browser (iPhone und iPad) auslösen kann:

• Email: Der Email-Client auf dem iPhone öffnet sich und man kann eine Email schreiben.
• Telefon: Wählen einer Telefonnummer.
• SMS: Senden einer SMS an eine Telefonnummer
• Maps: Aufrufen der nativen Karten-App (Google Maps)
• YouTube: Öffnen eines YouTube-Videos in der nativen YouTube-App.
• Facebook: Öffnen der App und Anzeigen von bestimmten Inhalten

Der folgende Artikel zeigt, wie dies auf Apples iOS-Betriebssystem funktioniert. Auf einem iOS-Gerät kann man dies auch direkt an diesem Beispiel ausprobieren, das ich zu Demozwecken erstellt habe: Demo mit iOS-URL-Schemes.

weiterlesen

Eine nette Idee: Die Band Abby hat einen interaktiven Song erstellt, bei dem der Nutzer die verschiedenen Instrumentierungen beeinflussen kann. Dies geschieht durch die Auswahl von Videos, die den jeweiligen Musiker zeigen.

weiterlesen

Im Zuge der Erstellung einer mobilen Website stößt man früher oder später an den Punkt, an dem man Nutzer mit mobilen Devices erkennen möchte.

Ein Anwendungsfall kann z.B. sein, dass man Nutzer mit Smartphones (iPhone, Android-Phones, etc.) auf eine gesonderte mobile Site weiterleiten möchte. Oder man will zwischen verschiedenen Devices unterscheiden, um Seiteninhalte oder gar Funktionalitäten auf die unterschiedlichen Fähigkeiten der Geräte anzupassen.

Im Folgenden ein Überblick mit verschiedenen Open-Source-Bibliotheken, die für die Erkennung von mobilen Devices gedacht sind. Die Bandbreite reicht von einfachen Skripten zum Einbinden bis zur Device-Datenbank mit tausenden Geräten samt deren Eigenschaften.

weiterlesen

Konzipiert und erstellt man mobile Websites oder Apps, schaut man sich selbstverständlich viele solcher Seiten und Anwendungen an. Als effiziente Ergänzung hierzu bietet es sich an, auf Online-Galerien mit Screenshots zurückzugreifen. Im Folgenden eine Übersicht einiger erwähnenswerter Websites, die Screenshots für „Mobile” zeigen und darüber hinaus auch die zugrundeliegenden UI-Patterns benennen.

weiterlesen

Der Spiegel hat eine neue Web-App gelauncht, die das bisherige E-Paper in Form eines PDFs ablöst. Die Anwendung stellt den Heftinhalt in einer zeitgemäßen HTML-Anwendungen dar.

weiterlesen

Popcorn.js ist eine neue JavaScript-Bibliothek von Mozilla. Sie dient dazu, Videos mit HTML5 abzuspielen und parallel dazu zeitlich synchrone Webinhalte einzublenden.

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web.

weiterlesen