1. UOZ – Computer Science E-learning System Design Workshop
E-learning System Design Workshop
Teacher-Student Websites
2013.09.16-17 1
Karwan Jacksi
Karwan Jacksi – Ari Shawkat – Khalid Bady
Computer Science Department
Faculty of Science
University of Zakho

2. UOZ – Computer Science E-learning System Design Workshop
Agenda
• Live Demo
• Principles of Website Design
• Online Website Builders
• Google Sites
• Google Accounts
• Hands-On
2013.09.16-17
Karwan Jacksi 2

3. UOZ – Computer Science E-learning System Design Workshop
Live Demo
• Before we start constructing our websites, we start by
checking the website of our university:
www.uoz-krg.org
• And a course website:
cs.uoz-krg.org/alc1
2013.09.16-17
Karwan Jacksi 3

4. UOZ – Computer Science E-learning System Design Workshop
Agenda
• Live Demo
• Principles of Website Design
• Online Website Builders
• Google Sites
• Google Accounts
• Hands-On
2013.09.16-17
Karwan Jacksi 4

5. UOZ – Computer Science E-learning System Design Workshop
Principles of Website Design
• Step 1: Planning
– Who is your audience?
• Students?
• Professors?
• Wide Audience?
• Etc…
– What is the content?
• Text only?
• Pictures?
• Music?
• Etc…
2013.09.16-17
Karwan Jacksi 5

6. UOZ – Computer Science E-learning System Design Workshop
Principles of Website Design
• Step 1: Planning
– What is the depth of your website?
• Ex: One course
• Multiple courses
– Goals?
• Ex: The purpose of my website is to provide information to
my students about the courses they are taking with me.
2013.09.16-17
Karwan Jacksi 6

7. UOZ – Computer Science E-learning System Design Workshop
Principles of Website Design
• Step 2: Design
– Always do:
• Put the most important information at the TOP of the page.
• Less important information belongs lower down on the page
• Present information in short paragraphs
• Type and size of used fonts should be easy to read
– Background vs. Text
• Do not use graphical backgrounds that make it difficult to
read the text
• Do not use garish colors for your background (neon green,
magenta, etc.)
• In general, use a light background with dark text – it will be
easier to read
2013.09.16-17
Karwan Jacksi 7

8. UOZ – Computer Science E-learning System Design Workshop
Principles of Website Design
• Step 2: Design
– Navigation:
• Titles, headings and subheadings should be meaningful out
of context
• Buttons, targets and links should allow a reader to navigate
easily through the site
• Menus allow a reader to choose where to move
– Graphics:
• Do not use too much animation on a page – one is MORE
than enough
• File size should be as small as possible to make
downloading quick
– Consistency:
• Background, graphic elements should be consistent so the
entire site has the same “look and feel”
2013.09.16-17
Karwan Jacksi 8

9. UOZ – Computer Science E-learning System Design Workshop
Agenda
• Live Demo
• Principles of Website Design
• Online Website Builders
• Google Sites
• Google Accounts
• Hands-On
2013.09.16-17
Karwan Jacksi 9

10. UOZ – Computer Science E-learning System Design Workshop
Online Website Builders
• There are many browser based Website Software:
2013.09.16-17
Karwan Jacksi 10

11. UOZ – Computer Science E-learning System Design Workshop
Online Website Builders
• The one that we take will be Google Sites
sites.google.com
2013.09.16-17
Karwan Jacksi 11

12. UOZ – Computer Science E-learning System Design Workshop
Agenda
• Live Demo
• Principles of Website Design
• Online Website Builders
• Google Sites
• Google Accounts
• Hands-On
2013.09.16-17
Karwan Jacksi 12

13. UOZ – Computer Science E-learning System Design Workshop
Google Sites
• Is a free online webhost and website editing software.
• It allows users to create and edit websites online in a
quick, easy and efficient way.
• It also allows users to embed multimedia files such
as .swf, .mov, .pdf… etc.
sites.google.com
2013.09.16-17
Karwan Jacksi 13

14. UOZ – Computer Science E-learning System Design Workshop
Google Sites
• Benefits of Google Sites:
– Free
– No HTML required - no markup language for you to learn!
– Easy learning curve
– Editing available in the cloud (online)
– Choice of templates
– Easy integration -Add file attachments and information
from other Google applications (like Google Docs, Google
Calendar, YouTube, etc).
– Control who has access, whether it's just yourself, your
office, or your whole organization.
– Revision history
2013.09.16-17
Karwan Jacksi 14

