Swipe JS: Leichtgewichter Slider für Touch-Devices

Swipe JS ist ein leichtgewichtiges Slider-Skript, das den aus nativen Apps gewohnten Slide-Effekt beim „Swipen” nachahmt. Per Wische-Geste kann man so z.B. zwischen mehreren Bildern navigieren, wobei das Bild quasi am Finger „klebt”. Das Skript hat keine Abhängigkeiten zu anderen JavaScript-Bibliotheken.

Swipe is a lightweight mobile slider with 1:1 touch movement. 1:1 touch movement is sliding content based on exact touch position. It’s a different level of interacting with the content, more intuitive than swiping left to right and then watching the slider move to the proper position.

Swipe JS: Leichtgewichter Slider für Touch-Devices weiterlesen

iOS: Links zu nativen Apps aus dem Browser heraus

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.

iOS: Links zu nativen Apps aus dem Browser heraus weiterlesen

Mobile Device Detection

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.

Mobile Device Detection weiterlesen

Eskimo: Android- und iOS-Feeling für mobile Flex-Apps

Eskimo ist eine Bibliothek für Flex bzw. AIR, die sich zum Ziel gesetzt hat, die typischen nativen UI-Elemente von iOS und Android anzubieten. Dadurch kann man mobile Apps schreiben, die in punkto Bedienung recht nahe an die nativen Vorbilder kommen.

An open source Flex mobile library providing native control patterns to your apps on multiple mobile platforms.

Eskimo: Android- und iOS-Feeling für mobile Flex-Apps weiterlesen

FDT 5: Kostenlose Free-Version und neue Features

Seit heute gibt es die neue Version von FDT. Die Entwicklungsumgebung erhält mit dem fünften Release neben dem bisherigen Flash-/Flex-Schwerpunkt Zuwachs in Richtung mobile Workflows und auch HTML5, JavaScript, PHP (HaXE).

FDT 5: Kostenlose Free-Version und neue Features weiterlesen

StageText: Virtuelles Keyboard in AIR 3 verwenden

Eines der neuen Features von Adobe AIR 3 ist die StageText API. In Anwendungen für mobile Devices (iOS, Android) kann damit nativer Text platziert und das virtuelle Keyboard (Softkeyboard) konfiguriert werden. Verwendet man nativen Text anstatt eines normalen Textfelds (flash.text.TextField) bietet dies einige Vorteile:

  • Auto-Korrektur des Betriebssystem (iOS, Android) wird genutzt
  • Ein autoCapitalize-Attribut erlaubt verschiedene Einstellungen für die Groß-/Kleinschreibung, z.B. alles oder nichts groß, Satzanfang oder jedes Wort
  • Art des virtuellen Keyboards ist mithilfe der Klasse SoftKeyboardType auswählbar, z.B. Numeric Keyboard für Telefonnummern oder eine Tastatur mit @-Symbol für Emailadresse (Contact, Default, Email, Number, Punctuation, URL).
  • Auch die Beschriftung des Buttons, der die Aktion auslöst ist, kann gewählt werden (Default, Done, Go, Next, Search)

StageText: Virtuelles Keyboard in AIR 3 verwenden weiterlesen

Adobe Edge: Animationen mit HTML, CSS und JavaScript

Mit Adobe Edge veröffentlicht Adobe eine erste Version eines zukünftigen Tool, das zur Erstellung von Animationen für HTML-Seiten gedacht ist. Da lediglich HTML, JavaScript und CSS verwendet werden, können die Animationen sowohl auf aktuellen Desktop-Browsern als auch auf mobilen Devices ohne Flash Player abgespielt werden (z.B. iPhone, iPad).

Adobe Edge is a new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3.

Wie bereits vor einiger Zeit verkündet zeigt Adobe hiermit, dass sie neben Flash auch im Bereich HTML5 entsprechend unterstützen werden (ist auch logisch, da Adobe ja an den Tools verdient und nicht an den Runtimes).

Adobe positioniert Edge als Tool für Werbung, einfache Animationen und Motiondesign, während Flash für umfangreiche Anwendungen angepriesen wird („Immersive interactive experiences, mobile applications, gaming, premium video, advertising”).

Adobe Edge: Animationen mit HTML, CSS und JavaScript weiterlesen

Video Compression for Flash, Apple Devices and HTML5

Jan Ozer ist ein Videoencoding-Experte, auf den ich hier im Blog schon öfters verwiesen habe. Er hat vor kurzem ein englischsprachiges Buch mit dem Titel „Video Compression for Flash, Apple Devices and HTML5” veröffentlicht.

Ich konnte noch keinen Blick in das Buch werfen, gehe jedoch davon aus, dass es der gewohnt hohen Qualität der Web-Artikel von Jan Ozer entspricht. Im Folgenden eine Übersicht der Themen im Buch:

Video Compression for Flash, Apple Devices and HTML5 weiterlesen