1 / 10

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

aaronvera
Télécharger la présentation

Introduction to Web Authoring

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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.

More Related