Tag: mobile-web

201301Dez

Videogular: HTML5-Video-Player für AngularJS

Einst waren es jQuery-Plugins, heute sind es AngularJS-Directives: Mit Videogular steht ein voll ausgestatteter HTML5-Video-Player bereit, der über Angular konfiguriert und erweitert werden kann. Dazu müssen das entsprechende Angular-Markup vorhanden sowie die Module "com.2fdevs.videogular" in die App eingebunden sein. Bei GitHub findet sich die Dokumentation sowie ein Wiki dazu.

Videogular - A video player for AngularJS

Im Controller-Scope können die Eigenschaften für den Player festgelegt werden. Ein Auszug:

  • <videogular vg-width="config.width" vg-height="config.height">
  •  
  • $scope.config = {
  • width: 740,
  • height: 380,
  • autoHide: false,
  • autoPlay: false,
  • responsive: true
  • };

Der Angular-Player unterstützt mobile Endgeräte sowie einen Vollbildmodus. Er lässt sich über Themes anpassen und kann per Plugins erweitert werden.
Für AngularJS gibt es mittlerweile eine Reihe an interessanten Directives, wie beispielsweise das Deckgrid, mit dem sich Inhalte in einem Raster darstellen lassen.

201301Okt

Google Web Designer: Tool für HTML5-Animationen

Adobe Edge Animate machte den Anfang, dann folgten Tools wie der A5 HTML Animator oder Hype und nun hat steht auch mit Google Web Designer ein weiteres interessantes Tool für Windows und Mac OS X bereit, mit dem sich HTML5-Seiten und -Animationen über eine Benutzeroberfläche erstellen lassen. Google Web Designer kommt ebenfalls mit einer dunklen Benutzeroberfläche und bietet neben einer Zeitleiste und diversen Objekt-Einstellungen, wie man sie auch in Edge Animate vorfindet, noch weitere Funktionen: Ein Bezier-Werkzeug sowie 3D-Transformationen stehen in der Palette zur Auswahl.

Google Web Designer

Das Programm erzeugt HTML5-, CSS3- und JavaScript-Code. Objekte, die mit dem Rechteck- oder Stift-Werkzeug erstellt wurden, werden als Canvas-Elemente ausgegeben und per JavaScript animiert. Zudem können aber auch div-Container (Tag-Tool) erzeugt werden, die dann über CSS3-Keyframes animiert werden. Den entsprechenden Code generiert die Software. Positiv ist hierbei die Codeansicht, da hier der erzeugte Quellcode direkt angesehen und bearbeitet werden kann.
Momentan handelt es sich bei Google Web Designer noch um eine Beta-Version, die aber schon jetzt überzeugen kann und im Gegensatz zu Edge Animate eine größere Funktionspalette bietet, da eben auch Canvas-Animationen erzeugt werden können. Im GoogleWatchBlog finden sich weitere Informationen zur Anwendung.

201314Jul

Minified.js: Kompakte JavaScript-Bibliothek

JavaScript-Frameworks befinden sich im Umschwung: Durch die Fähigkeiten von HTML5, CSS3 und ECMAScript 5 können viele Szenarien mit nativen Funktionen abgedeckt werden. Dabei kann sogar eine bessere Performance erreicht werden, wenn beispielsweise CSS3-Transitions verwendet werden. Gerade für mobile Webanwendungen ist dieser Aspekt wichtig und so wird die weitere Entwicklung von JavaScript-Bibliotheken vor allem durch Smartphones und Tablets geprägt sein. Daher wird zukünftig nicht immer der volle Umfang eines größeren Frameworks gebraucht werden. Aus diesem Grund werden Kompakt-Frameworks wie Zepto immer beliebter. In diesem Zusammenhang lohnt sich auch ein Blick auf die Bibliothek Minified.js, die von Tim Jansen entwickelt wurde.

Minified.js - A Truly Lightweight JavaScript Library

