November 1, 2001ICTCM Workshop1 Multi-Media on Your Website No longer just a silent movie Professor...

November 1, 2001 ICTCM Workshop 1

Multi-Media on Your WebsiteNo longer just a silent movie

Professor Michael S. PilantProfessor Michael S. Pilant

Department of MathematicsDepartment of Mathematics

Texas A&M UniversityTexas A&M University


Multi-Media on Your WebsitePart I

What isWhat is multimediamultimedia?? Do I need it? Do I need it? What can I do with it?What can I do with it? What are the costs?What are the costs? What are the benefits?What are the benefits? How do I get started?How do I get started?



What is multimedia?What is multimedia?““I’ll know it when I see it …”I’ll know it when I see it …”

PrePre-World Wide Web-World Wide Web Movies, slide-showsMovies, slide-shows Audio-visual presentations, laser disksAudio-visual presentations, laser disks IBM PC (introduced in 1981)IBM PC (introduced in 1981) Apple Macintosh (introduced in 1984)Apple Macintosh (introduced in 1984)



What is multimedia?What is multimedia?

PostPost-World Wide Web (1989)-World Wide Web (1989) Apple QuickTime (1991)Apple QuickTime (1991) Windows AVI and Windows AVI and

Video for Windows (1992)Video for Windows (1992) Windows 3.1 (1992)Windows 3.1 (1992)


Multi-Media on Your WebsitePart II

What is multimedia?What is multimedia? Creating MultimediaCreating Multimedia

We will focus on applications with:We will focus on applications with: Mathematical ContentMathematical Content Student AudienceStudent Audience Integration with coursewareIntegration with courseware ExamplesExamples


Multi-Media on Your Website

What is multimedia?What is multimedia?Common componentsCommon components

Mixed-mediaMixed-media NonlinearNonlinear ModularModular InteractiveInteractive Computer-basedComputer-based Just-in-timeJust-in-time



What is multimedia?What is multimedia?Example – Microsoft PowerPointExample – Microsoft PowerPoint



What is multimedia?What is multimedia? BackgroundBackground

Evolution of Personal computersEvolution of Personal computers Graphics standardsGraphics standards Graphical user interfacesGraphical user interfaces Hypermedia Hypermedia InternetInternet World Wide WebWorld Wide Web



What is multimedia?What is multimedia?BackgroundBackground – Personal Computers – Personal Computers

In 1981, IBM introduces the PC In 1981, IBM introduces the PC (personal computer)(personal computer)

In 1984, Apple launches the Macintosh - In 1984, Apple launches the Macintosh - integrates a GUI and a mouseintegrates a GUI and a mouse



What is multimedia?What is multimedia?BackgroundBackground – Graphics Standards – Graphics Standards

GIF87 (GIF87 (GGraphics raphics IInterchange nterchange FFormat) – ormat) – June, 1987. [CompuServe]. June, 1987. [CompuServe].

The purpose was to allow interchange of The purpose was to allow interchange of high resolution graphics on the internet high resolution graphics on the internet using loss-less compressionusing loss-less compression




GIF89a extension [CompuServe]. GIF89a extension [CompuServe].

Extended the 1987 GIF standards to Extended the 1987 GIF standards to allow, for example, animation. allow, for example, animation.




JPEG – August, 1990. [Joint JPEG – August, 1990. [Joint Photographic Experts Group]. Photographic Experts Group].

ISO (International Standards ISO (International Standards Organization) lossy compression Organization) lossy compression algorithm. algorithm.




PNG – October, 1996. [Portable PNG – October, 1996. [Portable Network Graphics]. Network Graphics].

W3C Standard. Lossless compression W3C Standard. Lossless compression algorithm supporting true color (24 bit), algorithm supporting true color (24 bit), transparency.transparency.




QuickTime – 1991. [Apple]. QuickTime – 1991. [Apple].

Extended QuickDraw API to include Extended QuickDraw API to include timing information (hence QuickTime)timing information (hence QuickTime)




