+ website training awba lenneke knoop metameta communications november 2015
TRANSCRIPT
+
Website Training AwBALenneke KnoopMetaMeta CommunicationsNovember 2015
+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
+Content Management System
A program that allows you to modify websites through a simple interface
No HTML language required
+Wordpress
Open source
Wide experience & many online sources and tutorials
With Wordpress you can: Add news items Add pages Pictures Menu items
+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
+AwBA homepage sections
Main navigation
Header
Page: event
Page: highlights
Video widget
Page: sidebar-left
Posts
+Logging in
For training purposes we use www.studiomaestro.nl/awba/wp-admin
To make changes to the actual site, we login in at www.awba.gov.et/wp-admin
You can use the same username and password for both
username: your first namepassword: awashbasin2015
+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…
+Wordpress dashboard
+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.
+Exercise: add hyperlinks
Select the text in the article you want to hyperlink
Click the link logo (See red circle in picture below)
+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.
+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”.
+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”.
+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
+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)
+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”.
+Add a new page (2)
+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.
+
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
+
Don’t forget to save save save!!
+Change video & footer
+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
+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?
+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
+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
+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
+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
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
+Picture gallery: discussion
How to organize?
What pictures do we place? Meetings & events Field visits Trainings Irrigation practices Flood protection Watershed management Laboratory experiments
+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.
+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
+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
+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
+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