15. UOZ – Computer Science E-learning System Design Workshop
Agenda
• Live Demo
• Principles of Website Design
• Online Website Builders
• Google Sites
• Google Accounts
• Hands-On
2013.09.16-17
Karwan Jacksi 15

16. UOZ – Computer Science E-learning System Design Workshop
Google Account
• Getting started with Google Sites:
– To create a Google Site, you need to have a Google
account (Google ID).
– If you don’t have a Google Account yet, you need to create
one
– Let’s create a Google Account at www.google.com or just
go to sites.google.com
2013.09.16-17
Karwan Jacksi 16

17. UOZ – Computer Science E-learning System Design Workshop
Google Account
• Creating a Google Account
– Click on SIGN IN if you are at www.google.com then SIGN
UP, or
– just SIGN UP if you are at sites.google.com
2013.09.16-17
Karwan Jacksi 17

18. UOZ – Computer Science E-learning System Design Workshop
Google Account
2013.09.16-17
Karwan Jacksi 18

19. UOZ – Computer Science E-learning System Design Workshop
Agenda
• Live Demo
• Principles of Website Design
• Online Website Builders
• Google Sites
• Google Accounts
• Hands-On
2013.09.16-17
Karwan Jacksi 19

20. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
• After we’ve created Google Account, now we can create
out websites by using the Google Account and Google
Sites.
• Go to sites.google.com
• Sign in with your Google Account.
2013.09.16-17
Karwan Jacksi 20

21. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 21
Creating a new site
Your Created Sites

22. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 22
Templates
Site Name
Site Address
Should be unique

23. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 23
Selecting a Theme
Then Create

24. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 24
Here is the site 
Editing Tools

25. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 25
Tool Bar

26. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 26
Inserting a New Page

27. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 27
Name the Page
Page Type
Let it be Web Page

28. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 28
Where to put this
page?
Then Create the page

29. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 29
Here you can write
what you want..
Then save the page

30. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
• What to do if you want to add files (ex: lecture notes) to
the website?
– It is easy!
• Let’s create a new page.
2013.09.16-17
Karwan Jacksi 30

31. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 31
Inserting a New Page

32. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 32
Name the Page
Page Type
Let it be File Cabinet
Page Placement

33. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 33
Where to put this
page?
Then Create the page

34. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 34
Page Type

35. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 35
Adding Files from
Your Computer

36. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 36
The files have
been added

37. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 37
More Options
Editing Site
Layout

38. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 38
Add/Remove Sidebars
and Horizontal
Navigations

39. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 39
Horizontal Navigation is
added

40. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 40
Adding more Tabs to
the Horizontal
Navigation

41. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 41
Horizontal Navigation is
added

42. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
• How about making a news page? (announcements)?
– It is easy as well!
• Let’s create a new page the same way as we did.
• The only different thing is to change the page type.
2013.09.16-17
Karwan Jacksi 42

43. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 43
Name the Page
Page Type
Let it be Announcement

44. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 44
To insert a new post
(News) click here

45. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 45
Write your post (News)
and then save the page
to get posted

46. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 46
You can edit your post
(News) as well by clicking on
edit post. Edit the post and
then save it
Here is the post (News)

47. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
• How to create List pages?
• Let’s create a new page the same way as we did.
• The different thing here is to change the page type to
list.
2013.09.16-17
Karwan Jacksi 47

48. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 48
Name the Page
Page Type
Let it be List

49. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 49
Here you either choose one of
the templates or start by
creating your own list

50. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 50
Name the columns and
change their types
Add new
columns

51. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 51
Add items to the list

52. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 52
The item has been
added to the list

53. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 53
Let’s improve our Home Page by
editing it

54. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 54
Editing tools

55. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 55
Lots of options

56. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 56
Let’s select Recent Posts from menu

57. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 57
We get News from the
Home Page

58. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 58

59. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 59
• Paragraph Format Settings:

60. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 60
• Dealing with tables:

61. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 61
• Changing the layout of
the page:

62. UOZ – Computer Science E-learning System Design Workshop
Hands-on Google Sites
2013.09.16-17
Karwan Jacksi 62
• Integrating Google Apps
– Calendar
– YouTube
– Photos
– Drive
• Spreadsheets
• Presentation
• Etc…
– Maps
– Charts
– Etc…

63. UOZ – Computer Science E-learning System Design Workshop
Feedback
2013.09.16-17
Karwan Jacksi 63
• Your feedback please!
• Go to www.KarwanJacksi.tk
• Click on take the poll/survey.

64. UOZ – Computer Science E-learning System Design Workshop
THE END
Your Questions!
2013.09.16-17
Karwan Jacksi 64