Es handelt sich ebenfalls um JavaScript-Leichtgewicht, das mit schlanken 4 KB auskommt und dennoch alle wichtigen Features von jQuery oder MooTools beinhaltet. Dazu zählen DOM-Manipulationen, CSS-Anpassungen, Events, Animationen oder Ajax. Minified unterstützt beispielsweise auch Element Factories, die in jQuery derzeit noch fehlen:

  • var MINI = require('minified'), $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;
  • var mySpan = EE('span', 'Hello World');
  •  
  • // Result:
  • <span>Hello World</span>

Weitere Infos finden sich in der API-Referenz oder in der Dokumentation.

201310Jul

Effeckt.css: Sammlung mit raffinierten CSS3-Transitions

Für eine überzeugende User Experience kommt es bei mobilen Apps auf die Performance an: Dass diese nicht immer leicht zu erreichen ist, erklärt beispielsweise dieser ausführliche Artikel. Im visuellen Bereich von mobilen Web-Applikationen lässt sich immerhin mit CSS3-Animationen eine ordentliche DOM-Performance erzielen, vorausgesetzt, die Effekte werden richtig eingesetzt.
Eine Sammlung mit den pfiffigsten CSS3-Effekten für diesen Zweck stellt Effeckt.css dar. Auf der Seite finden sich die "Work In Progress"-Beispiele der beliebtesten Effekte, die unter Anderem von Hakim El Hattab oder Chris Coyier (CSS-Tricks) entwickelt wurden.

Effeckt.css - UI-Less and Performant Transitions/Animations

Angefangen hat das Ganze mit diesem Request bei GitHub. Dort wurden die entsprechenden CSS3-Snippets zusammengetragen, die eine Framerate von 60 FPS auf mobilen Geräten gewährleisten sollen. Bei Effeckt.css handelt es sich also um keine User Interface-Bibliothek, sondern lediglich um CSS-Hooks, die aus Transitions oder Keyframe-Animationen bestehen. Die GitHub-Seite gibt Aufschluss über den Quelltext der Snippets.

201316Apr

LayoutIt!: Interface Builder für Bootstrap-Projekte

Wer heutzutage eine moderne Website in HTML, CSS und JavaScript umsetzen möchte, muss dabei eventuell nicht nur alte Webbrowser unterstützen, sondern die Seite in der Regel auch für verschiedene Bildschirmauflösungen und Geräte optimieren. Responsives Design ist dank CSS3 leicht umzusetzen, muss aber dennoch gut geplant und durchdacht werden. Etwas Abhilfe hierbei können verschiedene Frameworks schaffen, wie beispielsweise Twitters Bootstrap-Framework. Hiermit stehen solide HTML- und CSS-Bausteine bereit, die durch JavaScript-Plugins erweitert werden können. Zudem werden ältere Browser durch Shims unterstützt.
Nun gibt es für das Bootstrap-Framework auch einen Interface Builder, mit dem sich die Grundkomponenten per Drag 'n' Drop auf eine Arbeitsfläche ziehen und anschließend exportieren lassen. Die Web-Anwendung LayoutIt! ermöglicht diesen Prozess und ist relativ einfach aufgebaut.

LayoutIt! - Interface Builder for Bootstrap

Der Editor kann direkt im Browser gestartet werden und setzt sich aus einer Spalte mit den verfügbaren Komponenten und einem Arbeitsbereich zusammen, in dem die Bausteine platziert werden. Diese können innerhalb des Arbeitsbereichs bewegt und wieder entfernt werden. Ein mit LayoutIt! erstelltes Bootstrap-Layout lässt sich schließlich exportieren und steht dann in Form von HTML-, CSS- und JavaScript-Dateien zur Verfügung.

201303Apr

Adobe Muse: Webdesign-Tool für mobile Websites

