Nov 29 2008

Runde Ecken ganz einfach mit Liquid Canvas

Tag: Canvas,Javascript,jQueryPatrick @ 10:03 pm

Steffen Rusitschka veröffentliche vor wenigen Tagen die sehr gelungene Mini-Javascriptbibliothek Liquid Canvas zum Erzeugen perfekter runder Ecken an beliebigen HTML-Elementen.

Die Rundungen werden zur Laufzeit über Canvas generiert und automatisch in den HTML-Code eingebettet. Der Einsatz von herkömmlichen Bildbearbeitungsprogrammen wie Gimp, Inkscape oder Photoshop entfällt völlig.

Die Features im Einzelnen:

  • automatisches Erzeugen von HTML-Canvas-Elementen, die sich der Größe des HTML-Elements anpassen
  • Canvas-Abstraktion – jedes HTML-Element erhält eine paint-Methode
  • Plugins zum Rendern können verwendet werden
  • etliche Plugins existieren bereits, eigene können ebenso eingebunden werden
  • vereinfachte Render-Sprache für Plugin basiertes Rendern
  • an CSS angelehnte Syntax der Render-Sprache für die plugin-Formatierung
  • nutzt nur HTML, Canvas, jQuery und exCanvas
  • funktioniert mit Firefox (2+), Internet Explorer (6+), Safari (3+), Chrome

runde Ecken mit Liquid Canvas - Beispiel 1 runde Ecken mit Liquid Canvas - Beispiel 2 runde Ecken mit Liquid Canvas - Beispiel 3 runde Ecken mit Liquid Canvas - Beispiel 4


Okt 24 2008

Imageflow 1.0.1

Tag: Javascript,ToolsPatrick @ 5:17 pm

Seit wenigen Tagen ist die Bildergalerie Imageflow nun in Version 1.0.1 erhältlich.

Bereits in der Vergangenheit hatten wir mehrmals über dieses Script berichtet.

Lange war es still gewesen, was die Weiterentwicklung von Imageflow betrifft. Doch Programmierer Finn Rudolph war nicht untätig. Er hat, im Gegensatz zu den vorherigen Versionen, den gesamten Quellcode objektorientiert umgeschrieben.

Desweiteren bietet Version 1.0(.1) noch folgenden Mehrwert:

  • Behebung mehrerer Fehler (Selection-Bug, Back-Button-Bug und 2 IE-spezifische Fehler)
  • zeitigeres Anzeigen der Galerie durch Code-Ausführung direkt nach dem Laden des HTML-Codes
  • auf 8kb komprimierbarer und leichter lesbarer Quellcode
  • vereinfachte Installation und Integration
  • echter Ladebalken
  • alle Optionen sind nun optional
  • Transparenz-Unterstützung
  • Anpassbarkeit der Zoomgröße beim Fokussieren eines Bilder
  • Einblendeffekt nach dem Initialisieren
  • Opera + IE: Steuerung über Pfeiltasten
  • Möglichkeiten zum Vorladen von Grafiken

Durch den Umstieg zum objektorientierten Programmierstil können nun auch mehrere Instanzen von imageflow auf einer Seite verwendet werden.

Der Einbau erfolgt nun wie folgt:

<!-- Einbau -->
<link rel="stylesheet" href="imageflow.css" type="text/css" />
<script src="imageflow.js" type="text/javascript"></script>
...
<!-- Bilderdefinition-->
<div id="unique_name" class="imageflow">
<img src="dir/image_1.jpg" longdesc="URL_1" width="w_1" height="h_1" alt="Text_1" />
<img src="dir/image_2.jpg" longdesc="URL_2" width="w_2" height="h_2" alt="Text_2" />
<img src="dir/image_3.jpg" longdesc="URL_3" width="w_3" height="h_3" alt="Text_3" />
</div>

Die Initialisierung geschieht nun durch den folgenden, vereinfachten Javascript-Code:

domReady(function()
{
var instanceOne = new ImageFlow();
instanceOne.init({ ImageFlowID: 'myImageFlow' });
});

Wer detailierte Informationen sucht, kann einen Blick in die leicht verständliche, englischsprache Dokumentation werfen.

Imageflow 1.0.1


Okt 17 2008

23 mit Canvas und Javascript erstellte Fraktale

Tag: Canvas,JavascriptPatrick @ 3:46 pm

