Webdesign 1 Foundation Computing I'd kill for a Nobel Peace Prize

Webdesign 1

Foundation Computing

I'd kill for a Nobel Peace Prize.

2 of 71

Web Design and AuthoringWorld Wide Web created whole new way

of publishing information

Special roles include: Web programmers Web design artists Web navigation specialists Content experts and authors

3 of 71

HTML

Standard format/language for Web documents:hypertext markup language

Markup language: Comprises normal text of document together with tags

Tags provide format, structure and references to other files, eg. multimedia, other web documents

4 of 71

Examining the HTML

You can look at the HTML of a Web page by selecting View->Source in Internet Explorer

Try it!As you will see, HTML is not a very easy

language to read (or write)You can directly edit HTML using a text

editor such as Notepad

5 of 71

Learning HTML

You are not expected to be an HTML expert!A lot of web designers use WYSIWYG editors

such as FrontPage or DreamweaverThey often work side by side in code and

layout view!Learn enough of the basic tags to produce

simple web pages or make minor changes to a web page

Refer to the HTML Tutorialwww.sci.usq.edu.au/courses/csc1402/resources/html

6 of 71

Overall File Structure

<html>  <head> <title>HTML Tutorial</title> </head> <body> Document body text here. </body></html>

will look like this: click here

7 of 71

Code

<html>  <head> <title>HTML Tutorial</title> </head> <body> Document body text here. </body></html>

8 of 71

Common HTML Tags

<h1>Level 1 Heading</h1> Paragraph line break <img src="name of image file"> <a href="url">click here</a> bold emphasis underlined <center>centred text</center>

Click here

9 of 71

Common HTML Tags<h1>Level 1 Heading</h1>Paragraph line break<img src="name of image file"><a href="url">click here</a>boldemphasisunderlined<center>centred text</center>

10 of 71

Another example

<html> <head> <title>Birgit's Web Page</title> </head> <body> <center> <h1>Birgit's Web Page</h1> <hr> My favourite colour is blue. My favourite sport is softball. My favourite movie is Whalerider. I could say some interesting things here. </center> </body></html>

Click here

11 of 71

Another example<html> <head> <title>Birgit's Web Page</title> </head> <body> <center> <h1>Birgit's Web Page</h1> <hr> My favourite colour is blue. My favourite sport is softball. My favourite movie is Whalerider. I could say some interesting things here. </center> </body></html>

12 of 71

Spaces, gaps, new linesThis will be printed

In the same line as the text

above.

To create a line break you need to use 

Or to start a new paragraph.

Or to add extra space between words in a sentence.

Click here

13 of 71

Spaces, gaps, new linesThis will be printed

In the same line as the text

above.

To create a line break you need to use 

Or to start a new paragraph.

Or to add extra space between words in a sentence.

14 of 71

Navigating the Web

Each document can have numerous active links (using the HREF tag).

Someone browsing can follow a long sequence of links moving from web page (document) to web page.

Browsers keep track of where you have been so you can move back/forward.

15 of 71

Adding Links

Say I wanted to put a link to the USQ website onto my web page.

I could add the following:

I work at<a href="http://www.usq.edu.au">USQ</a>.

URL for linkText to display for link

<a> is called an anchor tag

16 of 71

Adding Images

Name of file with image

Text to display if image unavailable

Click hereClick here

Say I wanted to include a graphic image or photograph

I could add the following:

<img src=“giro.jpg” alt=“Photo”>

Image must be in same folder as HTML file.

You can add a “path” if the image is stored elsewhere.

17 of 71

18 of 71

Writing codeIn future, you may use a WYSIWYG editor

to write HTML codeFor assignment 7, you may not!

Do not save in your browser Save in Notepad only!!! Edit in Notepad only!

19 of 71

Web Page Design Issues

Page will not appear exactly the same everywhere Different computer screens, fonts etc. Different browsers (eg PDA) Default settings (eg font size) Different operating systems (eg playing WMV

files on Mac)

Size and download time

20 of 71

Web Page Design Issues (2)Content versus aestheticsConsistent Look-and-Feel

Common page layout, heading etc. Navigation bars/buttons Fonts, colours, alignment

21 of 71

Download Time

Common modems are 56 Kbps Effective download speeds across the Internet

can be substantially less WYSIWYG editors will show the download time for

a page over a standard modem Keep images small (eg. < 100K) by using GIF or

JPEG compression (see final module)

22 of 71

Separating Content and FormattingA web site with many pages can share the

same formatting information, eg. Colours & backgrounds Font size, colour, face Location of sections on screen Separate printable view

Use Cascading Style Sheet (CSS)http://www.csszengarden.com/

23 of 71

Write Less!

Guidelines Be succinct Write for scannability Use hypertext (links to other pages)

Reading from computer screens is about 25% slower than reading from paper

People don’t like reading from screensWrite 50% less text

24 of 71

Scannability

Users rarely read every wordStructure articles with headlines Use meaningful rather than "cute"

headings Use highlighting and emphasis to make

important words catch the user's eye.

25 of 71

Web Sites

A web site is a collection of related web pages, generally maintained by a single person or organisation

A web page is a separate HTML fileWith frames, a web page may comprise

many HTML filesImages and other multi-media components

are separate files also, eg. GIF, JPEG

Click here

26 of 71

Good Web Site Design

Make the site's purpose clearHelp users find what they needMake navigation easyUse visual design to enhance not distract Less is more!Use meaningful graphicsAlt text and titlesAccessible

