213 better

Animation

Type of multimedia that uses a fast-paced presentation of changing static images to simulate motion.

Animation can be used to

- Catch a visitor’s attention

- Demonstrate a simple process

- Illustrate change over time

- Help user understand how to interact with the website

Two types of animation creation process:

- Frame-by-frame animation
- Animation with tweening

Tweening

Creating a beginning and an ending animation frame and allowing software to create all the animation frames in between

Frame-by-frame animation

An animation where the designer changes the image manually, such as by erasing a portion or increasing the size of the image.

Animation with tweening

Animation in which the beginning and ending frames identify the original and final location and/or appearance of an image while the in-between frames are created by software.

Creation Animation Software Requires

the change in images in series of frame along a timeline.

Animation Software

- HTML5 Maker

- Adobe Animate CC

- GreenSock

Animated GIFs (.gif)

A single file that stores separate images within multiple animation frames

How many colors do animated GIFs include?

Up to 256 colors, 8 bit

frames-per-second (fps)

The time interval over which animation frames are played.

Also indicates the specified time interval over which individual images an animated GIF are displayed.

Advantages Of Animated GIFs

- Web browser support; no need for plug-ins

- Use streaming technology

- Easy to create

Size of the Animated GIF is dependent on

- Dimension of images

- Number of images

- Length of Animation

- Extent of difference from one image to the next

Streaming Technology

begins playing as it is delivered by the server.

Flash Animation (.swf)

Simulates motion via fast paced presentation of changing static image.

The original animation file for this is .fla file. After it is completed, movie file .swf can be published. The .swf can be published to the web or converted to different format.

Flash Animation Tool

Adobe Animate CC (best tool to create Flash Animation)

Advantages Of Flash Animation

- File sizes are small (vector graphics; reusable)

- Image quality is high (24-bit colors; anti-aliasing)

- Flash animation allows interactivity and accessibility (ActionScript)

Disadvantages Of Flash Animation

- Requires plug-in, i.e., Adobe Flash Player

- Not supported by all browsers and platforms

Tools involved with GIFs are:

- Easy GIF Animator

- GIF Construction Set Professional

- Adobe Photoshop

Interactivity

Allows users to be involved.

UX-Driven Interactivity

Put the website visitor’s needs first. Example:

- Provide context-specific navigation

- Engage and instruct the user

- Save screen space

- Adapt to touch screens

- Respond to actions

Context-specific navigation

E.g., sidebar, off-canvas navigation links

Engage and instruct the user

E.g., galleries, slideshows

Save screen space

E.g., sparse design, accomplish multiple goals, call-to-action (CTA)

Adapt to touch screens

E.g., buttons that change color/shape after being clicked

Respond to actions

E.g., scrolling, shaking, rotating the device

Web-based Forms

Structured web documents in which a website visitor can enter information or select options

Widgets (or Gadgets)

Small code objects that provide dynamic web content

E.g., clocks, weather reports, breaking news

Blogs

Popular way to promote website interactivity

E.g., Blogger, WordPress, Medium

Comments

Enhances website interactivity

E.g., premade script, Disqus

Avatars

Alternative personas or virtual identities for MMOGs or 3D virtual worlds

E.g., SitePal

Live Chat

A service that allows visitors to ask questions and receive answers in real time using text, voice, or video

E.g., CustomerReach, BoldChat, Provide Support

Reactive/broadcast chat

A live chat in which visitors initiate the chat.

Proactive chat

A live chat where a chat window opens automatically.

Chat agents

A person who provides live chat interactivity at a website by answering questions or selling products or services in real time using live chat software and a chat window.

Analog

Sound in the natural world

Natural sound is the result of a stream of continuous changes of vibrations in the atmosphere.

It is continuous and can be represented as wave

Encoding or Sound Sampling

The process of converting an analog sound to numbers

Digital data

Is discrete and can be represented as binary.

Sound must be in digital format to be used on the web.

Sampling Rate

Number of samples obtained per second

Basic measurement for sampling rate is Khz.

More samples per second, higher the sound sound fidelity, similarities between original and reproduced signal (we cannot capture the analog sound completely).

Standard sample rates

8 KHz (AM radio), 11.025 KHz, 11.127 KHz, 22.05 KHz, 44.1 KHz (CD quality), 48KHz (DVD quality)

Bit depth

Number of bits used to sample the sound.

Higher value = better the quality and larger the file.

Standard bit depth

8-bit (telephone), 16-bit (CD quality), to 20-, 24-, 32-, and 48-bit depths (high-end digital audio)

Channel

- Mono: one-channel
- Stereo: two-channel

.aac

Advanced Audio Coding format used by Apple Music streaming service

.aiff

Apple’s standard audio file format

.Au

Audio file format used by Sun, Unix, and Java

.m4a

Format used by Apple for iTunes music downloads

.mp3

Most common file format (audio)

.ogg

Free, open source audio format type similar to mp3, used by Spotify streaming service

.ra, .rm

Online streaming audio format developed by RealAudio

.wav

Audio file format commonly used by Windows PCs

.wma

Microsoft-created Windows Media Audio Format

Downloadable (Media Delivery Methods)

Downloaded in its entirety before device begins playing

Streaming (Media Delivery Methods)

Begins playing as the server delivers file to device

Progressive Downloading or Pseudo Streaming (Media Delivery Methods)

- Allows the media to play while it downloads
- There may be delay in playback

Downloadable Advantage

User can access downloaded files again and again;
utilizes the HTTP protocol to transfer the data and,
therefore, does not require a specific media server.

Downloadable Disadvantage

Files typically are extremely large, resulting in a long download time and taking up considerable storage space on the user's computer or device.

