NOVATNAK UCF 3176c

Design for Accessibility

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." -- Tim Berners-Lee Who benefits from increased accessibility? > A person with a physical disability. > A person using a slow Internet connection. > A person using an old, outdated computer. > A person using a mobile phone. Legal requirement: Section 508 Standards: WCAG 2.0

Hexadecimal Color Values

# is used to indicate a hexadecimal value. Hex value pairs range from 00 to FF. Three hex value pairs describe an RGB color.

W3C - World Wide Web Consortium

> Develops recommendations and prototype technologies related to the web. > Produces specifications, called Recommendations, in an effort to standardize web technologies. > WAI - Web Accessibility Initiative

Website Organization

> Hierarchical - Clearly defined "home" page, navigation is major site sections. Often used in corporate websites. > Linear - A series of pages that provide a tutorial, tour, or presentation. Sequential viewing. > Gestalt or Random - No clear path through the site, used with concept/artistic websites; not typically used for commercial sites.

ICANN - The Internet Corporation for Assigned Numbers and Names

> Nonprofit Organization > Coordinates the assignment of internet domain names, IP addresses, protocol parameters, protocol port numbers.

Web Color Palette

A collection of 216 colors; displays the most similar on the Mac and PC platforms. Hex values: 00, 33, 66, 99, CC, and FF

CSS Layout

A formal set of rules for how elements display and interact with each other when rendered on screen. Every element on the page can be visualized as a rectangular box with separate properties of padding, borders, and margins.

Internet Backbone/Infrastructure

A high capacity communication link that carries data gathered from smaller links that interconnect with it.

Intranet

A private network contained within an organization or business used to share information and resources among coworkers.

Extranet

A private network that securely shares part of an organization's information or operations with external partners.

<link ...> element

A self-contained tag. Placed in the header section. Purpose: associates the external style sheet file with the web page.

HTTP - Hypertext Transfer Protocol

A set of rules for exchanging files such as text, graphic images, sound, video and other multimedia files on the Web. Web browsers send HTTP requests for web pages and their associated files. Web servers send HTTP responses back to the web browsers.

FTP File Transfer Protocol

A set of rules that allow files to be exchanged between computers on the Internet. Web developers commonly use FTP to transfer web page files from their computers to web servers. FTP is also used to download programs and files from other servers to individual computers.

MIME Type Multi-Purpose Internet Mail Extension

A set of rules that allow multimedia documents to be exchanged among many different computer systems.

IP - Internet Protocol

A set of rules that controls how data is sent between computers on the Internet. IP routes a packet to the correct destination address. The packet gets successively forwarded to the next closest router (a hardware device designed to move network traffic) until it reaches the destination.

Thumbnail Image

A small image configured to link to a larger version of that image.

CSS3 Gradients

A smooth blending of shades from one color to another. linear-gradient radial-gradient

Target Audience

A specific group of people within the target market at which a product or the marketing message of a product is aimed at. Can be formed of people of a certain age group, gender, marital status, etc...; e.g. teenagers, females, single people. A combination of factors, e.g. men aged 20-30 is a common target audience. Other groups, although not the main focus, may also be interested. Discovering the appropriate target markets and determining the target audience is one of the most important activities in marketing management. Don't try to reach everyone, you'll appeal to nobody.

XML - eXtensible Markup Language

A text-based language designed to describe, deliver, and exchange structured information. It is not intended to replace HTML - it is intended to extend the power of HTML by separating data from presentation.

URL - Uniform Resource Locator

A type of URI which represents the network location of a resource such as a web page, a graphic file, or an MP3 file.

Three Click Rule

A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.

CSS Positioning - Floating

Allows elements to be shifted left or right until their outer edge touches the edge of a containing element or the body of the document. Floated elements are removed from the normal flow.

CSS Sprites

An image file that contains multiple small graphics that are configured as background images for various web page elements. Modern technique to optimize use of multiple icon or small images. Saves overhead by reducing the number of HTTP requests made by the browser.

Growth of the Internet

Asia 50.1% Europe 17.0% Latin America 10.3% Africa 9.4% North America 8.6% Middle East 3.8% Oceania / Australia 0.7%

Writing for the Web

Avoid long blocks of text. Use bullet points. Use headings and subheadings. Use short paragraphs.

WCAG 2.0

Based on four principles, POUR: Perceivable: Content must be perceivable. Operable: Interface components in the content must be Operable. Understandable: Content and controls must be Understandable. Robust: Content should be Robust enough to work with current and future user agents, including assistive technologies.

Graphic Design Best Practices

Be careful with large graphics! Use the alt attribute tos upply descriptive alternate text. Be sure your message gets across even if images are not displayed. Use animation only if it makes the page more effective and provide a text description.

CSS Rounded Corners

Border Radius -webkit-border-radius -moz-border-radius border-radius

Inline Elements

Border closely outlines the element content.

Text Design Considerations

Carefully choose text in hyperlinks, avoid "click here". Hyperlink keywords or phrases, not entire sentences. Check your spelling.

