Was ist ein frOozle?
Systemvoraussetzungen
Registrieren und Einloggen
RSS2 feed
Benützung von frOozle
Hintergrund wählen
Texteingabe
Textformatierung
Texteigenschaften für die ganze Seite einstellen
Hintergrundwahl für Textelemente
Elemente bewegen
Bilder hochladen
Sounddateien hochladen
Bearbeitung von Elementen
Löschen von
Elementen
Speichern
Links erstellen
Neue Seiten erstellen
Mail-Links erstellen
Elemente auf der Seite anordnen
Logos und Navigationsleisten
Bilder online bearbeiten
Tipps
frOozle ist ein Website-Builder mit dem Gruppen überschaubarer Größe gemeinsam Webseiten gestalten oder auch kreative Online-Spiele spielen können.
Ähnlich wie ein Blog oder ein Wiki wird ein frOozle online gestaltet, es braucht kein Programm, das lokal auf dem Computer läuft. Blogs und Wikis sind stark textorientiert und lassen wenig Spielraum für Design. Meistens kann man zwischen einigen vorgefertigten Designs (Skins) wählen. Selbst ein Design zu erstellen erfordert Spezialkenntnisse. frOozle dagegen wurde für gemeinschaftliches und spielerisches Webdesign entwickelt. Das Ziel war, sehr einfach und intuitiv Textblöcke, Schriftfarben, Schriftgrößen, Bilder und Sounds miteinander kombinieren zu können.
Jeder angemeldete User, jede angemeldete Userin kann Textblöcke und Bilder und sound auf die Seiten stellen. In der Grundeinstellung kann jeder User nur seine "eigenen" Elemente bearbeiten und verschieben, nicht aber die der anderen User. Mit dieser Einstellung lassen sich verschiedene Schreib- und Gestaltungsspiele realisieren.
Es sind aber auch andere Einstellungen möglich, die die Administratorin vornehmen kann:
frOozle enthält auch eine Bildbearbeitungsfunktion, mit der hochgeladene Bilder online ausgeschnitten werden können. So kann man zum Beispiel eine Figur aus einem Foto ausschneiden und sie in das Foto einer Landschaft stellen, die ein anderer User hochgeladen hat. Viele Spielmöglichkeiten lassen sich damit entwickeln.
Es gibt auch eine Art Chat-Funktion, die eingeschaltet werden kann. Dabei wird alle 5 Sekunden auf Veränderungen durch.andere User geprüft und die Seite bei Bedarf aktualisiert. Dadurch kann das frOozle ähnlich wie ein Chat funktionieren, oder User können Schach, Dame oder sonstwas miteinander spielen. Natürlich gibt es für Online-Schach besser geeignete Programme, doch das frOozle gibt die Möglichkeit, eigene Realtime-Spiele zu erfinden.
Internet Explorer ab 5.0 (am besten 7.0) und Breitband-Internetanschluss. frOozle kann zwar mit jedem Browser betrachtet werden, doch die Bearbeitung ist derzeit leider nur mit Internet Explorer möglich! Wir hoffen in Zukunft eine browserübergreifende Version anbieten zu können, aber das liegt noch in weiter Ferne.
frOozle wird entwickelt von Martin Auer und <useful> [scripts]
Der/die AdministratorIn des frOozle kann einstellen, ob Selbstregistrierung erlaubt sein soll oder nicht. Wenn erlaubt, wird ein Link Registrieren im Sidebar sichtbar sein. Klick diesen Link und trag in das Registrierungsformular deinen wirklichen Namen ein, deinen Loginnamen (Mit diesem Namen werden unter Umständen auch deine Beiträge gekennzeichnet), dein Passwort und eine gültige Email-Adresse. Eine Email mit einem Link wird an diese Adresse geschickt. Klick diesen Link um deine Registrierung zu bestätigen. Du kommst auf die Login-Seite, wo du deinen Loginnamen und dein Passwort eingeben kannst. Du kannst "eingelogt bleiben" anklicken. In diesem Fall musst du dich beim nächsten Besuch der Setie nicht einlogen. Wenn du eingelogt bist, sieht du die Links Login und Registrieren nicht.
Wenn der Admin Selbstregistrierung nicht erlaubt dann kann nur der Admin Teilnehmer registrieren.
Wenn du als Admin eingelogt bist sieht du den Link Admin im Sidebar. Dieser führt auf die Administrationsseite, wo du alle Einstellungen vornehmen, User registerieren oder löschen und auch ganze Seiten löschen kannst.
Noch ein Wort zum Registriervorgang: Wenn du bloß mit einer kleinen Gruppe zusammenarbeiten willst, wird es kein Problem sein, alle Teilnehmer händisch zu registrieren. Wenn du LehrerIn bist und eine ganze Klasse registrieren willst, wirst du nicht alle Schüler händisch eintragen wollen. Erlaube einfache Selbstregistrierung solange bis alle SchülerInnen sich registriert haben. Sie müssen dann nicht die Bestätigungsemail beantworten. Wenn du dein frOozle öffentlich zugänglich machen willst, erlaube nur Selbstregistrierung mti Bestätigungsmail.
Das frOozle stellt einen RSS2 Feed zur Verfügung, der jeden, der das möchte, benachrichtigt, wenn eine Seite des frOozles sich geändert hat. Das kann für TeilnehmerInnen wie auch für BesucherInnen interessant sein. Der Link dazu findet sich im Sidebar.
Nach dem Einloggen wird dein frOozle geladen. Es dauert etwas länger, als wenn andere Benutzer deine Seite lesen, weil das Programm erst geladen werden muss. Warte, bis das Dialogfeld mit dem Smiley erscheint:

