Compsci 1033B Final Exam Notes PDF

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,...

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 Discussed in 1962 - First packet switching network and predecessor to the internet 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 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 View instantly by May encounter slow Time inserting into drive connection speeds Ability to Cannot change content Easy to update material, change – must recreate and new updates can be content redistribute 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 - 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 POINTS (.dpi) pixels) unit of measure for printer resolution unit of measure for monitor resolution (pt) (px) -WEB -WORD - # of pixels per inch of monitor display -# of dots per inch -a display setting of: 1280x1024 has -absolute type size – usually used in 1.3 million DPI, 800x600 has 480,000 printing 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 -if web document – text expressed in want on the screen points -some browsers will not allow the text -can be displayed much larger or size to change (IE – no, FF – yes) smaller than you expect -http://www.uwo.ca -http://www.largnet.on.ca/ -print style sheets created to print text  -Control over the viewing size using points *72 pts WILL ALWAYS BE 1 INCH *develop websites using the pixel WHEN PRINTED, regardless of what system 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 - 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 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) o BYTE: collection of 8 bits à (28) = 256 possible combinations of 1s and  0s § Ex: 21 = 2 values (0, 1), 22 = 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 white (01/10) à grey o More bits, more shades... 4 bits à 24 = 16 grey shades USED FOR WEB - Additive USED FOR PRINTING- Subtractive Model (RGB) Model (CMYK) (k=black) Primary colours: Red, Green, Blue Primary colours: Cyan, Magenta, yellow “added” light to a black background “subtracted” from a white background in order to 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 = 0,1,2,3,4,5,6,7,8,9,E, and F Syntax: -color represented by 6 digits: ie,  Each value ranges from 0-255 #FFCC66 8 256 color shades = 2 bits -16 million colors in the spectrum (2563) Red: Green: Blue: #0000FF Blue: -Web-safe colors: only Red: #FF0000 1,3,6,9,C,F Green: #00FF00 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 -image is represented with lines and arcs Pixels that have a mathematical relationship -Editing pixels: changing color, shade, -describes the drawing of the shape brightness - Line: starting point, direction length Advantages of using a small image rather - Rectangle: start point, width height than larger: - Circle: center and radius -shorter time needed to display on screen *SMALLER FILE: records mathematical -smaller file size relationship Disadvantages: -distortion occurs when image is enlarged  -as image is enlarged (resized): -as image enlarged (resized): - Dots become larger, edges more jagged - Dots become larger, edges still clean, - Quality decreases crisp - File size increases - Quality is maintained – no distortion - 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 -images from scanners, cameras tool -need a “PAINT” program -display more accurately on screen -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, (but photoshop v6.0 has vector features) Corel Draw - 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/100thinch § 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) Lecture 04: GRAPHICS CONTINUED (3) - 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.JPG – joint photographic experts group (bitmapped) (bitmapped)  -attributes file format -attributes file format -compression -compression -color resolution -progressive jpeg -dithering -interlacing **distorts edges where there is sharp -transparency contrast ARTIFACTS: noise/specs around the image -common image format used on the internet -cross platform -stores full color information – max 24 -supports a max of 8-bit color scheme (8 bits/pixel (16 million colors) bits/pixel = 256 colours) - good for clip art, not photos -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, -uses: photos, computer games, cartoons, buttons screenshots, stills from a movie **tiny file size and limited colors **larger file size but full color scheme “LOSSLESS” compression – no data “LOSSY” compression – data is discarded discarded during compression à QUALITY each time file compressed àQUALITY KEPT 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 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 Bitmapped graphic May see it as “CompuServe GIF” since Compuserve created it One of two standards used on the Web without plug-ins Gif format only supports up to 256 colors Graphics Interchange Format (.GIF) Standard bitmapped format on the Windows platform Supported by most Windows applications. Windows Bitmap (.BMP) Vector based graphic Popular image files since they can be imported into nearly any application. Encapsulated Postscript (.EPS,.EPSF)  Most widely used bitmapped file format Supported by image-editing applications, scanning software, page-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 Tagged Image File Formats (.TIF,.TIFF) File Extension File Format - 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: 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 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) § 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 (4) - 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 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) = 192.102.249.3 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: 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 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 - 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 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 Lecture 06: WEBSITE CREATION AND DREAMWEAVER CONCEPTS (laura #7) 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 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 (Laura #7) - 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 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 § 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 (laura #8) - 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: 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) SEARCH ENGINE - Google, Alta Vista, SUBJECT DIRECTORY - Yahoo, Hotbot About.com, AOL  -A program that enables the user to search -a program that enables the user to search internet sites - User types a list of keywords internet 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 collection of websites organized by topic keywords were found searches a database of information about Human-selected (hand-picked) internet the internet resources are arranged and classified in hierarchical topics Uses spiders, webcrawlers to gather Human editors review webpages, rank database information of websites; index them, organize them into categorized list sites and score pages and puts the with brief descriptions information into a database Publisher registers into database, or wait for Wait for human editors spider Examples: Google, altavista, Hotbot Yahoo, about.com, 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 § 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 logs of all visitor activity – records requests for files on site, date, time etc § # of visitors: Number of users to your site § Files: number of files retrieved from a web site § Pages: Number of distinct html files/pages looked at (stickiness) § Hits: Number of files sent to a user after a page results (includes graphic files) History of “Searching the Net” - 1990: The first tool for searching the Internet was called “Archie” (short for archives) o Original implementation written in 1990 by Alan Emtage, Bill Heelan, and Peter J. Deutsch at McGill o Designed to index FTP archives, allowing people to find specific files o Word’s first internet search engine o Downloaded directory listings of all files located on public anonymous FTP servers: creating a searchable database of file names - 1991: “Gopher” – by Mark McCahill, Frahad Anklesaria, Paul Linder, Dan Torrey, and Bob Alberti of University of Minnesota o Gopher is a distributed document (shared by computers) search and  retrieval network protocol designed for the internet o Its goal was similar to that of the world wide web, but now become obsolete - 1991: World Wide Web developed at CERN – Tim Berners-Lee (Geneva, Switzerland) o Problem: data difficult to access and exchange due to differing encoding formats and networking schemes o Several criteria: system must be flexible, compatible with numerous languages and operating systems, system must be capable of recording random links between objects; entering and correcting information is easily performed - 1995: April – Yahoo – David Filo, Jerry Yang – more than 10,000 employees - 1998: September – Google (search engine): Larry Page and Sergey Brin – more than 10,000 employees, management team most experienced technology professionals in the industry Lecture 08: ANIMATION ANIMATION: a drawing that moves, bringing the drawing to “life” - Rely on “moving images” for effective communication - Used for: entertainment (action, realism), Education (visualization, demonstration) - Why use animation? o Shows progress o Indicate movement o Illustrate change over time o Visualize 3D objects o Attract attention - Simulation of movement through a series of pictures that have objects in slightly different positions - Each drawing is called a FRAME: snapshot of what is happening at a particular moment (FPS: frames per second) o Movies on film – 24 fps o TV – 30 fps o 9000 frames for five minute cartoon – computer animation, “jerky” anything less - In animation, each frame overlaps the previous one - Movement is caused by: rapidly displaying each frame in sequence - Types of Animation o Computer-based training programs: the way something works (assembling parts, surgery) o Education: teach applied and hands on skills (spelling, exam prep, learning instruments, athletes) o Games: playstation, nintento, xbox... o Web: animated buttons, banners, text, characters, etc - Two types of animation à 2-D Animation (cel/path) 3-D animation o 2-D Animation: Cel-Based § “Cel” (Celluloid): clear sheet material on which images were drawn by  movie animators § Images placed on a stationary background – background remains fixed § Object changes from frame to frame § Ex: toonz software o 2-D Animation: Path-based § Moves object along predetermined path on screen § Path: straight or any curves § Often object does not change (but resized or rotated) § Path animation easier to create than cel based animation § Pick: a starting point for an object, (start frame) + an ending point for an object (end frame) + a path for the object to follow · And then the computer generated all the frames in between called TWEENING Motion Tween Shape Tween Works with symbols only Works with shapes only Can’t morph (only movement) Can morph shapes Only one symbol per layer if the symbol Can have more than one shape per will have a motion tween layer but be careful, depends on what you want to morph Can be used with motion guide Can’t use motion guide § Animation software features: · Frame rate: speed of the animation · Transitions: special effects (fade in, fade outs) · User control: play back, how many times to run · Looping: plays continuously until user stops it § Speed up animation by increasing Frame rate/second or eliminating frames o 3-D Animation: involves 3 steps: Modeling, Animating, Rendering 1. Modeling: defining the objects 3D shape – process of creating broad contours and structure of 3D objects and scenes (draw views – top, side, cross section) 2. Animating: process of defining object’s motion – defining lighting and perspective views to create change during animation 3. Rendering: give objects attributes – colour, amounts of transparency,  surface textures - RAY TRACING: technique of adding light and shadows to a 3D image - Special effects o Morphing: process of blending together two images into a series of images § useful for showing how image might change over time o Warping: distorts a single image – warp frown into smile - VIRTUAL REALITY (VR): creates environment where user becomes part of the experience o Boeing: flight simulators of airplane cockpits (hydraulic controlled on legs) o CD based adventure games: point and go thru doors, stairs o Hand-held equipment allows person to interact with environment - Animated GIFS (simple animations) o Special type of GIF file known as animated GIF/GIF89a that provides the animation you need o Animated GIFS are formally called Multi-block GIFS: a series (blocks) or still GIF images within ONE single GIF file o When the GIF document is viewed, the multiple images display quickly and in succession, and produce a STREAMING ANIMATION o Characteristics of an Animated GIF: § File size is affected by: the # of colours (256 max), amount of noise in the frames (just like other GIF files) § Number of colors: only 256**** § No plug-ins required: require no plug-ins, and the authoring tools to create them are often free and easy to learn · PLUG-IN: a program that permits web browser to access and execute files that the browser would not normally recognize (Flash uses Shockwave) § No sound - Sources of animation – lots of free software online to create GIF animations - Other animation file types: o Animated GIFS (.gif) (universal) o Flash (.fla,.swf) (by Adobe) o Macromedia Director o Sophisticated Animations: strata 3D, Lightwave, 3d studio Max, Maya, Houdini - Animation Software o Flash Professional CS3 – multimedia authoring and playback system § Launched 1996 by Macromedia/Adobe bought in 2005 § Flash popular for its animated graphics § Industry’s most advanced authoring environment for creating interactive websites, digital experiences and mobile content § Why popular? · Professional designs, interactive content rich with videos,  graphics, animation · Import multimedia elements from other applications · Support vector graphics – much more space efficient over bitmapped frames, scale up with accurate detail no matter how large the window is resized by the user § **Flash player is a free client application that works with popular web browsers to play the animation § The standard for delivering high-impact, rich web content. Designs, animation, and application user interfaces are deployed immediately across all browsers and platforms § *smaller file size - Terminology o KEYFRAME Animation: animating a graphical object by creating smooth transitions between various KEYFRAMES (the frames that indicate the beginning and end of an objects motion path o TWEENING: short for ‘in-betweening’, the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image o ONION SKINNING: 2D computer graphics term for a technique used in creating animated cartoons and editing movies to see several frames at once § Purpose: animator/editor can make decisions on how to create or change an image based on the previous image in the sequence o Rotoscoping: An animation technique for combining (compositing) figures with realistic settings in television commercials and is also used for special effects in feature-length films Created Animat Flash Director by ed GIF Depends Flash (sound) Director (sound) (no sound) Extension Source.fla (source).dir (source) depends.swf (movie).dcr (movie).gif (movie).flv (flash video encoder)  Size Larger Vector images take Vector images take up less space than up less space than than GIF bitmapped images normal gif GIF bitmapped images Uses Banners, More interactive sites small Interactive video, areas graphics, animation Need to play it and works with most Web browser plug in (The Nothing Flash Player (Free browsers) Shockwave Player) - Animation in the Movies o Digital video: 1983 Star Trek - the Wrath of Khan o Digital Animation: Toy Story (1995) first full length film created entirely with digital animation o Movies – visual effects: Terminator II, Jurassic Park Dinosaurs o 12 highest gross earnings made so far by computer generated animations worldwide as of 2007 o Shrek 2 – highest grossing computer generated film Lecture 09: VIDEO VIDEO - Video uses the power of MOTION and SOUND - ANALOG VIDEO: smooth electronic waves (ex: Conventional TV) - DIGITAL VIDEO: converts into digital media (0s and 1s) – benefit of delivering on internet o Composed of a series of bitmap graphics, each one called a frame o Motion in a video is an illusion caused by the rapid display of several still images or frames o Movies display at 24-30 fps à computer displayed video display at 12-15 fps o Characteristics: § Bits store Colour and Brightness data for each video frame § Retains image quality no matter how many times it is copied § Easily manipulated on a pc because stored in digital format o Kinds of digital videos: 1. Desktop video (DTV): constructed and displayed using a personal computer 2. Web-based video: incorporated in web pages and accessed with a browser 3. DVD-Video: used for commercial DVDs that contain feature-length films 4. PDA vide: small-format video designed to be viewed on a PDA or cell  phone screen o Creating digital video (first storyboard) 1. Produce Video Footage. Select equipment for filming videos and use effective filming techniques 2. Transfer video footage to a computer. Use cable to cable transfer or a video capture card to move video footage from cameras, videotapes, television, and DVDs to your computer’s hard disk 3. Edit video footage. Use software to select video segments, arrange them into a video, and add a soundtrack 4. Store and play video. Select digital video file formats for playback on desktop, web, PDA, and DVD platforms o Ready to make a video 1. Pre-Production stage: Planning the video and gathering any resources you might need 2. Production stage: Camera work and sound recording 3. Post-production: · Downloading from camcorder to computer · Editing and/or encoding the finished video · Removing unwanted footage · Arranging desired footage in the correct order · Adding music, titles, transitions, and possibly other effects · Converting (encoding) into the correct format(s) o MAKING A VIDEO: Post-Production 1. Capture video: download video from camcorder to computer 2. Edit Digital video (using computer, digital video software): edit it, add titles, filters, transitions, superimpose clips, synchronize audio with video, authoring software: create menus and interactivity 3. Output Video: output to different file formats – back out to tape, the Web, CD, DVD - Capturing Video – must be in DIGITAL form to use in multimedia application. Process: o Video camera (analog video)à (analog signal) Video card à (digital signal) PC o Digital camera (digital signal) à (Digital signal PC - Five Factors to consider when making a video: 1) Source Device: camcorders and digital video cameras can be used to capture full-motion images (analog vs digital) 2) Video Capture Device: video capture card needed (if using analog camcorder from analog to digital) o No need if source device outputs a digital signal (such as Firewire or USB) 3) Connecting Leads: Firewire, USB cable 4) Computer: Download video to edit 5) Software: capturing, editing, outputting - Home video Edit facilities for: editing Home movies, creating TV productions,  manufacturing CDs, authoring and uploading internet material, internet video conferencing - Video Capture Device o Analog Camcorder: Need VIDEO CAPTURE CARD o Digital Camcorder: FIREWIRE connection 1. SOURCE DEVICE: o CAMCORDER (camera Recorder): device for recording video images and audio onto a storage device. To use video in a multimedia application, it must be in digital form (1s and 0s) o Analog vs. Digital camcorders: ANALOG (older Technology) – 1983 DIGITAL (Newer Technology) – 1998 -Records electrical signals/pulses directly -Records binary code (string of 1s and 0s) onto a medium (like a tape) with a magnetic compressed on magnetic tape or other encoding media Disadvantage: Picture loses quality Advantage: No image degradation àVideo Capture card needed to convert àPlug video camera directly into computer video from analog to digital for your via Firewire (aka i.Link) or USB computer connection àThese are digital connections and allow you to “dump” footage straight from the camera to hard drive - ANALOG: o 1983: VHS, VHS-C format (BetaMovie) – No playback/rewind capabilities, 30 min recording o 1985: 8mm format – smaller cassette size, 2 hr recording, higher recording quality o 1990: Video8 (original) and Hi 8 format (improved) (types of 8mm) o Size comparison (smallest to largest): Mini-DV, VHS-C, VHS - DIGITAL:  o 1994: (MiniDV) Digital Video – smaller than 8mm cassette, tape transport size adjustment, improved audio and video quality over best analog camcorders, standard play of 60 min o 1999: (D8) Digital 8 – obsolete: cassette size – large as Hi8 format (a type of 8mm) o 2001: (DVD) Digital Versatile Disk o 2006: (HDD) Hard Disk Drive and (SD Memory stick) Solid State Media Card - Types of Camcorder recording media: o Videotape cassette: recording to digital tape, like MiniDV (DV) and HDV o DVD Disc: uses recordable DVD discs for playing in a home DVD player or PC o Hard Disk Drive: HDD, saving to non-removable hard disk drives o Solid State Media Card: Saving to cards like SD and Memory stick PRO - Viewing Images on TVs CRT Display: Older Technology Flat-panel Display : PLASMA/LCD Screen resolution 480, electron gun beam Screen resolution 1080i/1080p, flat grid of activates the dots pixels -Our eyes see phosphor dots on the screen I=interlacing, p=progressive An electron beam (gun) activates the dots. The gun scans through the dots horizontally A complete scan is when the gun starts at the top left and scans several times horizontally till it gets to the bottom right Interlacing effect (line 1, 3, 5, 7,) (line 2, Progressive effect (Line 1,2,3,4,5,6,7...) 4, 6, 8) -each pixel has 3 sub-pixels (RGB) -each pass is called a field - Digital Advantage: higher resolution (# of horizontal lines) o Digital recorders: 480+ horizontal lines recording o Analog recorders: 280 lines for black and white, 240 lines for color with analog recorders - Device photos: see lecture 9 slide 32 - VIDEO CAPTURE CARD: needed to convert video from analog to digital for computer o Placed in open expansion slot on main board of the computer o Once installed, video capture cards allow you to connect a camcorder, VCR,  or TV to the computer o Special software enables the images to be converted from analog to digital form - FIREWIRE (i.Link, IEEE1394): a means by which information could be sent from the camcorder directly to the computer o A high speed digital serial data connection that allows the output of the camera to be fed directly into a computer in digitized form o Digital video footage requires 13 GB of storage per hour of video o All major manufactures agreed to use a common digital tape format and a method à Firewire (universal standard) - Firewire vs USB o Firewire 400 by Apple: wanted to charge per machine used, so PC used USB 1.1 instead - Transmitted originally at 400Mbps - Peer to Peer technology (can chain one camcorder to another without a computer) o USB 1.1 could transmit at 12 MBps - Used for mice, keyboards, printers, too slow for video - USB 2.0 – backward compatible, transmitted at 480MBps - Master/Slave technology – need to connect to a computer o Currently – Firewire 800, transmits at 800 MBPS, expect future to transmit at 3.2 Gbps - Benefits of Digital o No loss of quality: Digital videotape can be copied almost indefinitely o No need for analog-to-digital conversion: can be directly uploaded to digital editing systems o Reduces/eliminates problems such as dropouts due to error correction associated with digital electronics o Archival (long-term) storage: better suited for longer periods o Quality of digital recordings is significantly better than analog recordings - Controlling the transfer process o Video capture software: doesn’t matter if using analog or digital camera o Should have features: - Start and stop the transfer - Select a file format for storing your video footage - Specify file name for each video clip - Video capture software is supplied with video editing software and with video capture devices o Last major Hollywood picture to be realized as a VHS picture – A History of violence - Uncompressed format on the digital camcorder o Almost all digital camcorders store video in DV format – digital video  (uncompressed); most common form in DV25 o Windows moves DV directly into AVI (which can be uncompressed or compressed) and never deals with.DV files o Quick Time will convert.DV to other formats - Colour Format for Video o For pictures – RGB commonly used o For video – Y or &UV(CbCr) (for MPEG compress) - Y à luminance (brightness) - UV (CbCr) à chrominance (color/hue) o Black/White TV only used the Y signal – since only transmits brightness information o Human eye detects changes in luminance more easily - Color sampling: digital video compression technique o 4:1:1, 4:2:0, 4:4:4: (no color substitution) – the numbers represent colour sampling - Scale: 4 – no compression, 0 - max compression thus 4:4:4 = no compression - X:Y:Z (X = brightness; Y,Z = colour) = 4:4:4 o Averages out pixels to cut down on bandwidth for faster transfer rates o Eye sensitivity: rods (light vs dark, black vs white – not color) cones – see color o We can detect brightness better than color (more rods) o What does 4:1:1: mean? - Assume we have 4 pixels – red, orange, blue, purple (red and blue = purple) - Blocks of 4 pixels averaged out, 4x1 block - All four pixels get forced to become purple (shades of brightness), block of 4 pixels averaged out o 4:2:0 – blocks of 4 pixels averaged out – 2x2 grid Method (luminance) (color or hue) (color or hue) Compression Color Amount of Y Amount of U Amount of V Amount of Used in Sampling 4:4:4 4 samples 4 samples 4 samples None 12 samples for each group of 4 pixels 4:2:2 4 samples 2 samples 2 samples Reduced from Digital 12 samples Betacam to format 8, 33% reduction in storage  4:2:0 4 samples 2 samples of either U or V, HDV, 12 to 6, 50% MPEG-1, one scan line of U, then DVD, reduction in MPEG-2, one scan line of V PAL DV storage 4:1:1 4 samples 1 sample 1 sample 12 to 6, o Transfer videos in a series of short clips 50% reduction in (1-2 min) storage o Some software automatically detects frame changes NTSC DV, miniDV digital Lecture 10: VIDEO EDITING camcorder - Editing Digital video o LINEAR EDITING: before digital camcorders – consisted of recording segments from one videotape to another tape – can’t jump around o NON-LINEAR EDITING: (now) computer hard disk and video editing software - Several gigabytes of available storage space at least 512 MB RAM-2GB - Edit and easily arrange video clips – any order o Video editing software key attributes: - Arrange video clips on TIMELINE - VIDEO TRACKS contain video segments, transitions - AUDIO TRACKS (voices, music) - Overlay video track with several audio tracks - Edit it, add titles, filters, transitions and FX, superimpose clips, synchronize audio with video output in different file formats - OUTPUT VIDEO o For best quality final product – store video in a Raw, non-compressed DV format for editing o After trimming unwanted footage – convert video in other formats for distribution o *know which video files are compressed and which are streamed DIGITAL VIDEO FORMATS  * File Type Also known as: Originally created by.mov QuickTime movie Apple.avi Audio Video Interleave Intel.rm Real Video Real Systems.wmv Windows Media Microsoft.mpg MPEG Motion Picture Experts Group.mpeg.flv Flash Video Adobe.mkv Newest technology - Optimizing for web: Balance between QUALITY and FILE SIZE o FILE SIZE is dependent on: - Lower Frames per second (fps) – TV = 30 fps, Web Video = 10-15 fps - Picture size dimension – Full screen = 640x680 pixels, std web frame size 160x120 pixels - Colour resolution – (24 bit, 16 bit, 8 bit) – Lower resolution à lower quality à smaller file - Length of the clip - Pick a CODEC that does higher compression o Video data contains both Spatial and Temporal compressions - Similarities are encoded by identifying differences: · Within a frame à Spatial · Between frames à temporal CODECS: SPATIAL COMPRESSION CODECS: TEMPORAL COMPRESSION (within a frame) (Between Frames)  -compress each frame individually -just save info on selected frames -Uses same techniques as JPG compression (keyframes) -all other frames just save the differences from the previous keyframe -good when difference between current frame and keyframe is small Codecs that do spatial compression are: Codecs using temporal compression are: Animation, PlanarRGB Sorenson video, H.264 - Compression technology: reduces the file size for transfer and storage while maintaining quality o Speed transfer improved - CODECS: video compression/decompression programs – scheme fro coding and decoding large amounts of data · STORAGE – coded · VIEW – Decoded o Electronically compress and decompress video and related data o Benefits: - end result smaller file size - large amounts of information can be stored on media or sent by e-mail - streamed over the internet in smaller packages but still looks good upon playback and downloads faster o Two types of compression: lossless vs. lossy LOSSLESS COMPRESSION (no loss of LOSSY COMPRESSION (loss of data) data)  -Squeezes data into smaller space without -discards “repetitive” or “redundant” data; eliminating information may not be noticeable to the eye -100% of data still there, similar to zipping a -results in compression ratio as large as document 200:1 for some -uses a compression algorithm that reduces -greater ratio, poorer the decompressed file size but does not lose any data image -applied to video because quality loss not noticeable in moving images -applied to internet streaming **applied to.jpg and.mpg formats – “redundant” info = similar info – 20:1 compression, 1MB to only 50 kB or 1024KB to 50KB CODECS (COMPRESS DECOMPRESS): - Speed up downloads – 10 times smaller than uncompressed video files, which would take 3-5x longer - Codecs for audio/video, streaming media, videoconferencing, mp3s, speech, screen capture - The codec used to compress is the one needed to view Video Transfer for the Web HTTP: Hypertext Transfer Protocol RTSP: Real-Time Streaming Protocol -Download the video from the host (server) -Played directly from the sever to the user’s to the user’s computer in its entirety then computer in a process called “STREAMING” play the clip -RTSP allows the user to perform tasks such as pause and play User must wait for the download process to File played directly from server, thus some end delay  Video can be played repeatedly and copied Video is broadcast to user and after if necessary displayed, discarded Suited for SMALL video clips Suited for LARGE file and LIVE broadcasts - RTSP – “Streaming” (Webcasting) o Requires a program to display streaming video o Leading programs: Real Player, Windows Media Player, Apple QuickTime Player - All 3 can: play both audio and video, handle true streaming media, provide plug-ins for use on either platform (Mac/PC) at no charge to the user o All 3 players work with popular video formats such as AVI, MPEG o Webcasting of video events in real time – concerts, conference speakers o Streaming is either On-Demand (stored on server and streamed on user request) or Live (sporting event, election results) - Streaming: The process of taking large audio/video file and transmitting small, continuous amounts of that file over a network. “Steady and continuous” – File remains on server - Small buffer space is created on the user’s computer - Data starts downloading into it – as soon as buffer is full, file starts to play - Process of creating streaming files: (USED REALPRODUCER) o Locate and prepare source materials/media content o Digitize and then compress files with a streaming format o FTP streaming files to streaming server o Link from a webpage to the streaming media/embed file on a webpage - HTML webpage links to a.ram file which launches the real player and links to the clip - Saving the streaming file – Extension for RealProducer =.rm - Advantages of streaming: o Does not take up local disk space o Little waiting time o Deliver long duration videos o Live delivery and archiving: audio and video programs can be delivered live and archived simultaneously - Advantages of downloadable media files: o Readily available independent of server – user can use it later o Higher image quality (streamed videos highly compressed for efficient delivery) o Step through frame-by-frame – can jump through audio/video track - Unicast à each user gets his/her own stream of video, the server has to send out A  LOT of data if several users are watching at once - Multicast à send the same stream to a bunch of users but then they lose the ability to pause, rewind, etc. Video for multimedia applications – consider: - Source: quality tied to color resolutions, frames/sec, compression format o Higher the quality of original video, the better the digitized version - Appropriateness: due to large video file sizes and poor quality, animation could be better - Playback systems: web-based video may require browser plug-ins - User control: provide user with control options to start video, jump through, pause, stop, volume Viewing Video on the Web (and audio) LARGE FILES o Download (Progressive): Files downloaded to the user’s computer, and only then begin to play - Disadvantage: large files, long wait times - Advantage: permanently stored on users computer o Progressive download: click begins download, but after some portion had been downloaded movie starts to play - Disadvantage: interruptions in watching video, delay times - Advantage: permanently stored on users computer - How is it done – player calculates the speed of the download and guesses when to start playing the portion it has, plan to start late enough that whole movie downloaded by the time finished watching o True streaming: file is not downloaded at all – media beings to play as soon as it gets the packet - Advantages: · Fastest but requires that the server be set up to serve streaming media · Reduces waiting time required of the user - Drawback: congestion on the net may cause media to stall if can’t keep up with playback Lecture 11: SOUND SOUND: Record à process à deliver - Rely on sound to enhance multimedia applications: easily capture the attention of users, facilitate easy learning, set the mood - On the web sound offers: Background music, narration, sound effects, Record testimonials, educate/presentations webcast, one-way audio offers on-demand radio listening, conferencing - What is sound: pressure waves of air o Visualize the sounds as a series of recurring waves called WAVEFORM o VOLUME: the higher the wave the louder the sound  o PITCH/FREQUENCY: the closer the waves the higher the pitch - Sources of sound: o Pre-packaged (come with computer), purchased/borrowed, create own (recording program, recording studio for higher quality, electronic instruments captured in MIDI) - How is sound recorded o MICROPHONE translates movement into electrical signals (analog) then tape recorder translates the waveform from an electrical signal on a wire to a magnetic signal on a tape (analog) o Analog-to-digital converter (ADC): ADC captures a snapshot of the electric