Using Color on Web Pages

Computer monitors display color as intensities of red, green, and blue light. The values of red, green and blue vary between 0 and 255. Hexadecimals represent these color values.

<span> element

Configure a specifically formatted area displayed in-line with other elements, such as within a paragraph. There is no additional empty space above or below a span it is inline display.

CSS box-shadow Property

Configure the horizontal offset, vertical offset, blur and radius of an image.

CSS3 text-shadow Property

Configure the horizontal offset, vertical offset, blur radius, and valid color value.

CSS3 Opacity Property

Configure the opacity of the background color.

CSS background-image Property

Configures a background image; by default background images repeat or tile.

CSS Border Property

Configures a border on the top, right, bottom, and left sides of an element. Consists of border-width, border-style, border color.

<hr> Horizontal Rule Element

Configures a horizontal line.

CSS Padding Property

Configures empty space between the content of the HTML element and the border Set to 0px by default. padding-bottom padding-left padding-right padding-top

Image Element

Configures graphics on a web page. <img src="#" alt="ok"> src attribute: image source alt attribute: alt text height: sets image height width: sets image width

Web Client

Connected to the Internet when needed. Usually runs a browser; uses HTTP or HTTPS. Requests and receives pages and data from a server.

Figure Element

Contains a nit of content that is self-contained, such as an image, along with one option figcaption element.

Web Server

Continually connected to the internet and runs services such as Apache, Nginx or IIS. Uses HTTP or HTTPS. Receives a client's request and responds with the necessary status code, web page and associated files.

Design Principles - CRAP

Contrast - Add visual excitement and draw attention. Repetition - Repeat visual elements throughout design. Alignment - Align elements to create visual unity. Proximity - Group related items.

Sources for Graphics

Create your own. Download from a free site. Purchase / download professional-quality graphics. Purchase a graphics collection. Take digital photographs Scan your photographs Scan your drawings. Hire a designer to create graphics.

A top-level domain (TLD) identifies the right-most part of the domain name.

Current generic TLDs .com, .org, .net, .mil, .gov, .edu, .int, .aero, .asia, .cat, .jobs, .name, .biz, .mobi, .museum, .info, .coop, .post, .pro, .tel, .travel, .xxx

Block Elements

Default width of the element content extends to browser margins or specified width.

Progress Element

Displays a bar that depicts a numeric value within a specified range.

Images and Accessibility

Don't rely on color alone. > Some visitors may have color perception deficiencies. Use high contrast between background and text color. Provide a text equivalent for non-text elements. > Use the alt attributes on your image elements. If your site navigation uses image links, provide simple text links at the bottom of the page.

IP Address

Each device connected to the Internet has a unique numeric IP address. These addresses consist of a set of four groups of numbers, called octets. An IP address may correspond to a domain name.

The Box Model

Each of these dimensions controlled with CSS rules. Problem: browsers have a default style sheet declaration where margins and padding may not be 0. Solution: set margins and padding to 0 with the universal selector, * Best solution: utilize a reset.css stylesheet.

Why semantic markup?

Easier to browse your site when CSS is absent. Easier to browse your site with a screen reader. Easier to maintain your site because developers can easily read the code. Usually less code than nonsemantic markup; makes it faster. SEO - Page headings help organize your page by importance.

External Style Sheets

Extension .css Contains only style rules Does not contain HTML

Favorites Icon

Favicon; square image associated with a web page. May display in the browser address bar, tab, or favorites/bookmarks list. Configured with: <link rel="icon" href="favicon.ico" type="image/x-icon">

Graphics & Multimedia

File size and dimensions matter. Provide for robust navigation. Antialiased/aliased text considerations. Provide alternate text. Use only necessary multimedia.

RGBA

Four values required are: Red, green, blue and alpha (transparency).

Server

Fulfills the request and transmits the results to the client over a network; web server.

CSS Advantages

Greater typography and layout control. Style is separate from structure. Styles can be stored in a separate document and associated with the web page. Potentially smaller documents. Easier site maintenance.

URI - Uniform Resource Identifier

Identifies a resource on the Internet.

Types of Cascading Style Sheets

Inline - Body, style attribute Embedded - Head section, <style> tag. External - Separate text file with .css extension; associated with the link element in the page header. Imported - Similar to external, imported via the external page.

CSS Positioning - Relative

It's possible to alter the normal flow of the document using relative positioning. CSS Properties: "top", "right", "bottom", and "left". Negative pixels are allowed.

Domain Name

Locates an organization or other entity on the Internet. Domain Name System > Divides the Internet into logical groups and understandable names. > Associates unique computer IP addresses with the text-based domain name you type into a web browser.

Popular Uses of the Internet

Mobile Access Blogs Wikis Social Networking and Media RSS Podcasts (time shifted media)

Making Color Choices

Monochromatic (different tones, same color generally). Choose from a photograph. Begin with a favorite color.

Color Schemes

Monocromatic, choose from a photo, begin with a favorite or preferred color.

