; ppt - Department of Computer Science
Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

ppt - Department of Computer Science

VIEWS: 13 PAGES: 76

  • pg 1
									   Computer Science CS1033
Multimedia and Communication

        Lecture 2
Vivi Tryphonopoulos (Section 001)
Announcements

1.   Labs start NEXT week – week of May 16
     YOU MUST ATTEND THE LAB YOU ARE REGISTERED FOR
     Check Webct to see what you are assigned to.

2.   (GAUL) account and password
     FORGOT OR DIDN’T GET IT
     Check under course website: FAQs
     www.csd.uwo.ca/courses/CS1033/faqs.html
     http://www.csd.uwo.ca/staff/bruce/mail_pwd.html
Announcements
   Student pricing of Adobe Creative Suite CS5
     Campus Computer Store
      $430 - Web Premium: Dreamweaver, Photoshop, Flash etc)
      $290 – Web Std: Dreamweaver, Flash – DON’T GET IT!
      $150 – Dreamweaver
      $255 – Photoshop

   LAB and SOFTWARE AVAILABILITY:
    1.   Adobe Free trial downloads:
         http://www.adobe.com/downloads/

    2.   General Labs on campus http://www.uwo.ca/its/genlabs
          Middlesex College Rooms 230 and 235 (all software)
          PhotoShop (NCB105, UC2)
          DreamWeaver (NCB105, UC2)
Assignment 1 - Worth 5%
   Due Friday, May 27, 2011 by 8:00pm

   Posted on course website
   Will review the assignment next week


   WebCT will be used to submit assignments
    and you will receive your mark and completed
    marking sheet http://webct.uwo.ca
Today’s Objectives
   Multimedia Overview
    –   Define multimedia
    –   Types of media found in multimedia
    –   Uses of multimedia
    –   History of multimedia

   Text Overview
    –   Text Attributes
    –   Basic design principles
    –   Poster analysis
Exercise
Question: Making an impression?




      In her book The Four-Minute
       Sell, Janet Elsea says you
      have just 7 to 15 seconds to
      make a good first impression.
      You have about four minutes
      total for someone to decide if
      he or she wants to go beyond
      that first four minutes (therein
         lies the four-minute sell).
Now consider, after you first arrive at
a website…….
How long does it takes you to decide if you want to
stay or if you want to leave this site?




        http://vandelaydesign.com/blog/design-process/why-visitors-leave/
  Multimedia                     Communications




     Make an Impression on the Internet!


How do we use multimedia to effectively communicate?
So what’s this course all about?

  MULTIMEDIA                                COMMUNICATIONS
   Exploring                              Effectively communicate
   multimedia                                    a Message
  components
                                                      Clear
  (text, images,
                                                     Exact
animation, sound,
      video)                                     Professional
                                            Make an impression

       •   use Software Applications to deliver on the internet
               •    Proper tools, guidelines, concepts
What is Multimedia?
   Five senses are mechanisms to
    communicate with others and our environment


                            Most
                          important?




                                        http://www.gizmag.com/sense-taste-
                                        smell-touch-printer/13689/
What is Multimedia?
Definition:                    Technical Definition:
Multimedia is everything       Describes any application
you can hear or see.           or technology that uses
                               any combination of:
Different media: Texts,
books, pictures, music,
sounds, CDs, videos, DVDs,        • Text
MP3 players, iPods,               • Images
Records, Films, and more          • Sound
                                  • Animation
                                  • Video

  Cambridge Dictionary 
  “Using a combination of moving and still pictures, sound,
  music and words, especially in computers or entertainment”
What is Multimedia?


• Text
                      Combined into an
• Images
                        application to
                         Deliver What?
• Sound
                  Inform, Educate, Entertain
• Animation
• Video




   Software
  Applications
