reference guide

CONTENTS

CHAPTER 1)
BASICS: HOTGLUE USE

What you see is what we see!
Every edit you make is directly
visible to anyone accessing your site.
We recommend using Firefox 3.6 or higher!

CREATE, CHANGE AND DELETE AN ACCOUNT

Create an account on our HOTGLUE server or install on your own server!
To create an account go to HOTGLUE.me and click on register. Fill in a desired
username, password and your email address. After registering you will receive a confirmation email. Didn’t receive the mail? Check your spambox.
After activating your HOTGLUE, you can login to your account on HOTGLUE.me
to change password, email address or delete your account.

START EDITING!

Where do you find your HOTGLUE pages?
Your default page is located on your site’s url. Any other pages can be found by
appending your page name, i.e. http://yoursite.hotglue.me/page2

How do you edit your HOTGLUE?
EDIT MODE: go to your site’s URL and append “edit” (without quotes) i.e.
http://yoursite.hotglue.me/edit

To edit any other page append “edit”, i.e. to your site’s url
http://yoursite.hotglue.me/page2/edit

Once in editing mode you can ADD and EDIT elements and EDIT your page properties.
Read this in the next paragraph.

DO & UNDO

Because of the structure of HOTGLUE there is no classic undo-functionality.
Instead double-click to go to page menu and go to revision.

CHAPTER 2)
BASICS: HOTGLUE CONTEXT MENUS

(single click on page or use shortcut [alt]+[o])
– New text object / colourfield – make a text, or beautiful squares of colors!
– Upload file:
~ Adding a file can simply be done by drag-and-drop action!
~ A status bar lets you know how your upload is doing - you can hover
over it to see the current progress expressed in bytes and percent.

– Embed another webpage; enter the url, i.e. http://worm.org/
– Embed youtube or vimeo video; enter the url, i.e.
http://www.youtube.com/watch?v=-kX23P1b3NU

1.ADD; toolset elements
2.EDIT; page properties / add new page
3.EDITING, SELECTING OBJECTS

1.ADD; toolset elements

2.EDIT; page properties / add new page

(double click on page or use shortcut [alt]+[p])
– Change page title (title is showed in browser’s title bar)
– Change page’s url (pay attention! if you are changing your start page’s url, you
won’t have a start page and you’ll have to assign a start page)
– Make this the start page – when making different pages use this option to
choose what page visitors see first
– Change background color / shift click to enter hexadecimal color code or RGB decimal
color code. These codes are used to specify colors.
– Create a new page – you will be asked for the page name, which will also be the url, and
redirected to edit your new page
– Delete the page – THERE IS NO UNDO!
– Upload a background image – Switch between having the background image fixed (background image stays at the
same place when scrolling) or scrolled with rest of page
– Adjust background image position; click, hold and drag to change the position of the
image, click once to reset
– List all pages – here you find a page list with all your pages. You can choose to edit,
rename and delete a page or set a page as start page.
– Compare revisions of this page: switch between previous versions of your page. Click
revert to go back in time. Pay attention! Once gone back in time, you can’t go the future!
(i.e. what you had before you went to ‘the past’)
– Grid: click to show or hide the grid (not visible for visitors of your page), click, hold and
drag to change the grid’s size horizontally and vertically, hold [shift] to keep squares.
The grid’s steps are saved and shared among all pages. The grid is not magnetic.

3.EDITING, SELECTING OBJECTS

– Clicking on an object will select the object and give you edit options, these are described
in the next chapter.
– Moving objects can be done by selecting the object and dragging with the mouse or using the
arrow keys. To move an object on the current grid step, hold [shift] and press an arrow key.
– To select multiple objects hold [shift] and click on them. Drag the objects to move them
simultaneously or press your [delete] key to delete them.
– Select all objects: [ctrl]+[a]
– To invert current selection press [ctrl]+[i]
– Use [tab] to cycle between objects.
– PANIC!! Sometimes an element like a youtube, vimeo, or other embedded object is out of
range (in the top or left side) or un-clickable, and you can’t access it to drag it to another
place. Click on the bottom or right border to select this object and use your arrow keys
to move it into position. Double-click on the bottom or right border to edit an embedded element.

RESIZING OBJECTS

– To resize an object click, hold and drag it’s right or bottom border, or the the lower right
corner. Hold [shift] to keep proportions.
– When hovering over one of these borders or the lower right corner a tooltip with the
object’s dimensions and position (both in pixels) gets shown.

EDIT ELEMENT – COMMON OBJECT PROPERTIES (VERTICAL COLUMN)