Site Organization

Place images in their own folder. Code the path to the file in the src attribute.

CSS Positioning

Position can be "normal flow", "absolute", or "floating". Relative -- modifier of "normal flow" > The position of each element is relative to other elements declared near in HTML. > If an element E1 is nested inside of another element, E2, E1's position is relative to it's position within E2.

Americans with Disabilities Act (ADA)

Prohibits discrimination against people with disabilities.

Navigation Design

Provide clear labeled navigation in the same location on each page; most common -- across top or down left side. Consider navigation bars, breadcrumb usage, graphics for navigation, dynamic navigation, sitemaps, search functionality, skip to content hyperlink.

Accessible Website

Provides accommodations for individuals with visual, auditory, physical, and neurological disabilities.

CSS

Provides the functionality of style (and much more) for web developers. A flexible, cross-platform standards-based language developed by the W3C.

Reasons for Internet Growth in the 90s

Removal of the ban on commercial activity. Development of the WWW by Tim Berners-Lee at CERN. Development of Mosaic, the first graphics-base web browser at NCSA. Personal computers were increasingly available and affordable. Online service providers offered low-cost connections to the internet.

Client

Requests some type of service such as a file or database access from the server; web browser

Accessibility & Images

Required: Configure alt attribute. > Alt text content to convey the meaning/intent of the image. > Not the file name of the image. > Use for purely decorative images. Recommended: > If your site navigation uses image links for the main navigation, provide simple text links at the bottom of the page.

Section 508 of the Rehabilitation Act

Requires that government agencies must give individuals with disabilities access to information technology that is comparable to access available to others.

Guidelines for Using Images

Reuse images. Consider image file size and quality. Consider image load time. Use appropriate resolution. Specify dimensions. Be aware of brightness and contrast.

Protocols

Rules that describe the methods used for clients and servers to communicate with each other over a network. No single protocol that makes the Internet and Web work. A number of protocols with specific functions are needed.

Markup Languages

SGML - Standard Generalized Markup Language > A standard for specifying a markup language or tag set. HTML - Hypertext Markup Language > The set of markup symbols or codes placed in a file intended for display on a web browser.

Email Protocols

SMTP (Outgoing) Simple Mail Transfer Protocol POP3 (Incoming) Post Office Protocol (lives on the server) IMAP (Incoming) Internet Mail Access Protocol (lives on the server and locally stored on connected devices)

TCP/IP Transmission Control Protocol / Internet Protocol

TCP/IP has been adopted as the official communication protocol of the Internet. TCP and IP have different functions that work together to ensure reliable communication over the Internet. TCP's purpose is to ensure the integrity of communication; breaks files and messages into individual units called packets.

Domain Name System

The DNS associates domain names with IP addresses.

Internet Standards and Coordination

The Internet Society - A professional organization that provides leadership in addressing issues related to the future of the Internet. IETF - Internet Engineering Task Force; RFC - Requests for Comments. IAB - Internet Architecture Board.

Client/Server can describe a relationship between two computer programs.

The client and the server.

HTML5

The current working version of HTML.

Universal Design

The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.

World Wide Web

The graphical user interface to information stored on computers connected to the Internet.

CSS Positioning - Absolute

The position of each element is relative to the edge of the containing parent element. Absolutely positioned elements will be removed from the normal flow.

Image Optimization

The process of creating an image with the lowest file size that still renders a good quality image, balancing image quality and file size. Photographs take with digital cameras are not usually optimized for the Web. > Reduce the file size of the image. > Reduce the dimensions of the image to the actual width and height of the image on the web page. Can be done in programs such as Adobe Photoshop and GIMP.

Country Code TLDs

Two character codes originally intended to indicate the geographical location of the website. In practice, it is fairly easy to obtain a domain name with a country code TLD that is not local to the registrant. .tv, .ws, .au, .jp, .uk

Network

Two or more computers connected together for the purpose of communicating and sharing resources.

Design EASY TO READ Text

Use common fonts, appropriate text size; use strong contract between text color and background color and also use columns instead of wide areas of horizontal text.

File Names for Images

Use only lowercase letters; some servers are case-sensitive. Do not use punctuation symbols or spaces. Do not change the file extensions. Keep your file names short but descriptive. > i1.png is probably too short. > myimagewithmydogonmybirthday.pnp is too long. > dogbday.png may be just about right.

Style Sheets

Used for years in Desktop Publishing Apply typographical styles and spacing to printed media.

LAN - Local Area Network

Usually confined to a single building or group of buildings.

WAN - Wide Area Network

Usually uses some form of public or commercial communications network to connect computers widely dispersed geographical locations.

WAI

W3C's Web Accessibility Initiative

WCAG

Web Content Accessibility Guidelines

CSS Syntax

body { color: blue } = selector { property: value }

Configuring Border

border-bottom border-left border-right border-top border

CSS background-repeat Property

repeat-y is the y axis (up and down) repeat-x is the x axis (left to right); no-repeat will not repeat the background image.