Download Chapter Slides

BIS4430
• Dr Ellie Maclaren
• [email protected]
• T106
• Weds 2.30-4.30pm
Topics
• Basics of Web Design
• HTML
• Asp.NET
– VB.NET
• JavaScript
• XML
Design Strategies & Accessibility
unit 7
Learning Outcomes
•
•
•
•
Understand steps in design process
Design site architecture
Design site navigation
Apply accessibility guidelines
Validating HTML
• W3C produces standards for “good” HTML
– provides a free online validation
• HTML editors
– built-in validation tools
• mostly helpful
– Word is NOT an HTML editor
• produces terrible code
– For simple pages all you need is Notepad
Design process
•
•
•
•
•
•
Requirements analysis
Define content
Determine architecture
Define style
Implement website
Optimise search results
Tools for Web Design
• No tools will help at all stages
• Commonly used:
– Storyboarding
– UML
– Web Application Frameworks
Things to look for in a framework
•
•
•
•
•
•
•
Presentation
Form handling
Validation
Event handling
Page flow
Integration with server-side activities
Resource usage
Architecture
Add navigation possibilities
Page layout
Example methodology
• First considerations:
– Purpose of the Site
– Structure of the Site
– possible paths through the structure
– style - “look & feel”
– structure of individual pages
Design Methodology
• Design democratically - with LCD - degrade gracefully
• Pages are at least functional without graphics, avoid
headlines and contact information in graphics
• With graphics, use alternative text
• Main messages - avoid use of cutting edge technology - use
plain HTML text
• Keep files as small as possible - connection speeds
• Test under less optimum conditions - less attractive? Totally
unusable?
Web Design Process - Basic Steps
•
•
•
•
•
•
•
Conceptualize and research
Create and organize content
Develop the look and feel
Produce graphics and HTML files
Create a prototype
Test, test, test!
Upload, test
Conceptualize and Realize: Some
questions
• Strategy
– Why are you creating this web site? What do you expect to
accomplish?
– What are you offering your audience?
– What do you want users to do on your web site? After they’ve left?
• General Site Description
– What kind of site ? - purely promotional? Info gathering? A
publication?
– What features?
– Most important messages?
– Who are your competitors?
• Target Audience
– who and how internet-aware and technical they are?
– what assumptions can be made on - average user’s connection speed/
platform/ browser use?
– How often/ how long will they visit your site?
• Content
– who’s responsible for original content?
– How will it be submitted? - process and format
• Resources
–
–
–
–
budget/ staff/ time
updates - how often? How much?
Who can maintain?
Own server? Domain name registered?
• Look and feel
– standards? - other sites?
Create and Organize
• Content creation - client responsibility
• Information architecture - lists, sketches…
• Organize by importance, timeliness, category,
home page, sections...
Page layout
• Contain ‘scannable’ text, in which keywords are
highlighted to aid quick perusal
• employ meaningful sub-headings that capture the
essence of what follows them
• use bulleted lists to provide a quick summary of main
ideas
• ensure one idea per paragraph, concentrating on the
introductory words of the paragraph
• make use of the ‘inverted pyramid’ style of writing in
which you start with the conclusion
• ensure that information on a page should be visible on
the screen.
Estimating Download Times
•
•
•
•
•
Throughput of the server
server’s connection to internet
performance of the internet
user’s connection to the internet
rendering speed of the user’s browser, cpu
& graphics card
• Graphics files, Animation, Audio & Video
resources
Graphics formats
• GIF
– resolution up to 65536 x 65536 pixels
– LZW compression
• JPEG
– designed for large photographic images
– ‘lossy’ compression technique
Accessibility
• Readable
• Understandable
• These are not the same thing
Guidelines
•
•
•
•
•
•
Provide alternatives to audio & visual content
HTML should conform to published DTD
Clarify abbreviations or foreign text
Ensure page is readable with plain text only
Allow moving objects to be turned off
Enable element activation by multiple input
devices
• Provide context & orientation
• Clear navigation
Example : Colour blindness
Red/green colourblind view
Design Methodology
• Know your audience - research
characteristics and needs of target
audience - scenarios:
• Scenario 1: Site selling educational toys consumer audience - home PCs - not the latest
browser - AOL - Web TV - no cutting edge tech
– modem connections - download times - keep
files small
– page layout - small monitor size
Scenario 2: A site with resources
for professional graphics designers
• Larger screen size
• Work from office - internet enabled graphics
Scenario 3: Site to share company info. as an
intranet
– same browser installed and up to date
– standard monitor sizes
– bandwidths - not an issue
– can risk
HTML
N-tier Architecture
How does the browser display the pages?
• All web pages contain instructions for display
• The browser displays the pages by reading these
instructions
• The most common display instructions are called
HTML tags
• HTML tags look like this <P>This is a paragraph</P>
Who is making web standards?
• Web standards are NOT made up by Netscape or
Microsoft
• The rule-making body of the Web is the W3C
• W3C stands for the World Wide Web Consortium
• W3C puts together specifications for Web standards
• The most essential Web standards are HTML, CSS &
XML
• The latest HTML standard is XHTML 1.0
(www.w3schools.com)
Where do we start?
• HTML - Hyper Text Markup Language
• HTML file contains markup and text
• Tags help with displaying or formatting the
text
• HTML files have a .html or .htm extension
HTML document
<html>
<head><title>Title of my page</title></head>
<body><! What you actually want the user to
see goes here --></body>
</html>
HTML tags
•
•
•
•
•
•
•
•
•
•
<b> defines bold text
<br> inserts a line break
<center> defines centered text
<em> defined emphasised text
<h1> to <h6> defined headers 1 to 6
<hr> inserts a horizontal line
<I> defines italic text
<P> starts a new paragraph
<sub> and <sup> sub/super script
<u> defines underlined text
A word on Validation
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
TO DO
• Oasis Plus
– Unit 7 exercises
• Recommended Reading
– Web Design in a Nutshell Chapters 11-13