Tag: webdesign

201627Nov

PixelZoomer für Windows: Jetzt verfügbar

Es ist geschafft: Das Projekt ist zwar schon seit einiger Zeit fertiggestellt, aber es musste auch noch eine entsprechende Website her. Ab sofort ist meine Firefox-Erweiterung PixelZoomer auch als Windows-Anwendung verfügbar! PixelZoomer für Windows ist kostenlos und kann direkt heruntergeladen werden. Die Anwendung ist eine Weiterentwicklung der Firefox-Extension. Sie erstellt beim Start einen Desktop-Screenshot und bietet die gewohnten Tools. Das Programm basiert auch weiterhin auf Mozilla-Technologie. Durch das Laufzeitpaket XULRunner läuft die Anwendung zuverlässig in allen gängigen Windows-Versionen, wobei Windows 8 oder höher zu empfehlen ist.

PixelZoomer für Windows

Durch den Einsatz von XULRunner konnte ich den Großteil der Firefox-Erweiterung übernehmen: Lediglich die Screenshot-Erzeugung musste neu in C++ implementiert und anschließend als XPCOM-Komponente eingebunden werden. In diesem Zuge habe ich PixelZoomer gleich ein neues User Interface verpasst und einige Anpassungen vorgenommen. Zudem lassen sich Grafiken aus der Zwischenablage einfügen, wodurch auch MouseOver- und Hover-Effekte analysiert werden können.
Mit der Windows-Variante von PixelZoomer ist die Pixelanalyse nicht mehr auf Firefox beschränkt. Es können alle beliebigen Browser verwendet werden, da die Anwendung einen Screenshot des gesamten Desktops erzeugt (bei mehreren Monitoren kann ausgewählt werden). Zudem können auch einfach Browser nebeneinander angeordnet werden, um einen direkten Vergleich zu haben. Oder aber die Designvorlage kann analysiert werden, wenn beispielsweise Abstände überprüft oder Farbwerte abgelesen werden sollen.
PixelZoomer für Windows ist ab jetzt in Version 1.0 verfügbar. Einen Update-Mechanismus gibt es in der Form nicht, jedoch wird im Hilfe-Fenster angezeigt, ob eine neue Programmversion verfügbar ist. Viel Spaß mit der Anwendung!

201524Okt

CSS: Refresher Notes als modernes Kompendium

CSS ist zweifelsohne eine Design-Syntax, die immer wieder durch ihre Robustheit und Vielfältigkeit überzeugt. Mittlerweile finden die kaskadierenden Stylesheets nicht nur im Web-Bereich Verwendung, sondern verstärkt auch in mobilen Apps oder gar Desktop-Anwendungen. Dennoch stellt CSS nach wie vor eine Herausforderung dar, da komplexe Layouts auch komplexe Regeln erfordern. Und gerade responsive oder adaptive Designs verlangen Webdesignern Einiges an Know-How ab.
Zum Auffrischen, aber auch zum Nachschlagen hat der Entwickler Vasa aus San Francisco diesbezüglich die CSS Refresher Notes bei GitHub angelegt.

CSS Refresher Notes - a quick refresher of CSS concepts compiled from various articles online

Dabei handelt es sich um eine Art CSS-Kompendium, das Informationen aus verschiedenen Online-Quellen enthält. Behandelt werden die Themen Positioning, Display, Floats, CSS-Selektoren, Effizienz von Selektoren, Repaints und Reflows, CSS3-Properties, CSS3-Media Queries, responsives Webdesign, CSS3-Transitions, CSS-Animationen, SVG, CSS-Sprites und vertikale Ausrichtung. Für angehende und bestehende CSS-Experten sind die Refresher Notes in jedem Fall ein Platz in den Bookmarks wert.

201531Aug

Birdfont: Freier Editor zum Erstellen von Schriftarten

Wer eine eigene Schriftart erstellen möchte, hat eine große Aufgabe vor sich. Neben dem eigentlichen Design der etlichen Zeichen, die gestaltet werden müssen, bedarf es einer entsprechenden Software. Mittlerweile gibt es neben den Industriestandard FontLab Studio auch zahlreiche kostenlose Alternativen. Dazu zählen seit geraumer Zeit bereits FontForge oder Type Light. Eine weitere Alternative stellt die Software Birdfont dar, die das Erzeugen von TTF-, EOT- und SVG-Schriftarten ermöglicht.

Birdfont – A free font editor for TTF, EOT and SVG fonts

Bei Birdfont handelt es sich um ein Open Source-Projekt: Daher steht die Anwendung für Windows, Mac OS X, Linux und OpenBSD bereit. Das eigentliche Erstellen einer Schriftart kann anhand von geometrischen Formen (Kreis, Rechteck), freihändig oder über Bezierkurven erfolgen. Es können aber auch Pfade aus einer bestehenden SVG-Datei importiert werden. Das Programm bietet zudem Ebenen, verschiedene Raster-Einstellungen und die Möglichkeit, einzelne Zeichen zu kippen. Schließlich kann die Laufweite der Schriftart angepasst werden.
Die Software steht in einer kostenlosen Variante zur Verfügung: Einzige Bestimmung hierbei besteht darin, dass die erstellte Schriftart unter der SIL Open Font-Lizenz veröffentlicht werden muss. Die kommerzielle Version von Birdfont ist aber schon ab 5 USD zu haben.

