Kategorien
Fotografie Inspiration JavaScript & jQuery Programmierung

Pointillismus per JavaScript mit dem jQuery-Plugin SeuratJS

Die JavaScript-Bibliothek SeuratJS verwandelt Bilder in pointillistische oder klassische Mosaike. Mit wenigen Einstellungen lassen sich Bilder nicht nur mit einem Mosaikeffekt, sondern auch noch mit einer schicken Animation versehen. SeuratJS basiert auf Raphaël, einer JavaScript-Bibliothek zum Erstellen von Vektorgrafiken im SVG-Format. Mosaik mit kreisförmigen Segmenten

Wie funktioniert SeuratJS?

Um SeuratJSzu nutzen, muss es zusammen mit jQuery und Raphaël im HTML-Kopf eingebunden werden:

<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="seurat.js"></script>

Anschließend lässt sich SeuratJS auf beliebige Bilder anwenden. Die Bilder werden als einfaches IMG-Element ausgezeichnet. Per jQuery-Selektor werden die Bilder angesprochen:

<img src="bild.png" id="bild" width="100" height="100" alt="" />

Als erstes wird ein Raphaël-Container erstellt. Denn SeuratJS greift auf die Funktionen von Raphaël zu, um ein Bild in eine SVG-Grafik umzuwandeln, die als Inline-SVG ins HTML-Dokument eingefügt wird:

$(document).ready(function() {
  $("#bild").load(function() {
    raphaelContainer = $("<div id=\"" + $(this).attr("id") + "\"></div>").width($(this).width()).height($(this).height());
    $(this).replaceWith(raphaelContainer);

Der Container ist ein einfaches DIV-Element, dem die ID des Bild-Elementes zugewiesen wird. Anschließend ersetzt man per „replaceWith()“ das IMG-Element durch den erzeugten Raphaël-Container. Nun wird ein neues Raphaël-Objekt erzeugt, auf das SeuratJS einen Mosaikeffekt anwenden kann:

    papier = new Raphael(document.getElementById($(this).attr("id")), $(this).width(), $(this).height());

Die eigentlichen Einstellungen für Form und Größe der Mosaiksegmente werden über die Funktion „seurat()“ festgelegt:

    papier.seurat({
      imageSource: $(this).attr("src"),
      shape: "circ",
      step: 10,
      attributes: {r: 10, stroke: 0}
    });
  });
});

Die zu verwendende Bilddatei definiert man über „imageSource“. Im Beispiel ist die Bildquelle nicht direkt angegeben, sondern wird aus dem IMG-Element geholt. Die Angabe „shape“ bestimmt die Form der Mosaiksegmente. Zur Auswahl stehen Rechtecke („rect“) und Kreise („circ“). Über „step“ gibt man den Abstand zwischen den einzelnen Segmenten an. Der Parameter „attributes“ beinhaltet bis zu zwei weitere Einstellungen, die jedoch nur bei runden Segmenten funktionieren. Zum einen wird mit „r“ der Radius der einzelnen Segmente angegeben, zum anderen über „stroke“ konfiguriert, ob die Elemente einen schwarzen Rahmen haben sollen. Einfaches Mosaik

Wie animiert man Mosaike?

Ein weiteres Feature von SeuratJS ist die Möglichkeit, ein Mosaik zu animieren. Über Animationen werden Radius („r“) und Rahmen („stroke“) der Mosaiksegmente verändert. Außerdem ist es möglich, zwei Delays zu definieren: Ein Delay zum Start der Animation und ein Delay für die Dauer der Animation. Der Aufruf der SeuratJS-Funktion sieht dann so aus:

paper.seurat({
  imageSource: $(this).attr("src"),
  shape: "circ",
  step: 10,
  attributes: {r: 10, stroke: 0},
  animator: function(element, x, y, step) {
    var bewegung = Raphael.animation({r: 50, stroke: 1}, 500);
    element.animate(bewegung.delay(2500));
  }
});

Über die Variable „bewegung“ startet man eine Raphaël-Animation. Diese beinhaltet die Werte, die während der Animation verändert werden sollen (im Beispiel „r“ und „stroke“). Anschließend folgt der erste Delay für die Dauer der Animation (hier 500 Millisekunden). „element.animate()“ startet die Animation. Darin enthalten ist der zweite Delay (hier 2500 Millisekunden), der angibt, wann die Animation beginnen soll. Auch die Position der Mosaikelemente kann während der Animation verändert werden. Dazu dienen die Koordinaten „cx“ und „cy“:

var bewegung = Raphael.animation({cx: 2*x, cy: 2*y, r: 50, stroke: 1}, 500);

Im Beispiel werden die X- und Y-Koordinaten jedes einzelnen Mosaiksegmentes verdoppelt.

Fazit: SeuratJS ist leicht zu bedienen und ermöglicht Mosaikeffekte inklusive Animation mit wenigen Handgriffen. Eine nette Spielerei ist es allemal! Da für jedes Mosaiksegment eine SVG-Fläche gezeichnet werden muss, geht das Script bei großen Mosaiken stark auf die Performance der Rendering-Engine.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Repo.js: GitHub-Projekte auf der Website einbinden

Frontend-Developer und jQuery Teammitglied Darcy Clarke hatte am 26. Juni Geburtstag. Und weil er so ein lieber Kerl ist, suchte er nicht nach möglichst vielen Geschenken für sich selber, sondern beschenkte die Netzgemeinde mit einem kleinen, aber feinen jQuery-Plugin namens Repo.js. Repo.js erlaubt es, GitHub-Repositories in Websites einzubinden. Das klingt unspektakulär, ist aber tatsächlich höchst nützlich für Webworker, die entweder selbst mit GitHub arbeiten oder aber regelmäßig über GitHub-Projekte schreiben. An der Stelle käme ich ins Spiel ;-)

Bildquelle: GitHub

Repo.js bindet die Dateistrukturen der Projekte ein

Clarkes Plugin bindet die Repositories, also die Dateiablagen der Projekte ein. Dazu verwendet es die beiden komplementären Scripte Vangogh und highlight.js, die sich im Wesentlichen um die Optik der Darstellung kümmern. Ein mit Repo.js eingebundenes Repository lässt sich bis auf die Dateiebene anzeigen. Das Öffnen der einzelnen Dateien ist ebenfalls möglich, allerdings ohne weitere Formatunterstützung. So werden vorhandene Grafiken nicht als solche angezeigt. Sämtliche Dateien werden als Quelltext geöffnet, eine Umsetzung etwa von Markdown findet ebenfalls nicht statt.

Der Aufruf ist simpel. Nachdem jQuery und Repo.js eingebunden sind, reicht folgender Codeschnipsel an der Stelle der Website, die das Repository anzeigen soll:

$('body').repo({ user: 'darcyclarke', name: 'Repo.js' });


Screenshot: So sähe das mit dem darüber stehenden Code eingebundene Repository dann aus

Zusätzlich könnte man über den Parameter branch noch angeben, dass nur ein bestimmter Zweig des Repository angezeigt werden soll. Da es keinerlei Einschränkungen hinsichtlich der Wahlmöglichkeiten gibt, ist jeder auf GitHub aktive Nutzer mit jedem auf GitHub vorhandenen Repository ansprechbar. Wollte man die großartige HTML5 Boilerplate einbinden, so schriebe man:

$('#repo2').repo({ user: 'h5bp', name: 'html5-boilerplate' });

Aktuell scheinen noch kleinere Bugs vorhanden zu sein. Ich bemerkte gelegentlich den Effekt, dass der Rücksprung aus einem Unterordner in den übergeordneten Ordner nicht zuverlässig funktionierte. Ebenso blieb die Ansicht ab und an leer, obschon im Originalrepository Inhalte vorhanden waren. Diese Problemchen wird Clarke sicherlich in den nächsten Tagen beheben.

Repo.js steht zur kostenfreien Nutzung auf GitHub zum Download bereit. Der Copyright-Vermerk Clarkes darf bei Verwendung und/oder Weitergabe des Scriptes nicht entfernt werden. Weitere lizenzrechtliche Einschränkungen bestehen nicht.