Streaming Advantage

Users can choose the file portion they want to play
using the player's control buttons; consumes RAM
only while being played.

Streaming Disadvantage

Very high bandwidth requirements; frequently requires a
specific media server to transfer the data.

Pseudo Streaming Advantage

Users can access the content as it downloads, without
waiting for the entire file to begin playback; users can
access the files offline once the download is complete.

Pseudo Streaming Disadvantage

Once downloaded, files typically are extremely large, resulting in a long download time and taking up considerable storage space on the user's computer or device. Playback during download may be interrupted if the speed at which the media plays exceeds the download speed.

Audio Files Features

- Add sound effects
- Entertain visitors with background music
- Deliver a personal message
- Promote a product or service with testimonial statements

Record Audio Files

Use audio-recording and editing software

E.g., Adobe Audition CC, WavePad

Podcast

Digital audio or video available to listen to remotely

Optimizing Audio Files On Web

- Length
- Shorter audio clips = smaller files

- Number of channels
- Mono file = 1/2 stereo file

- Sampling rate
- 8 kHz for voice-only audio
- 22 kHz for music audio

- Bit depth
- Lower for person speaking and higher for music

(Playback) Frame Rate

- The speed at which individual frames display
- 10-30 frames/second (fps) to appear continuous

Frame Size

- Number of pixels used to display the frame
- E.g., 800 x 600 (contains 480,000 pixels)

Color Depth

- Number of bits used to describe the color
- 8-bit color to 24-bit color

Size of digital video

Data size = f * r * c * t

- f: frame size in pixels
- r: frame rate in frames per second
- c: color depth in bytes per pixel
- t: time in seconds

Sources for Video

- Download royalty-free videos

- Purchase videos

- Create your own video files

How to create video files ?

- A good-quality digital video camera

- A smartphone with video recording capabilities

- Video-editing software
- Adobe Premiere Pro CC
- iMovie

.avi

Name comes from audio/video interleaved; common format used by digital video cameras

.mov

Originally designed for Apple systems, now usable with the free QuickTime player on most devices and platforms

.mpeg

Platform-independent file format created by the Motion Pictures Expert Group

.rm

One of the first streaming media formats, used with the Real Player

.wmv

Windows Media Video format, available for streaming or download

Optimizing Video Files (Web)

- Length
- Shorter video clips = smaller files

- Frame size
- Full-screen video: 640x480
- For web usage: 160x120 or 240x180

- Frame rate
- Full-motion video: 30 fps
- For web usage: 10~15 fps

- Color depth
- Reduce from 16- to 8-bit color

- Compressions
- Use lossy instead of lossless compression

Webpages Accessibilities (Reasons)

- It's the right thing to do
- It's the Law

Universal Access

Create webpages that are regardless of browser, orbiting system or other technology

Barriers

obstacles that people with disabilities encounter that make it difficult or impossible to access the Internet.

Assistive Technology

A generic term that includes assistive, adaptive, and rehabilitative devices and the process used in selecting, locating, and using them

E.g., Switches, Gazers, Screen Readers, Refreshable Braille Displays, Voice Browsers

Switches and Gazers

Are for people with physical disabilities, and can be used to access computer or control mouse.

Screen Readers

Translate screen text to speech

Refreshable Braille Displays

electro-mechanical device for displaying braille characters

Voice Browsers

Support browsing the web by voice

Web Accessibility Initiative (WAI)

- Created by World Wide Web Consortium (W3C)

- W3C's first goal is Universal Access, making the web available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability.

- Most countries use the WAI guidelines when creating laws to enforce accessibility.

Web Content Accessibility Guidelines (WCAG)

- Create by WAI

- 12 guidelines organized under 4 principles

- Perceivable

- Operable

- Understandable

- Robust

For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA

Section 508

- 1998 Amendment to the Rehabilitation Act of 1973

- It was enacted to eliminate barriers in information technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals

Section 508 Includes

- Full range of Electronic and Information Technology

- Software applications and operating systems

- Web-based information or applications

- Telecommunication products

- Video and multimedia products

- Self contained, closed products

- Desktop and portable computers

Section 508 Is Followed By

- All federal government websites

- Military websites

- Any program or institution receiving funding from the Tech Act (Assistive Technology Act)

- Mostly state-run programs and educational institutions

- Some private sector companies that do government contract work

- Any website wishing to be a link on the above sites

- Legally the above sites can only link to accessible websites, both private and government

Types Of Disabilities

- Visual

- Auditory

- Physical

- Cognitive (e.g., Learning Disabilities, Dyslexia)

- Neurological (e.g., Seizures)

Types of Disabilities - Visual

- Blindness
- Low Vision
- Color-blindness

Screen Readers

- JAWS (Job Access with Sound) - screen reader


- NVDA (NonVisual Desktop Access) - free screen reader


- VoiceOver - screen reader built into Apple's platform


- In conjunction with Refreshable Braille Displays

Screen Reader Limitations

- Cannot describe images

- Read in a linear fashion

- Rely on the HTML source code

- Problems occur with images, tables, and frames.

Low Vision (Visual Disability)

- Use Screen Magnifier

- ZoomText and MAGic

- Need webpage text to be scalable and with high contrast

Color-blindness (Visual Disability)

Make sure that colors are not your only method of conveying important information.

Types of Disabilities - Auditory

- Hearing loss: mild, moderate, severe, profound

Auditory Accessibility

- Provide transcripts for audio-only content

- Provide captions or transcripts for multimedia content

Transcripts

a textual version of the content, containing additional descriptions, explanations, or comments

Captions

text versions of the spoken word presented within multimedia