1. + Website Training AwBA Lenneke Knoop MetaMeta Communications November 2015

2. + Development of AwBA website 1. Functional design (thinking process, structure of the site) 2. Technical development 3. Fill the site and keep it up to date

3. + Content Management System A program that allows you to modify websites through a simple interface No HTML language required

4. + Wordpress Open source Wide experience & many online sources and tutorials With Wordpress you can: Add news items Add pages Pictures Menu items

5. + Back versus Front www.awba.gov.et/wp-admin Back end Front end www.awba.gov.et Wordpress, only accessible by website team through login Website is visible to everybody

6. + See for yourself What items do we see on the homepage of www.awba.gov.et? www.awba.gov.et

7. + AwBA homepage sections Main navigation Header Page: event Page: highlights Video widget Page: sidebar -left Posts

8. + Logging in For training purposes we use www.studiomaestro.nl/awba/wp-admin www.studiomaestro.nl/awba/wp-admin To make changes to the actual site, we login in at www.awba.gov.et/wp-admin www.awba.gov.et/wp-admin You can use the same username and password for both username: your first name password: awashbasin2015

9. + 3 things to keep in mind 1. On the AwBA site we work with “pages” everywhere except on the homepage under the video. There we use “posts”. 2. Always save your changes through the “update” button 3. Don’t get distracted by all the options in Wordpress we are not using…

10. + Wordpress dashboard

11. + Exercise: add text to the training pages Search the training page under Awba & You Make sure the selected tab is “visual” Add a few lines and save the changes Check online if you see the changes made Tip: if you add text from another document always copy it “clean” with a program like notepad. If you use Word to copy and past text it will add additional layout characteristics. Layout should be done in Wordpress.

12. + Exercise: add hyperlinks Select the text in the article you want to hyperlink Click the link logo (See red circle in picture below)

13. + Exercise: add hyperlinks (2) Enter all data in the pop-up screen as shown below. Make sure you tick the box “open link in a new window” if you are linking to external pages.

14. + Exercise: insert a picture Make sure the cursor is at the place you want to insert the picture Press the button “Add Media”. The next screen will show: Press “Select file”. Choose the correct file from your computer and press “Open”. The file starts uploading. After uploading is finished, choose “Insert into post”.

15. + Exercise: insert a picture (2) When inserted, the original name of the document will show. When you need to adjust the name of the link, put your cursor in the middle of the link. Then start typing. After that you can remove the text before and after the name of the link. When you remove the name of the document before you have entered the new name, the link will disappear. When you want the document to open in another tab, put your cursor in the middle of the link, press the “chain button” in the grey bar right above the text box and mark the box “Open the link in a new window/tab”.

16. + Tips on pictures Upload only pictures of small size (reduce the size otherwise) Do not stretch pictures Use a caption Pictures with people draw more attention When used from internet, make sure you give proper credits Great free program to make a collage and to reduce size: http://www.fotor.com http://www.fotor.com

17. + Exercise: add video from external website Find the embed code from the video you want to put on the AwBA site In Wordpress, switch to “text” mode (see picture) Paste the embed code at the right place and adjust the sizes of your frame if necessary (don’t forget to keep the same ratio)

18. + Add a new page Click “Add new page” under pages There are 2 types of pages to chose from: i) default template which shows the highlights and events items on the right side of the page (e.g. the homepage); and ii) CONTENT PAGE which you use for all other pages where you do not want to show the events and highlights. Add the title and content Make sure the new page is placed at the right location by choosing the corresponding parent item (In this case “services”). (See red circle in picture below) Save your article by clicking the “publish” button on the right side. If you don’t want to have it online yet, choose the option “save draft”.

19. + Add a new page (2)

20. + Make the page visible on the site Click on appearance > menus Tick the page on the left side that you would like to add to the menu (make sure you select the tab “view all”) Click the “Add to Menu” button (see picture) The page is now added to the menu structure on the right part of the site. Drag the page (which is by default placed at the bottom) to the correct place and save the changes by clicking the “save menu” button at the bottom right of the page.

21. + Directorates Basin planning monitoring and evaluation Basin information management and research Water administration Watershed management and river training Branch office Upper Awash Middle Awash Lower Awash Supporting office Public relation and Communication General service Ethics and anti corruption Gender and HIV AIDS Finance

22. + Don’t forget to save save save!!

23. + Change video & footer

24. + Add news article Make a new post (warning: this is not a page!) Put it under the category “news” It will automatically be displayed under the news section

25. + Training day 3 Repetition of what we did so far? Exercises: add new page and menu Discussion: what should be on the site and where Lunch Picture gallery Facebook discussion and practicing Discussion: what would you like to focus on tomorrow?

26. + Training day 3 Repetition of what we did so far? Add an article Include image Include hyperlink Embed a video from YouTube Make new menu items Put the pages in the menu Change the homepage video Change highlights / events on the homepage

27. + Exercise this morning Add a new page under “research idea” (Use your imagination) Include a title and two paragraphs. Use some layout functionalities. (bold, centered text, bullets) Search a video on YouTube that is related to research and water Embed that video between two paragraphs Make sure the page is added to the menu

28. + Additional exercises Change the event post on the homepage to a new event On the Awash YouTube channel like relevant videos from other organizations On the Awash fanpage, add information and change the cover picture

29. + Discussion questions & team exercise Are all menu items in the right place? (why / why not) Is it possible to combine menu items? For example, why are “maps” not under “resources” What should go under “services”? Why is directorates a separate menu and why not under “about AwBA”? For this moment, how should the page look like… Write on flip chart

30. + Facebook Difference personal page versus fanpage What should be on it? How often do you update? Be active: like other organization pages and share relevant or interesting news from others Make sure all basic information is there

31. + Picture gallery: discussion How to organize? What pictures do we place? Meetings & events Field visits Trainings Irrigation practices Flood protection Watershed management Laboratory experiments

32. + Picture gallery: add pictures Go to gallery > add gallery / images In the next screen select the correct gallery (awba) and click the “add Files” button, which allows you to add images from your computer. Once you selected the correct picture, click the “start upload” button.

33. + Picture gallery: add pictures (2) Once the picture is uploaded go to: Gallery > Manage Galleries In the next screen select the correct gallery Add titles and captions by changing the names at the places as indicated in the picture below

34. + Last day: our goal To be familiar with Wordpress, to know how we can update the AwBA website with news, menu items, pages, pictures and videos. To be able to update the AwBA Facebook fanpage with pictures and posts. To feel confident

35. + Training day 4 Repetition of what we did so far / questions? How to add a main menu item (question from Getu) Exercise: add a new page with a picture and a pdf file and place it under documents. (Find out through the manual how to do this) Picture gallery: add a picture to one of the galleries with a short description (Reduce file sizes using Microsoft Picture Manager) Discuss shortly and change event on the homepage

36. + Training day 4 Create a facebook profile for Getu Add info to the facebook fanpage on the left side Together: delete all unnecessary items from the website… Share copies of presentation and manual on flash drives