Multimedia Uses

   To Inform:
    –   http://www.cbc.ca/radio/
    –   Compton’s Interactive World Atlas
   To Educate:
    –   How to fix a flat tire
    –   How to fix a flat tire
   To Sell and Run Businesses:
    –   http://www.chapters.ca
    –   http://www.monster.ca
    –   http://www.eharmony.ca
   To Entertain:
    –   watch clip
How do we communicate?
     Other people
     Telephone -- text messaging ($$$$)
     Radio
     TV

       World Wide Web on the Internet -- WHY??


   The World Wide Web:
     ________________________
     ________________________
     ________________________
        The World Wide Web is
         the Voice of Power!

1. Population:
Which area do you think has the most people?
Africa, Asia, Europe, Latin American/Caribbean,
Middle East, North America, and Oceania/Australia

2. Internet Users:
  Which area do you think has the most internet users?

3. Least Internet Use:
Which area is the smallest, has the least users?
http://www.internetworldstats.com/stats.htm
              2010
       2007




2007
Let’s Test Your Multimedia History
Knowledge! Take out a pen and some paper:

1.   Where were the earliest drawings/paintings by humans
     discovered?
     A. Egypt
     B. France
     C. Chili
     D. Iran

2.   In what decade was the first permanent photograph
     ever taken?
     A. Between 1780 and 1790
     B. Between 1820 and 1830
     C. Between 1880 and 1890
     D. Between 1890 and 1900

3.   When was the first motion picture ever recorded?
     A. Between 1880 and 1890
     B. Between 1890 and 1990
     C. Between 1900 and 1910
Quiz continued…

 4.   What was the first full length movie with synchronized
      dialogue (i.e. the first talkie)?
      A. The Jazz Singer
      B. Gone With The Wind
      C. The Gold Rush
      D. Casablanca

 5.   What was one of the first full length movie to use colour?
      A. It Happened One Night
      B. Metropolis
      C. The Gold Rush
      D. The Wizard Of Oz

 6.   What was the name of the predecessor to the Internet?
      A. Arpanet
      B. Oprahnet
      C. Gammanet
      D. Fishnet
Quiz continued…


7.   Who invented the World Wide Web?
     A. Bill Gates
     B. Tim Berners-Lee
     C. Al Gore
     D. Alan Emtage

8.   What was the very first graphical browser for the World
     Wide Web?
     A. Netscape
     B. Mosaic
     C. Internet Explorer
     D. FireFox

9.   What was the first band to give a concert over the Internet?
     A. Rolling Stones
     B. Areosmith
     C. Grateful Dead
     D. U2
Quiz continued…

  10.   What was the first full length feature film that was
        completely computer generated?
        A. Bugs Life
        B. The Little Mermaid
        C. Toy Story
        D. Shrek

  11.   What application revolutionized/irritated the music
        industry in 1999?
        A. ITunes
        B. Napster
        C. Limewire

  12.   When did digital cameras become fairly accessible
        and affordable to the public?
        A. 1980
        B. 1991
        C. 1996
        D. 2001
History Lesson


  15,000 - 13,000 BC  Prehistoric humans paint images
                          on the walls of their caves Grotte
                          de Lascaux, France

                1914  Silent movies incorporated multiple
                          media by using film and text captions
                          together

                1928  Walt Disney debuts the second
                       short starring a debuts
                       Steamboat Willie,
                          Mickey, and the first cartoon to
                          use synchronized sound.
        1928 – 1931  Movies with sound replace silent
                          movies
History

          1930s  Technicolor is introduced in film and most
                         movies are filmed in colour after 1940.

                         Bell Laboratories had a breakthrough in creating
           1937  dual sound tracks on film. Fantasia was the first
                         commercial movie with a complete surround
                         soundtrack in 1940


                  NETWORK TECHNOLOGY INTRODUCED
           1969  ….Arpanet is created
                  ….Advance Research Projects Agency Network
                  …. (discussion 1962)
                  …..First packet switching network and the
                     predecessor to the Internet.


  http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET
Creation of Arpanet 1969

             IMPORTANCE:

   1969



                                               1970 – East coast


                                       4 locations (1969)
Began talks in 1962                    •UCLA
Objective: Build a network             •Stanford
technology to allow researchers at     •UC Santa Barbara
various locations across the country   •University of Utah
to ___________________
1969: Network technology introduced: ARPANET
1971: First email sent
1977  Apple starts to build to dominate personal
             computer market.

1981  IBM PC announced/introduced and captures
              market share in 18 months.

1991  World Wide Web debuts thanks to Tim Berners-
              Lee.   (accessing information over the internet)

1992  MS Windows 3.1 is released

1992         HTML debuts


1993  The first graphical browser is born (allows us to see
              web pages containing IMAGES), it is called Mosiac,
              by Marc Andreessen, Erin Brina &Tim Clark
http://www.let.leidenuniv.nl/history/ivh/chap2.htm#The%20Creation%20of%20ARPANET
1994  The Rolling Stones become the first major band to
           broadcast a live performance over the Internet.

1995  Disney releases Toy Story, the first feature length
           computer generated movie (77 minutes long, 4 years to
           make, 800,000 machine hours to render).

1996  Affordable digital cameras widely available.
1998  Google Search Engine operates by Larry Page & Sergey
           Brin

1999  Napster debuts, allowing users to download and share
           MP3s.

           Integration of computer, memory storage, digital data
2000s     camcorders, MP3 players, IPods, speakers, telephones,
           HD TV and other technologies explodes!
           •2001  Apple introduces iTunes and the iPod
           •2005  youTube.com launches
           •2007  Search engine giant Google surpasses Microsoft
           as "the most valuable global brand," and also is the most
           visited Web site
FACES of the Internet Legacy




                     /http://news.com.com/2009-1032-995680.html
With the Future…. comes


 Legal issues
 • Copyright, rights management, piracy, intellectual property
 • Problematic because of the rapid change in technology


 Better skills:
 • Need to be multi-skilled: Business, Communication, IT and design
 • Articulate, think and write clearly - for report, documentation
 • Web design skills an essential - Power of the Internet

 Is it necessary to have the web design skills set?
Delivery of Multimedia Applications
   Which delivery option should you use for
    your Multimedia Application?
                                        World Wide Web
        Game vs
     Documentation                      CD-ROMs/DVD


    Criteria         CD/DVD                         World Wide Web
    Access Time         View in a instantly by        24x7 online accessibility
                         inserting into drive


    Ability to        Cannot    change content        Easy to update material
    change content                                     New updates can be
                         Must recreate and              instantly accessed off the
                         redistribute to audience       web
When creating your Multimedia
Application, what will you need?

Keep in mind that creating an
application has different needs
than viewing an application!


    User Systems: Systems used to play back
     multimedia applications (browser, speakers,
     plugin players when needed)

    Development Systems: Systems used
     by multimedia developers to create
     applications
Required Equipment

    Question: What pieces of hardware do
     you think a multimedia developer would
     need to have either contained in his/her
     computer or attached to it?

     •   Sound Card                 Software to develop
     •   Video Card                 the applications:
     •   Microphone                    •Image creation
     •   Headphones/Speakers           •Website creation
     •   Camera, Camcorder             •Video
                                       •Animation
     •   Fast Processor
     •   Lots of storage capacity
     •   DVD burner/player
Introduction to Text:


Text can be used to
serve two purposes:


1.
2.
Be careful:
 You may have a
   cool font on
   your machine
   when viewing a
   webpage, but
   the person
   viewing your
   website might
   not have that
   font! Here are
   some “Browser
   Safe Fonts”
Question:
What can you do if you
really want to use an
unusual font on your
website?

Answer:

Create a .jpg or .gif file of
the text in Photoshop and
insert that into your
webpage

Ie. Banner text “ The
 University of Western
 Ontario” uses Bemboo
 font

Paragraphs uses Verdana
font...Common font
Text can set a mood
    What type of restaurants are these?
