Warm up Questions:

1. Warm up Questions: 1. http://www.arcticanimals.org/whales/habitate 2. http://www.arcticanimals.org/wolves • Question: Assuming I have this  directory structure for my website on the domain arcticanimals.org • What is the shortest URL I have to type to see the habitat home page for whales? • What URL would I type to see the wolves page?

2. Computer Science 1033 – Week 8 WeB SITE Design & SearchING Click on Bart’s blackboard to see the Google ad that was on during the 2010 Super Bowl “There is no Ctrl button on Chuck Norris's computer. Chuck Norris is always in control.” “Apple pays Chuck Norris 99 cents every time he listens to a song.”

3. Fun with Google • Something cool  http://www.thewildernessdowntown.com/ • Type in the following terms to http://www.google.com and then for each term, hit the “I’m feeling lucky” button: • elgoog • Google gravity – underwater sphere • Chuck Norris • http://lmgtfy.com/

4. Overview of Today’s Topics Using a table for simple layout Publishing your webpage How to do assignment 3 Searching Page Rank Algorithm How to do assignment 3 Review

5. Announcements • Final Exam: Friday, Dec 11 at 9am • Bring your student card and a soft pencil • 2 hour exam • About 150 multiple choice questions • NO calculators, ipods, hats, electronic devices, notes

6. Assignment 2 • Should be marked by next Tuesday • Some lovely ones: • Assignment 3 and Major are posted. • They will take you longer than you think, give yourself LOTS of time to do them. • This week and next week I will give a demo of how to do assignment 3

7. Announcements Major Assignment (assignment 4) due Friday, Dec 4th at 3pm. If you have Windows 7, you wont have movie maker, you can get it for free here: http://explore.live.com/windows-live-essentials

8. Announcements • Assignment 3 • IT will take you longer than you think, give yourself LOTS of time to finish it and to hand it in (Hand it in on before Wednesday, the labs will be VERY busy on Thursday and Friday). • Hints: • Remember your titles • Think about layout, consistency, ease of use! • Follow the specs • Use a table for a clean layout (put the banner in the top row and content in the bottom row) • Common Mistakes  http://www.csd.uwo.ca/~lreid/cs1033/assignment3/SamplesOfCommonMistakes/

9. Announcements • Assignment 3 Hints • THINGS THAT CAN GO HORRIBLY WRONG  • http://publish.gaul.csd.uwo.ca/lreid/other/student1/ • http://publish.gaul.csd.uwo.ca/lreid/other/student2/index.html • http://publish.gaul.csd.uwo.ca/lreid/other/student3/assign3/ • http://publish.gaul.csd.uwo.ca/lreid/other/student7/assign3/ • http://publish.gaul.csd.uwo.ca/lreid/other/student9/major/index.html • http://publish.gaul.csd.uwo.ca/lreid/other/student19/ • http://publish.gaul.csd.uwo.ca/lreid/other/student20/ • THINGS THAT CAN GO RIGHT  • http://publish.gaul.csd.uwo.ca/lreid/other/student8/assign3/index.html

10. Hints for assignment 3 • Remember: • Titles • Headers • File names, spaces, lowercase • Images • Hotspots • Alt, Title • Size within page • On each page • Banner • No Scrolling horizontal/vertically to see buttons • Consistency • Buttons  look, ease of use • Back to top • References page layout • Text colours, contrast • Broken links • Check from a different computer! • Underlining • Colours • Link Colours • Paragraphs • Padding • Followed the instructions (make the anchor links, etc..)

11. How to do Assignment 3 • Colours  look at: http://kuler.adobe.com/ • http://design-seeds.com/index.php/search/category/mineral • Marks for: • Nice Banner • Good Colour Scheme • Alt/title tag on banner/images • No scrolling horizontally EVER at 1000 pixels • Consistency in the layout of the pages and the buttons/NICE LAYOUT ON EVERY PAGE • Underlining • Hotspot

