Introduction to HTML and file management. Links and relative links. 

Introduction to HTML and file management. Links and relative links. 

• Lesson 1

Tips for a good site structure

• Call your primary page index.html (we'll create that later)
• Plan your folders before you design your site
  • Put all but the index page in subordinate folders or "directories"
  • Put all images in their own folder
  • Put all documents (word, pdf, etc.) in their own folder
• Make sure the remote site structure mirrors the local site structure.
• Carry site, not just files, from place to place

Domains, hosting, and publishing.

Editing online article. Use the resources below to review and to revise the article's style.

See an example of an online article

• Chunking exercise
• Editing Style
• Style Exercise 1
• Style Exercise 2

Study for Quiz 1

Quiz 1: HTML (take by Friday)

Assignment 3: discussion of assigments

Tables & Page design. HTML vs. page editors. 
practice assignment 3

LWD ch 10; HT 113-133

More on tables 
practice.

Links and Headings

WSG ch 4; LWD ch. 19

HT 133-183

Menus. Useroriented; task oriented.

Example menus:

• A service provider: task oriented
• A government site: user oriented
• A college or university: user / task oriented

Class Exercise: creating menus

HT 235-70

Graphics and Color. Transparent Gif practice.

Intro to personal sites. Portfolio Instructions by a student at the University of New Mexico

Review some personal sites:

• Virginia Culp
• Emily Moore

Example resumes and career sites: 

• artist
• Oracle consultant
• Marketing and Advertising
• Digital Media specialist
• Network administrator
• Teacher
• Web designer

Online Resumes: Register and submit info to 10-minute resume.com

Quiz 2 : Tables.Out of Class Assignment: Page design & tables.

Bring completed resume (from 10-minute resume.com) and your own logo (a transparent gif)

Creating GIFs and JPGs

Writing: Site Plan with Menu due

Fonts and Typography

• text best practices
• sample style sheet (and a real one)
• sheet applied
• exercise

Web Assigment 3: Post a page with a transparent gif by Tuesday, 9/25

Work on personal site

Writng: Create and submit plan for personal site

"" ""; Career Profiles and writing samples

• Study guide for quiz 2.5
• Online image optimizing engines
• Online image file conversion and free software
• Resume example and tips
  • length?

Site design basics. Overview of group site; introduction to topics. Writing Profiles based on interviews.

Group Project discusssion

• Towson class collaborative project

Web Assignment 4: post Site template before you leave for fall break

Web writing: chunking, headlines, blurbs, style.

• Chunking
• Editing Style
• Types of online content
• "What is good hypertext writing"?
• Creating compelling hypertext
• "Microcontent: Little Things Mean a lot"
• Using blurbs
• Page Proofing
• Online Style Guides (an article) and a Guide to making your own)

assignment: writing article based on press release or freelance site. Follow the guidelines of the site (provide guidelines) or link to the original press release.

FALL HOLIDAY

Quiz 2.5

Personal site templates

• Writers' Guidelines directory (online publishers and others)
• Press Release archive

Career Portfolio due (should include three-four examples which show your writing, computer abilities, or other skills)

Finishing Site

Promoting Site

Personal site due

Last day to drop with a W

Peer Review. Usability

1. Usability: our project
   
2. Usability: the concept
   • Defining Usability
   • One good set of design and usability guidelines
   • Aspects of Usability: an overview
     
3. Usability topics/ groups
   1. Group 1. Information Architecture. Universal navigation system. Nav system helps users go anywhere from anywhere quickly (within 3 clicks). Uses 7 (+ or - 2) items on main site main. Navigation system shows understanding of site's users and their needs.
      Group 1. User Interface. Uses page titles and headings. Labels pages clearly so readers know when they're in the right place. In-text and other links are clearly labeled and usefuly placed. Cross-browser/ platform usability and Accessibility (for web purposes, this means accessibility for users with disabilities).
   2. Group 2. Content and writing: Good, useful, accurate, trustworthy, up-to-date content that is, above all, well written. Uses consistent editorial style guide (not the same as cascading style sheet). Contact information and date of most recent revision are especially important. Provides help for readers that shows understanding of site's users and their needs.
   3. Group 3. Design and layout: Has user-oriented, appealing design directed at this site's primary audience. Directs others elsewhere, invites feedback and interaction. Uses graphics wisely. Uses web-safe, readable fonts, scannable text, layout, dimensions, colors, etc. Accommodates modems (loads in under 10 seconds) and a range of screen sizes w/out scrolling.
      
