LautundKlar

Screenshots nur mit JavaScript generieren: html2canvas

html2canvas ist ein eindrucksvolles Skript, das Screenshots von Webseiten (oder Teile davon) erzeugen kann und das clientseitig, nur mit Hilfe von JavaScript.

html2canvas

Wie  jeder Browser rendert das Script Seiten unterschiedlich und das Ergebnis ist manchmal nicht ganz perfekt. Die Bibliothek ist noch experimentell, da es noch verschiedene CSS3 Eigenschaften gibt, die nicht unterstützt werden. Allerdings funktioniert es dennoch recht gut, wovon man sich auf der Demoseite überzeugen kann.

Voraussetzungen: jQuery
Website: http://html2canvas.hertzen.com/
Demo: http://html2canvas.hertzen.com/screenshots.html

Popularity: 1% [?]

Beim Durchstöbern einer Webseite fallen oft schöne Schriftarten auf. Sehr oft möchte man wissen, um welche Fonts es sich dabei handelt. Um das herauszubekommen, ist meist eine Recherche im Quelltext + CSS-Datei (oder Firebug) notwendig.

WhatFont ist ein Bookmarklet, welches diesen Prozess um einiges vereinfacht. Einmal aktiviert, zeigt es die verwendete Schriftart beim einfachen überfahren mit dem Mauszeiger.

Wenn man auf den Text klickt, erhält man eine Infobox mit detaillierten Informationen zu der Font wie z. B. neben dem Fontnamen auch Zeilenhöhe und Schriftgröße. Da diese Infoboxen nicht ausgeblendet werden, lassen sich auch verschiedene Schriftarten miteinander vergleichen.

Außerdem erkennt WhatFont Schriften, die von Services wie Typekit oder Google Font API ausgehen und zeigt diese Informationen an.

Ein Muss für jeden Web-Designer.

Kompatibilität: Alle modernen Browser
Website: http://chengyinliu.com/whatfont.html
Download: https://github.com/willow/WhatFont-Bookmarklet

Popularity: 1% [?]

RandomText ist eine Webseite zum einfachen Erstellen von Blindtext bzw. Dummytext, entweder in Lorem ipsum oder verworrenem Kauderwelsch.

Es ist möglich, den Typ des Elements (Absatz, Liste oder Überschrift) sowie die Anzahl und Länge zu definieren.

Der Generator bietet Kurzbefehle um den HTML-Quelltext formatiert auszugeben bzw. für die vollständige Ausgabe als Text/HTML-Datei.

Für einen schnelleren Zugriff auf den Dienst kann ein bestimmtes URL-Format aufgerufen werden. Zum Beispiel randomtext.me/lorem/ul-10/5-10/ um eine ungeordnete Liste mit jeweils 5-10 Wörtern Lorem ipsum Text zu erzeugen.

Webseite: http://www.randomtext.me/

Popularity: 1% [?]

The Wall ist ein MooTools Plugin zur Erstellung eines Inhaltsbereichs, der vertikal sowie horizontal verschoben werden kann.

Das Plugin bietet eine hohe Flexibilität und kann auf jedes Element angewandt werden, egal ob es sich um ein <div> oder ein <image> Tag handelt.

Die Galerie, welche erzeugt wird, kann durch Ziehen in die gewünschten Richtung verschoben werden. Übergänge und die Geschwindigkeit können individuell angepasst werden. Eine Callback-Funktion nach jeder Benutzer Interaktion hilft dabei, das Plugin noch weiter anzupassen.

Außerdem stehen noch weitere andere Funktionen bereit, wie z. B. das “spiegelverkehrte Ziehen”, automatische Slideshow etc.

Voraussetzungen: MooTools 1.3.2 +
Kompatibilität: Alle gängigen Browsern
Webseite: http://wall.plasm.it/
Demo: http://wall.plasm.it/examples
Download: https://github.com/plasm/the-wall

Popularity: 1% [?]