SMIL Synchronized Multimedia Integration Language

Presentation Outline XML SMIL Players Editors Trends

What is XML? The eXtensible Markup Language is really a meta-language. It is used to create markup languages, such as HTML. Although it is very similar to SGML, being a subset, it differs in two main ways: it is much more compact and efficient than SGML and is Web-native.

Definition of XML Extensible Markup Language (XML) is the universal language for data on the Web. It gives developers the power to deliver structured data from a wide variety of applications to the desktop for local computation and presentation. XML allows the creation of unique data formats for specific applications. It is also an ideal format for server-to-server transfer of structured data.

How XML is similar to HTML XML uses tags just like HTML, but those tags don’t define text formatting. Instead the tags are used to create data structures. Let’s see some examples…

Examples of HTML and XML HTML Code: This is bold text… XML Code: Bush Using our own custom tag named “President”, we have stored a small piece of information.

Detailed Example XML Documents can be organized in a hierarchal fashion. Each tag or node can have “sub” nodes under it. Clinton, Bill 58 2 Any number of nodes can be created under any given node. But each node must be “closed” using a closing tag, like

XML Elements A “Node” in an XML document is known as an Element. An XML document can have any number of elements. For example we could store information about 10 Presidents in a document.

Multiple Elements Mitsubishi Eclipse 1998 Pontiac Sun Fire 1997 Nissan X-Terra 2000 Yes

Attributes Besides having “sub-elements”, every element can also have what are known as Attributes. Attributes are declared “inside” the tag. You may already know how to use attributes if you have used the or tags in HTML. For example: click here

XML Attributes Here’s an example of an XML element with an Attribute… Dodge We could make any element an attribute…For example, Make and Year could also have been made attributes. However you usually want only some unique characteristic of the element to be an attribute. Examples: Serial #, SKU#, Stock symbol, Product ID etc.

A Complete Example Rachel McKinnon Checking /12/1999 Credit Card /1/1997

Try this one yourself … Company Name SymbolStock Price Recent News Stories MicrosoftMSFT51.45Microsoft introduces Windows XP Bill Gates… Amazon.comAMZN19.60Amazon.com announces new e-commerce services at conference in NYC.

MSFT Microsoft MS will be introducing a new… According to Bill Gates…

MSFT MS will be introducing a new… According to Bill Gates…

XML Editors

Make an XML Declaration XML Document Type Declaration: a mechanism that allows XML authors to communicate data to document readers (such as browsers). This data includes: markup language, version, standalone document declaration and character encoding.

XML document type declarations

<? These character open the declaration. xml This statement differentiates XML from other document formats, such as SGML and HTML. version This statement differentiates between versions of XML. Default Value: "1.0"

standalone The Standalone Document Declaration allows the document author to specify whether a document-type-definition is to be used. Possible Values: "yes", "no" encoding Ignore this feature unless you want to use another type of character encoding other than UTF-8. Default Value: "UTF-8" ?> These characters close the declaration.

What is UTF-8? UTF-8 stands for Unicode Transformation Format-8. It is an octet (8-bit) lossless encoding of Unicode characters.

XML DTD (Detail) <!ELEMENT Elements state their relationships with other elements, so that document readers understand how documents, complying to the DTD, work.

+,*,? These symbols represent the allowed use of elements. For example, if "+" is associated with an element, then that element must be used at least once and can be used limitlessly. +: required and multiple *: optional and multiple ?: optional but singular

#PCDATA This statement, to a document reader, means text. If a DTD designer wants text to be allowed in a document, "#PCDATA" will be used in the DTD to state that.

Example DTD (Document Type Definition) Novel Document Type ]>

External DTD Hello, world!

Internal DTD ]> Hello, world!

XML DTD ]>

XML Resources Microsoft Developer Network (MSDN) The BizTalk Framework IBM’s XML Zone W3C XML Standards Body XSL Introduction

XML Example; FIRST.XML Empire Burlesque Bob Dylan USA Columbia

Title Artist FIRST.XSL

SMIL SMIL is a markup language that lets you control the location, timing and sequence of still images, video, and sound for use in web-based applications. W3 Specification

SMIL :-) SMIL allows the integration of a set of independent multimedia objects into a synchronized multimedia presentation. The objects may include Real Text Real Pix Real Audio Real Video

SMIL :-) A Simple SMIL PresentationSMIL Presentation Another Example

SMIL Presentations The SMIL presentation included A Real Text File for the Details (text) A Real pix File for the pictures (stills) Audio Files

Real Text Files with extension. rt Use all HTML Tags along with some of its own Can have hyperlinks to other HTML documents as well as time control tags.

Window Types RealText provides a number of window styles that you can choose depending on how you want to display text. Generic Scrolling News Ticker Tape Marquee Marquee

The real Text file starts with the Tag A typical window tags looks like <WINDOW TYPE = generic duration = "02:00" scrollrate="pixels per second" crawlrate="pixels per second" height = 449 width = 218 BGCOLOR = ”white” link= ”blue" LOOP = true> Window Tag Attributes

Text Tags Time and Position Tags The following tags affect when and where the text appears within the window. The tag values are in 24-hour format, where dd is days, hh is hours, mm is minutes,...

Layout and AppearanceTags Much as in HTML, the following tags let you define the layout of RealText in the RealPlayer window.... … pre, u, center,etc

Command Tags The following tags let you embed RealPlayer commands in your presentation or modify the default streaming behavior.... You can include the target="_player” attribute to launch the new stream in the current RealPlayer window. If you do not use the target attribute or you specify target="_browser", the linked URL opens in a Web browser window.

