Multimedia in the Web

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more.

On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats.

In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

Multimedia Formats
Multimedia elements (like sounds or videos) are stored in media files.

The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg.

Multimedia elements also have their own file formats with different extensions like .swf, .wmv, .mp3, and .mp4.

Video Formats
The MP4 format is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5.

Format	File	Description
AVI	.avi	The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers.
WMV	.wmv	The Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available
MPEG	.mpg .mpeg	The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers.
QuickTime	.mov	The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.
RealVideo	.rm .ram	The RealVideo format was developed for the Internet by Real Media. The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
Flash	.swf .flv	The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra component to play. But this component comes preinstalled with web browsers like Firefox and Internet Explorer.
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) is the new format for the internet. In fact, YouTube recommends using MP4. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are moving to MP4 as the internet sharing format for both Flash players and HTML5.

Sound Formats

Format	File	Description
MIDI	.mid .midi	The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only 23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of platforms. MIDI is supported by all the most popular Internet browsers.
RealAudio	.rm .ram	The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced.
Wave	.wav	The Wave (waveform) format is developed by IBM and Microsoft. It is supported by all computers running Windows, and by all the most popular web browsers (except Google Chrome).
WMA	.wma	The WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music.
MP3	.mp3 .mpga	MP3 files are actually the sound part of MPEG files. The MPEG format was originally developed for video by the Moving Pictures Experts Group. MP3 is one of the most popular sound formats for music. The encoding system combines good compression (small files) with high quality. Expect future software systems to support it.

What Format To Use?
The WAVE is the most popular uncompressed sound format on the Internet, and it is supported by all popular browsers. If you want uncompressed sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, the MP3 format is the choice.

Basics of MYSQL

MySQL is the world's most used open source relational database management system (RDBMS) that runs as a server providing multi-user access to a number of databases.

It is named after co-founder Michael Widenius' daughter, My. The SQL phrase stands for Structured Query Language.

ts source code available under the terms of the GNU General Public License, as well as under a variety of proprietary agreements. MySQL was owned and sponsored by a single for-profit firm, the Swedish company MySQL AB, now owned by Oracle Corporation.

MySQL is a popular choice of database for use in web applications, and is a central component of the widely used LAMP open source web application software stack—LAMP is an acronym for "Linux, Apache, MySQL, Perl/PHP/Python". Free-software-open source projects that require a full-featured database management system often use MySQL.

Start the console: mysql

List all databases: show databases;

Switch to a database: use $dbname;

List tables in a current database: show tables;

List columns in a given table: describe $tablename;

Setting permissions to a database: GRANT SELECT ON $database.* TO '$user_name'@'%' IDENTIFIED BY '$password';

Deleting rows: delete from $db.$table where $condition;

Selects: select count(*) from $db.$table;

Altering a table:

ALTER TABLE get_cookie_log ADD COLUMN log_id INT(10) NOT NULL auto_increment, ADD PRIMARY KEY(log_id);` ALTER TABLE get_cookie_log ADD COLUMN log_id INT(10) NOT NULL auto_increment, ADD INDEX(log_id);` ALTER TABLE verify_reg_code_log ADD COLUMN log_id INT(10) NOT NULL auto_increment, ADD INDEX(log_id);

Backup database: mysqldump $database [[-all] | [$table]]s >$file-name.sql

Import database:

mysql -e "DROP DATABASE $db; CREATE DATABASE $db;" mysql $databasename <$file-name.sql

DHTML: Cascading style sheet (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service.

Use
Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to another file, the style sheet, resulting in considerably simpler HTML.

Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3), etc., are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to repeat HTML presentational markup for each occurrence of that heading type. This made documents more complex, larger, and more difficult to maintain. CSS allows the separation of presentation from structure. CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C has now deprecated the use of all presentational HTML markup.

CSS files can be associated with HTML documents using the following syntax:

<link rel="stylesheet" href="http://example.com/css/style.css" type="text/css" />

Sources
CSS information can be provided from various sources. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium.

Priority scheme for CSS sources (from highest to lowest priority):

• Author styles (provided by the web page author), in the form of:
• Inline styles, inside the HTML document, style information on a single element, specified using the style attribute
• Embedded style, blocks of CSS information inside the HTML itself
• External style sheets, i.e., a separate CSS file referenced from the document
• User style:
• A local CSS file the user specifies with a browser option, which acts as an override applied to all documents
• User agent style
• Default styles applied by the user agent, i.e., the browser's default settings for each element's presentation.

The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading.

One of the goals of CSS is also to allow users greater control over presentation. Someone who finds red italic headings difficult to read may apply a different style sheet. Depending on the browser and the web site, a user may choose from various style sheets provided by the designers, or may remove all added styles and view the site using the browser's default styling, or may override just the red italic heading style without altering other attributes.

Looping and Branching Events and Event handling

