The document discusses multimedia on the web and web-based multimedia. It defines multimedia as the integration of various media types like text, images, video, animation and sound. Web-based multimedia refers to websites that contain more than one media type. The document then discusses various multimedia elements used on websites like text, images, animation, audio and video. It also discusses concepts related to the world wide web like HTML, HTTP, websites, web servers and browsers.

1. MULTIMEDIA ON THE WEB
Made by : SANIA NISAR

2. What is multimedia?
Multimedia
– The integration of a variety of media, such as text, images, video,
animation, and sound.
Web-Based Multimedia (also called rich media)
– A website that contains more than one type of media is considered to
be multimedia. Sites that contain sound, video, animation, and/or
images alongside text fall into this category.
• Fast computers and broadband Internet connections makeWeb-
based multimedia much more feasible than in the past.
• Vast majority ofWeb sites today include multimedia
(advertisements, TV shows, podcasts (A podcast is an episodic series
of digital audio files that a user can download in order to listen) etc ).

3.  Why Learn About Web-Based Multimedia?
– Multimedia is an integral component of the Web.
– Businesses and individuals need to understand the characteristics of the
various types of multimedia elements and the impact of adding them to a
Web site.
What isWeb-Based Multimedia?
 Information Delivery
– Photos of products, video clips and podcasts, and users manuals are used to
convey information.
– Important component inWeb-based training (WBT).

4.  E-Commerce
–Online catalogs, samples of movies and music, etc.
 Virtual Reality (VR)
– The use of a computer to create three-dimensional environments that
look like they do in the real world (i.e., homes for sale).
Web-Based Multimedia Applications
 AugmentedVirtual Reality
– overlaying computer generated images on top of real time images.

5.  Entertainment
– OnlineTV/movies and games are available throughTV network sites.
Web-Based Multimedia Applications

6. Advantages and Disadvantages of Web-Based
Multimedia
Advantages :
– Can address a variety of learning styles
Visual learners
Auditory learners
Kinesthetic learners
– Material more interesting and enjoyable.
– Many ideas are easier to convey in multimedia format.

7. Disadvantages :
– Cost of development is high and time consuming
– Download time and compatibility for web based multimedia
Advantages and Disadvantages of Web-Based
Multimedia
– Used to supply basic content, and to add text-based menus and
hyperlinks.
Multimedia Elements
Text

8. Multimedia Elements
– SerifTypeface
Small lines on edges of letters
More readable, used for large bodies
of text.
– For printing use serif fonts.
– Sans SerifTypeface
No lines on edges of letters
Used for titles, headings, Web page banners.
– For web purpose use sans serif.
Text

9. – Important to select a typeface that matches the style of the Web site.
Images (Graphics)
– Digital representations of photographs, drawings, charts, and other visual images.
 Images are static and are available in many formats.
–TIF, BMP, GIF, JPEG, and PNG
Multimedia Elements
• Clip art is a collection of pictures or images that can be imported into a
document or another program.The images may be either raster graphics or
vector graphics.
• Stock photos are images that anyone can license for creative projects.

10. Raster Vs Vector Graphics
• Raster Graphics
Also known as bitmap graphics.
Use small dots to create images and colors.
Best for photographs and realistic graphics.
• Vector Graphics
Store information about image in mathematical instructions
that are interpreted and displayed.
Best for line art ,shaped and illustrations.

12. Stock Photos
Shutterstock Adobe Stock
Typically use the JPEG format and can be downloaded from stock
photograph agencies.The agency shown here has variety of images
organized by topics ; all images require a fee for use but all are royalty free.

13. Clip Art
Typically use the JPEG and PNG format and can be downloaded from
variety of website. Some of the images on this site are free for both
personal and commercial use.

14. Choosing a Graphic Format
 GIF or PNG
— typically used for line art (clip art, logos, navigation buttons, etc.)
 JPEG
— typically used for photographs
Use thumbnail images when very large images are required.
Multimedia Elements
—Thumbnails are reduced-size versions of pictures or videos, used to help in
recognizing and organizing them.