Links zum Beitrag:

  • Embeddable Github repos with Repo.js – Darcy Clarke Blog
  • Kurzanleitung zu Repo.js – darcyclarke.me
  • Das GitHub-Repository zu Repo.js – github/darcyclarke/repo.js
Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

Widow Tamer JS: Javascript verbessert Typografie in responsiven Layouts

Der Widow Tamer, zu deutsch Witwenzähmer, kümmert sich um eine spezielle typografische Fragestellung. Von einer Witwe spricht der Entwickler Nathan Ford im Zusammenhang mit seinem Tool dann, wenn am Ende eines Absatzes lediglich eine geringe Zahl von Zeichen übrig bleibt, diese aber dennoch in eine neue Zeile umgebrochen werden. Diese extrem kurze Zeile störe dann den Lesefluss, vor allem aber die Optik und gehöre „gezähmt“, so Ford. Bei statischen Layouts kann prinzipiell der Designer im Vorfeld darauf achten, solche Effekte zu vermeiden, bei responsiven Layouts liegt das außerhalb seines Einflussbereichs.


Sicherlich schwerer zu zähmen als typografische Witwen… (Bildquelle: bagal / pixelio.de)

Widow Tamer JS: Konfigurierbar und mit flexiblen Methoden ausgestattet

Das Ziel des Widow Tamers ist simpel. Vermeide eine letzte Absatzzeile, wenn diese weniger als X Zeichen hätte. Die Anzahl der Zeichen ist konfigurierbar und abhängig vom Hauptlayout, konkret von der Anzeigebreite eines einzelnen Absatzes. Bei dem einen werden schon 14 Zeichen zu einer unschönen Optik führen, bei anderen erst fünf. Da ist es gut, dass man dem Widow Tamer eben diesen Wert flexibel innerhalb der Funktion unter Verwendung von etwa chars: 14, mitteilen kann.

Die zentrale Funktion wt.fix() wird beim Laden der Seite initialisiert und wartet dann auf den Eintritt des definierten Events. Bei jedem Auftreten des Events wird sie ausgeführt. Ein Beispiel sähe so aus:

wt.fix({
	elements: '#posts article p',
	chars: 14,
	method: 'padding-right',
	event: 'resize'
    });

In Zeile 1 finden Sie den bereits genannten Funktionsaufruf. In Zeile 2 wird definiert, auf welche Elemente der Widow Tamer angewendet werden soll. Grundsätzlich wird das zumeist der P-Tag sein, aber auch andere Elemente sind durch das Script bearbeitbar. In Zeile 3 erfolgt die Definition der Witwe an sich, also die Angabe, ab wieviel Zeichen eine Zeile als Witwe erkannt werden soll. Zeile 4 bestimmt die Methode, mit der zur Witwenzähmung geschritten wird. Hierbei kann es sich um die Erhöhung oder Verringerung des Wort-Abstandes oder des Zeichenabstandes, sowie ein padding links oder rechts oder der Einsatz von nonbreaking Spaces handeln. Die beiden erstgenannten Methoden würden in Zeile 6 auf Vergrößerung oder Verringerung gesetzt. Schlussendlich wird dem Script noch das zu überwachende Event übergeben. In responsiven Layouts wird es sich hier in der Regel um resize handeln.

Zwei Screenshots nach Resize zeigen das Ergebnis der Witwenzähmung:


Aufruf in klein dimensioniertem Browserfenster


Völlig neue Umbrüche nach Resize

Auf der Website Artequalswork.com kann das Script live in Aktion betrachtet werden. Spielen Sie einfach ein bisschen mit der Größe des Browserfensters durch Ziehen mit der Maus. Der Effekt wird schnell sichtbar.

Nathan Fords Widow Tamer ist erst ein paar Tage alt. Ford twitterte seine Geburt am 22. Juni:

Das Script steht auf GitHub zum kostenlosen Download und zur freien Verwendung bereit. Ford erwartet, dass man seine Copyrightnotiz gemeinsam mit dem Script einsetzt und nicht entfernt. Ansonsten gibt es keine weitere Beschränkungen.

Kategorien
JavaScript & jQuery Programmierung

Nestable jQuery: Hierarchisches Listenmenü mit Touchfunktionalität

David Bushell ist offenbar einer von der Sorte, die nicht still sitzen können. Gelegentlich schreibt er für Smashing Magazine, aber ständig entwickelt er fantastische Plugins für jQuery oder gleich ganz ohne jegliche Dependenzen. Erst vor ein paar Tagen stellte ich an dieser Stelle die Version 2 seines Social Media Plugins SocialiteJS vor. Am vorletzten Wochenende schraubte er spontan ein jQuery-Plugin zusammen, mit dessen Hilfe sich Listenmenüs bauen, hierarchisch sortieren und per Drag & Drop wieder umsortieren lassen. Das Ganze funktioniert auch auf mobilen Geräten mit Unterstützung von JavaScript Touch-Events.


Nestable: Das Styling erfolgt per CSS

Nestable: Vorerst mit jQuery, später vermutlich Stand-alone

Wie Socialite wird wohl auch Nestable in der endgültigen Version ohne Abhängigkeiten auskommen, also auf jQuery verzichten können. Im aktuellen Entwicklungsstand wird das Vorhandensein einer jQuery-Version, vermutlich der Einfachheit halber, noch vorausgesetzt. Nestable arbeitet mit Klassen, Unterklassen und HTML5 Data-Attributen, um die Funktionalität in die Liste zu bringen. Mit Nestable ist es möglich, verschachtelte Listenmenüs zu bauen, deren Verschachtelungen sich auf Klick oder Tap öffnen. Mehrere verschachtelte Ebenen stellen kein Problem dar. Zudem können die einzelnen Listenelemente per Drag & Drop an andere Stellen innerhalb des Listenmenüs verschoben werden. Bushell hat sich hier am Verhalten der WordPress-Navigationsmenüs orientiert.

Die einzelnen Navigationsteile aka LI-Elemente erhalten per Data-Attribut eine ID (data-id) zugewiesen. Über Klassen wird definiert, ob es sich um ein Item, also einen Listenpunkt (dd-item), oder um ein Handle (dd-handle), also einen Listeninhalt handelt. Ein dynamisch an die LI-Elemente übergebenes Data-Attribut namens data-action, das über die Zustände collapse oder expand verfügen kann, sorgt für das Aus- und Einklappen der Hierarchie.

Nestable funktioniert auf allen modernen Browsern, sowie dem Internet Explorer ab Version 9. Zudem kann es auf allen mobilen Plattformen mit Javascript-Touch-Event-Unterstützung verwendet werden. Hierzu gehört nicht der Windows Phone Browser. Zwar verfügt Windows Phone natürlich über Touch-Funktionalität, aber nicht auf der Basis von Web Standards im eigenen Gerätebrowser.

Das Plugin steht auf GitHUb zum kostenlosen Download unter der MIT- und der BSD-Lizenz bereit. Komprimieren muss man sich das ansonsten 150kb schwere Stück Script noch selbst.

Links zum Beitrag:

Kategorien
JavaScript & jQuery Programmierung

Moderne Zeitmaschinen: Tools für die Erstellung von Chroniken

In der heutigen Welt kommt man ohne Statistiken, Geschichte und Graphiken nicht aus. Nicht erst seit Facebooks Timeline sind dabei vor allem Chroniken sehr beliebt. Oft wird eine graphische Präsentation diverser Zahlen und Daten benötigt. Auch im Privaten sammelt man gerne Erinnerungen, seien es Fotos, Texte oder Lieder. Dabei ist es sehr nützlich, wenn man diese chronologisch anordnen kann, damit nicht alles wild durcheinander ist! Im heutigen Post stelle ich ein paar Ressourcen vor, die tolle Möglichkeiten anbieten, das Chaos zu verhindern.

(Bildquelle: rosmary auf Flickr | CC-BY-SA)

Chronoline.js

