Farmwide Advanced Internet - First Class

Abstract:

This is a presentation outline. It was converted from the MagicPoint presentation program to the LYX document processor, and then exported as HTML.

Contents
Introduction
Web Development
Introduction to HTML
Using Web Development Tools

Introduction

Classes

Class 1
- Friday 10th November
- 5:30pm - 9:30pm
Project (Homework)
Class 2
- Friday 17th November
- 5:30pm - 9:30pm

Class 1

Introduction
Web development
Introduction to HTML
Planning and creating a web site
Using web development tools
Project

Class 2

Resources for creating better content
Publishing
Hosting
Business on the net
Business resources
Conferencing

Author Background

Software Engineer
- trained to make software
- can also fix software
- understands software from the inside
Employer
- a multinational computer company
- you don't need to know who
Job
- software support specialist
- for professional products only
- no customers nearby
Financial Interest
- owns shares
Views on Microsoft
- use no products in my job
  - except for annual leave form
- own no products at home
- can't fix their products
  - locked bonnet
  - have to ask them
- financial interest
  - employer owns shares and sells products
Views on Open Source
- bonnet is open
- no single source
- cannot be sold
- community made
  - internet caused it
- can fix open source products
- no financial interest

Web Development

Outcomes

1.1 Define the term homepage
1.2 Identify nature of files according to name and extension
1.4 Identify capabilities of client and server
2.1 Identify different styles of web pages
2.2 Identify different navigation methods

Defining the term homepage

What is a Home Page?

three common meanings
- page with information on a topic
- page for specific people or organisation to use
- page about a specific person or organisation
see a conflict?
definition
- first page of a set

Identify Nature of Files

Human Senses

there are five human senses
- sight
- sound
- smell
- touch
- taste
only sight and sound are on the web so far

Sight and Sound

sight
- text
- still pictures
- moving pictures
sound
- synthesis
- samples
- silence

Compression

what is compression?
- making files take up less space
- transmit and receive faster
- reduces costs for both parties
how is it done?
- meaning shared by sender and receiver
- transmit only a small bit of information

What is a File Type?

Text after the file name
If a file is Gilgandra.txt
- the file type is TXT
Microsoft Windows Explorer
- normally does not show file type
- shows a different icon for each type
- can be told to show types

Web page versus non-web page

web page file types
- well compressed
- small size
non-web page file types
- non-compressed
- requires external viewing program

Web page file types

.TXT text file, layout done by author
.HTML hypertext markup language, layout done by browser
.GIF colour image, lossless compression, of repeats
.JPG colour image, lossy compression, of colour gradients
.PNG colour image, lossless compression,
.MP3 frequency band compressed sound samples
.MPEG audio/video, combined JPG images with MP3-like sound
.PDF a proprietary document format, owned by Adobe, but avoid it, reasons:
- designed for document interchange
- requires an external viewer
- slows access to the information
- requires licensed software to build
- government web sites instructed to avoid it

Non-web file types

.WAV sound samples, no compression, instead use MP3
.BMP colour image, no compression, instead use JPG (for natural images) or GIF (for artificial images)
.MOV audio/video, little compression, instead use MPEG
Microsoft Office formats:
- .DOC Microsoft Word document, instead use HTML, or at a pinch RTF
- .XLS Microsoft Excel spreadsheet
- .PPT Microsoft Power Point presentation
but avoid them, reasons:
- designed for disk storage
- contain deleted and private information
- software version specific
.RTF Rich Text Format, avoid, reasons:
- designed for document interchange
- requires an external viewer
- slows access to the information

Questions?

1.2 Identify nature of files according to name and extension

Client and Server?

Client: web browser
- Mozilla
- Netscape Communicator
- Microsoft Internet Explorer
Server: computer that gives out web page
- Apache
- Netscape Enterprise Server
- Microsoft Internet Information Server

Delivering web pages to a surfer

client
- takes request from keyboard or mouse, sends request via internet to web server
server
- accepts, validates, approves, sends content back to client
client
- receives from server, begins layout, sends request for embedded URLs, stops

Server

Server does nothing much!
Any old computer (e.g. 486/33 16Mb) can be a web server
- install operating system
- install web server software
- permanently connect to internet
A fast permanent connection is the main barrier to entry in the ISP market

Client

Client does all the work!
- interacts with the surfer
- provides assistance
  - automatic http:// prefixing
  - built-in documentation
  - bookmarks and favourites
- communicates with web server
- lays out page on screen or runs plug-ins
- allows scrolling