4. Usabillity: four stage process
   1. Deciding exactly what you want to know (use informal surveys and other web sites--check 25 most wired (2000)
   2. designing the test
   3. testing
   4. reporting

Methods and Examples

• How to plan, execute, and report on usability
• Conducting your first user test: instructions and overview
• An example test -- task-based
• Another test -- checklist
• An informal example report and a formal example report
• Sun Microsystems' Usability Guidelines
• Usability Links and Articles and Methods
• Articles and example usability reports

Project Teams formed for Group Project (see deadlines below).

Pick article topics.

• Site design: Logos, fonts, menus, graphics manipulation, style sheet, parameters (for those who want more experience with graphics programs)
• Interactivity: scripts, searches, fun features, multimedia, site map (for those interested in programming or multimedia)
• Editorial: style guide, promotion, publishing, and editing (for those interested in editing and marketing)

For editorial: Online Style Guides (an article) and a Guide to making your own.

Group site:

• For Interactivity group and others who are interested: Scripting
• For Design group: graphics (how to get them legally), scanning, digital phootography

Articles for site:

• A good example

Usability Tests (yours should have both task-based and checklist questions)

• An example test -- task-based
• Another test -- checklist

Career sites: some general issues to consider for revision

• Reliable information: date of update, copyright, author info
• Titles and headings
  • web style guide on titles and headings
• Web accessibility and the law
  • web accessibility guidelines and checklist
  • "alt" attribute, <caption>, and <label> tags, alternative menus
• fonts and style sheets--customize your look

Usability: groups work on test design

Editorial Team assembles style guide from class articles.

Designers present site for questions/ revisions

Interactivity present interactivity/ multimedia features

Draft of article due in share folders.

Test due: script, checklist, and list of volunteers to be tested (they should be able to make it to class on Thursday)

Usability testing:

In-class testing takes place today

Usability Report Formatting

• Download a formatted template (this template is also saved in our share folder). Usability report peer review is Thursday.
• View the example of a formal report

Group Project

• Design team completes template and gives it to the script team.
• Script team demos scripts.
• Editorial team presents style guide.
  • Editing with the style guide.
  • Editing leads and closings.
  • Adding specificity (quotes, descriptions, anecdotes). View a good example
  • Chunking revisited.

Important: for next Tuesday

1. Copy and paste text of articles into a plain HTML page. Do not use the MS Word "Save as HTML' feature. Observe these conventions:
• Use H2 headings for Titles and H3 for article headings.
• Use <p> for paragraphs.
• Include a line below the title that says "© [Your Name ] 2003. All rights reserved." Format it as a paragraph.
• Do not include any fonts, colors, or formatting.
• Do not use tables.
2. Edit articles (in articles folder in Share) according to the style guide.
3. Adding detail and support. Revise beginnings.
4. Break up long paragraphs and add headings "chunking." Write a one-sentence blurb at the beginning of your article for the Table of Contents page.
5. Hand in completed html article in share folder on Tuesday, along with all graphics. Make sure the graphics are clearly labeled as belonging to your article. If you don't have scanned graphics on disk, make sure to get your pictures to the graphics team so they can scan them.

• NOTE: Your article must be completed by Tuesday at 3:30 so the Editorial team can do a final edit of all articles. You won't get credit if you don't finish it by then!

Peer Review of Reports.

Instructions to Groups: Pull up your report in Word and leave it on the screen. Pull up peer review form and leave it on the screen, too. Ask at least four classmates to read your report and type their comments on this form. Make sure to attach this review sheet to the report when you hand it in.

• View the example of a formal report
• download the peer review form and instructions

Group project

• Script/Multimedia team generates article pages from site template and creates a index page that is also a Table of Contents (use article "blurbs" to create contents)
• Design team creates an index page and/ or a contents page (based on site template). Updates style sheet to make sure all text, headings, and links are formatted consistently using web safe san-serif fonts.
• Editorial team writes "about this site" page content. Performs a final edit of article pages over Thanksgiving.

THANKSGIVING HOLIDAY

Site made ready for final publication (I'll put this on English department or WCU page). Final tweaks. "Meta" tags and search engine submission.

class sites

Completed Usability Tests Due by 3:30 today.

Absolute last date for personal site due (note, they must be published to get credit)

LAST DAY OF CLASSES. Discuss final exam and critique group project.