Chronoline.js ist eine Bibliothek, welche es erlaubt, eine Chronik verschiedener Daten, Zahlen, Ereignisse uvm. zu erstellen. Die Bibliothek kann man als zip,- oder tar.gz-Datei downloaden, sie wird jeweils ab IE8, Firefox 12 und Chrome 18 unterstützt. Chronoline.js. wurde von Kevin Leung für Zanbato, eine Technologie-Plattform entwickelt und von Deny Khoung gestaltet. Die Bibliothek steht unter der MIT-Lizenz. Weiter unten sehen Sie drei Beispiele der Verwendung von Chronoline.js:

Monatliche Chronik


chronoline.js: monatliche Chronik

Quartalschronik


chronoline.js: Chronik eines Quartals

Chronik eines Jahres


chronoline.js: Chronik eines Jahres

Timeline.js

Timeline.js ist genau wie Chronoline.js eine JavaScript-Bibliothek, mit deren Hilfe man ebenfalls eine Chronik diverser Daten erstellen kann. Timeline.js ist auch als WordPress-Plugin erhältlich. Man kann das Programm kostenlos als eine zip-Datei downloaden und sowohl weitergeben als auch modifizieren. Es steht unter der GNU-Lizenz. Timeline.js wurde von VéritéCo kreiert. Im Weiteren zeige ich Ihnen ein paar schöne Beispiele der Anwendung von Timeline.js.

Chronik von Ghana


Timeline.js: die Chronik Ghanas

Geschichte der Hüte


Timeline.js: die Hutgeschichte

Geschichte des Kohlekraftwerkes in Chicago


Timeline.js: Geschichte des Kohlenkraftwerkes in Chicago

Timetoast

Weiter geht es mit Timetoast, einem attraktiven Online-Tool, welches der Erstellung von Zeitlinien dient. Hier muss man sich registrieren, was allerdings sehr schnell geht. Nach dem Aktivieren des Accounts kann es nun mit der Erstellung von Zeitlinien los gehen. Meiner Meinung nach ist Timetoast für Geschichtsinteressierte sehr zu empfehlen. Sie können hier beispielsweise für ihre Präsentationen recht gut aussehende Chroniken konstruieren.


Timetoast: ein Beispiel

Memolane

Memolane ist ein Service, der die Möglichkeit anbietet, die Ereignisse aus verschiedenen Social Media-Accounts in einer Chronik darzustellen. Dazu ist es möglich, mit mehreren Freunden (welche natürlich auf Memolane dazu eingeladen werden) sogenannte „Stories“ aufzubauen. Alle fügen ihre Fotos, Beiträge, Musik usw. ein und so entsteht eine Art interaktives Tagebuch. Nett!


Memolane: ein Ausschnitt

(dpe)

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Handsontable: Einfache Tabellenbearbeitung mit jQuery und HTML

Recht häufig benötigt man innerhalb einer Website eine Tabelle zur Visualisierung von Werten. Schön wäre es zuweilen, wenn diese nicht bloß statisch wäre, sondern dynamisch um Inhalte ergänzt, respektive geändert werden könnte. Das jQuery-Plugin Handsontable des Entwicklers Marcin Warpechowski bietet genau das auf sehr einfache Art und Weise an.

Handsontable: Schnell mal eine Tabelle bauen

Handsontable trägt die Einfachheit der Lösung schon im Namen. Warpechowski möchte eine schnelle und unkomplizierte, gleichzeitig aber ebenso unkomplexe Möglichkeit zur Implementation von Tabellen in Websites bieten. Dabei soll deren Verhalten und Aussehen optisch an Excel erinnern, sowie dessen Verhaltensweisen nachempfinden. In der Tat habe ich bislang noch keine einfachere Lösung als Handsontable gesehen. Komplexere, umfangreichere gibt es, aber keine einfachere.


Handsontable mit Kontextmenü

Handsontable steht unter der MIT-Lizenz zur kostenfreien Nutzung auf GitHub zum Download zur Verfügung. Es setzt jQuery voraus und bringt sowohl dieses, als auch alle anderen abhängigen Scripte im eigenen Download-Zip gleich mit. Die Implementation ist schnell erledigt. In der Basiskonfiguration bestückt man den Head-Bereich mit folgenden Skripten:



Will man erweiterte Funktionalität, nämlich das Autocompletefeature oder ein Kontextmenü nutzen, müssen folgende weitere Skripte geladen werden:




Ist das erledigt, lässt man Handsontable auf einen leeren Div-Container los:

Will man die Tabelle mit Inhalten vorbelegen, sieht der Aufruf beispielsweise so aus:

Eine sich dynamisch erweiternde Tabelle würde mit folgendem Code definiert:

Handsontable: Auch komplexere Funktionalitäten sind umsetzbar

Wem die einfachen Varianten nicht reichen, der kann unter Verwendung der mannigfaltigen Funktionalitäten des Plugins Zeilen oder Spalten als Legende auszeichnen, ein Autocomplete-Feature mit vorpopulierter Auswahlliste einbauen, lange Tabellen scrollbar machen, ein Kontextmenü mit der Möglichkeit der Tabellenmanipulation anbieten oder Werte per Drag von einer Zelle in beliebig viele weitere schreiben lassen. Auch die Implementation von Schaltflächen, Formatierungen nach bestimmten Wertebedingungen oder das Vorbelegen ganzer Tabellen mit Werten anhand von Templates beherrscht Handsontable.

Warpechowski unterhält eine Demo-Seite, die live und mit Code die jeweiligen Möglichkeiten zeigt. Die Dokumentation der einzelnen Funktionen ist vollständig und verständlich, sodass der Einstieg in Handsontable Developern mit Affinität zu jQuery überhaupt keine Probleme bereiten sollte.

Fazit: Handsontable dürfte für die meisten Anforderungen an Tabellen in handelsüblichen Websites ausreichend sein. Wer mehr braucht, greift zu größeren, aber auch schwieriger zu handhabenden Lösungen.

Kategorien
JavaScript & jQuery Programmierung

jQuery: Erste Beta der Version 1.8 bringt zahlreiche Änderungen

Gestern wurde im offiziellen jQuery-Blog die öffentliche Verfügbarkeit der ersten Beta der neuen Version 1.8 bekanntgegeben. Entwickler sind aufgefordert, ihre Anwendungen unter Einbindung der 1.8er Beta zu testen und etwaige Bugs zentral zu melden. Gleichzeitig vermeldet das Team, dass mittlerweile die Hälfte aller großen Websites von der beliebten Javascript-Bibliothek angetrieben wird. Die kommende Version bringt zahlreiche Veränderungen, die nicht nur im Hinzufügen von Funktionalität, sondern insbesondere in deren Entfernen bestehen. Was auf den ersten Blick paradox klingt, ist Teil der natürlichen Evolution des inzwischen sechs alten Projekts. Wir stellen die wichtigsten Änderungen kurz zusammen.


In drei Tagen startet die jQuery-Konferenz in San Francisco…

Modularität

Mit Version 1.8 wird jQuery modular. Unter Verwendung des Kommandozeilentools grunt kann sich jeder eine angepasste jQuery-Version erstellen, die lediglich die von der eigenen Website benötigten Module enthält. Ausgeschlossen werden können derzeit die Module ajax, css, dimensions, effects und offset. Durch das Ausschließen aller optionalen Module wird die einzubindende Bibliothek etwa um ein Drittel kleiner und bringt nurmehr 21kb auf die Waage. Der Unterschied erscheint in absoluten Zahlen nicht besonders hoch, kann jedoch auf mobilen Plattformen spürbare Auswirkungen zeitigen.

Vorsicht ist dann geboten, wenn man auf Dritt-Plugins setzt, da diese mit Abhängigkeiten zu Modulen arbeiten könnten, die man zuvor ausgeschlossen hat. Das Entwicklerteam geht daher selber davon aus, dass die unveränderte Version auch in Zukunft die meistverwendete bleiben wird. Mit rund 37kb komprimiert stellt die Bibliothek ohnehin nicht eben ein Schwergewicht dar.

Automatisches Vendor-Prefixing

jQuery 1.8 bringt automatisches Vendor-Prefixing für über Function Calls gesetzte Properties. Das betrifft natürlich nur über das Modul CSS gesetzte Styles. Wer seine Website mit CSS außerhalb von jQuery ausstattet, was nach meiner Einschätzung die Regel sein dürfte, profitiert nicht von dieser Änderung.