12. Roll over buttons get 1 or 2 marks more • PROPERTY TITLES! Website – Web Page • Inspiring Designs – Home • Inspiring Designs – Before and After • Must use table to lay things out • Headings on pages • Use an image for each page/good size • Layout paragraphs well (don’t squish on edge) • Bold/highlight headings • If you have CSS, you might need to do Insert>Div>Id (give ID a name) INSTEAD of named anchor (named anchor is in CS6 but not CSS)

13. Paragraphs  Centering  DON’T • Hyphens on lists • Emails links • Back to top, anchors • Think about link colours • Link lengths • http://www.csd.uwo.ca/images/CSD_long_photo_16.jpg vs. • Middlesex • Common Mistake: renaming files/folder…this will TOTALLY SCREW up your website if you do not do it correctly!

14. HTML Tables and Dreamweaver • Tables are made up of rows and columns • Place where a row meets a column is called a cell. A cell can hold any kind of data: links, text, images, etc… • Can have a table inside another table (called a nested table) • For CS1033, we will use tables to make a simple clean layout for each of our pages! • Tables can be expressed in terms of one of: • Percentage % • Pixels

15. Tables expressed in terms of Percentage Here is an example: http://www.csd.uwo.ca/~lreid/outreach/iveysurveyTables.htm % of the browser, not the entire screen Another example: http://www.csd.uwo.ca/~lreid/cs1033/ExamplesForLectures/tablesexamples.html

16. Table expressed in terms of Pixels Resolution affects the way a page is displayed. In general, most people do NOT have their resolution below 1024 by 768. Thus if we make our page 1000 pixels wide EVERYONE should be able to view it. If we make our page 1200 pixels wide, some people (the ones whose resolution is still 1024 by 768) will have to scroll horizontally.

17. Resolution 1280 by 1024:

18. Resolution 800 by 600:

19. Some hints for using tables to organize your overall appearance: • Have the border set to 0 • Make sure you give some cell padding, so the text doesn’t go flush to the end of the cell • Use the alignment buttons to make everything look clean. Do NOT centre paragraphs of text. • Use pixels to set up your table initially, don’t go wider than 1000 pixels • Use merge and split to help you define your areas

20. Publishing your Website Move your website from the machine you built the site on to the web server Question: What program do we use to perform the move? NOTE: Not all web servers allow certain FTP software to connect to them because of security reasons.

21. Publishing your Website • Question: There are 4 pieces of information you need to in order to move your web site onto your web server, what are they? • Question: There is 1 more piece of information you need to CHECK that the web site was moved correctly, what is it? • Need to: • Connect to internet if not already connected • Start FTP program • Enter the name of the webserver (host name) • Enter your username • Enter your password • Find the appropriate folder on the local machine (from folder) and the appropriate folder on the web server (to folder) • Move the files from the local machine to the web server • Start IE or Firefox and check that the transfer worked correctly. ALWAYS CHECK!!

22. Hint: Use Google Fonts if you want cool fonts in your web page! • http://www.google.com/fonts • Click on quickuse button and paste the code you get at the google site into your code below the <head> tag. (the code will look like this  <link href='http://fonts.googleapis.com/css?family=Eater' rel='stylesheet' type='text/css'> • Create a new CSS rule in Dreamweaver: • Click on Edit Rule  • Give it a name & hit OK • Give it the font name of the name in the above code (e.g. Eater) • E.g. http://www.csd.uwo.ca/~lreid/cs1033/fontdemo.html • http://www.csd.uwo.ca/~lreid/cs1033/fontdemoAfter.html

23. Marketing your Website • Include the web address for your new site: • As part of your signature on outgoing email • On all printed material  letterhead, business cards, labels, catalogues, posters, media advertisements • Try to make your website be in the “first ten listed” when your customers search using search engines for your site. • How can you do that, we will give you some tips 

24. Finding Information in the World Wide Web Question: There are two basic types of searches you can perform on the world wide web, what are they?

25. Directories • Not automated • Real people decide on how to organize it • Pick categories and hierarchies • Drill down into a category, then into another subcategory, then into another subcategory, and so on, till you get to a website • Webmaster submits his/her site to the directory and then humans decide whether or not is “worthy” to be in the directory and if so, which categories to put it in. • Question: Which site is the best known for having a directory type of search?

