Content Development and Workflow for e-learning Projects Nadia El-Obaidi, Dr. Nadia Juhnke Freie Universität Berlin
Questionnaire for e-learning Projects Didactics Content Target Group Project Management 2
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
From Traditional Classroom to Blended Learning Email 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
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
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
Examples Sitemap 7
Examples Search 8
Examples Forum 9
Examples Glossary 10
Examples Test 11
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
Authoring of e-learning Contents Authoring Tools: Lectora Template Structure Page 13
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
Examples Animation 15
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
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
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
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
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
Example Basic Layout Services Search Main Navigation Related Links Content News Credits 21
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
Example www.distributed-campus.org This site provides different levels of access and different navigation methods Next >> 23
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
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
Examples Graphicdesign 26
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
Examples Animation 28
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
Nadia El-Obaidi, Dr. Nadia Juhnke obaidi@cedis.fu-berlin.de, njuhnke@cedis.fu-berlin.de www.cedis.fu-berlin.de