Bereinigtes Animations-Modul

Das jQuery-Modul für browserbasierte Animationen und Effekte wurde um verschiedene, noch nicht sauber dokumentierte Funktionen erweitert. Vor allem aber wurde seine Codebasis bereinigt und entchaotisiert. Es lohnt sich, besonders dieses Modul zu testen, da davon auszugehen ist, dass derzeit noch nicht alle existierenden jQuery-Animationen mit der neuen Version ordentlich arbeiten werden.

Wer es sich leisten kann, Animationen ausschließlich mit CSS3 zu erstellen, könnte zukünftig komplett auf das jQuery-Modul CSS verzichten und es aus dem Core entfernen.

Weitere Änderungen

Alle Änderungen an jQuery 1.8 zu erläutern, würde in einen Beitrag münden, den keiner mehr lesen kann. Von daher seien besonders tiefgehend Interessierte hierzu auf das Change-Log verwiesen.

Allen anderen mag es reichen, zu erfahren, dass die kommende Version hinsichtlich ihrer Sicherheit, besonders bezogen auf Cross-Site-Scripting-Angriffe, verbessert wurde und dass es in vielen Bereichen, etwa bei der Selector Engine zu deutlichen Performancesteigerungen kommen soll.

Ebenso geht das Team den Schritt, unnötige oder nicht empfehlenswerte Features aus dem Core zu entfernen. Diese Features werden komplett in ein sog. Kompatibilitäts-Plugin ausgelagert, damit ältere Anwendungen dieses bei Bedarf einbinden können. Dieses Plugin befindet sich derzeit in Entwicklung und steht auf GitHub zur Verfügung.

Die erste Beta kann über das jQuery Content-Delivery-Network bezogen werden. Für die jQuery-Konferenz vom 28. und 29. Juni 2012 werden weitere erfreuliche Neuigkeiten angekündigt. Da werden wir uns aber noch ein paar Tage in Geduld üben müssen…

Kategorien
E-Business JavaScript & jQuery Programmierung Social Media

Socialite.js: Flexible Social Media-Integration jetzt in neuer Version 2.0

Socialite.js ist ein etabliertes kleines Javascript-Tool für die flexible Einbindung verschiedener Social Media-Dienste. Das Interessante an Socialite.js ist zweierlei. Zum einen wird die Einbindung der Buttons durch beliebige Events gesteuert. So ist man nicht darauf angewiesen, den Besucher auf den Seitenaufbau warten zu lassen, bloß weil die Social-Knöppe noch nicht geladen sind. Zum anderen kann auf die manuelle Einbindung der nativen Buttons der verschiedenen Dienste verzichtet werden. Socialite.js verhält sich exakt wie die Originale. Vor gut zwei Wochen brachte Entwickler David Bushell die Version 2.0 seines Tools hervor.


Jeder kennt jeden um fünf Ecken (Bildquelle: Gerd Altmann / pixelio.de)

Socialite.js: Jetzt mehrsprachig und mit Hook-Funktionalität

In Version 2.0 unterstützt Socialite.js Mehrsprachigkeit, kann mithin einfacher lokalisiert werden. Zudem führt Bushell Event-Hooks in das Tool ein. So können die Social Buttons geladen werden, wann der Seitenbetreiber das will. In Frage käme am Beispiel einer Magazinseite etwa das Laden beim Öffnen eines Beitrags oder beim Überfahren eines Beitrags mit der Maus oder sogar erst nach einem ausdrücklichen Klick. Hier sind der Fantasie nur insofern Grenzen gesetzt als es lediglich eine begrenzte Anzahl denkbarer Events gibt.

Socialite.js implementiert übrigens die einzelnen Dienste streng nach deren Vorgaben. Es ersetzt also die ansonsten händisch zu erledigende Einbindung durch eine automatisierte, bleibt dabei aber nah an den Diensten. So ist es klar, dass sich die Integration mittels Socialite.js funktional nicht von einer nativen Einbindung unterscheidet. Im Grunde ist Socialite ein Scriptloader und als solcher leicht um weitere, bislang nicht unterstützte Dienste zu erweitern. Hierzu unterscheidet Socialite in Widgets, als da wären Facebook, Twitter, Google+ und LinkedIn, und Extensions, derzeit Pinterest, Spotify, Hacker News und GitHub.


Gut, dieser Screenshot ist unspektakulär, zeigt aber genau, was Socialite tut…

WordPress-Nutzer kennen Socialite möglicherweise bereits unter dem Namen WPSocialite. Dieses Plugin, entwickelt nicht von David Bushell, sondern von Tom Morton, integriert Socialite.js als WordPress-Plugin. Derzeit ist WPSocialite noch nicht auf die neue Version 2 angepasst. Spontanes Installieren ist aufgrund der gravierenden Änderungen aktuell nicht angezeigt. Tom Morton arbeitet aber bereits an der Anpassung.

Socialite.js steht auf GitHub unter der MIT-Lizenz zur kostenlosen Verwendung bereit. Demos kann man sich auf dieser Seite anschauen. WPSocialite findet man zu den gleichen Bedingungen im WordPress Plugin-Repository und in der Arbeitsversion auf GitHub.

Kategorien
JavaScript & jQuery Programmierung

jQuery: Bacon bringt Texte in Form

Ein großer Unterschied zwischen Web- und Printdesign ist die im Webdesign fehlende Möglichkeit, Texte entlang einer beliebigen Form auszurichten. Das jQuery-Plugin Bacon rüstet genau diese Möglichkeit auf verblüffend einfache Art und Weise nach. Bacon wird entwickelt von David Hudson, der Dr. Web Lesern schon durch das Plugin Typebutter bekannt sein sollte. Auch Typebutter beschäftigt sich mit dem Styling von Texten, allerdings rein bezogen auf das Kerning. Hudson scheint sehr nahrungsaffin zu sein. Eine logische Erklärung für die Benennung der Plugins als Bacon und Typebutter lässt sich jedenfalls ohne weiteres nicht finden…


Bacon

Bacon einbinden

Hudson stellt Bacon auf GitHUb zum kostenlosen Download bereit. Das Plugin kann privat wie kommerziell genutzt werden, solange der Copyright-Vermerk Hudsons nicht entfernt wird. Im komprimierten Zustand bringt Bacon schlanke 7,5k auf die Waage, was jedenfalls dann kein Problem darstellt, wenn man ohnehin jQuery auf seiner Website nutzt. Denn neben dem Bacon-Plugin und einem dazu gehörenden Stylesheet muss natürlich jQuery auf der Website eingebunden werden:

<link rel="stylesheet" type="text/css" href="bacon.jquery.css" media="screen" />
<script type="Text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="Text/javascript" src="bacon.jquery.js"></script>

Sind alle Voraussetzungen erfüllt, kann eine Linie oder Bézierkurve definiert werden, an der sich ein Textblock links oder rechts ausrichten soll. Ich zeige anhand zweier Beispiele, wie das funktioniert.

Textblock verjüngen lassen


Sich nach unten verjüngender Text

Um einen Text in Form zu bringen, wird dem Text mittels jQuery-Selektor das Bacon-Plugin zugeordnet. Über verschiedene Werte lassen sich Typ und Maße der Form bestimmen. Eine einfache Linie, die einen Textblock auf einer Seite nach unten verjüngt, wird mit drei Parametern definiert:

$(document).ready(function() {
  $("#beispiel").bacon({
    "type": "line",
    "step": 50,
    "align": "right"
  });
});

Über „type“ wird die Art der Form gewählt. Der Wert „step“ gibt an, in wie vielen Stufen der Text entlang einer Linie verlaufen soll. Je höher der Wert ist, desto steiler spitzt sich der Textblock nach unten hin zu. Über „align“ wird angegeben, auf welcher Seite des Textblockes die lineare Verjüngung stattfinden soll.

Textblock an Bézierkurve ausrichten lassen


Ausrichtung eines Textes an einer Bézierkurve

Statt einer einfachen Linie kann auch eine Bézierkurve definiert werden. Dazu gibt man vier Punkte an, die den Verlauf der Kurve vorgeben:

