Tag: werkzeuge

201413Okt

AngularJS: Directives und Services für Material Design

Die neuen Material Design-Spezifikationen von Google dürften mittlerweile in aller Munde sein. Dabei handelt es sich um Design-Guidelines, die unter Anderem bei Android 5.0 für die Optik eingesetzt werden. Die Guidelines enthalten etliche Richtlinien und Empfehlungen für die Gestaltung von interaktiven Anwendungen, die auf mehrere Endgeräte ausgelegt sind. Das "Material Design" orientiert sich dabei stark an haptischen Gegebenheiten wie taktilem Feedback.
Mit dem Paper Elements Sampler des Polymer Projects stehen bereits Web-Komponenten bereit, die den Ideen des Material Designs folgen. Nun haben einige Core-Entwickler von AngularJS und Ionic das Ganze auch für AngularJS umgesetzt.

Material Design for AngularJS Apps

Eine Demo-Seite gibt es hier. Es handelt sich in erster Linie um erweiterte Attribute für bestehende DOM-Elemente und Directives/Services. Ein Beispiel für einen Material Design-Button:

  • <md-button noink class="md-button-colored">
  • Button (noInk)
  • </md-button>

Die Directives bestehen aus etlichen Bedienelementen wie Schaltflächen, Listen, Radio-Buttons, Slider, Header, Schalter, Tabs, Toolbars und vielem mehr. Viel Spaß beim Ausprobieren!

201419Sep

Timesheet.js: Skript für zeitbasierte Balkendiagramme

Um vergangene Ereignisse untereinander auf einer Zeitachse, ähnlich wie bei einem Gantt-Diagramm, darzustellen, gibt es verschiedene Möglichkeiten. Für JavaScript etwa könnte das Skript Timesheet.js behilflich sein, das eine derartige Visualisierung durch CSS3 ermöglicht. Die Mini-Bibliothek benötigt kein externes Framework und lässt sich schnell anpassen.

Timesheet.js - JavaScript library for simple HTML5 / CSS3 time sheets

Als Eingabe wird lediglich ein JavaScript-Array benötigt, das die verschiedenen Ereignisse in serialisierter Form beinhaltet. Timesheet.js kümmert sich um die Darstellung, wobei es einige Einschränkungen gibt: Per CSS ist eine feste Breite von 720px vorgegeben und auch ein Scrollen (wie etwa bei Chronoline.js) innerhalb des Bereichs, in dem die Daten dargestellt werden, ist nicht möglich. Hier muss unter Umständen also Hand angelegt werden, doch aufgrund der Einfachheit des Skripts dürfte dies kein Problem darstellen. Alles Weitere findet sich auf GitHub.

201417Sep

Breach: Erweiterbarer Webbrowser auf Node.js-Basis

Mit Node.js und Chromium lassen sich die unterschiedlichsten Anwendungen umsetzen und ein Webbrowser liegt daher auf der Hand: Mit Breach steht nun ein erster moderner Ansatz bereit, der die beiden Projekt verbindet. Der Browser-Code besteht dementsprechend aus JavaScript-Modulen, während die Benutzeroberfläche mit HTML und CSS erzeugt wird. Interessant bei dem Browser-Konzept ist die Tatsache, dass es sich bei den Modulen und Node.js-Module handelt, die in Echtzeit installiert und aktiviert werden können. Auch Änderungen am Modul-Code können per Kontextmenü nachgeladen werden, ohne dass der Browser geschlossen werden muss.

Breach - A browser for the HTML5 era

Der aktuelle Stand von Breach kann sich bereits sehen lassen, auch wenn momentan nur die Kernmodule, wie etwa die Tabs, zu den Hauptmerkmalen zählen. Doch der Ansatz könnte sich in der kommenden Zeit zu einer Alternative für Entwickler mausern, da eigene Features schnell und einfach per npm hinzugefügt werden können. Breach steht aktuell leider nur für Mac OS X und Linux bereit, was sich jedoch ebenfalls ändern könnte. Das Projekt basiert auf der ExoBrowser-Plattform und diese lässt sich auch unter Windows kompilieren.
Wer dann noch nicht genug von Node.js hat, sollte sich Node OS ansehen — ein komplettes Betriebssystem, das auf einem Linux-Kernel und Node.js/npm basiert.

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.

201412Aug

CodeLobster: Vielseitiger Editor für PHP und JavaScript

Das Entwickeln von Web-Anwendungen ist inzwischen zu einem komplexen Prozess geworden, da Projekte sehr umfangreich werden können und es etliche Bibliotheken mit eigener Syntax gibt. Ein einfacher Text-Editor reicht in diesem Fall nicht mehr aus. Wer auf der Suche nach einem kostenlosen Editor für Windows ist, der unter Anderem auch PHP unterstützt und zudem eine Alternative zu Aptana oder NetBeans sucht, könnte einen Blick auf CodeLobster werfen. Hierbei handelt es sich um einen ausgereiften Code-Editor mit den gängigen IDE-Features wie Syntaxhervorhebung, Autovervollständigung oder kontextsensitive Hilfe.

