IT 213 Final

Web Audio Formats

- .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, Java - .m4a: Format used by Apple for iTunes music downloads - .mp3: Most common file format - .ogg: Free, open source audio file 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

Client-side: AJAX (Asynchronous JavaScript and XML)

- A collection of technologies that allow the creation of web applications that can update information on a page without requiring the user to refresh or leave the page. - AJAX is NOT a standard defined by the World Wide Web Consortium (W3C). - AJAX HTML and CSS JavaScript The Document Object Model (DOM) XML (XSLT and XPath) The XMLHttpRequest object (XHR)

Client-side: CSS (Cascading Style Sheets)

- A language that can be used to style a web page via changes in colors, sizes, spacing, fonts, and more - Styles define how to display HTML elements - Developers can control the presentation and layout of multiple webpages all at once

Client-side: XML (Extensible Markup Language)

- A markup language that uses both predefined and customized tags to facilitate the consistent sharing of information - Most XML tags are not predefined in XML. You can define your own tags using a DTD - XML was designed to describe data by tags

Animated GIF

- A single file that stores separate images within multiple animation frames - The sequence of frames over a specified time interval usually stated in frames-per-second (fps)

Who needs to follow Section 508?

- All federal government websites - Military websites - Any program or institution receiving funding from the Tech Act - Some private sector companies that do government contract work - Any website wishing to be a link on the above sites

Web Server

- An Internet computer that stores webpages - Runs server software that displays webpages and their related files upon request from a browser via HTTP Popular Web Servers - Apache - IIS - Nginx

Downloading (About Images)

- Be very careful where you get your images - Animations should not contain elements of copyrighted or trademarked works. - Putting an artist's animation or graphic on any website or collection page is an infringement of distribution rights, unless you are sure it is free and not copyrighted. - Changing a graphic without permission is an infringement of the copyright. - Do not link directly to a graphic. Don't include anyone else's URL in the BODY BACKGROUND or IMG SRC tags.

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

Animation GIF size

- Dimension of images - Number of images - Length of Animation - Extent of difference from one image to the next

Cognitive Disability

- Follow the rules of good Usability Use easy, consistent navigation, provide explanatory error or warning messages, avoid background noises or images that distract - Focus on simplicity and clarity Design a content layout that is well organized, make sure the content is easy to understand, have search or help features available

Creation process for Animation

- Frame-by-Frame animation - Animation with tweening

Client-side: HTML5

- HTML5 is the successor to HTML4 and replaced XHTML - HTML5 incorporates standards and protocols that enable RWD and other adaptive features for mobile devices - HTML 5.1 was released as a stable W3C recommendation on 1 November 2016 Provides new elements - Semantic/structural elements: e.g., <details>, <summary> - Media elements: e.g., <audio>, <video>, <picture> <canvas> element -Form input types: e.g., color, month, week

Tables

- Layout Tables arrange content on the webpage should be replaced by CSS layout techniques - Data Tables display data in row and column use row and column headers, associate the data cells with the appropriate headers

Client-side: HTML (Hypertext Markup Language)

- Markup language for describing the structure of webpages - HTML documents must be saved in ASCII format and include the file extension .html or .htm

Website Maintenance and Evaluation

- Ongoing Maintenance, Updating, and Retesting - Add and promote timely content - Include calls-to-action to keep visitors engaged - Gather necessary feedback or results - Maintain a functional navigation system - Use analytics to track webpage views - Share website content using social media - Evaluate and implement new technologies Retest site features periodically

Server-side scripting: PHP

- Open source, server-side, cross-platform scripting language for creating dynamic web pages -/ Embedded directly into HTML/XHTML -/ PHP has the file extension ".php", ".php3", or ".phtml" Why PHP? - PHP runs on different platforms - PHP is compatible with almost all servers used today - PHP supports many databases (MySQL, Informix, Oracle, Sybase, Solid, PostgreSQL, Generic ODBC, etc) - FREE to download

Website Promotion

- Promote your website to reach the target audience -// Geotargeting provides ad content based on visitor's location - Online Promotional Techniques -// Social Media -// Search Tools -// Online Advertising -// Mobile and in-app advertising -// Advertising Networks -// Affiliate Programs -// Opt-in advertising

Copyright: Four exclusive rights