$(document).ready(function() {
  $("#beispiel").bacon({
    "type": "bezier",
    "c1": { x: 10, y: 0 },
    "c2": { x: -100, y: 200 },
    "c3": { x: -100, y: 400 },
    "c4": { x: 10, y: 400 },
    "align": "left"
   });
});

Für jeden der vier Punkte („c1“ bis „c4“) muss je eine X- und eine Y-Koordinate angegeben werden. Auch hier definiert man über „align“ wieder die Ausrichtung („left“ oder „right“).

Statt einen Textblock nur an einer Seite mit einer Bézierkurve zu versehen, lässt sich auch für die linke und rechte Seite jeweils eine Kurve festlegen, sodass der Textblock an beiden Seiten entlang einer Kurve ausgerichtet wird:

$(document).ready(function() {
  $("#beispiel").bacon({
    "type": "dualbezier",
    "c1": {x: 10, y: 0},
    "c2": {x: -100, y: 200},
    "c3": {x: -100, y: 400},
    "c4": {x: 10, y: 400},
    "d1": {x: 10, y: 0},
    "d2": {x: -100, y: 200},
    "d3": {x: -100, y: 400},
    "d4": {x: 10, y: 400}
  });
});

Die zweite Bézirkurve wird mit den Punkten „d1“ bis „d4“ festgelegt. Die Angabe „align“ erübrigt sich hier.

Damit Bacon auf einen Textblock angewendet werden kann, müssen den entsprechenden Elementen feste Breiten und Höhen zugewiesen werden. Andernfalls wird der Textblock gar nicht sichtbar. Passt der Text nicht in die vorgegebene Größe des Blocks, wird er abgeschnitten. Man sollte also die Größe des Blockes so wählen, dass der Text auf jeden Fall passt.

Es lassen sich sowohl einzelne Absätze (P-Element) mit einer Bacon-Form versehen, als auch Div-Container, in denen sich dann mehrere Absätze befinden können. Wendet man Bacon jedoch auf einen Container an, verdoppelt sich der Zeilenabstand, da das Plugin vor jeden Absatz einen weiteren leeren Absatz setzt.

Technisch wird die Darstellung der Form übrigens sehr einfach realisiert. Es werden schlicht so viele Leerzeichen vor oder hinter eine Zeile platziert, wie nötig sind, um den Text in der gewünschten Form anzeigen zu können.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

AngularJS erweitert HTML um Anwendungslogik und Web Components

Vor zwei Tagen stellte ich das Mozilla-Projekt X-Tag an dieser Stelle vor. Mit X-Tag ist es möglich, auf der Basis von Javascript eigene HTML-Elemente zu entwerfen und zu verwenden, als würden sie im Standard so bereit gestellt. X-Tag basiert locker auf dem aktuellen Stand der Diskussion des W3C Arbeitspapiers zu Web Components, wobei es sich auf den Teilbereich Custom Elements beschränkt. Googles AngularJS schlägt in die gleiche Kerbe, ist dabei aber nicht nur auf Custom Elements beschränkt, sondern liefert einen anwendungslogischen Teil mit. Wir werfen einen Blick auf Googles Vorschlag.

AngularJS: Model Driven Views und Custom Elements

AngularJS ist ein komplexes Javascript-Framework, entworfen mit dem Ziel, HTML fitter für Web Apps zu machen. Mit AngularJS wird HTML dynamischer und kann in begrenztem Umfang direkt auf Benutzereingaben reagieren. Im Grunde liefert AngularJS keine wirklich alleinstellenden Leistungsmerkmale. So kann alles, was mit AngularJS möglich ist, auch auf andere Weise, etwa mittels jQuery, das AngularJS übrigens integriert, erreicht werden. Der Unterschied besteht nicht in der Leistungsfähigkeit, sondern in der Art und Weise der Umsetzung. Und die ist in der Tat anders…

Wie bei X-Tag ist es auch bei AngularJS sinnvoll, sich die Vorgehensweise anhand eines Codebeispiels zu verdeutlichen. Der folgende Code erzeugt ein Eingabefeld, in welches der Benutzer einen Namen schreiben soll. Schon während der Eingabe wird der Name ausgelesen und in dem H1-Element weiter unten dynamisch ausgegeben.



  
    
  
  
    

Hello {{yourName}}!


Texteingabefeld und Rückgabe der Werte anhand des zugegebenermaßen unlustigen Beispiels Chuck Norris…

Mehrere Dinge fallen neben der Einbindung des AngularJS im HTML-Quelltext auf. Der HTML-Tag wurde um die Bezeichnung ng-app erweitert. Das Input-Element wurde um ein ng-model mit der Eigenschaft yourName ergänzt und im H1-Tag findet sich ein Platzhalter gleichen Namens in zwei geschweiften Klammern.

Ng-app zeigt AngularJS an, in welchem Bereich der Seite es aktiv sein soll. Dasjenige HTML-Element, welches um ng-app erweitert wird, ist sozusagen der Root der Anwendung. Im oben gezeigten Beispiel soll AngularJS demnach auf der gesamten Seite aktiv, man könnte es aber auch auf andere Tags setzen und so den Wirkungsbereich einschränken.

Ng-model bezeichnet das Modell, dessen Daten später zu einem View führen sollen. Die Eigenschaft ist eine frei deklarierte Variable, die nur insofern hinsichtlich ihrer Namensgebung von Relevanz ist, als sie weiter unten in dem Bereich mit den geschweiften Klammern, dem eigentlichen View bzw. der Data Binding Location, wieder korrekt referenziert werden muss. Durch die automatisierte Anbindung des Modells an die Location findet die Übernahme der Daten im Zeitpunkt der Eingabe statt.

Trotz einer nicht ganz unbeachtlichen Funktionalität, die auf diese simple Art und Weise in das HTML-Dokument injiziert wurde, bleibt der Code kurz, lesbar und vor allem verständlich. Natürlich ändert sich das mit steigender Komplexität der Anwendung, dennoch bleibt die Lesbarkeit innerhalb der HTML-Datei weit besser als bei einer Implementation von reinem Javascript. Auf dieses Javascript kann natürlich auch bei AngularJS nicht verzichtet werden. Es wird vielmehr ausgelagert und in Form sogenannter Controller für einzelne Web App-Funktionalitäten auf herkömmliche Weise per Script-Tag wieder eingebunden. Für die Anbindung an Cloud-Datenbanken stehen Javascript-Module bereit, so etwa für Mongolab.com. Komplexere Bausteine für die mehrfache Wiederverwendung und das Sharing mit anderen Webworkern verpackt man in sogenannte Components.

Auch bei AngularJS ist, ebenso wie bei Mozillas X-Tag, ein schrittweiser “Rückbau” der Funktionen hin zum Standard, so er denn dereinst kommen sollte, vorgesehen. Bis dahin kann man mit Googles Framework vor allem bereits jetzt erreichen, was erst irgendwann standardisiert möglich sein wird.

Google stellt AngularJS unter der MIT-Lizenz zur kostenfreien Nutzung bereit. Der Download kann über die Website zum Produkt oder über GitHub erfolgen. Wer schnell einen Eindruck des Projekts erhalten will, schaut sich die Präsentation des Googlers Igor Minar unter dem Titel “Re-imagining the browser” anlässlich der Konferenz Fluent vor gut zwei Wochen an.

Kategorien
JavaScript & jQuery Programmierung

jQuery Knob: Canvasbasierter Drehknopf für virtuelle Thermostate

Schon gut. Natürlich ist das folgend vorgestellte jQuery-Plugin Knob nicht für virtuelle Thermostate erdacht worden. Vielmehr lässt sich mit dem flexibel konfigurierbaren Drehrädchen so ziemlich alles steuern, was man üblicherweise mit solchen Bedienelementen im Web steuert. Es eignet sich beispielsweise für die Lautstärkenregelung, die Erhöhung von Helligkeit und/oder Kontrast, das Spulen innerhalb von Medien, eben ganz generell die Einstellung beliebiger Werte in Web Apps.

jQuery Knob funktioniert sogar auf Touchscreens

