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

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

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! UA Storyboard PowerPoint workshop/screen-shots.

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 this example*. There are some cues on the “structure” slides ahead…remember those? *Bonus: express the structure using actual references to html elements and file structures

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

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?

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)

What’s In a UA tutorial? “Chunks,”cont.’ task task title task description step image, 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

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

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.