Internet Fundamentals/Graphics and Multimedia

Computer graphics are pictures and films created using computers. Multimedia is content that uses a combination of different content forms such as text, audio, images, animations, video and interactive content. This lesson introduces computer graphics, including raster and vector graphics, and web multimedia audio and video content.

Raster vs. Vector

GIMP

Inkscape

HTML5 Video

HTML5 Audio

Objectives and Skills

Objectives and skills for this lesson include:

• Understand how to add existing graphics and multimedia to web pages.
• Create and use simple graphic images and multimedia files.
• Determine the client requirements
  • Access and interpret the client brief to determine client needs
  • Analyse client needs with regard to image content, quality and size
• Source the images
  • Research the appropriate sources of images, to meet a range of needs
  • Source the images appropriate to meet the needs, taking into consideration copyright restrictions
• Manipulate the images
  • Select the appropriate industry-standard, image-editing software for the purpose
  • Create backups of the assets to be used
  • Use features of the image-editing software, to create a range of effects appropriate to client needs and web application
  • Edit, resize, and slice images for use in web applications, as required to meet client needs
• Save the images
  • Save the images, maintaining their individual effects
  • Save the images in formats appropriate for use in web applications, and to client needs
  • Save the images in the appropriate directory structure
• Demonstrate ways to communicate effectively using Internet technology.
• Conduct a Webcast and related services.
• Represent technical issues to a non-technical audience.

Readings

1. Wikipedia: Computer graphics
2. Wikipedia: Raster graphics
3. Wikipedia: Vector graphics
4. Wikipedia: Multimedia
5. Wikipedia: Streaming media
6. Wikipedia: Screencast
7. W3Schools.com: HTML iframe tag
8. W3Schools.com: HTML YouTube Videos
9. WebAim: Webaim Contrast Checker

Multimedia

1. YouTube: Bitmap and Vector Graphics: What's the Difference?
2. YouTube: PIXLR 101-1. Getting Started
3. YouTube: Picozu Tutorial
4. YouTube: How to Use GIMP (Beginners Guide)
5. YouTube: Inkscape for Beginners: Infinite Loop Icon
6. YouTube: Record Your Computer Screen With VLC
7. YouTube: Make Videos with Your Phone
8. YouTube: HTML5 Video Tag Introduction
9. YouTube: HTML - Audio Player

Student Presentations

1. YouTube: Graphics
2. YouTube: Uploading Raster Graphics to Bitbucket using Insomnia
3. YouTube: SVG Graphics

Activities

1. Create and use raster graphics.
   • Review Wikipedia: Raster graphics. Use a free, web-based image editor, such as Picozu: Image Editor or Pixlr: Editor, to create a new raster image.
   • Review Wikipedia: GIMP. Download and install GIMP and use it to create a new raster image for your web page. See GIMP: Tutorials for tutorials.
   • Review W3Schools: HTML img tag. Add a raster image to the web page you created in the previous lesson.
2. Create and use vector graphics.
   • Review Wikipedia: Vector graphics. Complete the Vectr.com: Vector graphics tutorial and create a new vector graphics image.
   • Review Wikipedia: Inkscape. Download and install Inkscape and use it to create a new vector graphics image for your web page. See Inkscape: Tutorials for tutorials.
   • Review W3Schools: HTML img tag. Add a vector graphics image to the web page you created in the previous lesson.
3. Use multimedia.
   • Complete the tutorial GCFLearnFree: YouTube.
   • Review Wikipedia: VLC media player. Download and install VLC media player and use it to play multimedia video and audio files.
4. Create multimedia.
   • Review WikiHow: How to Screen Capture to File Using VLC or HowToGeek: How to Record Your Desktop to a File or Stream It over the Internet.
   • Use VLC or another screen capture program to capture a video of your desktop as you demonstrate something you've learned in this course, or record a similar video using a computer webcam, tablet, or smart phone.
   • Review Google: YouTube Help Center and upload your screencast or video to YouTube.
5. Add multimedia to a web page.
   • Review W3Schools: HTML YouTube Videos. Add your YouTube video to the web page you created in the previous lesson.
   • Review W3Schools: HTML Multimedia and W3Schools: HTML5 Video. Add a video element to your web page.
   • Review W3Schools: HTML5 Audio. Add an audio element to your web page.

Lesson Summary

• Computer graphics are pictures and films created using computers.
• Computer graphic development has had a significant impact on many types of media and has revolutionized animation, movies, advertising, video games, and graphic design generally.
• Computer animation is the art of creating moving images via the use of computers.
• A raster graphics or bitmap image is a dot matrix data structure, representing a generally rectangular grid of pixels, or points of color, viewable via a monitor, paper, or other display medium.
• Raster graphics are resolution dependent, meaning they cannot scale up to an arbitrary resolution without loss of apparent quality.
• Vector graphics is the use of polygons to represent images in computer graphics.
• Vector art is ideal for printing since the art is made from a series of mathematical curves, it will print very crisply even when resized.
• Raster-based image editors, such as Painter, Photoshop, Paint.NET, MS Paint, and GIMP, revolve around editing pixels.
• Vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape, revolve around editing lines and shapes (vectors).
• The <img> element is used to insert an image into an HTML page. The src attribute specifies the image URL. The required alt attribute provides alternative text in case the image cannot be displayed.
• A typical img element includes:

<img src="example.jpg" alt="Alternate text that describes the image.">