Der jQuery Knob ist ein rein Javascript- und HTML5-basierter Drehregler, der sowohl auf Touchscreens, wie auch mit Mausrad und Tastatur verwendet werden kann. Hat der Benutzer Javascript deaktiviert, wird der Bereich, in dem eigentlich der Knob zu sehen sein sollte, als reines Input-Element des Typs Text angezeigt. Die Knobifizierung des Input-Elements erfolgt durch die Vergabe der Klasse „dial“. Den eigentlichen Canvas zeichnet sich das Plugin per Anwendungslogik zum gegebenen Zeitpunkt selbst. Auf Grafikdateien wird komplett verzichtet.

Mit HTML5 Data-Attributen fügt man dem Input-Element Optionen hinzu, die sich sowohl auf das Verhalten wie auch auf die Optik auswirken können. So konfiguriert man Mindest-, wie Höchstwerte, legt einen Endpunkt fest, schaltet die Steuerung aktiv oder inaktiv (für reine Infodisplays) und kümmert sich um das Layout des Reglers, der im Standard in einer an Tron angelehnten Optik daherkommt. Alternativ zur Verwendung von Data-Attributen kann die Konfiguration auch über entsprechende Werte innerhalb des eigentlichen Funktionsaufrufes erfolgen.

Knob mit Konfiguration über Data-Attribute…

$(".dial").knob({
                'min':-50
                ,'max':50
                })

… oder direkt im Function-Call.

Wenige Hooks erlauben eine Auswertung und Weiterverarbeitung der getroffenen Einstellungen. Dreht ein User am Knob und stellt einen Wert ein, so kann dieser Wert on release als Trigger weiterer Funktionen, etwa lauter oder leiser, heller oder dunkler, etc. genutzt werden. Ebenso möglich ist aber auch das kontinuierliche Triggern entsprechender Funktionen über den Hook „change“. Hier würde nicht erst beim Erreichen der Endposition eine Funktion ausgelöst, sondern während des gesamten Drehvorgangs, gut bei Lautstärkenanpassungen. Zu guter Letzt lässt sich eine Funktion an das Zeichnen des Canvas, also das Entstehen des Knob knüpfen.

Entwickler Anthony Terrien stellt das Plugin unter MIT-Lizenz auf GitHub bereit. Nach seinen Angaben läuft es in allen modernen Browsern, sowie dem IE ab Version 9. Eine Dokumentation im eigentlichen Sinne liefert Terrien nicht. Allerdings ist die Funktionsvielfalt doch recht überschaubar und so sollte der interessierte jQuery-Afficionado auch so ganz gut zurechtkommen. Immerhin ist der Code vernünftig kommentiert und sauber strukturiert.

Eine Demoseite gibt einen guten Überblick über die verschiedenen Konfigurationen und optischen Möglichkeiten.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

HTML5: SVG-Grafiken einbetten und mit CSS und JavaScript manipulieren

Dank HTML5 müssen SVG-Grafiken nicht mehr über eine eigenständige Datei in ein HTML-Dokument per EMBED- oder OBJECT-Element eingebunden werden. Vielmehr lassen sie sich direkt in das HTML-Dokument einbetten und können mit Stylesheets und JavaScript angepasst und verändert werden.

Das SVG-Element

Grundlage zum Einbetten von SVG-Grafiken ist das SVG-Element. Es ermöglicht die Auszeichnung von SVG-Grafiken direkt im HTML-Dokument:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
  <ellipse cx="200" cy="100" rx="190" ry="90" style="fill: red; stroke: green; stroke-width: 2" />
</svg>

Neben der Angabe des Namensraumes („xmlns“) und der Version wird die Größe der SVG-Grafik angeben. Anschließend können innerhalb des SVG-Elementes beliebige SVG-Formen platziert werden.

Im Beispiel wird eine rote Ellipse mit grünem Rand gezeichnet. Die Attribute „cx“ und „cy“ geben die Position der Ellipse an, „rx“ und „ry“ den Radius. Das Aussehen der Ellipse wird – wie bei anderen HTML-Elementen auch – über ein Style-Attribut definiert. Allerdings unterscheiden sich die verwendeten Eigenschaften von denen, die man von HTML-Elementen kennt.

Neben verschiedenen Elemente zum Erstellen von Flächen, Linien und Texten gibt es auch einige Filter, mit denen sich beispielsweise Schlagschatten erstellen lassen:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
  <filter id="schatten" x="-10%" y="-10%" width="150%" height="150%">
       <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
  <ellipse cx="200" cy="100" rx="150" ry="50" style="fill: red; stroke: green; stroke-width: 2" filter="url(#schatten)" />
</svg>

Dem Filter werden Position und Größe sowie eine ID übergeben. Anschließend können Abstand des Schattens („feOffset“), Weichzeichnung („feGausianBlur“) sowie Überblendung („feBlend“) definiert werden. Der Filter kann mittels seiner ID einem Element zugewiesen werden.

SVG-Formen und Stylesheets

Da das Aussehen der gezeichneteten SVG-Formen per Stylesheets definiert wird, kann dies auch über die CSS-Angaben des HTML-Dokumentes passieren:

<style type="text/css">
  ellipse {
    fill: red;
    stroke: green;
    stroke-width: 2
  }
</style>

Auf diese Wiese lassen sich Styles für mehrere eingebettete SVG-Grafiken an einer zentralen Stelle festlegen. Wie bei HTML-Elementen können auch die SVG-Stylesheet-Angaben für Klassen und IDs definiert werden.  Diese würden dann den SVG-Formen zugewiesen werden.

SVG-Formen und JavaScript

Auch per JavaScript ist die Änderung und Anpassung der SVG-Formen möglich. So lassen sich sowohl die Styles als auch andere Attribute der Form-Elemente per JavaScript anpassen:

document.getElementsByTagname("ellipse")[0].setAttribute("cx", 50);
document.getElementsByTagname("ellipse")[0].setAttribute("cy", 75);

So würde neben dem Aussehen auch Position und Größe der einzelnen SVG-Formen mit JavaScript verändert.

Per JavaScript lassen sich auch Dateien in ein SVG-Element importieren. Mit „createElementNS()“ können neue Elemente mit Angabe eines Namensraumes erstellt werden. Analog dazu fügt „setAttributeNS()“ dem Element Attribute mit Namensraum hinzu:

var bild = document.createElementNS("http://www.w3.org/2000/svg", "image");  
bild.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "bild.png");  
bild.setAttribute("x", 0);  
bild.setAttribute("y", 0);  
bild.setAttribute("width", 100);  
bild.setAttribute("height", 100);  
document.getElementsByTagName("svg")[0].appendChild(bild);

Im Beispiel wird ein neues Element erzeugt, welches die Bilddatei „bild.png“ innerhalb der SVG-Grafik anzeigt.

Fazit: Mit Inline-SVGs können SVG-Grafiken nicht nur in ein HTML-Dokument eingebettet, sondern unter Verwendung von Stylesheets und JavaScript auch beliebig angepasst und manipuliert werden.

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Externe Links mit Favicon versehen mit Google und jQuery

Von Google+ kennt man es: Jedem veröffentlichten Link wird das Favicon der verlinkten Website vorangestellt. Mit jQuery und Googles Favicon-Service lässt sich diese Art der Linkdarstellung schnell und einfach für die eigene Website nachbauen.

Google-Service: Favicon extrahieren

Um Favicons innerhalb des HTML-Dokumentes nutzen zu können, müssen diese zunächst aus der Website extrahiert werden. Da man nicht davon ausgehen kann, dass Favicons immer unter „/favicon.ico“ zu finden sind, muss die richtige Datei entweder im Quelltext manuell gesucht werden oder man setzt auf einen Dienst, der das übernimmt.


Links mit vorangestellten Favicons

Mit Googles Favicon-Service werden Favicons extrahiert und ins PNG-Format umgewandelt. Dem Service wird lediglich die URL der Website mitgeteilt, von der man das Favicon abholen möchte. Anschließend wird das Favicon als PNG-Datei herausgegeben:

http://www.google.com/s2/u/0/favicons?domain=drweb.de

jQuery: Favicon jedem externen Link voranstellen

