USER GUIDELINES ICOM MINIWEBSITESnetwork.icom.museum/fileadmin/user_upload/mini... · 1. Preview of...

ICOM – User guidelines ICOM Miniwebsites – English version

USER GUIDELINES

ICOM MINIWEBSITES


This handbook aims to give you the basic keys to develop your miniwebsite.

The functions are presented in two parts:

the first part deals with the basic functions; the second one with the specific features.

This 53-page document is not supposed to scare you.

This document is as user-friendly as possible and provides you step by step instructions and

gives you all the information on the miniwebsite functions you will use.

Moreover, the glossary at the end of the handbook will help you to become familiar with the specific terminology used.

This glossary includes every UNDERLINED BLUE WORD IN UPPER CASE.

Some functions are part of the Typo3 interface

but are not developed and activated for ICOM miniwebsites for the moment.

The functions that are not described in this handbook should not be used.

Get connected to your new BACK OFFICE, this handbook will help you build your miniwebsite easily!

For further information,

please contact Carla Bonomi, ICOM webmaster

[email protected]


I. STANDARD FEATURES

1. Access the administration interface p.5

2. Interface description p.7

3. Menu p.8

4. Pages tree and page management p.9

5. Edit a page (Step 1 to 4) p.14

6. Edit content p.16

7. Media (images and photos) p.26

II. SPECIFIC FEATURES

8. Related links p.35

9. Home page p.38

10. Manage the news (database) p.39

11. Alternative language p.43

12. Photo Gallery p.44

13. Background images p.49

14. Management of insertions (encart) p.51

15. Glossary p.53

User guidelines ICOM Miniwebsites

ICOM – User Guidelines ICOM Miniwebsites – English version 4

I. STANDARD FEATURES


To connect:

Username: your user name

Password: your password

To connect to the administration interface go to:

http://icom.museum/typo3

You will see the image below:

1. Access the administration interface


1. Access the administration interface

Click on « Page » to visualize the structure of your site


2. Interface description

Three major areas form the miniwebsite interface.

- The first one, on the left, includes the Menu interface. This menu is detailed below.

- The second area, centre, includes the site tree.

- The third area, on the right, includes the contents.


3. Menu

The menu, on the left side of the interface provides access to 2 modes.

Preview of the

Page

Edit page Create a new page Hide a page

Move a page Clear the page

cache

Reload Delete Page

Info Show history Create a new page

Move after Move down Move up

Copy Cut Paste

This mode allows you to create and edit new pages. Once the page is created, you can add

content: text, images, etc.. This is the function you will use most of the time.

The mode “LIST” (Liste) gives you the best overview of data of a page, which a user can

access. The contents are also listed, as the templates or pages behind it. Through this function

you can create and copy pages, but you can’t add contents.

Details of the icons of the CONTEXT MENU (list functions):

• Modes


4. Pages tree and page management

• Pages tree

Once you have selected the function WEB/PAGE by clicking on it, the site tree appears.

Users most commonly use the function WEB/PAGE.

At the top, it is the home page. From there, the structure breaks down into different layers.

In our example « Glass » is the home page, « Welcome to Glass » the first layer, « The Board

Welcomes You » the second layer ...

1. Each layer can be detailed with or reduced with

2. Before the title of each page you will find an icon which represents the page.

Simple page

Page linked to a database (CHAPTER 10)

Database (CHAPTER 12 & 13)

3. At the top of the page tree is the button which allows to update the tree when you make a

change (for example : you add a page).

4. By clicking on the name of the page the details of the page will appear on the right side of the

screen.

5. By clicking on the icon of the page, you get a CONTEXT MENU (see next page).



Details of the CONTEXT MENU (List functions):

1. Preview of the page. 2. Edit the contents of

the selected page.

3. Create a new page

(steps to follow).

4. Information page.

5. Copy the page to

paste it elsewhere in

the tree.

6. Cut the page to

paste it elsewhere in

the tree.

7-8. Paste / paste after

(a particular page)

9. More options for the

page (second set of

options).

10. Option to display

the page (Hide - Show)

11. The page is visible

(in FRONT OFFICE).

12. Edit properties:

Edit properties of a

page or contents of a

page

13. Delete

14. History /Follow-up version of a page.



• Create, move, copy, remove a page

To create a new page, click on the icon of the layer in which you want to create a new page.

When you click on

NEW/Nouveau,

you will see on the

right side:

This menu

appears:

I AM IN THE WEB/PAGE MODE



• Create a new page

To create a new page, click on

"Page (Dans)".

Different positions are proposed

for the new page:

Choose the position of the page

(by clicking on a grey arrow),

� GO DIRECTLY TO CHAPTER 5

AND 6if you want to edit the page and its

content.



• Move a page


To move a page, click on the icon of the page you want to move

and drag it to where you want to place it.

This menu appears

• Copy / Paste a page

