E-Learning System Design: Teacher-Student Websites

577 views
518 views

Published on

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
577
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

E-Learning System Design: Teacher-Student Websites

  1. 1. UOZ – Computer Science E-learning System Design Workshop E-learning System Design Workshop Teacher-Student Websites 2013.09.16-17 1Karwan Jacksi Karwan Jacksi – Ari Shawkat – Khalid Bady Computer Science Department Faculty of Science University of Zakho
  2. 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-17Karwan Jacksi 2
  3. 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-17Karwan Jacksi 3
  4. 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-17Karwan Jacksi 4
  5. 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-17Karwan Jacksi 5
  6. 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-17Karwan Jacksi 6
  7. 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-17Karwan Jacksi 7
  8. 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-17Karwan Jacksi 8
  9. 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-17Karwan Jacksi 9
  10. 10. UOZ – Computer Science E-learning System Design Workshop Online Website Builders • There are many browser based Website Software: 2013.09.16-17Karwan Jacksi 10
  11. 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-17Karwan Jacksi 11
  12. 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-17Karwan Jacksi 12
  13. 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-17Karwan Jacksi 13
  14. 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-17Karwan Jacksi 14
  15. 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-17Karwan Jacksi 15
  16. 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-17Karwan Jacksi 16
  17. 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-17Karwan Jacksi 17
  18. 18. UOZ – Computer Science E-learning System Design Workshop Google Account 2013.09.16-17Karwan Jacksi 18
  19. 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-17Karwan Jacksi 19
  20. 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-17Karwan Jacksi 20
  21. 21. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 21 Creating a new site Your Created Sites
  22. 22. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 22 Templates Site Name Site Address Should be unique
  23. 23. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 23 Selecting a Theme Then Create
  24. 24. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 24 Here is the site  Editing Tools
  25. 25. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 25 Tool Bar
  26. 26. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 26 Inserting a New Page
  27. 27. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 27 Name the Page Page Type Let it be Web Page
  28. 28. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 28 Where to put this page? Then Create the page
  29. 29. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 29 Here you can write what you want.. Then save the page
  30. 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-17Karwan Jacksi 30
  31. 31. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 31 Inserting a New Page
  32. 32. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 32 Name the Page Page Type Let it be File Cabinet Page Placement
  33. 33. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 33 Where to put this page? Then Create the page
  34. 34. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 34 Page Type
  35. 35. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 35 Adding Files from Your Computer
  36. 36. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 36 The files have been added
  37. 37. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 37 More Options Editing Site Layout
  38. 38. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 38 Add/Remove Sidebars and Horizontal Navigations
  39. 39. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 39 Horizontal Navigation is added
  40. 40. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 40 Adding more Tabs to the Horizontal Navigation
  41. 41. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 41 Horizontal Navigation is added
  42. 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-17Karwan Jacksi 42
  43. 43. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 43 Name the Page Page Type Let it be Announcement
  44. 44. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 44 To insert a new post (News) click here
  45. 45. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 45 Write your post (News) and then save the page to get posted
  46. 46. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan 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. 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-17Karwan Jacksi 47
  48. 48. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 48 Name the Page Page Type Let it be List
  49. 49. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 49 Here you either choose one of the templates or start by creating your own list
  50. 50. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 50 Name the columns and change their types Add new columns
  51. 51. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 51 Add items to the list
  52. 52. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 52 The item has been added to the list
  53. 53. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 53 Let’s improve our Home Page by editing it
  54. 54. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 54 Editing tools
  55. 55. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 55 Lots of options
  56. 56. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 56 Let’s select Recent Posts from menu
  57. 57. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 57 We get News from the Home Page
  58. 58. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 58
  59. 59. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 59 • Paragraph Format Settings:
  60. 60. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 60 • Dealing with tables:
  61. 61. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 61 • Changing the layout of the page:
  62. 62. UOZ – Computer Science E-learning System Design Workshop Hands-on Google Sites 2013.09.16-17Karwan Jacksi 62 • Integrating Google Apps – Calendar – YouTube – Photos – Drive • Spreadsheets • Presentation • Etc… – Maps – Charts – Etc…
  63. 63. UOZ – Computer Science E-learning System Design Workshop Feedback 2013.09.16-17Karwan Jacksi 63 • Your feedback please! • Go to www.KarwanJacksi.tk • Click on take the poll/survey.
  64. 64. UOZ – Computer Science E-learning System Design Workshop THE END Your Questions! 2013.09.16-17Karwan Jacksi 64

×