Advanced Web Advanced Web Content ChoicesContent Choices

• Community Community Information Information ToolkitToolkit

• Video # 3Video # 3

AgendaAgenda• Advanced Web Content: Beyond Basic Advanced Web Content: Beyond Basic

HTMLHTML• Multimedia ChoicesMultimedia Choices

– Animated GIFs, Digital Audio & Video, Animated GIFs, Digital Audio & Video, Shockwave, Streaming MediaShockwave, Streaming Media

• Interactivity ChoicesInteractivity Choices– Image Maps, CGI, JavaScript, Java, ActiveX, Image Maps, CGI, JavaScript, Java, ActiveX,

VRML, ShockwaveVRML, Shockwave

• ConclusionConclusion

Reviewing File SizesReviewing File Sizes

• 1 K = 1 kilobyte = 1024 bytes1 K = 1 kilobyte = 1024 bytes• 1 M = 1 megabyte = 1024 kilobytes1 M = 1 megabyte = 1024 kilobytes• 1 G = 1 gigabyte = 1024 megabytes1 G = 1 gigabyte = 1024 megabytes• Typical modem handles 28.8 to 56 Typical modem handles 28.8 to 56

kilobits per secondkilobits per second– That’s bits, not bytes!That’s bits, not bytes!– Think before you offer huge filesThink before you offer huge files!!

Live Demo of Animated SitesLive Demo of Animated Sites

• Www.nemonline.org -- show Www.nemonline.org -- show mouseoversmouseovers

• Www.gabocorp.comWww.gabocorp.com

• www.vu.msu.edu/egr124www.vu.msu.edu/egr124

• A page with an imagemapA page with an imagemap

• webreference.com/outlook/licensewebreference.com/outlook/license

Basic HTML: Your Primary Basic HTML: Your Primary Publishing MediumPublishing Medium

• HTML is a rich presentation languageHTML is a rich presentation language

• HTML plus inline graphics offers HTML plus inline graphics offers many ways to control how your many ways to control how your content appearscontent appears

• HTML can be:HTML can be:– Written on any platformWritten on any platform

– ...Using a wide variety of authoring tools...Using a wide variety of authoring tools

– Delivered by any Web serverDelivered by any Web server

Think Before You Leap into Think Before You Leap into Advanced ContentAdvanced Content

• The Internet industry claims your site The Internet industry claims your site must be fancymust be fancy– You must offer more than pointing and You must offer more than pointing and

clickingclicking– You must offer animations, sounds, videoYou must offer animations, sounds, video– You must offer sophisticated user You must offer sophisticated user

interactionsinteractions

• Don’t believe it!Don’t believe it!

Before You Leap into Before You Leap into Multimedia…Multimedia…

• Multimedia is natural for some Multimedia is natural for some content, but:content, but:

• Capturing and editing take time and Capturing and editing take time and skillskill

• Requires more bandwidth to deliverRequires more bandwidth to deliver

• You need more capable serversYou need more capable servers

• Your users need the right pluginsYour users need the right plugins

Before You Leap into Before You Leap into InteractivityInteractivity

• Interactivity is essential for some Interactivity is essential for some applicationsapplications– Entering a new event on an online calendarEntering a new event on an online calendar– Registering for a classRegistering for a class– Ordering a print brochureOrdering a print brochure

• But:But:– It requires programming expertiseIt requires programming expertise– Can require fancier serversCan require fancier servers

Basic Web ServerBasic Web Server

Static HTML PagesStatic HTML Pages

CGI ScriptsCGI Scripts

Animated Animated GIFsGIFs

JavaJavaActive Server Active Server

PagesPages

Image MapsImage Maps

ShockwaveShockwave

Streaming Streaming MediaMedia

Animated GIFsAnimated GIFs

• A simple way to add visual excitementA simple way to add visual excitement• Works in ALL browsers -- no plugin!Works in ALL browsers -- no plugin!• Banner advertisements you see on Banner advertisements you see on

commercial sites are often animated commercial sites are often animated GIFsGIFs

• Really, a simple “movie” Really, a simple “movie” – GIF format allows for multiple separate GIF format allows for multiple separate

framesframes

Building an Animated GIFBuilding an Animated GIF

• Simple tools allow you to:Simple tools allow you to:– Assemble a video frame-by-frameAssemble a video frame-by-frame– Translate from a movie format to animated Translate from a movie format to animated

GIFGIF• Warning: You usually wouldn’t do that!Warning: You usually wouldn’t do that!

– You can simulate motion by moving an You can simulate motion by moving an object with a frameobject with a frame

