Content Development and Workflow for e-learning Projects

Transcription

1 Content Development and Workflow for e-learning Projects Nadia El-Obaidi, Dr. Nadia Juhnke Freie Universität Berlin

2 Questionnaire for e-learning Projects Didactics Content Target Group Project Management 2

3 Questionnaire for e-learning Projects Didactics What are the learning objectives? Which previous knowledge do you expect? How should the e-learning materials be used? - website/cd-rom for self-study - supported online course (LMS) - blended learning - classroom - online examination What is the didactical concept? - encyclopedia - online textbook - explorative learning 3

4 From Traditional Classroom to Blended Learning Information Information Information Information Web Presence Material Collection Material Collection Material Collection Material Collection Library Library Library Library Library E-Tutor E-Tutor E-Tutor Tutorials Tutorials Tutorials Tutorials Exam Preparation Tutorials Exam Preparation Lectures Lectures Lectures Multi-media material Multi-media material Lectures Lectures Without LMS Blended Learning 1 (Introduction) Blended Learning 2 (Extended) Blended Learning 3 (Optimum) Online Courses Face-to-Face Online 4

5 LMS A Central Learning Platform for Teaching Student Access to the Central LMS Team work Learning Materials Forums Self-tests Exam Chat Evaluation Course Course Course Course Information Community University Library central entry point!!! Course Catalog 5

6 Questionnaire for e-learning Projects Content Which scientific content do you want to implement? How do you want to structure the content? - index, map - navigation - storyboard Which components do you want to include? - hypertext - tests - glossary - search - database - communication (discussion board, chat) 6

7 Examples Sitemap 7

8 Examples Search 8

9 Examples Forum 9

10 Examples Glossary 10

11 Examples Test 11

12 Authoring of e-learning Contents Authoring tools Lectora (Trivantis) - web-content without HTML knowledge - standardized learning modules (SCORM) - templates - multimedia elements (Flash, video, audio, math. formulas) - tests Mediator (Matchware) - animations - interactions Dreamweaver (Macromedia) - HTML-editor - additional tool for updates: Contribute XML-Editors - separation of layout/design and content - structure-oriented authoring 12

13 Authoring of e-learning Contents Authoring Tools: Lectora Template Structure Page 13

14 Questionnaire for e-learning Projects Content (continued) Which media elements do you want to include? - text - images - image maps - video - audio - animation (Flash) - simulation (Flash, Java) Do you have examples/models in mind? Should the material accord to e-learning standards? - SCORM - IMS 14

15 Examples Animation 15

16 Questionnaire for e-learning Projects Target Group Who will be using your e-learning materials? What previous technical knowledge and which environment do you expect? - familar with PC and internet - PC at home/at university - connection bandwith - software - hardware 16

17 Questionnaire for e-learning Projects Project Management What kind of resources are available for your project? - people - money - technical equipment Are these resources sufficient? When should the e-learning materials be ready? Should the e-learning materials be updated regularly? 17

18 Designing Effective e-learning Websites Take 8 Steps 1. Decide the purpose of your e-learning materials (objectives) 2. Specify the content 3. Identify the target group 4. Choose the correct tool or software for developing your e-learning website 5. Create a flowchart 6. Create a storyboard & layout 7. Develop your site 8. Test your site 18

19 Preparation Create a Flowchart Your flowchart (map) will show you the organization and navigation of your planned e-learning website. In order to make a start, you should: 1. make a list of topics and elements you plan to include 2. group them 3. draw a map of how the various parts of the topics and elements will fit together Flowchart Example Home A B C D E A.1 D.1 E.1 A.2 This map will be your guide for setting up the navigation concept for your e-learning website. 19

20 Organization Create the Storyboard & Layout 1. Approach sketching a storyboard for the screens needed 2. Ensure consistency by clustering your elements 3. Create a balance between the various groups of elements which is very important concerning the usability of your materials 4. Provide whitespaces to enhance the visual focus on the content 5. If you wish to create an uniform style which improves the usability of your materials make sure that the different elements reflect that style 20

21 Example Basic Layout Services Search Main Navigation Related Links Content News Credits 21

22 Navigation In your flowchart, you defined the direct links between topics and levels. Now you must decide what kind of access methods you are planning to provide. There are three kinds of users: Newcomers - They need help getting started; they need motivation, e.g. introduction or a guided tour. Advanced users - They need intuitive and consistent navigation, e.g. navigation bars or zones. They need an overview of the topics provided, e.g. sitemaps. They need direct access to crucial pages, e.g. quick jump. Experts - Search function, index pages, 22

23 Example This site provides different levels of access and different navigation methods Next >> 23

24 Text and Fonts Text - A wall of text is very bad for an interactive experience. Intimidating and boring to read. - To draw users into the text and support scan ability, use welldocumented mark-ups, e.g.: heads, subheads, bulleted lists, highlighted keywords and short paragraphs. Fonts - Sans-serif fonts are the basis of your website. Sans-serif fonts are those fonts that have no "serifs": the little hooks on the end of the letters. - Some examples of sans-serif fonts are: Arial, Geneva, Helvetica, Lucida Sans, Verdana - Verdana is a font family that was actually invented for use in the WorldWideWeb. 24

25 Pictures and Graphics Pictures and Graphics are Important Information Elements There are only two (or three) image formats for the web, but each is built for a specific purpose. JPEG This format is for images with millions of colors that have a more photo realistic look. You should use the jpeg format for photographs, and other images that have a lot of colors. GIF This format is for images with a small, set number of colors. GIF images use an index of colors for the image, colors that are not used in the image don't need to be included in the index. This format is good for graphics with limited colors. Resize Web Images Web images take up the majority of the download time in most web pages. But if you optimize your web images you will have a faster loading website. 25

26 Examples Graphicdesign 26

27 Application of Multimedia Elements Animations & Sound Animation - Animations should be navigable - If there is an intro, one should be able to skip it - Animations should follow a consistent design Sound - Sound should be navigable - Sound should support content - Sound should not compete against content - Narrators should be professionals 27

28 Examples Animation 28

29 Software Multimedia Production Frequently Used Tools Picture Editing - Adobe Photoshop - Macromedia Fireworks Grafic Creation - Macromedia Freehand - Adobe Illustrator Animations - Macromedia Flash Video Editing - Adobe Premiere Audio Editing - Wavelab 29

30 Nadia El-Obaidi, Dr. Nadia Juhnke