Klick "OK" und du kannst beginnen.
Wenn Du es zum ersten Mal startest, Siehst du nur eine leere Seite mit der gelben Editorleiste am oberen Rand.

Klick auf die Editorleiste, um den Editor zu öffnen. Die obere Reihe von Knöpfen dient zum Formatieren von Texten. Die untere zum Bearbeiten deiner frOozle-Elemente.
![]()
Du kannst eine Farbe oder ein Muster wählen oder deinen eigenen Hintergrund laden. Klick den Knopf für Seitenhintergrundfarben und wähle die gewünschte Farbe. Die Hintergrudfarbe erscheint sofort.

Um die Hintergrundfarbe oder das Hintergrundmuster zu entfernen, klick in das unterste Feld des Farbwählers.
Um ein Hintergrundmuster zu wählen, drück den Knopf Hintergrundmuster.

Da eine ganze Menge Muster geladen werden, kann dies einige Zeit dauern, vor allem, wenn du das Programm zum ersten Mal verwendest. Probier es aus. Wenn du eigene Muster laden willst, drück den Knopf unten in der Musterauswahl.

Du kannst dann dein eigenes Hintergrundbild hochladen.
Öffe den Editor, indem du auf den Editorbalken klickst. Klick mit der linken Maustaste irgendwo in die Seite und bewege den Cursor nach unten und rechts. Dadurch ensteht ein Rahmen, in den du jetzt deinen Text schreiben kannst. Du kannst den Rahmen jederzeit verändern, indem du den Anfasser ziehst..
Achtung: Fehlfunktionen entstehen fast immer durch zu hastiges Arbeiten. Da dies ein Online-Porgramm ist, muss man immer warten, bis alle Elemente vollständig geladen sind. (Auf die Statusleiste unten achten!)
Wähle einen Text aus und formatiere ihn mit Hilfe der Knöpfe in der oberen Editorleiste. Wenn du mit Textverarbeitungsprogrammen vertraut bist, solltest du auch hier keinerlei Probleme haben. Du findest hier eine Liste der Formatierungsoptionen. Wenn du mit den Veränderungen zufrieden bist, drück den Knopf Schliessen (oder klick ausserhalb des Elements).