AVI (Audio Video Interleave) and VFW AVI (Audio Video Interleave) and VFW (Video for Windows) – 1992. (Video for Windows) – 1992. [Microsoft]. [Microsoft].

Developed for general purpose video Developed for general purpose video capture in Windows 3.1 capture in Windows 3.1



What is multimedia?What is multimedia?BackgroundBackground – Graphical User Interfaces (GUIs) – Graphical User Interfaces (GUIs)

November 20, 1985 – Windows 1.0 shipsNovember 20, 1985 – Windows 1.0 ships

April 6, 1992 – Windows 3.1 shipsApril 6, 1992 – Windows 3.1 ships

May 24, 1993 – Windows NT 3.1 launchedMay 24, 1993 – Windows NT 3.1 launched

August 24, 1995 – Windows 95 launchedAugust 24, 1995 – Windows 95 launched

July 31, 1996 – Windows NT 4.0 launchedJuly 31, 1996 – Windows NT 4.0 launched

June 25, 1998 – Windows 98 launchedJune 25, 1998 – Windows 98 launched



What is multimedia?What is multimedia?BackgroundBackground – Hypermedia and the Internet – Hypermedia and the Internet

In 1945, Vannevar Bush proposes In 1945, Vannevar Bush proposes Memex, Memex, a microfiche based repository of a microfiche based repository of linked documents.linked documents.In 1965, Ted Nelson proposes In 1965, Ted Nelson proposes XanaduXanadu, , an electronic repository of world an electronic repository of world literature.literature.In 1983, the In 1983, the InternetInternet is created. is created.



What is multimedia?What is multimedia?BackgroundBackground – World Wide Web – World Wide Web

In 1989, Tim Berners‑Lee, a researcher In 1989, Tim Berners‑Lee, a researcher at the CERN high energy physics facility at the CERN high energy physics facility in Geneva Switzerland, proposed the in Geneva Switzerland, proposed the development of a tool to enable development of a tool to enable collaboration between physicists and collaboration between physicists and other researchers in the high energy other researchers in the high energy physics community. physics community.



What is multimedia?What is multimedia?Background Background – World Wide Web– World Wide Web

Berners-Lee drafted a proposal called Berners-Lee drafted a proposal called AAHypertext and CERNHypertext and CERN@@ and sent out a and sent out a request for comments. His proposal request for comments. His proposal included the first formulations of the included the first formulations of the HTML, the http protocol, and the HTML, the http protocol, and the concept of client software (web browser).concept of client software (web browser).

The world wide web (WWW) is born…The world wide web (WWW) is born…




Mosaic 1.0 - released Nov. 1993. Mosaic 1.0 - released Nov. 1993.

Netscape 1.0 - December 1994. Netscape 1.0 - December 1994.

Internet Explorer 1.0 - August 1995. Internet Explorer 1.0 - August 1995.

Opera 1.0 - December 1996.Opera 1.0 - December 1996.




Netscape 2.0 –support for Java, Netscape 2.0 –support for Java, JavaScript and plug-insJavaScript and plug-ins

Netscape 4.0, IExplorer 4.0 – support for Netscape 4.0, IExplorer 4.0 – support for dynamic HTML (DHTML)dynamic HTML (DHTML)

IExplorer 5.0 – support for XMLIExplorer 5.0 – support for XML



What is multimedia?What is multimedia? Do I need itDo I need it? ? What can I do with it?What can I do with it? What are the costs?What are the costs? What are the benefits?What are the benefits? How do I get started?How do I get started?



Do I need it?Do I need it?How is your valuable class time utilized?How is your valuable class time utilized? Introduce new concepts In-depth explanations and examples One-on-one student interaction Group discussion Overview



Do I need it?Do I need it?What would you like to be done What would you like to be done outside of class?outside of class?

Repetitive tasksReinforcement of

basic conceptsPractice tests

Homework Pre- and post- testsEqualizing skill levelProjects

