Scientific Communication CITS4008 - Unit information · Scientific Communication CITS4008 Designing...

Scientific Communication CITS4008

Designing and Writing Web Pages Rachel Cardell-Oliver 2013

Based on notes by Robyn Owens

•  Proposed in 1989 by Tim Lee at CERN •  Mosaic released in 1993 •  Working group to define standards in

HTML set up in 1994 (HTML 3.0 1995) •  HTML5 Working Draft in 2008 •  HTML5 full specification: target 2014

Hyper Text Markup Language (HTML)

•  Web pages are written in HTML •  HTML documents are called web pages •  Markup language, similar to LaTeX •  HTML documents contain tags and plain

text •  http://www.w3schools.com/html/

Cascading Style Sheets (CSS)

•  Styles define how to display HTML elements •  Styles were added to HTML 4.0 to solve a

problem (tags for style elements) •  External Style Sheets can save a lot of work •  External Style Sheets are store in CCS files •  http://www.w3schools.com/css/

You will also come across …

•  XML is used to transport and store data •  Javascript is usde to add functionality,

validate forms, communicate with the server., and more

•  PHP is a scripting language for making dynamic and interactive web pages

•  http://www.w3schools.com/

•  HTML documents have a head and a body •  Documents typically consist of (tables of)

paragraphs of text, images, lists, and hypertext links

•  The default file is called index.html and is kept in (a subdirectory of) a directory called WWW, which is a subdirectory of the top directory

•  WWW must be world executable, and all files must be world readable

Example <!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body>  <h1>My First Heading</h1> <p>My <b>first</b> paragraph</p> </body> </html>

Images

•  Images make your documents more exciting visually

•  Must be used with care, e.g. – can be very slow to load – copyright issues – disabled users

<img src=“url” alt=“text description” width=“304” height=“228”>

•  URL refers to a Uniform Resource Locator –  absolute or relative

•  ALT gives an alternative textual description of the image

•  Height and width are in pixels (by default) •  You can ALIGN attribute takes values TOP,

MIDDLE, or BOTTOM and aligns at those places any text that comes with the image

•  Tables are used to layout information on the page

•  Can define table rows or columns, data and captions

Design

•  Good design is simple •  Write in well-formed HTML •  www.htmlgoodies.com for tutorials •  www.webmonkey.com for code snippets and

ASCII colour codes for web-safe colours •  Also

–  www.htmldog.com –  www.w3schools.com

What to include

It is essential to say •  Who you are •  What you do •  How you can be contacted (but beware

machine readable email addresses) •  Opening page should be simple and

concise, with options to click for more detail

Navigation •  Navigation should be logical and sequential •  The 3-click rule states that you should be able

to get anywhere in the site in three or fewer clicks

•  The structure of the site should be easy to follow

•  Every page should exhibit a visual consistency, with the same location of menus, buttons, and information in each page

•  Draw up a site design before you begin

•  Page size should be designed to a ratio of 2:3 for height:breadth

Backgrounds

•  There should be a high contrast between the background and text or images

•  Beware of green against red: colourblind users cannot distinguish these

•  All text should be coded as text, because text is easier to read and clearer than graphics

•  Default font is Arial, default size is 12pt •  Keep backgrounds simple

–  Plain backgrounds load quickly and give best readability

–  Backgrounds should never be busy

•  Text downloads much faster than images, so make sure there is some text to read while images are downloading

•  Short pages are best; avoid scroll bars •  Text that runs across the page is harder

to read than text that appears in small blocks

Images

•  One large image loads more quickly than several small images

•  Use gif format for line drawings, maps, and other fine featured or detailed images

•  gif supports only 256 colours •  Use jpg for natural colour images

•  Balance text with images and have no more than about 20k in images per page

•  A whole site should fit onto one floppy if you want to be sure of fast download time

•  Do not use HTML to resize images

Menus

•  Limit the number of menu items you have on a page, and restrict each item to one or two words

•  List similar items together •  Use the same placement of menus

throughout your site

http://robotics.stanford.edu/~ok/

http://web.csse.uwa.edu.au/research/postgraduate-profiles

http://users.ecs.soton.ac.uk/km/

http://www-cs-faculty.stanford.edu/~knuth/

http://people.csse.uwa.edu.au/rachel/

http://watersensitivecities.org.au/about-the-crc/management/crc-executive/tony-wong/

Google Scholar Automatically Generated Pages http://scholar.google.com.au/citations?user=VkFc88EAAAAJ&hl=en

Scientific Communication CITS4008 - Unit information · Scientific Communication CITS4008 Designing...

Documents

Transcript of Scientific Communication CITS4008 - Unit information · Scientific Communication CITS4008 Designing...