Tutorials + Workshops – www.video-flash.de

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

HTML5: Eigene data-Attribute verwenden (data-*)

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.

HTML5: Eigene data-Attribute verwenden (data-*) 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

Tutorial: JSON in ActionScript

Mit dem Flash Player 11 und Adobe AIR 3.0 wird endlich das Datenaustauschformat JSON nativ in ActionScript unterstützt. Nativ bedeutet, dass man keine weitere Bibliothek zum Parsen benötigt und direkt mit einer einfachen Syntax auf die Inhalte zugreifen kann (vergleichbar der nativen XML-Unterstützung).

Tutorial: JSON in ActionScript weiterlesen

SEO: Semantische Auszeichnungen mit Schema.org

Schema.org ist eine gemeinsame Initiative der Suchmaschinenbetreiber Microsoft, Yahoo und Google. Dahinter verbirgt sich die einheitliches Markup-Schema, mit der HTML-Elemente mit einer semantischen Bedeutung versehen werden können. Dadurch präsentiert man den Suchmaschinen strukturierte Daten, so dass diese die Originalinformationen nicht mühsam aus dem HTML-Code rekonstruieren müssen.

Many sites are generated from structured data, which is often stored in databases. When this data is formatted into HTML, it becomes very difficult to recover the original structured data.

SEO: Semantische Auszeichnungen mit Schema.org weiterlesen

YouTube-Video einbinden: Neues Dark-Theme und Player ohne Logo

Viele haben sicher schon bemerkt, dass sich das Aussehen des YouTube-Players auf youtube.com grundlegend geändert hat. Meines Erachtens war dies schon lange überfällig, da man sich aufgrund der hohen Verbreitung schon lange an der bestehenden Version „satt gesehen” hat, obwohl diese immer wieder überarbeitet wurde.

YouTube-Video einbinden: Neues Dark-Theme und Player ohne Logo weiterlesen