Make your style of text choices based on:

   Your audience:                       Type of application:
        Children (what age group?)
                                          ◦   Educational?
        Teens
                                          ◦   Entertainment?
        Young Adults
        Older People                     ◦   Business?
Text:
   Change the look of your webpage by
    changing:
    –    Text Attributes
    –    Design/Layout/Placement of the text


         Text Attributes            Design/Layout/Placement
                                Here is some text with different:
             is some text       •   Placement

        with different          •   Layout
        attributes              •   Design
                                                         The End
Text Examples From
Advertising



          Take a few second to look
                  at this ad

                 A test of your
                    memory
How is text used?   ________________________
                   http://www.chillonline.ca/chillmag.html

…..Final Example
Text Attributes:
 Text doesn't have to be boring!
 • Emphasis can be added by varying the text           attributes
    •   Font type - Arial, Times New Roman, Comic Sans
    •   Style - Regular, bold, italics
    •   Kerning – space between adjacent cha r a cters
    •   Tracking - Adjusting the distance between all the letters
    •   Leading - vertical space between

                       lines of
                       text.

    • Size - pts vs. pixels ( 8 pt,      , 10 pt, 10 px, 36pt.)
                                      8 px

    • Color - (red, blue, black… )
    • Special effects - underline, shadow, superscript,subscript,
Font Types




Serif                              Sans-Serif
Tails                              No  tails
Script                             Block-oriented
Body    paragraphs                 Headings, titles

    Times    Roman                     Arial, Verdana

    Courier     New                     Helvetica,

    Century    Schoolbook              Arial Black

    Palatino                           Comic Sans MS


           See Western Site: www.uwo.ca Use Verdana, Arial
Fun Fonts:




 Examples from: “The Non-Designer’s Design Book by Robin Williams


 Try out this website  http://www.fontscape.com/explore?7AR
Font Types:                                       Text Attributes




              Examples from: “The Non-Designer’s Design Book by Robin Williams
Font Styles:
Variations in the appearance that lets you emphasize
parts of the text.
   - Bold, Italics, Superscript, Subscript etc.

   Some examples:
                                          IMPORTANT:
      Bold Times New Roman                Never underline
      Times New Roman                     in a website
      Underline Times New Roman           unless it is a
      Bold Comic                          link
      Italics Comic
      Underline Comic
Kerning
 –   Adjusting the distance _________
     of letters
 –   In standard spacing distance between
     uppercase A and W seems farther than
     say H and N
       AV vs. HN
       We can use kerning to fix this




Tracking
 –   Adjusting the distance
     ______________the letters
 –   Measured in ems
Tracking/Kerning Example
Even More Examples




Examples from: “The Non-Designer’s Design Book by Robin Williams
Text Leading                     (pronounced Ledding)

   the amount of ______________________of text
   Measured in either positive or negative points or zero


Greatness is not found in           Greatness is not found in
possession, power, position or
prestige. It is discovered in
goodness, humility, service         possession, power, position or
and character.
                                    prestige. It is discovered in

                                    goodness, humility, service

                                    and character.
Leading Examples
           Okay, that might be a bit subjective
           but lots of Western students,
           including computer science
           students say that one of the factors
           that made them decide to come to
           Western to study was seeing the
           campus.


       How easy is it to read the text
              if we modified
          tracking and leading?


        Remember :
        Tracking (space between chars)
        Leading (space between lines)
Leading Examples
                                              Okay, that might be a bit subjective
                                              but lots of Western students,
                                              including computer science
“Loose Track” More Leading                    students say that one of the factors
More space between all chars with more        that made them decide to come to
                                              Western to study was seeing the
leading                                       campus.
Ok ay,   that   might      be    a   bit
                                            “Loose Track” Less Leading
subjective      but      lots   of          More space between all chars with
                                            less leading
Western       students,         including      O k a y, t h a t m i g h t b e
                                               a bit subjective but