26. Directories • Yahoo charges 299 dollars for you to submit your site • This charge just speeds up the process of having an editor judge it, it does NOT guarantee the editor will include it in the directory! • Don’t usually get as much traffic as with a search engine HOWEVER it is quality traffic as usually the person who is looking and drilling down on the categories, is looking to find the products or services that you offer, otherwise they would be looking in a different category. • Real people are looking over your overall site from a human point of view!

27. Sad News – Directories no longer exist! • Examples: • http://dir.yahoo.com/ • Let’s find out about parrots, how would we search? • http://www.dmoz.org/ • Let’s look for information about Ten Pin Bowling • Google used to have a directory: http://directory.google.com/ • But they have given up on it!

28. Break Check out some assignment 2 posters: http://www.csd.uwo.ca/~lreid/cs1033/assignment2/

29. Search Engines http://www.ebizmba.com/articles/search-engines • Question: What is the most popular search engine? • Question: What new search engine is getting a good share of the searching market? Hint: The Colbert Report • Question: What % of the market does the most popular search engine have?

30. How does a Search Engine work? • 2 Parts: • Part 1: Finding all the data on the Web and building a database. Similar to Librarians getting new books, cataloguing them and putting them in the library! • Part 2: Given keywords from a searcher (person looking for a topic), returning the “BEST/MOST APPROPRIATE” pages. Similar to a patron walking into a library, going to the card catalogue and looking for a book.

31. Part 1: Building the Search Database Web Crawlers or Web Spiders crawl the internet constantly, going from web page to web page via links, looking at all the words on the page, building an index (database): Index contains list of alphabetical list of words it finds, where within the page the word was and the links (URL to the page) where it found the words. Words are called keywords

32. Part 1: Index/Database Index is stored in a really big database Looks sort of like this:

33. Part 2: How does the search engine decide which pages to return to the searcher? Uses index to decide which pages have the given keywords Every engine uses slightly different algorithms to decide the order of displaying the returned pages Google uses the “PageRank” algorithm as ONE of the factors to decide what order to present the pages it found to you.

34. What is Google’s PageRank Algorithm? Algorithm gives each webpage returned from the keyword search a weight between 0 and 1. The higher the weight given to the page, the more likely it is that this page will be displayed first to you. Question: How is the weighting done?

35. How do we, as humans, decide who or what is “important” ? Guy A or Guy B ? What is the name of A? What is the name of B? A B A B

36. Questions: • Which site has the highest ranking? Why do you think it has the highest ranking? • Which site has the second highest ranking? Why do you think it is second highest?

37. How PageRank Works – A simple world with only FOUR pages on the entire Internet! Page B Page A Page C Page D Page B Page A Page C Page D • First, assume we only have 4 pages, Page A, Page B, Page C and Page D on the Internet to simplify this. • Each page is given a weight of 0.25 (1 divided by 4) • Scenario 1: • Pages B, C, and D all have a link to Page A. (Thus page A must be very useful because everyone is pointing at it). • Then pages B, C and D are each giving their 0.25 rank to A, so A gets a ranking of 0.75 • Scenario 2: • Page B links to A and C (0.25 divided between 2 pages) • Page C just links to A (all of 0.25 goes to A) • Page D links to A, B and C (0.25 divide between 3 pages) • The Weight of A is now: • 0.25/2 (Bs ranking ) + 0.25 (Cs ranking) + 0.25/3 (Ds ranking) • 0.125 +0.25 + 0.083 = 0.458 • THUS, pages with lots of links pointing at them, must be important so they get the highest weight/ranking

38. Page B Page A (0.458) Let’s Try It Out Page C Page D • Scenario 2: • Page B links to A and C (0.25 divided between 2 pages) • Page C just links to A (all of 0.25 goes to A) • Page D links to A, B and C (0.25 divide between 3 pages) • The Weight of A is now: • 0.25/2 (Bs ranking ) + 0.25 (Cs ranking) + 0.25/3 (Ds ranking) • 0.125 +0.25 + 0.083 = 0.458 • Question: What ranking will pages B,C and D have? • B’s ranking: B has only one link to it, D links to B (D has links to all 3 pages) = 0.083 • C’s ranking: C has two links to it, B and D = 0.125 + 0.83 = 0.208 • D has no links to  so it gets a weight of 0

