1033 Compsci final notes UWO
1033 Compsci final notes UWO
-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
Primary colours: Red, Green, Blue Primary colours: Cyan, Magenta, yellow
“added” light to a black background in “subtracted” from a white background
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
-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
-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
- 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/100th inch
§ When you increase the number of pixels, increase quality of detail in the
resolution
§ For different output delivery:
· Web – set to 72 dpi (smaller graphics, don’t see detail)
· Laser Printers – 300-600 dpi
· High end imagesetters – 1200 dpi, 2400 dpi, or higher
(newspapers/magazines)
§ 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)
-supports a max of 8-bit color scheme (8 -stores full color information – max 24
bits/pixel = 256 colours) - good for clip art, bits/pixel (16 million colors)
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
**tiny file size and limited colors **larger file size but full color scheme
Windows Bitmap
(.BMP)
Encapsulated Postscript
(.EPS, .EPSF)
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 ($$)
- 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: <tag> xxxxxx </tag>
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 (<p> HTML tag) – Press
<ENTER>
o Line Break – no space between lines (<br> HTML tag) – press
<SHIFT><ENTER>
- 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
Publisher registers into database, or wait for Wait for human editors
spider
- 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
<title> xxx<title>
§ 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
§ <meta name=”Description” content =”xxx”>
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
§ <meta name=”keywords” content=”x,x,x,x,x”>
§ 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
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
Size Larger Vector images take up Vector images take up less space than
than less space than GIF GIF bitmapped images
normal gif bitmapped images
Need to Nothing Flash Player (Free and Web browser plug in (The Shockwave
play it works with most Player)
browsers)
-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
à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
- 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
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.
Advantages Disadvantages
Once downloaded, Takes a long time to
can be replayed, download, especially
edited over and over for big files
(don’t need to wait
again for download)
Don’t need a special Takes up disk space
streaming web on the computer to
server to post the store it
file
Example: Audio Files on Limewire
Streamed Audio
Advantages Disadvantages
Plays immediately Cant rewind, pause,
etc.
Question: How many things can you represent with a 5 bit depth (5 bits)?
Question: What is the smallest value that you should set the dpi for an image that you plan to
print?
Question: When converting analog to digital what two things to you have to do to analog data?
Question: What bit depth do you need to represent a black and white image?
1. What are the chunks of data that are sent over the internet called?
2. True or false, the Internet and the World Wide Web are the same thing? False, Internet
is a software. WWW is a hardware.
3. Give an example of a valid IP address. (212.432.543.1)
4. True or false, www.csd.uwo.ca/courses is a domain name? False, only csd.uwo.ca
5. Give 3 valid TLDs - .net, .com, .org
6. www.homer.simpson.com is a valid domain name. TRUE or FALSE – TRUE??
7. Zack&Cody.Love.You.2.com is a valid domain name. TRUE or FALSE - FALSE
8. What is a message (a webpage or an email message or a file) on the Internet broken
down into before it is sent over the net? – deliver information to the customers??
9. Are the following valid IP addresses?
1.1.1.1 yes
126.265.13.10 yes
129.129.129 no (4 numbers)
highly in Google? Question: Which will rank you higher with Page Rank, having 1 link
to your site from www.wikipedia.org or having 3 links to your site from www.uwo.ca?
○ The number of links from other pages to your page
● Question: if we search for the terms “Cattle”, “Ranch”, “Texas” and we only get pages
back that have those words, what are some of the factors that will make one page show
up ahead of another page?
○ Property titles; alt tags; frequency of key words; closer frequent words
Review Questions: Lecture 08
Question: What name do we give to the start frame and the end frame? (not the frames that are
computer generated, rather the frames drawn by us?)
* Keyframes
Question: Why is the act of generating the frames in between the first frame and the last frame
called?
* Tweening
Question: The path the object follows have to be a straight line, FALSE
Question: What software allows us to do path based animation?
* Flash
Stage: rectangular area where the visible motion will take place
Timeline: series of frames in a row and stacks of layers. Indicates key frames, regular frames
and empty frames
Shape: basic shapes drawn with the shape tools, line tool or a single letter
Symbol: store in a library and can be reused. Changes to the library symbol will result in
changes in all of the copies of this symbol currently on the stage.
● Graphic: static graphic, can be used in other symbols
● Button: interactive part of animation with user, responds to mouse clicks and rollovers.
● Movie clip: reusable piece of animation, can turn a simple animation into a movie clip
symbol and reuse it.
Question: How many frames per second should we have when building an animation for
display on a computer? 12-14
Question: Which type of animation uses frames:
● Cel Based
● Path Based
● Both
● Neither
Question: If an animation is 40 frames long and the fps is 5, how long will the animation take to
play? 8 seconds
Question: Why can your computer sometimes play one .avi file but then not play another .avi
file? All depends on the CODEC
Question: What file format does YouTube use (.AVI, .WMF, etc.) What newer file format is Flash
Player pushing (FL4)
Question: avi is a container file format. True
Question: .avi files will always use the same codec to play them. False
Question: Name 3 ways of reducing the file size of a piece of video before moving it onto your
website.
a) Lower frame size (from 680x480 – 320x240)
b) Lower frame rate
c) Choose a CODEC
Which of these will NOT affect the size of a video file?
1. Picture Size
2. Color Resolution
3. Type of font used for credits
4. Number of Frames per second
5. Length of Clip
6. All of the above will affect the size
What is a codec?
1. A type of video capture card
2. A piece of software used for compression/decompress of videos and audios
3. A piece of software used to edit videos
4. None of the above