CodeLobster - Vielseitiger Editor für PHP und JavaScript

Die kostenlose Version des Editors ist portabel und kann direkt gestartet werden. Enthalten sind Editor-Funktionen für PHP, JavaScript, CSS und HTML. Sollte die freie Version nicht ausreichen, kann für 39,95 USD die "Lite"-Version genutzt werden, die weitere Funktionalitäten wie SASS, LESS, Code-Snippets, Versionierungssysteme und einen SQL-Manager bietet. Hier findet sich ein Vergleich der verschiedenen Versionen.

201310Dez

Type Rendering Mix: Web-Schriftarten richtig glätten

Individuelle Schriftarten auf einer Website sind in erster Linie etwas Positives, da sie dem angedachten Design gerecht werden und für mehr Harmonie sorgen, wenn die gesamte Typografie entsprechend abgestimmt wurde. Allerdings werden Web-Schriftarten nicht in allen Browsern und Betriebssystemen gleich dargestellt. Ich hatte vor einiger Zeit berichtet, da seit Windows Vista und einer aktivierten Hardwarebeschleunigung das GDI-Rendering durch DirectWrite ersetzt wurde. Unter Mac OS X und iOS kommt das Font-Rendering "Core Text" zum Einsatz, das alle Schriftarten etwas kräftiger darstellt. Unter Android und Linux wiederum werden Texte durch FreeType angezeigt.
Um den verschiedenen Betriebssystemen und Browsern gerecht zu werden, kann das Skript Type Rendering Mix genutzt werden: Hiermit werden 2 CSS-Klassen auf das "html"-Element angewendet, die Aufschluss über das Font-Rendering (Rasterizer und Anti-Aliasing-Methode) geben.

Type Rendering Mix - Apply CSS based on the text rasterizer and antialiasing your browser is using

Wenn in einem Webdesign also eine eigene Schriftart verwendet wird, kann die CSS-Klasse "tr-coretext" beispielsweise so angepasst werden, das hier ein leichterer Schriftschnitt verwendet wird (font-weight). So kann in den unterschiedlichen Systemen ein einheitliches Schriftbild besser gewährleistet werden.

201308Dez

Headroom.js: Kopfleiste durch Scrolling ausblenden

Der Effekt dürfte mittlerweile schon auf der einen oder anderen Website gesichtet worden sein: Wird durch das Scrollen der Seite ein gewisser Punkt erreicht, verschwindet der Kopfbereich der Seite. Oft handelt es sich dabei um eine kompakte Navigation, die wichtige Elemente beinhaltet. Dieser Effekt kann also nützlich sein, wenn ein Menü innerhalb eines bestimmten Bereichs der Seite angezeigt werden soll.
Wer zu dem Effekt das passende JavaScript-Modul sucht, ist mit Headroom.js gut bedient.

Headroom.js - Hide your header until you need it

Das Plugin kann direkt in JavaScript, in Verbindung mit jQuery oder mit AngularJS verwendet werden. Es bietet verschiedene Optionen wie eine Toleranz, einen vertikalen Offset sowie Klassen, die beim Eintreffen der Ereignisse vergeben werden. Mehr Details gibt es bei GitHub.

201322Nov

Magnifier.js: Bilddetails durch Lupeneffekt vergrößern

Mit Loupe und Wadda stehen zwar schon ähnliche Skripte zur Verfügung, doch nicht immer ist ein jQuery-Plugin gewünscht und auch die Verwendung des Canvas-Elements, die es bei Wadda der Fall ist, ist nicht zwingend erforderlich. Daher könnte das Standalone-Skript Magnifier.js ein nützliches Hilfsmittel sein, wenn es um die Vergrößerung von Bildausschnitten auf einer Website geht.

Magnifier.js - Javascript library enabling magnifying glass effect on an images

Die Funktionsweise ist denkbar einfach: Wird der Mauszeiger über eine Grafik der Website bewegt, entsteht ein Lupeneffekt und der entsprechende Bereich wird vergrößert. Mit dem Mausrad lässt sich zudem die Zoom-Stufe einstellen. Eine Beispiel-Einbindung von Magnifier.js:

  • var evt = new Event(),
  • m = new Magnifier(evt);
  •  
  • m.attach({
  • thumb: '#thumb',
  • large: 'bild.jpg',
  • mode: 'inside',
  • zoom: 3,
  • zoomable: true
  • });

Das Projekt findet sich wieder bei GitHub zum Download.