15. Multimedia Elements
Thumbnail is a term used by graphic
designers and photographers for a
small image representation of a
larger image, usually intended to make
it easier and faster to look at or manage
a group of larger images.

16. Animation
– A method in which pictures are manipulated to appear as moving images.
Java Applet
– A small program inserted into aWeb page that performs a specific task.
Animated GIF
– A group of GIF images saved as an animated GIF file that is inserted in aWeb
page.
– Displayed one after another to simulate movement.
Multimedia Elements

17. Multimedia Elements
Animation Java Applet
Animated GIF

18. • For more complex animations, developers can use JavaScript
or another scripting language
– Flash, Silverlight
• Many web-based animations require a plug-in. A plugin is a
piece of software that acts as an add-on to a web browser and
gives the browser additional functionality. Plugins can allow a
web browser to display additional content it was not originally
designed to display.
Multimedia Elements

19. – Animation and interactivity can also be achieved using programming
languages.
Multimedia Elements
Audio
– All types of sound including music, spoken voice, sound effects.
– Can be recorded using a microphone or MIDI instrument, captured from CDs,
or downloaded from the Internet.
– Often played when an event occurs on aWeb page or when the visitor clicks
a link.

20. Multimedia Elements
– Streaming audio is used to speed up delivery. Streaming audio is a way of
delivering sound — including music — without requiring you to download files
from the internet.
– Common audio file formats include:
• Waveform (.wav)
• Moving Picture Experts GroupAudio Layer 3 (.mp3)
• Audio Interchange Format File (.aiff)
• Advanced Audio Coding (.aac or .m4a)

21. • Visual multimedia source that combines a sequence of images to form a moving
picture.The video transmits a signal to a screen and processes the order in which
the screen captures should be shown.
• Streaming video is recommended to speed up delivery.
• Common video file formats include:
Video
Multimedia Elements

22. Animation:
- Animation involves drawing of sketches of objects.
-These objects are placed in various frames, so that it illustrates as if the objects
are moving.
- Animation is created by drawing series of illustrations in different angles.
- Animation creation is difficult compared to creating a video.
Videos:
-Videos are made by using video cameras.
-The real movements of objects are captured by shooting the videos.

23. WorldWideWeb
• The WorldWide Web is a way of exchanging information between computers on
the Internet.
• The WorldWide Web is the network of pages of images, texts and sounds on the
Internet which can be viewed using browser software.
• The WorldWide Web, orWeb, consists of a worldwide collection of electronic
documents (Web pages).
Website
• A web site is a collection of related web pages and associated items.
• There are basically two main types of website - static and dynamic.

24. • A static site is one that is usually written in plain HTML and what is
in the code of the page is what is displayed to the user.
• A dynamic site is one that is written using a server-side scripting
language such as PHP, ASP, JSP, or Cold fusion. In such a site the
content is called in by the scripting language from other files or from
a database depending on actions taken by the user.
WorldWideWeb
Website

25. WorldWideWeb
WWW Components
Structural Components
The structural components of a web application basically refer to the functionality
of the web application with which a user interacts, the control and the database
storage.This basically comprises
(1)The web browser or client,
(2)The web application server and
(3)The database server.

26. Semantic Components
• A semantic element clearly describes its meaning to both the browser
and the developer.
• Examples of non-semantic elements: <div> and <span> -Tells nothing
about its content.
• Examples of semantic elements: <form> , <table> , and <article> -
Clearly defines its content
WorldWideWeb
Semantic Web
• A proposed development of the WorldWideWeb in which data in web
pages is structured and tagged in such a way that it can be read
directly by computers.

27. WorldWideWeb
How to create a webpage?
The two basic steps required in making a web page.
• Create an HTML File
• Upload file to server
Creating a webpage
Markup Languages
• Uses symbols or tags to describe what a document should look like when it
is displayed in aWeb browser
– JavaScript or other scripting languages can be used to add dynamic content
–Web site authoring software is often used to create an entire site.