– Or, you can make a “slide show” Or, you can make a “slide show”

• Example: Ulead’s GIF Animator 2.0Example: Ulead’s GIF Animator 2.0

Sounds on Your Web PageSounds on Your Web Page

• Background soundsBackground sounds

• Play automatically when a page is Play automatically when a page is loadedloaded

• Can slow down page loading Can slow down page loading dramaticallydramatically

• Can be frustrating to your usersCan be frustrating to your users

• Often a sign of an amateur personal Often a sign of an amateur personal pagepage

Audio Recording ChoicesAudio Recording Choices• Compact cassetteCompact cassette

– Conventional cassette formatConventional cassette format– Professional decks for $300 or lessProfessional decks for $300 or less

• Digital Audio TapeDigital Audio Tape– Better than CD qualityBetter than CD quality– Decks for $800 or soDecks for $800 or so

• MinidiscMinidisc– Sony’s format, re-introducedSony’s format, re-introduced– Decks for $400 or soDecks for $400 or so

Oral History and Other Voice Oral History and Other Voice ApplicationsApplications

• Sound via the Internet is especially Sound via the Internet is especially well-suited to voicewell-suited to voice

• Don’t need high qualityDon’t need high quality

• You can “sample” at a lower rateYou can “sample” at a lower rate– Don’t need CD quality for voiceDon’t need CD quality for voice

• Therefore your users can fetch at Therefore your users can fetch at slower speedsslower speeds

Microphone EssentialsMicrophone Essentials• Audio suffers if you don’t “mike” Audio suffers if you don’t “mike”

properlyproperly– Use a good microphoneUse a good microphone

– Put the mike close to the speaker’s mouthPut the mike close to the speaker’s mouth

– Set your levels using a VU meterSet your levels using a VU meter• (Some recorders only have “automatic gain”)(Some recorders only have “automatic gain”)

– TEST! TEST! • Record a sample tapeRecord a sample tape

• Listen over headphones as you recordListen over headphones as you record

Using Digital AudioUsing Digital Audio• You can record onto tape and transfer You can record onto tape and transfer

to your PCto your PC• Most PCs (and all Macs) have sound Most PCs (and all Macs) have sound

capabilitiescapabilities– Accept analog inputsAccept analog inputs– From analog or digital recording devicesFrom analog or digital recording devices– High end cards accept digital dataHigh end cards accept digital data

• Alternative: record directly onto your Alternative: record directly onto your PC -- even a laptop!PC -- even a laptop!

Software for Editing AudioSoftware for Editing Audio

• E.g. Sound Forge XP from Sonic E.g. Sound Forge XP from Sonic Foundry Foundry

• Remove coughs, delete unwanted Remove coughs, delete unwanted material, re-order materialmaterial, re-order material

Audio FormatsAudio Formats

• .wav files are common on the PC.wav files are common on the PC

• AIFF files are common on the MacAIFF files are common on the Mac

• RealAudio is dominant format on the RealAudio is dominant format on the WebWeb– Streaming mediaStreaming media

– File begins playing as it downloadsFile begins playing as it downloads

– Far more efficient than having your user Far more efficient than having your user download a .wav filedownload a .wav file

Streaming MediaStreaming Media• Real Networks has over 90% of market Real Networks has over 90% of market

share with RealAudio and RealVideoshare with RealAudio and RealVideo• Microsoft Netshow is gaining shareMicrosoft Netshow is gaining share• ““Encoder” to translate to .RA format is Encoder” to translate to .RA format is

freefree• Streaming server requiredStreaming server required

– Free for nonprofits, up to 60 streams free for Free for nonprofits, up to 60 streams free for othersothers

• www.real.comwww.real.com

Video on the WebVideo on the Web

• Much more challenging than audioMuch more challenging than audio– Requires lots of space and bandwidthRequires lots of space and bandwidth

– More difficult to editMore difficult to edit

• Often shown in degraded formOften shown in degraded form– Presented as 1/4 screen or lessPresented as 1/4 screen or less

– Only 5 frames per second or soOnly 5 frames per second or so

– Movies and TV have 24 to 30 frames / Movies and TV have 24 to 30 frames / secondsecond

Video FormatsVideo Formats

• QuickTimeQuickTime– Developed by AppleDeveloped by Apple

– Available for Mac and PCAvailable for Mac and PC

• AVIAVI– Microsoft’s Audio/Video Interleaved Microsoft’s Audio/Video Interleaved

formatformat

• MPEG 2MPEG 2– International standardInternational standard

Video on the Web Video on the Web DEMANDS StreamingDEMANDS Streaming

