Entries Tagged 'Web Development' ↓

section 508: webdesign aesthetics vs ethics

“Access by everyone regardless of disability is an essential aspect”
—Tim Berners Lee of W3C

President Clinton passed the Rehabilitation Act Amendments in 1998. The newly amended acts holds Section 508, which refers to the web. Section 508 stated that in 2001 those with disabilities must be able to access all federal electronic documents and information. The amended law effectively limits the options and tools used by designers and programmers when designing websites. The law has its pros and cons, but positively forces the web to be accessible to those with blindness, color blindness, or motor skill disabilities. The law currently applies to only federal or federal supported websites. Section 508 enforcement cross web is inevitable in years to come. We as designers should be aware of the negative and positive affects that spawn from this law. Understanding ways to satisfy this law will prepare us for the future and help those the law was intended for.

The law focuses on making content understandable and navigable, assigning alternate text to describe images, functioning resizable text, and providing content that can be presented to the user as audibly or visually. Satisfying these parameters takes a bit of know how and organization. HTML markup must be error free and hierarchically correct. This means denoting headers before paragraphs and using objects like lists and blockquotes appropriately. Along with HTML, CSS must be properly marked. There are software, browser add-ons, and websites that can be used to check both HTML and CSS code for errors and warnings. All images can be Section 508 compliant
by adding a description of the image in the alt attribute in the image tag. Using an image map for navigation is poor technique, but can be used in conjunction with CSS or a secondary text based navigation. Technology like Adobe Flash or Javascript can create great visual enhancements but do not satisfy Section 508 Standards. When using these technologies be careful to properly tag your Flash document to explain its purpose and do not rely on Javascript to create your main navigation. If a site is all flash, there should be an optional text-based version of that site to satisfy Section 508. Sitemaps are a great way to provide alternate navigation with titles. There are free sitemap generators that will scan your site and create a list of links by page titles in a neat Section 508 compliant XML based code. Most validation and web tools are free; web sources are located in the left column.

Having a site that is Section 508 compliant makes it easier to find for indexing services like Google or Yahoo. Indexing services use coded robots that are programmed to search the web for new links or content. Like the individuals Section 508 accompanies too, the robots cannot process animated flash, sound, video, or images. By properly tagging these objects your site will be easier to find and navigate for both parties. Better SEO page rankings awarded to Section 508 compliant sites with proper valid markup, a bonus reward for the extra work done and a great selling point to clients.
Guidelines from WC3

Provide equivalent alternatives to auditory and visual content
Don’t rely on color alone
Use markup and style sheets and do so properly
Clarify natural language usage
Create tables that transform gracefully
Ensure that pages featuring new technologies transform gracefully
Ensure user control of time-sensitive content changes
Ensure direct accessibility of embedded user interfaces
Design for device-independence
Use interim solutions
Use W3C technologies and guidelines
Provide context and orientation information
Provide clear navigation mechanisms
Ensure that documents are clear and simple

Developer Resources 

Web Developer Tool Bar
http://chrispederick.com
Google Sitemap Crawler
http://gsitecrawler.com
Web Content Accessibility Validation Tool
http://www.cynthiasays.com
Web HTML and CSS Validation
http://validator.w3.org
Content Sources

Cohen, Daniel J., and Roy Rosenzweig. Digital History: A Guide to Gathering, Preserving, and Presenting the Past on the Web. Philadelphia: University of Pennsylvania Press, 2006. p. 137-40
“Section 508: The Road to Accessibility.” Section508.gov 27 Nov 2007
“W3C’s Section 508 and UAAG Requirements Mapping Suite.” W3.org 27 Nov 2007
“Web Content Accessibility Guidelines 1.0.” W3.org 5 May 1999

Halloween Hacks: 1337 Pumpkin Carving

Figured this year the porch needed something leet.

In the light...

Leet Coding Pumping Carving

1337 Pumpkin in action...

1337 Pumpkin in action

Happy Halloween Losers

