Study Guides (238,342)
Canada (115,087)
Prof (9)

compsci final exam notes

32 Pages
Unlock Document

Western University
Computer Science
Computer Science 1033A/B

CS  1033B  –  Final  Exam  Notes     Page  1   Compsci  1033B  –  Final  Exam  Notes   MULTIMEDIA  AND  COMMUNICATION   -­‐ 7-­‐15  seconds  to  make  a  good  first  impression,  4  min  for  someone  to  decide  to  go  beyond  first  impression     -­‐ MULTIMEDIA:  everything  you  can  hear  or  see;  Media  include  texts,  books,  pictures,  music,  sounds,  CDs,   videos,  DVDs,  MP3  players,  iPods,  records  films  etc   -­‐ MUTLTIMEDIA  (technical):  Describes  any  application  or  technology  that  can  be  used  to  present:  Text,   images,  sound,  animation  video     Software  applications    Delivery  on  the  Internet  Via  Website    Combined  into  an  application  to  inform,   educate,  entertain   -­‐ Internet  –  fast,  cheap,  and  accessible  (reaches  people  all  over  the  world)   o #  million  –  Asia  389,  Europe  313,  North  America  232  (??)   o More  users  in  Asia,  but  greater  percentage  of  population  in  North  America   (70.9%  vs  12.4%)   Multimedia  History  Quiz   -­‐ Earliest  drawings/paintings  by  humans  discovered  in   France   -­‐ The  first  permanent  photograph  was  taken  between   1820-­‐1830   -­‐ The  first  motion  picture  was  recorded  between   1880-­‐1890     -­‐ The  first  full  length  movie  with  synchronized  dialogue  (talkie)  was   The  Jazz  Singer   -­‐ One  of  the  first  full  length  movies  to  use  colour  was   The  Wizard  of  Oz   -­‐ Arpanet  was  the  name  of  the  predecessor  to  the  internet   -­‐ Tim  Berners-­‐Lee  invented  the  World  Wide  Web   -­‐ Mosaic  was  the  first  graphical  browser  for  the  World  Wide  Web     -­‐ The  Rolling  Stones  was  the  first  band  to  give  a  concert  over  the  Internet     -­‐ Toy  Story  was  the  first  full  length  feature  film  that  was  completely  computer  generated   -­‐ Napster  was  an  application  that  revolutionized/irritated  the  music  industry  in  1999   -­‐ Digital  cameras  became  fairly  accessible  and  affordable  to  the  public  in   1996   Multimedia  History     -­‐ 1500-­‐1300BC:  prehistoric  humans  paint  images  on  the  walls  of  their  caves  (Grotte  de  Lascaux,  France   -­‐ 1914:  silent  movies  incorporated  multiple  media  be  using  film  and  text  captions  together   -­‐ 1928:  Walt  Disney  debuts  the  second  short  starring  a  mouse  named  Mickey,  and  the  first  cartoon  to  use   synchronized  sound  (Steamboat  Willie)   -­‐ 1928-­‐1931:  Movies  with  sound  replace  silent  movies   -­‐ 1930s:  Technicolor  is  introduced  in  film  and  most  movies  are  filmed  in  colour  after  1940   -­‐ 1937:  Bell  laboratories  had  a  breakthrough  in  creating  dual  sound  tracks  on  film.    Fantasia  was  the  first   commercial  movie  with  a  complete  surround   soundtrack  in  1940   -­‐ 1969:  NETWORK  TECHNOLOGY  INTRODUCED    ARPANET   o ARPANET:  Advanced  Research  Projects  Agency  Network,  1969     o First  packet  switching  network  and  predecessor  to  the  internet  (discussed  in  1962)   o Objective:  a  network  technology  to  allow  researche rs  at  various  locations  across  the  country  to   share  information     o 4  locations  in  1969  –  UCLA,  Stanford,  UC  Santa  Barbara,  University  of  Utah     CS  1033B  –  Final  Exam  Notes     Page  2   o 1970  –  East  coast     -­‐ 1977:  Apple  starts  to  dominate  PC  market   -­‐ 1981:  IBM  PC  announced  and  captures  market  share  in  18   months   -­‐ 1991:  WORLD  WIDE  WEB  debuts  (Tim  Berners-­‐Lee)   -­‐ 1992:  MS  Windows  3.1  is  released                        HTML  debuts  –  Basis  for  Website  development     -­‐ 1993:  Mosaic  –  First  graphical  browser  (web  pages  with  images),  by   Marc  Andreesen,  Erin  Brina ,  and  Tim   Clark  (transformed  internet  from  research  to  household)   -­‐ 1994:  The  Rolling  Stones  become  the  first  major  band  to  broadcast  a  live  performance  over  the  internet   (opening  band  on  air  first  –  Sever  Tire  Damage)   -­‐ 1995:  Disney’s  Toy  Story  –  first  feature  length  computer  generated  movie  (77  minutes  long,  4  years  to   make,  800,000  machine  hours  to  render)   -­‐ 1996:  Affordable  digital  cameras  widely  available   -­‐ 1998:  GOOGLE  search  engine  operates  by  Larry  Page  &  Sergey  Brin   -­‐ 1999:  Napster  debuts,  allowing  users  to  download  and  sh are  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  applica tions    #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,  mov ies,  videos)    HTML  has  features  that  allows  you  to  build  hyperlinks  to  other  webpages  or  location  on  the   same  page     -­‐ Computer  Based  Delivery   o Computer-­‐based  multimedia  applications  INTEGRATE  the  various  media  components  and  ALLOW   interactivity     o Modes  of  delivery  of  the  applications  include:  video  games,  interactive  web  applications,  CD  ROM   disks,  info  kiosks     CS  1033B  –  Final  Exam  Notes     Page  3   -­‐ Multimedia  categories  and  applications   o Education  –  offering  instruction  (CD-­‐Roms  for  preschoolers,  bio  in  virtual  labs)   o Entertainment  –  largest  category  (games  (CDs/web),  proprietary  systems  (X -­‐box),  MP3   players/ipods)   o Reference  –  Encarta  and  interactive  world  atlas  (interactive  multimedia  including  sound,  video,  and   3-­‐D  animation  to  provide  information  and  illustrate  concepts)   o Business  –  businesses  delivering  marketing  applications  and  employee  training  on  CD’s  and   Internet  (job  openings,  product  lines,  services)   -­‐ How  should  you  deliver  the  application   –  WWW  vs  CD/DVD     CD/DVD   World  Wide  Web   Access  Time   View  instantly  by  inserting  into  driveMay  encounter  slow  connection  speeds     Ability  to  change Cannot  change  content  –  must   Easy  to  update  material,  new  updates  can   content   recreate  and  redistribute   be  accessed  instantly     -­‐ Required  equipment   o Development  systems:  systems  used  by  multimedia  developers  to  create  applications   o User  systems:  systems  used  to  playback  multimedia  applications   o Multimedia  developer  requires:  sound  card,  video  card,  microphone,  speakers,  camera,  DVD  drive    TEXT   -­‐ Dual  role:   o VISUAL  representation  of  the  message   o GRAPHICAL  element     -­‐ Use  of  text  in  multimedia  applications  varies  on:   o The  type  of  application  –  educational,  entertainment,  business   o Audience  –  children,  teens,  adults,  elderly,  ESL  (less  text  for  children  vs  adults)   -­‐ Changing  the  look  of  webpage  by  changing:   o Text  attributes  –  colour,  size,  font  type   o Design/layout/placement  of  text  –  bullets,  alignment,  text  in  groups     -­‐ Emphasis  can  be  added  by  varying   text  attributes   o Font  type  –  Arial,  times  new  roman    SERIF  –  tails,  script,  body  paragraphs  (times,  courier  new,  centu ry  schoolbook,  palatino)     Tails  =  easier  to  read  on  paper    SANS-­‐SERIF  –  no  tails,  block-­‐oriented,  headings,  titles  (arial,  verdana,  Helvetica,  comic)   Easier  to  read  paragraphs  on  websites,  short  headings     o Style  –  regular,  bold  italics   o Kerning  –  space  between  adjacent  individual  characters,  measurement  expressed  in  “em”   (emphasis)  –  negative,  0,  positive  values    Helps  align  multiple  lines   o Leading  –  vertical  space  between  lines  of  text,  measured  in  positive,  0,  or  negative  points      lower  value  –  closer  together;  higher  value  –  further  apart     o Size  –  pts  vs.  pixels   o Colour  –  red,  blue,  black...   o Special  effects  –  underline,  shadows,  superscript,  subscript     -­‐ Text  size  –  Pixels  vs.  Points     CS  1033B  –  Final  Exam  Notes     Page  4   PIXEL  (.ppi  aka  dpi)   POINTS  (.dpi)     unit  of  measure  for  monitor  resolution  (px)   unit  of  measure  for  printer  resolution  (pt)   -­‐WEB   -­‐WORD   -­‐  #  of  pixels  per  inch  of  monitor  display    -­‐#  of  dots  per  inch   -­‐a  display  setting  of:  1280x1024  has  1.3  million  DP-­‐absolute  type  size  –  usually  used  in  printing   800x600  has  480,000  DPI     -­‐higher  dpi  =  better  resolution   -­‐standard  resolution  on  Mac  –  72  dpi   -­‐points  are  a  PRINT  unit  of  measure     -­‐standard  resolution  on  Windows  –  96  dpi     -­‐PC  fonts  25%  larger  than  mac  fonts  on  websites   -­‐fronts  more  precisely  the  size  you  want  on  the  -­‐if  web  document  –  text  expressed  in  points   screen   -­‐can  be  displayed  much  larger  or   smaller  than  you   -­‐some  browsers  will  not  allow  the  text  size  to  cexpect   (IE  –  no,  FF  –  yes)   -­‐   -­‐   -­‐Control  over  the  viewing  size   -­‐print  style  sheets  created  to  print  text  using  poi*72  pts  WILL  ALWAYS  BE  1  INCH  WHEN  PRINTED,   *develop  websites  using  the  pixel  system   regardless  of  what  monitor  it  was  processed  on   10  px  is  SMALLER  than  10  pts   –  NOT  EQUAL     -­‐ Text  colour  -­‐  Hexadecimal  code     o Represented  as  a  number  of  6  hexadecimal  digits   o Made  up  of  decimals  (0 -­‐9)  and  letters  (A-­‐F)   o Represents  RRGGBB   o Red  =  #FF0000,  White  =  #FFFFFF,  Black  =  #000000,  Western  =  #660099   -­‐ Text  design  –  readability,  visual  appeal  (compliment  graphics,  position),  mood  creation  (headings  sans-­‐ serif,  body  serif),     o Avoid  exotic  fonts  for  consistency  on  different  systems   o Use  a  max  of  2-­‐3  different  types  of  fonts   o Use  a  max  of  2-­‐3  different  colours  in  a  document/website   o NEVER  use  underlining  in  a  webpage     -­‐ CRAP  Principles  of  Webpage  Design:   o CONTRAST:  avoid  making  2  elements  just  similar  –  either  made  them  same  (colour/font)  or  VERY   different   o ALIGNMENT:  items  are  aligned  –  creates  stronger  cohesive  unit   o PROXIMITY:  group  related  items  together  *physical  groupings  imply  relationship     o REPETITION:  repeat  some  aspect  of  the  design  throughout   GRAPHICS   -­‐ We  rely  on  images  for  –  Information,  explanations,  entertainment     -­‐ Graphics  originate  from:  non -­‐digital  medium  (paper  cop y  of  a  photo),  outside  world,  create  image     -­‐ DIGITIZATION:  the  process  of  translating  a  piece  of  information  (text,  images,  sound  recording,  video)  into   BINARY  BITS   o BIT:  short  for  Binary  Digit,  value  of  “1”  or  “0”   –  fundamental  units  of  information  in  a  computer   system   o When  press  a  key ,  binary  code  sent  to  RAM  (memory)    CPU    Video  card    On  screen     o Measurement  system  –  binary  system  (base  of  2,  exponent  =  number  of  bits)   8 o BYTE:  collection  of  8  bits    (2 )  =  256  possible  combinations  of  1s  and  0s    Ex:  2  =  2  values  (0,  1),  2  =  4  values  (00,  01,  10,  11)...   CS  1033B  –  Final  Exam  Notes     Page  5   -­‐ IMAGE:  represented  by  a  grid  (array,  matrix)  of  squared  picture  elements  called   PIXELS  (the  smallest  image   component  and  thus  shows  the  smallest  detail)   o Pixel  –  numerical  value  corresponding  to  a  COLOR  INDICATOR  (bw  or  colour)   o 640x480  screen  –  640  dots  on  each  of  480  rows    300,000  pixels     -­‐ Coding  colors   o Black/white  =  1  bit  ONLY  (0  =  black,  1  =  white)   o 2  bits  –  combination  of  black  and  white  (01/10)    grey     4 o More  bits,  more  shades...  4  bits     2  =  16  grey  shades     Used  for  web   Used  for  printing   Additive  Model  (RGB)   Subtractive  Model  (CMYK)    (k=black)   Primary  colours:  Red,  Green,  Blue   Primary  colours:  Cyan,  Magenta,  yellow   “added”  to  a  black  background  in  order  to   “subtracted”  from  a  white  background     obtain  color  shades   -­‐ In  “TRUE  COLOR”  each  pixel  represents  some  color  shade  –  Uses  24  bit  representation  =  16  million  colors   -­‐ Color  can  be  expressed  in:       RGB  Code   Hexadecimal  Code     Each  pixel  is  represented  by  3  values   -­‐consists  of  16  unique  symbols:   -­‐ie:  light  yellow  =  <255,255,127>     0,1,2,3,4,5,6,7,8,9,E,  and  F   Syntax:     -­‐color  represented  by  6  digits:  ie,  #FFCC66     Each  value  ranges  from  0 -­‐255     256  color  shades  =  2  bits     3 -­‐16  million  colors  in  the  spectrum  (256 )       Red:  <255,0,0>   Red:  #FF0000   Green:  <0,255,0>   Green:  #00FF00     Blue:  <0,0,  255>   Blue:  #0000FF   -­‐Web-­‐safe  colors:  only  1,3,6,9,C,F     o RGB  does  not  =  Hexadecimal,  need  converter     o Cathode  ray  tube  devices  (such  as  computer  monitors)  can  only  display  colour  with  red,  green  and   blue  light  –  this  is  the  color  system  of  the  web   -­‐ Types  of  Graphics  –  Bitmap  or  vector  –  effects  how  graphics  are  displayed  on  a  computer  screen:  Quality,   file  size,  time  to  display  graphics     BITMAP  (zoom  in  to  pixels)   VECTOR  (zoom  in,  no  pixels)   -­‐images  made  up  of  small  squares  called  Pixels     -­‐image  is  represented  with  lines  and  arcs  that  have  a   -­‐Editing  pixels:  changing  color,  shade,   brightness   mathematical  relationship   Advantages  of  using  a  small  image  rather  than  larger:   -­‐describes  the  drawing  of  the  shape     -­‐shorter  time  needed  to  display  on  screen   -­‐ Line:  starting  point,  direction  length   -­‐smaller  file  size   -­‐ Rectangle:  start  point,  width  height   Disadvantages:   -­‐ Circle:  center  and  radius   -­‐distortion  occurs  when  ima ge  is  enlarged   *SMALLER  FILE:  records  mathematical  relationship     -­‐as  image  is  enlarged  (resized):   -­‐as  image  enlarged  (resized):   -­‐ Dots  become  larger,  edges  more  jagged   -­‐ Dots  become  larger,  edges  still  clean,  crisp   -­‐ Quality  decreases   -­‐ Quality  is  maintained   –  no  distortion   -­‐ File  size  increases       -­‐ File  size  increase     **Vector  CANNOT  be  converted  to  Bitmap,  but  Bitmap  CAN  be  converted  to  vector       CS  1033B  –  Final  Exam  Notes     Page  6   BITMAP-­‐BASED  programs  “PAINT”   VECTOR  Graphics  programs  –  “DRAW”     -­‐ability  to  edit  an  image’s  pixels   -­‐greater  control  and  precision  with  free -­‐hand  tool   -­‐images  from  scanners,  cameras   -­‐display  more  accurately  on  screen   -­‐need  a  “PAINT”  program   -­‐download  faster  because  support  of  Flash  and  Scalable   Vector  Graphics  (SVG  formats)   -­‐produce  smaller  files  that  download  faster   -­‐more  details  in  vector -­‐based  illustrations   -­‐must  use  a  “DRAW”  program   –  draw  and  edit  paths   Photoshop,  paintshop  pro,  photoplus   Adobe  illustrator  or  Macromedia  FreeHand,  Corel  Draw   (but  photoshop  v6.0  has  vector  features)     -­‐ Graphic  Attributes    IMAGE  QUALITY:  Image  resolution,  image  bit  depth     o IMAGE  RESOLUTION  (ppi/dpi):  the  number  and  spacing  of  pixels  in  an  image    The  number  of  pixels  per  square  inch  on  a  computer -­‐generated  display   th  Ex:  if  resolution  100  ppi,  each  pixel  1/100  inch    When  you  increase  the  number  of  pixels,  increase  quality  of  detail  in    resolution    For  different  output  delivery:   • Web  –  set  to  72  dpi  (smaller  graphics,  don’t  see  detail)   • Laser  Printers  –  300-­‐600  dpi   • High  end  imagesetters   –  1200  dpi,  2400  dpi,  or  higher  (newspapers/magazines)    Image  size:  the  physical  dimensions  of  an  image    If  number  of  pixels  in  an  image  is  FIXED:     • decreasing  the  size  of  an  image  increases  its  resolution  (crisper  edges)   • increasing  the  size  of  an  image  decreases  its  resolution  (pixelated,  jagged)   o IMAGE  BIT  DEPTH  (aka  COLOR  DEPTH):  maximum  number  of  colors  used  to  represent  an  image      The  more  bits  used  the  more  color  info  stored  to  describe  the  color  of  a  pixel   • Quality  improves  and  larger  file  size      Human  eye  can  detect  about   10  million  colors,  therefore,  storing  more  than  10  million   colours  is  pointless,  so  we  only  use  24  bit  color  (16  million  colours)   -­‐ File  formats   o Universally  supported  files :  universally  supported  by  graphics  industry    JPG,  GIF    When  an  image  is  being  sent  to  another  ap plication,  convert  to  JPG  or  GIF   o Proprietary  files  (NATIVE  FILES):  Default  files  used  by  specific  software  application,  can  be  Bitmap   or  vector  formats  psd,  dwg,  pic  –  can  save  in  native  format  or  universal  format    PSD:  Adobe  Photoshop,  AUP:  Audacity,  MVMM:  moviemaker      Not  meant  to  be  transferred  to  other  applications    Software-­‐specific  image  properties  can  only  be  retained  when  an  image  is  saved  in  the   software’s  native  format    (layering  in  photoshop)   o EPS/EPSF:  Encapsulated  Postscript  –  vector   o GIF:  Graphics  interchangeable  format  –  Bitmapped   o JPG/JPEG/JPE:  Joint  Photographic  Experts  Group  –  Bitmapped   o CDR:  CorelDraw  –  vector   o DWG:  Autocad  –  Vector     CS  1033B  –  Final  Exam  Notes     Page  7       -­‐ Sources  of  Graphics    graphics  must  be  in  DIGITIZED  form  to  use  in  multimedia  application   o Digitized  cameras,  c amcorders:  captures  images  and  digitizes  them  into  computer  images  through   its  software   CS  1033B  –  Final  Exam  Notes     Page  8   o Scanners:  digitizes  drawings,  illustrations,  and  3D  objects  into  computer  images  using  its  software   o Internet  sites:  free  clipart,  on-­‐line  stock  photo  library  ($$)   -­‐ Graphics  Programs   Illustration  (aka  Drawing  programs)   Photo/Image  Editors  (aka  paint  programs)   -­‐work  with  VECTOR  images   -­‐work  with  BITMAP  images   -­‐vector-­‐based  drawing  programs  allow  more   -­‐Bitmap  graphics  tools  are  needed  for  working  with   flexibility  when  creating  artwork  that  is  to  be  resizephotos,  scans,  or  other  “realistic”  images   or  must  go  through  multiple  edits   Logos   Superior  than  illustration  programs  for  final  output   of  images  for  web/special  effects   Examples:  adobe  illustrator,  CorelDraw,   Examples:  Adobe  photoshop,  Corel  Photo -­‐paint,  Jasc   Macromedia  Freehand   Paint  Shop  Pro     SERVERS  AND  UPLOADING   -­‐ Uptime:  how  long  does  server  stay  up   -­‐ Upload:  transfer  files  to  server  so  they  can  be  displayed  on  the  web   -­‐ Advantages  of  a  server:   1) Connected:  on  all  the  time  and  connected  to  internet   2) Always  available:  website  always  available  since  always  on     3) Taken  care  of:  security  and  maintenance  by  people     -­‐ Panther:  name  of  computer,  “server”,  that  hosts  uwo  website   o Host  name:   o User  website:   -­‐ FTP:  file  transfer  protocol   o Ex:  SSH  Secure  File,  Filezilla,  WS -­‐FTP,  Fugu  (for  mac)   o Some  file  transfer  programs  do  not  connect  to  all  servers   -­‐ S-­‐FTP  using  Secure  shell   o SHELL  CLIENT:  can  type  in  commands  by  hand  –  but  it’s  in  Unix   o FILE  TRANSFER  CLIENT:  allows  us  to  transfer  files  to  panther  –   o Setting  permissions:    Sometimes  you  can’t  see  your  files  on  internet  because  files  are  “locked”  after  uploaded    Solution  1:  change  file  “permissions”  –  Every  time  you  upload  new  file,  go  to  Shell  window   and  type  in  “publish    Solution  2:  change  file  “permissions”  –  using  Secure  File  Transfer,  everytime  you  upload   new  file  change  permission  rights  on  that  file  or  folder  (change  properties)   • “Horseshoe”–  checkmarks  shaped  in  an  upside  down  “u”   • 644  for  file,  755  for  folder   How  images  are  used   -­‐ For  printing:  1)  Quality,  2)  File  Size   -­‐ For  the  Web:    1)  File  Size,  2)  Quality  (DOWNLOAD  speed)  –  objective  –  download  website  as  quickly  as   possible       CS  1033B  –  Final  Exam  Notes     Page  9   OPTIMIZE  IMAGES:  reduce  the  file  size  (download  time)  without  compromising  image  Quality     -­‐ 1)  File  formats  –  choose  jpg  or  gif   -­‐ 2)  Reducing  color  resolution   –  24  bits,  16  bits,  8  bit     -­‐ File  formats  acceptable  on  the  web:  gif,  jpg,  png   .GIF  –  Graphics  interchange  format   .JPG  –  joint  photographic  experts  group   -­‐attributes  file  format   -­‐attributes  file  format   -­‐compression   -­‐compression   -­‐color  resolution   -­‐progressive  jpeg     -­‐dithering     -­‐interlacing   **distorts  edges  where  there  is  sharp  contrast   -­‐transparency   ARTIFACTS:  noise/specs  around  the  image     -­‐common  image  format  used  on  the  internet   -­‐cross  platform   -­‐supports  a  max  of  8-­‐bit  color  scheme  (8  bits/pixel  =  256   -­‐stores  full  color  information  –  max  24  bits/pixel  (16   colours)    -­‐  good  for  clip  art,  not  photos   million  colors)   -­‐best  for  large  areas  of  solid,  flat  color   -­‐best  for:  blends  of  color,  softer  shadow  effects  and   subtle  changes  in  color     -­‐NOT  for  well  defined  lines  or  sharp  contrasts  between   colors     -­‐uses:  illustrations,  logos,  text  as  graphics,  cartoons,   -­‐uses:  photos,  computer  games,  screenshots,  stills  from   buttons   a  movie   **tiny  file  size  and  limited  colors   **larger  file  size  but  full  color  scheme     “LOSSLESS”  compression  –  no  data  discarded  during   “LOSSY”  compression  –  data  is  discarded  each  time  file   compression    QUALITY  KEPT   compressed  QUALITY  DEGRADES     Compression  techniques:   -­‐ GIFs  –  “LOSSLESS”  compression    no  discard  of  data   o Does  not  get  blurry  or  mess   o Uses  simple  technique  called  LZW  compression  to  reduce  files  sizes  of   images  by  finding  repeated   patterns  of  pixels   o Never  degrades  image  quality   -­‐ JPGs  –  “LOSSY”  compression    discards  data   o Not  all  information  in  original  image  is  preserved   –  NOT  the  same  as  original   o Degrades  image  quality     o Compression  achieved  by  “forgetting”  certain  details  about  the  image,  which  JPG  fills  in  later  when   it  is  displayed   o Degree  of  lossiness  can  be  varied  by  adjusting  compression  parameters    0%  compression  =  100%  quality,  95%  compression  =  5%  quality   o *work  with  image  in  native  format  then  save  fi nal  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  ima     o Observations:    Quality  of  JPEG  file  is  proportional  to  the  file  size    (quality      File  Size          )    Higher  image  quality  setting  (has  a  lower  compression  value)  results  in  less  data  being   discarded  (  compression  (smaller  version)        Quality        File  size      )   CS  1033B  –  Final  Exam  Notes     Page  10   -­‐ Color  resolution   o GIF  control:  color  resolution  (number  of  colors)  support  8 -­‐bit  color  –  256,  128,  64,  32,  16,  8  bytes    By  changing  the  color  resolution  (bit  depth)  can  lower  download  time     -­‐ BMP  files  –  no  compression,  stores  information  about  each  pixel,  each  pixel  is  1  byte   -­‐ GIF  files  –  divide  image  into  shapes  on  a  grid  (startx,  starty,  endx,  endy,  color)   o Each  shape  records  5  bytes     o Another  way:    Looks  for  patterns:  ex:  12345123451234512345,  1=12345     1111    Builds  a  decoding  hash  table  (1  =  12345)   -­‐ JPEG  files  –  conversion  programs  try  to  save  information  about  brightness  (human  eye  pays  more  attention   to  brightness  than  color  details).    If  it  finds  two  adjacent  pixels  with  very  similar  colors,  store  both  pixels  as   same  color  and  discard  other  color     -­‐ DITHERING:  (when  saving  GIFs)  most  common  method  of  reducing  the  color  range  of  images  down  to  the   256  colors  seen  in  8-­‐bit  GIF  images   o Juxtaposing  pixels  of  two  colors  to  create  the  illusion  that  a  third  color  is  present  (grainy  look)   o BROWSER  SAFE  PALLETE:  216  colors  honoured  between  browsers,  operating  systems,  and   computer  platforms     o If  image  uses  color  hues  outside  browser  safe  palette  automatically  dithers  displayed  image   o Juxtaposes  coloured  pixels  from  browser-­‐safe  palette  in  order  to  simulate  any  color  which  is  not  in   palate     o Can  reduce  number  of  colors  in  a  GIF  and  choose  options  to  control  the  way  colo rs  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  i mage  appears  to  have  no   visible  border  around  it    supported  by  GIF  and  PNG  ONLY   -­‐ PNG  (Portable  Network  Graphics)   o Developed  as  replacement  for  GIF  due  to  legal  issues   with  LZW  compression   –  starting  to  replace   o LOSSLESS  compression  (no  discarded)   o Allows  images  to  have  up  to  48  bit  color  (but  would  never  be  necessary)   –  more  for  photos   o Can  set  which  color  bit  depth  you  want  to  make  file  sizes  smaller     o Supports  OPACITY  and  TRANSLUCENCY  (shines  through)   o Advantages  of  PNG:    Lossless  compression    Smaller/same  size  as  GIFs  keeping  lossless  (5 -­‐25%  smaller)    PNG  better  than  JPG  with  images  that  contain  text  or  line  art    Supports  opacity  and  translucency     o Disadvantages  of  .PNG:    Older  browsers  may  not  support    No  animation  (unlike  GIFs)    File  size  for  24  bit  color  photographs  bigger  than  JPG  files     CS  1033B  –  Final  Exam  Notes     Page  11     -­‐ Reduce  the  download  time  by  using  any  or  all  combinations:   1) Reduce  file  size   2) Choosing  .jpg  or  .gif  formats   3) Reducing  color  resolution  (24   bits,  16  bits,  8  bits)   -­‐ Goal:  download  web  page  fast  –  download  time  effected  by  graphic  file  size  and  file  format     o File  size    Use  smaller  sized  graphics  expressed  in  “KB”  measurement  to  reduce  amount  of  webspace   needed  to  store  image    Recommended  file  size  f or  graphics  on  the  internet  is  no  larger  than  about  100KB,   otherwise  it  will  add  seconds  to  download  time   o File  Format:  .GIF  or  JPG  rather  than  BMP,  TIFF  or  other   o Most  graphics  software  can  export  from  any  extension  to  .jpg  or  .gif   WEBSITES   -­‐ Why  build  a  website   o Reach  potential  customers   o Details  on  services/products  providing  testimonials   o Window  shopping     -­‐ Canadians  purchased  $40  billion  online,  28  hours  online  each  month,  1/373  web  pages/CAN  household   -­‐ Web  searches  worldwide  =  5.7  billion  per  day     -­‐ EBAY  –  online  auction  and  shopping,  March  2008  revenues  $8.7  billion   o Sept  1995  –  Pierre  Omidyar  –  Echo  Bay  consulting,  “broken’  Laser  pointer   o Sept  1996  –  Jeff  Skol  (Movie  producer)   –  Marketplace  for  goods  and  services     o Sept  1998  –  went  public  –  Meg  Whitman  (Harvard,  Hasbro)  –  Vision:  “connecting”  people   o John  Donahoe  –  CEO  of  Ebay       CS  1033B  –  Final  Exam  Notes     Page  12   Website  Startup     -­‐ THE  INTERNET:  a  collection  of  local,  regional,  national  and  international  computer  networks  that  are  linked   together  to  exchange  data  and  distribute  processing  tasks   -­‐ HOST:  a  computer  on  the  internet  that  provides  services  such  as  web  pages,  emails,  web  storage   -­‐ ISP:  internet  Service  Provider    Western,  Bell,  Rogers,  Execulink,  Costco   o Allows  one  to  connect  to  the  internet   o Company  that  maintains  an  internet  host  computer  providing  internet  access  and  user  account  for   accessing  internet,  e-­‐mail  box,  webspace  to  host  website     o offers  connection  via  telephone  lines,  cable  TV  or  personal  satellite  dish   -­‐ data  travels  from  one  internet  host  to  another  along   best  route,  if  links  overloaded/out  of  service  –   rerouted     -­‐ IP  (Internet  Protocol)  Address:  uniquely  identifies  each  computer/device  connected  to  the  internet     o An  IP  Address  is  32  bits  (4  bytes)  wide  and  may  be  represented  various  ways     o Binary,  decimal,  hexadecimal,   dotted-­‐quad  (most  popular)  =   o Each  quad  must  be  between  0 -­‐255   -­‐ DOMAIN  NAME:  the  text  name  corresponding  to  the  numeric  IP  address  of  a  computer  on  the  internet     o *only  what  comes  after  www   –  ex:  (;  (   o 2  parts  –  identifies  the  NETWORK  and  the  specific  COMPUTER   o When  browsing  a  website,  IP  address  determines  successful  communication  between  your   computer  and  website   o Process  –  every  time  you  type  a  domain  name:  Internet  server  (called  DNS)  translates  domain  into   IP  address  so  data  can  route  to  the  correct  computer     -­‐ Finding  your  IP  address  –,     -­‐ 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   1) Hypertext  Transfer  Protocol :  rules  that  define  how  data  is  exchanged  between  servers  and  browsers   2) World  Wide  Web :  indicates  file  is  on  the  World  Wide  Web   3) Domain  name:  The  name  of  the  site   4) Path  and  File:  tells  browser  where  to  find  page(s)   -­‐ Domain  name  rules   o Max  of  67  characters  (including  extension)   o 0-­‐9,  a-­‐z   o Dash  character  (hyphen)   o NO  UNDERLINE,  no  spaces,  cannot  start  or  end  with  dash,  case  insensitive ,  no  _   o Must  end  with  a  domain  extension   -­‐  .net,  .com,  .org...  (TLD)   -­‐ SUBDOMAIN:  a  domain  that  is  part  of  a  larger  domain,  two  or  more  parts  (labels)  separated  by  “.”s   o  –  domain  name:,  Subdomain:  “en”   o Used  to  organize  website  content   .com  is  the  first  level  domain  (top  level  domain    TLD)   Mycars  is  the  second  level  domain    is  the  DOMAIN   CS  1033B  –  Final  Exam  Notes     Page  13   mycorvettes  is  the  third  level  domain  –  subdomain  of  the  domain  “”   year2005  is  the  fourth  level  domain  –  subdomain  of  “”   o Rules:    Max  of  127  labels  (each  level  is  a  lab el)    Each  label  max  63  characters  long,  min  3  characters    But  whole  domain  cannot  exceed  255  characters,  including  TLD   -­‐ TLD:  identifies  the  type  of  organization  that  is  associated  with  the  domain   o .com  (commercial  organization,  business,  companies),  .net  (internet  administrative  site,  network   providers),  .org  (non-­‐profit  organizations),  . edu  (educational  institutions),  .gov  (government   agencies),  .info  (information),  .biz  (business),  .ca  (Canada),  .us  (united  states)....   -­‐ Choosing  domain  name  –  pay  on  a  per  year  basis,  must  re-­‐new   o search:,,,   -­‐ WEB  HOSTING:  the  SERVICE  that  provides  internet  users  with  online  systems  for  storing  information,   images,  video,  or  any  content  accessible  via  the  web   o WEB  HOSTS:  (ISPs)  COMPANIES  that  provide  space  on  a  server  they  own  for  use  by  their  clients  as   well  as  providing  internet  connectivity  (rogers,  execulink,  AOL...)  **files  must  be  hosted  on   webserver  provided  by  ISP  to  be  available  on  the  internet     o Why  not  to  host  website  on  your  computer :    Expensive,  continual  connection  (needs  24/7  high  speed  connection),  technical   (complicated),  support  (server  maintenance  requires  24  hour  support,  skills,  knowledge)   o Criteria  for  choosing  web  hosting  company :  disk  space  (5-­‐10GB),  bandwidth  (amount  of  traffic  that   is  allowed  to  occur  between  your  website  and  the  rest  of  the  internet  in  a  given  time  period),  web   site  speed,  database/programming  language  support,  technical  support,  uptime,  FTP  access,  web   statistics  summary,  scripts  availability,  web  provider   Effective  Website  Design   -­‐ Good  features:     o KISS  Principle  (Keep  it  simple,  stupid)   o Consistency   o Color   o Balance   o Easy  to  navigate     -­‐ Creation  Cycle:   -­‐   CS  1033B  –  Final  Exam  Notes     Page  14   1) Planning  and  Design  –  Meet  with  client,  decide  on  colors,  fonts,  background,  links   o ALWAYS  call  splash  page  index.html   –  that  way  domain  name  leads  right  to  it     2) Implementation  –  who  will  maintain?  straight  HTML  programming  vs  Web  page  software?  complexity,  KISS   principle,  CRAP  principles,  Test  in  Netscape,  explorer,  firefox,  documentation     3) Publish  –  Web  space,  use  FTP  software,  upload  once  website  is  ready,  Back  up  files     4) Maintenance  –  who  is  maintainer,  training,  update  frequently,  documentation,  backup  information     o Make  sure  allow  for  frequent  updates  in  design     -­‐ Implementation:  Designing  for  Web   o WEB  PAGE:  HTML  (hypertext  markup  language)  –  computer  instructions  used  to  create  web  page,   browser  reads  html  code    HTML  –  cross  platform,  any  computer  can  read      HTML  Tags:    xxxx xx     o WEB  SITE:  collection  of  web  pages  created  and  maintained  by  an  individual/organization     o WEB  SERVER:  computer  that  stores  web  pages  and  makes  them  available  for  people  to  see  on  the   internet   o WEB  BROWSER:  program  that  allows  you  to  view  the  internet  (IE,  FF,  Netscape,  Safari...)   -­‐ Web  Authoring  Software   –  WYSIWYG  (what  you  see  is  what  you  get)   o Dreamweaver:  web  page  editor  and  site  management  tool      SITE  MANAGEMENT:  organize  files/folders,  moving  files,  rearranging  pages  and  updating   links  easily      records  HTML  code  as  you  build   o Interface:    Document  window:  area  where  you  build  webpage    Panels:  provide  you  with  commands/properties  and  characteristics  of  the  current  object  or   task  you  are  busy  with  –  can  move  them,  most  common  floating  is  property  inspe ctor    Site  panel:  folder  that  you  are  currently  working  on,  gives  filenames,  path  directory,  etc    Property  panel:  characteristics  of  objects/text  that  you  have  inserted  (size,  color,  font)   o Navigation  styles  –  make  sure  consistent  between  pages     -­‐ Creating  a  New  Site   o ALWAYS  identify  to  Dreamweaver:  the  folder  where  your  website  will  be  stored  through  Manage   Sites    New  site:  no  files  exist  yet,  but  will  be  creating  them    Folder/files  exist:  but  never  worked  with  files  in  DW   o Identify  Site  name  (descriptive  name)  and  local  root  folder  (where  all  pages  stored)     o File  names:    Do  not  use  spaces  in  file  names  and  folders  (allowed   -­‐  %20  =  space)    Do  not  use  capital  letters   –  PANTHER  IS  CASE  SENSITIVE    .htm  (hypertext  Markup)  –  DW  versions  prior  to  8,  based  on  Dos/windows  3.x    .html  (hypertext  markup  language)  –  DW  8      .shtml  (server  side  includes)  means  that  html  document  has  special  commands  for  the   server  to  process    .cgi  (common  gateway  interface)  –    instructions  that  causes  events  to  happen  on  server  by   executing  programs  written  in  perl,  c...,  used  for  database  access,  forms  processing    .asp  (active  server  pages)  –  scripting  language  developed  by  MS,  script  embossed  within  a   webpage  along  with  its  HTML,  causes  active  server  side  processing   CS  1033B  –  Final  Exam  Notes     Page  15   • Same  function  as  .cgi  but  integrated  into  Active  X  environment      .php  (hypertext  pre-­‐processor)  –  alternative  to  asap,  script  language  and  interpreter  used   primarily  on  Linux  web  servers,  empeded  within  web  page  along  with  its  HTML,  before   page  sent  to  user  that  has  requested  it,  server  calls  php  to  interpret  and  perform  the   operations  called  for  in  the  script     o Script:  special  instructions  beyond  DW  commands     -­‐ View  Layouts:   o Design  view:  shows  WYSIWYG  view   o Split:  combo  of  both  views  (design  and  code)   o Code  View:  shows  your  HTML  code     -­‐ Page  Title  Property:  associates  a  general  description  of  what  webpage  is  about   –  an  identity   o Displays  title  on  first  line  (title  bar)  when  page  open  in  browser  window  (CHANGE  FOR  EACH  PAGE)   o Important:  when  printed,  identity     -­‐ Entering  Text   o Automatic  line  wrapping   o width  of  paragraph  depends  on  width  of  web  browser  window  (unless  in  table  or      style  sheets o paragraph  break  –  leaves  plank  line  between  lines  (  HTML  tag)  –  Press     o Line  Break  –  no  space  between  lines  (  HTML  tag)  –  press     -­‐ Formatting  Text   o Control:    Headers  –  H1,  H2,  H3,  H4,  H5,  H6  (predefined  approximate  sizes  and  bolds  text)    Text  color    Text  Size  –  use  pixel  system  (pts  larger)    Font  type    Special  effects  –  bold,  italics,  underline  etc  –  DO  NOT  USE  UNDERLINE     o Indenting  paragraphs   -­‐ Page  properties:  (set  defaults)     o Set  background  color,  background  images   -­‐ Graphics  –  enhances  appearance  of  a  web  page   o Images  from  scanner,  digital  camera,  clipart,  internet   o Formats  –  gif  (clipart),  jpg  (photo),  png   o Lower  download  times  –  use  smaller  sized  graphics,  resize  larger  image  in  graphics  package  not  DW   o Optimize:  color  resolution,  compression  will  affect  quality  and  size   -­‐ Download  time  of  page :  Benchmark:  56k  modem  speed,  max  of  30-­‐35  seconds     o See  status  bar  –  total  size  appears  in  kb  (edit>preferences>status  bar)   -­‐ Image  attributes  –  using  property  inspector:  size,  space  around  image,  border,  alternative  text,  alignment,   sharpen,  contrast,  crop     o Alternative  Text:  caption  in  browser,  displays  text  associated  with  the  image    May  display  while  graphic  loading,  or  if  using  a  text  only  browser    To  meet  “barrier  free  access”    For  Firefox:  insert      title=”xxxxx”  before  alt=”xxxxx”   -­‐ Links     o To  another  web  page  within  your  site  in  your  folder   –  point  to  the  file   o To  another  website  on  the  internet  (start  with  http://)    Use  target  field  to  open  in  new  window   –  set  to  “_blank”   CS  1033B  –  Final  Exam  Notes     Page  16    Type  URL  address  directly   o To  an  e-­‐mail  address    Select  text  for  hyperlink,  insert  e -­‐mail  link    mailto:[email protected]   o Creating  an  image  hyperlink    Select  image,  in  property  inspector  click  on  folder,  select  path  directory   o Create  multi-­‐links  within  an  image  –  image  map  (HOTSPOTS)    Select  image,  type  descriptive  name  in  map  field,  click  on  drawing  tool,  draw  an  area  on   image,  click  folder  and  indicate  file  associated  with  hotspot     o To  jump  to  a  specific  spot  (other  than  beginning  of  the  webpage)  within  a  web  page  (setting   bookmarks,  anchors,  targets    Create  the  anchor    Create  the  link  to  the  anchor    ANCHORS:  predefined  anchor  (#top),  returns  you  to  top  of  page     • In  IE:  no  need  to  define  “top”,  but  do  in  FF  –  so  ALWAYS  DEFINE      To  get  rid  of  blue  link  lines   –  click  on  image  and  change  brdr  to  0   o You  can  link  to  files  of  type:  Other  than  html  files,  Proprietary  software  (word,  excel   –  audience   needs  software  on  their  system),  Images  (.gif,  .jpg....),  Acrobat  reader  files  (.pdf)   -­‐ Tables  –  control  web  page  layout  and  customize  effects     o Table  width:  expressed  as  %  -­‐  covers  a  percentage  of  the  screen,  fixed   –  width  fixed  on  screen      Assignments  –  FIXED  780  pixels  for  width   o Inserting  a  table  –  click  where  you  want  table  to  appear,  select  insert>table...   o Selecting  table  –  place  mouse  over  table’s  cell  grids  until  see  red  outline,  single-­‐click   o Merging  cells:  highlight  cells  you  want  to  merge,  click  merge  in  property  inspector   o Splitting  cells:  highlight  cells  you  want  to  split,  select  split  icon,  enter  information   o Table  properties:  can  control  –  Layout,  width  (pixels/percent),  cell  padding  (space  around  contents   of  each  cell),  cell  spacing  (space  between  each  cell  in  table),  borders  (0  =  invisible)   o Cell  properties:  applied  to  one  cell  or  group  of  cells:  horizontal  alignment,  vertical  alignment,   width/height,  cell  border  (colour),  background  color     -­‐ Web  publishing   –  upload/”ftping”  completed  pages  to  server  with  Secure  Shell  Client  or  from  within  DW   o Use  FTP  software   o File  Transfer  protocol:  an  internet  standard  that  allows  you  to  upload  and  download  files  with   other  computers  on  the  internet      NOT  ALL  FTP  SOFTWARE  can  connect  to
More Less

Related notes for Computer Science 1033A/B

Log In


Don't have an account?

Join OneClass

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

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.