Schlagwort: Mobile

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

Vektorgrafiken aus Illustrator in HTML5-Canvas exportieren

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.

Vektorgrafiken aus Illustrator in HTML5-Canvas exportieren 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

Linksammlung „Mobile Design Patterns”

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.

Linksammlung „Mobile Design Patterns” 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

Adobe stellt den mobilen Flash Player ein

Die Neuigkeit des Tages lautet, dass Adobe den Flash Player als Browser-Plugin für mobile Devices einstellen wird. Nach langjährigen Versuchen, mit dem abgespeckten Flash Lite Fuß zu fassen, wurde vor ca. zwei Jahren der Flash Player für die mobilen Devices eingeführt. Aufgrund des Widerstands von Apple, den Flash Player in die iPhone-/iPad-Welt einziehen zu lassen, wandte sich Apple der Android-Plattform zu.

Mit dem heutigen Tag gibt sich Adobe nun geschlagen und verkündigt die Einstellung des mobilen Flash Players mit der Version 11.1.

However, HTML5 is now universally supported on major mobile devices, in some cases exclusively. This makes HTML5 the best solution for creating and deploying content in the browser across mobile platforms. We are excited about this, and will continue our work with key players in the HTML community, including Google, Apple, Microsoft and RIM, to drive HTML5 innovation they can use to advance their mobile browsers.

Adobe stellt den mobilen Flash Player ein 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