In Zeiten, in denen die Browserhersteller einen Wettstreit über die Ausführungsgeschwindigkeit von Javascript-Anweisungen führen und dabei immer neue Rekorde aufstellen, ist es nicht weit her geholt, Spiele und auch komplexe, mathematische Funktionen in JS umzusetzen.

Jacob Seidelin, der auf seiner Spielwiese nihilogic des Öfteren interessante, moderne Javascript-Anwendungsmöglichkeiten präsentiert, veröffentlichte vor kurzem in einem Blogbeitrag eine Mini-Applikation zum Erzeugen von Fraktalen.

Neben der überaus bekannten Mandelbrot-Menge stehen verschiedene Multibrot-Varianten, das Burning Ship- und etliche Julia-Fraktale live zur Berechnung im Browser zur Verfügung.

Nachfolgend genannte Einstellungsmöglichkeiten ermöglichen es, die Fraktaldarstellung anzupassen:

  • Image size: Ausmaße der gerenderten Grafik, um so kleiner um so schneller
  • Color scheme: Zeichenfarbe des Fraktals, schwarz/weiß wird ein wenig schneller berechnet
  • Smooth colors: Hübschere aber langsamerer Zeichenalgorihmus, der die Grafik dunkler darstellt. Funktioniert nur für Mandelbrot und die Julia-Variationen
  • Zoom factor: Zoomfaktor beim Klicken in die Grafik

Achtung: Das Änderungen der Einstellungen bewirkt automatisch ein erneutes Rendern des Fraktals!

Hinweis: Je größer der Zoom und je größer die Bildausmaße um zu mehr Rechenzeit wird benötigt!

Den WebKit-basierten Browsern (einschließlich Safari) und Googles Chrome bekommt der immense Rechenaufwand besser, während Mozillas Firefox anscheinend mit Speicherlecks bei all zu häufigen Zoomen zu kämpfen hat.

Microsofts Internet Explorer bleibt auf Grund des fehlenden Canvas-Supports (leider mal wieder) außen vor.

Fraktal 1 Fraktal 4 Fraktal 5 frac2.png frac3.png


Sep 30 2008

Die ultimative addEvent-Funktion

Tag: JavascriptPatrick @ 11:30 pm

Stephen Stchur veröffentlichte kürzlich in seinem Blog die „ultimate addEvent() function„.

Bereits seit mehreren Jahren beschäftigt sich Stchur mit Events und deren Umsetzungen in verschiedenen Browsern.

Mit der Erfahrung, die er sich in dieser Zeit aneignete, machte er sich nun ans Werk seine addEvent-Funktion zu überholen und zu optimieren.

Von den bisherigen Lösungen soll sich diese ultimative addEvent-Funktion durch folgende Punkte abheben:

  • funktioniert in allen gängigen Browsern
  • gewährleistet das korrekte Auslösen von Events (betrifft vor allem den IE)
  • zwingt den IE zum korrekten Umgang mit „this“ in within-Eventhandler-Funktionen
  • standardisiert die Event-Befehle in allen Browsern (kein vorangestelltes „on“ im IE mehr nötig)
  • führt die Events „mouseenter“ und „mouseleave“ für alle Nicht-IE-Browser ein
  • bietet die Möglichkeit über Plugins eigene Events zu definieren (zum Beispiel „mousewheel“ oder „DOMContentReady“)

Die komplette Javascript-Funktion steht hier zum Download zur Verfügung.


Aug 26 2008

jQuery demnächst mit neuer Selektor-Engine Sizzle

Tag: Javascript,jQueryPatrick @ 7:42 pm

jQuery-Guru John Resig stellte vor wenigen Stunden sein aktuelles Projekt „Sizzle“ vor.

Sizzle ist eine neue, Framework unabhängige Selektor-Engine, die nach Fertigstellung auf allen üblichen Browsern funktionieren soll und dabei einen erheblichen Geschwindigkeitsvorteil gegenüber bisherigen Lösungen bietet.

Die komprimiert gerade einmal 4 Kilobyte große Engine soll in Firefox 3 4x, in Opera 9 3x und in Safari 1,5 mal schneller zu Werke gehen.

Das bisherige Code-Release enthält noch etliche kleinere Fehler in den standardkonformen Browsern und einige schwerwiegendere im Internet Explorer.

