Post-It

Ein Notiz-Tool mit jQuery, CSS3 und HTML5

25.04.2012 Kategorie: CSS, Internet, Javascript, jQuery, PHP, Webdesign

Post-It Tool

Wichtig: Es gab einige Änderungen an der API für IndexedDB! Deswegen ist dieses Tool im moment nicht mehr funktionsfähig! Sobald es die Zeit zulässt, werden ich versuchen dies anzupassen.

Der Grundgedanke, welcher mir den Anstoss gegeben hat, dieses Tool zu schreiben, war folgender: Ein Webdesigner stellt dem Kunden eine Vorabversion einer Webseite online zur Verfügung und der Kunde soll an Ort und Stelle Notizen anbringen können, um Änderungen und Anpassungen vorzuschlagen. Die Notizen sollen versendbar sein und beim Import wieder an derselben Stelle erscheinen.
Eine Bedingung sollte sein, dass das Tool mit möglichst wenig Aufwand in eine Seite ein- und ausgebaut werden kann. Darum habe ich auf eine neue Technik der Offlinedatenspeicherung zurückgegriffen: IndexedDB.
Das klingt jetzt alles noch schön und gut. Aber natürlich hat das Ganze auch eine Kehrseite. IndexedDB ist noch in Entwicklung. Momentan wird IndexedDB nur von Firefox und Chrome unterstützt. Das Post-It Tool funktioniert in der momentanen Version sogar nur im aktuellen Firefox! Wie lange das noch so sein wird, lässt sich noch nicht voraussagen. Es ist auch gut möglich, dass an IndexedDB noch Einiges geändert wird, sodass das Tool nicht mehr funktionsfähig ist. Sollte dies der Fall sein, werde ich mich bemühen, wieder eine funktionierende Version bereitzustellen.

Einbinden in eine Webseite

Wie schon erwähnt, soll das Einbinden in eine Seite möglichst einfach sein. Sie müssen lediglich ein CSS-File und ein paar Javascript's importieren. Das CSS binden Sie mit folgendem Code in den Head Ihrer Seite ein:

  1. <link rel="stylesheet" type="text/css" href="post-it-res/style/postit.css" media="all">

Als nächstes werden die Javascript-Files benötigt. Diese binden Sie am Besten direkt vor dem schliessenden Body-Tag ein. Zuerst das jQuery-Framework sowie das Plug-In jQuery-UI. Die beiden Files können beispielsweise direkt von Google geladen werden:

  1. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Zum Schluss werden noch die Bibliotheken eingebunden, welche vom Tool zusätzlich genutzt werden, sowie das eigentliche Script:

  1. <script type="text/javascript" src="post-it-res/js/postit.libs.js"></script>
  2. <script type="text/javascript" src="post-it-res/js/postit.js"></script>

Den Ordner mit den Dateien laden Sie per FTP in ihr Webverzeichnis. Das wär's dann auch schon gewesen und Sie sollten nun in der Lage sein, Notizen auf Ihrer Webseite zu erstellen und direkt per Mail zu versenden, sowie erhaltene Notizen zu importieren. Es sei hier nochmals erwähnt, dass Sie Firefox benutzen müssen!

Hier finden Sie eine kleine Demo des Tools:

Demo

Wer am Code interessiert ist, oder das Tool in eine Seite einbauen möchte, kann die Dateien hier herunterladen:

Download

Fragen und Anregungen können gerne in den Kommentaren gepostet werden. Viel Spass!

Kommentare

Keine Kommentare
Kommentar hinzufügen
*
CAPTCHA-Bild zum Spam-Schutz

Wenn Sie das Wort nicht lesen können, bitte hier klicken.

*
*