Tag: html-css

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.

201303Dez

HTML5: Tutorial für verschiedene Canvas-Zeicheneffekte

Browser-Zeichentools wie Sketchpad, Harmony oder Livebrush sind inzwischen bekannt. Die Apps sind unterschiedlich komplex und doch sind viele der eingebauten Zeicheneffekte relativ unkompliziert in der Programmierung. Juriy Zaytsev, besser bekannt ist als "kangax" und Schöpfer des unverzichtbaren "ECMAScript 5 compatibility tables", hat einen interessanten Artikel über die Erstellung verschiedener Zeicheneffekte mit dem HTML5-Canvas-Element veröffentlicht.

Perfection Kills -  Exploring canvas drawing techniques

In dem Beitrag erklärt der ehemalige Prototype.js-Core-Entwickler Stück für Stück Möglichkeiten, um eine virtuelle Zeichenfläche bzw. entsprechende Pinsel mit JavaScript zu erzeugen. Vom punkt-basierten Ansatz über Kantenglättung und Bezier-Kurven bis hin zu multiplen Pinselspitzen dürfte für jeden Geschmack etwas dabei sein. Alle Pinsel könne direkt über die eingebundenen CodePen-Widgets ausprobiert und angepasst werden. Viel Spaß beim Zeichnen!

201330Nov

Webentwicklung: Interaktive Tutorials für HTML5-Games

Seit der Einführung des Canvas-Elements steht auch HTML-Spieleentwicklern eine Grafikschnittstelle zur Verfügung, mit der sich auch komplexere Animationen und Effekte umsetzen lassen. Dabei muss nicht mehr auf CSS ausgewichen werden und zudem ist die Entwicklung dank JavaScript und der Canvas-API denkbar einfach. Doch ein HTML5-Spiel besteht nicht nur aus der Kommunikation mit der Schnittstelle, sondern erfordert vor allem Kreativität und natürlich Verständnis für mathematische Gegebenheiten.
Bei Crunchzilla finden sich interaktive Anleitungen für die Entwicklung von Browser-Games: Dabei sind die Tutorials in die Bereiche "Code Monster", "Code Maven" und "Game Maven" unterteilt.

Crunchzilla - Interaktive Tutorials für HTML5-Games

Die Bereiche sind sowohl an Jugendliche als auch an Erwachsene gerichtet: In einem Live-Editor kann JavaScript-Code bearbeitet werden und rechts daneben findet sich die entsprechende Echtzeit-Vorschau. Ein virtueller Mentor führt angehende Spieleentwickler von Beginn an durch die verschiedenen Kurse und gibt Tipps zur Entwicklung bestimmter Szenarien. So werden nach und nach kleine Spiele im Browser entwickelt, die sich durchaus sehen lassen können.

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.

201319Nov

Nunjucks: Vielseitige JavaScript-Template-Engine

Für JavaScript gibt es mittlerweile diverse Ansätze, was Templates angeht: Neben Handlebars und Tempo stellt vor allem das von Facebook und Instagram entwickelte React eine interessante Methode dar, um clientseitig dynamische Templates zu interpretieren.
Mit dem Projekt Nunjucks gibt es nun eine weitere Alternative, die ebenfalls vielversprechend aussieht.

Nunjucks - A rich and powerful templating language for JavaScript.

Die rund 8 KB große JavaScript-Bibliothek ermöglicht Templates mit einer gängigen Syntax:

  • {% block header %}
  • <h1>{{ title }}</h1>
  • {% endblock %}

Die Engine erlaubt das Definieren von eigenen Filtern, bietet asynchrone Templates und sogar Macros (also JavaScript innerhalb eines Templates). Weiterhin können Templates vererbt werden, was die Engine zu einem umfangreichen Werkzeug macht. Weitere Details finden sich in der Dokumentation.

201314Nov

Webdesign: Kostenlose Bootstrap-UI-Kits von PixelKit

