Introduction to Web Authoring

1. Ellen Cushman cushmane@msu.edu Introduction toWeb Authoring Class mtg. #11 www.msu.edu/~cushmane/wra210.htm our syllabus www.msu.edu/~cushmane/wa2.htm new class page

2. Web Tech UA: schedule Dates of interest for the UA project: • 2/11 - Introduction to assignment #3 & Teams • 2/13 - UA Background & Principles • 2/18 - Semantic Principles of User Assistance • 2/21 - UA Storyboard • 2/25 - UA Walkthrough • 2/27 - Workshop Dreamweaver: CSS • 3/3-3/5 - Spring Break • 03/10 –Workshop:Dreamweaver CSS • 03/12– Workshop:User Feedback & Revision Plans • 03/17 – Final Versions Posted

3. UA Storyboard PowerPoint workshop/screen-shots. Today’s Agenda | Next Class • Information Design for Storyboarding Task-Oriented Communication examining tutorials to derive structure - try out a tutorial • Preparing to design your own tutorial: do the task! • Update your project log!

4. Tutorials: Semantic Structure • Look at the source code and design of the youTube sample tutorial on the class page. • Describe the “semantic structure” of a tutorial (see Zeldman) based on thisexample*. • There are some cues on the “structure” slides ahead…remember those? *Bonus: express the structure using actual references to html elements and file structures

5. Why Semantic Structure? Let’s review: Why semantic structure? How does this relate to file management & site architecture?

6. What’s In a UA tutorial? “Chunks” title <h1> local navigation (within the tutorial itself) <ul></ul> global navigation (from tutorial to other tutorials) <ul></ul> authors table of contents • What URL does this page have? What file structure does this indicate to you on the writer’s afs space?

7. What’s In a UA tutorial? “Chunks,”cont.’ overview summary (what you will learn) pre-requisites (what you need to do the tutorial) rationale (why what the tutorial teaches is useful)

8. What’s In a UA tutorial? “Chunks,”cont.’ • task task title task description stepimage, process <img>image, outcome <img> example (e.g. code snippets) description of task outcome (a.k.a. “success condition” and/or “failure condition”) error recovery

9. What’s In a UA tutorial? “Chunks,”cont.’ • finished product (description? Image?) • Big so what?!! What outcome might the user expect?

10. Storyboarding: Preparing for Next Time • Do the task you are trying to teach • For each step, draw the “scene”…for most of the tutorials, this will be what’s on the desktop of the user’s computer …or…take a screenshot! • We’ll make storyboards of your task using screenshots & powerpoint.