Class Notes (838,542)
Canada (510,933)
Laura Reid (129)

Supplementary Notes.docx

14 Pages
Unlock Document

Computer Science
Computer Science 1033A/B
Laura Reid

Lecture 5: Website Design  What are the chunks of data sent over the internet called: packets  Valid IP address: 4 pieces under 250  How many clicks maximum to get anywhere ? 3  Website tips: o Every page should link to home o Have a menu on each page o Compress images o No line of text more than 600 pixels wide o Never underline words that aren’t links  Each web page is an html file that has the extension .html or .htm o Files with html codes that is displayed in a browser o There are other possible extensions:  .shtml (server side includes things before displaying page to client)  .php, .asp., cgi (other things brought in from the server, allows for the use of data in a database on the server, more complex form manipulation  asp = Microsoft technology  Web Site: a collection of related web pages stored in a folder (that may or may not contain a sub-folder)  Home page = index.html (all lowercase)  Images: in an images subfolder (all lowercase names)  On what is the main folder for you? o  Upload using a secure FTP (file transfer protocol)  winSCP, FUGU, Filezilla  Domain name :  Website name:  To get to a specific page: use slashes and an html link;  Can make things more complex: sub websites within websites, these become their own small websites with an index.html and images folder of their own  when you open that sub-website you get the index for that page  What is the software we use to move the webpages to the server? Winscp (sftp—secure file transfer protocol)  What is the name of the web server machine at Western? o Panther  Web Browser: software/program that displays formatted web pages to the client  What input do we give a web browser? html file  What is the output? Dreamweaver changes html files, makes them look nicer  How to look at html code: view source o UI = unordered list o OI = ordered list History of HTML  Tim Berners Lee in the late 1980s  Originally proposed as a way for sharing research papers using the internet and hypertext (immediate links to other documents)  1990: Berners Lee set the specifications for the HTML language  wrote a browser to read HTML files and output linkable papers  html tags: o o o o note: tags always start with < and end with > and the closing tag has the / o Example: Kate’s Website  Used to use notepad (or other simple text editors) to write these codes Tags:  Section Tags o , ,  note that h1 is the biggest and h6 the smallest  Formatting Tags o , , , o bad tag:  don’t underline unless it is a link  Link Tags o  Place holder tags (stand alone or unpaired) o ,  dreamweaver creates tags for us: can see them by splitting or code  Page Title: o Appears at the top of a page when you print it o Search engines look at this o Name of site – subpage o The title tag is what the browser looks for first  Formatting Text: o Headers in dream weaver: H1  H6  H1 is largest  All headers are bolded o Use pixels rather than points for text size o Use EMS or % when the audience may need to enlarge the text  To change the background image and link color on dreamweaver: right click, page properties (link vs. visited link)  Graphics: o Use common, universal formats such as : jpg, gif and png (files that will work in any browser) o Resize and compress an image as much as possible (in photoshop etc.) before putting it in dreamweaver o Any resizing in dreamweaver will NOT affect the download speed as it will NOT make the file size smaller o Always set an alternative and title tag  Meets barrier free access requirements  Shows when the page is loading  Shows when you hover the mouse over it  Shows when you use a text browser o Site must not take more than 25-30s for a 56K modem user (can change in dreamweaver, connection speed  56 kilobits)  Links (5 basic types) o Links to other pages in your website o Link to different websites o Link to an email address o Link on an image  Link to parts of an image o Link to a particular spot on the page (using named anchor); use a # link to the anchor name in the specific site Lecture 6  Tables and Dreamweaver o Tables are made of rows and columns o Where the row and column meet is a cell o Cells can hold any kind of data (links, text, images etc.) o Can have nested tables (tables within a table) o Can be expressed as a percentage or in pixels o Percent: of the browser, not the entire screen o Pixels: resolution affects the way the page is displayed  Normally, people do not have their resolution below 1024x768  If you make the page 900 pixels wide then everyone should be able to view it  If you make it larger (ie. 1200) then some will be able to view it and some will not (without scrolling—if there resolution isn’t higher)  Publishing the website o Moving the website from the machine that you built it on to the web server o Program: FTP (file transfer protocol) or SFTP (secure..) o Note: not all web servers allow certain FTP software to connect to them because of security reasons o Need:  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 webs erver  Start IE or Firefox and check that the transfer worked correctly. ALWAYS CHECK!!  Finding Information on the WWW o What are the two basic types of searches you can perform on the world wide web?  Directories  Search engines o Directories:  Not automated  Real people decide how to organize it (ie. Pick categories and hierarchies)  Drill down further into each sub category to get to a website  The webmaster will submit his/her site to the directory  humans decide whether or not its worthy to be in the directory, if so in which categories  Best known site for directory style search: Yahoo  Yahoo: charges $299 for you to submit your site, this charge just speeds up the process, this does NOT guarantee that the editor will include it into the directory  Doesn’t get as much traffic as a search engine but it gets more high-quality traffic  most likely if they get to your site to have been looking for something similar  Some more examples: yahoo, dmoz and google directory (they gave up on this) o Search Engines  What is the most popular search engine? Google  What new search engine is getting a good share of the market? Bing  What percentage of the market does the most popular search engine have? 66% *  How does it work?  Part 1: o Finding all the data on the web and building a database (similar to librarians getting new books and cataloguing them to put them in the library) o Web Crawlers/Web Spiders: crawl the internet constantly going from web page to web page, building an index (database) o Index contains an alphabetical list of the words it finds, where they are in the page and links where the words were found  keywords o Indexes are stored in a really big database  Part 2: o Given keywords from a searcher (person looking for a topic) returning ―best‖ / ―most appropriate‖ page o Uses index to decide which pages have given key words o Every engine uses a slightly different algorithm to decide the order of displaying the returned pages o Google  ―Page Rank‖ algorithm is ONE of the factors it uses to decide what order to present the pages it found to you  Google’s Page Rank Algorithm  Gives each webpage returned from the keyword search a weight between 0 and 1  The higher the weight the more likely it will be the first page displayed to you  How does it assign rank? o WE give websites their importance (what are WE talking about) o Want lots of people referencing your site o Have IMPORTANT sites referencing your site (quality of the linking sites, even if its high ranking, if it is diluted then you may still not get higher numbers from this) o Pages with lots of links pointing TO them get a higher rank o Content doesn’t matter – only the number of links (regular content updates aren’t going to increase it) o Ranks web pages not web sites o Each page rank level is progressively harder to reach (logarithmic scale) Increase Page Rank  Search Engine Optimization (SEO) o There are three components you need to look for when you are trying to make your site more visible:  Text  Links  Popularity 1. Text:  Users type in sets of words or phrases into the search engine box  Need to know what kind of key words someone would use to try and find your product/service  Step 1: Identify the Crucial Key words o Once you know the words , make sure they are in areas that a search engine deems most important  use the 5s usability test  keep updating key words  Step 2: Put Key Words in Best Locations o Search engines also use the placement of keywords to weight the webpage when deciding which pages to return in the top positions (combines this with the PageRank) o BEST LOCATIONS  Title (tag –MOST IMPORTANT)  Link for all returned results  Is what is linked when you bookmark a site  Visible body (the text you can cut from a page and paste into a notepad)  Key Word Prominence: Near the top is better, make it more relevant and given a higher ranking  Key words closer together get a higher ranking than if they are spaced out  Keyword Density: how many times a ke
More Less

Related notes for Computer Science 1033A/B

Log In


Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.