To copy a page, click on the icon of the page you want to copy and choose the icon « COPY » (Coller) from the CONTEXT MENU

that appears. (See previous page)

To paste the page, click again on the icon where you want to paste the copied page and select « PASTE » (Coller) or « PASTE

AFTER » (Coller après) as you prefer.

The procedure is the same for the action of cutting and pasting.

• Delete a page

To delete a page, click on the icon of the page you want to delete and choose « DELETE » (Supprimer) from the CONTEXT MENU

that appears.

Move the Page IN

Move the Page AFTER

Copy the Page IN

Copy the Page AFTER

*

*



5. Edit a page

Step 1 : Click on the title page, for example « The Board welcomes you ».

The following screen appears on the right:

Access to the CONTEXT

MENU (functions)

Edit the page properties

View the page

These icons act on the

WHOLE page.

REMEMBER

THE ICONS



HIDE THE PAGE (Cacher la page): Makes visible or not a page in the FRONT OFFICE, despite its

presence in BACK OFFICE

PAGE TITLE (Titre de la page): the title included in the site menu, in the BREADCRUMB

TRAIL in the URL of the page and the title of the page (text in the top bar of the

browser)

NAVIGATION TITLE (Titre de navigation): Title takes over in the title: the menu, the

breadcrumb trail and the url

Takes over only the url of the page

KEYWORDS (Mots-clés): you can fill in the keywords of the page. This

information is useful for a good SEO.

Step 2. Click on the icon to edit the properties of the page


DESCRIPTION: you can fill in the summary, description of the page. This

information is useful for a good SEO.

5. Edit a page


6. Edit content

Step 1. Click on the name of the page you want to edit

Step 2. The blocks of content of your page will appear on the right side

• Create, move, copy, remove a page



6. Edit content

The various blocks of content are present,

one above the other.

Create a new block of content

Edit the content of the block (and access content)

Copy the content block

Insert content

Cut a content block and paste it to another location

Delete the content block

REMEMBER THE ICONS

Step 3. Click on the icon

to edit the block



Different tabs allow access to all information of the edited block.

It is possible to choose the type of content (text, text and image ...),

to specify whether the content should be visible or not and to

assign a header (not visible in the FRONT OFFICE, but useful for

managing the BACK OFFICE).

You can choose between:

TITLE (Titre) = to change the title of the

block (it will not be shown in the FRONT

OFFICE)

TEXT (Texte) = to change, add or edit text

TEXT (Texte & Image) = to change, add,

edit text and an image

IMAGE = To insert an image

TABLE (Tableau) = to insert a table

MULTIMEDIA = this option is not active

INSERT A PLUGIN (Insérer un plugin) = this

option is not active

FLEXIBLE CONTENT (Contenu flexible) =

see CHAPTER 7


6. Edit content


Click on TEXT (Texte)

6. Edit content


If you choose TEXT (Texte)

I AM IN THE WEB/PAGE MODE• Add text


This editor works as the main processing software Microsoft Word or Open Office.

6. Edit content


6. Edit content

Once the content block is edited (with the help of the icon)

the top part of the administration interface changes.

You will see:

Save changes

Save changes and display the current page

Save changes and close the page

Close the page

Delete the page

Undo / redo the last change

Step 4. Don’t forget to save your work!


The result will be :

Your text

6. Edit content

Step 5. Save changes and

display the current page


6. Edit content

• Insert a hyperlink in my text

To insert a hyperlink on one or more words, select the words you want to link and

click on the button

You will see the window:

To create a link to another page of the site, click on the desired

page in the tree, the link is made automatically.

To create a link to a file (ex. an image, a PDF file), click on MEDIA

then select the file in the tree

To link to an external URL, click on « URL EXTERNE » (external

URL ) and then inform the site address.

To create a link "mailto", enabling one click to send an email to

an email address, simply click on EMAIL and fill in the email

address.


If you decide to create a block of text with an image

Fill in your text (see previous slides)

Click on MEDIA

Choose your image

and its position on the

page

(for more details on

the images see

CHAPTER 7)

6. Edit content

• Add text and image



The result will be:

Your text with one image

6. Edit content


7. Media (images and photos)

In the previous pages, you learnt how to insert a picture with your text.

As you can imagine, you need to upload the pictures in your website.

The Media module allows you to upload files from your computer to the

server.

Once the files are uploaded, they will be available to be included in your

pages.



Click on the icon

to add a block of content

• Include an image





In FLEXIBLE CONTENT

(contenu flexible),

choose an image


Click on the icon

to upload the file


You are in FLEXIBLE

CONTENT (menu

flexible)


A new window will appear:

You will find the images

you have ALREADY

uploaded

To upload a new image click

on « UPLOAD »



Browse your computer and upload the

image(s)

Once the images are uploaded,

click on the one you want to insert in your

page


To upload a new image click

on « UPLOAD »


The name of your file will

appear here

You can fill in an alternative text

for the image

Fill in the title