• Multimedia is content that uses a combination of different content forms such as text, audio, images, animations, video and interactive content.
• Multimedia can be recorded and played, displayed, interacted with or accessed by information content processing devices, such as computerized and electronic devices.
• The term "rich media" is synonymous with interactive multimedia.
• Digital online multimedia may be downloaded or streamed. Streaming multimedia may be live or on-demand.
• Enhanced levels of interactivity are made possible by combining multiple forms of media content. Online multimedia is increasingly becoming object-oriented and data-driven, enabling applications with collaborative end-user innovation and personalization on multiple forms of content over time.
• In addition to seeing and hearing, haptic technology enables virtual objects to be felt. Emerging technology involving illusions of taste and smell may also enhance the multimedia experience.
• Multimedia may be broadly divided into linear and non-linear categories:
  • Linear active content progresses often without any navigational control for the viewer such as a cinema presentation
  • Non-linear uses interactivity to control progress as with a video game or self-paced computer-based training. Hypermedia is an example of non-linear content.
• Multimedia presentations can be live or recorded:
  • A recorded presentation may allow interactivity via a navigation system
  • A live multimedia presentation may allow interactivity via an interaction with the presenter or performer.
• Multimedia finds its application in various areas including, but not limited to, advertisements, art, education, entertainment, engineering, medicine, mathematics, business, scientific research and spatial temporal applications.
• Streaming media is multimedia that is constantly received by and presented to an end-user while being delivered by a provider. A client end-user can use their media player to begin to play the data file (such as a digital file of a movie or song) before the entire file has been transmitted.
• Live streaming refers to Internet content delivered in real-time, as events happen.
• There are challenges with streaming content on the Internet. If the user does not have enough bandwidth in their Internet connection, they may experience stops in the content and some users may not be able to stream certain content due to not having compatible computer or software systems.
• The <audio> element represents a sound, or an audio stream.
• A typical audio element includes:

<audio controls>
  <source src="example.mp4" type='audio/mp4' />
  <source src="example.oga" type='audio/ogg; codecs=vorbis' />
  <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

• Supported audio types include PCM (WAV), MP3, AAC (MP4, ADTS), Vorbis (Ogg, WebM), Opus (Ogg, WebM), and FLAC (FLAC, Ogg).
• The <video> element plays videos.
• A typical video element includes:

<video poster="movie.jpg" controls>
	<source src="example.webm" type='video/webm; codecs="vp8.0, vorbis"'>
	<source src="example.ogv" type='video/ogg; codecs="theora, vorbis"'>
	<source src="example.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
	<p>Your user agent does not support the HTML5 video tag.</p>
</video>

• Supported video types include MP4, Ogg, and WebM.

Key Terms

AIFF (Audio Interchange File Format)

An audio file format standard developed by Apple and used for storing sound data for personal computers and other electronic audio devices.

AVI (Audio Video Interleave)

A multimedia container format introduced by Microsoft as part of its Video for Windows software.

CGI (computer-generated imagery)

The application of computer graphics to create or contribute to images in art, printed media, video games, films, television programs, shorts, commercials, videos, and simulators.

codec

A device or computer program for encoding or decoding a digital data stream or signal.

GIF (Graphics Interchange Format)

A raster graphics file format that uses lossless compression and supports interlacing and animation.

haptic technology

Creates a sense of touch by applying forces, vibrations, or motions to the user.

JPEG

A raster graphics file format that uses lossy compression.

lossless compression

Data encoding methods that allow the original data to be perfectly reconstructed from the compressed data.

lossy compression

Data encoding methods that use inexact approximations and partial data discarding to represent the content.

MIDI (Musical Instrument Digital Interface)

A technical standard that describes a protocol, digital interface, and connectors and allows a wide variety of electronic musical instruments, computers and other related devices to connect and communicate with one another.

MOV (Quicktime Movie)

A computer file format used natively by the Apple QuickTime multimedia framework.

MPEG (Moving Picture Experts Group)

A working group of authorities that was formed by ISO and IEC to set standards for audio and video compression and transmission.

MP3 (MPEG-1 Audio Layer3)

An audio coding format for digital audio developed by the Moving Picture Experts Group that uses a form of lossy data compression.

MP4 (MPEG-4 Part 14)

A digital multimedia container format most commonly used to store video and audio, which allows streaming over the Internet.

OGG

A free, open container format maintained by the Xiph.Org Foundation that is unrestricted by software patents and is designed to provide for efficient streaming and manipulation of high quality digital multimedia.

pixel (picture element)

A single point in a raster image.

PNG (Portable Network Graphics)

A raster graphics file format that uses lossless data compression and supports interlacing but not animation.

podcast

An episodic series of digital audio files which a user can download and listen to.

screencast

A digital recording of computer screen output, often containing audio narration.

streaming media

Multimedia that is constantly received by and presented to an end-user while being delivered by a provider.

SVG (Scalable Vector Graphics)

A vector graphics file format defined using XML text files.

TIFF (Tagged Image File Format)

A raster graphics file format that uses lossless compression but does not support interlacing or animation.

WAV (Waveform)

An audio file format standard developed by Microsoft and IBM for storing an audio bitstream on PCs.

webcast

A media presentation distributed over the Internet using streaming media technology to distribute a single content source to many simultaneous listeners/viewers.

Assessments

• Flashcards: Quizlet: Multimedia on the Web
• Quiz: Quizlet: Multimedia on the Web

See Also

• W3.org: Audio Element
• W3.org: Video Element
• Mozilla: Supported media formats
• Training.gov.au: ICTWEB303 - Produce digital images for the web
• Training.gov.au: ICTWEB412 - Produce interactive web animation

References

← CSS

Internet Fundamentals

Web Accessibility →