In diesem Bereich findet Ihr Artikel, Tipps und Anleitungen (Tutorials) zu den Themen Webdesign, Photoshop, CSS, XHTML, JavaScript, jQuery, Flash, Typo3 und Textpattern.

Die Beiträge richten sich sowohl an Einsteiger als auch an Fortgeschrittene und sollen bei der täglichen Arbeit im Web-/Grafikdesign helfen.

201527Mai

Mobile Apps: Entwicklung mit einer JavaScript-Codebasis

Es ist wieder Zeit für eine Matrix: Diesmal geht es um die Entwicklung von mobilen Apps mit einer zentralen JavaScript-Codebasis. Dies wird mit bestimmten Frameworks möglich, die Cross-Plattform-Support durch HTML oder eine dynamische Runtime ermöglichen. Zu diesem Thema habe ich daher die Mobile App Framework Matrix entwickelt. Sie zeigt Technologien auf, mit denen sich iOS-/Android-Apps durch einen zentralen JavaScript-Code entwickeln lassen. Webentwickler sollen sich ein Bild von den derzeitigen Technologien und ihren Kehrseiten machen können.

Mobile App Framework Matrix - iOS-/Android-Apps in JavaScript entwickeln

Da mobile Cross-Plattform-Apps unterschiedliche Anforderungen haben, eignet sich nicht jede Lösung für jedes Szenario. Wenn es um Erweiterbarkeit, Leistung und Skalierbarkeit geht, variieren die Frameworks in verschiedenen Bereichen.

Weiterlesen...
201514Mai

Tooltip.js: MouseOver-Skript mit HTML-Konfiguration

Vor 5 Jahren hatte ich ein Tutorial veröffentlicht, das die Entwicklung eines eigenen jQuery-Tooltip-Plugins beschreibt. Das daraus resultierende Plugin kann zwar immer noch eingesetzt werden, doch mittlerweile bieten sich andere Techniken an, um Seiten eine spezifische JavaScript-Funktionalität hinzuzufügen. Daher habe ich das Skript Tooltip.js entwickelt, das sich an AngularJS orientiert und auf eine HTML-Konfiguration setzt.

Tooltip.js - A basic mouseover tooltip script

Dementsprechend können DOM-Elemente per data-Attribut mit der Tooltip-Funktionalität versehen werden. Anschließend wird noch ein Tooltip-Text benötigt, der aus dem entsprechenden title-Attribut gelesen wird. Über einen JSON-Option-String lassen sich einzelne Tooltip-Elemente zudem anpassen.

Weiterlesen...
201516Apr

Node.js: Skripte per Windows-Kontextmenü ausführen

Node.js-Entwickler, die in Windows unterwegs sind, können von der Anpassbarkeit des Systems Gebrauch machen und beispielsweise das Kontextmenü dazu nutzen, Node.js-Skripte direkt per Klick auszuführen. Dazu braucht es nur ein paar Einträge in der Windows-Registrierung sowie den dazugehörigen Befehl. Voraussetzung ist, das Node.js auf dem Rechner installiert ist. Dann lassen sich Skripte einfach über den Befehl cmd in Verbindung mit der Node-Anwendung ausführen.

Node.js - Skripte per Windows-Kontextmenü ausführen

Mit dem Parameter /k wird cmd dazu angewiesen, den Prozess nicht zu beenden. Das entsprechende Fenster, also die Eingabeaufforderung, bleibt in diesem Fall nach der Ausführung des Skripts bestehen. Wer hingegen nur das Skript ausführen und das dazugehörige Konsolenfenster direkt wieder schließen möchte, verwendet stattdessen einfach den Parameter /c.

Weiterlesen...
201528Mär

Node.js: Einfacher Webserver mit connect und serve-static

Ich habe das Skript schon seit einiger Zeit im Einsatz und mittlerweile dürfte es auch allgemein bekannt sein, wie sich mit Node.js und den Modulen connect und serve-static einfache Webserver einrichten lassen. Wenn es wirklich nur darum geht, schnell und unkompliziert HTML-, JavaScript- und CSS-Dateien auszuliefern, muss nicht gleich das umfangreiche Express.js-Framework verwendet werden. Mit dem folgendem Setup kann das Vorhaben schneller umgesetzt werden, da die genutzten Module kompakter ausfallen als Express.js.

Zuerst müssen dazu die beiden Module lokal installiert werden:

  • npm install connect serve-static

Anschließend kann der Webserver mit diesem Skript erzeugt werden:

  • var connect = require('connect');
  • var serveStatic = require('serve-static');
  • var http = require('http');
  •  
  • var app = connect().use(serveStatic(__dirname));
  •  
  • http.createServer(app).listen(3000);

Nach dem Start über die Kommandozeile ist der Server dann per http://localhost:3000 erreichbar. Das Skript steht auch als Gist bereit. Wer alternativ nach einer universellen Lösung für statische Webserver unter Windows und Mac OS X sucht, sollte einen Blick auf den Fenix Web Server werfen. Hier wird auch gleich noch eine Benutzeroberfläche geboten, welche per Klick die Verwaltung von mehreren lokalen Webservern und deren Neustart ermöglicht.