TC%20310%20The%20Computer%20in%20Technical%20Communication

1
TC 310 The Computer in Technical Communication

• Dr. Jennifer Turns
• Week 5, Day 2 (10/30)

2
Why HTML?

• Understanding
• Knowing about HTML removes some of the magic
  behind the web, and also the magic behind what
  tools like Dreamweaver provide.
• Alternative Strategies
• Alternative ways to create pages, even when using
  a tool like Dreamweaver
• Can use HTML in tools such as Catalyst
• Debugging
• Understanding HTML is very important for
  debugging common problems associated with
  creating web pages and web sites.

3
Big Picture Web Development

• Design
• Information architecture (site map)
• Navigation design
• Graphic design
• Content design
• Implementation
• Coding HTML directly
• Dreamweaver
• Publishing
• FTP
• Publishing from within a website development
  environment

4
Day 10

• By the end of class, students should be able to
• Publish their HTML creations
• Debug common HTML problems
• Go beyond HTML basics

• What well do
• Closing the loop Discuss website publishing,
  students publish
• Gaining power Discuss file referencing,
  practice debugging
• Expanding horizons More HTML, Photoshop for
  HTML stuff.
• Looking ahead Discuss hints

For individuals who are already experienced in
these areas, various options are available.
5
Youll Need

• The page you created Tuesday
• usability.html
• The graphics associated with the page
• 06-book.jpg
• 06-useit.bmp

If you did not finish creating the page, you
can download a version by (a) going to the
software resources section of the course website,
(b) finding the link Introduction to Usability
(Webpage for Tutorial 1, (c) following the
Final link to the sample version of the page,
and then (d) saving the page to the desktop using
the save as option Web page, HTML Only.
6
Part 1 Closing the LoopPUBLISHING
7
Publishing -

• Find a host for your website
• In other words, find a machine that is connected
  to the internet on which you can place your HTML
  files.
• At UW
• You can publish pages on UW machines
• To get website, you activate web publishing
• Publish website files
• Transfer them to the host computer
• Done via FTP or within web publishing software
  (e.g., within Dreamweaver)

8
Activate UW Web Publishing

• If you already have a web space, hold on
• Otherwise, activate web publishing follow
  instructions at
• http//www.washington.edu/computing/web/publishing
  /students.html
• What does this step do?

9
Publishing

• What needs to be published? Which files need
  to be uploaded to your UW webspace?

10
Publishing Via FTP

• Publish the usability.html to
  students.Washington.edu using FTP
• Open FTP Program Start/Programs/Uwick
  Applications/SSH Secure FTP/Secure FTP
• Log on to server
• Click Quick Connect
• Type dante.u.washington.edu in Host Name
• Type your UW account in User Name
• Press return
• Enter your password
• Press return
• Upload HTML files to public_html folder
• Double click on public_html folder
• Select Operation/Upload from menus
• Navigate to your local HTML file and select
  file/files to upload
• Click on Upload button
• Repeat as necessary for all required files

11
View your Live Webpage

• View the published page
• Open a browser
• Enter URL http//students.washington.edu/yourID/
  pageName.htmlORhttp//staff.washington.edu/yourI
  D/pageName.html

12
Part 2 Gaining PowerConcepts and Strategies
for Debugging
13
Concept 1 File referencing

• Two approaches to file references
• Absolute You provide the entire path to the
  fileltA href"http//www.useit.com/"gtNielson's
  Sitelt/Agt
• Relative You provide part of the path, the
  server resolves the restlta href"00-syllabus.doc"
  gtsyllabuslt/agtlta href./00-syllabus.doc"gtsyllabus
  lt/agtlta href./myfiles/00-syllabus.doc"gtsyllabuslt
  /agt
• Questions
• How does the server resolve relative references?
• Why such a big problem???

14
Concept 2 A lt gt a

• File references in HTML are case sensitive
• Usability.htm ltgt usability.htm ltgt Usability.HTM
• Implication
• If a link/URL is not working, check that you have
  the right combination of upper and lowercase
  letters!

15
Common Debugging Opportunities

• Broken images (images that do not show up)
• Why might images not show up?
• How can you debug broken images
• Inactive links
• Why might images not show up?
• How can you debug broken images
• Invisible updates
• Why might the Internet version not reflect
  changes you made?
• How can you debug such situations?

16
Debugging Practice

• Check out the broken version of the
  Introduction to Usability page
• (available from the software resources page).
• WHY?
• Why is the background not showing up?
• Why is the embedded graphic not showing up?
• Why is universal usability article link broken?

17
Another Example

• Situation Say you wrote a link page, called
  links.html on your hard drive, saved as
  c\homepage\links.html (on a Windows PC, or
  similarly on other operating systems). In
  creating your HTML, you link to this page with
  the lta hrefc\homepage\links.htmlgtLinkslt/agt.
  You test the page on your machine, and the link
  works fine. Then you upload it to the web, and
  get one of your friends to try. When they click
  the link, they will get an error saying "File Not
  Found"! Why?

18
Another Example

• Situation Say you wrote a link page, called
  links.html on your hard drive, saved as
  c\homepage\links.html (on a Windows PC, or
  similarly on other operating systems). In
  creating your HTML, you link to this page with
  the lta hrefc\homepage\links.htmlgtLinkslt/agt.
  You test the page on your machine, and the link
  works fine. Then you upload it to the web, and
  get one of your friends to try. When they click
  the link, they will get an error saying "File Not
  Found"! Why?
• Implication
• When you're starting out, don't include directory
  information in your filenames. Rather, save both
  HTML and graphics in the same directory. If you
  are trying to link or load a file (discussed
  later) called taco.jpg, just use taco.jpg, not
  c\homepage\taco.jpg or the like.
• Your finished HTML file should never mention your
  hard drive's letter (or name).

19
Part 3 Expanding HorizonsOther Useful
Resources and Ideas
20
More about HTML - Guides

• From the source An NCSA guidehttp//archive.ncs
  a.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html
  
• Explanations and lots of examples!http//www.w3sc
  hools.com/html/default.asp
• Yet another HTML tutorialhttp//www.cwru.edu/help
  /introHTML/toc.html

21
More about HTML - Attributes

• Focusing on attributes
• Most HTML commands have attributes for additional
  control
• Example lttable border1gt. lt/tablegt
• A comprehensive index of attributes (and the
  associated HTML)http//www.w3.org/TR/REC-html40/i
  ndex/attributes.html
• Exploring
• Which HTML tags use the ALIGN attribute?
• Which HTML tags use the WIDTH attribute?
• How would you set the background color of a
  TABLE?
• What are attributes associated with the HTML
  TABLE tag?
• What area examples of HTML tags that you do not
  recognize?

22
Photoshop and Web Design

• How can you use Photoshop to support your web
  design work?
• A Task
• Use Photoshop to create a graphic for the
  usability.html page
• Modify the page to include your graphic
• Observe results

23
Part 4 Looking Ahead - HINTS

• File references in HTML are case sensitive
• If a link/URL is not working, check that you have
  the right combination of upper and lowercase
  letters!
• Test (publish) early and often
• Be successful early
• Extend your successes

24
Other Resources

• http//www.washington.edu/computing/web/publishing
  /

25
Looking Ahead

• Due Dates
• Assignment 5
• Monday (11/4)
• By class
• Includes
• Solution
• Annotations requested in E-portfolio

• Next Class
• Debrief Assignment 5
• Websites
• Dreamweaver!