28. • It was designed byTim Berners-Lee as a
protocol for linking a multiplicity of documents located on computers
anywhere within the Internet.
• This new HypertextTransfer Protocol (HTTP) provided rules for a simple
transaction between two computers on the Internet consisting of
(1) establishing a connection,
(2) Requesting that a document be sent,
(3) sending the document, and
(4) closing the connection.
• It also required a simple document format called Hypertext
Markup Language (HTML).
HyperTextTransfer Protocol (HTTP)
WorldWideWeb

29. • HTTP Daemon is a software program that runs in the background of a web
server and waits for the incoming server requests.
• The daemon answers the request automatically and serves the hypertext and
multimedia documents over the Internet using HTTP.
• HTTPd stands for HypertextTransfer Protocol daemon (i.e. Web server)
• The primary function of a web server is to store, process and deliver web
pages to clients.
• The communication between client and server takes place using the
HypertextTransfer Protocol (HTTP)
HyperTextTransfer Protocol (HTTP)
WorldWideWeb

30. • Hypertext Markup Language is the standard markup
language for documents designed to be displayed in a web
browser.
• It can be assisted by technologies such as Cascading Style
Sheets and scripting languages such as JavaScript.
Hypertext Markup Language (HTML)
WorldWideWeb
• Extensible Markup Language (XML) is a markup language that
defines a set of rules for encoding documents in a format that is
both human-readable and machine-readable.
Extensible Markup Language (XML)

31. Extensible Markup Language (XML)
WorldWideWeb

32. MultimediaWeb Site Development
Wireless Markup Language (WML)
– WML is an application of XML
– Used to createWeb pages to be displayed onWAP enabled wireless
devices, such some older mobile phones.
–Wireless application protocol (WAP) is a communications protocol
that is used for wireless data access through most mobile wireless
networks
– WML scripting language that takes care of the small screen and the
low bandwidth of transmission.

33. WorldWideWeb

34. – Newest version is designed to replace the previous versions of both
HTML and XHTML.
– Includes new tags and features that support the creation of more
complex and dynamicWeb pages.
– Is open standard
– No proprietary software or plug-ins required
– New tags include<video> and <audio> for media, <canvas> that creates a
bitmapped surface to work with, and section tags to identify the parts of a
Web page (<header>,<article>,<nav> etc.)
HTML5
MultimediaWeb Site Development

35. MultimediaWeb Site Development

36. • A newer version of HTML based on XML
• Controls the appearance and format of aWeb page like HTML
• Stricter rules than HTML
Extensible Hypertext Markup Language (XHTML)
WorldWideWeb
WYSIWYG Editor :
A WYSIWYG (pronounced "wiz-ee-wig") editor or program is one that allows a
developer to see what the end result will look like while the interface or
document is being created.
• Microsoft's Expression Web 4.0.
• KOMPOZER.
• Adobe Dreamweaver .
• Aloha Editor.
• Amaya Home Page.
• GoogleWeb Designer

37. WorldWideWeb
• These are the web addresses.The resource locator is an
addressing system.
Uniform Resource Locator (URL)

38. WorldWideWeb
– Used to specify the styles used with aWeb page or an entireWeb
site
– Specified in an Internal style sheet (head section ofWeb page) or in
an External style sheet
• Normally used in an external style sheet and connected to web
pages through a link statement in the head section of the desired
pages
• Styles are applied to all of the linked Web pages at one time
– Improves consistency and efficiency
Cascading Style Sheets (CSSs)

39. WorldWideWeb
AJAX
• Creates faster, more efficient interactive web applications ( a web
application or web app is a client–server computer program that the
client runs in a web browser ).
• Only requests new data from the server, not the entire Web page, when
the page is updated.
• Interactive Web pages built with AJAX run faster
• Normally require less bandwidth.
Website & Web Application
• A website is a group of globally accessible, interlinked web pages which
have a single domain name.
• A web application is a software or program which is accessible using any
web browser.

40. MultimediaWeb Site Design
Web Site Design
–The process of planning what aWeb site will look like and how it will function
– Good planning is very important.
Basic Design Principles
–Web pages should be interesting and exciting applications
• Provide information of value or interest
• Provide a stimulating experience
– Pages should load quickly and be easy to use.

41. MultimediaWeb Site Design
Responsive Web Design (RWD)
– Focuses on building sites that are compatible
with a variety of devices.
– Can create multiple versions of your site
yourself or use a flexible site that adjusts to
each visitor’s device.
– Can create a desktop site and use a service to
generate mobile versions.

42. WorldWideWeb
Web Server
• AWeb server is a computer that delivers requestedWeb pages to
your computer.
• This is a program that waits patiently for the browser to request a web
page.The servers looks for the requested information, retrieves it and
send it to the browser or sends an error message if the file is not found.

43. WorldWideWeb
Web Browser
• A web browser displays a web document and enables users to
access web documents.

44. WorldWideWeb
Widely used Search Engines
• A search engine is a web-based tool that enables users to locate
information on the WorldWide Web.

45. WorldWideWeb
Web 1.0 , 2.0 & 3.0 :
• Web 1.0 is “read-only web” or passive user web. Don’t participate in generating
content. It is all about static websites which were created with HTML, CSS,
and JavaScript.
• Example:
Typically it’s when you went into google and typed anything and
read whatever information the link offered.You can’t edit , delete or add.
• Web 2.0 is a “read-write web” or react only users web.Users create content and
interact with sites and with each other through social media, forums, etc
• Example:
1. Post or comment on facebook.
2. Read and write onWikipedia.
3. Watch and upload videos on youtube.
4. Sell or buy on ebay.

46. WorldWideWeb
Web 1.0 , 2.0 & 3.0 :
• Web 3.0 is something called the semantic web. In essence, the
Semantic Web is a place where machines can read web pages much
as we humans read them.
• The semantic web improves web technologies in order to generate, share and
connect content through search and analysis based on the ability to
understand the meaning of words , rather than on keywords or numbers.
• It’s an act and react user web. Interactive interfaces and content.
• Example:
1. WolframAlpha (Website )
2. Apple’s Siri ( System Software )
Uses techniques of speech recognition and artificial intelligence to bring results

47. WorldWideWeb
Web 1.0 , 2.0 & 3.0 :
We can do a little comparison
between WolframAlpha and
Google, using both tools,
typing the “Brazil vs.
Argentina” phrase in both
searching engines,
and then we see big
differences in the results.

48. MultimediaWeb Site Development
Web Site Authoring Software
– Used to createWeb pages and entire Web sites (Dreamweaver)
– Appropriate JavaScript or other code is automatically generated.
– Allows you to create an entire cohesive web site, not just individual
pages.
– Allows you to easily include forms and database connectivity –
Often includes tests for broken links & accessibility tests
–Web site builder

49. MultimediaWebsite Development

50. MultimediaWeb Site Development
– The process of creating, testing, publishing, and maintaining aWeb
site
• Occurs after the site is designed
– Usually several different software programs are used
• Image editing and animation software
• Audio and video editing software
– Each element should be saved in the appropriate size, resolution, and
file format.
Web Site Development
Creating the Multimedia Elements

51. MultimediaWeb Site Development
Testing, Publishing, and Maintaining the Site
Web site should be thoroughly tested prior to publishing
– All hyperlinks should be clicked to ensure they take the user to the
proper location
– Complex animations (such as games and tutorials) should be tested
individually
– Proofread each page or screen carefully.
– UseWeb page code validators built intoWeb site authoring programs
or online validator services.

52. MultimediaWeb Site Development
Testing, Publishing, and Maintaining the Site
• Once thoroughly tested, Web site is ready to be published
– Identify Web server
– Upload files
• After publishing, the Web site must be maintained
– Update content and check links on a regular basis
– Site should be evaluated on a regular basis to locate areas needing
improvement.

53. MultimediaWeb Site Development
Testing, Publishing, and Maintaining the Site

54. END