Drücke die Tasten ◄ ► für weitere Artikel  

Webseiten-Elemente mit Javascript fokussieren und erklären

Will man eine Webseite vorstellen oder erklären gibt es dazu schönere und praktischere Wege als reinen Fließtext. Wir stellen hier zwei kostenlose Javascript-Tools vor, mit denen sich einfach und elegant Anmerkungen, Beschreibungen und Tooltipps für eine Webseite erstellen lassen: intro.js und Chardin.js.

Webseiten-Elemente mit Javascript fokussieren und erklären

Wenn eine Webseite erklärt oder vorgestellt werden soll

Prinzipiell sollte eine Webseite zwar immer selbsterklärend sein, um den User nicht zu überfordern, nichtsdestotrotz kann es Situationen geben, in denen eine kleine Vorstellung oder Einführung für den User hilfreich ist. Genau in diesem Fall sind die beiden Javascript-Tools Intro.js und Chardin.js hilfreiche Werkzeuge.

Intro.js hilft beim Erstellen sogenannter Javascript-Intros. Dabei werden einzelne Bereiche einer Webseite fokussiert und erklärt.

Intro.js: Einfache Kennzeichnung von HTML-Elementen

Mit Intro.js lassen sich auf simpelste Weise HTML-Elemente für ein Javascript-Intro markieren. Beim Aufrufen der Webseite werden dann die vorher gekennzeichneten Bereiche hervorgehoben, indem der Rest der Seite abgedunkelt wird, außerdem können die Bereiche mit nützlichen Tooltips versehen werden. Mithilfe einer kleinen Navigation kann zwischen den einzelnen Bereichen und ihren Tooltipps hin- und her navigiert werden. Intro.js ist das Projekt eines 20-jährigen, iranischen Programmierers und über github kostenlos und frei verfügbar.

intro.js: Mit kleinen Tooltips und Navigations-Buttons kann die gesamte Webseite erkundet werden.

Chardin.js: Minimalistisches jQuery-Plugin

Optisch noch etwas minimalistischer kommt das jQuery-Plugin Chardin.js daher. Hier wird die gesamte Seite abgedunkelt, und lediglich die kleinen Tooltipps stehen im Zentrum der Aufmerksamkeit. Eine Navigation zwischen mehreren Elementen ist bei Chardin nicht vorgesehen. Auch dieses Script ist kostenlos auf github erhältlich.

Chardin.js ist bei der Optik noch etwas minimalistischer als Intro.js.

Weiterführende Links

72 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
7 Antworten
  1. von DerFreeman am 08.04.2013 (14:49Uhr)

    "Selbsterklärend" ist ein Mythos! Nach meinen Erfahrungen gitb es IMMER jemanden, der selbst dagegen resistent ist.

  2. von Adam Ädämski Rohn via facebook am 08.04.2013 (15:03Uhr)

    nice! vor allem Chardin.js

  3. von Thomas am 08.04.2013 (15:25Uhr)

    Nette Spielerein! Allerdings find ich solche overlays zum Teil eher abschreckend! Vorallem wenn sie dazu genutzt werden, sich mit jener Seite auf FB zu "vernetzen"

    PS: kleiner Typo im Link von "Chardin.js auf gIthub"

  4. von Dustin Deus via facebook am 08.04.2013 (15:37Uhr)

    Nur Zufall oder ist es eure Quelle http://pineapple.io/ ? Tage nachdem es dort veröffentlicht wird, ist es bei euch zu sehen.

  5. von SeV am 08.04.2013 (16:39Uhr)

    Hab Intro.js letztens auch schon mal eingesetzt und muss sagen es ist ein tolles Plugin mit dem man schnell Ergebnisse darstellen kann. Leider hakt hier und da die Bedienung und man sollte immer die Position der Overlays nachkontrollieren.

    Ich nutze es primär als interaktive Bedienungsanleitung auf meinen Webtools und habe es in mein Portfolio mit aufgenommen.

  6. von web frontend | Annotary am 08.04.2013 (20:35Uhr)

    [...] More from Patrick Kohan: Rezepte misc general programming media Sort Share t3n.de       2 minutes [...]

  7. von Prefix-Free: Befrei dich aus der CSS Ven… am 11.07.2013 (08:30Uhr)

    [...] Webseiten-Elemente mit JavaScript fokussieren und erklären [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema JavaScript
TypeScript 1.0: Microsofts JavaScript-Alternative jetzt offen für alle Entwickler
TypeScript 1.0: Microsofts JavaScript-Alternative jetzt offen für alle Entwickler

TypeScript, die JavaScript-Alternative von Microsoft, ist in Version 1.0 erschienen – ab jetzt können sich Entwickler daran beteiligen. TypeScript soll vor allem für größere JavaScript-Projekte. ... » weiterlesen

JSter: Riesige Datenbank mit 1.536 JavaScript-Libraries und Tools für Entwickler
JSter: Riesige Datenbank mit 1.536 JavaScript-Libraries und Tools für Entwickler

JSter versammelt 1.536 JavaScript-Libraries und sortiert sie nach verschiedenen Kategorien. Wir stellen euch die hilfreiche Seite vor. » weiterlesen

Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code

Du bist Anfänger und setzt keine oder kaum Coding-Conventions ein? Dann solltest du diesen Artikel lesen, denn darin lest ihr wie ihr die Qualität eures JavaScript-Codes verbessern könnt: mit... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen