Date post: | 20-Dec-2015 |
Category: |
Documents |
View: | 216 times |
Download: | 1 times |
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
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