Platform Tutorial This document provides HydroEurope participants with the basic procedures to use the platform and to update the different pages of the website with text and documents. How to start as registered user?... 2 How to edit a content?... 4 How to upload a document (file)?... 8 How to publish an image (jpg or gif format)?... 13 Tips... 15 Version 2007/2008 HydroEurope - Ph.Gourbesville, W. Berolo 1
How to start as registered user? 1 Enter the HydroEurope address: www.hydroeurope.org 2 Click on Login link (on the right) HydroEurope - Ph.Gourbesville, W. Berolo 2
3 A new window appears and you have to enter your individual username and your login (provided by the Webmaster in a previous mail). 4 When you are logged, new tabs Live, Preview, Compare and Edit appear on the top on the window. The Live window is the published status of the page as seen by guests / users; The Edit window allows you to update the contents of the page (which is associated to a pid number as a unique identifier) and to upload documents / files; The Compare window presents the differences between the previous version of the page and the updated version in the Edit window; The Preview window provides an overview for the updated page before to be published live. HydroEurope - Ph.Gourbesville, W. Berolo 3
How to edit a content? 5 Click the Edit tab when you are on the page you would like to update. For example, the TEAM 1 presentation. 6 You have now on the screen several folder icons which indicate where you can edit the content of the different containers included on the page. HydroEurope - Ph.Gourbesville, W. Berolo 4
7 You can update the content of the different containers on the page. Click on Add text in the first container below TEAM 1. A new window appears. 8 The new window allows to give a Title to the container, to update the Content and to insert Images into the page. By default, all the components are empty. 9 To set the title of the container to "Team 1 presentation", enter the words into the window and validate the box "Apply to all languages" to be sure the input will be visible in all the different versions of the website. HydroEurope - Ph.Gourbesville, W. Berolo 5
10 Click the Content icon to access the Editor. When the Editor is loaded, you can enter your text without any specific format in order to apply the predefined template of the page. Of course, you can use the different tools to create bullet points, use italic or bold characters You can copy and paste some text from MS Word. However, if you do so, you have to clean your text when pasted with the Word clean tool (last one on the right) to be sure to have a clean format, compliant with the template. Remember to validate the box "Apply to all languages" to be sure that the content will be visible in all the different versions of the website. To validate the input, click on OK. 11 The container is now updated and the text is presented according to the existing template of the HydroEurope website. HydroEurope - Ph.Gourbesville, W. Berolo 6
12 The new version of the page can be checked by clicking the Preview tab. 13 To validate and publish the updated page, click on the Workflow link. 14 Validate the updated page by ticking the 2 boxes and click on OK. The page is now online. HydroEurope - Ph.Gourbesville, W. Berolo 7
How to upload a document (file)? The HydroEurope platform allows you to upload documents into specific containers on pages as your progress or daily reports. The procedure can be done in 2 different ways according to the situation of your page: - an uploading container must be created - an uploading container exists already on your page. The following procedure describes first how to add an uploading container and secondly how to upload a document. 15 Select the page where you want to upload a file and select the Edit mode. For example, the page dedicated to Daily Report for the TEAM 1. 16 Select the second main container with Add a portlet and click on the link. HydroEurope - Ph.Gourbesville, W. Berolo 8
17 In the new window, the title must be defined (mandatory) as "Daily reports". For Content, validate "Files" to create the upload function. The following lines allow to format the upload zone. Choose "Colored background" and "Colored border" in order to keep the template of HydroEurope. Remember to validate the box "Apply to all languages" to be sure that the input will be visible in all the different versions of the website. To validate the input, click on OK. 18 The new container is created and is associated to a new function "Upload a new file". HydroEurope - Ph.Gourbesville, W. Berolo 9
19 Click now on the function "Upload a new file" and select "+Add". A new window opens. 20 You are now in your personal space on the server. You can upload your documents (any file) there and organize them in different directories. The files contained in the different directories can be published as link in different pages or just stored in this personal space. To add a new file, click on "Private" to access to your secure directory. 21 You are now in your personal directory called "Private". "Current directory" provides the details and the path to the active directory which is always structured as: root/users/yourusername/private. The list provides the details about the different directories which have been already created in your private directory and the list of available files. HydroEurope - Ph.Gourbesville, W. Berolo 10
22 To upload a new file in your list or in any other directory located in your private folder, click on "[Operation]" and select "Upload New File". A new window will appear. 23 Enter the path to the file to be uploaded or click Browse to navigate in your local disk or any connected devices. Select the file to be uploaded and click OK. Avoid special characters for your file name, they can prevent the file from being accessible when published. HydroEurope - Ph.Gourbesville, W. Berolo 11
24 The new file appears now in your list, in your Private directory and is defined as a "Selected file". Tick ALL Groupname boxes for granting all groups read access on the file the list may contain groupnames of HydroEurope previous editions. Then press the Apply button. If cancelling the process just now (by pressing the Cancel button at the top of the window), the file is uploaded on the Server but not added on the page. To upload the file on the page, be sure it is still selected (displayed in bold characters), then remember to validate the "Apply to all languages" box and click OK. 25 The document is now visible in the container, on the page. 26 The document can be validated and published according to the procedure defined from Steps 12 to 14. Note that when a document is published, the platform sets up a link to the file that can be viewed and used as a hyperlink. For example, the "data_explain.pdf" file located in the Data section. HydroEurope - Ph.Gourbesville, W. Berolo 12
How to publish an image (jpg or gif format)? 27 To publish a graphical document as a JPG or GIF file, the procedure follows the principle previously defined for uploading and publishing a document. Upload the JPG or GIF file in your private directory by following Steps 18 to 23. Go on with Step 24 by pressing the Apply button for granting all groups read access on the file. Then click on Cancel at the top of the window. The image is stored in your private directory. 28 Click on "+Add text" in the container you would like to modify. For example, the first container in the Daily Report page of the TEAM 1. 29 A new window appears. Select "Content" and wait for the HtmlEditor. You can introduce your image as a component in your editing window. Select the Image icon in the HtmlEditor. 30 A new window opens for inserting the image into the editing area. HydroEurope - Ph.Gourbesville, W. Berolo 13
31 To select the image to be inserted, the path must be entered in the Image URL section. For example, the varriver.gif file is selected from the private directory. The path is the following: http://www.hydroeurope.org/jahia/webdav/site/hydroeurope/users/yourusername/private/varriver.gif The same structure for the path is used for any image stored in the Private directory. By clicking on Preview, the image can be checked in the visualization part of the window. 32 Click OK and the image is displayed in the editing area of the HtmlEditor. 33 The image can be modified and organized with text in the area. Enter the text of the container and organize the different elements. Remember to validate the "Apply to all languages" box, to be sure that the input will be visible in all the different versions of the website. Click OK. The image is now visible in the container in the Editing window. 34 The document can be validated and published according to the procedure described from Steps 12 to 14. HydroEurope - Ph.Gourbesville, W. Berolo 14
Tips Tip 1 OPERATIONS ICONS... 16 Tip 2 INSERT A LINK... 19 Tip 3 INSERT A TABLE... 21 Tip 4 MAIL NOTIFICATIONS... 23 HydroEurope - Ph.Gourbesville, W. Berolo 15
Tip 1 OPERATIONS ICONS The Operations icons available on the editing page enable to manage containers (text and portlet), titles and pages, i.e. to update, sort, delete. Before validating an operation, remember to tick the "Apply to all languages" box or "Share this title with other languages" box. For example, sorting portlets on the page: HydroEurope - Ph.Gourbesville, W. Berolo 16
Update the portlet properties or delete it: HydroEurope - Ph.Gourbesville, W. Berolo 17
Sorting files in the portlet: Update a file or delete it: Update the title of the page: Update the page properties (or delete it): Note that the Add icon opens an Add container window straight. HydroEurope - Ph.Gourbesville, W. Berolo 18
Tip 2 INSERT A LINK To insert a link into the content, select the text and click the Web Link icon. In the URL section, enter the page address you want to reach with its pid number. Note that the Target can be set as None or as New window (the latter for external websites for instance). HydroEurope - Ph.Gourbesville, W. Berolo 19
To create a link for an image loaded in the content, while selecting the picture, the Web Link icon may not be available. In that case, type a space after the image and select all. Then click the Web Link icon. The Insert Link window will open. HydroEurope - Ph.Gourbesville, W. Berolo 20
Tip 3 INSERT A TABLE In the HtmlArea Editor, you can insert a table by clicking the Insert Table icon. Choose its properties rows, columns, border thickness (could be 0). When the table appears in the HtmlArea, click into one of its cells and the table toolbar becomes available. Complete/modify the table. In the same way, you can modify its properties by pressing the Toogle HTML Source button that enables to be in TEXT MODE. For example you could change the width of the columns, or the width of the table with regard to the page. Note that TEXT MODE can be used for any content you enter in the editing area. HydroEurope - Ph.Gourbesville, W. Berolo 21
HydroEurope - Ph.Gourbesville, W. Berolo 22
Tip 4 MAIL NOTIFICATIONS The e-mail address entered in your Settings is used for notification mails. The Workflow Mail notification gives: Modifications performed by user xx State of the page for approval or published Link to the page Comment (if any) The User properties are: User with Read Right => receives no workflow mail notification User with Write Right => receives Approved and published mail notification User with Administration Right => receives Waiting for approval mail notification and Approved and published mail notification Note that you can control the workflow for several pages at once. For this purpose, select the parent page of all the pages you want to publish. The Pages ready for publishing list will display the parent page and all its subpages. You can validate all ready pages. This avoids receiving several notification mails, but only one listing all the pages modified. HydroEurope - Ph.Gourbesville, W. Berolo 23