Generic Generic – Real Text Mary had a little lamb, little lamb, little lamb. Mary had a little lamb, whose fleece was white as snow. Everywhere that Mary went, Mary went, Everywhere that Mary went, That lamb was sure to go.

Real Text acsdetails.rt Text File for acsdetails acsmain.rt text file for acsmain Summary of Window tags ( of Window tags Summary of Text Tags ( of Text Tags

Real Pix Files with extension. rp start with a tag can be used to set images in a time line

Real Pix RealPix can stream images in these formats: GIF87 and GIF89 (.gif) RealPix does not support animated GIFs. JPEG (.jpg) Note That no Bitmaps can be used (

RealPix tags and attribute names must be lowercase. A tag that does not have a corresponding end tag closes with a forward slash (/):. Real Pix

Layout

Head and Attributes All information in the file occurs between an opening tag and a closing tag. This is the only tag that uses an end tag.

Head tag The tag defines standard header information such as title, author, and copyright. It also sets necessary parameters such as the presentation duration and streaming bit rate.

Layout of the and tags <head bitrate="8000” width = "218” height="151" timeformat = "dd:hh:mm:ss.xyz" duration = "02:00" title = "Applied Computer Science Department" author ="Joaquin Vila" copyright ="(c) 1999 Illinois State University" url =" aspect ="true"/>

Bandwidth Bandwidth is the upper limit on how much data per second can pass through a network connection. Targeting a network connection’s bandwidth is crucial for delivering a successful streaming media presentation. Web users with a 28.8 Kbps modem need to view presentations that require less than 28.8 Kbps of data per second. One of the first steps in building a presentation is to target a bandwidth and construct the content with that connection speed in mind.

Bandwidth you can choose to generate encoding in both slow speed modems and fast T1 networks. You must select target bit rates for audio, pictures, text, and video, then add them up to see if they will fit into this bandwidth.

Choosing a Target Bandwidth A presentation's total bit rate must be at or below the target bit rate. The total bit rate is comprised of two main parts: The maximum bit rate consumed by all streaming clips. Overhead. Save about 25% of the target bit rate for noise, data loss, and packet overhead. Overhead depends on the type of connection. A modem connection typically has more overhead than an ISDN or T1 line.

Bit Rates Available for Streaming Clips

Image tag For each image you use in the RealPix presentation, you add an tag after the tag. The tag provides the image file location and assigns a unique handle number to the image. An tag looks like this:

Transitions: Fill Tag The tag displays a colored rectangle in the display window. A tag looks like this:

The tag creates a gradual transition from the currently displayed color or image to another image. A tag looks like this: fadein tag

fadeout tag The tag defines a transition from an image to a color.

Crossfade The tag creates a transition from one image to another Crossfade

Wipe The tag creates a transition from one image to another, either by covering the displayed image or by pushing it out of the way with a sliding effect.

View Change The tag defines a pan or a zoom. Note that does not specify an image. The view change always affects the image currently in the display window.

Lets look at our File Now Acs Pictures Code Sample The next task would be to combine the text pictures and audio in a SMIL Presentation

<headbitrate="80000" width="218" height="151" timeformat="dd:hh:mm:ss.xyz" duration="02:00" title="Applied Computer Science Department" author="Joaquin Vila" copyright="(c) 1999 Illinois State University" url=" aspect="true"/>

SMIL Synchronized Multimedia Integration Language (SMIL) was introduced in July of HTML + SMIL HTML + TIME SMIL 2.0

SMIL :) Like an HTML file, a SMIL file begins with a tag identifying it as a SMIL file, and contains and sections. The section contains information describing the appearance and layout of our presentation The section contains the timing and content information.

Head section The Head section contains information about the presentation

The Document Head The LAYOUT element determines how the elements in the document's body are positioned on an abstract rendering surface either visual or acoustic)

Layout The head has a layout tag which defines the various windows in which the files are going to be displayed

a animation audio img par seq switch text textstream Video The "body" element can contain the following Body and its tags

A body of ITK SMILITK SMIL <img id="acs01" src="acs01.rp" region="acs01_Region" system-bitrate="12000“ repeat="4"/> <textstream id="acsdetail" src="acsdetail.rt“ region="acsdetail_Region“ system-bitrate="599" repeat="4"/>

The Seq Tag When the media objects like img, audio, video are the children of the seq tag they play in a sequential order

The par Element The children of a par element can overlap in time. Element Attributes abstract begin par I I 6s a I I

The switch Element The switch element allows an author to specify a set of alternative elements from which only one acceptable element should be chosen. An element is selected as follows: the player evaluates the elements in the order in which they occur in the switch element. The first acceptable element is selected at the exclusion of all other elements within the switch.

Hyperlinking Elements The link elements allows the description of navigational links between objects. SMIL provides only for in-line link elements. Links are limited to uni-directional single-headed links. All links in SMIL are actuated by the user. SMILs can be linked to X/HTML pages as well as to other SMIL presentations

Final SMIL Presentation ACS Department Code Other Examples Computer

ACSCD.SMI

htext.rt <WINDOW TYPE=generic duration="5:00.0" scrollrate=0 height=320 width=320 BGCOLOR="#000066" link="#FFFFCC" LOOP=true> Please, make your selection Definitions for:

htext.rt Monitor CD

Amaya: W3C's Editor/Browser browser/authoring tool that allows you to publish documents on the Web. It is used to demonstrate and test many of the new developments in Web protocols and data formats. Given the very fast moving nature of Web available on both Unix and Windows '95/NT platforms.

SMIL Generator