Multimedia on the web by Sania Nisar
Download as PPTX, PDF•1 like•964 views
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.
Multimedia on the web by Sania Nisar
- 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
- 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
- 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