Computer Science 1033A/B Lecture Notes - Lecture 6: Crystal Computing, Complex Differential Form, Tim Berners-Lee

17 views7 pages
of 7
Warm up questions
what are the chunks of data that are sent over the internet called?
the internet and the WWW are the same thing?
internet is hardware
WWW is software
give an example of a valid IP address
there are 4 parts separated by a dot
each part must be between 0 and 255 is a domain name?
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
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
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
menu placement
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