Transcript TC 310 The Computer in Technical Communication WELCOME

TC 310
The Computer in
Technical Communication
Dr. Jennifer Turns
Week 4, Day 2 (4/23)
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.
Day 8
• By the end of class, students should be able to:
– Publish their HTML creations
– Debug common HTML problems
– Go beyond HTML basics
• What we’ll 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.
You’ll Need
• The page you created Tuesday
– usability.html
• The graphics associated with the page
– 06-book.jpg
– 06-useit.bmp
Part 1: Closing the Loop
PUBLISHING
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)
Activate UW Web Publishing
• If you already have a “web space”, go to step 3 (and use
your information)
• Activate web publishing on “students.washington.edu”
– Follow instructions at
http://www.washington.edu/computing/web/publishing/students.html
– For additional guidance, please see the screen shots located in the
electronic version of the tutorial.
Publishing
• What needs to be “published”? Which files need
to be uploaded to your UW webspace?
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
View your Live Webpage
• View the published page
– Open a browser
– Enter URL:
http://students.washington.edu/yourID/pageName.html
OR
http://staff.washington.edu/yourID/pageName.html
Part 2: Gaining Power
Concepts and Strategies
for Debugging
Concept 1: File referencing
• Two approaches to file references
– Absolute: You provide the entire path to the file
<A href="http://www.useit.com/">Nielson's Site</A>
– Relative: You provide part of the path, the server resolves the rest
<a href="00-syllabus.doc">syllabus</a>
<a href=“./00-syllabus.doc">syllabus</a>
<a href=“./myfiles/00-syllabus.doc">syllabus</a>
• Questions:
– How does the server resolve relative references?
– Why such a big problem???
Concept 2: A < > a
• File references in HTML are case sensitive
– Usability.htm <> usability.htm <> Usability.HTM …
• Implication:
– If a link/URL is not working, check that you have the right
combination of upper and lowercase letters!
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?
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?
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 <a href=“c:\homepage\links.html”>Links</a>. 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?
– Explanation: Because there is no c:\homepage\links.html on their hard
drive!
• 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).
Part 3: Expanding Horizons
Other Useful
Resources and Ideas
More about HTML - Guides
• From the source – An NCSA guide
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerP1.html
• Explanations and lots of examples!
http://www.w3schools.com/html/default.asp
• Yet another HTML tutorial
http://www.cwru.edu/help/introHTML/toc.html
More about HTML - Attributes
• Focusing on attributes
– Most HTML commands have attributes for additional control
– Example: <table border=“1”>…. </table>
– A comprehensive index of attributes (and the associated HTML)
http://www.w3.org/TR/REC-html40/index/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?
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
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
Other Resources
• http://www.washington.edu/computing/web/publishing/
Looking Ahead
• Due Dates
– Assignment 5
• Monday (4/28)
• By class
– Includes:
•
•
•
•
Solution
Key Features
Design Rationale
Learning Reflection
• Next Class
–
–
–
–
Debrief Assignment 5
…
Websites
Dreamweaver!