computer       science      students           lots of Western
                                               students, including
say    that   one   of    the    factors       computer science
                                               students say that
that   made     them      decide      to       one of the factors
                                               that made them
come     to   Western      to    study
                                               decide to come to
                                               Western to study
was    seeing    the     campus.
                                               was seeing the
                                               campus.

  RULE: To Read Easier:
  Distance between lines needs to be greater than distance between words
                                           Okay, that might be a bit subjective

Leading Examples
                                           but lots of Western students,
                                           including computer science
                                           students say that one of the factors
                                           that made them decide to come to
                                           Western to study was seeing the
“Tight Track” More Leading                 campus.
Less space between all chars with
more leading

Okay, that might be a bit subjective but

lots of Western students, including

computer science students say that one

of the factors that made them decide to

come to Western to study was seeing the

campus.
Text Size
PIXEL (px)                       POINT (pt)
• Pixels are a measurement for • A linear unit measuring
  text and images for the        size of text in a
  ________________               _________________

• Pixel is the smallest discrete • Points are a print unit of
  component of an image or         measure (Word processing)
  picture on a monitor
                                 • 72 pt = 1 inch
                                 • 1 pt = 1/72 inch
Text Size & Printing
                  Guidelines:
                  Points – when printing
                   FACT: A point size of 72, will
                   always give you a font that
                   is one inch high when
                   printed.
                   If you sent this MS Word
                   Document to a printer and
                   measured between the
                   lines, it would be one inch.
                   For print it doesn’t matter if
                   you print from a Windows
                   machine or a Mac, a 72
                   point font size on paper is
                   always one inch high.
Text Size & Web Pages
Text Size & Web Pages
Pixels – when viewing a webpage on a monitor
Comparison table of points and pixels


                                        11 px ≠ 11pt
                                         (see next slide)



                                   Will revisit slide when we
                                        get to Dreamweaver
                                                section
Text Size & Web Pages
Difference on a Web Page – viewing on monitor
Text Color

In Word – use text strings “red, blue, green… etc”
Text Color
In Graphics pkgs and Web pages:
 COLOUR
  Hexadecimal code
  six digits
  made up of decimals (0–9)
   and letters (A-F)

 • Red Color is #FF0000
 • Represents   RRGGBB

 What is Purple Western Colour?


                      Answer
                     #660099
Text Guidelines
Readability
• Is the text easy to read?
• Avoid dark text against dark
  background
Visual Appeal
• Complementary: Does the text
  complement the graphics?

• Color Coordination: Choose text that
  co-ordinates with any graphics

• Balance: Position text carefully to
  achieve a good balance

• Text Layout – simple, clear, white
  space

• Mood: Set the mood using appropriate
  font attributes and layout
                                                                     Good Design Is As Easy
                                                                           as 1-2-3
       Poster & Web                                                          1. Learn the principles.
       Designs                                                         They’re simpler than you might think
                                                                   2. Recognize when you’re not using them.
                                                                      Put it into words – name the problem.
                                                                             3. Apply the principles.
       Before we begin                                                            You’ll be amazed.
       building websites,
       let’s get some
       design basics
                                                                   Good Design
                                                                         easy as . .
                                                                   is as What do. you think
                                                                          of this message?
                                                                       Learn the principles
                                                                       They’re simpler than you might think

                                                                       Recognize when you’re not using them.
                                                                       Put it into words – name the problem.

                                                                       Apply the principles.
                                                                       You’ll be amazed.
Examples from: “The Non-Designer’s Design Book by Robin Williams
Poster & Web Designs Guidelines:
                  For emphasis, make 2 elements either
 CONTRAST         ________ or ______________
                  Make them the same or different by altering font
                  color, font size, effect…

REPETITION        Repeat some aspect of the design
                  throughout the entire design
                  i.e. ____________________


          Items are aligned - creates stronger