27 of 71

Bad Web Site Design

AnimationsOrphan PagesLong Scrolling PagesLack of Navigation SupportOutdated InformationOverly Long Download TimesLinks that don’t work

28 of 71

QuizWhat does the Privacy Act regulate?

29 of 71

Quiz (2)What does the Freedom of Information Act

allow?

30 of 71

Quiz (3)What is the purpose of the Spam Act?

31 of 71

Quiz (4)What is the purpose of Copyright?

32 of 71

Quiz (5)Which HTML tag will include a line break?

A. <break>B. <linebreak>C. D. <hr>

33 of 71

Quiz (6)Which HTML tag will make text bold?

A. <bold>B. C. D. <s>

34 of 71

Quiz (7) What is wrong in the following HTML code?

<html><head>

<h1>Title of this page </h1><body>

<title> My website <title></html>Welcome to my website!!!

<body>

35 of 71


<html><head>



<body>

36 of 71


<html><head>



<body>

37 of 71


<html><head>



<body>

38 of 71


<html><head>



<body>

39 of 71


<html><head>



<body>

40 of 71


<html><head>



<body>

41 of 71

Quiz (8)How will the following HTML code appear

in a web browser?

The quick brown 

fox jumped over the lazy dog.

42 of 71

Quiz (8)How will the following HTML code appear

in a web browser?

The quick brown 

fox jumped over the lazy dog.

43 of 71

Quiz (9)What HTML code will include an image

with file name myphoto.jpg?

44 of 71



45 of 71



46 of 71



47 of 71

Quiz (10)

What is good website design?What is bad website design?

48 of 71

Missing links from last week Social context:

http://www.copyright.org.au/

CSS (cascading style sheets) http://www.csszengarden.com

HTML http://www.w3schools.com/tags/default.asp Allows you to try the code!

Colour contrast http://www.lighthouse.org/color_contrast.htm

Bad web design http://websitesthatsuck.com/

49 of 71

50 of 71

51 of 71

Missing links from last week Social context:

http://www.copyright.org.au/

CSS (cascading style sheets) http://www.csszengarden.com

HTML http://www.w3schools.com/tags/default.asp Allows you to try the code!

Colour contrast http://www.lighthouse.org/color_contrast.htm

Bad web design http://websitesthatsuck.com/

52 of 71

Browser (in)compatibility Firefox vs Internet ExplorerDefault font size

53 of 71

Use Hyperlinks

Split information up into chunks connected by hypertext links: Each chunk can be brief The full hyperspace can contain much more

information than would be feasible in a printed article

Long and detailed background information can be relegated to secondary pages

Let readers select those topics they care about and only download those pages

54 of 71

Structuring a Website

Help people navigate a web site: arrange pages hierarchically like sections and sub-sections

Provide links to the next, previous page, the parent and children pages and to the "top" home page

Consistent menu on every page (similar to TOC), in same location

Bread crumbs? http://www.usq.edu.au

55 of 71

56 of 71

Example Web Site Structure

Page 3

Home Page

Page 1.1

Page 1 Page 2

Page 3.1 Page 3.2

57 of 71

A Shallow Site Design

Home Page

Page 1 Page 2 Page 3 Page 4 Page 5 Page 6

58 of 71

A Deeper Site Design

Page 1

Page 1.1

Page 1.1.2

Page 2.1

Page 2.1.1

Page 2.1.1.1

Page 2

Home Page

Page 1.1.1

59 of 71

Big or complex Documents?What if you want to make available:

A big report written in Word? An Excel spreadsheet? A PowerPoint presentation?

Don’t assume the person viewing your web site has Microsoft Office!

Convert to Adobe PDF format, eg. using Adobe Acrobat or CutePDF.

60 of 71

Static & Dynamic PagesYou will create static pages

Look the same until you edit themDynamic pages change over time, eg.

Stock prices, sporting results etc. Webmail

Uses server side programming languages such as CGI, ASP, JSP and PHP

61 of 71

Forms and CGI

Web pages can also be set up to allow users to input data into boxes or form fields

User clicks a "submit" button and the information is sent back to the web server

Normally handled by CGI – the Common Gateway Interface, eg. the details may be emailed to someone

62 of 71

Active Pages

Web page interacts with user, eg. Image rollover Calculations Complex animations

Uses client side scripting such as JavaScript or VB Script.

More complex user interaction by downloading an applet, e.g. Java.

63 of 71

Web Hosting Many ISPs provide users with some space to place

a small web site Larger web sites may require paid web hosting

arrangements Usually you build your web site on your local

computer and then upload it to the web server using FTP or perhaps a “content management” web page

Every USQ students has some web space on the student server

http://studentweb.usq.edu.au (FTP)http://studentweb.usq.edu.au (FTP)

http://studentweb.usq.edu.au/home/lochb (view)http://studentweb.usq.edu.au/home/lochb (view)

64 of 71

65 of 71

66 of 71

67 of 71

68 of 71

69 of 71

70 of 71

Web Hosting Issues

Available SpaceISP’s server reliability and performanceYour own domain name?

Domain name registration

CGI support, eg. for enquiry forms being emailed to you

71 of 71

Getting Found

Various ways to ensure people find your website: Publicise URL Links from another website

PortalsLink exchange

Tell a search engineUse meta tags to tell the search engine keywords

(see Study Book)