Einführungen mit Intro.js

Geschrieben am von digifa

Das PHP-Magazin stellt in seinen Online-News Intro.js vor.
Intro.js möchte einen einfachen Weg aufzeigen, neue Features einzuführen und dem Benutzer Schritt-für-Schritt-Anleitungen für Webseiten und Projekte zur Verfügung zu stellen.
Im Folgenden soll kurz analysiert werden, ob die Intro.js die Versprechen halten kann, die auf der Webseite gemacht werden.

Doch nun zu den Versprechen:

  1. Einfach zu nutzen
  2. Schnell und klein
  3. Frei & OpenSource
  4. Tastatur- und Maus-Navigation
  5. Browser-Kompatibilität
  6. Verwendung von Bootstrap

Bevor ich auf ein Anwendungsbeispiel eingehe, möchte ich auf die anderen Punkte eingehen:

Schnell und klein – sind die komprimierten Sourcen tatsächlich, 1.4KB JavaScript und 747B CSS – allerdings zuzüglich der bootstrap.css und bootstrap-responsive.css mit knapp 28KB welche man sicher auch in einer minified-Version verwenden könnte!

Frei & OpenSource – ist mit der MIT-Lizenz äußerst flexibel!

Tastatur- und Maus-Navigation – funktioniert,vor und zurück mit den Pfeiltasten ←, → , schließen mit Esc.

Browser-Kompatibilität und Bootstrap – Konnte ich leider nur in ein paar aktuellen Browsern prüfen (FF 19, Chrome, IE9, Safari) sowie unter Android auf Handy und Tablet, dort funktioniert es. Die Verwendung von Bootstrap sollte zu einer hohen Kompatibilität führen.

Einfach zu nutzen – CSS und JS-Dateien einbinden, zu erläuternde Elemente mit data-step und data-intro ergänzen, der Wert für data-step ist die Nummer des Schritts (Integer), der Wert für data-intro der anzuzeigende Text.
Beispiel:

<h1 data-intro="Hello all! :) This is the name of project, IntroJs." data-step="1"> Intro
<span style="font-weight: normal">.js</span>
</h1>

Live kann man sich das bei Intro.js ansehen.

Beispiel Intro.js

Was ich bisher noch als Manko ansehe, sind:

  1. Die fehlenden Tests, die hoffentlich so schnell wie möglich hinzugefügt werden, damit das Projekt aus der „Frickler-“ Ecke herauskommt.
  2. Die fehlende Dokumentation, auch wenn die Verwendung denkbar einfach ist (s.o.).
  3. Die fehlenden Konfigurationsmöglichkeiten (z.B. andere Bezeichnungen für „Skip“ und „Next“).
  4. Fehlendes Theming, ein Teil des Stylings funktioniert über die eingebundene CSS-Datei, andere Einstellungen müssen im Quellcode vorgenommen werden.

Durch die offene Lizenz und den bisher recht überschaubaren und gut kommentierten Quellcode kann man o.g. Mankos sicherlich schnell beheben und die Bibliothek schnell und effektiv einsetzen.

[Update 16.03.2013 08:00] Mir ist aufgefallen, dass ich ein paar weitere Aspekte nicht beschrieben habe, die ich persönlich für nicht so gut halte und die ggf. auch die Verwendbarkeit einschränken:

  1. Ergänzung des HTML um eigene Attribute (z.B. „data-step“) – Hier könnte ich mir vorstellen, dass ältere Browser darüber stolpern bzw. Validierungen der HTML-Sytanx fehlschlagen könnten, das müsste man aber einmal ausprobieren. Alternativ hätte man hier mit einem Array von Ids oder Klassen arbeiten können, welches Standard-Attribute sind und damit keinerlei Probleme hervorufen sollten.
  2. Die anzuzeigenden Texte stehen als Werte in den Attributen des HTML-Markups – Das macht es schwierig, Markup wie z.B. Verlinkungen in die anzuzeigenden Texte einzubauen (falls das überhaupt möglich ist, dies habe ich nicht geprüft). Längere Texte sorgen dafür, dass das HTML schnell unübersichtlich und damit schwer wartbar wird. Der Vorteil jedoch dabei ist, dass die Erklärung bei dem zu erklärenden Text steht. Wenn man dies möchte, wäre vielleicht eine Struktur wie folgt sinnvoller:


<h1 class="introJsStep1">
<span class="hidden introJsData">Hello all! :) This is the name of project, IntroJs.</span>
Intro <span style="font-weight: normal">.js</span>
</h1>

Mein Fazit: Eine gute Idee, die aber noch ganz am Anfang steht und vermutlich als PlugIn für eines der „großen“ JS-Frameworks mehr Erfolg versprechen würde!

Schreibe einen Kommentar