Week 6

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 • useALL 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 ◦ BUT it is not really that much more complicated, just one main folder with sub folders that contain “sub websites” ◦ each sub website is a sub folder that contains it's own index.html and images sub folder Web server • you will likely build your site on your own machine. When the web site is completed you will need to move it to a web server • web server—the computer that runs software which holds the web pages and serves up (delivers) web page to the client. This compute