compsci 1033 final exam notes.docx

32 Pages
832 Views
Unlock Document

Department
Computer Science
Course
Computer Science 1033A/B
Professor
Vivi Tryphonopolous
Semester
Winter

Description
CS 1033B – Final Exam Notes Page 1 Compsci 1033B – Final Exam Notes 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 Software applications  Delivery on the Internet Via Website  Combined into an application to inform, educate, entertain - Internet – fast, cheap, and accessible (reaches people all over the world) o # million – Asia 389, Europe 313, North America 232 (??) o More users in Asia, but greater percentage of population in North America (70.9% vs 12.4%) 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 - 1500-1300BC: prehistoric humans paint images on the walls of their caves (Grotte de Lascaux, France - 1914: silent movies incorporated multiple media be using film and text captions together - 1928: Walt Disney debuts the second short starring a mouse named Mickey, and the first cartoon to use synchronized sound (Steamboat Willie) - 1928-1931: Movies with sound replace silent movies - 1930s: Technicolor is introduced in film and most movies are filmed in colour after 1940 - 1937: Bell laboratories had a breakthrough in creating dual sound tracks on film. Fantasia was the first commercial movie with a complete surround soundtrack in 1940 - 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 1033B – Final Exam Notes Page 2 o 1970 – East coast - 1977: Apple starts to dominate PC market - 1981: IBM PC announced and captures market share in 18 months - 1991: WORLD WIDE WEB debuts (Tim Berners-Lee) - 1992: MS Windows 3.1 is released HTML debuts – Basis for Website development - 1993: Mosaic – First graphical browser (web pages with images), by Marc Andreesen, Erin Brina, and Tim Clark (transformed internet from research to household) - 1994: The Rolling Stones become the first major band to broadcast a live performance over the internet (opening band on air first – Sever Tire Damage) - 1995: Disney’s Toy Story – first feature length computer generated movie (77 minutes long, 4 years to make, 800,000 machine hours to render) - 1996: Affordable digital cameras widely available - 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 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 - 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 CS 1033B – Final Exam Notes Page 3 - 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 Reference – 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 drive May 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 TEXT - 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 look of webpage by changing: o Text attributes – colour, size, font type o Design/layout/placement of text – bullets, alignment, text in groups - 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 adjacent individual characters, measurement expressed in “em” (emphasis) – negative, 0, positive values  Helps align multiple lines o 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 CS 1033B – Final Exam Notes Page 4 PIXEL (.ppi aka dpi) 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) -http://www.largnet.on.ca/ -http://www.uwo.ca -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 Webpage Design: o CONTRAST: avoid making 2 elements just similar – either made them same (colour/font) or VERY different o ALIGNMENT: items are aligned – creates stronger cohesive unit o PROXIMITY: group related items together *physical groupings imply relationship o REPETITION: repeat some aspect of the design throughout GRAPHICS - We rely on images for – Information, explanations, entertainment - Graphics originate from: non-digital medium (paper copy of a photo), outside world, create image - DIGITIZATION: the process of translating a piece of information (text, images, sound recording, video) into BINARY BITS 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) o BYTE: collection of 8 bits  (2 ) = 256 possible combinations of 1s and 0s 1 2  Ex: 2 = 2 values (0, 1), 2 = 4 values (00, 01, 10, 11)... CS 1033B – Final Exam Notes Page 5 - 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 white (01/10)  grey o More bits, more shades... 4 bits  2 = 16 grey shades Used for web Used for printing Additive Model (RGB) Subtractive Model (CMYK) (k=black) Primary colours: Red, Green, Blue Primary colours: Cyan, Magenta, yellow “added” 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 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 - 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 CS 1033B – Final Exam Notes Page 6 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) - 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) o 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 EPS/EPSF: Encapsulated Postscript – vector o GIF: Graphics interchangeable format – Bitmapped o JPG/JPEG/JPE: Joint Photographic Experts Group – Bitmapped o CDR: CorelDraw – vector o DWG: Autocad – Vector CS 1033B – Final Exam Notes Page 7 - 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 CS 1033B – Final Exam Notes Page 8 o Scanners: digitizes drawings, illustrations, and 3D objects into computer images using its software o Internet sites: free clipart, on-line stock photo library ($$) - Graphics Programs Illustration (aka Drawing programs) Photo/Image Editors (aka paint programs) -work with VECTOR images -work with BITMAP images -vector-based drawing programs allow more -Bitmap graphics tools are needed for working with flexibility when creating artwork that is to be resizephotos, scans, or other “realistic” images or must go through multiple edits Logos Superior than illustration programs for final output of images for web/special effects Examples: adobe illustrator, CorelDraw, Examples: Adobe photoshop, Corel Photo-paint, Jasc Macromedia Freehand Paint Shop Pro 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: 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 - S-FTP using Secure shell 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 CS 1033B – Final Exam Notes Page 9 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 .GIF – Graphics interchange format .JPG – joint photographic experts group -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: - 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 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 (quality File )ize  Higher image quality setting (has a lower compression value) results in less data being discarded ( compression (smaller version) Quality File size ) CS 1033B – Final Exam Notes Page 10 - 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 browsers, operating systems, and computer platforms o If image uses color hues outside browser safe palette automatically dithers displayed 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) o 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 Supports OPACITY and TRANSLUCENCY (shines through) 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 CS 1033B – Final Exam Notes Page 11 - 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 WEBSITES - Why build a website o Reach potential customers o Details on services/products providing testimonials o Window shopping - 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 CS 1033B – Final Exam Notes Page 12 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 - 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 Binary, decimal, hexadecimal, dotted-quad (most popular) = 192.102.249.3 o Each quad must be between 0-255 - DOMAIN NAME: the text name corresponding to the numeric IP address of a computer on the internet o *only what comes after www – 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 o Process – every time you type a domain name: Internet server (called DNS) translates domain into 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 http://www.uwo.ca/its/courses/spring.html 1) Hypertext Transfer Protocol: rules that define how data is exchanged between servers and browsers 2) World Wide Web: indicates file is on the World Wide Web 3) Domain name: The name of the site 4) Path and File: tells browser where to find page(s) - Domain name rules 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 o http://www.en.wikipedia.org – domain name: Wikipedia.org, Subdomain: “en” o Used to organize website content http://year2005.mycorvettes.mycars.com .com is the first level domain (top level domain  TLD) Mycars is the second level domain mycars.com is the DOMAIN CS 1033B – Final Exam Notes Page 13 mycorvettes is the third level domain – subdomain of the domain “mycars.com” year2005 is 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... - 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 Effective Website Design - Good features: o KISS Principle (Keep it simple, stupid) o Consistency o Color o Balance o Easy to navigate - Creation Cycle: - CS 1033B – Final Exam Notes Page 14 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 2) Implementation – who will maintain? straight HTML programming vs Web page software? complexity, KISS principle, CRAP principles, Test in Netscape, explorer, firefox, documentation 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 - Implementation: Designing for Web o WEB PAGE: HTML (hypertext markup language) – computer instructions used to create web page, browser reads html code  HTML – cross platform, any computer can read  HTML Tags: xxxxxx o WEB SITE: collection of web pages created and maintained by an individual/organization o WEB SERVER: computer that stores web pages and makes them available for people to see on the internet o WEB BROWSER: program that allows you to view the internet (IE, FF, Netscape, Safari...) - 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 CS 1033B – Final Exam Notes Page 15  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 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  Text Size – use pixel system (pts larger)  Font type  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” - Links 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” CS 1033B – Final Exam Notes Page 16  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 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 - 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
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