39. A Weight = 0.458 C Weight=0.208 D Weight=0 B Weight=0.083

40. Summary of Page Rank • Page Rank evaluates 2 key factors: • How many links are there to a web page • What is the quality of the linking sites (although a high ranked page with LOTS of links on it may pass you less because it is spread too thinly) • Page Rank does not take into account the content of the page (thus frequent content updates don’t improve Page Rank necessarily) • Page Rank ranks web pages NOT web sites • Each inbound link is important in the overall total except for banned site, they don’t count. • Each Page Rank level is progressively harder to reach, it is thought to be calculated on a logarithmic scale.

41. How to tick off Google  Because pages with lots of other pages that point at them get the highest weight, “CLEVER” people have tried making up lots of fake websites that all point to their website, thus boosting their ranking If Google catches you doing this, they take you OUT OF THE INDEX/DATABASE!

42. How do I get my page higher up on the results page that Google returns? • Called Search Engine Optimization (SEO) • 3 Components you should look at when you are trying to make your site more visible are: • Text • Links • Popularity

43. Number 1: Text Component • Users will type a set of words or phrases into the a search engine box to find what they want. • It is crucial you know what sets of words or phrases, also called keywords, that users will type to find your products or services. • STEP 1: IDENTIFY THE CRUCIAL KEYWORDS • Once you know the words, make sure they are in the areas that a search engine will consider to be the most important places. • STEP 2: PUT THE KEYWORDS IN THE BEST LOCATIONS • Search Engines ALSO use the placement of keywords to weight the webpage when deciding which pages to return in the top positions (as well as PageRank algorithm weighting)

44. Identify Crucial Keywords • Five-Second Usability Test: • Show people your site for 5 second, then have them write down everything they remember about the webpage. If they did not write down any of your keywords, then you need to redo your site! • Brainstorm to find keywords, use your marketing material and see what pops out. • Think about how people might combine your keywords • HINT: keep updating your keywords: • Question: When do users commonly search for the word allergies?

45. Put Keywords in the Best Locations! • Most important place to put keywords: • Title • Visible Body (the text you can cut from a page and paste into Notepad) • Text around and in links • Text that is above the fold • Some locations that are not quite as important to search engines (but sometimes still considered) are: • Alternative text • Text in the domain name and file names • Meta tag (considered by far the least important)

46. Title-Tag is considered the MOST important text by all search engines • Title tag is what is shown as the link for all returned results • Title tag is text shown when people bookmark your site

47. Body of the Webpage • Search engines think keywords found near the top of the page make the page more relevant and thus give those pages a higher ranking (Keyword Prominence) • Question: If you are searching for 2 or more keywords, like “civil” and “war”, how do you think search engines ranks pages? • Keyword Density also gives a higher ranking • Question: What do you think keyword density is?

48. Another clever trick that people try to beat Google – Keyword Stuffing A simple site about cats: http://www.csd.uwo.ca/~lreid/cs1033/keywordstuffing.html Question: How did I do keyword stuffing with the above page? (I did 2 things, can you find them?) Another example –how is this stuffed?  YouTube video Moral of the story: you USUALLY can’t outwit Google, just use good content to win over your visitors!

49. Body of the Webpage • Text in and around links is used by search engines, for example: • Instead of this<a href=http://www.yarnsandwools.com>Learn more</a> • Do this: <a href=http://www.yarnsandwools.com>Learn more about our wools and yarns</a> • Or this:Learn more about our <a href=http://www.yarnsandwools.com>wools and yarns</a>

50. Number 2: Link Component • Make sure that your links are easy to navigateso that web spiders can search through your content easily and index ALL your content. • NOTE: It is hard for spiders to crawl through: • Image maps • JavaScript • Database Driven Web Pages (ones with ?, &, etc in the URL that are created, CGI pages can be problematic) • Links in Flash documents • Poorly written html (don’t use MS Word, etc to write the html tags!)