Clippy.js - Karl Klammer & Co auf Webseiten

Die Benutzer der Office Pakete von Microsoft kennen sie sicherlich: die in der Hilfe integrierten Animation Clippy, auch bekannt als Karl Klammer und weitere Charaktere. Seit kurzem kann man diese Animationen mit Hilfe des Projektes Clippy.js auch auf Webseiten einbauen. Das funktioniert recht einfacht, auch bei NPage und sogar dann, wenn man eine Designvorlage benutzt.

Einbauanleitung für Clippy.js

Download / Upload bei NPage

Zunächst muss eine zip-Datei auf den PC geladen werden. Man findet diese Datei auf https://github.com/smore-inc/clippy.js. Dort wird auf den zip-Button geklickt und die Datei auf dem PC abgespeichert.

Diese zip-Datei entpackt man auf dem PC. Die zip-Datei enthält eine ganze Menge Dateien. In diesem Fall werden nur die Dateien

  • clippy.css
  • clippy.min.js

benötigt. Diese muss man bei NPage hochladen. Außerdem wird die jQuery-Bibliothek benötigt. Die findet man beispielsweise auf http://blog.jquery.com/2011/11/03/jquery-1-7-released/. Dort klicked man mit der rechten Maustaste auf die min-Version,speichert die Datei auf dem PC und lädt sie anschließend ebenfalls bei NPage hoch.

Alle drei Dateien landen bei NPage im Verzeichnis HTML-Dateien. Wenn man dort eine Datei anklickt, so wird diese im Quellcode in einem neuen Browser-Tab angezeigt und man findet in Adressefeld des Browsers die Adresse, die etwa so aussieht

http://filex.npage.de/yyyyyy/zz/html/clippy.css

x, y und z sind Zahlenwerte, die bei jedem NPage-Account anders sind.

Code-Schnippsel bei Npage einfügen

Damit Clippy oder eine andere Animation auf einer NPage-Textseite sichtbar ist, müssen einige kleine Codeschnippsel eingefügt werden.

Unter Einstellungen › Homepage-Einstellungen › Header-Bereich fügt man im Feld Eigener, zusätzlicher HTML-Code ein:

<link rel="stylesheet" type="text/css" href="http://filex.npage.de/yyyyyy/zz/html/clippy.css" media="all">

In der Textseite, auf der Clippy angezeigt werden soll schaltet man in den Quellcode-Modus um und fügt ganz am Ende der Seite ein:

<!-- jQuery einbinden -->
<script src="http://filex.npage.de/yyyyyy/zz/html/jquery-1.7.min.js"></script>
<!-- Clippy.js einbinden -->
<script src="http://filex.npage.de/yyyyyy/zz/html/clippy.min.js"></script>
<!-- Initialisierung und Aufruf -->
<script type="text/javascript">
    clippy.load('Merlin', function(agent) {
    // Tu was
    agent.show();
});
</script>

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Vergleich zum Orginal (24.04.2013 12:09:00)

Damit man meine Designanpassung mit dem Orginal vergleichen kann, habe ich einige Seiten im wesentlichen unveränder gelassen. das betrifft die Seite Orginaldesign ansehen sowie die Seite Orginaldesign mit Fußleiste. Bei der zuletzt genannten Seite habe ich allerdings eine Fussleiste eingefügt.

Das unterschieliche Aussehen der einzelnen Seiten wird über Npage Script realisiert.


Bewertung: (4,00 Punkt(e) / 1 Bewertung(en))

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang