Study Guides (248,643)
Canada (121,651)
Laura Reid (46)

Comp Sci Exam Notes.docx

34 Pages

Computer Science
Course Code
Computer Science 1033A/B
Laura Reid

This preview shows pages 1,2,3,4. Sign up to view the full 34 pages of the document.
CS 1033A – Final Exam Notes Page 1 Compsci 1033B – Final Exam Notes Lecture 01: MULTIMEDIA AND COMMUNICATION - 7-15 seconds to make a good first impression, 4 min for someone to decide to go beyond first impression - MULTIMEDIA: everything you can hear or see; Media include texts, books, pictures, music, sounds, CDs, videos, DVDs, MP3 players, iPods, records films etc - MUTLTIMEDIA (technical): Describes any application or technology that can be used to present: Text, images, sound, animation video - We communicate using the five senses Software applications  Delivery on the Internet Via Website  Combined into a media application to inform, educate, entertain Multimedia History Quiz - Earliest drawings/paintings by humans discovered in France - The first permanent photograph was taken between 1820-1830 - The first motion picture was recorded between 1880-1890 - The first full length movie with synchronized dialogue (talkie) was The Jazz Singer - One of the first full length movies to use colour was The Wizard of Oz - Arpanet was the name of the predecessor to the internet - Tim Berners-Lee invented the World Wide Web - Mosaic was the first graphical browser for the World Wide Web - The Rolling Stones was the first band to give a concert over the Internet - Toy Story was the first full length feature film that was completely computer generated - Napster was an application that revolutionized/irritated the music industry in 1999 - Digital cameras became fairly accessible and affordable to the public in 1996 Multimedia History of the Internet - 1969: NETWORK TECHNOLOGY INTRODUCED  ARPANET o ARPANET: Advanced Research Projects Agency Network, 1969 o First packet switching network and predecessor to the internet (discussed in 1962) o Objective: a network technology to allow researchers at various locations across the country to share information o 4 locations in 1969 – UCLA, Stanford, UC Santa Barbara, University of Utah o 1970 – East coast - 1991: WORLD WIDE WEB is finished and debuts (Tim Berners-Lee) - 1993: Mosaic – First graphical browser (web pages with images), by Marc Andreesen, Erin Brina, and Tim Clark (transformed internet from research to household) - 1998: GOOGLE search engine operates by Larry Page & Sergey Brin - 1999: Napster debuts, allowing users to download and share MP3s - 2000s: Integration of computer, memory storage, digital data, camcorders, MP3 players, Ipods, speakers, telephones HD TV and other technologies - Future: multimedia will continue to grow into more than 1 $100 billion industry with top three applications  #1 – Entertainment $15 billion  #2 – Publishing $7 billion  #3 – Education/Training $7 billion o E-leaning, iTV (interactive TV) o Web 2.0 (sharing between users) – trend in web design, development, can refer to second generation of web-based communities and hosted services (social networking, wikis, blogs) which aim to facilitate creativity, collaboration, and sharing between users CS 1033A – Final Exam Notes Page 2 o Laptops becoming smaller, thinner, more powerful o Legal issues – copyright, rights management, piracy  problematic since rapid technology changes o Better skills – strong understanding of media and moving images as well as traditional IT and programming skills MULTIMEDIA FEATURES 1. INTERACTIVITY o USER CONTROL over the application o Experience ACTIVE rather than passive as with television o Examples: clicking on links on the internet, on-line computer-based exam, driving simulation 2. HYPERLINKING o INDEX allows for “jumping” around sections o Vs Sequential: start at beginning and move to the end (books, movies, videos)  HTML has features that allows you to build hyperlinks to other webpages or location on the same page 3. COMPUTER BASED DELIVERY o Computer-based multimedia applications INTEGRATE the various media components and ALLOW interactivity o Modes of delivery of the applications include: video games, interactive web applications, CD ROM disks, info kiosks - Multimedia categories and applications o Education – offering instruction (CD-Roms for preschoolers, bio in virtual labs) o Entertainment – largest category (games (CDs/web), proprietary systems (X-box), MP3 players/ipods) o Inform – Encarta and interactive world atlas (interactive multimedia including sound, video, and 3- D animation to provide information and illustrate concepts) o Business – businesses delivering marketing applications and employee training on CD’s and Internet (job openings, product lines, services) - How should you deliver the application – WWW vs CD/DVD CD/DVD World Wide Web Access Time View instantly by inserting into drivMay encounter slow connection speeds Ability to change Cannot change content – must Easy to update material, new updates can content recreate and redistribute be accessed instantly - Required equipment o Development systems: systems used by multimedia developers to create applications o User systems: systems used to playback multimedia applications o Multimedia developer requires: sound card, video card, microphone, speakers, camera, DVD drives MULTIMEDIA COMPONENTS TEXT ATTRIBUTES - Dual role: o VISUAL representation of the message o GRAPHICAL element - Use of text in multimedia applications varies on: o The type of application – educational, entertainment, business o Audience – children, teens, adults, elderly, ESL (less text for children vs adults) - Changing the mood of webpage by changing: o Text attributes – colour, size, font type o Design/layout/placement of text – bullets, alignment, text in groups CS 1033A – Final Exam Notes Page 3 - Emphasis can be added by varying text attributes o Font type – Arial, times new roman  SERIF – tails, script, body paragraphs (times, courier new, century schoolbook, palatino) Tails = easier to read on paper  SANS-SERIF – no tails, block-oriented, headings, titles (arial, verdana, Helvetica, comic) Easier to read paragraphs on websites, short headings o Style – regular, bold italics o Kerning – space between pairs of letters, measurement expressed in “em” (emphasis) – negative, 0, positive values  Helps align multiple lines o Tracking – space between all the letters horizontally o Text Leading – vertical space between lines of text, measured in positive, 0, or negative points  lower value – closer together; higher value – further apart o Size – pts vs. pixels o Colour – red, blue, black... o Special effects – underline, shadows, superscript, subscript - Text size – Pixels vs. Points PIXEL (.ppi aka dpi) (in general use pixels) POINTS (.dpi) unit of measure for monitor resolution (px) unit of measure for printer resolution (pt) -WEB -WORD - # of pixels per inch of monitor display -# of dots per inch -a display setting of: 1280x1024 has 1.3 million DPI,-absolute type size – usually used in printing 800x600 has 480,000 DPI -higher dpi = better resolution -standard resolution on Mac – 72 dpi -points are a PRINT unit of measure -standard resolution on Windows – 96 dpi -PC fonts 25% larger than mac fonts on websites -fronts more precisely the size you want on the -if web document – text expressed in points screen -can be displayed much larger or smaller than you -some browsers will not allow the text size to changeexpect (IE – no, FF – yes) - - -Control over the viewing size -print style sheets created to print text using point*72 pts WILL ALWAYS BE 1 INCH WHEN PRINTED, *develop websites using the pixel system regardless of what monitor it was processed on 10 px is SMALLER than 10 pts – NOT EQUAL - Text colour - Hexadecimal code o Represented as a number of 6 hexadecimal digits o Made up of decimals (0-9) and letters (A-F) o Represents RRGGBB o Red = #FF0000, White = #FFFFFF, Black = #000000, Western = #660099 - Text design – readability, visual appeal (compliment graphics, position), mood creation (headings sans- serif, body serif), o Avoid exotic fonts for consistency on different systems o Use a max of 2-3 different types of fonts o Use a max of 2-3 different colours in a document/website o NEVER use underlining in a webpage - CRAP: Principles of Poster & Webpage Design: o CONTRAST: avoid making 2 elements just similar – either made them same (colour/font) or VERY different o REPETITION: repeat some aspect of the design throughout CS 1033A – Final Exam Notes Page 4 o ALIGNMENT: items are aligned – creates stronger cohesive unit o PROXIMITY: group related items together *physical groupings imply relationship Lecture 02: IMAGES/GRAPHICS - We rely on images for – Information, explanations, entertainment - Graphics originate from: non-digital medium (paper copy of a photo), outside world, create image - Computers only understand/speak “BINARY” (digits 0 and 1) – convert all words, images, etc. to 0 and 1 - DIGITIZATION: the process of translating a piece of information (text, images, sound recording, video) into BINARY BITS (computers only understand/speak binary) o BIT: short for Binary Digit, value of “1” or “0” – fundamental units of information in a computer system o When press a key, binary code sent to RAM (memory)  CPU  Video card  On screen o Measurement system – binary system (base of 2, exponent = number of bits) 8 o BYTE: collec1ion of 8 bits  (22) = 256 possible combinations of 1s and 0s  Ex: 2 = 2 values (0, 1), 2 = 4 values (00, 01, 10, 11)... - HOW MANY SYSTEMS ARE THERE: o Binary  (2 Binary Digits/ BITS) 0,1,10,11,100,101, 111,1000 o Octal  (8 Digits – or think of it as 8 number values) 0,1,2,3,4,5,6,7,10,11,12,13,14,15,16,17,20 o Decimal  (10 Digits) 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20 o Hexadecimal (16 Digits) 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F, 10,11,12,13,14,15,16,17,18,19,1A,1B,1C,1D,1E,1F,20 - - IMAGE: represented by a grid (array, matrix) of squared picture elements called PIXELS (the smallest image component and thus shows the smallest detail) o Pixel – numerical value corresponding to a COLOR INDICATOR (bw or colour) o 640x480 screen – 640 dots on each of 480 rows  300,000 pixels - Coding colors o Black/white = 1 bit ONLY (0 = black, 1 = white) o 2 bits – combination of black and w4ite (01/10)  grey o More bits, more shades... 4 bits  2 = 16 grey shades USED FOR WEB - Additive Model (RGB) USED FOR PRINTING- Subtractive Model (CMYK) (k=black) Primary colours: Red, Green, Blue Primary colours: Cyan, Magenta, yellow “added” light to a black background in order to “subtracted” from a white background obtain color shades - In “TRUE COLOR” each pixel represents some color shade – Uses 24 bit representation = 16 million colors - Color can be expressed in: RGB Code Hexadecimal Code Each pixel is represented by 3 values -consists of 16 unique symbols: -ie: light yellow = <255,255,127> 0,1,2,3,4,5,6,7,8,9,E, and F Syntax: -color represented by 6 digits: ie, #FFCC66 Each value ranges from 0-255 256 color shades = 2 bits -16 million colors in the spectrum (256 ) Red: <255,0,0> Red: #FF0000 Green: <0,255,0> Green: #00FF00 CS 1033A – Final Exam Notes Page 5 Blue: <0,0, 255> Blue: #0000FF -Web-safe colors: only 1,3,6,9,C,F o RGB does not = Hexadecimal, need converter o Cathode ray tube devices (such as computer monitors) can only display colour with red, green and blue light – this is the color system of the web o Note: equal amounts of red, blue and green make gray - Types of Graphics – Bitmap or vector – effects how graphics are displayed on a computer screen: Quality, file size, time to display graphics BITMAP (zoom in to pixels) VECTOR (zoom in, no pixels) -images made up of small squares called Pixels -image is represented with lines and arcs that have a -Editing pixels: changing color, shade, brightness mathematical relationship Advantages of using a small image rather than larger: -describes the drawing of the shape -shorter time needed to display on screen - Line: starting point, direction length -smaller file size - Rectangle: start point, width height Disadvantages: - Circle: center and radius -distortion occurs when image is enlarged *SMALLER FILE: records mathematical relationship -as image is enlarged (resized): -as image enlarged (resized): - Dots become larger, edges more jagged - Dots become larger, edges still clean, crisp - Quality decreases - Quality is maintained – no distortion - File size increases - File size increase **Vector CANNOT be converted to Bitmap, but Bitmap CAN be converted to vector BITMAP-BASED programs “PAINT” VECTOR Graphics programs – “DRAW” -ability to edit an image’s pixels -greater control and precision with free-hand tool -images from scanners, cameras -display more accurately on screen -need a “PAINT” program -download faster because support of Flash and Scalable Vector Graphics (SVG formats) -produce smaller files that download faster -more details in vector-based illustrations -must use a “DRAW” program – draw and edit paths Photoshop, paintshop pro, photoplus Adobe illustrator or Macromedia FreeHand, Corel Draw (but photoshop v6.0 has vector features) - QUANTIZING  How many discrete values (bits) will I use to represent each pixel  represents the colour combinations - Graphic Attributes  IMAGE QUALITY: Image resolution, image bit depth o IMAGE RESOLUTION (ppi/dpi): the number and spacing of pixels in an image  The number of pixels per square inch on a computer-generated display  Ex: if resolution 100 ppi, each pixel 1/100 inch  When you increase the number of pixels, increase quality of detail in the resolution  For different output delivery:  Web – set to 72 dpi (smaller graphics, don’t see detail)  Laser Printers – 300-600 dpi  High end imagesetters – 1200 dpi, 2400 dpi, or higher (newspapers/magazines)  Image size: the physical dimensions of an image  If number of pixels in an image is FIXED:  decreasing the size of an image increases its resolution (crisper edges)  increasing the size of an image decreases its resolution (pixelated, jagged) CS 1033A – Final Exam Notes Page 6 Lecture 04: GRAPHICS CONTINUED - IMAGE BIT DEPTH (aka COLOR DEPTH): maximum number of colors used to represent an image  The more bits used the more color info stored to describe the color of a pixel  Quality improves and larger file size  Human eye can detect about 10 million colors, therefore, storing more than 10 million colours is pointless, so we only use 24 bit color (16 million colours) - FILE FORMATS o Universally supported files: universally supported by graphics industry  JPG, GIF  When an image is being sent to another application, convert to JPG or GIF o Proprietary files (NATIVE FILES): Default files used by specific software application, can be Bitmap or vector formats psd, dwg, pic – can save in native format or universal format  PSD: Adobe Photoshop, AUP: Audacity, MVMM: moviemaker  Not meant to be transferred to other applications  Software-specific image properties can only be retained when an image is saved in the software’s native format (layering in photoshop) o CDR: CorelDraw – vector o DWG: Autocad – Vector .GIF – Graphics interchange format (bitmapped) .JPG – joint photographic experts group (bitmapped) -attributes file format -attributes file format -compression -compression -color resolution -progressive jpeg -dithering -interlacing **distorts edges where there is sharp contrast -transparency ARTIFACTS: noise/specs around the image -common image format used on the internet -cross platform -supports a max of 8-bit color scheme (8 bits/pixel = 256-stores full color information – max 24 bits/pixel (16 colours) - good for clip art, not photos million colors) -best for large areas of solid, flat color -best for: blends of color, softer shadow effects and subtle changes in color -NOT for well defined lines or sharp contrasts between colors -uses: illustrations, logos, text as graphics, cartoons, -uses: photos, computer games, screenshots, stills from buttons a movie **tiny file size and limited colors **larger file size but full color scheme “LOSSLESS” compression – no data discarded during “LOSSY” compression – data is discarded each time file compression  QUALITY KEPT compressed QUALITY DEGRADES COMPRESSION TECHNIQUES: 1024 bytes = 1 KB - GIFs – “LOSSLESS” compression  no discard of data o Does not get blurry or mess o Uses simple technique called LZW compression to reduce files sizes of images by finding repeated patterns of pixels o Never degrades image quality - JPGs – “LOSSY” compression  discards data o Not all information in original image is preserved – NOT the same as original o Degrades image quality CS 1033A – Final Exam Notes Page 7 o Compression achieved by “forgetting” certain details about the image, which JPG fills in later when it is displayed o Degree of lossiness can be varied by adjusting compression parameters  0% compression = 100% quality, 95% compression = 5% quality o *work with image in native format then save final in jpg o Uses compression algorithm which can be applied on sliding scale o When saving jpg image, can generally select quality or compression ratio of final image o Observations:  Quality of JPEG file is proportional to the file size  Higher image quality setting (has a lower compression value) results in less data being discarded File Format File Extension Tagged Image File Formats • Most widely used bitmapped file format • Supported by image-editing applications, scanning software, page- (.TIF, .TIFF) layout programs, and word processing software. • Supports bit depths from 1 to 32 bits • Cross platforms for MAC, PC, and Unix systems • Most commonly used when the output is printed • Vector based graphic Encapsulated Postscript (.EPS, .EPSF) • Popular image files since they can be imported into nearly any application. Windows Bitmap • Standard bitmapped format on the Windows platform (.BMP) • Supported by most Windows applications. Graphics Interchange Format • Bitmapped graphic • May see it as “CompuServe GIF” since Compuserve created it (.GIF) • One of two standards used on the Web without plug-ins • Gif format only supports up to 256 colors CS 1033A – Final Exam Notes Page 8 - Sources of Graphics  graphics must be in DIGITIZED form to use in multimedia application o Digitized cameras, camcorders: captures images and digitizes them into computer images through its software  Megapixel: how many millions of pixels you can capture in a photograph on your digital camera o Scanners: digitizes drawings, illustrations, and 3D objects into computer images using its software  The scanner or the camera determines how many samples to take – measured as dpi (dots per inch o Internet sites: free clipart, on-line stock photo library ($$) SERVERS AND UPLOADING - Uptime: how long does server stay up - Upload: transfer files to server so they can be displayed on the web - Advantages of a server: 1) Connected: on all the time and connected to internet 2) Always available: website always available since always on 3) Taken care of: security and maintenance by people - Panther: name of computer, “server”, that hosts uwo website o Host name: o User website: - FTP: file transfer protocol o Ex: SSH Secure File, Filezilla, WS-FTP, Fugu (for mac) o Some file transfer programs do not connect to all servers - S-FTP using Secure shell CS 1033A – Final Exam Notes Page 9 o SHELL CLIENT: can type in commands by hand – but it’s in Unix o FILE TRANSFER CLIENT: allows us to transfer files to panther – o Setting permissions:  Sometimes you can’t see your files on internet because files are “locked” after uploaded  Solution 1: change file “permissions” – Every time you upload new file, go to Shell window and type in “publish  Solution 2: change file “permissions” – using Secure File Transfer, everytime you upload new file change permission rights on that file or folder (change properties)  “Horseshoe”– checkmarks shaped in an upside down “u”  644 for file, 755 for folder How images are used - For printing: 1) Quality, 2) File Size - For the Web: 1) File Size, 2) Quality (DOWNLOAD speed) – objective – download website as quickly as possible OPTIMIZE IMAGES: reduce the file size (download time) without compromising image Quality - 1) File formats – choose jpg or gif - 2) Reducing color resolution – 24 bits, 16 bits, 8 bit - File formats acceptable on the web: gif, jpg, png - Color resolution o GIF control: color resolution (number of colors) support 8-bit color – 256, 128, 64, 32, 16, 8 bytes  By changing the color resolution (bit depth) can lower download time - BMP files – no compression, stores information about each pixel, each pixel is 1 byte - GIF files – divide image into shapes on a grid (startx, starty, endx, endy, color) o Each shape records 5 bytes o Another way:  Looks for patterns: ex: 12345123451234512345, 1=12345  1111  Builds a decoding hash table (1 = 12345) - JPEG files – conversion programs try to save information about brightness (human eye pays more attention to brightness than color details). If it finds two adjacent pixels with very similar colors, store both pixels as same color and discard other color - DITHERING: (when saving GIFs) most common method of reducing the color range of images down to the 256 colors seen in 8-bit GIF images o Juxtaposing pixels of two colors to create the illusion that a third color is present (grainy look) o BROWSER SAFE PALLETE: 216 colors honoured between MAC & PC browsers, operating systems, and computer platforms o If image uses color hues outside browser safe palette automatically dithers displayed image into browser-safe image o Juxtaposes coloured pixels from browser-safe palette in order to simulate any color which is not in palate o Can reduce number of colors in a GIF and choose options to control the way colors dither in application or browser - Interlacing technique: how images downloaded to your screen (applies to GIF files) o Process by which image is drawn in a series of passes rather than all at the same time (file size bigger) – see full image, gets clearer as downloads - Transparency: allows page background to display through the image so the image appears to have no visible border around it  supported by GIF and PNG ONLY - PNG (Portable Network Graphics) o Developed as replacement for GIF due to legal issues with LZW compression – starting to replace o LOSSLESS compression (no discarded) CS 1033A – Final Exam Notes Page 10  PNG-8 (max of 256 colours)  PNG-24 (max of 16 million colours)  Allows images to have up to 48 bit color (but would never be necessary) – more for photos o Can set which color bit depth you want to make file sizes smaller o Advantages of PNG:  Lossless compression  Smaller/same size as GIFs keeping lossless (5-25% smaller)  PNG better than JPG with images that contain text or line art  Supports opacity and translucency o Disadvantages of .PNG:  Older browsers may not support  No animation (unlike GIFs)  File size for 24 bit color photographs bigger than JPG files - Reduce the download time by using any or all combinations: 1) Reduce file size 2) Choosing .jpg or .gif formats 3) Reducing color resolution (24 bits, 16 bits, 8 bits) - Goal: download web page fast – download time effected by graphic file size and file format o File size  Use smaller sized graphics expressed in “KB” measurement to reduce amount of webspace needed to store image  Recommended file size for graphics on the internet is no larger than about 100KB, otherwise it will add seconds to download time o File Format: .GIF or JPG rather than BMP, TIFF or other o Most graphics software can export from any extension to .jpg or .gif Lecture 05: WEBSITES - Why build a website o Reach potential customers o Details on services/products providing testimonials - Process: o Choose a domain name o Order Web hosting o Meet with the client o Create website - Canadians purchased $40 billion online, 28 hours online each month, 1/373 web pages/CAN household - Web searches worldwide = 5.7 billion per day - EBAY – online auction and shopping, March 2008 revenues $8.7 billion o Sept 1995 – Pierre Omidyar – Echo Bay consulting, “broken’ Laser pointer o Sept 1996 – Jeff Skol (Movie producer) – Marketplace for goods and services o Sept 1998 – went public – Meg Whitman (Harvard, Hasbro) – Vision: “connecting” people o John Donahoe – CEO of Ebay Website Startup - THE INTERNET: a collection of local, regional, national and international computer networks that are linked together to exchange data and distribute processing tasks o a global system of interconnected computer networks that use the standardized Internet Protocol Suite (TCP/IP) to serve billions of users worldwide; a network of networks CS 1033A – Final Exam Notes Page 11 o The Internet is hardware - the World Wide Web is software that runs on the Internet! o TCP = Transmission Control Protocol developed by ARPA (ARPANET) o Works by circuit switching or packet switching - HOST: a computer on the internet that provides services such as web pages, emails, web storage - ISP: internet Service Provider  Western, Bell, Rogers, Execulink, Costco o Allows one to connect to the internet o Company that maintains an internet host computer providing internet access and user account for accessing internet, e-mail box, webspace to host website o offers connection via telephone lines, cable TV or personal satellite dish - data travels from one internet host to another along best route, if links overloaded/out of service – rerouted - IP (Internet Protocol) Address: uniquely identifies each computer/device connected to the internet o An IP Address is 32 bits (4 bytes) wide and may be represented various ways o Consists of 4 numbers (dotted-quad - most popular) = o Each quad must be between 0-255 o Picks a route for a packet, stopping at routers (devices) which pick the next best machine/network to send the packet to (the router is the central switching device). - DOMAIN NAME: the text name corresponding to the numeric IP address of a computer on the internet o *only what comes after www – ex: (; ( o 2 parts – identifies the NETWORK and the specific COMPUTER o When browsing a website, IP address determines successful communication between your computer and website o A DNS (Domain Name System) maps the domain name to the correct IP address so data can route to the correct computer - Finding your IP address –, - Finding IP address of any website – Command prompt type ping and the website - URL: Uniform Resource Locator – an Address of a web document on a computer o Every webpage is referred to by a unique URL - Domain name rules o Max of 67 characters (including extension) CS 1033A – Final Exam Notes Page 12 o 0-9, a-z o Dash character (hyphen) o NO UNDERLINE, no spaces, cannot start or end with dash, case insensitive, no _ o Must end with a domain extension - .net, .com, .org... (TLD) - SUBDOMAIN: a domain that is part of a larger domain, two or more parts (labels) separated by “.”s o – domain name:, Subdomain: “en” o Used to organize website content .com is the first level domain (top level domain  TLD) Mycars is the second level domain  is the DOMAIN mycorvettes is the third level domain – subdomain of the domain “” year2005 is the fourth level domain – subdomain of “” o Rules:  Max of 127 labels (each level is a label)  Each label max 63 characters long, min 3 characters  But whole domain cannot exceed 255 characters, including TLD - TLD: identifies the type of organization that is associated with the domain o .com (commercial organization, business, companies), .net (internet administrative site, network providers), .org (non-profit organizations), .edu (educational institutions), .gov (government agencies), .info (information), .biz (business), .ca (Canada), .us (united states).... - Choosing domain name – pay on a per year basis, must re-new o search:,,, - WEB HOSTING: the SERVICE that provides internet users with online systems for storing information, images, video, or any content accessible via the web o WEB HOSTS: (ISPs) COMPANIES that provide space on a server they own for use by their clients as well as providing internet connectivity (rogers, execulink, AOL...) **files must be hosted on webserver provided by ISP to be available on the internet o Why not to host website on your computer:  Expensive, continual connection (needs 24/7 high speed connection), technical (complicated), support (server maintenance requires 24 hour support, skills, knowledge) o Criteria for choosing web hosting company: disk space (5-10GB), bandwidth (amount of traffic that is allowed to occur between your website and the rest of the internet in a given time period), web site speed, database/programming language support, technical support, uptime, FTP access, web statistics summary, scripts availability, web provider Lecture 06: WEBSITE CREATION AND DREAMWEAVER CONCEPTS Effective Website Design - Good features: o KISS Principle (Keep it simple, stupid) o Consistency o Color o Balance o Easy to navigate - CREATING A WEBSITE: - 1) Planning and Design – Meet with client, decide on colors, fonts, background, links o ALWAYS call splash page index.html – that way domain name leads right to it CS 1033A – Final Exam Notes Page 13 2) Implementation – who will maintain? straight HTML programming vs Web page software? complexity, KISS principle, CRAP principles, Test in Netscape, explorer, firefox, documentation Implementation: Designing for Web a. WEB PAGE: HTML (hypertext markup language) – computer instructions used to create web page, browser reads html code i. HTML – cross platform, any computer can read ii. HTML Tags: xxxxxx b. WEB SITE: collection of web pages created and maintained by an individual/organization c. WEB SERVER: computer that stores web pages and makes them available for people to see on the internet d. WEB BROWSER: program that allows you to view the internet (IE, FF, Netscape, Safari...) 3) Publish – Web space, use FTP software, upload once website is ready, Back up files 4) Maintenance – who is maintainer, training, update frequently, documentation, backup information o Make sure allow for frequent updates in design Lecture 06b: DREAMWEAVER CONCEPTS - Web Authoring Software – WYSIWYG (what you see is what you get) o Dreamweaver: web page editor and site management tool  SITE MANAGEMENT: organize files/folders, moving files, rearranging pages and updating links easily  records HTML code as you build o Interface:  Document window: area where you build webpage  Panels: provide you with commands/properties and characteristics of the current object or task you are busy with – can move them, most common floating is property inspector  Site panel: folder that you are currently working on, gives filenames, path directory, etc  Property panel: characteristics of objects/text that you have inserted (size, color, font) o Navigation styles – make sure consistent between pages - Creating a New Site o ** ALWAYS identify to Dreamweaver: the folder where your website will be stored through Manage Sites  New site: no files exist yet, but will be creating them  Folder/files exist: but never worked with files in DW o Identify Site name (descriptive name) and local root folder (where all pages stored) o File names:  Do not use spaces in file names and folders (allowed - %20 = space)  Do not use capital letters – PANTHER IS CASE SENSITIVE  .htm (hypertext Markup) – DW versions prior to 8, based on Dos/windows 3.x  .html (hypertext markup language) – DW 8  .shtml (server side includes) means that html document has special commands for the server to process  .cgi (common gateway interface) – instructions that causes events to happen on server by executing programs written in perl, c..., used for database access, forms processing  .asp (active server pages) – scripting language developed by MS, script embossed within a webpage along with its HTML, causes active server side processing  Same function as .cgi but integrated into Active X environment  .php (hypertext pre-processor) – alternative to asap, script language and interpreter used primarily on Linux web servers, empeded within web page along with its HTML, before CS 1033A – Final Exam Notes Page 14 page sent to user that has requested it, server calls php to interpret and perform the operations called for in the script o Script: special instructions beyond DW commands - View Layouts: o Design view: shows WYSIWYG view o Split: combo of both views (design and code) o Code View: shows your HTML code - Page Title Property: associates a general description of what webpage is about – an identity o Displays title on first line (title bar) when page open in browser window (CHANGE FOR EACH PAGE) o Important: when printed, identity - Entering Text o Automatic line wrapping o width of paragraph depends on width of web browser window (unless in table or CSS style sheets o paragraph break – leaves plank line between lines ( HTML tag) – Press o Line Break – no space between lines ( HTML tag) – press - Formatting Text o Control:  Headers – H1, H2, H3, H4, H5, H6 (predefined approximate sizes and bolds text)  Text color – hexadecimal #  Text Size – use pixel system (pts larger)  Font type – i.e. Times New Roman, Calibri  Special effects – bold, italics, underline etc. – DO NOT USE UNDERLINE o Indenting paragraphs - Page properties: (set defaults) o Set background color, background images - Graphics – enhances appearance of a web page o Images from scanner, digital camera, clipart, internet o Formats – gif (clipart), jpg (photo), png o Lower download times – use smaller sized graphics, resize larger image in graphics package not DW o Optimize: color resolution, compression will affect quality and size - Download time of page: Benchmark: 56k modem speed, max of 30-35 seconds o See status bar – total size appears in kb (edit>preferences>status bar) - Image attributes – using property inspector: size, space around image, border, alternative text, alignment, sharpen, contrast, crop o Alternative Text: caption in browser, displays text associated with the image  May display while graphic loading, or if using a text only browser  To meet “barrier free access”  For Firefox: insert title=”xxxxx” before alt=”xxxxx” - LINKING TYPES o To another web page within your site in your folder – point to the file o To another website on the internet (start with http://)  Use target field to open in new window – set to “_blank”  Type URL address directly o To an e-mail address  Select text for hyperlink, insert e-mail link  mailto:[email protected] o Creating an image hyperlink  Select image, in property inspector click on folder, select path directory o Create multi-links within an image – image map (HOTSPOTS)  Select image, type descriptive name in map field, click on drawing tool, draw an area on image, click folder and indicate file associated with hotspot o To jump to a specific spot (other than beginning of the webpage) within a web page (setting bookmarks, anchors, targets CS 1033A – Final Exam Notes Page 15  Create the anchor  Create the link to the anchor  ANCHORS: predefined anchor (#top), returns you to top of page  In IE: no need to define “top”, but do in FF – so ALWAYS DEFINE  To get rid of blue link lines – click on image and change brdr to 0 o You can link to files of type: Other than html files, Proprietary software (word, excel – audience needs software on their system), Images (.gif, .jpg....), Acrobat reader files (.pdf) - Tables – control web page layout and customize effects o Table width: expressed as % - covers a percentage of the screen, fixed – width fixed on screen  Assignments – FIXED 780 pixels for width o Inserting a table – click where you want table to appear, select insert>table... o Selecting table – place mouse over table’s cell grids until see red outline, single-click o Merging cells: highlight cells you want to merge, click merge in property inspector o Splitting cells: highlight cells you want to split, select split icon, enter information o Table properties: can control – Layout, width (pixels/percent), cell padding (space around contents of each cell), cell spacing (space between each cell in table), borders (0 = invisible) o Cell properties: applied to one cell or group of cells: horizontal alignment, vertical alignment, width/height, cell border (colour), background color Lecture 07: MARKETING THE WEBSITE - WEB PUBLISHING – upload/”ftping” completed pages to server with Secure Shell Client or from within DW o Use FTP software o File Transfer protocol: an internet standard that allows you to upload and download files with other computers on the internet  NOT ALL FTP SOFTWARE can connect to a web server (security, firewalls)  Not all FTP clients will connect to a server – Secure Shell, Filezilla, cutepdf, Fugu o Added features: Via FTP software can delete, rename, move, and copy files on a server o DOWNLOADING: process of receiving a program, document or file via a network from another computer - Remote site (server)  Local computer o UPLOADING: Local computer  Remote site (server) o Publishing the website: Need 4 pieces of information from web host: 1. Host name (ex: 2. Username 3. Password 4. URL/Web page address - Marketing – include website address in “signature”, on all printed materials, advertisements - Finding information on the internet: use program that searches internet for topics or keywords and points you to a site DIRECTORY vs SEARCH ENGINE (85% of people find sites through search engines) SEARCH ENGINE - Google, Alta Vista, Hotbot SUBJECT DIRECTORY - Yahoo,, AOL -A program that enables the user to search internet sites -a program that enables the user to search internet sites - User types a list of keywords -internet sites are organized by subject and topic -allowing users to choose a subject interest and then browse the list of resources in that category - returns a list of the documents where the keywords collection of websites organized by topic were found searches a database of information about the internet Human-selected (hand-picked) internet resources are arranged and classified in hierarchical topics Uses spiders, webcrawlers to gather database Human editors review webpages, rank them, organize information of websites; index sites and score pages andthem into categorized list with brief descriptions puts the information into a database CS 1033A – Final Exam Notes Page 16 Publisher registers into database, or wait for spider Wait for human editors Examples: Google, altavista, Hotbot Yahoo,, AOL, Open Directory (open directory is 1% size of google) - SPIDER/WEB CRAWLER: web software that constantly searches for new web pages and follows any links - DATABASE: addresses, page titles, significant words, topics o search engines access the database NOT the internet sites - META-SEARCH ENGINGE/METACRAWLER: internet search engine which searches other search engines o Uses searches of other engines, returns the “top” results, doesn’t create its own databases - Top search providers: google (62%), yahoo, msn - How does Google work: 1. Gathers the Information: crawl and index billions of pages of WWW, performed by Googlebot, a “spider” which connects to web servers around the world to fetch documents. Spider gives each retrieved page a number so it can refer to the pages it fetched 2. Build a database (index): List every document that contains a certain word 3. Rank results: rank them in terms of relevance – google uses many factors in ranking: a. PageRank algorithm – how many links there are to a web page from other pages, quality of the linking sites b. Frequency of keywords in a webpage c. Appearance – words right next to each other 4. Rank Results: make a list of documents and their scores – take the documents with the highest scores as the best matches a. Google also shows snippets from each document that highlight the words the user typed b. In search ranking, google returns the ranked URLs and the snippets to the user as results page - SEO: Search Engine Optimization: 3 Components you should look at when you are trying to make your site more visible are: o Text:  STEP 1: IDENTIFY THE CRUCIAL KEYWORDS  STEP 2: PUT KEYWORDS IN BEST LOCATIONS (Title; Property Title; Visible Body Text around and in links; Text that is above the fold (first screen))  Keyword density o Links: No broken links o Popularity: Link-popularity and click-through popularity - CACHED: highlights where searched words are - How to improve ranking of website in a search engine: o Ensure pages have full meaningful titles  The most important tag, heading people will see in search engines xxx  DW = the property title – important: UNIQUE property title attribute for every page o Add a meta ‘description’: description of the site (1-2 lines) which sometimes appears along with the title in the search results page of some search engines  o Add meta “keywords”: words that your customers would enter to search to find site  Keywords NOT a major factor search engines consider when ranking sites because of abuse   TIPS: single words, do not repeat more than 3-5 times, use plurals, use important words in different forms, keep length between 200-500 characters (10-15 words)  List of occurances of each words on a page more important  Special weight to keywords that appear: placement (high vs low), beginning of sentence vs embedded, proximity, headings, in title, metatag description, alt tags for graphics, generic metatags keywords, in link text for inbound links, in the URL o Add your page to the actual search engine site CS 1033A – Final Exam Notes Page 17  Search engines: robots used to index sites, use meta tags keywords, title, and alt fields  Directories: robots not used, human editor reviews, therefore, meta tags etc DO NOT help with ranking – best to describe site accurately – make sure site completely done before submission o Get sites that score highly on the search engine results to link to your site  Integrate a blog into your website, press release, submit into social network sites, comment on other people’s blogs o Check your competitors web pages – determine why theirs ranks higher than yours - Using Statistics – knowing what visitors like and dislike about website o ISP – web servers keeps
More Less
Unlock Document

Only pages 1,2,3,4 are available for preview. Some parts have been intentionally blurred.

Unlock Document
You're Reading a Preview

Unlock to view full version

Unlock Document

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.