Computer Science 1033A/B Lecture Notes - Lecture 6: Crystal Computing, Complex Differential Form, Tim Berners-Lee
17 views7 pages
9 Feb 2013
School
Department
Course
Professor
COMP SCI – WEEK 6
Warm up questions
•what are the chunks of data that are sent over the internet called?
◦Packets
•the internet and the WWW are the same thing?
◦FALSE
◦internet is hardware
◦WWW is software
•give an example of a valid IP address
◦1.1.1.1
◦there are 4 parts separated by a dot
◦each part must be between 0 and 255
•www.csd.uwo.ca/courses is a domain name?
◦FALSE
◦www not on a domain
◦“/” not part of domain
Planning and designing a website
•define the business requirements
◦meet the client
▪be prepared
▪ask questions—listen to the answers
▪learn as much as you can about their business
▪ask for all the reports they generate, the forms they fill in, their printed brochures, etc...
What questions should you ask your client?
•Who will their primary audience be?
•What is the company's logo?
•Do they have a company logo (this will help you with colours and a theme)? How about some
other graphics/images?
•Will the company's focus change over the next year or so?
•What content will be on the page? This might help you figure out how to organize the material
What is the best thing you can do when designing a new website?
•Look at other websites
•Look at competitors websites
Good website design tips
•have something valuable to offer—provide something useful or interesting
•don't distract with blinking, animated GIFs, auto-loading sound, too much scrolling
•no pop-ups!
•Don't use images on the background unless you know what you're doing
•put a lot of thought into the organization of your page
•minimize clicking (no more than 3 clicks to get to a page)
•have a way to get to the home page on every page
•include a menu on every page (in the same location on every page)
•compress you images before putting them on dreamweaver
•don't let multimedia files bog down your website
•no line of text should be more than 600 pixels wide
•don't make your page too wide (around 800 pixels), user should NEVER have to do horizontal
scrolling
•vertical scrolling should be kept to a minimum
•having the menu button across the top is the best
•use contrasting colours or simple backgrounds to make the text easy to read
•make text large enough to read
•use ALL CAPITAL LETTERS sparingly
•never use more than one exclamation point
•spell check
•never underline words that are not links
•put contact info or a link to it on every page
•test your links
•remove dead links
•include a “last modified” date
◦keep up to date, update your “what's new” section frequently
•don't steal content
•think about how the user will navigate through your website and remember the 3-click rule
•have a consistency throughout your pages
◦colour
◦menu placement
◦layout
◦fonts
◦buttons
•think about the layout, have white space, clean alignment and balance on your pages
•if you get a long page, have a “back to top” button
Things you will see on bad web pages
•navigation confusing, menus in different spots
•ugly design: no colour continuity or white space
•scrolling horizontally to see whole page width
•slow when loading
•broken links
•text hard to read
•spelling mistakes
•stale content
•useless information
•too many pop-ups, ads
•blinking, animations
How to start your design
•decide on where you want the menu, in general it should go along the left side or at the top
◦what will the navigation structure look like?
◦What will the pages be besides the home page?
◦Will there be sub-menus under the menus? (this will affect your folder layout)
•pick a colour scheme you like
•think about your banner
◦what should it focus on?
◦Will the menu be part of the banner?
◦Think about the colours
◦make about 800 pixels wide, don't make it too tall
•sketch it out on paper
Decide on what web pages you will need
•each web page is normally an html file, a file that has the extension .html or .htm
•.html .htm
◦very basic page, just has clickable links, images, sometimes forms
◦the .html file is just a file with html codes that is displayed in a browser to make it look
pretty for the client (IE, Safari, Firefox)
•other extensions for web pages include:
◦.shtml—server slide includes: add some extra stuff from the server before displaying the
page to the client
◦.php, .asp, .cgi—extra stuff that is brought in also from the server, allows for use of data in
a database on the server, more complex form manipulation. .asp is a microsoft technology
Web pages and web site
•web site—a collection of related web pages stored in a folder. The folder may or may not
contain a sub folder
•the web site folder should contain a sub folder called images which holds the image files (.jpgm
.gif, etc) that will be displayed on the page
•the home page for the website, the “starting page” should have the file name index.html
•index.html—if in folder, always first page to show up
Folder structure for a simple site
•decide on the pages you will need
•create a top level folder—use lowercase letters
•give the home page the name index.html
◦must be all lowercase
◦Index.html is invalid
•give other pages appropriate lowercase name with the .html extension
•create a sub folder called images (lowercase) and put all your images in that folder
•domains are case insensitive—files are NOT
More complicated sites
•sometimes website have many sub menus and have lots of web pages
•in this case we need a more complicated folder structure