Schlagwort: HTML5

Flash CS6: Flashprojekt als HTML exportieren

Seit einigen Tagen gibt es die neue Version Flash CS6. Adobe selbst hebt dieses Mal recht wenige Neuerung hervor, u.a.:

  • HTML-Export (CreateJS-Framework)
  • Stage 3D-API und Starling-Framework 2D-Inhalte
  • AIR-Anwendungen inklusive der Runtime (Captive Runtime)
  • Simulation von AIR-Apps auf mobilen Endgeräten

Spannend ist auf jeden Fall der HTML-Export von Flashprojekten, da damit zum ersten Mal ein gängiges Designer-Tool einen einfachen Weg bietet, bereits erlerntes Animations-Know-How für HTML-Animationen einzusetzen. Dies zielt natürlich in erster Linie darauf ab, das zurzeit bestehende Problem „iPhone/iPad kann kein Flash” zu lösen. Zudem bietet es den Vorteil, dass weiterhin auch der Flash Player adressiert werden kann (z.B. für alte Desktop-Browser ohne HTML5) — die Animation liegt ja als Flashprojekt vor und kann zusätzlich auch ganz normal als .swf exportiert werden.

Flash CS6: Flashprojekt als HTML exportieren weiterlesen

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: „Cut the rope” als Browserspiel

Das bekannte Casual Game „Cut the rope” wurde jetzt als HTML5-Browsergame veröffentlicht. Knapp 15.000 Zeilen JavaScript-Code zeigen, was mittlerweile in aktuellen Browser an Multimedialität und Interaktivität auf HTML-Basis möglich ist.

HTML5: „Cut the rope” als Browserspiel 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

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

HTML5 Logo 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

Popcorn.js: Webinhalte mit HTML5-Videos synchronisieren

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.

Popcorn.js: Webinhalte mit HTML5-Videos synchronisieren weiterlesen

Adobe verabschiedet sich von Flex

Nach dem Adobe den mobilen Flash Player eingestellt hat und sich stattdessen auf HTML5 fokussieren möchte, lag die Frage nahe, was dies den für Flex bedeutet. Im offiziellen Blog des Flex-Teams wurde nun ein paar interessante Neuigkeiten dazu veröffentlicht, die auch hier einen ähnlichen Weg andeuten.

Nach dem anstehenden Release soll das Flex SDK in eine Open Source Foundation überführt werden, die sowohl von Mitglieder des Flex Engineering Teams, von der Flex Community als auch von Firmen geführt wird.

Adobe verabschiedet sich von Flex weiterlesen