Defining Structure Metadata and Layout


Published on

Building the outline

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Defining Structure Metadata and Layout

  1. 1. 5 Defining Structure, Metadata and Layout Building the Outline
  2. 2. 5.1 About a SMIL File <ul><li>Can be read by humans! </li></ul><ul><li>Create with any text editor </li></ul><ul><li>Depends on the language implementation </li></ul><ul><ul><li>Host Language provides self-contained file </li></ul></ul><ul><ul><ul><li>Basic structure is similar to HTML </li></ul></ul></ul><ul><ul><ul><li>Filename extension is .smil </li></ul></ul></ul><ul><ul><ul><li>Using .smi can cause problems with MIME types </li></ul></ul></ul><ul><ul><li>Integration Set embeds SMIL timing and synchronisation within HTML </li></ul></ul><ul><ul><ul><li>Basic structure is HTML </li></ul></ul></ul><ul><ul><ul><li>SMIL integration ignored by non-supporting browsers </li></ul></ul></ul><ul><ul><ul><li>Filename extension is . htm .html </li></ul></ul></ul>
  3. 3. 5.2 Design Guidelines <ul><li>Always observe copyright law </li></ul><ul><ul><li>No rights to media under Copyright Licensing Agency agreements for UK HEI </li></ul></ul><ul><ul><li>For audio check with Mechanical Copyright Protection Society </li></ul></ul><ul><ul><li>Copyright violation can be very costly </li></ul></ul><ul><li>Create images, video and audio </li></ul><ul><ul><li>Consult with Audio Visual Services (AVS) </li></ul></ul><ul><li>Do initial design on paper or in drawing package </li></ul><ul><li>Assemble assets in an organised file system </li></ul><ul><li>Note down ideas seen on TV and in other media </li></ul><ul><li>Remember to backup work frequently! </li></ul>
  4. 4. 5.3 SMIL Authoring Rules & Guidelines <ul><li>Comment and indent to aid readability </li></ul><ul><ul><li><!-- use HTML comments --> </li></ul></ul><ul><li>SMIL is an XML based language so case matters </li></ul><ul><li>Elements and attributes use lower or camel case ( camelCase ) </li></ul><ul><ul><li><layout> <fadeColor> </li></ul></ul><ul><li>Exceptions such as <root-layout> </li></ul><ul><li>Attribute values are enclosed in “double quotes” </li></ul><ul><ul><li>dur=“25s” </li></ul></ul><ul><li>Binary elements have a closing element </li></ul><ul><ul><ul><li><par></par> </li></ul></ul></ul><ul><li>Unary elements must close with a forward slash </li></ul><ul><ul><ul><li><region id=“”… /> </li></ul></ul></ul><ul><li>Some elements can be both binary or unary </li></ul><ul><ul><ul><li><t:img> … </t:img> or <t:img …/> </li></ul></ul></ul><ul><li>Observe case in filepath names </li></ul><ul><ul><li><audio src=“edlectures/SEAMUS.rm”> not the same as </li></ul></ul><ul><ul><li><audio src=“edlectures/seamus.rm”> </li></ul></ul>
  5. 5. 5.4 Structure of a SMIL file <ul><li>xmlns attribute defines the XML namespace </li></ul><ul><li>Not required for SMIL 1.0 applications </li></ul><ul><li>URL used as a unique identifier it is not accessed by the client </li></ul><ul><li><head> section is optional – usually included </li></ul><ul><li><meta> tags used to provide metainformation for clients </li></ul><ul><li><body> lists content and order of its presentation </li></ul><smil xmlns =&quot;;> <head> <!-- Metadata definitions go here --> <meta … /> <layout> <!– Layout of presentation is defined here --> </layout> </head> <body> <!– Timing and content of presentation defined here --> </body> </smil>
  6. 6. 5.5 QuickTime SMIL Extensions <ul><li>Must declare if presentation uses QT SMIL extensions </li></ul><ul><li>QuickTime SMIL Extensions are documented at </li></ul><ul><ul><li> </li></ul></ul><ul><li>Complete QuickTime and SMIL documentation at </li></ul><ul><ul><li> </li></ul></ul><ul><li>URL used as a unique identifier </li></ul><ul><li>Identifier is not accessed by the client </li></ul><ul><li>Some attributes set for the <smil> element </li></ul><ul><ul><li>autoplay , next </li></ul></ul><ul><li>Other attributes are set for media elements: <video>, <img> and <audio> </li></ul><ul><ul><li>chapter , immediate-instantiation </li></ul></ul><smil xmlns:qt= http:// ” qt:autoplay=“true” qt:next=“part6.smil”> ... </smil>
  7. 7. 5.6 RealNetwork SMIL Extensions <ul><li>RealNetworks provides an extensive list of extensions to SMIL 2 </li></ul><ul><li>Used in addition to standard namespace declaration for SMIL2 </li></ul><ul><li>Must declare namespace(s) if SMIL code uses RN extensions </li></ul><ul><li>Declaration does not require that namespace is used </li></ul><ul><li>Prefix relates attribute to a specific namespace </li></ul><ul><ul><li>rn : calls extensions for effects </li></ul></ul><ul><ul><li>cv : calls extensions for checking the version of the player </li></ul></ul><ul><li>Can be used to: </li></ul><ul><ul><li>Switch between SMIL1 and SMIL2 content based on client version or screen resolution </li></ul></ul><ul><ul><li>Manipulate image transparency </li></ul></ul><ul><li>Referenced as prefix:attribute=“value” e.g. rn:mediaOpacity=“50%” </li></ul><ul><li>Can use an alternative prefix to “rn” for calling extensions </li></ul><ul><li>Extensions are documented in RealNetworks Production Guide (on CD) </li></ul><ul><ul><li>Not documented in a single reference </li></ul></ul><smil xmlns=&quot;; xmlns:rn=“ ” xmlns:cv=“ http:// ”> ... </smil>
  8. 8. 5.7 Metainformation <ul><li>Similar to <meta> element in HTML </li></ul><ul><li>Used by SMIL clients to display information about presentation </li></ul><ul><ul><li>RealONE: title, author, copyright </li></ul></ul><ul><ul><li>QuickTime: author and content </li></ul></ul><ul><li>SMIL 1 defines a minimum set of attributes </li></ul><ul><li>SMIL 2 uses <metadata> element to include W3C’s RDF statements </li></ul><ul><li>No presently supported in SMIL clients </li></ul><ul><li>RDF metadata can be several times larger than the SMIL </li></ul><ul><li>Overrides metadata encoded in the media clip </li></ul><ul><li>Consumed by search engine robots and used in displaying search results </li></ul><head> <meta name=&quot;author&quot; content=&quot;John A. Smith&quot; /> <meta name=&quot;title&quot; content=&quot;South West Coastal Path&quot;/> <meta name=&quot;copyright&quot; content=&quot;(c) 2000 John A. Smith&quot; /> <meta name=&quot;abstract&quot; content=&quot;A presentation using images video and audio to illustrate the beauty of the South West Coastal Path&quot; /> </head>
  9. 9. 5.8 Layout <ul><li>Single <root-layout> for presentation </li></ul><ul><li>Provide id to allow manipulation and animation </li></ul><ul><li>Sizes are defined in pixels </li></ul><ul><li>Defines the size of the client playback window </li></ul><ul><ul><li>Smallest computer screen is 640x80 (VGA) </li></ul></ul><ul><ul><li>Others are 800x600, 1024x768 and 1280x1024 </li></ul></ul><ul><li>Set a background colour: “red”, #FF0000, rgb(255,0,0) </li></ul><ul><ul><li>SMIL 1 background-color (QuickTime) </li></ul></ul><ul><ul><li>SMIL 2 backgroundColor </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>Real ONE </li></ul></ul><ul><ul><li>QuickTime </li></ul></ul><layout> <root-layout id=&quot;main&quot; backgroundColor=&quot;# nnnnn &quot; width=&quot;640&quot; height=&quot;480&quot; /> </layout>
  10. 10. 5.8.1 Layout (continued) <ul><li><topLayout> defines secondary top-level windows </li></ul><ul><li>Sizes are defined in pixels </li></ul><ul><li>Only implemented in RealONE player </li></ul><ul><ul><li>No control over window placement on display surface </li></ul></ul><ul><ul><li>Audio continues to play after window is closed </li></ul></ul><ul><li>Open second window at start of presentation (default) </li></ul><ul><ul><li>Use whenActive and whenNotActive attributes </li></ul></ul><ul><li>Can contain any number of defined regions </li></ul><ul><li>Examples </li></ul><ul><ul><li>RealONE default behaviour </li></ul></ul><ul><ul><li>RealONE whenActive behaviour </li></ul></ul><layout> <root-layout id=&quot;main&quot; backgroundColor=&quot;#nnnnn&quot; width=&quot;640&quot; height=&quot;480&quot; /> <topLayout id=“vidpanel” width=“320” height=“240” backgroundColor=“white”> <region id=“subtitles” … /> </topLayout> … </layout>
  11. 11. 5.8.2 Switching Layouts <ul><li><switch> can be used to swap layouts depending on client characteristics </li></ul><ul><li>Possible uses </li></ul><ul><ul><li>Language preference settings </li></ul></ul><ul><ul><li>Adapt presentation to network condition of client </li></ul></ul><ul><ul><li>Show subtitles to accompany video clip </li></ul></ul><ul><ul><li>Show text version of audio clip </li></ul></ul><ul><li>Examples </li></ul><ul><ul><li>Real ONE switch on systemLanguage attribute value </li></ul></ul><switch> <!-- Layout for English-UK clients --> <layout systemLanguage =“en”> … </layout> <!-- Layout for French-France clients --> <layout systemLanguage=“fr”> … </layout> </switch>
  12. 12. 5.9 Regions and Positioning <ul><li>Default backgroundColor is “transparent” </li></ul><ul><li>backgroundColor=“inherit” uses the <root-layout> colour </li></ul><ul><li>Position of region defined relative to parent using: </li></ul><ul><ul><li>top , bottom , left and right attributes </li></ul></ul><ul><ul><li>Can be pixel or % (percentage) values </li></ul></ul><ul><li>Volume of an audio region can be set </li></ul><ul><ul><li>0% is silent, 100% is full volume and 200% is twice full volume </li></ul></ul><ul><ul><li>Audio level is relative to volume setting of the playback device </li></ul></ul><layout> <root-layout id=&quot;main&quot; backgroundColor=&quot;#FF0000&quot; width=&quot;640&quot; height=&quot;480&quot; /> <region id=&quot;video&quot; width=&quot;320&quot; height=&quot;240&quot; top=&quot;120&quot; left=&quot;50&quot; /> <region id=&quot;title&quot; width=&quot;150&quot; height=&quot;40&quot; top=&quot;300“ left=&quot;50“backgroundColor=&quot;teal&quot; /> <region id=&quot;audio&quot; soundLevel=&quot;50%&quot; /> </layout>
  13. 13. 5.9.1 Registration Points <ul><li>Purpose is to support precise positioning of content </li></ul><ul><li>Can be use in two ways: </li></ul><ul><ul><li>Define regPoint in the clip source tag </li></ul></ul><ul><ul><li>Define regPoint as part of the layout and assign to the clip (Recommended) </li></ul></ul><ul><li>regPoint defines a precise location within a region </li></ul><ul><ul><li>Set of typical values: </li></ul></ul><ul><ul><ul><li>topLeft, topMid, topRight, midLeft, center, midRight, bottomLeft, bottomMid and bottomRight </li></ul></ul></ul><ul><ul><li>regpoint values can also be given as x,y coordinates from top-left corner </li></ul></ul><ul><li>regAlign positions the content in relation to the regPoint </li></ul><ul><ul><li>Uses same values as regPoint </li></ul></ul><ul><li>Interaction of regPoint , regAlign and fit attributes is complex </li></ul><ul><ul><li>See W3C standard for explanation </li></ul></ul><ul><li>Use RealNetworks examples </li></ul><layout> <!-- Define registration points --> <regPoint id=&quot;centre&quot; left=&quot;50%&quot; top=&quot;50%&quot; regAlign=&quot;center&quot; /> </layout> … <textstream id=&quot;intro1&quot; systemLanguage=&quot;en&quot; src=&quot;text/intro.rt&quot; region=&quot;screen&quot; regPoint=&quot;center&quot; regAlign=“center” begin=&quot;panel4.begin+3s&quot; />
  14. 14. 5.10 Layering and Fitting <ul><li>Exactly the same as the z-index in the CSS2 specification </li></ul><ul><li>Root window has a default value of “0” (zero) </li></ul><ul><li>z-index attribute defines the layering of overlapping regions </li></ul><ul><li>Values can be positive or negative numbers </li></ul><ul><ul><li>z-index=“5” or z-index=“-4” </li></ul></ul><ul><ul><li>Use contiguous values e.g. 10, 20, 30, 40 etc. </li></ul></ul><ul><li>Higher values display over lower values </li></ul><ul><li>fit attributes defines how visual media is “fitted” into a region </li></ul><ul><li>Possible values are: fill hidden meet scroll slice </li></ul><layout> <root-layout id=&quot;main&quot; backgroundColor=&quot;#nnnnn&quot; width=&quot;640&quot; height=&quot;480&quot; /> <region id=&quot;video&quot; width=&quot;320&quot; height=&quot;240&quot; top=&quot;120&quot; left=&quot;50&quot; z-index=&quot;1“ fit=&quot;&quot;/> <region id=&quot;title&quot; width=&quot;150&quot; height=&quot;40&quot; top=&quot;300&quot; left=&quot;50“ backgroundColor=&quot;teal&quot; z-index=&quot;2&quot;/> <region id=&quot;audio&quot; soundLevel=&quot;50%&quot; /> </layout>
  15. 15. 5.11 z-index and regions <ul><li>Defines root region </li></ul><ul><li>Image region with z-index of “0” (zero) </li></ul><ul><li>Video region with z-index of “1” </li></ul><ul><li>Image region acts as a backdrop </li></ul><ul><li>Video is layered over the backdrop </li></ul><ul><li>Example </li></ul><layout> <root-layout width=&quot;280&quot; height=&quot;220&quot;/> <region id=&quot;image&quot; top=&quot;10&quot; left=&quot;10&quot; width=&quot;260&quot; height=&quot;200&quot; z-index=&quot;0&quot;/> <region id=&quot;video&quot; top=&quot;20&quot; left=&quot;20&quot; width=&quot;240&quot; height=&quot;180&quot; z-index=&quot;1&quot;/> </layout>
  16. 16. 5.12 fit attribute values <ul><li>fill </li></ul><ul><ul><li>Scale the object's height and width independently so that the content just touches all edges of the box. </li></ul></ul><ul><li>hidden </li></ul><ul><ul><li>If the intrinsic height (width) of the media object element is smaller than the height (width) defined in the region element, render the object starting from the top (left) edge and fill up the remaining height (width) with the background color. </li></ul></ul><ul><ul><li>If the intrinsic height (width) of the media object element is greater than the height (width) defined in the region element, render the object starting from the top (left) edge until the height (width) defined in the region element is reached, and clip the parts of the object below (right of) the height (width). </li></ul></ul><ul><li>meet </li></ul><ul><ul><li>Scale the visual media object while preserving its aspect ratio until its height or width is equal to the value specified by the height or width attributes, while none of the content is clipped. The object's left top corner is positioned at the top-left coordinates of the box, and empty space at the right or bottom is filled up with the background color. </li></ul></ul><ul><li>slice </li></ul><ul><ul><li>Scale the visual media object while preserving its aspect ratio so that its height or width are equal to the value specified by the height and width attributes while some of the content may get clipped. Depending on the exact situation, either a horizontal or a vertical slice of the visual media object is displayed. Overflow width is clipped from the right of the media object. Overflow height is clipped from the bottom of the media object. </li></ul></ul><ul><li>scroll </li></ul><ul><ul><li>A scrolling mechanism should be invoked when the element's rendered contents exceed its bounds. </li></ul></ul><ul><li>Example </li></ul>
  17. 17. 5.13 Embedded SMIL: Structure <ul><li>XHTML+TIME brings SMIL2 behaviours to HTML in IE5.5 and IE6 </li></ul><ul><ul><li>Declares the XML Namespace “t” (for time) </li></ul></ul><ul><ul><li>URN provides a unique and persistent identifier for it </li></ul></ul><ul><ul><li>Declare a CSS attribute for HTML elements to use “time2” behaviour </li></ul></ul><ul><ul><li>Import the time2 behaviours into the namespace </li></ul></ul><ul><li>Recipe to include in the HEAD of the HTML document </li></ul><ul><li>Could be included dynamically using SSI, PHP, ASP etc. </li></ul><ul><li>Keep a local HTML+TIME template handy </li></ul><html xmlns:t =&quot;urn:schemas-microsoft-com:time“ > <head> <style> .time {behavior: url(#default#time2);} </style> <?import namespace=t urn=&quot;urn:schemas-microsoft-com:time“ implementation=&quot;#default#time2&quot; /> </head> <body> <!--Content goes here --> </body> </html>
  18. 18. 5.14 Metainformation <ul><li>Use HTML <meta> tags as in any other web pages </li></ul><ul><li>Check the organisation’s metadata standards </li></ul><ul><li>Greater range of metadata supported than in dedicated SMIL aware media players </li></ul><ul><li>Consumed by search engine robots and used in the display of search results </li></ul><ul><li>Include automatically as part of a dynamically generated web page </li></ul><head> <meta name=&quot;author&quot; content=&quot;John Smith&quot;> <meta name=&quot;description&quot; content=&quot;A SMIL presentation of the SWCP&quot;> <meta name=&quot;keywords&quot; content=&quot;SMIL, smil, walking, coastal, path&quot;> </head>
  19. 19. 5.15 Layout and Positioning <ul><li>Layout is controlled using Cascading Style Sheets (CSS2) </li></ul><ul><li>CSS cannot define the size of a browser window </li></ul><ul><ul><li>Call a javascript function for </li></ul></ul><ul><li><div> is used to declare discreet division in the HTML page </li></ul><ul><li>class attribute is used call time behaviours </li></ul><ul><li>Use the style attribute to define position </li></ul><ul><ul><li>position:absolute </li></ul></ul><ul><ul><li>position:relative </li></ul></ul><ul><li>Use top and left for most positioning </li></ul><ul><ul><li>right, bottom, width and height can be used </li></ul></ul><ul><li>Position with pixel values for consistency </li></ul><ul><ul><li>Other values can be used – em pt in mm </li></ul></ul><ul><li>Provide an id to permit reference to the div </li></ul><ul><li>Example </li></ul><body> . . . <div class=&quot;time&quot; id=&quot;intro&quot; style=&quot;position:absolute; left:50px; top:50px&quot;> <p>South West Coastal Path: Summer 2000</p> </div> . . . </body>
  20. 20. 5.15.1 Using Cascading Style Sheet <ul><li>Example </li></ul>.txtPanel /* Define style for text panel */ { /* This can be called from class attribute */ position:absolute; top:90px; /* Use pixel values */ left:420px; width:200px; height:260px; background-color:#silver; /* Background is white */ z-index:2 /* Set z-index for this style */ } #rootContainer /* Define style for root window */ { /* Applied to element with corresponding id attribute value */ position:absolute; top:0px; left:0px; width:640px; height:480px; background-color:#99ccff; z-index:0 /* Set z-index for this style */ }
  21. 21. 5.16 Layering and Fitting <ul><li>z-index value defines the layering of overlapping <div> elements </li></ul><ul><li>Value is a point on a z-axis extending towards and away from the viewer </li></ul><ul><li>Higher values are displayed over lower values </li></ul><ul><li>Values can be positive or negative numbers: “5” or “-4” </li></ul><ul><ul><li>Progression using sequential ordering 1,2,3 or 10, 20, 30 etc. is suggested </li></ul></ul><ul><li>Exactly the same as the z-index in the CSS2 specification </li></ul><ul><li>fit attribute is not available </li></ul><ul><li>Use CSS2 elements and attributes supported in IEv6 </li></ul><ul><ul><li>overflow overflowx and overflowy </li></ul></ul><ul><ul><li>Values are: visible scroll hidden auto </li></ul></ul><ul><ul><li>See MSDN Library for further details </li></ul></ul><ul><li>Examples </li></ul><body> <t:img class=&quot;time&quot; id=&quot;swcpimg1&quot; begin=&quot;2&quot; dur=&quot;7&quot; z-index=&quot;2&quot; src=&quot;images/img2045.jpeg“ style=&quot;position:absolute; top:120px; left:140px&quot;/> </body>