Keep SMILing
Upcoming SlideShare
Loading in...5
×
 

Keep SMILing

on

  • 2,720 views

Workshop for the Institutional Web Management Workshop 2006

Workshop for the Institutional Web Management Workshop 2006

Statistics

Views

Total Views
2,720
Views on SlideShare
2,719
Embed Views
1

Actions

Likes
0
Downloads
51
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Keep SMILing Keep SMILing Presentation Transcript

  • Keep SMILing Institutional Web Management Workshop 10 th June 2006 Adrian Stevenson Internet Services, University of Manchester
  • Keep SMILing
    • What is SMIL?
    • How do you create a SMIL presentation?
    • Accessibility
    • Non-standard SMIL
    • Issues
    • References
  • 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
  • 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
  • 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
  • Audio Processing
    • Slide change timings
    • Editing – pauses, coughs
    • Equalisation
    • Amplification
    • Pitch change
    • Volume Compression
    • Filtering
      • Noise reduction (Steinberg Cleanup)
    • File Compression (typically to mp3)
  • 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
  • Write the SMIL Code
    • SMIL tag and namespace, head and body section
    • <smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot;> <head> . ..optional section with all header markup... </head>
    • <body> . ..required section with all body markup... </body> </smil>
  • <head> section
    • Defines appearance of the playback window
    • Simple layout:
    • <head>
    • <layout>
    • <root-layout height=&quot;450&quot; width=&quot;600&quot; background-color=&quot;black&quot;/>
    • <region id=&quot;main&quot; title=&quot;Main&quot; width=&quot;600&quot; height=&quot;450&quot; fit=&quot;fill&quot;/>
    • </layout>
    • </head>
  • <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=&quot;intrometadata.mp3&quot; />
    • <img id=&quot;image_1&quot; src=&quot;Slide1.jpg&quot; region=&quot;main&quot; begin=&quot;0&quot; dur=&quot;5:02&quot; />
    • <img id=&quot;image_2&quot; src=&quot;Slide2.jpg&quot; region=&quot;main&quot; begin=&quot;5:02&quot; dur=&quot;59&quot; />
    • <img id=&quot;image_3&quot; src=&quot;Slide3.jpg&quot; region=&quot;main&quot; begin=&quot;6:01&quot; dur=&quot;26&quot; />
    • </par>
    • </body>
    • Example
  • More SMIL code
    • <smil xmlns=&quot;http://www.w3.org/2001/SMIL20/Language&quot; xml:lang=&quot;en&quot;>
    • <head>
    • <layout>
    • <root-layout height=&quot;450&quot; width=&quot;750&quot; background-color=&quot;white&quot;/>
    • <region id=&quot;main&quot; title=&quot;Main&quot; width=&quot;600&quot; height=&quot;450&quot; fit=&quot;fill&quot;/>
    • <region id=&quot;nav&quot; title=&quot;Navigation&quot; width=&quot;150&quot; height=&quot;450&quot; left=&quot;600&quot;/>
    • </layout>
    • </head>
    • <body>
    • <par>
    • <audio src=&quot;emmott.mp3&quot; />
    • <img id=&quot;image_1&quot; src=&quot;Slide1.jpg&quot; region=&quot;main&quot; begin=&quot;0&quot;/>
    • <img id=&quot;image_2&quot; src=&quot;Slide2.jpg&quot; region=&quot;main&quot; begin=&quot;1:25&quot; />
    • <img id=&quot;image_3&quot; src=&quot;Slide3.jpg&quot; region=&quot;main&quot; begin=&quot;2:06&quot; />
    • <textstream src=&quot;nav.rt&quot; region=&quot;nav&quot; begin=&quot;0s&quot; />
    • </par>
    • </body>
    • </smil>
    Example
  • Accessibility
    • ‘ alt’ and ‘longdesc’ text attributes
    • <body>
    • <par>
    • <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;/>
    • <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;/>
    • <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;/>
    • … .
  • Accessibility
    • Captioning
      • Makes SMIL accessible to those with difficulty 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=&quot;emmott/transcript.rt&quot; region=&quot;text&quot; begin=&quot;0s&quot;/>
    • Example
  • <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
  • <switch>
    • <switch>
    • <audio src=&quot;192k.mp3&quot; system-bitrate=192000&quot;/>
    • <audio src=&quot;128k.mp3&quot; system-bitrate=&quot;128000&quot;/>
    • <audio src=&quot;basic.mp3&quot; system-bitrate=&quot;28800&quot;/>
    • </switch>
    • <switch>
    • <audio src=&quot;french.mp3&quot; system-language=&quot;fr&quot;/>
    • <audio src=&quot;german.mp3&quot; system-language=&quot;de&quot;/>
    • <audio src=&quot;english.mp3&quot; system-language=&quot;en&quot;/>
    • </switch>
  • More SMIL
    • Metadata
    • Hyperlink elements
      • <a href=&quot;http://www.apple.com/&quot; show=&quot;new&quot; >
      • <img src=&quot;poster.jpg&quot; region=&quot;r1&quot; dur=&quot;00:05&quot; />
      • </a>
    • Complex timing controls
    • Slide transition effects
      • Fade-in’s, Cross fades, Transparency
    • Zoom
    • Animation
    • Pre-fetch
  • Non-standard SMIL
    • Real Player Navigation
      • Example
    • <textstream src=&quot;nav.rt&quot; region=&quot;nav&quot; begin=&quot;0s&quot; /> added to SMIL file
    • Textstream .rt file:
      • <window>
      • <time begin=&quot;0:00.0&quot;/>
      • <clear/>
      • <p>Menu</p>
      • <a href=&quot;command:seek(0:0)&quot; target=&quot;_player&quot;>Introduction</a><br/>
      • <a href=&quot;command:seek(1:25)&quot; target=&quot;_player&quot;>Copyright and credits</a><br/>
      • ……
      • </window>
  • 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
  • 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/index.html
    • SMIL del.icio.us http://del.icio.us/bias/SMIL