Tag: mobile-web

201415Sep

Chartist.js: Skript für responsive SVG-Diagramme

Sie heißen Highcharts, Raphaël, D3.js oder gar C3.js: Interaktive Chart-Bibliotheken, mit denen sich SVG-Diagramme aller Art erstellen lassen. Dank HTML5 ist die Darstellung von Vektorgrafiken und -Graphen kein Problem mehr und durch JavaScript lässt sich Interaktivität hinzufügen.
Dem Entwickler Gion Kunz genügte dieser Zustand allerdings noch nicht, denn er wollte eine SVG-Bibliothek, die noch einfacher zu konfigurieren ist und zudem auch mit responsiven Websites funktioniert. Daher schuf er das Skript Chartist.js, dessen Diagramme sich unter Anderem mit CSS und SASS anpassen lassen. Hier sind zudem Animationen möglich.

Chartist.js - Simple responsive charts

Weiterhin lässt sich die Bibliothek per JavaScript konfigurieren, wobei hier auf eine Art Media Queries zurückgegriffen werden kann:

  • var responsiveOptions = [
  • ['screen and (max-width: 640px)', {
  • showLine: false,
  • axisX: {
  • labelInterpolationFnc: function(value) {
  • return 'Week ' + value;
  • }
  • }
  • }]
  • ];

Dadurch sind auch skalierbare Auswertungen einfach umzusetzen, die zudem auf Smartphones und Tablets optimiert werden können. Mehr Infos gibt es wieder bei GitHub.

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.

201429Aug

Marka: Skript für animierte CSS3-Icon-Transformationen

Mit HTML, CSS3 und entsprechenden Stilen lassen sich diverse Symbole erzeugen. Mit etwas JavaScript können dann animierte Transformationen durchgeführt werden, die beispielsweise an ein Klick-Ereignis gekoppelt sind. Wofür solche Transformationen gut sein können, ist beispielsweise in Googles Design Guidelines für das neue Material Design zu sehen. Auf mobilen Geräten können derartige Animationen verwendet werden, um ein verbessertes Verständnis der verschiedenen Navigationsebenen zu ermöglichen.
Mit Marka steht eine kompakte JavaScript/CSS3-Lösung bereit, mit der sich genau solche Animationen erzeugen lassen.

Marka - Beautiful transformable icons

Mit der Bibliothek kommen 36 einfache Icons die per JavaScript animiert werden können. Neben Form-Transformationen können auch Farbübergänge erzeugt werden. Eine genaue Dokumentation findet sich hier und das gesamte Projekt gibt es wieder bei GitHub.

201422Aug

DeLorean.js: Framework für Flux-Architekturen

Mit React wurde vor einiger Zeit ein JavaScript-Framework von und für Facebook veröffentlicht: Dabei handelt es sich um eine Komponente der Flux-Architektur, die sich als Pattern für Web-Applikationen versteht und bei dem sozialen Netzwerk zum Einsatz kommt. React stellt in der Flux-Architektur einen "View-Controller" dar, der sich bei dem Konzept in den unidirektionalen Datenfluss einfügt — dadurch wird die Business-Logik einfacher als bei einer MVC-Anwendung und die Daten bleiben in allen Bereichen, also auf dem Server und im Client, konsistent.

Flux - Application Architecture for Building User Interfaces

Eine Flux-Anwendung besteht also aus den drei folgenden Bereichen: Dispatcher, Stores und Views, wobei Letztere durch das React-Framework und JSX-Templates repräsentiert werden. Änderungen im Client werden also von einer React-Komponente erkannt und an eine Web-API weitergegeben, die wiederum lokale Stores durch entsprechende Dispatcher aktualisiert, wobei ein Dispatcher dafür sorgt, dass auf eventuelle Callbacks von anderen abhängigen Stores gewartet wird. Wer das Ganze in Aktion sehen möchte, kann sich das Flux Chat Example dazu ansehen.
Eine weitere interessante Anlaufstelle für das Flux-Pattern stellt nun auch das Framework DeLorean.js dar, das nicht nur mit React, sondern auch mit anderen Lösungen, wie etwa Flight.js von Twitter, eingesetzt werden kann. Durch entsprechende Fiddles von DeLorean.js dürfte die Funktionsweise von Flux etwas einfacher zu verstehen sein.

201414Aug

Next-Gen-JS-Frameworks: Pro, Contra und Neuansatz

Sie heißen AngularJS, Backbone.js, Ember.js, Polymer und React: Die Next-Gen-JavaScript-Frameworks, mit denen schon jetzt moderne Webanwendungen und Portale realisiert werden. Die Frameworks bieten in der Regel keine gewöhnlichen Funktionen wie DOM-Manipulationen, Effekte oder Ähnliches, sondern warten mit neuartigen Konzepten für Client-Templates, Bindings und Model-View-Controller-Alternativen auf. Ende letzten Jahres hatte ich einen Artikel darüber verfasst, wie sich die Welt der JavaScript-Frameworks in den kommenden Jahren verändern wird.

Google Trends - angularjs, knockoutjs, ember js, backbone.js

Auch gibt es bereits ausführliche Vergleiche der Next-Gen-Frameworks, in denen die Bibliotheken beleuchtet und mit einem Fazit versehen werden. Im Blog von "&yet" findet sich nun ein aktueller "Opinionated Rundown of JS Frameworks", in dem auch React und Polymer betrachtet werden. Neben Pros und Contras stellen die Entwickler am Ende des Artikels schließlich ihr eigenes Framework Ampersand.js vor, das die genannten Punkte verbessern will. Ob sich das "highly modular, loosely coupled, non-frameworky" Framework durchsetzen wird, dürfte sich bald herausstellen.
AngularJS erfreut sich immer größerer Beliebtheit und inzwischen gibt es mit Ionic sogar schon eine PhoneGap-/Cordova-Erweiterung, die auf AngularJS basiert und eine solide Basis für native Smartphone-Apps darstellt, die mit JavaScript entwickelt werden können.

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.