Mit ein paar wenigen Zeilen JavaScript lassen sich nun die so zu erhaltenden Favicons bei externen Links per jQuery automatisch voranstellen :

$("a[href^='http']").each(function() {
  $(this).css({
    "background": "url(http://www.google.com/s2/u/0/favicons?domain=" + this.hostname + ") left center no-repeat",
    "padding-left": "20px"
  });
});

[Code von CSS-Tricks/Chris Coyier]

Über den Ausdruck „a[href^=’http‘]“ werden nur A-Elemente berücksichtigt, deren Attribut „href“ mit der Zeichenfolge „http“ beginnt. Damit spricht man alle externen Links an.

Anschließend weist das JavaScript diesen Elementen zwei CSS-Eigenschaften zu. Das Favicon wird im A-Element als Hintergrundgrafik angezeigt. Zusätzlich wird ein Abstand definiert, damit der Text nicht bereits mit der Hintergrundgrafik beginnt, sondern erst danach.

Ist für eine Website kein Favicon definiert, wird standardmäßig eine Weltkugel als Grafik dargestellt – wie es auch bei Google+ der Fall ist.

Alternative zu Googles Favicon-Service

Alternativ zu Googles Favicon-Service kann auch der Dienst getFavicon genutzt werden. Er funktioniert ähnlich wie Googles Service. Allerdings extrahiert getFavicon das Favicon nicht nur auf der Basis einer Domain, sondern einer ganzen URL:

http://g.etfv.co/http://www.drweb.de/

Zwar gibt es bei den meisten Websites ein Favicon für alle Seiten. Allerdings kommt es auch vor, dass eine Website unterschiedliche Favicons für unterschiedliche Seiten bereitstellt. Bei getFavicon wird sichergestellt, dass immer das richtige Favicon ausgewählt wird.

Auch hierbei wird für den Fall, dass kein Favicon gefunden wird, eine Weltkugel als Ersatz dargestellt.

(dpe)

Kategorien
Design JavaScript & jQuery Programmierung Responsive Design

jQuery Picture steuert Bilder in responsiven Designs zuverlässig

Responsives Design stand nicht von Beginn an auf der Agenda zur Erweiterung des HTML-Standards hin zur Version 5. Und so schlägt man sich auch heute noch mit manchen Fragestellungen eher schlecht als recht herum. Das Thema “Bilder in responsiven Layouts” gehört dazu. An sich sind Bilder über das neue Figure-Tag einzubinden, doch gibt es auch den Vorschlag, stattdessen ein neues, eigenes Picture-Tag mit untergeordneten Source-Tags einzuführen. Das Plugin jQuery Picture kann mit beiden Varianten umgehen und Bilder in responsiven Layouts zuverlässig steuern.

Picture-Tag: Eine Lösung speziell für Bilder

Das Picture-Tag ergibt in responsiven Layouts den meisten Sinn. Innerhalb eines Picture-Containers platziert man mehrere Source-Tags mit den URLs der verschiedenen, zum gleichen Picture-Container gehörenden Bilder. Dem jeweiligen Source-Tag gibt man die zugehörige Media-Query direkt mit. So könnte das aussehen:


    
    
    
    

Sie erkennen die Funktionalität auf einen Blick. Der Picture-Container enthält drei Bilder, von denen das größte, large.png, ab einer Viewport-Breite von 600 Pixeln angezeigt werden soll. Darunter, ab einer Breite von 440 Pixeln, käme medium.png zur Anzeige und bei noch kleineren Auflösungen diente small.png als Foto der Wahl. In einem Noscript-Bereich erfolgt die Angabe eines Bildes für die Indexierung durch Suchmaschinen, sowie im Falle von jQuery Picture, zur Anzeige durch Besucherbrowser ohne Javascript.

Eine schöne Sache also. Der Haken ist nur: Dieser Vorschlag ist bislang nur ein Vorschlag. Kein großer Browser führt die Implementation zum jetzigen Zeitpunkt. Ohne das Plugin jQuery Picture ist die Lösung derzeit so nicht zu verwenden.

In der W3C Community Group zum Responsive Imaging liegt derweil bereits der nächste Vorschlag vor. Danach könnte man sich in Zukunft möglicherweise auf ein Pic-Element einigen, das im Prinzip genauso arbeitet wie das Picture-Element, aber schon als Tag und auch in der weiteren Syntax mit weniger Schreibarbeit auskommen würde. Jetzt allerdings erst einnmal zurück zu jQuery Picture.

Das Plugin jQuery Picture bringt schon jetzt die Unterstützung für das Picture-Element in Form einer einfach auf das entsprechende Element zeigenden Funktion mit.

jQuery Picture: Figure-Element mit Data-Attributen

Nicht nur das experimentelle Picture-Element wird durch jQuery Picture verstanden und korrekt umgesetzt, auch die Verwender der standardkonformen Figure-Tags können ihre Bilder mit Hilfe des Plugins zuverlässig responsiv auslegen. Dazu müssen erneut HTML5s neue Data-Attribute herhalten. Mit ihrer Hilfe wird das Figure-Tag um weitere Bild-URLs erweitert. Das geht ganz einfach:

Sie sehen, dass die Bild-URLs in Attributen, die mit data-media beginnen, verpackt werden. Die erste Anweisung ohne zusätzlichen Zahlenwert repräsentiert das Bild, das später in der kleinsten Auflösung angezeigt werden wird. Die in data-media440 verpackte URL kommt zum Tragen, wenn der Viewport mindestens 440 Pixel breit ist und so weiter. Naheliegenderweise sollten die Pixelwerte mit den ansonsten definierten Breakpoints korrelieren. Anschließend wird das Plugin wie folgt initialisiert:

$(function(){
    $('figure.responsive').picture();
});

Nach Tests des Entwicklers Abban Dunne funktioniert die Lösung ab IE 7 und in allen modernen Browsern ohnehin. jQuery Picture steht zur kostenlosen Verwendung auf GitHub zum Download bereit. Dunne würde sich übrigens freuen, wenn sein Plugin eher früher als später überflüssig würde. Zu diesem Zeitpunkt wird es zumindest im IE immer noch sinnvoll einsetzbar sein…

(do)

Kategorien
JavaScript & jQuery Programmierung

jQuery++ schließt Lücken im jQuery-Funktionsset

Bitovi lautet der Name einer Entwicklerfirma, die sich voll auf JavaScript spezialisiert und fokussiert hat. Wem der Name bekannt vorkommt, wird möglicherweise an das JavaScript-Framework CanJS denken. CanJS soll die schnelle Entwicklung von Rich Web Applications erleichtern und existiert als Aufsatz zu jQuery, MooTools, Dojo, Zepto und YUI. Jetzt schießt Bitovi sein nächstes Projekt in die freie Wildbahn. Es handelt sich um jQuery++, nach eigenen Angaben das Toupet für die Glatze jQuerys.

jQuery++: Nur nehmen, was man auch braucht

Bitovis jQuery++ ist im Grunde keine große Sache, schon gar nicht sollte man es mit Projekten wie jQuery UI oder jQuery Tools vergleichen. Ein und ein halbes Dutzend Funktionen, die jQuery nicht oder nicht in dieser Form mitbringt, ergänzt die kleine Sammlung. Da die Einzelkomponenten unterschiedliche Must-Have-Grade aufweisen, kann man sich ein JavaScript-File auf der Produktseite zusammen klicken, welches nur die persönlich benötigten Komponenten enthält. So spart man Gewicht, das sich ansonsten später im Besucherbrowser wieder negativ bemerkbar machen würde.

Aus meiner Sicht die interessantesten Funktionen bieten jQuery.animate und jQuery.cookie. jQuery.animate ersetzt die jQuery-Animationsfunktionalität durch eine rein CSS3-basierte, wenn der jeweilige Besucherbrowser das unterstützt. Hierzu überschreibt es die jQuery-Funktion, akzeptiert aber die gleichen Argumente, wodurch eine nahtlose Übernahme der Funktionalität gewährleistet wird.