• Even in degraded form, a 30 second Even in degraded form, a 30 second clip might be 2 megabytes in sizeclip might be 2 megabytes in size

• Streaming works reasonably well Streaming works reasonably well even over modemseven over modems

• RealVideo encoder lets you pick a RealVideo encoder lets you pick a modem speed at encoding timemodem speed at encoding time

Capturing Digital VideoCapturing Digital Video• Sources:Sources:

– Analog tape (VHS, Hi-8, etc)Analog tape (VHS, Hi-8, etc)– Digital tape -- new DV formatDigital tape -- new DV format

• Video capture cardsVideo capture cards– E.g. Targa Truevision, Radius MotoDVE.g. Targa Truevision, Radius MotoDV– New option: DV formatNew option: DV format

• IEEE 1394 “Firewire” allows direct digital transfer -- no IEEE 1394 “Firewire” allows direct digital transfer -- no analog conversionanalog conversion

• Simple PC cameras (e.g. Connectix Simple PC cameras (e.g. Connectix Quickcam)Quickcam)

Editing Digital VideoEditing Digital Video

• Generally requires commercial Generally requires commercial software such as Adobe Premieresoftware such as Adobe Premiere

• Requires a high-end computerRequires a high-end computer– E.g. a 400 MHz PC with 100 megahertz E.g. a 400 MHz PC with 100 megahertz

busbus

– At least 128M of RAMAt least 128M of RAM

– Several gigabytes of hard diskSeveral gigabytes of hard disk• FAST hard disk: SCSI or Ultra-ATAFAST hard disk: SCSI or Ultra-ATA

Live Events versus HistoricalLive Events versus Historical

• Most community information sites Most community information sites will feature historical multimediawill feature historical multimedia

• Some may wish to try live eventsSome may wish to try live events

• Software from Real Inc. allows Software from Real Inc. allows encoding and streaming in real timeencoding and streaming in real time

• Be sure you test before the live eventBe sure you test before the live event

• Be sure to record event as you send Be sure to record event as you send it outit out

Test Your Multimedia!Test Your Multimedia!

• Verify it downloads properlyVerify it downloads properly– Hint: be sure your server has all the right Hint: be sure your server has all the right

“MIME” types configured“MIME” types configured

• Test on a variety of user setups:Test on a variety of user setups:– Modem versus direct connectModem versus direct connect

– Older sound cardsOlder sound cards

– Older monitors with fewer colorsOlder monitors with fewer colors

– PCs with old CPUs, < 8 megabytes memoryPCs with old CPUs, < 8 megabytes memory

The Benefits of Digital AudioThe Benefits of Digital Audio

• An interview with Erik LarsonAn interview with Erik Larson

• Former webmaster for Michigan Former webmaster for Michigan State UniversityState University

• Systems Administrator, Systems Administrator, ECHO Interactive Music Learning ECHO Interactive Music Learning Center, Center, Chicago Symphony OrchestraChicago Symphony Orchestra

Live Demo of Real MediaLive Demo of Real Media

Image Maps: Variation on the Image Maps: Variation on the HyperlinkHyperlink

• Take a photograph or create a graphicTake a photograph or create a graphic

• Include on the graphic elements to serve as Include on the graphic elements to serve as buttonsbuttons

• Simple tools allow you to mark boundaries Simple tools allow you to mark boundaries of buttonsof buttons

• Coordinates of button are recorded in Web Coordinates of button are recorded in Web pagepage

• User clicks on a button, and the appropriate User clicks on a button, and the appropriate Web page is deliveredWeb page is delivered

<map name="imagemap"><map name="imagemap">

<area shape="rect" coords="134,5,224,77" <area shape="rect" coords="134,5,224,77" href="http://www.netfact.com/pinksquare">href="http://www.netfact.com/pinksquare">

<area shape="circle" coords="57,39,43" nohref><area shape="circle" coords="57,39,43" nohref>

<area shape="circle" coords="60,34,53" <area shape="circle" coords="60,34,53" href="http://www.netfact.com/circle.html">href="http://www.netfact.com/circle.html">

<area shape="rect" coords="2,86,121,169" <area shape="rect" coords="2,86,121,169" href="http://www.netfact.com/heart.html">href="http://www.netfact.com/heart.html">

<area shape="polygon" <area shape="polygon" coords="176,85,129,100,172,118,155,124,186,138,189,151,257,171,coords="176,85,129,100,172,118,155,124,186,138,189,151,257,171,227,129,206,108,175,85,175,85" 227,129,206,108,175,85,175,85" href="http://www.netfact.com/bolt.html">href="http://www.netfact.com/bolt.html">

