IWMW 2006: Keep SMILing
•Download as PPT, PDF•
0 likes•360 views
Slides used in workshop session B6 on "Keep SMILing" at the IWMW 2006 event held at the University of Bath on 14 - 16 June 2006. See http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2006/sessions/stevenson/
Recommended
More Related Content
Viewers also liked
Viewers also liked (11)
Similar to IWMW 2006: Keep SMILing
Similar to IWMW 2006: Keep SMILing (20)
More from IWMW
More from IWMW (20)
Recently uploaded
Recently uploaded (20)
IWMW 2006: Keep SMILing
- 1. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Keep SMILing Institutional Web Management Workshop 10th June 2006 Adrian Stevenson Internet Services, University of Manchester
- 2. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Keep SMILing • What is SMIL? • How do you create a SMIL presentation? • Accessibility • Non-standard SMIL • Issues • References
- 3. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester SMIL • W3C Specification • ‘Synchronized Multimedia Integration Language’ • “ …enables simple authoring of interactive audiovisual presentations” • SMIL presentations can integrate audio and video with images, text or many other media type • Syntax and structure similar to HTML • SMIL 2.1 released Dec 05 • SMIL 1.0 released 1998 • Examples – Customers, Suppliers and the Need for Partnerships – Stephen Emmott – State of the Web 2005– Molly Holzschlag
- 4. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Creating a SMIL presentation • Record audio • Process audio • Create the image files – Assuming based on a Powerpoint presentation • Write SMIL code • Add accessibility features • Add other optional features
- 5. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Recording • Digital Recording device of some kind – Computer • Sound card • Microphone • Software – Audacity, Steinberg Wavelab – Mp3 player with recording capability – Professional audio device • Possible problems – Speaker moves about – High level of background noise – Interference
- 6. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Audio Processing • Slide change timings • Editing • Equalisation • Amplification • Pitch change • Volume Compression • Filtering – Noise reduction (Steinberg Cleanup) • File Compression (typically to mp3)
- 7. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Process Powerpoint slides • Export from Powerpoint – ‘Save as’ PNG – every slide – Can look a bit messy: – http://www.ukoln.ac.uk/web-focus/events/workshops/trieste-2005/talk-2a/ • Process image files in graphics program such as Macromedia Fireworks
- 8. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Write the SMIL Code • SMIL tag and namespace, head and body section <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> ...optional section with all header markup... </head> <body> ...required section with all body markup... </body> </smil>
- 9. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester <head> section • Defines appearance of the playback window • Simple layout: <head> <layout> <root-layout height="450" width="600" background-color="black"/> <region id="main" title="Main" width="600" height="450" fit="fill"/> </layout> </head>
- 10. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester <body> section • Arrange the sequence and timing of elements. • Two basic tags are: – <par> plays media in simultaneously (in parallel) – <seq> plays media in sequence • Eg: <body> <par> <audio src="intrometadata.mp3" /> <img id="image_1" src="Slide1.jpg" region="main" begin="0" dur="5:02" /> <img id="image_2" src="Slide2.jpg" region="main" begin="5:02" dur="59" /> <img id="image_3" src="Slide3.jpg" region="main" begin="6:01" dur="26" /> </par> </body> • Example
- 11. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester More SMIL code <smil xmlns="http://www.w3.org/2001/SMIL20/Language" xml:lang="en"> <head> <layout> <root-layout height="450" width="750" background-color="white"/> <region id="main" title="Main" width="600" height="450" fit="fill"/> <region id="nav" title="Navigation" width="150" height="450" left="600"/> </layout> </head> <body> <par> <audio src="emmott.mp3" /> <img id="image_1" src="Slide1.jpg" region="main" begin="0"/> <img id="image_2" src="Slide2.jpg" region="main" begin="1:25" /> <img id="image_3" src="Slide3.jpg" region="main" begin="2:06" /> <textstream src="nav.rt" region="nav" begin="0s" /> </par> </body> </smil> Example [requires Real Player]
- 12. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Accessibility • ‘alt’ and ‘longdesc’ text attributes <body> <par> <audio src="emmott/emmott.mp3" alt=“recording of a talk by Stephen Emmott called Customers, Suppliers, and the Need for Partnerships" longdesc="emmott/emmott.txt"/> <img id="image_1" src="emmott/Slide1.jpg" region="main" begin="0" alt="Customers, Suppliers, and the Need for Partnerships title slide"/> <img id="image_2" src="emmott/Slide2.jpg" region="main" begin="1:25" alt="Copyright and credits slide"/> ….
- 13. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Accessibility • Captioning – Makes SMIL accessible to those with difficulty hearing or who are unable to hear – SMIL audio track improves accessibility for those with visual impairments – Requires a transcription of the spoken content (plus any important non- spoken sound), and associated a timestamp • Add a textstream to the SMIL code: – <textstream src="emmott/transcript.rt" region="text" begin="0s"/> • Example
- 14. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester <switch> • SMIL <switch> tag allows the player to select from multiple options • E.g. different audio or text tracks based on user’s language preferences • Seven test attributes including: – System-language – System-bit-rate • <switch> selects the first item that matches the user’s system attributes – For selection based on connection speed, order the elements from highest to lowest speed
- 15. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester <switch> <switch> <audio src="192k.mp3" system-bitrate=192000"/> <audio src="128k.mp3" system-bitrate="128000"/> <audio src="basic.mp3" system-bitrate="28800"/> </switch> <switch> <audio src="french.mp3" system-language="fr"/> <audio src="german.mp3" system-language="de"/> <audio src="english.mp3" system-language="en"/> </switch>
- 16. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester More SMIL • Metadata • Hyperlink elements <a href="http://www.apple.com/" show="new" > <img src="poster.jpg" region="r1" dur="00:05" /> </a> • Complex timing controls • Slide transition effects – Fade-in’s, Cross fades, Transparency • Zoom • Animation • Pre-fetch
- 17. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Non-standard SMIL • Real Player Navigation – Example • <textstream src="nav.rt" region="nav" begin="0s" /> added to SMIL file • Textstream .rt file: <window> <time begin="0:00.0"/> <clear/> <p>Menu</p> <a href="command:seek(0:0)" target="_player">Introduction</a><br/> <a href="command:seek(1:25)" target="_player">Copyright and credits</a><br/> …… </window>
- 18. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Issues • Technical Issues – File path problem – Users have different SMIL players (or no SMIL player) • Mixed media problem – Difficult to capture complex elements of a presentation – No control over users audio and video settings – Large files sizes • Non-Technical Issues – Time consuming – IPR
- 19. 15th June 2006Keep SMILingCombining the strengths of UMIST and The Victoria University of Manchester Some references • W3C SMIL Page http://www.w3.org/AudioVideo/ • W3C Accessibility Features of SMIL http://www.w3.org/TR/SMIL-access/ • Synchronized Multimedia On The Web - Larry Bouthillier http://www.webtechniques.com/archives/1998/09/bouthillier/ • SMIL Scripting for Quicktime http://developer.apple.com/documentation/quicktime/Conceptual/QTScripting_SMIL • SMIL del.icio.us http://del.icio.us/bias/SMIL
Editor's Notes
- Much recording of conference now and podcasting – Why not go further and create SMIL presentation to bring it all together
- Mention hasn’t especially caught on. Caught between designer and programmer. Competes with well promoted other technologies. So SMIL allows users to follow the presentation without having to guess when the slides change. Show a bit of the SMIL source code
- Record audio in advance or on the day. Could be yourself or other speakers Not going to look at everything SMIL can do as it is quite wide ranging
- Pro audio recorder £989
- Hands on part here! Easier to do slide timings in Real Player, Windows Media Player Pitch change using Brian’s file
- Demo the batch processing Mention a matter of choice – may be happy with the PNG’s Mention linking to HTML files – haven’t found very satisfactory
- Size and colour of overall presentation Then define the areas within the window where we want our media elements displayed in the region tag. Region id required. Region in this example is the same as the root-layout size. Can include z-index to order region layers
- Can nest &lt;par&gt; and &lt;seq&gt; Quicktime requires duration as Real Player doesn’t – a pain as more hassle to work out than ‘begin’ which can easily get from media player Audio, img are media tags – SMIL allows for img, text, textstream, video, audio and animation. Mention ‘begin’ and duration. SMIL can leave off hours, hours and minutes and decimal fractions. Can add ‘sec’ for readability Highlight trailing slash
- Talk through the code Note: extra region, the ‘left’ attribute’, the region tag, the ‘fit’ tag – images scaled to match the height and width of the region. Also ‘top’ and ‘left’ offsets, and ‘z-index’ Two regions Images go to region “main” and textstream navigation going to region “nav” below it &lt;par&gt; display simultaneously in parallel. /&lt;seq&gt; plays e.g audio files in sequence one immediately following the other Hands On Exercise 2 here!
- Text file can be exported from Powerpoint as well as image files
- This caption is in real text .rt file
- Other switch tags not supported. These 2 most usually supported. SMIL player loads the first element whose requirement is less than or equal to the viewer’s connection speed .
- Highlight highest connection speed first
- Can add DC tags to the &lt;head&gt; Hyperlink elements – make elements clickable by wrapping the media tag in a standard her Timing – Loop, repeat, mouse, keyboard, cursor control
- SMIL by definition extensible. Real and Quicktime both have extensions eg. Autoplay, time slider Talk through the code.
- Mixed Media – e.g. Quicktime cannot play a file that specifies media that Quicktime can’t play such as Real Media or Windows WMV files. Can’t be sure whether user will have any SMIL player installed – can embed SMIL reference in Quicktime or Real Player file – but may have Ambulkant. Large file sizes solved by streaming but adds to complexity and not all authors have access. Time – partic accessibility