Keep SMILing Institutional Web Management Workshop 10 th  June 2006 Adrian Stevenson Internet Services, University of Manc...
Keep SMILing <ul><li>What is SMIL? </li></ul><ul><li>How do you create a SMIL presentation? </li></ul><ul><li>Accessibilit...
SMIL <ul><li>W3C Specification </li></ul><ul><li>‘ Synchronized Multimedia Integration Language’ </li></ul><ul><li>“ … ena...
Creating a SMIL presentation <ul><li>Record audio </li></ul><ul><li>Process audio </li></ul><ul><li>Create the image files...
Recording <ul><li>Digital Recording device of some kind </li></ul><ul><ul><li>Computer </li></ul></ul><ul><ul><ul><li>Soun...
Audio Processing <ul><li>Slide change timings </li></ul><ul><li>Editing – pauses, coughs </li></ul><ul><li>Equalisation </...
Process Powerpoint slides <ul><li>Export from Powerpoint </li></ul><ul><ul><li>‘ Save as’ PNG – every slide </li></ul></ul...
Write the SMIL Code <ul><li>SMIL  tag and namespace, head and body section </li></ul><ul><li><smil xmlns=&quot;http://www....
<head> section <ul><li>Defines appearance of the playback window </li></ul><ul><li>Simple layout: </li></ul><ul><li><head>...
<body> section <ul><li>Arrange the sequence and timing of elements. </li></ul><ul><li>Two basic tags are: </li></ul><ul><u...
More SMIL code <ul><li><smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot; xml:lang=&quot;en&quot;> </li></ul><...
Accessibility <ul><li>‘ alt’ and ‘longdesc’ text attributes </li></ul><ul><li><body> </li></ul><ul><li><par> </li></ul><ul...
Accessibility <ul><li>Captioning </li></ul><ul><ul><li>Makes SMIL  accessible to those with difficulty or who are unable t...
<switch> <ul><li>SMIL <switch> tag allows the player to select from multiple options </li></ul><ul><li>E.g. different audi...
<switch> <ul><li><switch> </li></ul><ul><li><audio src=&quot;192k.mp3&quot; system-bitrate=192000&quot;/> </li></ul><ul><l...
More SMIL <ul><li>Metadata </li></ul><ul><li>Hyperlink elements </li></ul><ul><ul><li><a href=&quot;http://www.apple.com/&...
Non-standard SMIL <ul><li>Real Player Navigation </li></ul><ul><ul><li>Example </li></ul></ul><ul><li><textstream src=&quo...
Issues <ul><li>Technical Issues </li></ul><ul><ul><li>File path problem </li></ul></ul><ul><ul><li>Users have different SM...
Some references <ul><li>W3C SMIL Page http://www.w3.org/AudioVideo/ </li></ul><ul><li>W3C Accessibility Features of SMIL h...
Upcoming SlideShare
Loading in...5
×

Keep SMILing

1,550

Published on

Workshop for the Institutional Web Management Workshop 2006

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,550
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×