<area shape="default" nohref><area shape="default" nohref>

</map></map>

Image Map TipsImage Map Tips• Make the clickable areas obviousMake the clickable areas obvious

– What is and isn’t a button to click on?What is and isn’t a button to click on?

• Embed the <map> tags and content in Embed the <map> tags and content in your pageyour page– Also define in your server config.Also define in your server config.

• Always include an alternative to the image Always include an alternative to the image mapmap– Text mode links at the bottom of the Text mode links at the bottom of the

pagepage

HTTP versus HTMLHTTP versus HTML

user.isp.com

HTMLHTMLdocu-docu-mentment

HTTPHTTPsessionsession

Web ServerWeb Server User’s Web User’s Web BrowserBrowser

The InternetThe Internet

www.smallville.mi.us

Static HTMLStatic HTML• Most sites will mostly serve static HTMLMost sites will mostly serve static HTML

– Prepared offline by hand or using Prepared offline by hand or using authoring toolauthoring tool

– Posted to Web server each time it is Posted to Web server each time it is updatedupdated

– Posted “by hand” via FTP…Posted “by hand” via FTP…– ……or using “one-button publishing”or using “one-button publishing”

• FrontPage, Netscape Composer, etcFrontPage, Netscape Composer, etc

Alternatives to Static HTMLAlternatives to Static HTML

• Common Gateway InterfaceCommon Gateway Interface

• DatabasesDatabases–Cold FusionCold Fusion

–Microsoft Active Server Pages Microsoft Active Server Pages (ASP)(ASP)

• Java, JavaScript, ShockwaveJava, JavaScript, Shockwave

The Common Gateway The Common Gateway Interface (CGI)Interface (CGI)

HTTPHTTPsessionsession

Web ServerThe InternetThe Internet

form.form.htmlhtml

CGICGICGICGIscriptscript

www.smallville.mi.us

Web Middleware ProductsWeb Middleware Products

• Cold Fusion from Allaire CorpCold Fusion from Allaire Corp– You write in Cold Fusion Markup You write in Cold Fusion Markup

Language Language – Embed your code in HTMLEmbed your code in HTML– You reference a database via You reference a database via

embedded codeembedded code• E.g. MS-Access, SQL serverE.g. MS-Access, SQL server

Microsoft Microsoft Active Server Pages (ASP)Active Server Pages (ASP)

• Microsoft solution for connecting Microsoft solution for connecting your server to a databaseyour server to a database

• Integrated in Microsoft Internet Integrated in Microsoft Internet Information serverInformation server

• VB Script languageVB Script language– Similar to Visual BasicSimilar to Visual Basic

• Easy installation and integrationEasy installation and integration

JavaJava• Programming language from Sun Programming language from Sun

MicrosystemsMicrosystems• More computer books on Java than any More computer books on Java than any

other languageother language• An “applet” is prepared by a developer…An “applet” is prepared by a developer…• Compiled into a standard “bytecode” file Compiled into a standard “bytecode” file

and referenced in a Web page...and referenced in a Web page...• ...and delivered for “interpretive” ...and delivered for “interpretive”

execution on the user’s desktopexecution on the user’s desktop

Java Virtual MachineJava Virtual Machine

AppletApplet

Applet Store

Java Compiler

Bytecodes

ServerServer

Class LoaderClass Loader

Client Client (any platform)(any platform)

Bytecode VerifierBytecode Verifier

Run-time Interpreter

Executed AppletExecuted Applet

Applet InvocationApplet Invocation• HTML <APPLET> tag refers to an appletHTML <APPLET> tag refers to an applet• Browser opens TCP session to download the Browser opens TCP session to download the

appletapplet– Separate step from download the HTML fileSeparate step from download the HTML file

• Browser loads applet into client memoryBrowser loads applet into client memory• <APPLET> tag defines screen area owned by <APPLET> tag defines screen area owned by

appletapplet• When user exits referencing Web page, When user exits referencing Web page,

applet execution ceasesapplet execution ceases

Support for JavaSupport for Java• First implemented in Sun’s Hot Java First implemented in Sun’s Hot Java

browserbrowser

• Java interpreter built into Netscape Java interpreter built into Netscape Navigator 2.0 and laterNavigator 2.0 and later

• Supported in Microsoft Internet ExplorerSupported in Microsoft Internet Explorer– But Microsoft pushes ActiveX alternativeBut Microsoft pushes ActiveX alternative

• Compilers and visual development Compilers and visual development environments availableenvironments available– From a few hundred dollars to a few thousandFrom a few hundred dollars to a few thousand

JavaScript vs. JavaJavaScript vs. Java