ALIGNMENT _________________

 PROXIMITY        Group __________ items together
   Design Considerations:
   CONTRAST
      Cool Quotes                                         Cool Quotes
      •See everything, overlook
      a great deal, improve a                             See everything, overlook a
      little.                                              great deal, improve a little.
      •Between two evil,
      choose neither; between                              Between two evil, choose
      two good, choose both.                               neither; between two good,
                                                           choose both.
      •Give with no strings
      attached, and you will
      receive in the same                                  Give with no strings
      manner                                               attached, and you will
                                                           receive in the same manner

http://www.csd.uwo.ca/courses/CS1033/lectures/lecture2/lecture2_Design Considerations.pdf
Design Considerations:
CONTRAST




  Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations:
REPETITION
  Brad Pitt                                Repetition of
  Movies                                    –   Bullet type
         Thelma and Louise                 –   Spacing
         Legends of the Fall
         Oceans Eleven
                                            –   Light text
                                            –   Heavy text
  Relationships                             –   Alignment
         Gwyneth Paltrow                   –   Indentation
         Jennifer Aniston
         Angelina Jolie


  Childhood
         Birthday: December 18, 1963
         Born: Shawnee, Oklahoma

  References available upon request
Design Considerations:
REPETITION
    What repetition can you see in this Microsoft
     web page?
Design Considerations:
PROXIMITY
    Physically grouping things

    together implies a relationship   The Menu
                                      SALADS:
The Menu                                 Caesar Salad
                                         Spinach and Bacon Salad

     Spinach and Bacon Salad          ENTREES:
     Pecan Crusted Trout                 Pecan Crusted Trout
     Steak and Kidney Pie                Steak and Kidney Pie
     Apple Crisp                         Roast Chicken
     Cheese Fondue                       Cheese Fondue
     Macaroni and Cheese                 Macaroni and Cheese
     Strawberry Cheesecake
     Lemon Mousse                     DESSERTS:
     Caesar Salad                        Strawberry Cheesecake
     Roast Chicken                       Lemon Mousse
                                          Apple Crisp
Design Considerations:
PROXIMITY




  Examples from: “The Non-Designer’s Design Book by Robin Williams
Design Considerations:
ALIGNMENT

        Fun Things for a                       Fun Things for a
         Professor to do the                   Professor to do the First
        First Day of Classes:                  Day of Classes:
                                                Ask students to call you "Tinkerbelle" or
   Ask students to call you "Tinkerbelle" or
                                               "Surfin' Bird".
                  "Surfin' Bird".
                                               Growl constantly and address students as
  Growl constantly and address students as
                                               "matey".
                     "matey".
                                               Show a video on medieval torture
      Show a video on medieval torture
                                               implements to your calculus class. Giggle
        implements to your calculus class.
                                               throughout it.
              Giggle throughout it.

              by Alan Meiss                                              by Alan Meiss
Design Considerations:
ALIGNMENT




  Examples from: “The Non-Designer’s Design Book by Robin Williams
Consider the following poster
that was a semi finalist from the
Fall 2007 Poster Contest

   It already used great
    colour choices and had
    some wonderful
    creativity but can you
    think of some things,
    based on:
    –   Repetition
    –   Proximity
    –   Contrast
    –   Alignment
that might have made this
   poster a little bit better?

   Can you see examples
    of the four principles
    that worked well in this
    poster?
Can you see:

  –   Repetition
  –   Proximity
  –   Contrast
  –   Alignment
               Review Questions

   Name the 4 things to watch for when doing any
    design.

   Name 5 components that make up multimedia?

   What measurement would you use for text in creating
    a Word document?

   Name 3 relevant events in the history of multimedia.

   What type of font is this: Hello World
              Next Week

   Lecture #3: Introduction to graphics

   Labs
    –   Lab 1  Using secure shell
    –   Lab 2  Using Photoshop

   START THINKING ABOUT YOUR
    ASSIGNMENT 1! - IT WILL BE POSTED

								
To top
;