Client Capabilities

Clients can automatically display
- text
- HTML
- images
Clients often hand over the job of displaying
- proprietary animation formats
- audio/video formats
- rich text format
- proprietary document formats
Hand over can be transparent!

Server Capabilities

Server side scripting
- web page can include instructions for the web server
- hotmail is a well known example
- shopping web sites
- credit card authorisation
- greatly eases page design due to template files
- improves the experience

Questions?

1.4 Identify capabilities of client and server

Target Audiences

What are the target audiences?
Who is the page designed for?
- general consumers
- special interests
- product owners
- organisations
- political party members
- etc

Site Styles

links page
- list of links based on a topic
- ordered for ease of comprehension
- sometimes searchable
- often no actual content on the site
- often a first attempt
information resource page
- like an encyclopaedia article
- table of contents
- subheadings
- text and images
portal page
- also known as a ``gateway''
- trying to be all things to all men
- embedded banner advertising
- commercial attempt at building community
personal page
- personal information
- picture of self
- picture of significant other or pet
- resume or cv
- links based on self interest (bookmarks)
business page
- business name
- business information
- contact details
- email address essential
- never link to competitors!
community forum page
- subject focused
- announcements or articles
- multiple responses by community members
- occasionally moderated
- a growth area, people want community

Page Styles

entry page
- welcome
- summary of content on the site
- some minimal content
navigation page
- structured view of site or links to other sites
information page
- contains actual in depth content

Questions?

2.1 Identify different styles of web pages

What is Navigation?

Navigation is moving around on the net
How did they get to your site?
- entered URL from literature or advertisment
- bookmarks or favourites
- links from other sites
- electronic mail
Like a shopfront, the more the better

Moving around in a page

scrolling within page
- page down key
- scroll bar
- scroll wheel
scrolling within frame
- have to click in frame first
- main reason to avoid frames

Moving back

surfer doesn't find what they seek
back browser button
back links on page are bad
- does not go back to prior page
- goes forward to the author's prior page
- actually does a forward
- can confuse the poor surfer
- degrades the experience
Rule: clicks go forward only

Moving to other pages in site

site designer must guide the surfer
forward links
- text
- icons
form submit
- does an implied forward
- sends information at the same time

Navigation aids on pages

forward links
site map
site search
- server side scripting
- not all hosting services provide this
top of page links
top of site links
linked table of contents
linked word index (like a book)
persistent navigation area
- bar (top or bottom)
- column (left)
frames are multiple areas within a page that are loaded from separate documents

Why not frames?

frames require a click before scrolling
- alienates keyboard-only professionals
- discriminates against blind surfers
frames can triple the download time
- fetch frame set document
- fetch each frame document
frames do not always display the way you expect
fonts selected by surfer may be bigger
forces you to recommend resolutions
- discriminates against old hardware
- against the goal of the web
- ``best viewed at 800x600''
- ``best viewed with a hammer''
can be achieved using tables anyway!
people hate them, listen to them

Questions?

2.2 Identify different navigation methods

Introduction to HTML

Introduction to HTML - Outcomes

1.3 Examine source code of web pages
2.3 Identify different designs
2.4 Identify features of well designed web pages

What is HTML?

An acronymn for HyperText Markup Language
A language used to mark up text to indicate how it should be formatted by a HTML layout program such as a web browser
Human readable
Software can also generate HTML
Example: converting plain text to HTML ...

Plain Text Example

HTML is an acronymn for the HyperText Markup
Language, and is a language used to mark up or
outline text to indicate how it should be formatted
by a HTML layout program such as a web browser.
HTML is:

         - human readable and
         - consists of tags that are placed around 
           text to be marked.

HTML allows the web page author to avoid worrying
about screen dimensions, font sizes, and the like,
and concentrate on creating the content.  The web
browser manages the layout process.

Conversion to HTML

<HR>
HTML is an acronymn for the HyperText Markup
Language, and is a language used to mark up or
outline text to indicate how it should be formatted
by a HTML layout program such as a web browser.
HTML is:<P>
<UL>
<LI>human readable and
<LI>consists of tags that are placed around
text to be marked.
</UL>
HTML allows the web page author to avoid worrying
about screen dimensions, font sizes, and the like,
and concentrate on creating the content.  The web
browser manages the layout process.<P>
<HR>

Example Displayed by Mozilla

note list indenting, list bullets, horizontal rules, line breaks ignored, and text wrapped to width of browser

Tags In Example