Browser Statistics: Cheers to that sly fox

A beer to mozillaToday marks a day, the day Mozilla's Firefox takes on IE6 (Microsoft Internet Explorer 6). W3schools posted the statistics for September 2007: IE6 34.9% Firefox 35.4% IE7 20.8%. One year ago September 2006 Statistics had Firefox at 27.3% and IE6 at 55.6%. Why this is such a big deal, why does is call for a fresh cold one to be cracked and cheered to Mozilla? IE6 was released late August 2001 with partial support of CSS level 1. Cascading HTML Style Sheets (CSS) level 1 was finalized in December 1996 by the World Wide Web Consortium (W3C), CSS level 2 finalized November 1997. CSS allows web designers and coders to control a websites look across infinite pages with one file. The one file also saves download times and makes HTML easier to read for disabled users and search engines. All the beautiful sites and cool websites that are made without Flash use CSS in many ways. It took Microsoft 9 years to implement a browser (IE7) that supported CSS level 2 (CSS2). Until Mozilla started chipping user percentages away from Microsoft in 2003, Microsoft software was responsible for rendering 85% of all pages internet users browsed on the web.

Needless to say, web designers small and large have struggled to have all pages correctly render across all browsers (mozilla, safari, and internet explorers), there have been many hacks to fix IE rendering bugs. Hacks which were the last resort in the trick box of the developer after frustrating over single pixel lengths that destroyed layouts.

Why has Firefox surpassed IE6? Two main reasons: One, Firefox is customizable, more secure, and renders faster. Two, with the introduction to Windows Vista users are opening up new computers in IE7 or getting IE7 via windows update in Windows XP. IE7 is a much better browser than IE6 and supports CSS2. If Microsoft had only done this 5 years ago I wouldn't have to keep Windows XP installed with IE6 for debugging.

So today I crack open a cold one and salute the mighty developers at Mozilla that pushed Microsoft to get their shit together. I salute to the demise of IE6 and throw it back for less debugging headaches. Call your web dev buddies and hit the bar, see you there.

P.S. Respect to Netscape and Opera, but they haven't had the success in reaping up users like Firefox did.

Conjuncting Javascript Variables with Strings

To add a variable mid string in javscript use the plus operator ( + )
Example:

var page;
page = "50";
document.write("Delete Page " + page + "?");

or when used within a function

function confirmDelete(delUrl,page) {
if (confirm("Delete Page " + page + "?")) {
document.location = delUrl;
}
}

How do I resize a pic to make the file size under 50kb?

In photoshop hit ctrl+shift+alt+S (for macs command+option+shift+S) all at the same time, or under file>save for web. This prepares image using the imageready engine for web; this tool allows you to control the file size and type.

image ready optimize

To make the file under 50kb you must adjust the settings to the right (see image) In gif or png you choose how many colors you want; in jpg you use the quailty slider. There are also other options play with them, they can make a big difference. You can monitor the size by looking to the bottom left of the images ready dialog box as seen in the picture.

Keyword Conversion with Google Analytics

This is by far the best keyword search engine hit that has ever hit DCE... Hopefully I can add to this list,keyword conversion

Installing Analytics in Yahoo Stores Shopping Cart

Install analytics yahoo stores shopping cartThere is a way to track your yahoo stores shopping cart and transaction hits using Google Analytics without paying extra money from third party software. Before starting make sure your whole site is urchined. Log into your Store Panel in yahoo small business, under Order Settings click Checkout Manager. In Checkout Manager click the tab Checkout Wrapper. The very bottom of the Checkout Wrapper page is an optional footer text area, input your urchin as the last bit of code in the text box (or the only if there is no other code) The image above illustrates where the footer text area is located.

yahoo shopping cart analyticsGive analytics a few days and start checking Content Drilldown under Content Optimization. Your instial shopping cart page will come up as the folder /cgi-bin and the transaction pages come up /ymix. (image to right)

Paypal Donation