Twitters Bootstrap-Framework zählt mittlerweile zu einem der beliebtesten CSS-Frameworks, die fertige UI-Komponenten, ein Grid-System, Glyphicons sowie JavaScript-Module enthalten. Inzwischen gibt es auch etliche Modifizierungen und Erweiterungen, die auf dem Framework aufbauen. Von PixelKit gibt es diesbezüglich fertige UI-Kits, die bei GitHub kostenlos heruntergeladen und eingesetzt werden können (CC- und MIT-Lizenz). Die UI-Kits enthalten Stile und Grafiken für alle denkbaren Standard-Komponenten wie Dropdown-Menüs, Login-Bereiche, Switches, Fortschrittsbalken, Kalender-Widgets, Slider, Video-Player, Tabs, Graphen, Suchfelder und Drehregler (Knobs).

Kostenloses PixelKit Bootstrap-UI-Kit - Vanilla Cream

Momentan gibt es 5 fertige PixelKit-Bootstrap-Themes: Vanilla Cream, Dark Velvet, Arctic Sunset, Modern Touch und Metro Vibes. Die UI-Kits verwenden Grafiken und sind nicht Retina-tauglich. Der Quellcode existiert in CSS- und LESS-Form.
Mittlerweile gibt es natürlich auch für Bootstrap-Themes einen Markt: Kostenpflichtige UI-Kits finden sich bei WrapBootstrap und kostenlos geht es mit Bootswatch.

201305Nov

PhysicsJS: Modulare JavaScript-Physik-Engine

Dank Canvas und WebGL sind nun auch im Web 3D- und Physik-Engines stark im Kurs: Mit Chipmunk, Box2DWeb, Cannon.js, JigLibJS oder Ammo.js stehen bereits sehr gute Portierungen für Canvas und WebGL zur Verfügung. Sogar für DOM-Elemente gibt es bereits eine jQuery-Portierung von Box2D.
Aber jede Engine ist einzigartig und je nach Projekt kann die eine oder andere Engine besser passen. Daher sei an dieser Stelle noch eine weitere JavaScript-Physik-Bibliothek erwähnt: Bei PhysicsJS handelt es sich um eine kompakte und modulare Physik-Engine, die durch einen Blick in die Demos überzeugen dürfte.

PhysicsJS - A modular, extendable, and easy-to-use physics engine for JavaScript

Die Implementierung der Engine ist denkbar einfach und wird auf dieser Seite veranschaulicht: Einer Engine-Instanz, die durch die Physics-Funktion erstellt wurde, können per "add()" neue Körper hinzugefügt werden. Dabei steht auch eine Kollisionserkennung bereit. Laut der Website gibt es neben dem Canvas-Renderer auch einen DOM-Renderer, was natürlich eine interessante Option darstellt, wenn es um die Animation von HTML-Elementen geht. Mehr Infos finden sich im Wiki, das sich aber momentan noch im Aufbau befindet.

201303Nov

Colourcode: Farbschemata entwickeln und exportieren

Adobe Kuler stellt längst nicht mehr das einzige Online-Werkzeug für das Erstellen von interessanten Farbschemata dar: Mit ColorJack, ColorBlendy, ColorRotate und dem Color Scheme Designer stehen bereits vielseitige Alternativen zur Auswahl.
Aktuell gibt es eine weitere Entwicklung auf diesem Gebiet, die Colourcode getauft wurde und das Definieren von großen Farbflächen über Mausbewegungen erlaubt.

Colourcode - Find your colour scheme

Das Konzept ähnelt dem Piknik Color Picker und wurde erweitert um vordefinierte Farbkontraste (monochrom, analog, triadisch, komplementär, etc.), wobei sich Farbkombinationen auch frei erstellen lassen.
Interessant dürften vor allem die Export-Möglichkeiten für Webdesigner und -entwickler sein, da sich die Farbschemata im SCSS- oder LESS-Code abspeichern lassen. Alterativ können die Farben auch als PNG-Grafik heruntergeladen oder als permanenter Link verwendet werden. Bei GitHub gibt es übrigens den Quellcode der Online-Anwendung.