Tag	Meaning
<HR>	Horizontal Rule
<P>	Paragraph
<UL>	Unnumbered List (Begin)
<LI>	List Item
</UL>	Unnumbered List (End)

Examining HTML Source Code of Web Pages

Web page source code is always visible
Go to a web page
Select view source
Read and understand the tags
Compare the laid out window against the source

Writing in HTML

There are books
There are other web pages (cheaper)
Web page editors
Professionals use a mix of editors and HTML
Editors cannot do everything, but they can start you off well

Writing for Web Browsers

HTML is designed to be independent of the web browser being used to view the page
Write for any web browser rather than just one to maximise the appeal of your web page
http://www.anybrowser.org/
But doing this may increase cost of design

Web Browsers in Common Use

Microsoft Internet Explorer
- widely available
- included with most computers sold
- closed source
- stated monopolistic standards diversion
Netscape Communicator or Navigator
- freely available
- source published
- Netscape is the company, not the product
Mozilla
- open source
- community built
- near completion
AOL
- made their own for their own profit reasons
- works very well with AOL dial-up service
opera
- designed for speed on Microsoft Windows
amaya
- w3.org browser
- w3.org sets the HTML standards
- reference implementation for good testing

Web Page Editors

Microsoft Frontpage
- complex template layouts
- optimised for Microsoft Internet Explorer
Netscape Communicator
- simple templates
- optimised for Netscape based browsers
notepad (yes, really)
- lets you edit in raw HTML
- any computer can make a web page
amaya
- w3.org's editor
- produces clean anybrowser compliant HTML
emacs
- programmers editor
- optimised for community collaboration work

Identifying Different Designs Activity

1.3 Examine source code of web pages
View many web pages
Classify them
Ask me how they were constructed
2.3 Identify different designs

Identifying Features of Good Design

logic
- can you figure out where to go next?
- do you get lost easily?
navigation
- is it clear how to go back?
- is it clear how to go forward?
ease of use
- is the information presented in a structured way?
- is the information in a readable font?
- are the text colours contrasting against the background?
speed of download
- is the page legible without images enabled?
- does it download within the critical 15 seconds?
- is your target market on rural modems?
aesthetics
- do the colours mix well?
- do the colours or patterns clash?
- is it cluttered?
- do the colours suite the content?
- is whole site using a common theme?
use of graphic elements
- are the graphics a suitable size compared to text?
- do they add value?
- are they using a restricted colour map?
use of audio/video elements
- are audio samples clear?
- are expensive downloads optional?
- are video segments relevant?
- ``Oh, I must have a video on my page!'' - why?
accessibility
- can a disabled person access the page?
- if you are government, this is mandatory
- is there enough information in a frame set page for the blind?
- is information hidden in images or icons?
ability to withstand geometry variation
- shrink the page
- does it still look okay?
- enlarge the page
- does it still look okay?
- test at minimum resolution of 640x480
- appropriate test resolution depends on audience socioeconomic status

Questions?

2.4 Identify features of well designed web pages

Using Web Development Tools

Outcomes

3.1 Create a simple web homepage using a web page editor
3.2 Create a simple web site linking from the homepage
3.3 Evaluate the effectiveness of the web site

Project

Demonstrate the use of a web page editor by creating two web pages that incorporate simple elements including a still picture or graphic, text, colour, and tables. The first page must include a link to the second page. Submit it on a floppy disk next class.
Call me if you have trouble!

Project Marking Guide

all elements present (picture or graphic, text, colour and tables)
appropriate use of colour
readable at 640x480
logical ordering of table cells
working link from first to second page
working link from second to first page
working offsite links

Each point was worth 10%. Following the marking of all thirteen project submissions on 17th November after the class, most students were awarded 100% score, 2 were awarded 90%, and one 80%. Two students failed to use a table anywhere in the pages, and one student had no working offsite links.

Footnotes

... tools

This ended up moving to the second class.

... repeats

Patented, avoid.

... compression,

Forgot to mention this in the class. See (I think) http://www.png.org/ or do a web search for PNG. PNG means Portable Network Graphic.

... advertisment

Quoting URLs:

Convention is to omit the http:// prefix
in printed advertising material
- on television
- on radio broadcasts
Include the http:// prefix
- in electronic mail
- in computer based documents
- in online forums
Software recognises the prefix in electronic mail, customer can then click on the link
An internet standard (RFC1738) covers this

... opera

Author used the word arena in original presentation.

| quozl@us.netrek.org | up |