hotglue

Context menu (double click)
1. change page title.
2. change page's url.
3. make this the start page.
4. change background colour.
5. create a new page.
6. delete this page.
7. upload a background image.
8. adjust background image position.
9. list all pages.
10.compare revisions of this page.
11.display grid.

Edit element (vertical column)
1. clone object.
2. change transparency.
3. bring object to foreground or background.
4. make the object a link.
5. get name of object.
6. object will appear on
all pages.
7. delete object.

Edit element (horizontal row)
1. switch image tiling on/off.
2. reset image size to original size.
3. adjust image selections.
4. download original file

HotGlue is tool that allows the user to create websites directly in their web browser. HotGlue provides the imperfective structure for creating a website and it is left up to the audience to generate the content. It is free to its users so allows for the creation of sites without paying for a domain name.

The interface allows the user to upload images (it supports .jpg .png and .gif formats) and has the capability of embedding videos from Vimeo and Youtube directly into the pages.

HotGlue Manual

Editing Pages
The edit screen of a page can be entered by adding '/edit' to the end of the pages URL. The edit screen has the same appearance as the webpage with the difference that the content can be altered (right).

Cascading Style Sheets
CSS is a language that is used to describe the look and formatting of a document written in HTML.
HotGlue supports the use of the CSS language. To input CSS code the phrase '/stylesheet' must bee added onto the end of the page's URL.

(right)
This is an image of the style sheet page where the code can be entered.
An example and tutorial of HotGlue using CSS can be found here.
The global stylesheet can be accessed by adding '/stylesheet' to the homepage URL. Code added here will effect every page on the website.

(above)
A flow chart created to describe the links between the pages of my HotGlue website. The empty squares are the pages of the sketchbook that have been left blank as they had not been created at the time. Also not shown are the links from the 'others' page, which links to the 30 websites of others on the course.

(above)
A wireframe sketch of a sample page of this website. I decided to try to set out the site like a book to play on the idea of it being a digital sketchbook. This is why the site has an index and the pages are read from left to right with links to the next and previous pages at either end (to simulate turning the page)

Flowcharts & Wireframes

(above)
Rotating Heads
To create the rotating head on the front page 8 views of the same image had to be created. This was done in Illustrator then put into Photoshop to string together to make the gif.

One issue that I have found with HotGlue is that often what is displayed on one browser is different to what is shown on another. I created my site using Firefox so when viewed on Firefox it is displayed in its true form, but if it is viewed using Chrome or Safari some objects are shifted to a different spot and areas of text become underlined or italic. This is shown above with the Firefox display on the left and the Chrome version on the right. I used tags to correct this. In the example above I used the < /u > to get rid of the underline.

HTML tags are keywords that are surrounded by angled brackets '<>' and are used as pairs with the second set of brackets containing a '/' to denote the end of that tag. In creating my HotGlue website I found it was possible to add certain elements to individual words using tags. The advantage of this is that a colour or link could be added to selected words rather than entire blocks of text. The following have been used in this site (without spaces between the angled brackets):

-underline: < u > < /u >

-italic: < i > < /i>

-link: < a href="http//" >

-align: < div align="" > < div >

-colour:
< FONT COLOR="#" > < /FONT >