Die Arbeiten an Sizzle halten also noch an. Es wird dringend abgeraten die jetzige Version zu verwenden.


Aug 19 2008

Fantastische Lupenfunktion

Tag: JavascriptPatrick @ 12:40 pm

Christian Effenberger veröffentlichte auf seiner Seite netzgesta.de ein Skript um sehr cool aussehende Lupeneffekte relativ einfach in eigene Homepage einzubauen.

Alles was man dazu benötigt ist sein loupe.js, das aktuell in Version 1.3 vorliegt und für nicht-kommerielle und private bzw. Schulungszwecke frei verfügbar ist.

Zum Einbau müssen die folgenden Zeilen Code in den Head-Bereich eingefügt werden:

// only if the image "loupe.png" is not in the current path
<script type="text/javascript">var loupePath="imagepath/";</script>
// else only this lines...
<script src="loupe.js" type="text/javascript"></script>
<!--&#91;if gte IE 6&#93;>
<script type="text/javascript">var loupePath="vml/";</script>
<script type="text/javascript" src="vml/loupe.js"></script>
<!&#91;endif&#93;-->

Um die Lupenfunktion hinzuzufügen, wird ein onload=“initLoupe(this.id);“-Ereignis auf ein von einem div umschlossenes Bild gesetzt.

<img src="..." id="..." onload="initLoupe(this.id);" alt="..." width="356" height="205" />

Die Lupengrafik lässt sich problemlos ersetzen und den eigenen Vorlieben und Website-Motiven anpassen.

loupe.js funktioniert in allen größeren Browsern (Firefox 1.5+, Opera 9+, Safari und IE 6+). Ältere Browser ignorieren die Anweisungen einfach.

loupe_homer.png loupe_monalisa.png loupe_karte.png


Jul 31 2008

Webseitenbesucher auf Updates ihres Browsers hinweisen

Tag: JavascriptPatrick @ 1:44 pm

Nick Stakenburg versucht mit seinem „Pushup: Pushing up th web“-Projekt die Verbreitung von modernen und geupdateten Browsern voran zu bringen.

Dazu bietet er ein Skript zum Einbau in eine bestehene Homepage an, das Benutzer über ein kleines Infofenster über neuere Versionen ihres Webrenderes informiert.

Um das Skript auf der eigenen Seite nutzen zu können, müssen die zwei Dateien im head-Bereich eingebunden werden:

<link href="http://www.ajaxschmiede.de/wp-admin/css/pushup.css" rel="stylesheet" type="text/css" />
<script src="http://www.ajaxschmiede.de/wp-admin/js/pushup.js" type="text/javascript"></script>

Über so ein Infofenster wird der Besucher über Browserupdates informiert.


Jul 31 2008

ProtoChart – Diagramme zeichnen mit Prototype und Canvas

Tag: Canvas,JavascriptPatrick @ 1:40 pm

Deensoft arbeitet mit ProtoChart seit einigen Monaten an einer frei verfügbaren Bibliothek zur Erstellung von Diagrammen mit Hilfe von Canvas und dem Framework Prototype.

Vor wenigen Tagen veröffentliche das Team um Obaid Ahmed eine stabile Version im Firmenblog und bietet gleichzeitig eine Vielzahl von Demos samt Einbauanleitung (englisch) an.

Folgende Graphenarten werden unterstützt:

  • Liniendiagramm
  • Säulendiagramm
  • Kreisdiagramm
  • Punktdiagramm
  • Flächendiagramm
  • gemischte Diagramme

Zu den Stärken von ProtoChart gehört die hochgradige Anpassungsfähigkeit. So lassen sich Legende, Achsen, Gitternetz und Hintergrund auf die jeweiligen Bedürfnissen einstellen. Außerdem können mehrere Datenserien in einen Graphen gezeichnet werden.

Unterstützt werden alle üblichen Browser (IE6+, FF2+ und Safari) .

Als kleine Besonderheit: ProtoChart funktioniert auch auf dem iPhone.

ProtoChart - ein Liniendiagramm ProtoChart - ein Säulendiagramm


Jul 24 2008

SoundManager 2 ermöglicht Musikwiedergabe und -steuerung

Tag: JavascriptPatrick @ 8:37 pm