Fill in the description

Choose the position of your

image:

- Left and text below

- Right and text below

- Centre and text below

- Left with the text on the right

Size of the image:

- Small

- Medium

- Big

SAVE

SAVE and check the changes

SAVE and close the page




The result will be:

Your text with one image

IN A BOX


II. SPECIFIC FEATURES


8. Related Links

We call this box: « RELATED LINKS » (Liens relatifs) in the BACK OFFICE.

Related Links are used to add this kind of information box in the page

situated in the FRONT OFFICE.

The box may contain text, bullet point lists and links.

While editing content (text with an image) you noticed this tab. SEE CHAPTER 6I AM IN THE WEB/PAGE MODE


8. Related Links

Related links are managed in the

« RELATED LINKS » (Liens relatifs)

tab in each page.

�If you want to insert a

hyperlink in this box, SEE

CHAPTER 6 p.23


WARNING: To view and align the RELATED LINKS (Liens relatifs) box on the page

IN THE FRONT OFFICE, you must enter the following code # # # LREL # # #

IN THE BACK OFFICE next to the corresponding paragraph.

8. Related Links


9. Home Page

The contents of the box "News" are automatically

pushed up from the database called DATABASE

NEWS (see CHAPTER 10).


10. Manage the news (database)

News are managed in the folder "News" and visible in

mode « List » (on the left of your interface click on ‘list’)

Click on the icon



To add a new item for the news, click on the button

Note: After adding a new item, we recommend you to empty the cache to see the new item in the

FRONT OFFICE by clicking on

I AM IN THE WEB/LIST MODE


Fill in the title

Fill in the date and the hour

Fill in the text of the News


Click on GENERAL


Insert an image

By ticking the box, the image will

be placed in the right side

If you want to add

a PDF document, browse

and follow the instructions

as in CHAPTER 6

WARNING: Always ensure that you have saved your work

before you close the page


Click on RELATIONS


11. Alternative languages

To translate the contents of a page, get to the page you want to translate and click on the

flag (in List mode)

Then, fill in the content with the translated text and save.

Note: This is not an automatic translator: you have to insert

the right translation of the text in the alternative languages

yourself.



12. Photo gallery

Your photo gallery is at the bottom of your home page (FRONT OFFICE)


12. Photo gallery

The slideshow of photos in the photo gallery is managed in « IMAGES GALLERY » and is visible in LIST

MODE

To Add and upload the image the procedure is the same for any other image (see CHAPTER 7 - Media)



To create an alternative language for the the Photo Gallery, click on the Alternative Page Language button « Create new record » for every

new photo.

12. Photo gallery


To hide the photo in the FRONT OFFICE

To set an alternative language of the photo gallery

To fill the title of the Photo Gallery

To fill the subtitle

Ticking and adding a navigation title will make it take over the

title in the menu, the BREADCRUMB TRAIL and the url

You can fill in the summary, a description and keywords of the

page. This information is useful for a good SEO.

12. Photo gallery


To add images to the Photo Gallery, click in the « smooth image gallery » on the button "Create new record"

To translate an image, click on the flag located on the right of the page

12. Photo gallery


Photos of the background of the homepage are managed in the database "Background Image"

and visible in List mode.

To add images, simply click on "Create new record"

13. Background images



To hide the photo: it will not be visible in the FRONT

OFFICE.

Fill the Label (it does not appear in the FRONT OFFICE

but this might help you)

Integrate the image

13. Background images


14. Management of insertions (encart)

These boxes are called INSERTIONS

(Encarts)


14. Management of insertions (encart)

To integrate the insertions in your pages, you can use « create a reference ».

The insertion can thus be reused on different pages. If there is no icon, simply click on the text to edit it.

Note: This method is better than a simple copy and paste since with « create a reference » the subsequent

change in the insertion is applied on every page.

Insertions on the left side in the

FRONT OFFICE

Insertions on the right

side in the FRONT OFFICE



Back office = A back office is a part of most websites where tasks dedicated to running the website itself take place.

Breadcrumb trail = Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track

of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the

popular fairytale.

Context menu (functions) = A context menu (also called contextual, shortcut, and popup or pop-up menu) is a menu in a graphical

user interface (GUI) that appears upon user interaction, such as a right mouse click or middle click mouse operation. A context

menu offers a limited set of choices that are available in the current state, or context, of the operating system or application.

Usually the available choices are actions related to the selected object.

Flexible content = content element which allows an editor to fill its page with different content elements

Front office = Term that refers to what your members will see on their screens when they visit your website

SEO = Search engine optimization = the process of improving ranking in search engine results

15. Glossary

USER GUIDELINES ICOM MINIWEBSITESnetwork.icom.museum/fileadmin/user_upload/mini... · 1. Preview of...

Documents

Transcript of USER GUIDELINES ICOM MINIWEBSITESnetwork.icom.museum/fileadmin/user_upload/mini... · 1. Preview of...