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.
Motivation. Objectives. Short history. Internet. Web technologies. Research
issues.
...
HTML, XML, XHTML, CSS.
...
JavaScript, DOM, Client-page interaction.
...
PHP. PDFLib. Symfony. CodeIgniter
...
Ajax. Managing interactions. Ajax libraries. Web App
Frameworks. Dojo.
...
RIA technologies. Google Ajax API. Web services, Web mashups. .Windmill. ...
The SMIL language. Multimedia data. Synchronisation. Links. SMIL Tools. Joomla. Scalable Vector Graphics (SVG). ...
© 2011 UPT. Assoc.Prof.Dr. Dan Pescaru. All rights reserved.