jQuery.cookie ist ein Repackaging des bereits seit längerem am Markt befindlichen Plugins jQuery-Cookie von Klaus Hartl. Hartls Plugin vereinfacht das Lesen, Schreiben und die sonstige Verwaltung von Cookies im Besucherbrowser. Durch die Implementation in das jQuery++-File spart man sich zumindest den ansonsten erforderlichen zusätzlichen Request.

Weitere Helferlein bringen jQuery Drag and Drop bei, ohne jQuery UI dafür zu erfordern. Auf mobilen Geräten lassen sich Swipe-Events überwachen. Eventorientierte Javascript-Anwendungen können mit jQuery++ unterbrochen und an der gleichen Stelle fortgesetzt werden. Es dürfte niemanden verwundern, dass jQuery++ gut in CanJS zu integrieren ist. Aber auch andere Partner, etwa StealJS oder Backbone werden akzeptiert.


Ist das persönliche Wunschset zusammen geklickt, erstellt Bitovi daraus eine jquerypp.custom.js. Wer partout auf viele Requests setzen möchte, kann sich auch JS-Dateien für jede einzelne Funktion runterladen und einbinden. Empfehlen wird das ernsthaft aber keiner. Ansonsten geschieht die Implementation wie von Plugins gewohnt. Zunächst erfolgt der Aufruf von jQuery, dann derjenige des Funktionssets aus jQuery++. Die kleine Sammlung ist ausgesprochen gut und verständlich dokumentiert, sowie in Teilen mit Beispielen versehen.

jQuery++ steht unter MIT-Lizenz zur kostenfreien Nutzung zur Verfügung.

Kategorien
Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung

JavaScript- und Ajax-Schnipsel in Adobe Dreamweaver: Verhalten, Spry und Widgets

Dreamweaver bietet einige Optionen an, Bereiche „interaktiv“ zu gestalten. Der einfachste Weg führt über etwas JavaScript. „Verhalten“ nennt Dreamweaver seine Sammlung von Script-Schnipseln, die sofort eingesetzt werden können. Ergänzend kommen das Spry-Framework oder die Widgets zum Einsatz.

Verhalten

Dreamweaver bietet zahlreiche Verhalten genannte Skripte an, wie etwa Bilder vorausladen, Formular überprüfen oder Eigenschaft ändern. Falls in der Sammlung von Skripten unter Verhalten noch nicht das gewünschte enthalten ist, so empfehle ich einen Klick auf „Weitere Verhalten“, zu finden im Tag-Inspektor unter dem Reiter Verhalten oder auch über Hilfe > Dreamweaver Exchange. In diesem Online-Service von Adobe kann man für Dreamweaver geordnet in zahlreichen Kategorien dutzende Verhalten entdecken. Auch eine Suchfunktion unterstützt dabei.

Nach dem Download wird das Skript im Adobe Extension Manager geöffnet und installiert. Innerhalb von Dreamweaver zeigt sich die Erweiterung nach einem Neustart im Menü unter Einfügen.

Als ein einfaches Beispiel möchte ich eine kleine Galerie erstellen die dem Anwender erlaubt, verschiedene Aufnahmen vergrößert zu betrachten. Nachdem der Grundaufbau steht und nur noch die Funktion zum Bildertausch fehlt, erhält jedes Foto zunächst eine ID über die Eigenschaften. Diese IDs sind unverzichtbar, damit das JavaScript die einzelnen Bereiche erkennen und verändern kann.

Das erste Bild wird angeklickt und im Tag-Inspektor unter Verhalten und dem Plus-Symbol Bild austauschen ausgewählt. Entdeckt man den Tag-Inspektor nicht auf den ersten Blick, so ruft man ihn einfach über Fenster > Tag-Inspektor auf.

Im Dialog gibt man unter Bilder an, welches ausgetauscht werden soll (natürlich das große bei einem Klick auf das kleine Foto). Und auch der Pfad zum neuen Foto wird dort ausgewählt, man lässt „Bilder vorausladen“ stehen und nimmt das Häkchen bei „Bilder bei onMouseOut wiederherstellen“ weg, damit die Aufnahme nach dem Klick auch stehen bleibt.

Unter Verhalten wird nun das neue JavaScript gelistet, wobei wir noch eine kleine Anpassung vornehmen müssen. Statt „onMouseOver“ sollte dort „onClick“ stehen. Diese Zuweisung eines Verhaltens muss nun auch noch für die anderen Bilder vorgenommen werden.

Das würde schon reichen, um die Fotos auszutauschen. Soll zusätzlich noch eine passende Bildunterschrift angeboten werden, so benötigen auch die Textabschnitte jeweils eine ID. Je Foto, das man später anklicken soll, wird ein Verhalten hinzugefügt. Nun wird allerdings Elemente anzeigen/ausblenden benötigt. Dreamweaver möchte dann noch wissen, welches Element denn eingeblendet und welches ausgeblendet werden soll, was man nach seiner Wahl mit OK bestätigt.

Liegen die Bildunterschriften nicht übereinander, so wählt man sie jeweils aus, geht in den Reiter CSS-Stile und klickt dort auf den Button Neue CSS-Regel. Der Selektor wird ausgewählt und nach dem ersten OK unter Positionierung die Position „absolute“ angeklickt. Da beim Start der Seite zunächst die Bildunterschriften gleichzeitig angezeigt werden, ist eine Auswahl der DIVs nötig, in dem die Bildunterschriften liegen, und der Wechsel zum Reiter AP-Elemente in der Einfügen-Palette, wo die jeweilige Sichtbarkeit entsprechend gesetzt wird.

Spry

Bei Spry handelt es sich um das Ajax-Framework von Adobe. Sehr einfach zu handhaben sind dabei die Spry-Effekte in Dreamweaver. Generell werden die Spry-Funktionen in der Einfügen-Palette unter „Spry“ gelistet. Die Effekte allerdings sind im Tag-Inspektor über Verhalten und einem Klick auf das Plus-Symbol zu erreichen. Dort geht man auf „Effekte“ und bekommt ein halbes Dutzend Optionen geboten.

Um bei dem ersten Beispiel zu bleiben, könnte man das Bild der größeren Ansicht anklicken und danach auf Tag-Inspektor > Verhalten > Effekte > Einblenden/Ausblenden gehen. Das Zielelement ist natürlich die aktuelle Auswahl. Jetzt könnte man noch die Effektdauer, den Effekt sowie Prozentangaben zum Einblendeverhalten bestimmen. Im Tag-Inspektor muss noch „onClick“ auf „onLoad“ geändert werden. Der Wechsel zwischen den Aufnahmen wird nun ansprechend animiert.

Widgets

Um die Namensspielchen rund um JavaScript komplett zu machen, gibt es neben den Verhalten und den Spry-Optionen auch noch Widgets. Dafür bietet Dreamweaver CS5 einen eigenen Browser an, der auf Air-Basis umgesetzt wurde. Nach dem Start präsentiert der Widget Browser schon einige Beispiele, die man direkt installieren könnte.

Interessanter ist aber die gezielte Recherche über die Suchfunktion. Immer können Informationen zum Widget abgerufen und eine funktionsfähige Vorschau geladen werden. Auch der Quellcode lässt sich dabei überprüfen. Einige Widgets bringen Varianten mit, welche die Umsetzung nach eigenen Bedürfnissen doch sehr erleichtern. Auch eine grobe Konfiguration und das Abspeichern des eigenen Presets ist möglich.

Um ein Widget direkt in Dreamweaver zu öffnen, geht man in der Einfügen-Palette in den Bereich „Widget“ und kann dort aus einer Liste auf sämtliche Widgets zugreifen, die installiert wurden. Auch die Vorgaben, also die Presets des Widget, werden dort zur Wahl gestellt. Den zuvor beschriebenen Widget Browser kann man ebenso über dieses Fenster erreichen. Über OK wird das Widget dann hinzugefügt.

Dreamweaver bringt also allerhand Code-Schnipsel mit, die stark auf JavaScript fußen, jedoch ganz unterschiedliche Namen tragen. Jeder Bereich, ob Verhalten, Spry oder Widget, lässt sich dabei für sich erweitern. Generell bilden diese Angebote eine gute Zeitersparnis für den Anwender der Software.

(mm),