– Clone object: make a copy of the selected element
– Change transparency; click, hold and drag left or right to change, click once to reset
– Bring object to foreground or background (over or under other elements); click, hold
and drag left or right to change; or when you have the image selected, press [shift] and
[pageup] or [pagedown]. You can also use this shortcut when you have multiple objects selected.
– Make the object a link. Objects can link to other websites (enter the complete url, http
including) or to elements within the page, use the next option for this
– Get name of object; use for linking to objects in the same page (anchor)
– Make object appear on all pages – the object will appear on all pages existing at the time,
and will be used ‘as one object’, changing the object in any of the pages will also change
the object on the other pages – great for making a menu! When deleting the original, all
are deleted, but when deleting a ‘reference object’, the rest is kept.
– Delete object, or press [del]

EDIT TEXT ELEMENT

– Change background color / shift click to enter hexadecimal color code or RGB decimal
color code. These codes are used to specify colors.
– Make background transparent
– Change font size; click, hold and drag up or down to change, click once to reset
– Change font color / shift click to enter hexadecimal color code or RGB decimal color code
– Change typeface. Note that these fonts will probably look different on other operating systems.
– Change font style: normal, bold, italic, blod+italic
– Change line height; click, hold and drag up and down to change, click once to reset
– Change letter spacing; click, hold and drag up and down to change, click once to reset
– Change word spacing; click, hold and drag up and down change, click once to reset
– Change text alignment; left, center, right, justify
– Change padding; click, hold and drag in all directions to change, click once to reset
– You can also insert different html codes in a text element, read more about that in
the Advanced section!

EDIT TEXT ELEMENT

– Switch image tiling on/off – drag the right or bottom borders to create a tile of your image!
– Reset image size to original size
– Adjust image selections; click, hold and drag to change, click once to reset
– Download original file

EDIT TEXT ELEMENT

– Switch image tiling on/off – drag the right or bottom borders to create a tile of your image!
– Reset image size to original size
– Adjust image selections; click, hold and drag to change, click once to reset
– Download original file

– Change webpage url

EDIT EMBEDDED VIDEO

– Click the little hand in the top left corner or on the bottom or right border to edit
– Switch automatic playback of video on/off - plays the video automatically when page
opens (takes effect after reload)
– Switch looping of video on/off (takes effect after reload)

– Switch automatic playback on/off - plays automatically when page opens
– Switch looping on/off
– Show or hide control elements
– Mute or unmute video
– Reset video size
– Download original file

EDIT EMBEDDED VIDEO

EDIT UPLOADED VIDEO & AUDIO (OGG)

CHAPTER 3)
TIPS, TRICKS & SHORTCUTS

– Add elements: [alt]+[o]
– Edit page properties: [alt]+[p]
– Move an object on the current grid step:
select object, hold [shift] and press an arrow key.
– Select multiple objects: hold [shift] and click on them.
Drag the objects to move them simultaneously or press
your [delete] key to delete them.
– Select all objects: [ctrl]+[a]
– Invert current selection: [ctrl]+[i]
– Cycle between objects: [tab]
– Move unreachable youtube/vimeo/embeded objects:
Click bottom or right border to select the object and use
your arrow keys to move it into position. Double-click on
the bottom or right border to edit an embedded element.

CHAPTER 4)
SCRIPTS, APPLETS AND OTHER EMBEDS

– In text objects, you can either write regular plain text, valid html code and javascript or a
  mixture all. The system tries its best to figure it out for you.
– Pressing [shift] and [space] while editing a text object adds a non-breakable space
  (in viewing mode this is then encoded as  )
– By default, text breaks using [return] will automatically be converted into html <br>   
elements outside the text area (see TEXT_AUTO_BR in config.inc.php)
– Pressing [tab] while editing a text objects adds tabulator; while this does not influence the
  rendered output of the object, the tab will be retained for editing
– There are a number of strings that are automatically substituted by the system;
  it is preferable to use them instead of explicitly spelling out e.g. the base url or
  the page’s name, as they might unexpectedly change. These substitutions can also be used
  when setting an object’s link target.
   ~ $BASEURL$ (or $baseurl$, same for all following): the site’s base url
   ~ $GLUE$: the HOTGLUE version number (e.g. “1.0.0”)
   ~ $OBJ$: the name of the current object (e.g. “page.rev.obj”)
   ~ $PAGE$: the canonical name of the current page (e.g. “page.rev”)
   ~ $PAGENAME$: the name of the current page (e.g. “page”)
   ~ $REV$: the current revision (e.g. “rev”)

– When using html code inside text objects, any relative urls in “src” or “href” attributes are
  automatically made absolute by prepending the site’s base url in viewing mode.
– All input is retrieved and stored in UTF-8 format, which should allow for support of international
  character sets regardless of the server configuration.

TEXT OBJECT CONTENTS

EMBEDS