• JavaScript is simple languageJavaScript is simple language

• Actual JavaScript program is Actual JavaScript program is embedded in your HTML pageembedded in your HTML page

• Program is interpreted by the user’s Program is interpreted by the user’s browserbrowser

• Don’t be fooled by the name!Don’t be fooled by the name!– Much Much easier than Javaeasier than Java

– Quick payoff for simple applicationsQuick payoff for simple applications

Sample JavaScript ProgramSample JavaScript Program<html> <html>

<head> <title>When Was This Page Last Changed?</title> </head><head> <title>When Was This Page Last Changed?</title> </head>

<body bgcolor=ffffff><body bgcolor=ffffff>

<script language="JavaScript"><script language="JavaScript">

<!-- Hide<!-- Hide

document.write("<h2>This page was last updated on "document.write("<h2>This page was last updated on "

+ document.lastModified + "</h2>")+ document.lastModified + "</h2>")

// --> // -->

</script> </script>

</body> </html></body> </html>

VRMLVRML• Virtual Reality Modeling LanguageVirtual Reality Modeling Language• Developed at Silicon Graphics, elsewhereDeveloped at Silicon Graphics, elsewhere• A language for defining interactive 3D worldsA language for defining interactive 3D worlds• Navigate a 3D space as opposed to the 2D world Navigate a 3D space as opposed to the 2D world

of HTML-based hypermediaof HTML-based hypermedia• Netscape Navigator supports natively in 3.0, laterNetscape Navigator supports natively in 3.0, later• Microsoft supports, also extends with “Active Microsoft supports, also extends with “Active

VRML”VRML”• Relatively obscure technology for most Web Relatively obscure technology for most Web

sitessites

Shockwave for DirectorShockwave for Director• Director is a 3D authoring environmentDirector is a 3D authoring environment

• Popular for years in virtual reality communityPopular for years in virtual reality community

– Authoring tool for many CD-ROMsAuthoring tool for many CD-ROMs

• From Macromedia IncFrom Macromedia Inc

• Shockwave for Director is a plugin for Netscape Shockwave for Director is a plugin for Netscape Navigator (2.0 or later)Navigator (2.0 or later)

• Provides ability to “play”, and interact with, a Provides ability to “play”, and interact with, a Director animationDirector animation

• Being used by many sites to animate their logosBeing used by many sites to animate their logos

• Also for more extensive applicationsAlso for more extensive applications

Shockwave FlashShockwave Flash

• Released in 1997Released in 1997

• Re-engineered Shockwave for the WebRe-engineered Shockwave for the Web– Compressed audioCompressed audio

– Streaming playbackStreaming playback

– Object-based graphicsObject-based graphics

• Pro: If you want smooth animations and Pro: If you want smooth animations and audio, this is the ticketaudio, this is the ticket

• Con: Con: – Users need the pluginUsers need the plugin

– Still slower to loadStill slower to load

Software Can Make It EasierSoftware Can Make It Easier• Various authoring packages and specialized Various authoring packages and specialized

tools help withtools help with– GIF animationsGIF animations– Image mapsImage maps

• Visual Interdev from Microsoft makes ASP Visual Interdev from Microsoft makes ASP much easiermuch easier

• Various Java development environments -- Various Java development environments -- Sun, Borland, etcSun, Borland, etc

• Macromedia’s Dreamweaver makes Macromedia’s Dreamweaver makes multimedia manageablemultimedia manageable

A Hardware Store A Hardware Store Full of Tools!Full of Tools!

• You could spend all your energy You could spend all your energy picking a tool…picking a tool…

• … … or learning itor learning it

• Remember to balance your efforts Remember to balance your efforts with real content workwith real content work

• Pick one or two advanced tools…Pick one or two advanced tools…

• ……or maybe zero!or maybe zero!

Build It Once -- and Reuse It!Build It Once -- and Reuse It!

• Build templates for HTML pagesBuild templates for HTML pages– Copy the template page when you start each Copy the template page when you start each

new pagenew page

• Devise simple interactive tools in Devise simple interactive tools in JavascriptJavascript– Reuse those tools throughout your siteReuse those tools throughout your site

• Create modules in Java or Active Server Create modules in Java or Active Server PagesPages– ……for reuse site-widefor reuse site-wide

Basic Web ServerBasic Web Server

Static HTML PagesStatic HTML Pages

CGI ScriptsCGI Scripts

Animated Animated GIFsGIFs

JavaJavaActive Server Active Server

PagesPages

Image MapsImage Maps

ShockwaveShockwave

Streaming Streaming MediaMedia