201516Aug

Update: Web Development Tools mit allen Projekten

Heute gibt es noch eine weitere Neuigkeit in eigener Sache: Ich wollte meine bisherigen Anwendungen und Skripte für Webentwickler in einer großen Übersicht sammeln und darstellen. Dazu habe ich mein User-Repository bei GitHub verwendet. Dort finden sich jetzt die Web Development Tools. Hierbei handelt es sich um eine interaktive 3D-Darstellung, die ich mit der Famous Engine umgesetzt habe.

Web Development Tools - the complete collection

Die Seite besteht aus einer abstrakten Landschaft, auf der die verschiedenen Projekte verteilt sind. Zudem gibt es die vier Kategorien "Web Development", "User Interface Design", "Comparisons" und "Game Development", in denen die Tools zu finden sind. Die Landschaft wird um zukünftige Projekte erweitert werden. Viel Spaß beim Ausprobieren!

201528Jul

JavaScript: Toast-Benachrichtigungen im Web verwenden

Benutzer von Android-Geräten werden sie kennen: Bei Toast-Benachrichtigungen handelt es sich um eine Nachricht, die für eine bestimmte Zeit am unteren Bildschirmrand angezeigt wird und nach einer gewissen Zeit ausgeblendet wird. In einer Webanwendung könnte diese Funktionalität für diverse Zwecke eingesetzt werden — so könnte beispielsweise der Benutzer darüber informiert werden, ob seine Formulardaten erfolgreich gespeichert wurden.
Wer eine Nachbildung der Android-Toast-Nachrichten für HTML sucht, kann einen Blick auf ToastIt.js werfen. Dabei handelt es sich um ein kompaktes Skript (alternativ NPM-Modul), das die entsprechende Benachrichtigung in den Browser bringt.

ToastIt.js - html toast messages

Die Demo zeigt das Skript in Aktion. Die Verwendung ist denkbar einfach:

  • toastit(text, timeout, options)

Bei den Optionen können Attribute gesetzt werden, die anschließend als CSS-Eigenschaft auf die ToastIt-Benachrichtigung übertragen werden.

201514Mai

plainJS: Sammlung mit Vanilla-JavaScript-Bibliotheken

JavaScript-Code, der nicht auf externe Bibliotheken angewiesen ist, bezeichnet man auch als Vanilla-JavaScript. Die Entwicklung der Browser und Webstandards ist in den letzten Jahren soweit fortgeschritten, dass JavaScript-Frameworks wie jQuery oder Dojo immer mehr in den Hintergrund treten. Ich hatte hierzu bereits einen ausführlichen Artikel veröffentlicht. Aus diesem Grund stellt sich vielen Entwicklern die Frage, ob für das nächste Projekt überhaupt noch jQuery oder ein anderes Framework zur Vereinfachung eingesetzt werden soll: Mit ECMAScript 5 und der stärker werdenden Verbreitung moderner Browser stehen im Grunde alle Funktionen bereit, die beispielsweise mit jQuery vereinfacht werden.

plainJS - The Vanilla JavaScript Repository

Daher gibt es jetzt schon etliche Skripte, die nicht auf ein Framework setzen und sich stattdessen ES5-Features zunutze machen. Eine Sammlung solcher Skripte steht nun mit plainJS bereit, die in unterschiedliche Kategorien eingeteilt ist: UI, Eingabe, Medien, Navigation, Effekte und Sonstiges. Hier finden sich also kleine Bibliotheken für alle erdenklichen Bereiche einer modernen Website.

201417Nov

CustomScrollbar: Eigene Scrollbars auf Websites nutzen

Das Thema ist zwar nicht gänzlich neu, aber aus gegebenem Anlass war es an der Zeit, eine eigene Entwicklung anzufertigen: Die Rede ist von individuellen Scrollbars auf Websites, die per CSS angepasst werden können. Bis heute gibt es keine native Möglichkeit, das Aussehen der Scrollbalken in Webbrowsern anzupassen. Zum einen sind die Scroll-Elemente in Browsern unterschiedlich implementiert (Chrome etwa kommt mit einer eigenen Lösung) und zum Anderen sind die Bedienelemente vom Betriebssystem abhängig. Natürlich gibt es bereits etliche JavaScript- oder jQuery-Lösungen für eigene Scrollbars, doch diese fallen sehr unterschiedlich aus. Ich habe daher ein kleines Skript entwickelt, das auf das eigentliche Verhalten der Browser-Scollbars zurückgreift und keine zusätzlichen Berechnungen benötigt.

CustomScrollbar - Eigene Scrollbars auf Websites nutzen

Dementsprechend bleibt das jeweilige Verhalten des Browser-Scrollings, was das Beschleunigen und Abbremsen des Scrollbalkens beinhaltet. Es wird also lediglich das native Scollbar-Element ausgeblendet und ein eigener div-Container wird darüber gelegt. Enstanden ist daraus schließlich CustomScrollbar, eine kompakte JavaScript-Lösung für die genannte Problematik.

Weiterlesen...
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!