How to use frOozle

What is a frOozle?
System requirements
Registering and logging in
RSS2 feed
Using frOozle
Choosing a background
Entering Text
Formatting Text
Setting text properties for the entire page
Choosing a background for a text element
Moving Elements
Uploading Images
Editing frOozle elements
Deleting frOozle elements
Saving your frOozle
Creating links
Creating new pages
Creating mail links
Arranging things on a frOozle
Logos and navigation
Tips

What is a frOozle?

frOozle is a website builder for not too large groups who wish to create and design web pages collaboratively or invent and play creative online games.

Similar to a blog or a wiki a frOozle is maintained online. It does not need a program that runs on the local computer. Blogs and wikis are heavily text oriented and leave little margin for design. Usually you can choose between prefabricated layouts (skins). To design your own skin requires special knowledge. frOozle on the other hand has been designed for collaborative and and even playful webdesign. The goal was to provide a way to easily combine text blocks, font colors, font sizes, images and sounds.

Each logged in user can place text blocks, images and sound on each page. The most usual setting will allow each user only to edit or move their own contributions, but not those created by other users. Many writing games and and designing games can be implemented in this way.

But there are also other settings the can be chosen by the administrator:

• Only logged in users can view the pages
• All users can view the pages

• Logged in users can only edit and delete elements created by themselves
• Logged in users can edit and delete all elements.

• Logged in users can move only their own elements
• Logged in users can move all elements
• All visitors can move elements.

frOozle also is equipped with an image processing function that allows "cutting out" images online. With this function you can cut out a figure from a picture and place it in a landscape uploaded by some other user. Many games can be developped with this functionality.

There is also a chat function that can be switched on by the administrator. This will check for changes in the page every 5 seconds and refresh the page if necessary. With this option turned on the frOozle can serve as something like a chat, or users could play chess or checkers. Of course there are better programs for online chess, but with the frOozle you can invent your own online board games.

frOozle is being developed by Martin Auer and <useful> [scripts]

↑Table of Contents

System requirements

Internet Explorer for Windows 5 and higher (7 is strongly recommended) and broadband Internet connection. frOozle can be viewed with any browser, but editing is only possible with Internet Explorer for Windows at this time. We hope to get a cross-browser version, but this will unfortunately not be in the near future.

↑Table of Contents

Registering and logging in

The administrator of the frOozle can allow or disallow self registration. When allowed, a link Register will be visible on the sidebar. Click it and fill in your real name, preferred login name, password and a valid email address. An email with a link will be sent to your address. Click this link to confirm your registration. You will then be taken to the login page where you can enter your loginname and password. You can check "remain logged in". If you do that the next time you browse to the frOozle you will not have to log in. When you are logged in you will not see the Login or Register links on the sidebar.

In case the admin does not allow self registration only the admin can register users.

When you are logged in as the admin you will see a link Admin on the sidebar that will take you to the settings page where you can add or delete users, remove whole pages from the frOozle and do all the necessary settings.

A word on registration proceedings: If you just want to collaborate with a small group of people it will be no problem to register them manually. In case you are a teacher and you want to register a whole class you will not want to register all the students manually. Instead allow simple self registration and disallow it again when all the students have registered. In this case they will not have to respond to a confirmation email. In case you want your frOozle to be publicly accessible choose self registration with confirmation email.

↑Table of Contents

RSS2 Feed

The frOozle provides a simple RSS2 feed that will inform anybody when a page has been changed. This may be useful for participants as well as visitors. The link is found on the sidebar.

↑Table of Contents

Using frOozle

After logging in your frOozle will load. It takes a bit longer to load than when a reader surfs to your page, because it has to load the scripts. Wait till you see the dialog with the smiley:

Click "OK" and you can start.

When it has loaded the first time all you see is an empty page with the yellow editor barr on top. This is the editor trigger.

When you click the trigger the editor will open. The upper row of buttons is for formatting text, the lower row is for managing the frOozle elements.

↑Table of Contents

Choosing a background

You can set a background color or choose a background pattern from our collection or you can upload your own background image to create a background pattern. Click the page background color button and choose a color from the color picker. It will immediately show.

Or click the page background pattern button.

An awful lot of background patterns will load into the background pattern picker so this may take a while, especially when you use it for the first time. Try out the patterns. You can also use the button at the bottom of the background pattern picker to upload your own background image.

↑Table of Contents

Entering Text

Click the left mouse button somewhere on the page and drag the mouse down and right. This will draw a rectangle on the page. Now you can enter text into this rectangle. You can change width and height of this rectangle by grabbing the handle with the mouse and dragging it.

↑Table of Contents

Formatting Text

Select text with the mouse and format the selection using the upper row of buttons. If you are used to using a word processor their functions will be familiar to you. You can find a description of all formatting options here. When you are content with the look of your paragraph click the close button (or click anywhere outside the element).

For advanced formatting use the styles button:

In the styles window you can set all the text properties like font (typeface), font size, color, underline and so on. Some settings will give the same effect as when set with the formatting buttons, but the way they are written into the underlying code conforms to the newer rules by the WWW consortium. One big difference is that font size set in the style window is absolute, whereas font size set with the font size button is relative and will vary depending on the viewer's browser settings.

↑Table of Contents

Setting text properties for the entire page

To achieve a consistent style throughout your page you can set text properties for the entire document in the style window. Set all the text properties ynd select "entire document" in the selection list where it says "apply to". You can then set styles for individual parts of the text.

↑Table of Contents

Choosing a background for a text element

You can set a background color or choose a background pattern from our collection. Click the element background color button and choose a color from the color picker. It will immediately show.

Or click the element background pattern button and pick one of those patterns.

