... Advanced Web Programming ...

C7. Web Multimedia Applications. SMIL and SVG.

A Multimedia Application combines various types of multimedia data like text, images, sounds, animation, and video to enhance the user experience. Most of the web multimedia applications are based nowadays on HTML, CSS and various client-side and server-side scripting technologies. However, dedicated technologies has also staring to appear - SMIL, WCMS or SVG.

SMIL
The SMIL (Synchronized Multimedia Integration Language) language is a dedicated XML make-up language standardized by W3C. The current version of SMIL is v. 3.0. It became a W3C recommendation in December 2008. It facilitates creation of Web multimedia presentation. SMIL contains markup for timing, layout, animations, visual transitions, and media embedding, among other facilities. Several companies, like Macromedia, Adobe, Microsoft, or Real Networks already add support for this standard in their products.
A SMIL document is similar in structure to an HTML document. Like a usual Web page, it has two main sections: head and body. The <head> section contains layout and metadata information. The <body> section contains data references and timing references. It includes a combination of entities generally defined by three structural tags (<seq>, <par> and <excl>). The <seq> tag can defines simple sequential playlists. The <par> tag play areas and multiple layers in parallel. Finnaly, the <excl> tag drives exclusives events triggered by interrupts.
SMIL uses URLs to specify the media objects. It allows reuse of objects distributed over different storage servers. Objects transfers have associated a parameter for bandwidth specification.
An exemple of a SMIL documents structure is:
<smil>
 <head>
  <meta> meta-information </meta>
  <layout>
   <-- document layout design -->
  </layout>
 </head>
 <body>
   <-- sincronized multimedia components -->
 </body>
</smil>
The <layout> section allows scene layout design. All multimedia entities (components) defined in the <body> section (usualy by their URLs), have assigned names (handlers). They can take various forms: images, animations, video streams, audio or video clips, text files, flash files and other formats for external players.
SMIL is organized in several modules:
• Animation - includes elements for placing animation into the presentation timeline. Also allows combining the effects of multiple animations
• Content Control - expands on the <switch> element and increases the control of presentation flow and format
• Layout - extends the initial <layout> capabilities with additional support
• Linking - amplifys the media hyperlinking capability
• Media Object - enhances the calling of media objects (such as animation, audio, video, text)
• Metainformation - adds more descriptive power to the <meta> element
• Structure - provides additional attributes, which allows greater presentation control
• Timing and Synchronization - based on the <seq> and <par> elements, Timing and Synchronization module offers more timeline control. The <excl> element for playing an exclusive set of objects is also included here.
• Time Manipulations - offers control of time characteristics as the speed or rate of a media object. This is a particularly important module for implementing animation in the timeline.
• Transition Effects - adds the capability to transition between one medias object to another. This module adds the capability to offer standard wipes and fades between media objects.
SMIL presentation examples could be found at Ludricum.  

CMS. Joomla
A Content Management System (CMS) is a Collection of Procedures used to manage work flow in a collaborative environment. In a CMS, data can be defined as nearly anything: documents, movies, pictures, phone numbers, scientific data, and so forth. CMSs are frequently used for storing, controlling, revising, semantically enriching, and publishing documentation. (Wiki)
Joomla is an open-source Content Management System (CMS).
Exampls of Joomla applications:
• Corporate Web sites or portals
• Online magazines, newspapers, and publications
• Online reservations
• Government applications
• Community-based portals
• Educational Web sites
• Personal homepages
Joomla is so easy to use, for peoples with limited technical skills. However, Joomla Application Framework makes it easy for developers to create sophisticated add-ons that extend the power of Joomla into virtually unlimited directions using the PHP language.
Joomla bring the user content and a page template together to produce webpages. One of the first tasks is to modify one of the templates that comes with Joomla to fit the application needs. Then, edit some Joomla sections, cathegories and articles. An article represents some written information intended to be published on the site. Sections and categories in Joomla provide an optional method for organizing articles. A Section contains one or more categories, and each Category can have articles assigned to it. One Article can only be in one Category and Section. Categories are also used for other components, including Banners, Contacts, News Feeds, and Weblinks.

SVG
SVG (Scalable Vector Graphics) is an XML-based language that allows defining vector images for the Web. The main advantage of vector format compared with a bitmap (gif, jpg, png) is the posibility to zoom, transform or rotate the image without losing quality. In addition, to describing an equvalent image the file size is less than for the equivalent bitmap file. Moreover, image description is editable with normal text editors and can be printed at any resolution with similar results.
A number of companies like Sun Microsystems, Adobe, Apple, IBM and Kodak have been actively involved in developing this standard. As the result, the W3C standard is currently supported by many applications and browsers. In addition Adobe provides a plug-in (Adobe SVG Viewer) to add support for non-suported browsers.
A SVG descrition could embeded into a HTML page:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/ Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns= "http:// www.w3.org/2000/svg">

    <circle cx="100" cy="50" r="40"
    stroke="black" stroke-width="2"
    fill="red"/>

</svg>
Another posibility is to use a <iframe> tag in an ordinary HTML code:
<iframe src="MyImg.svg" width="300" height="100">
</iframe>
SVG defines several tags for basic shapes as:
• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>
Additionally, tags are defined for various effects:
• feBlend
• feColorMatrix
• feComponentTransfer
• feComposite
• feConvolveMatrix
• feDiffuseLighting
• feDisplacementMap
• feFlood
• feGaussianBlur
• feImage
• vfeMerge
• feMorphology
• feOffset
• feSpecularLighting
• feTile
• feTurbulence
• feDistantLight
• fePointLight
• feSpotLight
For more information please consult the w3schools SVG tutorial.

Slides:
C7. Smil, CMS and SVG.