Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Keep SMILing

1,981 views

Published on

Workshop for the Institutional Web Management Workshop 2006

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

Keep SMILing

  1. 1. Keep SMILing Institutional Web Management Workshop 10 th June 2006 Adrian Stevenson Internet Services, University of Manchester
  2. 2. Keep SMILing <ul><li>What is SMIL? </li></ul><ul><li>How do you create a SMIL presentation? </li></ul><ul><li>Accessibility </li></ul><ul><li>Non-standard SMIL </li></ul><ul><li>Issues </li></ul><ul><li>References </li></ul>
  3. 3. SMIL <ul><li>W3C Specification </li></ul><ul><li>‘ Synchronized Multimedia Integration Language’ </li></ul><ul><li>“ … enables simple authoring of interactive audiovisual presentations” </li></ul><ul><li>SMIL presentations can integrate audio and video with images, text or many other media type </li></ul><ul><li>Syntax and structure similar to HTML </li></ul><ul><li>SMIL 2.1 released Dec 05 </li></ul><ul><li>SMIL 1.0 released 1998 </li></ul><ul><li>Examples </li></ul><ul><ul><li>Customers, Suppliers and the Need for Partnerships – Stephen Emmott </li></ul></ul><ul><ul><li>State of the Web 2005 – Molly Holzschlag </li></ul></ul>
  4. 4. Creating a SMIL presentation <ul><li>Record audio </li></ul><ul><li>Process audio </li></ul><ul><li>Create the image files </li></ul><ul><ul><li>Assuming based on a Powerpoint presentation </li></ul></ul><ul><li>Write SMIL code </li></ul><ul><li>Add accessibility features </li></ul><ul><li>Add other optional features </li></ul>
  5. 5. Recording <ul><li>Digital Recording device of some kind </li></ul><ul><ul><li>Computer </li></ul></ul><ul><ul><ul><li>Sound card </li></ul></ul></ul><ul><ul><ul><li>Microphone </li></ul></ul></ul><ul><ul><ul><li>Software – Audacity, Steinberg Wavelab </li></ul></ul></ul><ul><ul><li>Mp3 player with recording capability </li></ul></ul><ul><ul><li>Professional audio device </li></ul></ul><ul><li>Possible problems </li></ul><ul><ul><li>Speaker moves about </li></ul></ul><ul><ul><li>High level of background noise </li></ul></ul><ul><ul><li>Interference </li></ul></ul>
  6. 6. Audio Processing <ul><li>Slide change timings </li></ul><ul><li>Editing – pauses, coughs </li></ul><ul><li>Equalisation </li></ul><ul><li>Amplification </li></ul><ul><li>Pitch change </li></ul><ul><li>Volume Compression </li></ul><ul><li>Filtering </li></ul><ul><ul><li>Noise reduction (Steinberg Cleanup) </li></ul></ul><ul><li>File Compression (typically to mp3) </li></ul>
  7. 7. Process Powerpoint slides <ul><li>Export from Powerpoint </li></ul><ul><ul><li>‘ Save as’ PNG – every slide </li></ul></ul><ul><ul><li>Can look a bit messy: </li></ul></ul><ul><ul><li>http://www.ukoln.ac.uk/web-focus/events/workshops/trieste-2005/talk-2a/ </li></ul></ul><ul><li>Process image files in graphics program such as Macromedia Fireworks </li></ul>
  8. 8. Write the SMIL Code <ul><li>SMIL tag and namespace, head and body section </li></ul><ul><li><smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot;> <head> . ..optional section with all header markup... </head> </li></ul><ul><li><body> . ..required section with all body markup... </body> </smil> </li></ul>
  9. 9. <head> section <ul><li>Defines appearance of the playback window </li></ul><ul><li>Simple layout: </li></ul><ul><li><head> </li></ul><ul><li><layout> </li></ul><ul><li><root-layout height=&quot;450&quot; width=&quot;600&quot; background-color=&quot;black&quot;/> </li></ul><ul><li><region id=&quot;main&quot; title=&quot;Main&quot; width=&quot;600&quot; height=&quot;450&quot; fit=&quot;fill&quot;/> </li></ul><ul><li></layout> </li></ul><ul><li></head> </li></ul>
  10. 10. <body> section <ul><li>Arrange the sequence and timing of elements. </li></ul><ul><li>Two basic tags are: </li></ul><ul><ul><li><par> plays media in simultaneously (in parallel) </li></ul></ul><ul><ul><li><seq> plays media in sequence </li></ul></ul><ul><li>Eg: </li></ul><ul><li><body> </li></ul><ul><li><par> </li></ul><ul><li><audio src=&quot;intrometadata.mp3&quot; /> </li></ul><ul><li><img id=&quot;image_1&quot; src=&quot;Slide1.jpg&quot; region=&quot;main&quot; begin=&quot;0&quot; dur=&quot;5:02&quot; /> </li></ul><ul><li><img id=&quot;image_2&quot; src=&quot;Slide2.jpg&quot; region=&quot;main&quot; begin=&quot;5:02&quot; dur=&quot;59&quot; /> </li></ul><ul><li><img id=&quot;image_3&quot; src=&quot;Slide3.jpg&quot; region=&quot;main&quot; begin=&quot;6:01&quot; dur=&quot;26&quot; /> </li></ul><ul><li></par> </li></ul><ul><li></body> </li></ul><ul><li>Example </li></ul>
  11. 11. More SMIL code <ul><li><smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot; xml:lang=&quot;en&quot;> </li></ul><ul><li><head> </li></ul><ul><li><layout> </li></ul><ul><li><root-layout height=&quot;450&quot; width=&quot;750&quot; background-color=&quot;white&quot;/> </li></ul><ul><li><region id=&quot;main&quot; title=&quot;Main&quot; width=&quot;600&quot; height=&quot;450&quot; fit=&quot;fill&quot;/> </li></ul><ul><li><region id=&quot;nav&quot; title=&quot;Navigation&quot; width=&quot;150&quot; height=&quot;450&quot; left=&quot;600&quot;/> </li></ul><ul><li></layout> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><par> </li></ul><ul><li><audio src=&quot;emmott.mp3&quot; /> </li></ul><ul><li><img id=&quot;image_1&quot; src=&quot;Slide1.jpg&quot; region=&quot;main&quot; begin=&quot;0&quot;/> </li></ul><ul><li><img id=&quot;image_2&quot; src=&quot;Slide2.jpg&quot; region=&quot;main&quot; begin=&quot;1:25&quot; /> </li></ul><ul><li><img id=&quot;image_3&quot; src=&quot;Slide3.jpg&quot; region=&quot;main&quot; begin=&quot;2:06&quot; /> </li></ul><ul><li><textstream src=&quot;nav.rt&quot; region=&quot;nav&quot; begin=&quot;0s&quot; /> </li></ul><ul><li></par> </li></ul><ul><li></body> </li></ul><ul><li></smil> </li></ul>Example
  12. 12. Accessibility <ul><li>‘ alt’ and ‘longdesc’ text attributes </li></ul><ul><li><body> </li></ul><ul><li><par> </li></ul><ul><li><audio src=&quot;emmott/emmott.mp3&quot; alt=“recording of a talk by Stephen Emmott called Customers, Suppliers, and the Need for Partnerships&quot; longdesc=&quot;emmott/emmott.txt&quot;/> </li></ul><ul><li><img id=&quot;image_1&quot; src=&quot;emmott/Slide1.jpg&quot; region=&quot;main&quot; begin=&quot;0&quot; alt=&quot;Customers, Suppliers, and the Need for Partnerships title slide&quot;/> </li></ul><ul><li><img id=&quot;image_2&quot; src=&quot;emmott/Slide2.jpg&quot; region=&quot;main&quot; begin=&quot;1:25&quot; alt=&quot;Copyright and credits slide&quot;/> </li></ul><ul><li>… . </li></ul>
  13. 13. Accessibility <ul><li>Captioning </li></ul><ul><ul><li>Makes SMIL accessible to those with difficulty or who are unable to hear </li></ul></ul><ul><ul><li>SMIL audio track improves accessibility for those with visual impairments </li></ul></ul><ul><ul><li>Requires a transcription of the spoken content (plus any important non-spoken sound), and associated a timestamp </li></ul></ul><ul><li>Add a textstream to the SMIL code: </li></ul><ul><ul><li><textstream src=&quot;emmott/transcript.rt&quot; region=&quot;text&quot; begin=&quot;0s&quot;/> </li></ul></ul><ul><li>Example </li></ul>
  14. 14. <switch> <ul><li>SMIL <switch> tag allows the player to select from multiple options </li></ul><ul><li>E.g. different audio or text tracks based on user’s language preferences </li></ul><ul><li>Seven test attributes including: </li></ul><ul><ul><li>System-language </li></ul></ul><ul><ul><li>System-bit-rate </li></ul></ul><ul><li><switch> selects the first item that matches the user’s system attributes </li></ul><ul><ul><li>For selection based on connection speed, order the elements from highest to lowest speed </li></ul></ul>
  15. 15. <switch> <ul><li><switch> </li></ul><ul><li><audio src=&quot;192k.mp3&quot; system-bitrate=192000&quot;/> </li></ul><ul><li><audio src=&quot;128k.mp3&quot; system-bitrate=&quot;128000&quot;/> </li></ul><ul><li><audio src=&quot;basic.mp3&quot; system-bitrate=&quot;28800&quot;/> </li></ul><ul><li></switch> </li></ul><ul><li><switch> </li></ul><ul><li><audio src=&quot;french.mp3&quot; system-language=&quot;fr&quot;/> </li></ul><ul><li><audio src=&quot;german.mp3&quot; system-language=&quot;de&quot;/> </li></ul><ul><li><audio src=&quot;english.mp3&quot; system-language=&quot;en&quot;/> </li></ul><ul><li></switch> </li></ul>
  16. 16. More SMIL <ul><li>Metadata </li></ul><ul><li>Hyperlink elements </li></ul><ul><ul><li><a href=&quot;http://www.apple.com/&quot; show=&quot;new&quot; > </li></ul></ul><ul><ul><li><img src=&quot;poster.jpg&quot; region=&quot;r1&quot; dur=&quot;00:05&quot; /> </li></ul></ul><ul><ul><li></a> </li></ul></ul><ul><li>Complex timing controls </li></ul><ul><li>Slide transition effects </li></ul><ul><ul><li>Fade-in’s, Cross fades, Transparency </li></ul></ul><ul><li>Zoom </li></ul><ul><li>Animation </li></ul><ul><li>Pre-fetch </li></ul>
  17. 17. Non-standard SMIL <ul><li>Real Player Navigation </li></ul><ul><ul><li>Example </li></ul></ul><ul><li><textstream src=&quot;nav.rt&quot; region=&quot;nav&quot; begin=&quot;0s&quot; /> added to SMIL file </li></ul><ul><li>Textstream .rt file: </li></ul><ul><ul><li><window> </li></ul></ul><ul><ul><li><time begin=&quot;0:00.0&quot;/> </li></ul></ul><ul><ul><li><clear/> </li></ul></ul><ul><ul><li><p>Menu</p> </li></ul></ul><ul><ul><li><a href=&quot;command:seek(0:0)&quot; target=&quot;_player&quot;>Introduction</a><br/> </li></ul></ul><ul><ul><li><a href=&quot;command:seek(1:25)&quot; target=&quot;_player&quot;>Copyright and credits</a><br/> </li></ul></ul><ul><ul><li>…… </li></ul></ul><ul><ul><li></window> </li></ul></ul>
  18. 18. Issues <ul><li>Technical Issues </li></ul><ul><ul><li>File path problem </li></ul></ul><ul><ul><li>Users have different SMIL players (or no SMIL player) </li></ul></ul><ul><ul><ul><li>Mixed media problem </li></ul></ul></ul><ul><ul><li>Difficult to capture complex elements of a presentation </li></ul></ul><ul><ul><li>No control over users audio and video settings </li></ul></ul><ul><ul><li>Large files sizes </li></ul></ul><ul><li>Non-Technical Issues </li></ul><ul><ul><li>Time consuming </li></ul></ul><ul><ul><li>IPR </li></ul></ul>
  19. 19. Some references <ul><li>W3C SMIL Page http://www.w3.org/AudioVideo/ </li></ul><ul><li>W3C Accessibility Features of SMIL http://www.w3.org/TR/SMIL-access/ </li></ul><ul><li>Synchronized Multimedia On The Web - Larry Bouthillier http://www.webtechniques.com/archives/1998/09/bouthillier/ </li></ul><ul><li>SMIL Scripting for Quicktime http://developer.apple.com/documentation/quicktime/Conceptual/QTScripting_SMIL/index.html </li></ul><ul><li>SMIL del.icio.us http://del.icio.us/bias/SMIL </li></ul>

×