↑Table of Contents

Moving Elements

When the editor is closed all elements (except the ones you marked as background elements) can be dragged across the screen and placed where you want them.

↑Table of Contents

Uploading Images

Click the editor trigger and then the image button.

Draw a rectangle on the screen where you want the image to appear. Click the browse button.

The rectangle does not have to have the exact dimensions of the image you want to upload. The image will be uploaded to the server and will be resized automatically so it will fit in the rectangle without being distorted. You can adjust the size and position of the image after uploading. It is not advisable to enlarge it too much because this would impair image quality. If you resize the image after uploading this will only change the appearance of the image on the screen but it will not change the dimensions of the image saved on the server.

If you want the exact dimensions of the image preserved, click the checkbox "Don't resize". When you upload GIF imagesd with transparent background click this checkbox to preserve transparency. You can resize the image after uploading.

↑Table of Contents

Uploading sound files

If you want to link a sound file with an image, first chose the sound file with the brows button near the speech bubble. Then chose an image file. The sound will be played when a visitor clicks the image. (You should the visitors know about this somehow).

↑Table of Contents

Editing frOozle elements

Double click on any element. It will open for editing.

↑Table of Contents

Deleting frOozle elements.

Double click an element to make it editable. Click the small waste basket.

A safety question will appear. Click ok if you want to delete the element. To delete all elements on the page click the editor trigger and then click the big waste basket.

A safety question will appear. Click ok to delete the whole page.(Only the admin can do this)

Caution: There is no way of retrieving the page after it has been deleted.

↑Table of Contents

Saving your frOozle

When the editor is closed at the left hand side of the editor trigger you can see the save button. Use it often to save your frOozle.

↑Table of Contents

Creating links

Select the text that should be turned into a link. Click the link button.

For an external link select http:// in the left field and enter the link reference (that is the internet address that should be opened by the link) in the right field. If you create a text element that consists exclusively of links you must give it also a background color or background pattern. Otherwise you will have nowhere to grab it or double click it for editing because it will open the linked page instead.

↑Table of Contents

Creating new pages

For an internal link, that is a link that will take the reader to another page of your frOozle, select *frOozle page in the left field and enter a name for your page in the right field. For page names use only letters, numbers, - and _. Spaces are allowed.

Then when you click on the link for the first time the page will be created and you can edit it. The name of the first page is always "Home" (without the quotes).

Use *froozle page also to creat a link to an existing page. You can also create a new page by typing the name in the field New page on the sidebar. As soon as the page will be saved it will also appear in the table of contents on the sidebar.

↑Table of Contents

Creating mail links

Most people know by now that it is not advisable to publish an email address on the web. Neither openly nor hidden in a link. Because it will soon be found by the webcrawler ( a robot that reads webpages) of some spammer and soon you will receive mails that offer you loans or medication you don't need or magic formulas to enlarge what you don't really want enlarged. So in the links window don't use the mailto: link unless you have a very good reason. Instead use the *mailform link. This will send the reader to a mailform and the message will be sent automatically to the user who created the mail link. Th right field will be filled automatically.

↑Table of Contents

Arranging things on a frOozle

All elements on a frOozle can be dragged around by you. You can use the grid button to temporarily change the background of the page to a grid. Click a second time to change it back.

If you want to fix an element in its place, double click it and then click the no drag button.

If you want an element to be dragable but not to be moved to the front when dragged, click the stay back button.

If you have fixed more than one element in place or made them stay back, you can send any one of them to the back behind the others with the send back button.

You can restore normal draging behavior with the drag normal button.

You can use these buttons to help you arrange elements on your frOozle. But you can also activate dragging for readers in the admin page. If you do that, readers will be able to drag all the elements you have not fixed in place.

↑Table of Contents

Logos and navigation

You may want certain elements to apear on all pages of your frOozle. For instance a company logo or a navigation bar or table of contents. Double click any element and click the all pages button. The element will appear on all pages in the same place. If it is moved in one page it will appear in the new place on all other pages as well.

↑Table of Contents

Processing images online

It is possible to cut out images that have been uploaded.

Double click on the image you want to cut out. When the editor opens, click the cutout button:

The coutout window will open.

The four buttons on top let you chose one of the cutout functions:

The fist button lets you cut out a figure from the picture.

By click along the outline of the figure you wish to cut out. You can only create straight lines in this way, but if you set the points in short intervals you can simulate curves. Close the outline by double clicking.

If you make a mistake you can click the undo button in the lower row:

The last segment of the line will be deleted and you can continue.

When you have closed the line click the cutout button at the bottom:

The cut out figure will appear on a grey-white checkered background:

If you want to cut holes into the picture, e.g. for windows, click the second button on top:

Again click along the outline you want to cut out:

Then click the coutout button. In this way you could cut out all the windows in the upper storey:

When you are finished, click the save button:

In the place of the original image there will now appear the cut out image.

The background of the page will be visible through the holes, or even another image:

With the close button you can close the window. If you close the window before you save the original image will not be altered.

With the third button in the top line you can crop the picture:

Just click and drag the cursor from top left to bottom right inside the image. (If you have problems because the image vanishes and takes a long time to reappear you should install Internet Explorer 7) .

The last button in the top line will create an oval cutout:

Again just click and drag the cursor from top left to bottom right inside the image.

↑Table of Contents

Tips

Don't work too hastily. Give the script time to load when you log in to your frOozle. Don't drag elements too fast. frOozle has been programmed in JavaScript, a scripting language that is built into your browser. But JavaScript is not the fastest of all languages, so give it a chance. Especially if your computer is doing some hard work in the background.

↑Table of Contents