Study Guides (248,410)
Canada (121,516)
Prof (9)
Final

Comp Sci Exam Notes.doc

50 Pages
440 Views
Unlock Document

Department
Computer Science
Course
Computer Science 1033A/B
Professor
Prof
Semester
Winter

Description
CS 1033A – Final Exam Notes Page 1 Compsci1033B–FinalExamNotes Lecture01:MULTIMEDIAANDCOMMUNICATION - 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 Softwareapplications DeliveryontheInternetViaWebsite Combinedintoamediaapplicationtoinform, educate,entertain MultimediaHistoryQuiz - 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 - TimBerners-Leeinvented the World Wide Web - Mosaicwas the first graphical browser for the World Wide Web - TheRollingStoneswas 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 MultimediaHistoryoftheInternet - 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 CS 1033A – Final Exam Notes Page 2 o 1970 – East coast - 1991: WORLDWIDEWEBis finished and debuts (TimBerners-Lee) - 1993: Mosaic– First graphical browser (web pages with images), by MarcAndreesen,ErinBrina, and TimClark(transformed internet from research to household) - 1998: GOOGLEsearch engine operates by LarryPage& SergeyBrin - 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 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 MULTIMEDIAFEATURES 1. INTERACTIVITY o USERCONTROLover the application o Experience ACTIVErather than passive as with television o Examples: clicking on links on the internet, on-line computer-based exam, driving simulation 1. HYPERLINKING o INDEXallows 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 CS 1033A – Final Exam Notes Page 3 1. COMPUTERBASEDDELIVERY 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 - Multimediacategoriesandapplications 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) CD/DVD WorldWideWeb Access Time View instantly by inserting into driveMay encounter slow connection speeds Ability to change Cannot change content – must Easy to update material, new updates content recreate and redistribute can be accessed instantly - How should you deliver the application – WWW vs CD/DVD - - Requiredequipment o Developmentsystems: systems used by multimedia developers to create applications o Usersystems: systems used to playback multimedia applications o Multimedia developer requires: sound card, video card, microphone, speakers, camera, DVD drives MULTIMEDIACOMPONENTS TEXTATTRIBUTES - Dual role: o VISUALrepresentation of the message o GRAPHICALelement - Use of text in multimedia applications varies on: o Thetypeofapplication– educational, entertainment, business o Audience– children, teens, adults, elderly, ESL (less text for children vs adults) CS 1033A – Final Exam Notes Page 4 - Changing the mood of webpage by changing: o Textattributes– colour, size, font type o Design/layout/placementoftext – bullets, alignment, text in groups - Emphasis can be added by varying textattributes o Fonttype– 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 TextLeading– 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 Specialeffects– underline, shadows, superscript, subscript - Textsize–Pixelsvs.Points PIXEL(.ppiakadpi)(ingeneralusepixels) 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 CS 1033A – Final Exam Notes Page 5 -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 -some browsers will not allow the text size to you expect change (IE – no, FF – yes) -http://www.largnet.on.ca/ -http://www.uwo.ca -Control over the viewing size -print style sheets created to print text using points *72 pts WILL ALWAYS BE 1 INCH WHEN *develop websites using the pixel system PRINTED, regardless of what monitor it was processed on 10 px is SMALLER than 10 pts – NOT EQUAL - - Textcolour- 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 - Textdesign–readability,visualappeal(complimentgraphics,position),moodcreation(headingssans-serif, bodyserif), 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:PrinciplesofPoster&WebpageDesign: 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 o ALIGNMENT: items are aligned – creates stronger cohesive unit o PROXIMITY: group related items together *physical groupings imply relationship Lecture02: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 CS 1033A – Final Exam Notes Page 6 - DIGITIZATION: the process of translating a piece of information (text, images, sound recording, video) into BINARYBITS(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,binarycodesenttoRAM(memory) CPU  Video card  On screen o Measurementsystem– binary system (base of 2, exponent = number of bits) o BYTE: collection of 8bits (28)=256possible combinations of 1s and 0s • Ex: 21 = 2 values (0, 1), 22 = 4 values (00, 01, 10, 11)... - HOWMANYSYSTEMSARETHERE: 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 imagecomponentand thus shows the smallest detail) o Pixel– numerical value corresponding to a COLOR INDICATOR (bw or colour) o 640x480screen– 640 dots on each of 480 rows  300,000 pixels - Codingcolors o Black/white = 1 bit ONLY (0 = black, 1 = white) o 2 bits – combination of black and white (01/10)  grey o More bits, more shades... 4 bits  24 = 16 grey shades USEDFORWEB-AdditiveModel (RGB) USEDFORPRINTING-SubtractiveModel(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 CS 1033A – Final Exam Notes Page 7 o - In “TRUECOLOR” each pixel represents some color shade – Uses 24bit representation = 16 million colors - Color can be expressed in: RGBCode HexadecimalCode 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 = 28 bits -16 million colors in the spectrum (2563) Red: <255,0,0> Red: #FF0000 Green: <0,255,0> Green: #00FF00 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 - TypesofGraphics– 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 Advantagesof 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 - CS 1033A – Final Exam Notes Page 8 BITMAP-BASEDprograms“PAINT” VECTORGraphicsprograms–“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 (but photoshop v6.0 has vector features) Draw - QUANTIZING How many discretevalues(bits)will I use to represent each pixel  represents the colour combinations - GraphicAttributes IMAGE QUALITY: Image resolution, image bit depth o IMAGERESOLUTION(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/100th 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) • Imagesize: 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) Lecture04:GRAPHICSCONTINUED - IMAGEBITDEPTH(aka COLORDEPTH): 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 10millioncolors, therefore, storing more than 10 million colours is pointless, so we only use 24 bit color (16 million colours) CS 1033A – Final Exam Notes Page 9 - FILEFORMATS o Universallysupportedfiles: universally supported by graphics industry  JPG, GIF • When an image is being sent to another application, convert to JPG or GIF o Proprietaryfiles(NATIVEFILES): 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–Graphicsinterchangeformat(bitmapped) .JPG–jointphotographicexpertsgroup(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-bitcolorscheme (8 bits/pixel = -stores full color information – max 24bits/pixel (16 256colours) - good for clip art, not photos millioncolors) -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 buttons from a movie **tinyfilesizeandlimitedcolors **largerfilesizebutfullcolorscheme “LOSSLESS” compression – no data discarded during “LOSSY” compression – data is discarded each time compression  QUALITY KEPT file compressed QUALITY DEGRADES o COMPRESSIONTECHNIQUES:1024bytes=1KB - GIFs – “LOSSLESS”compression no discard of data o Does not get blurry or mess CS 1033A – Final Exam Notes Page 10 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 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 CS 1033A – Final Exam Notes Page 11 FileFormat FileExtension TaggedImageFileFormats Most widely used bitmappedfile format (.TIF, .TIFF) Supported by image-editingapplications,scanningsoftware,page-layout programs,andwordprocessingsoftware. Supports bit depths from 1 to 32 bits Cross platforms for MAC, PC, and Unix systems Most commonly used when the outputisprinted EncapsulatedPostscript Vectorbasedgraphic Popular image files since they can be imported into nearly any (.EPS, .EPSF) application. WindowsBitmap Standard bitmappedformat on the Windows platform (.BMP) Supported by most Windows applications. GraphicsInterchangeFormat Bitmappedgraphic (.GIF) May see it as “CompuServe GIF” since Compuserve created it One of two standardsusedontheWebwithout plug-ins Gifformatonlysupportsupto256colors - Sources of Graphics  graphics must be in DIGITIZED form to use in multimedia application o Digitizedcameras,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 CS 1033A – Final Exam Notes Page 12 o Internetsites: free clipart, on-line stock photo library ($$) SERVERSANDUPLOADING - 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: panther.uwo.ca o User website: http://www.publish.uwo.ca/~username - 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 CS 1033A – Final Exam Notes Page 13 - S-FTPusingSecureshell o SHELLCLIENT: can type in commands by hand – but it’s in Unix o FILETRANSFERCLIENT: 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 • Solution1: change file “permissions” – Every time you upload new file, go to Shell window and type in “publish • Solution2: 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 Howimagesareused - Forprinting: 1) Quality, 2) File Size - FortheWeb: 1) File Size, 2) Quality (DOWNLOAD speed) – objective – download website as quickly as possible OPTIMIZEIMAGES: reduce the file size (download time) without compromising image Quality - 1)Fileformats– choose jpg or gif - 2)Reducingcolorresolution– 24 bits, 16 bits, 8 bit - File formats acceptable on the web: gif, jpg, png - Colorresolution 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 - BMPfiles–no compression, stores information about each pixel, each pixel is 1 byte - GIFfiles– 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) CS 1033A – Final Exam Notes Page 14 - JPEGfiles– 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 BROWSERSAFEPALLETE: 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 Juxtaposescoloured 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 - Interlacingtechnique: 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 GIFand PNGONLY - PNG(Portable Network Graphics) o Developed as replacement for GIF due to legal issues with LZW compression – starting to replace o LOSSLESScompression(no discarded) • 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 AdvantagesofPNG: • 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 CS 1033A – Final Exam Notes Page 15 o Disadvantagesof.PNG: • Older browsers may not support • Noanimation(unlike GIFs) • File size for 24 bit color photographs bigger than JPG files - Reducethedownloadtimebyusinganyorallcombinations: 1. Reduce file size 2. Choosing .jpg or .gif formats 3. Reducing color resolution (24 bits, 16 bits, 8 bits) - Goal:downloadwebpagefast – download time effected by graphic file size and file format o Filesize • 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 FileFormat: .GIF or JPG rather than BMP, TIFF or other o Most graphics software can export from any extension to .jpg or .gif Lecture05: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 CS 1033A – Final Exam Notes Page 16 o Sept1995– PierreOmidyar– Echo Bay consulting, “broken’ Laser pointer o Sept1996– JeffSkol(Movie producer) – Marketplace for goods and services o Sept1998– went public – MegWhitman(Harvard, Hasbro) – Vision: “connecting” people o JohnDonahoe– CEO of Ebay WebsiteStartup - THEINTERNET: 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 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 computeron 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 accountforaccessinginternet,e-mailbox,webspacetohostwebsite o offers connection via telephone lines, cable TV or personal satellite dish - data travels from one internet host to another along bestroute, 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) = 192.102.249.3 o Each quad must be between 0-255 o Picksarouteforapacket,stoppingatrouters(devices)whichpickthenextbestmachine/networkto sendthepacketto(therouteristhecentralswitchingdevice). - DOMAINNAME: the text name corresponding to the numeric IP address of a computer on the internet o *onlywhatcomesafterwww–ex: uwo.ca (129.100.0.45); csd.uwo.ca (129.199.19.247) 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 CS 1033A – Final Exam Notes Page 17 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 – www.showmyip.com, www.whatismyip.com - 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 - Domainnamerules o Max of 67 characters (including extension) 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 http://www.en.wikipedia.org – domain name: Wikipedia.org, Subdomain: “en” o Used to organize website content http://year2005.mycorvettes.mycars.com .comis the first level domain (topleveldomain TLD) Mycarsis the second level domain mycars.com is the DOMAIN CS 1033A – Final Exam Notes Page 18 mycorvettesis the third level domain – subdomain of the domain “mycars.com” year2005is the fourth level domain – subdomain of “mycorvettes.mycars.com” 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: mydomain.com, yahoo.com, godaddy.com, register.com... - WEBHOSTING:the SERVICE that provides internet users with online systems for storing information, images, video, or any content accessible via the web o WEBHOSTS: (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 Whynottohostwebsiteonyourcomputer: • Expensive, continual connection (needs 24/7 high speed connection), technical (complicated), support (server maintenance requires 24 hour support, skills, knowledge) o Criteriaforchoosingwebhostingcompany: 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 Lecture06:WEBSITECREATIONANDDREAMWEAVERCONCEPTS Effective Website Design - Good features: o KISS Principle (Keep it simple, stupid) o Consistency o Color o Balance o Easy to navigate CS 1033A – Final Exam Notes Page 19 - CREATINGAWEBSITE: - 1. PlanningandDesign– Meet with client, decide on colors, fonts, background, links o ALWAYS call splash page index.html – that way domain name leads right to it 1. 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. WEBPAGE: 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. WEBSITE: collection of web pages created and maintained by an individual/organization c. WEBSERVER: computer that stores web pages and makes them available for people to see on the internet d. WEBBROWSER: program that allows you to view the internet (IE, FF, Netscape, Safari...) 2. Publish– Web space, use FTP software, upload once website is ready, Back up files 3. Maintenance– who is maintainer, training, update frequently, documentation, backup information o Make sure allow for frequent updates in design Lecture06b:DREAMWEAVERCONCEPTS - Web Authoring Software – WYSIWYG (what you see is what you get) o Dreamweaver: web page editor and site management tool • SITEMANAGEMENT: organize files/folders, moving files, rearranging pages and updating links easily • records HTML code as you build o Interface: • Documentwindow: 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 CS 1033A – Final Exam Notes Page 20 • Sitepanel: folder that you are currently working on, gives filenames, path directory, etc • Propertypanel: 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 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 CS 1033A – Final Exam Notes Page 21 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 - FormattingText 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 - Pageproperties: (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 - Downloadtimeofpage: Benchmark: 56k modem speed, max of 30-35 seconds o See status bar – total size appears in kb (edit>preferences>status bar) - Imageattributes – using property inspector: size, space around image, border, alternative text, alignment, sharpen, contrast, crop o AlternativeText: caption in browser, displays text associated with the image • May display while graphic loading, or if using a text only browser CS 1033A – Final Exam Notes Page 22 • To meet “barrier free access” • For Firefox: insert title=”xxxxx” before alt=”xxxxx” - LINKINGTYPES 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 • 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 Tablewidth: expressed as % - covers a percentage of the screen, fixed – width fixed on screen • Assignments– FIXED 780 pixels for width o Insertingatable– click where you want table to appear, select insert>table... o Selectingtable– place mouse over table’s cell grids until see red outline, single-click o Mergingcells: highlight cells you want to merge, click merge in property inspector o Splittingcells: highlight cells you want to split, select split icon, enter information CS 1033A – Final Exam Notes Page 23 o Tableproperties: 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 Cellproperties: applied to one cell or group of cells: horizontal alignment, vertical alignment, width/height, cell border (colour), background color Lecture07:MARKETINGTHEWEBSITE - WEBPUBLISHING– upload/”ftping” completed pages to server with Secure Shell Client or from within DW o Use FTP software o FileTransferprotocol: 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: panther.uwo.ca) 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) SEARCHENGINE-Google,AltaVista,Hotbot SUBJECTDIRECTORY-Yahoo,About.com,AOL -A program that enables the user to search internet -a program that enables the user to search internet sites - User types a list of keywords sites -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 CS 1033A – Final Exam Notes Page 24 searches a database of information about the internet Human-selected (hand-picked) internet resources are arranged and classified in hierarchical topics Usesspiders,webcrawlersto gather database Humaneditorsreview webpages, rank them, organize information of websites; index sites and score pages them into categorized list with brief descriptions and puts the information into a database Publisher registers into database, or wait for spider Wait for human editors Examples: Google, altavista, Hotbot Yahoo, about.com, AOL, Open Directory (open directory is 1% size of google) - - SPIDER/WEBCRAWLER: 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-SEARCHENGINGE/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 - HowdoesGooglework: 1. GatherstheInformation: 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. Buildadatabase(index): List every document that contains a certain word 3. Rankresults: rank them in terms of relevance – google uses many factors in ranking: a. PageRankalgorithm– how many linksthere are to a web page from other pages, quality of the linking sites b. Frequencyofkeywordsinawebpage c. Appearance – words right next to each other 4. RankResults: 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 CS 1033A – Final Exam Notes Page 25 - SEO:SearchEngineOptimization: 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 - Howtoimproverankingofwebsiteinasearchengine: 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 Addyourpageto the actual search engine site • 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 CS 1033A –
More Less

Related notes for Computer Science 1033A/B

Log In


OR

Join OneClass

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

Sign up

Join to view


OR

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.


Submit