Internet Fundamentals/Graphics and Multimedia

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

Raster vs. Vector
Raster vs. Vector
GIMP
GIMP
Inkscape
Inkscape
HTML5 Video
HTML5 Video
HTML5 Audio
HTML5 Audio

Objectives and Skills

edit

Objectives and skills for this lesson include:[3][4][5]

  • 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

edit
  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

edit
  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

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

Activities

edit
  1. Create and use raster graphics.
  2. Create and use vector graphics.
  3. Use multimedia.
  4. Create multimedia.
  5. Add multimedia to a web page.

Lesson Summary

edit
  • Computer graphics are pictures and films created using computers.[6]
  • 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.[7]
  • Computer animation is the art of creating moving images via the use of computers.[8]
  • 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.[9]
  • Raster graphics are resolution dependent, meaning they cannot scale up to an arbitrary resolution without loss of apparent quality.[10]
  • Vector graphics is the use of polygons to represent images in computer graphics.[11]
  • 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.[12]
  • Raster-based image editors, such as Painter, Photoshop, Paint.NET, MS Paint, and GIMP, revolve around editing pixels.[13]
  • Vector-based image editors, such as Xfig, CorelDRAW, Adobe Illustrator, or Inkscape, revolve around editing lines and shapes (vectors).[14]
  • 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.[15]
  • A typical img element includes:[16]
<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.[17]
  • Multimedia can be recorded and played, displayed, interacted with or accessed by information content processing devices, such as computerized and electronic devices.[18]
  • The term "rich media" is synonymous with interactive multimedia.[19]
  • Digital online multimedia may be downloaded or streamed. Streaming multimedia may be live or on-demand.[20]
  • 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.[21]
  • 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.[22]
  • Multimedia may be broadly divided into linear and non-linear categories:[23]
    • 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:[24]
    • 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.[25]
  • 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.[26]
  • Live streaming refers to Internet content delivered in real-time, as events happen.[27]
  • 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.[28]
  • The <audio> element represents a sound, or an audio stream.[29]
  • A typical audio element includes:[30]
<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).[31]
  • The <video> element plays videos.[32]
  • A typical video element includes:[33]
<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.[34]

Key Terms

edit
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.[35]
AVI (Audio Video Interleave)
A multimedia container format introduced by Microsoft as part of its Video for Windows software.[36]
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.[37]
codec
A device or computer program for encoding or decoding a digital data stream or signal.[38]
GIF (Graphics Interchange Format)
A raster graphics file format that uses lossless compression and supports interlacing and animation.[39]
haptic technology
Creates a sense of touch by applying forces, vibrations, or motions to the user.[40]
JPEG
A raster graphics file format that uses lossy compression.[41]
lossless compression
Data encoding methods that allow the original data to be perfectly reconstructed from the compressed data.[42]
lossy compression
Data encoding methods that use inexact approximations and partial data discarding to represent the content.[43]
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.[44]
MOV (Quicktime Movie)
A computer file format used natively by the Apple QuickTime multimedia framework.[45]
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.[46]
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.[47]
MP4 (MPEG-4 Part 14)
A digital multimedia container format most commonly used to store video and audio, which allows streaming over the Internet.[48]
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.[49]
pixel (picture element)
A single point in a raster image.[50]
PNG (Portable Network Graphics)
A raster graphics file format that uses lossless data compression and supports interlacing but not animation.[51]
podcast
An episodic series of digital audio files which a user can download and listen to.[52]
screencast
A digital recording of computer screen output, often containing audio narration.[53]
streaming media
Multimedia that is constantly received by and presented to an end-user while being delivered by a provider.[54]
SVG (Scalable Vector Graphics)
A vector graphics file format defined using XML text files.[55]
TIFF (Tagged Image File Format)
A raster graphics file format that uses lossless compression but does not support interlacing or animation.[56]
WAV (Waveform)
An audio file format standard developed by Microsoft and IBM for storing an audio bitstream on PCs.[57]
webcast
A media presentation distributed over the Internet using streaming media technology to distribute a single content source to many simultaneous listeners/viewers.[58]

Assessments

edit

See Also

edit

References

edit
  1. Wikipedia: Computer graphics
  2. Wikipedia: Multimedia
  3. CIW: Internet Business Associate Exam Objectives
  4. CIW: Internet Business Associate Course Description
  5. Training.gov.au: ICTWEB303 - Produce digital images for the web
  6. Wikipedia: Computer graphics
  7. Wikipedia: Computer graphics
  8. Wikipedia: Computer graphics
  9. Wikipedia: Raster graphics
  10. Wikipedia: Raster graphics
  11. Wikipedia: Vector graphics
  12. Wikipedia: Vector graphics
  13. Wikipedia: Raster graphics
  14. Wikipedia: Raster graphics
  15. Wikipedia: HTML
  16. Wikipedia: HTML
  17. Wikipedia: Multimedia
  18. Wikipedia: Multimedia
  19. Wikipedia: Multimedia
  20. Wikipedia: Multimedia
  21. Wikipedia: Multimedia
  22. Wikipedia: Multimedia
  23. Wikipedia: Multimedia
  24. Wikipedia: Multimedia
  25. Wikipedia: Multimedia
  26. Wikipedia: Streaming media
  27. Wikipedia: Streaming media
  28. Wikipedia: Streaming media
  29. Wikipedia: HTML5 Audio
  30. Wikipedia: HTML5 Audio
  31. Wikipedia: HTML5 Audio
  32. Wikipedia: HTML5 video
  33. Wikipedia: HTML5 video
  34. Mozilla: Supported media formats
  35. Wikipedia: Audio Interchange File Format
  36. Wikipedia: Audio Video Interleave
  37. Wikipedia: Computer-generated imagery
  38. Wikipedia: Codec
  39. Wikipedia: GIF
  40. Wikipedia: Haptic technology
  41. Wikipedia: JPEG
  42. Wikipedia: Lossless compression
  43. Wikipedia: Lossy compression
  44. Wikipedia: MIDI
  45. Wikipedia: QuickTime File Format
  46. Wikipedia: Moving Picture Experts Group
  47. Wikipedia: MP3
  48. Wikipedia: MPEG-4 Part 14
  49. Wikipedia: Ogg
  50. Wikipedia: Computer graphics
  51. Wikipedia: Portable Network Graphics
  52. Wikipedia: Podcast
  53. Wikipedia: Screencast
  54. Wikipedia: Streaming media
  55. Wikipedia: Scalable Vector Graphics
  56. Wikipedia: TIFF
  57. Wikipedia: WAV
  58. Wikipedia: Webcast