Web-enhanced instruction and multimedia…



What is multimedia?What is multimedia? Do I need it? Do I need it? What can I do with itWhat can I do with it?? What are the costs?What are the costs? What are the benefits?What are the benefits? How do I get started?How do I get started?



What can I do with it?What can I do with it?As an instructor:As an instructor: Engage students’ attentionEngage students’ attention Re-use resourcesRe-use resources Visualize abstract conceptsVisualize abstract concepts Capture lectures Capture lectures Add interactivity to web-based materialsAdd interactivity to web-based materials



What can I do with it?What can I do with it?As an As an mathematics mathematics instructor:instructor: Develop mathematical content [HTML]Develop mathematical content [HTML] Provide drawings, illustrations [GIF, Provide drawings, illustrations [GIF,

Animations, digital whiteboard]Animations, digital whiteboard] Provide descriptions in words [Audio]Provide descriptions in words [Audio] Explain by actions [Video]Explain by actions [Video]



What can I do with it?What can I do with it?As an student:As an student: Watch a concept being presented, step Watch a concept being presented, step

by step, as many times as you wishby step, as many times as you wish Interact with related materials Interact with related materials

(synchronized multimedia)(synchronized multimedia)



What is multimedia?What is multimedia? Do I need it? Do I need it? What can I do with it?What can I do with it? What are the costsWhat are the costs?? What are the benefits?What are the benefits? How do I get started?How do I get started?



What are the costs?What are the costs? Development of contentDevelopment of content Converting existing contentConverting existing content TrainingTraining Annotating, indexingAnnotating, indexing DeliveryDelivery Commercial softwareCommercial software



What is multimedia?What is multimedia? Do I need it? Do I need it? What can I do with it?What can I do with it? What are the costs?What are the costs? What are the benefitsWhat are the benefits?? How do I get started?How do I get started?



What are the benefits?What are the benefits? Re-usability of contentRe-usability of content Maintaining quality as class size increasesMaintaining quality as class size increases Just-in-time instructionJust-in-time instruction Instruction-at-a-distanceInstruction-at-a-distance ScalabilityScalability



What is multimedia?What is multimedia? Do I need it? Do I need it? What can I do with it?What can I do with it? What are the costs?What are the costs? What are the benefits?What are the benefits? How do I get startedHow do I get started??



How do I get started?How do I get started? Choose a platform (PC, Mac, Unix)Choose a platform (PC, Mac, Unix) Create audio/video contentCreate audio/video content Get it onto the computerGet it onto the computer Convert itConvert it Index, annotateIndex, annotate Put it all back together …Put it all back together …



Levels of ComplexityLevels of Complexity

5.5. Audio/VisualAudio/Visual

6.6. Plug-insPlug-ins

7.7. Streaming VideoStreaming Video

8.8. Synchronized Synchronized MultimediaMultimedia

1.1. Static ImagesStatic Images

2.2. AnimationAnimation

3.3. Audio segmentsAudio segments

4.4. MusicMusic



Multimedia InputMultimedia Input ExternalExternal

Digital cameras (IEEE 1394=Digital cameras (IEEE 1394=Fire Wire)Fire Wire)

Analog video (TV, VCR)Analog video (TV, VCR) Analog audio (microphones)Analog audio (microphones)

Generally, you need a video input (e.g. a Generally, you need a video input (e.g. a video capture card) and sound input (e.g. a video capture card) and sound input (e.g. a sound card)sound card)



Multimedia InputMultimedia Input InternalInternal

Screen capturesScreen captures Existing multimedia filesExisting multimedia files



Video InputVideo Input NTSCNTSC PALPAL SECAMSECAM CompositeComposite S-VideoS-Video Digital Video Digital Video



Video Compression/Decompression Video Compression/Decompression (CODECs)(CODECs) Cinepak – developed in 1990 Cinepak – developed in 1990 H.261 and H.263 – based on DCT, used for H.261 and H.263 – based on DCT, used for