- Reproduction Right - Distribution Right - Modification Right - Public performance & display right

Sound: Analog vs. Digital

- Sound in the natural world is analog - Sound must be in digital format to be used on the web - The process of converting an analog sound to numbers is called encoding or sound sampling

Time Limitations

- Students may perform and display their own educational multimedia projects for educational uses in the course for which they were created - Educators may retain their own personally created multimedia project for education purposes for a period up to two years after the first instructional use with a class - When duplication cannot be prevented (over an otherwise secure network) Educators and students may use the educational multimedia projects for a period of only 15 days after its initial real-time remote use in the course of instruction or 15 days after its assignment for directed self-study

What will happen if you are found liable for copyright infringement in the US?

- The copyright owner can sue infringes for -/damages (the owner's lost profit) -/ profits (any profit the infringer made) -/ statutory damages ( up to $30,000 per item (song, movie, etc.) and up to $150,000 for willful infringement) -/ attorney's fees and costs - The court may order impoundment and destruction of the instrumentalities that made the copying possible - It is also a criminal act to violate Federal copyright law

Fair Use Guidelines for Educational Media

- The guidelines provide guidance for the use, without permission, of portions of lawfully acquired copyrighted works. - The guidelines are intended to apply to educational multimedia projects that incorporate students' or educators' original material, such as course notes or commentary, together with various copyrighted media formats, including motion media, music, text material, and graphics illustrations.

Downloading (About Links)

- The simplest method of avoiding linking problems is to seek permission. - As a general rule, permission is never required for a hyperlink that uses highlighted text (a text link). - The following types of links may cause disputes; it makes sense to ask for permission: Deep links that bypass a linked site's home page. Links that result in framing. Image links that pull only certain elements from a site (such as an image).

CSS

- Use external stylesheets for accessibility purposes users can attach their own stylesheets instead - Use relative units (e.g., % or em) to specify font sizes rather than absolute units (e.g., px or pt) - Hide text Hide from screen readers and sighted users, hide from sighted users

Physical Disability

- User may not be able to use the mouse - Users may be using voice-activated software - Users may not be able to control the mouse / keyboard well Assistive Technologies: - Mouth stick, head wand, single-switch access, sip and puff switch, eye tracking devices, oversized trackball mouse - Adaptive keyboard - Voice recognition software

Copyrights and Fair Use conclusion

- WWW is NOT public domain. - Educational purpose is NOT always FAIR USE. - Out-of-print does NOT mean out-of-copyright. - No copyright notice is required online or in hardcopy to protect an author. - Always credit the source of your information.

Web video formats

-.avi: Name comes from audio/video interleaved; common format used by digital video cameras -.mov: Originally designed for Apple systems, now usable with 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

Downloading from the Internet

-Caution is advised in using digital material downloaded from the Internet. -Internet access does not automatically mean that works can be reproduced and reused without permission or license. -Since October 31, 1988, works no longer need a copyright notice to have copyright protection. This means any image you find on a web page may be copyrighted. -Some copyrighted works may have been posted to the Internet without authorization of the copyright holder.

Retesting Published Pages

-Confirm that all images display properly. -Make certain that no broken links exist -Ensure all interactive elements, such as forms, are functioning properly -If any changes are necessary, correct the page file(s) on your local computer and then upload the corrected page file to the server -Skim the content

"Skip" Links

-It is common for web pages to have a repetitive "navigation bar" or menu on every page. -The "skip links" feature is an anchor that links to the main content of the page.

Color depth

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

What is Fair Use?

-Section 107 of the Copyright Act allows portions of a copyrighted work to be used without the author's permission for specific purposes; referred as "fair use." -Section 107 also sets out four factors to be considered in determining whether or not a particular use is fair -The purpose and character of use -The nature of the copyrighted work -The amount and substantiality of the portion used in relation to the copyrighted work as a whole -The effect of the use upon the potential market for or value of the copyrighted work.

Testing Browsers

-Test your site at least on two most popular browsers. -Make sure that your pages work at various font size preferences in both browsers. -Expect the page display to vary; Have reasonable expectations as to what you will consider acceptable.

(Playback) frame rate

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

What cannot be protected by copyright?

-Titles, names, short phrases, and slogans -Ideas, procedures, methods, systems, processes, concepts, principles, discoveries, or devices -Works in the _________ -Government works, which include: -Judicial opinions -Public ordinances -Administrative rulings -Works created by federal government employees as part of their official responsibility

Website Publishing

1. Obtain a Domain name 2. Aquire Server Space 3. Uploading website folders and files 4. Retesting published pages

Web Content Accessibility Guidelines (WCAG)

12 guidelines organized under 4 principles - Perceivable - Operable - Understandable - Robust

Client-side: JavaScript

A client-side scripting language used to write programs that are embedded in web pages, often to make a web page more interactive.

Assistive Technology & Devices

A generic term that includes assistive, adaptive, and rehabilitative devices and the process used in selecting, locating, and using them - Switches - Gazers - Screen readers - Refreshable braille displays - Voice Browsers

Privacy Policy Statement

A privacy policy statement explains how any information submitted by a visitor or gathered automatically through server logs and cookies is used. - Personally Identifiable Information (PII) E.g., Social Security numbers, credit card numbers, names, addresses, and telephone numbers - Secure Sockets Layer (SSL) Protocol - Cookies

Ruby on Rails

A server-side web application framework for developing scalable web applications using Ruby - Open-source software - The MVC (model-view-controller) pattern - Agile web development methodology - Web Server: Mongrel, WEBrick, Lighted, Abyss, Apache, - Installed using RubyGems - Extensive use of JavaScript libraries for Ajax

Linking Disclaimer

A statement denying an endorsement or waiving liability for a potentially unauthorized activity.

Flash Animation

Advantages: - File size is small - Image quality is high - Flash animation allows interactivity and accessibility Disadvantages: - Requires plug-in, i.e., Adobe Flash Player - Not supported by all browsers and platforms

Acquiring Server Space

All files must be uploaded to a web server - Dedicated web server hosts only your website - Shared web server hosts multiple websites -/ Virtual Private Server (VPS) has dedicated space on a shared server - Cloud-based web server offers virtual storage

Live Chats

Allows customer to ask questions and receive answers in real time using text, voice, or video - Reactive/broadcast chat: visitors initiate the chat - Proactive chat: window opens automatically Chat agents: handle the visitor's query

Avatars

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

Post-testing Questionnaire/Interview

Ask testers to complete a UX survey - Did the website's content satisfy wants, needs, expectations - Was the content interesting and valuable? - Was it easy or difficult to navigate? After testing, consider all feedback. Implement suggestions that - Further the original purpose, goals and objectives; - Meet the audience's needs; - Improve the website's value, functionality, and usability

Audio Elements

Audio Files - Add sound effects - Entertain visitors with background music - Deliver a personal message - Promote a product or service with testimonial statements Podcast - Digital audio or video available to listen to remotely

Creative Commons

Builds upon the "all rights reserved" of traditional copyright to create a voluntary "some rights reserved" copyright licenses for authors and artists

Adobe ColdFusion

ColdFusion is a dynamic web applicant server & a Rapid Applicant Development (RAD) toolkit - Enable quick and easy development of data-driven websites, streamlined mobile application development, PDF generation, social media integration, etc - ColdFusion is a cross-platform web server (e.g., Windows, Mac, Linux, Solaris, etc.) - Pages are written in its server-side, tag-based ColdFusion Markup Language (CFML) - CFML has file extension ".cfm"

The Accessibility Statement

Common content -Introduce the topic -Divulge navigation assistance -Discuss font sizing -Define abbreviations and acronyms -Declare standards compliance -Offer additional resources -Explain remaining barriers

What is copyright?

Copyright is a form of protection provided by the laws of the United States to the authors of "original works of authorship," including literary, dramatic, musical, artistic, and certain other intellectual works.

Attribution and Acknowledgement

Crediting the Source - Giving a full bibliographic description where available (including the creator/author, title, publisher, and place and date of publication); AND - Citing the electronic address if the work is from a network source AND Displaying the Copyright Notice (if this is shown in the original source) - © (or the word "Copyright") + the publication year + the name of the copyright owner (e.g., © 2009 Jonathan Henke).

Media Delivery Methods

Downloadable, Streaming, Progressive Downloading or Pseudo Streaming

Comments

Enhances website interactivity

Website Maintenance and Evaluation

Evaluating Website Performance - Benchmarking -/ Using a defined standard to measure overall performance or evaluate a specific aspect of a website Web server log analysis - Web server log transactions -/ Requesting computer's IP address -/ Browser making the request -/ Date and time of request -/ URL of referring link -/ Path a visitor takes through website - Web server log analysis software

Website Maintenance and Evaluation

Evaluating Website Performance - Web analytics (also called web metrics) - Unique visitors are individual website visitors. - Repeat visitors visits more than once. - Page views determine page popularity. - Click-stream analysis identifies how a user moves through website. - Conversion rate is rate at which shoppers buy. - Monetization is the overall profit generated from sales or products and advertisements.

Uploading Website Folders and Files

FTP Client - Used to transfer files using the FTP Protocol - Provides a Split View of folders and files on a local computer and a remote computer (web server) - FTP Requires -// Site Name -// Host/IP/URL -// Host Type -// Username and Password Web Design Tool - Allows you to upload your website directly from within the program - FTP program is built in - You need to arrange for server space -// Name and URL of server -// Username and Password

Optimizing Audio Files for the Web

Guidelines - Length (shorter audio clips = smaller files) - Number of channels (Mono file = 1/2 stereo file) - Sampling rate (8 kHz for voice only audio and 22 KHz for music audio - Bit depth (lower for person speaking and higher for music)

Optimizing Video Files for the Web

Guidelines: - Length shorter 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 compression instead of lossless compression

Auditory Disability

Hearing loss: mild, moderate, severe, profound - Provide transcripts for audio only content - Provide captions or transcripts for multimedia content

Beta Testing

Involves using a prepublication version of the website, called a beta website - A staging server enables testing in an environment similar to that of a live web server - Incorporates self-testing and target audience testing

Tab index

Linearly navigate the contents

Channel (mono/stereo)

Mono: one-channel Stereo: two-channel

Attribution and Acknowledgement For non-textual materials (images, audio, video clips)

Non-text - Give credit in a multimedia source page - Give credit on the page - Give credit in the status bar - Give credit in a link title, tooltip, ALT text, etc. Text - May be included in the same document as the copyrighted text. - May be combined and shown in a separate section of the educational multimedia project

Visual - Color-blindness

Normal vision: Eyes detect red, green, and blue Color-blind: Eyes are less sensitive to one color, usually red or green - Make sure that colors are not your only method of conveying important information

Bit Depth

Number of bits used to sample the sound

Frame size

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

Sampling Rate

Number of samples obtained per second - Standard sample rates: 8 KHz (AM Radio), 11.025 KHz, 11.127 KHz, 22.05 KHz, 44.1 KHz (CD Quality), 48 KHz (DVD Quality)

Obtaining Domain Name

Obtain a domain name through accredited registration sites -Internet Corporation for Assigned Names and Numbers (ICANN) Guidelines: - Use business or organization name - Avoid abbreviations and hyphens - Add words that further specify purpose - Purchase as many TLDs as possible

Access Keys

Offer keyboard shortcuts

Front End Framework

Packages of pre-written, standardized code that provides a base for developers to use to increase efficiency in building applications. These frameworks can include CSS Frameworks like Bootstrap and JavaScript Frameworks like Angular. Utilizing a framework changes how you approach and write your code. You do not call upon a framework. Instead, the framework utilizes the code you have written in a particular way. - Bootstrap - jQuery - AngularJS - Node.js

Blogs

Popular way to promote website interactivity

Fair Use Limitations

Preparation and use of projects created under these guidelines are subject to limitations of - Copying - Distribution - Time - Portion

UX-Driven Interactivity

Put the website visitor's needs first - Provide context specific navigation - Engage and instruct the user - Save screen space - Adapt to touch screens - Respond to actions

Target Audience Testing

Recruiting a small group of users representative of your target audience and other interested parties to test your Web site.

Server Basics

Server's Root Directory - The directory that has been configured to contain all webpages - Does not necessarily appear in the URL Index Files - If no specific document is identified after a slash (/): -/ Display the contents of a default file -/ Display the contents of the directory Pathname - The notation used to point to a particular file or directory -/ Absolute Pathname -// the root directory -/ Relative Pathname -// the current directory -// one direction up

Widgets or Gadgets

Small code objects that provide dynamic web content

Video Elements

Sources for Video - Download royalty-free videos - Purchase videos - Create your own video files with A good quality digital video camera A smartphone with video recording capabilities Video-editing software

Static Website vs Dynamic Website

Static - Each page generally stays the same - Website contains fixed number of pages - Usually written in plain HTML, CSS, and client-side scripting languages Dynamic - Pages with appearance and content that change based on users input - Website connects with databases and generates webpages dynamically - Usually written in server-side scripting/programming languages

Web-based forms

Structured web documents in which a website visitor can enter information to select options - Each element is a field - Web based tools (e.g. Google Forms)

Student & Faculty Guidelines

Students - May incorporate portions of copyrighted materials when producing a project for a specific course. - May perform or display their own projects and use them for job interviews or application to graduate school. Faculty - May incorporate portions of copyrighted materials when producing a project for their teaching. - May use their project for assignments for students, remote instruction (provided the network is secure and is designed to prevent unlawful copying), conferences, presentations, workshops, or their professional portfolio

Testing Plug-Ins

Test the multimedia components on your site using different browsers, platforms, displays, bandwidths, etc.

Testing Displays

Test your site at different screen resolution and color-depths settings to make sure color display consistently.

Testing Platforms

Test your site at least on desktop, tablet, and mobile platforms -Make sure that all audio, video, and animation work fine on both platforms. -View your site on different browsers on both platforms. -Have reasonable expectations as to what you will consider acceptable.

Testing Bandwidths

Test your site for download times at different connection speeds.

Portion Limitations

The amount of a copyrighted work that can reasonably be used in a project regardless of the original medium from which the copyrighted works are taken - Motion media (Up to 10% or 3 minutes, whichever is less) - Text material (Up to 10% or 1000 words, whichever is less) - Music, Lyrics, Music Video (Up to 10%, but no more than 30 seconds) - Illustrations, Photographs (No more than 5 images from an artist/photographer, or no more than 10% or 15 works from a published collective work) - Numerical Data Sets (Up to 10% or 2500 fields, whichever is less)

Notice of Use Restrictions

The opening screen of a program (and any accompanying print material) must include a notice: -Certain materials are included under the fair use exemption of the U.S. Copyright Law -Materials are included in accordance with the multimedia fair use guidelines, and -Materials are restricted from further use.

PDF Files

There are two approaches: - Provide an alternative HTML version - Create a tagged PDF with all of the appropriate accessible markup (Adobe Acrobat 5.0 or higher) PDF Tags create a text-only representation of the PDF document; They exist for accessibility purposes only and have no visible effect on the PDF document

What can be copyrighted?

Three fundamental requirements - Fixation - Originality - Minimal Creativity

Copying and Distribution Limitations

Up to 2 copies - 1 copy for preservation purposes - Each principal creator of a joint project may retain one copy - Students may retain one copy of their personally created educational projects only for their portfolios and for job and graduate school interviews Distribution must be limited to students enrolled in the course and there must be "technological limitations on access to the network and educational multimedia project (such as password or PIN)."

Visual - Blindness

Use 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 to Refreshable Braille Displays Screen Reader Limitations - Cannot describe images - Read in a linear fashion - Rely on the HTML source code

Visual - Low Vision

Use screen magnifier - ZoomText or MAGic - Need webpage to be scalable and with high contrast

Images

Use the alt attribute for images - Make sure that the alt text makes sense and describes the actual image don't use text like "image one" - If an image consists of text, then the alt text consists of whatever text is on the image - If an image is also a link, make sure to convey that in the alt text - If an image is merely decorative, transparent, a spacer, or convey redundant information "____ alt text" - Image maps require alt text for both the image and the hot spots

Self-Testing: Validating HTML

Validation service (http://validator.w3.org/) - Checking the mark up validity of web documents in HTML, XHTML, SMIL, MathML, etc

Self-Testing: Validating Accessibility

Validation service (http://wave.webaim.org)

Accessibility Evaluation Tools

Wave, Cynthia Says, AChecker, Mobile Web Accessibility Checker

Nuerological disability

Webpage elements can be strobing, flickering, or flashing effects can cause seizures - Content that flashes more than three times per second, is noticeable large, and has bright contrast in the flashes should be avoided

Section 508 of the Rehabilitation Act of 1973

requires that all Federal information that is accessible electronically must be accessible for those with disabilities