Für erweiterte Formatierungsoptionen klick den Knopf Styles:
Im Styles Fenster können alle Texteigenschaft wie Schriftart, Schriftgröße, Schriftfarbe, Unterstreichung und so weiter eingestellt werden. Einige Einstellungen ergeben den selben Effekt wie bei Verwendung der Formatierungsknöpfe. Doch die Art der Codierung durch das Styles Fenster entspricht den neueren Regeln (Für HTML-Kenner: Die Formatierungs-Knöpfe arbeiten mit dem <font> Tag, das Styles Fenster mit <styles>). Ein großer Unterschied ist der folgende: Im Styles Fenster kannst du die Schriftgröße absolut in Pixeln setzen. Dagegen ist die Schriftgröße, die du mit dem Knopf Schriftgröße einstellst, eine relative und kann je nach Browser-Einstellung der Besucher variieren.
Um einen einheitlichen Stil für die ganze Seite zu erreichen, kannst du im Styles Fenster die Texteigenschaften für das gesamte Dokument einstellen. Setz alle Texteigenschaften und wähle neben "anwenden auf" "gesamtes Dokument". Du kannst dann einzelne Teile des Textes immer noch anders formatieren.
Du kannst für den Hintergrund eines Textelements eine Farbe oder ein Hintergrundmuster auswählen. Drück den Knopf Element-Hintergrundfarbe und wähl eine Farbe aus der Palette. Sie erscheint sofort.

Oder drück den Knopf Element-Hintergrundmuster und wähl ein Muster aus der Musterpalette.

Wenn der Editor geschlossen ist, könen alle Elemente (außer denen, die du als Hintergrund-Elemente fixiert hast) über die Seite gezogen und, wo immer du willst, platziert werden.
Klick auf die Editorleiste und drück dann den Knopf Bild einfügen.

Zieh einen Rahmen auf der Seite und drück dann auf den oberen Durchsuchen-Knopf .

Der Rahmen muss nicht die genaue Größe des Bildes haben, da dieses automatisch formatiert wird. Du kannst die Bildgröße nach dem Laden des Bildes verändern. Vergrößere das Bild nicht zu sehr, da sonst Qualitätsverluste entstehen. Wenn du die Größe des Bildes nach dem Hochladen veränderst, veränderst du nur das Bild auf dem Bildschirm, nicht aber das auf dem Server.
Wenn du ein Bild in Originalgröße hochladen willst, klick das Kästchen an:

Das ist auch wichtig, wenn du ein Bild mit transparentem Hintergrund hochlädst. Durch die Größenveränderung würde die Transparenz sonst verloren gehen. Du kannst aber die Größendarstellung des Bildes nach dem Hochladen verändern, ohne dass die Transparenz verloren geht.
Wenn du eine Sound-Datei mit dem Bild verknüpfen willst, wähle zuerst mit dem Durchsuchen-Button neben der Sprechblase die Sounddatei aus. Wähle danach die Bilddatei aus. Der Sound wird abgespielt, wenn ein Besucher das Bild anklickt. (Es empfiehlt sich, einen entsprechenden Hinweis zu geben):

Doppelklick auf ein Element öffnet den Editor und das Element kann bearbeitet werden.
Doppelklick auf ein Element, um es zu bearbeiten. Klick den kleinen Papierkorb an.

Eine Sicherheitsabfrage erscheint. Klick OK, wenn du das Element wirklich löschen willst. Um alle Elemente auf der Seite zu löschen, öffne den Editor und klick dann den grossen Papierkorb an (Das kann nur der Administrator).