JavaScript performs several types of repetitive operations, called "looping". Loops are set of instructions used to repeat the same block of code till a specified condition returns false or true depending on how you need it. To control the loops you can use counter variable that  increments or decrements with each repetition of the loop.

JavaScript supports two loop statements: for and while. The For statements are best used when you want to perform a loop a specific number of times. The While statements are best used to perform a loop an undetermined number of times. In addition, you can use the break and continue statements within loop statements.
The For Loop
for is the most common loop for mathematical calculations. It looks like following for (type var1 = inticialization; var (condition to continue); var(+ operation)) for instance

for (int i = 0; i < 10; i++) { cout << "result is: " << i << endl; }

This code will print numbers from 0 to 9 each on a new line: result is: 0 result is: 1 ... result is: 9

The While Loop
In most computer programming languages, a while loop is a control flow statement that allows code to be executed repeatedly based on a given boolean condition. The while loop can be thought of as a repeating if statement.

The while construct consists of a block of code and a condition. The condition is evaluated, and if the condition is true, the code within the block is executed. This repeats until the condition becomes false. Because while loop checks the condition before the block is executed, the control structure is often also known as a pre-test loop. Compare with the do while loop, which tests the condition after the loop has executed.

For example, in the C programming language (as well as Java and C++, which use the same syntax in this case), the code fragment

int x = 0;
while (x < 5) {
    printf ("x = %d\n", x);
    x++;
}

first checks whether x is less than 5, which it is, so then the {loop body} is entered, where the printf function is run and x is incremented by 1. After completing all the statements in the loop body, the condition, (x < 5), is checked again, and the loop is executed again, this process repeating until the variable x has the value 5.

Note that it is possible, and in some cases desirable, for the condition to always evaluate to true, creating an infinite loop. When such a loop is created intentionally, there is usually another control structure (such as a break statement) that controls termination of the loop. For example:

while (true) {
    //do complicated stuff
    if (someCondition)
       break;
    //more stuff
}
break and continue Statements
C break statement is used to terminate any type of loop such as while loop, do while loop and for loop. C break statement terminates the loop body immediately and passes control to the next statement after the loop.

C continue statement is used to skip over the rest of the current iteration in  . After continue statement, the control returns to the top of the loop.

Here is an example of using C break and C continue statement:

Loop statements may have an else clause; it is executed when the loop terminates through exhaustion of the list (with for) or when the condition becomes false (with while), but not when the loop is terminated by a break statement. This is exemplified by the following loop, which searches for prime numbers:

>>> for n in range(2, 10):
...     for x in range(2, n):
...         if n % x == 0:
...            print n, 'equals', x, '*', n/x
...            break
...     else:
...          print n, 'is a prime number'
...
2 is a prime number
3 is a prime number
4 equals 2 * 2
5 is a prime number
6 equals 2 * 3
7 is a prime number
8 equals 2 * 4
9 equals 3 * 3

Tags, Data types and variables expressions and operation

DHTML tag library
JReport DHTML provides a DHTML tag library, which includes custom tags such as mainpage, head, toc and report. These custom tags can be used to componentize JSP pages, increasing productivity and encapsulating recurring tasks so that they can be reused across more than one application.

DHTML tags are classified as below:

• Embedded tags
• Component tags
• Action tags

Before you can use the DHTML tag library in JReport Server, you should firstly copy the file Jinfonet_DHTML_taglib.tld in <intall_root>\public_html\dhtmljsp to the folder where your JSP pages are located.

And if you want to use the DHTML tag library in any web server, you should first:

Add JRWebDesign.jar in <install_root>\lib to the war file you want to publish to the web server.
Add Jinfonet_DHTML_taglib.tld in <intall_root>\public_html\dhtmljsp to the war file in which your JSP pages reside, or alternatively, you can use web.xml to specify a path. For example,

<taglib> <taglib-uri>Jinfonet_DHTML_taglib</taglib-uri> <taglib-location>/WEB-INF/Jinfonet_DHTML_taglib.tld</taglib-location> </taglib>

• Embedded tags

dhtml
The dhtml tag is a container for the other tags, and it checks user information, runs a report set, and imports resources for the other tags. All tags to be used should be included in this tag. It contains the following attributes:

Attribute	Description
id - string	Specifies the ID of the tag.
tag setid - string	Specifies the ID of the tag set. This attribute is required.
user - string	The username for logging in JReport Server.
password - string	The user password for logging in JReport Server.
report - string	The name of the report set the user wants to run. This attribute is required.
catalog - string	The name of the catalog for the report set. This attribute is required.
report_path - string	The path of the report set.
report_params - string	All parameters (name/value pair) that are required for running the report set, and the parameters are separated by & character.
catalog _version - integer	The catalog version. Default value is 1.

mainpage
The mainpage tag displays the DHTML page in an IFrame. It contains the following attributes:

• Component tags

toc
The toc tag is for displaying the TOC Browser.

