Electronic Blackboard

This is an "electronic blackboard" (text typed on computer display) for tutorial 6: Designing and Building Course-based Webs from EdMedia'97. It contains the notes Sam Rebelsky wrote during the tutorial, and will probably make sense only to those who attended the workshop.

Warning: introductory

What is hypertext?

• A way of connecting information to create a textual "fabric"
• A nonlinear way of connecting information:
  • Information is segmented into small nodes (pages)
  • There are links between pages (connections)
  • Each page may have multiple in and out links
  • There are "trails" (linear connections of ideas)

How old is hypertext/what are some hypertexts?

• 1944 Vannevar Bush
• How we write term papers
• A library (or any book with cross references)
• Talmud

Tim Berners-Lee: World-Wide Web

• HTML -- A markup language for describing hypertext
• URLs -- Universal resource locators Has a protocol, server name, port, path, file name
• HTTP -- For transmitting hypertext
• Server software -- to speak HTTP
• browser software -- to speak HTTP and display pages
• CGI -- the common gateway interface for sending requests to programs

What makes a good hypertext / what are some of the design issues in building a hypertext web?

• Top level: overall web design
  • Types of pages in the web
  • Their relationship to each other
  • Node size
• Page design: logical
  • Organization
  • Roles of components ("This is an example")
• Page design: physical
  • What do our pages look like? ("This is times 12 bold")

We'll come back to each of these issues in more detail

Why do you want to build hypertexts for your classes? (class discussion)

• Saves money
  • For remote delivery of materials
• Saves paper
  • Transfers cost
• For the convenience of the student
  • "Hmm ... professor X isn't around, perhaps I can find an answer online"
  • What did other people already ask about this?
  • "Oh boy, now I don't have to go to class"
• Compete in the marketplace
  • Offer courses to students elsewhere
  • Attract students
• Make it a real multimedia experience
  • Animations
  • Simulations
  • Simple self-guided tutorials and quizzes
  • (or: video, graphics, text, ...)
• Encourage collaboration
• Organizational advantages to the instructor
  • Keeps materials available so that future courses can be more easily taught
• Support different learning styles: allows students to skip around

But ...

• It's going to take a lot of time and effort
• You can still do small-scale efforts

What belongs (or can exist) in a course web

• Standard printed handouts
  • Class notes
  • Assignments
  • Syllabus
  • ...
• Interactive components
  • Simulations or animations
  • Simple interactive self-learning quizzes
  • ....
• Features
  • Search facility
  • Online annotation, email, chat, etc.
• Components from each class session
  • Transcriptions
• Student-authored web pages
  • Provides a resource for future classes
  • Supports peer learning

Let's learn to write HTML, the Hypertext Markup Language

Basics: start with a "source text" and annotate with "tags" that indicate the role (or appearance) of pieces of individual pieces of text

• This is an important concept
• This is a title
• This should appear in italics

A tag (beginning of annotation) has the form <tagname>. To end the annotation, use </tagname>

[Many examples were given, none of which appeared on the blackboard.]

A relative link is a link to another file on the same machine. It does not include the server name or protocol, just a path (relative path) to the file.

• Another file in the same directory "filename.html"
• A file in a subdirectory "Example/filename.html"
• A file in a neighboring directory "../Web/index.html"

Break

Post-break notes

If you want to get email about additions to this tutorial's web, write your name and email address in the book in the front of the room. You can also email me questions as samr@cs.dartmouth.edu. I'll do my best to answer them.

If you haven't turned in your ticket, please do so.

You can create "raw HTML" files in any text editor, as long as you can save in text format.

It is best to save your files as xxx.html

HTML 3.2, developed and updated by W3C www.w3c.org

Back to the tutorial

Two (or more) styles of marking up pages

• logical markup -- indicate <strong>role</strong> of text
• physical markup (visual) -- indicate the <b>appearance</b> of text

Note that

• Logical markup best supports a wide variety of users
• Logical markup best supports information retrieval
• Logical markup supports visually impaired users
• Logical markup supports better authoring

Physical markup

• Layout is important

Why should I write "Raw HTML" (or raw HTML vs visual editing)

Why use a visual editor?

• Stay focused on content rather than markup
• Quick and easy
• Automates some tasks
• Better control of visual layout
• Correct HTML

Can raw HTML help meet these goals?

• Stay focused on content: authoring strategh of "write text then markup (in visual or raw or ...)"
• Quick and easy ... "anyone" can write HTML
• Use external tools to automate tasks
• Precise control of HTML tags ... using logical rather than visual formatting

Raw HTML also

• Lets you use the "newest" tags
• You can work on them both ways
• Understand what's happening beneath your visual editor

Recommendation: use a compromise

• Programs that can turn text to HTML, automating some of the processes
• Allow site-level authoring, rather than page-level authoring
• ASML: 5pm Monday
• SamR's Simple Site Stuff (email me with questions)

How do we design good and useful pages?

• We need to think about order
• We need to think about content
• We need to think about presentation

Rule 1: Keep it short

• Better browsing
• More readable
• Faster download

Rule 2: Present a context

• The name of the page
• The author of the page (with a link to his/her home page/expertise)
• The name of the site or hierarchiy that it's a part of
• The position in the hierarchy
• Links to next/prev
• Etc. Etc.

Replacate links at the bottom

• Helps users navigate
• Encourages full reading of the text

Use the same or similar layout on every page

A few of the more advanced uses of HTML (and perhaps why to use them)

• Tables
• Forms
• We'll see

In the current implementation A table, is a collection of rows Each row is a collection of cells (cells may span multiple columns or multiple rows)

• <table>
• <tr>
• </tr>
• </table>

Distracting visual effects that will adversely affect the usability of your pages for users with B&W monitors, color impairment or ...

<body bgcolor="....">

<img src="url" alt="Hi there">

Using HTML to create input "forms" for services on other machines

<form name="input form" action="..." method="get"> Enter your name: <input type="text" name="user"> </form>

CGI scripts can be written in a number of different langauges

• Traditionally, Perl (or C or C++)
• JavaScript for creating interactive pages
• VBScript
• Java -- designed more for inserting a program within a web page than for responding to CGI requests

This page written by Samuel A. Rebelsky.

This page generated on 49 by SamR's Site Suite.