Eine Sicherheitsabfrage erscheint. Klick OK, um dieSeite zu löschen. ACHTUNG: Wenn die Seite glöscht ist, gibt es keine Möglichkeiten mehr sie zurückzuholen.
Wenn der Editor geschlossen ist, siehst du auf der linken Seite des Editors den Knopf Speichern. Benutz ihn oft, um alle frOozle-Elemente zu sichern.
Markiere die gewünschte Textstelle und drück anschliessend den Knopf Link.
![]()
Um einen externen Link zu erstellen, klick Source an. wähle im linken Feld http:// . Im rechten Feld gib das Ziel des Links (Die Seite die den Link öffnen soll) ein. (Achte darauf, dass nicht auch im rechten Feld "http://" steht) Wenn du ein Textelement erstellst, das nur aus Links besteht, musst du ihm eine Hintergrundfarbe geben, da du keine Möglichkeit haben würdest, es zu löschen oder zu editieren. Beim Anklicken würde sich nämlich automatisch die verlinkte Seite öffnen.

Um einen internen Link zu erstellen (einen, der die Leser auf eine andere Seite deines frOozles bringt), wähle * frOozle page im linken Feld und gib den gewünschten Namen der Seite ins rechteFeld ein. Für Seitennamen verwende nur Buchstaben, Ziffern, Bindestrich (-) und Unterstrich (_). Seitennamen dürfen Leerstellen enthalten. Umlaute funktionieren auf .froozle.net. Auf anderen servern könnten sie Probleme verursachen.

Durch erstmaliges Anklicken des Links wird die Seite erstellt. Danach kannst du sie bearbeiten.
Verwende *frOozle page auch, wenn du einen Link zu einer schon bestehenden Seite erstellen willst. In der Version mit Sidebar kann eine neue Seite auch erzeugt werden, indem man einfach in das Feld "Neue Seite" einen Seitennamen eingibt und dann irgendwo in die Seite klickt. Sobald eine neue Seite gespeichert ist, erscheint sie im Inhaltsverzeichnis im Sidebar.
Die meisten Menschen wissen inzwischen, dass es nicht ratsam ist, Email-Adressen im Internet zu veröffentlichen, da diese für Webcrawler ( Roboter, die Internetseiten lesen könne und Mailadressen an Firmen weitergeben) leichte Beute sind. Benutz nicht den Link mailto: im Link Fenster, außer du hast einen sehr guten Grund dafür (z.B., dass du ein sehr gutes Spamschutz-Programm besitzt). Benutz stattdessen den Link * mailform . Dieser bringt die Besucher zu einem Mailformular. Die Email wird dann an die Email-Adresse des Users geschickt, der den Mail-Link erstellt. Das rechte Feld wird automatisch ausgefüllt.
Alle Elemente einer Seite können verschoben werden. Um das genaue Anordnen von Elementen einfacher zu machen, kann der Hintergrund gegen einen Raster ausgetauscht werden . Klick ein zweites Mal, um den Hintergrund wiederherzustellen.

Wenn du ein Element fixieren willst, doppelklick es und drück den Knopf Fixieren.

Wenn du ein Element zwar bewegen, aber im Hintergrund halten möchtest, drück den Knopf Im Hintergrund halten.

Wenn du mehrere Elemente fixiert hast oder im Hintergrund hältst, dann kannst du jedes davon nach hinten versetzen, indem du es doppelklickst und dann den Knopf Nach hinten drückst.

Du kannst das gewöhnliche Verhalten eines Elements wieder herstellen, indem du es doppelklickst und dann den Knopf Hervorholen drückst.