Some different embeds are possible, try it out!
For example, you can embed a soundcloud into your HOTGLUE.
Just paste the embed code in a text element!

You can also try some scripts, some may work, some partly, and some won’t.
For more help about this visit our forum or check out http://www.hotglue.org.

CHAPTER 5)
INSTALLING ON OWN SERVER

If you want to have full control of your HOTGLUE, why not install it on your own server?


– Download the latest version of HOTGLUE from http://hotglue.org/#download
– Copy the directory of the archive (or svn trunk) to a directory inside
  the ‘document root’ of your webserver
– Change the permissions of your HOTGLUE ‘content’ directory and all files in it to 777 (read/write/execute)
– It is recommended that you create a user-config.inc.php file where you can overwrite the
settings defined in config.inc.php, so that if you update the HOTGLUE software, you keep your user settings. Add at least this in your settings:

     [code]
     <?php

     @define(‘AUTH _ USER’, ‘admin’);
     @define(‘AUTH _ PASSWORD’, ‘changeme’);

     ?>
     [/code]

– (optional) if your hosting environment allows you to use mod_rewrite and you want to
  use short URLs for your pages, you can rename the htaccess-dist file to .htaccess
  (e.g. by running mv htaccess-dist .htaccess)
– If php is not installed as a module to apache (mod_php), but rather installed as (Fast-)CGI binary,
  installing the htaccess file is mandatory (see known issues section in README file)
– On certain shared hosts we have seen issues with digest authentication
  (see AUTH_METHOD configuration option). For those hosts basic authentication has to be used.
– Launch the directory’s URL from a browser and add “?edit” to the address
  (e.g. http://myserver.com/hotglue/?edit) to start editing
– If you are using the optional .htaccess file you can also start editing by just adding “edit”
  (e.g. http://myserver.com/hotglue/edit).
– When in doubt refer to INSTALL file available in every distribution!

INSTALLED ON OWN SERVER

When installed on your own server, you can make massive changes to the settings in
php files! Some examples:

Text objects
– Text objects have a background color by default which gets randomly chosen from a few
  presets, edit this at OBJECT_DEFAULT_COLORS in config.inc.php
– By default, text breaks using [return] will automatically be converted into html <br>
  elements outside the text area, edit this at TEXT_AUTO_BR in config.inc.php

Images
– HOTGLUE supports server-side resizing of images. by default, images that are larger
  than 120% of your window dimensions while uploading are automatically resized to 80%
  of the window’s dimensions.
– Edit this at IMAGE_UPLOAD_RESIZE_{LARGER,TO} in config.inc.php
– If your upload is exceeding the limits set in the configuration you will receive an error
  message (look in the README file for more information).

Revisions
– HOTGLUE automatically creates snapshots (revisions) of the pages that you are editing
  based on its configuration.
– By default, a new revision is created whenever the user navigates to the page’s editing
  mode, and the prior revision is older than 1 hour and the current (head) revision differs
  from the prior revision. Edit this at SNAPSHOT_MIN_AGE in config.inc.php
– By default, revisions are automatically being deleted after 7 days.
  Edit this at SHAPSHOT_MAX_AGE.
– The system takes care of keeping uploaded files in the shared folder as long as revisions
  reference them, and automatically deletes them when this is not the case anymore.
– It is thus suggested not to manually delete files in shared directories or revisions in the
  pages’ directories. (if you don’t need revisions you can turn them off completely by setting
  SNAPSHOT_MIN_AGE to zero)
– Since snapshotting aims to preserve the entire look and content of a page at a particular
  time, it also turns objects on other pages that are referenced (symlinks) into first class
  citizens by copying their content.

Short URLs
– When the htaccess-dist file got renamed into .htaccess (and your host supports this as
  well) you are able to leave out the question mark in the urls above. If not, you are bound to
  use “?” for editing and page viewing.
  I.e. site.com/hotglue/?edit ; site.com/hotglue/?page2/ ; site.com/hotglue/?page2/edit

CHAPTER 6)
REQUIREMENTS

– Apache 2.x
– PHP 5.x
– (optional) mod_rewrite (for short URLs)
– (optional) php5-gd (for server-side image resizing)

The current version of HOTGLUE was only extensively tested on GNU/Linux hosts.

SERVER REQUIREMENTS:

CLIENT REQUIREMENTS:

– for editing: Mozilla Firefox (>= 3.6) or Google Chrome (>= 8.0)
  ~ While we haven’t tested it, editing could also work on any recent Safari version.
– for viewing: the above plus Internet Explorer 8
  (but keep IE8_COMPAT in the config set to true)

Welcome to the HOTGLUE reference guide. Here you will find everything you want to know about your favourite building tool! You can also download this manual as pdf.

SUPPORT US!