videoconferencing (basis for MPEG)videoconferencing (basis for MPEG) Indeo 3.2 – developed in 1980’sIndeo 3.2 – developed in 1980’s Photo-JPEG – for slideshowsPhoto-JPEG – for slideshows



Video CODECsVideo CODECs M-JPEG – Motion JPEG – JPEG M-JPEG – Motion JPEG – JPEG

compression of each individual framecompression of each individual frame MPEG-1 – fixed bit rate (1.15 Mbps)MPEG-1 – fixed bit rate (1.15 Mbps) MPEG-2 – variable bit rate (4-9.8 Mbps)MPEG-2 – variable bit rate (4-9.8 Mbps) MPEG-4,7,21 – MPEG-4,7,21 –



Video CODECsVideo CODECs Real Video 8 – wavelet, variable bit rateReal Video 8 – wavelet, variable bit rate Sorenson Video – basic codec for Sorenson Video – basic codec for

QuickTimeQuickTime Windows Media – based on MPEG-4Windows Media – based on MPEG-4



Audio CODECsAudio CODECs MP3 – MPEG Layer III Audio MP3 – MPEG Layer III Audio Real Audio – basic codec for QuickTimeReal Audio – basic codec for QuickTime Windows Media – based on MPEG-4Windows Media – based on MPEG-4 G.723.1 - videoconferencingG.723.1 - videoconferencing



Streaming Formats (current)Streaming Formats (current) Windows Media 8Windows Media 8

H.263, MPEG-4 (primary), Indeo 3.2 and H.263, MPEG-4 (primary), Indeo 3.2 and Indeo 4.1 Indeo 4.1

QuickTime 4, 5QuickTime 4, 5 Sorenson, Cinepak, Indeo 3.2 and 4.1 Sorenson, Cinepak, Indeo 3.2 and 4.1

Real Media G2, 8Real Media G2, 8



Step by StepStep by Step1.1. Create one or more AVI video files by Create one or more AVI video files by

video capture card, screen capture, or video capture card, screen capture, or other meansother means

2.2. Create one or more sound/music files Create one or more sound/music files by sound card or other meansby sound card or other means

3.3. **Edit the video and sound files to Edit the video and sound files to incorporate any “special effects,” incorporate any “special effects,” captions, titles, etc.captions, titles, etc.



Step by StepStep by Step4.4. Encode audio/video file into Encode audio/video file into

streaming formatstreaming format

5.5. Index streaming media fileIndex streaming media file

6.6. Synchronize mediaSynchronize media



Bandwidth MatrixBandwidth Matrix

Cellular [9.6 – 19.2 Kbps] Slideshows, FlashCellular [9.6 – 19.2 Kbps] Slideshows, Flash

Modem [28.8 – 56 Kbps] Low band streamingModem [28.8 – 56 Kbps] Low band streaming

ISDN [64 – 128 Kbps] VideoconferencingISDN [64 – 128 Kbps] Videoconferencing

DSL/Cable [128 K – 2 Mbps] Hi band streamingDSL/Cable [128 K – 2 Mbps] Hi band streaming

T1[1.5 Mbps] Hi band streamingT1[1.5 Mbps] Hi band streaming

Wireless [1 – 11 Mbps] Hi band streamingWireless [1 – 11 Mbps] Hi band streaming

Ethernet [10 – 100 Mbps] Full screen videoEthernet [10 – 100 Mbps] Full screen video



Useful LinksUseful Links

http://www.academicsolutions.com/workshop/

http://www.math.tamu.edu/~dallen/ictcm2001/

http://ictcm.tamu.edu/

http://www.math.tamu.edu/~mpilant/ictcm/

November 1, 2001ICTCM Workshop1 Multi-Media on Your Website No longer just a silent movie Professor...

Documents

Transcript of November 1, 2001ICTCM Workshop1 Multi-Media on Your Website No longer just a silent movie Professor...