Scott Schiller, ein engagierter Web-Entwickler, der gerne seine Freitzeit damit verbringt coole Web-Features zu erstellen, hat mit SoundManager 2 ein javascript-gesteuertes Tool geschrieben, das die fehlenden Möglichkeiten von JS in Sachen Musikwiedergabe nachzuliefern versucht.

Dabei bedient sich Schiller des Adobe Flash Players (Version 8 und höher), der unbedingt erforderlich ist zur Wiedergabe und Steuerung der Tonausgabe.

Von der Browserseite her stellt der Soundmanager kaum Ansprüche. Opera, Safari, Firefox (1+) und IE (5+) für Windows und Mac werden unterstützt.

Dank der felxiblen API kann der Web-Entwickler frei entscheiden, welche der zur Verfügung stehenden Steuerelemente und Wiedergabeinformationen er dem Besucher anbietet. Von Lautstärkenreglung, Stummschalten bis Pausieren und Fortsetzen stehen alle üblischen Bedienfunktionen zur Vefügung.

Mit jsAMP bietet Schliler auch gleich eine interessante Beispielanwendung an, die von der von ihm entwickelten SM2-Schnittstelle gebraucht macht.

jsAMP ist – wie der Name vermuten lässt – ein in Javascript geschriebender mp3-Player. Die gesamte Playerfunktionalität wird in JS verwaltet. Flash-Kenntnis sind nicht notwendig.

So durchsucht jsAMP die Seite nach verlinkten mp3-Dateien und erstellt aus diesen eine Wiedergabeliste. Während des Ladevorgangs werden die ID3-Tag-Informationen ausgelesen und angezeigt.

Der Player befindet sich jedoch noch im Alpha-Stadium und kann unter Umständen abstürzen.

Der Einbau des SoundManager 2 geschieht durch Einfügen des nachfolgenden JS-Codes.

<-- Einbinden des SM2 -->
<script type="text/javascript" src="/path/to/soundmanager2.js"></script>
<-- individuelle Einstellungen -->
<script type="text/javascript">
soundManager.url = '/path/to/sm2-flash-movies/'; // Verzeichnis, wo die SWF-Dateien liegen

// soundManager.debugMode = false; // Deaktivieren des debug-Modus nach dem erfolgreichen Einbau

soundManager.onload = function() {
// SM2 wurde geladen - Erstellungen und Abspielen von Musikdateien
soundManager.createSound('helloWorld','/path/to/hello-world.mp3');
soundManager.play('helloWorld');
}
</script>

Der SM2 ist jedoch nur auf mp3s ausgelegt, andere Formate werden nicht unterstützt!

Schiller hat eine verspielte Anwendung erstellt, die zeigt, wozu man den SoundManager 2 nutzen kann. Nämlich um in Javascript basierten Spielen Ton einzubauen.

Eine ganz einfache Demo habe ich hier erstellt.


Jul 16 2008

Sichere und kompakte Eigenschaftenabfrage

Tag: JavascriptPatrick @ 8:24 pm

Auf der Seite Getting Things Coded wird ein interessantes Verfahren beschrieben, wie man die Existenz eines Knotens und die Existenz einer oder mehrerer Eigenschaften des Knotens kompakt und fehlerfrei überprüfen kann.

Es ist bekannt, dass null nicht nur keine Eigenschaften besitzt, sondern auch deren Existenz kann nicht überprüft werden. So gibt null.Eigenschaft einen Fehler anstelle des Wertes undefined zurück.

Eine If-Anfrage, wie die nachfolgende, produziert also immer einen Fehler sobald nextSibling fehlschlägt – kein unmittelbar nachfolgender Knoten existiert – oder node den Wert null besitzt.

if (node.nextSibling.className == ...) {
...
}

Die Lösung besteht darin, alle möglichen Überprüfungen abzufragen. Das kann dann schnell ziemlich viel werden und so entsteht dann eine Struktur wie im nächsten Beispielcode.

if (
(node) &&
(node.nextSibling) &&
(node.nextSibling.className == ...)
... ) {
...
}

Um dem entgegen zu wirken, bedienen wir uns eines kleinen Tricks, der den boolschen Ausdruck vereinfacht. Der Trick besteht darin eine Alternive in Form eines leeren Objektes {} oder der 0 anzubieten.

So entsteht dann ein Gebilde wie das folgende:

if (((node || 0).nextSibling || 0).className == ...) {
...
}

« Vorherige SeiteNächste Seite »