Benutz diese Knöpfe zum Anordnen deiner frOozle Elemente. Du kannst aber auch den Besuchern deines frOozle das Ziehen von Elementen erlauben, indem du auf der Admin-Seite die entsprechende Checkbox anklickst. Deine Besucher können dann alle Elemente verschieben, die du nicht fixiert hast.
Vielleicht willst du alle frOozle-Seiten mit einem Firmenlogo, einer Navigationsleiste oder einer Inhaltsangabe versehen. Doppelklick das Element deiner Wahl und drück dann den Knopf Alle Seiten. Das Element erscheint nun auf jeder Seite des frOozle an der selben Stelle. Wenn du das Element auf einer Seite verschiebst, wird es auf allen Seiten an der neuen Position erscheinen. Es ist also empfehlenswert, beim Anlegen eines frOozle als erstes diese Elemente festzulegen. (Der obere und der linke Rand der Seite sind die klassischen Positionen dafür.)
Es ist möglich, hochgeladene Bilder auszuschneiden, zum Beispiel um eine Figur aus einem Foto freizustellen.
Mach einen Doppelklick auf das Bild, das du ausschneiden willst. Wenn sich der Editor öffnet, klick den Ausschneiden-Knopf an:
Es öffnet sich das Ausschneide-Fenster:

Die 4 oberen Knöpfe dienen zur Auswahl des Ausschneide-Verfahrens. Mit dem 1. Knopf kann man eine Figur aus dem Bild ausschneiden. Klick den ersten Knopf an:
Dann klick mit der Maus entlang dem Umriss der Figur, die du ausschneiden möchtest. Es zeigt sich eine gestrichelte rote Linie, die die Punkte verbindet, die du anklickst. Kurven kannst du zeichnen, indem du die Punkte in sehr kurzen Abständen setzt. Mit einem Doppelklick schließt du die Linie.
Wenn du einen Fehler machst, klick auf den Rückgängig-Knopf in der unteren Reihe:
Der letzte Abschnitt der Linie wird gelöscht und du kannst weitermachen.
Wenn du die Linie geschlossen hast, klick auf den Ausschneide-Knopf unten:
![]()
Die ausgeschnittene Figur erscheint auf einem grau-weiß karierten Feld:

Wenn du Löcher in das Bild schneiden willst, zum Beispiel für Fenster, dann klick auf den zweiten oberen Knopf:
Klick wieder entlang dem Umriss, den du ausschneiden willst:

Dann klick wieder den Ausschneide-Knopf. So könntest du zum Beispiel alle Fenster im oberen Stockwerk ausschneiden:
Wenn du mit dem Ausschneiden fertig bist, klick den Speicher-Knopf unten:
Auf der Seite erscheint jetzt anstelle des Originalbildes das ausgeschnittene Bild.

Durch die Löcher wird der Seitenhintergrund sichtbar, oder auch ein anderes Bild:

Mit dem Abbrechen-Knopf kannst du das Ausschneide-Fenster schließen, ohne dass das Originalbild verändert wird:
![]()
Mit dem dritten Knopf kannst du einen rechteckigen Ausschnitt aus dem Bild erstellen:
Zieh einfach mit dem Cursor von links oben nach rechts unten ein Rechteck in dem Bild (Wenn du damit Probleme hast, weil das Bild verschwindet und lange nicht wieder auftaucht, installiere den Internet Explorer 7 statt deinem alten Internet Explorer).
Und der letzte Knopf dient zum Erstellen eines ellipsenförmigen Ausschnitts:
Zieh wieder mit dem Cursor von links oben nach rechts unten (Wenn du damit Probleme hast, weil das Bild verschwindet und lange nicht wieder auftaucht, installiere den Internet-Explorer 7 statt deinem alten Internet-Explorer).
Arbeite nicht zu schnell.
Gib dem Programm Zeit, um zu laden, nachdem du dich im frOozle eingeloggt hast.
Verschieb Elemente nicht zu schnell.
frOozle wurde hauptsächlich in JavaScript geschrieben, einer in den Browser integrierten Programmiersprache. JavaScript ist nicht die schnellste aller Programmiersprachen, vor allem wenn im Hintergrund noch andere Programme aktiv sind. Gib Javascript die Zeit, die es benötigt.
Wenn etwas schiefgeht und sich nichts mehr bewegen lässt, hilft es meistens, die Seite neu zu laden.
↑Inhaltsverzeichnis