toolbar
The toolbar tag is for displaying the toolbar.

resview
The resview tag is for displaying the Resource View panel.

toolbox
The toolbox tag is for displaying the Toolbox.

button
The button tag is for displaying buttons which match toolbar buttons but they can be placed anywhere in JReport Viewer.

Attribute

Description

buttonid

Identifies the specific button. You can obtain a constant Java class jet.web.dhtml.DHTMLConstant from the package JRWebDesign.jar located at <install_root>\lib. In this class, those constants with a prefix "TOOLBAR_" and of int data type represent the buttonid, and you can then know the buttonid according to the constant name. For example, <jinfonet:button buttonid="<%=String.valueOf(DHTMLConstant.TOOLBAR_NEW)%>"> will display the New button. This attribute is required.

toolboxbutton
The toolboxbutton tag is for displaying buttons which match Toolbox buttons but they can be placed anywhere in JReport Viewer.

Attribute	Description
component_type	Identifies the specific button. These constants are available for component_type: "Label", "Image", "Banded Object", "Table", "Crosstab", and "Chart". For example, <jinfonet:toolboxbutton component_type="Banded Object"/> will display the Banded Object button. This attribute is required.

report
The report tag is for DHTML report browser.

• Action tags

sortform
The sortform tag will generate a form for sorting the data. It contains the following attributes:

>> sortform dhtml image <<

filterform
The filterform tag will generate a form for filtering the data. It contains the following attributes:

column
The column tag will generate a list to provide sorting manners for the sortform tag or field values for the filterform tag. It contains the following attributes:

Data types and variables expressions and operation
The "typeof" operator in JavaScript allows you to probe the datatype of its operand, such as whether a variable is string, numeric, or even undefined.

• Numbers - are values that can be processed and calculated. You don't enclose them in quotation marks. The numbers can be either positive or negative.
• Strings - are a series of letters and numbers enclosed in quotation marks. JavaScript uses the string literally; it doesn't process it. You'll use strings for text you want displayed or values you want passed along.
• Boolean (true/false) - lets you evaluate whether a condition meets or does not meet specified criteria.
• Null - is an empty value. null is not the same as 0 -- 0 is a real, calculable number, whereas null is the absence of any value.

• Integers

In JavaScript, you can express integers in 3 different Bases:

• base 10,
• base 8 (octal), and
• base 16 (hexadecimal).

Base 8 numbers can have digits only up to 7, so a decimal value of 18 would be an octal value of 22.

Similarly, hexadecimal allows digits up to F, where A is equivalent to decimal 10 and F is 15. So, a decimal value of 18 would be 12 in hexadecimal notation.

Converting Numbers to Different Bases Table

In order to distinguish between these three bases, JavaScript uses the following notation.

Specifying bases in JavaScript

NUMBER SYSTEM	NOTATION
Decimal (base 10)	A normal integer without a leading 0 (zero) (ie, 752)
Octal (base 8)	An integer with a leading 0 (zero) (ie, 056)
Hexadecimal (base 16)	An integer with a leading 0x or 0X (ie, 0x5F or 0XC72)

• Floating Point Values

Floating point values can include a fractional component. A floating-point literal includes a decimal integer plus either a decimal point and a fraction expressed as another decimal number or an expression indicator and a type suffix

    7.2945
    -34.2
    2e3 means 2 x 103 => 2000
    2E-3 means 2 x 10-3 => .002

Floating point literals must, at a minimum, include a decimal integer and either the decimal point or the exponent indicator ("e" or "E"). As with integers, floating point values can be positive or negative.

• Strings

Technically, a string literal contains zero or more characters enclosed, as you know, in single or double quotes:

    "Hello!"
    ‘245’
    ""  // This example is called the empty string.

NOTE: the empty string is distinct from the null value in JavaScript.

NOTE: Strings are different from other data types in JavaScript. Strings are actually Objects. This will be covered later on.

• Boolean

A Boolean value is either true or false.

Note: Unlike Java, C and other languages, in JavaScript Boolean values can only be represented with true and false. Values of 1 and 0 are not considered Boolean values in JavaScript.

• Null Value

The null value is a special value in JavaScript. The null value represents just that – Nothing. If you try to reference a variable that isn’t defined and therefore has no value, the value returned is the null value. Likewise, with the prompt() dialog box, if the user selects the Cancel button, a null is returned. (example)

NOTE: This is distinct from a value of zero or an empty string where this is an "actual" value. The null value is indicated in JavaScript by the term null.

• NaN (Not a Number)

In addition to these values, some functions return a special value called NaN – which means that the value is not a number, parseInt() and parseFloat() are an examples of functions that return NaN when the argument passed to them cannot be evaluated to a number.

NOTE: Values can be tested to see if they are NaN by using the isNaN() function which returns true or false based on the nature of the argument passed to the function.

• Creating Values

In order to make working with data types useful, you need ways to store values for later use. This is where variables come in.