Seit über einem Jahr bietet Adobe nun sein neuartiges Webdesign-Werkzeug Muse an, mit dem sich Websites auch ohne Programmierkenntnisse erstellen lassen. Dabei kann auf eine solide Auswahl an Widgets (Accordions, Lightboxes, Kontaktformulare, Diashows, uvm.) zurückgegriffen werden. Die Benutzeroberfläche der Software ist an bestehende Print-Werkzeuge wie Illustrator oder InDesign angepasst, so dass ich Print-Designer leicht zurechtfinden dürften.
Das Programm hat inzwischen einige Neuerungen erfahren, zu denen auch die Umsetzung von mobilen Websites zählt.

Adobe Muse - Webdesign in HTML ohne Programmierung

So lassen sich mit Muse nun auch responsive Websites erzeugen, die entsprechend auf mobile Endgeräte und deren Bildschirmgrößen reagieren. Das Erstellen von mobilen Varianten einer Seite ist an das "alternative Layout" von InDesign angelehnt, was die Arbeitsweise erleichtern soll. Muse bietet zudem Multi-Touch-Unterstützung und integriert diverse jQuery-Plugins, die Touch- und Swipe-Gesten ermöglichen. Mittlerweile wurde das JavaScript-Framework "Spry" komplett durch jQuery ersetzt und auch der exportierte HTML-Quelltext wurde um Einiges verbessert.
Muse-Websites können entweder im HTML-Format auf einen eigenen Webserver hochgeladen oder bei Adobe per Business Catalyst gehostet werden. Muse kann für 18,44 EUR in der Creative Cloud abonniert werden.

201307Jan

Junior: HTML5-Frontend-Framework für mobile Apps

Für die Entwicklung von mobilen Webapps bieten sich verschiedene Frameworks an, vorzugsweise Kendo UI oder jQuery Mobile. Ein weiterer Ansatz kommt mit der HTML5-Bibliothek Junior, die auf Modernizr, Zepto, Lodash und Backbone aufsetzt.

Junior - A front-end framework for building HTML5 mobile apps with a native look and feel

Junior bietet also Swipe-Gesten, CSS3-Transitions, CSS-UI-Komponenten und eine ordentliche App-Struktur durch die Verwendung von Views und Routern, die durch Backbone bereitgestellt werden:

  • var AppRouter = Jr.Router.extend({
  • routes: {
  • '': 'home',
  • 'about': 'about',
  • 'details': 'details'
  • },
  •  
  • home: function(){
  • var homeView = new HomeView();
  • this.renderView(homeView);
  • },
  •  
  • details: function() {
  • var detailsView = new DetailsView();
  • this.renderView(detailsView);
  • }
  • });

Ein dokumentiertes Beispiel findet sich hier, das einen Einblick in eine Junior-Anwendung gewährt.

201222Jun

QUOjs: JavaScript-Library für mobile Projekte

Wer Websites oder Anwendungen für mobile Geräte entwickelt, wird nicht immer den vollen Funktionsumfang einer klassischen JavaScript-Bibliothek benötigen. In der Regel reichen Selektor-, CSS- und Ajax-Funktionalitäten aus, um ein mobiles Szenario zu realisieren. Interessant für mobile Projekte sind dann schließlich verschiedene Gesten wie Touch, Swipe oder Tap. Genau hier kommt das Mikro-Framework QUOjs ins Spiel, das mit Funktionen für Touch-Gesten ausgestattet ist.

QUOjs - Micro JavaScript Library

Global kommt bei QUOjs der Namespace "$$" zum Einsatz, der aus anderen Bibliotheken bereits bekannt sein dürfte. Ein paar Beispiele für QUOjs-Code:

  • // Selektoren
  • $$("article").sibblings().last();
  • $$("article").children().first();
  •  
  • // Tap-Event
  • $$("p").tap(function() {
  • // CSS-Anpassungen
  • $$("span", this).style("color", "red");
  • });

QUOjs kommt zudem mit gängigen Ajax-Funktionalitäten und bietet auch diverse Umgebungsvariablen wie "isMobile" oder "browser" an, mit denen sich das Endgerät des Benutzers feststellen lässt.