This document provides a summary of the timeline and strategies for an ARTDM 171 class. It outlines the schedule for March through May, with key dates for research, design, development, production, and final project presentations. It also includes sections on search engine optimization, accessibility, and homework due for the class. The document provides guidance on developing websites that can be found by search engines and used by people with disabilities.
1. ARTDM 171, Week 15:
Accessibility and SEO
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-171/
2. Timeline
March April May Last day of class
9 16 23 30 6* 13 20 27 4 11 18 25
Strategy
Present final projects
(two days)
Research and discovery
Design
Interaction design
Validation
Visual design Site development
Prototyping (Text-only HTML)
Layout and styling (CSS)
Present
User interface dev revisions
(images and backgrounds)
Production
Page production
(add final content and images)
4. Final Project Presentations
Day 1, May 11 Day 2, May 18
• Brian Tang • Maya Jahja
• Nichelle Fair • Teresa Gade
• Bryant Mendoza • Mengru Liang
• Stephanie Lauber • Shealia Chambers
• Claudia Hinojosa • Rashmi Luthra
• Edmond Wong • Sam Peskin
• Sharina Martin • Victoria Ramirez
• Annie Kuhn • Samantha Lemmon
• Eric Vincent • Sarah Rubin
• Fred Almeida • Cassie Boam
• Julia Tivenan • Tim Chun
6. Site Statistics
• Site Stats may be provided by your
hosting company
‣ Dreamhost Stats
• Google Analytics – Easy to use and free
6
7. What is SEO?
• A way to develop a website to attract visitors
by winning top ranking on major search
engines for selected keyword phrases
• Requires careful placement, wording, and
analysis of keywords
• Considered part of an Internet marketing
strategy
8. How do search engines work?
• Spiders – Search engines have programs or
scripts that can go to any Web page and
follow all the links on that Web page (also
called Crawlers)
• At each page the spider copies and saves the
content, url, title, meta data, and associates
keywords with the page
• Ranking algorithms – in search results, sites
will be ordered based on their relevance
9. Optimizing for search
• Content – rich with keywords
• Title and Meta tags – still useful
• Links and site index – internal links
• File names – using dashes instead of
underscores
• Link popularity – get sites to link to you using
the right keywords
• Avoid JavaScript for navigation
• Avoid spamming
• Avoid redirects
10. Meta Tags
<meta name="keywords" content=“mexican, food,
taco, salad, spicy, recipe, California,
cuisine" />
<meta name="description" content=“This
delightful recipe will teach you how to make
taco salad, with lettuce, cheese, tomatoes, hot
peppers, beans, and beef." />
<meta name="author" content="Harry Smith" />
Resource: Meta tag builder
11. Search Engine Optimization (SEO)
• Google tips on optimizing your site:
http://www.google.com/support/
webmasters/bin/answer.py?
answer=35769
12. Preventing indexing – robots.txt
• Spiders look for a file on your site called robots.txt. You
must have this on your site.
• Robots.txt is used to tell spiders which pages they can and
cannot index
• Create a file called robots.txt, using your own folder names:
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /~joe/
• Put robots.txt at the root of your website
• Useful to limit lots of files or directories
More info: http://www.robotstxt.org/robotstxt.html
13. Meta tag to stop indexing
• Use meta tags within the headers of
individual pages
<html>
<head>
<meta name=”robots" content=”noindex,nofollow">
</head>
More info: http://www.robotstxt.org/meta.html
15. What is Web Accessibility?
• A way of enhancing the design of your
website so that people with disabilities
can use it
• There are specific laws that provide
guidance
o Section 508 of the Rehabilitation Act
o Americans with Disabilities Act (ADA)
Learn more: http://www.w3.org/WAI/
16. Accessible images
• Contrast – Users with colorblindness may not
perceive low contrast graphics
• Color – Denoting meaning with color is
problematic, do not rely on it soley
• Embedding text in graphics – Prevents
accessibility as well as search engines
• Alt text – Use alt text to denote meaning
and purpose in image tags
More reading - http://www.webaim.org/
techniques/images/
17. Section 508 of the Rehabilitation Act
• Section 508 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.
• The law applies to all Federal agencies.
• http://www.section508.gov
18. Americans with Disabilities Act (ADA)
• The ADA prohibits discrimination on the
basis of disability in employment, State
and local government, public
accommodations, commercial facilities,
transportation, and telecommunications.
• This is a Civil Rights issue for people with
disabilities.
• http://www.ada.gov/
19. How do you check for Accessibility?
• Use Dreamweaverʼs Reporting tool.
o Go to Site > Reports…
• Set your own standards, try to meet them,
and make them known on your site
• Examples:
o http://www.whitehouse.gov/accessibility/
o http://pharmacy.ucsf.edu/access/
20. Homework, due May 11
• Work on your final projects!
All files must be turned in to me next
week!
The U.S. Rehabilitation Act of 1973 prohibits discrimination on the basis of disability in programs conducted by Federal agencies, in programs receiving Federal financial assistance, in Federal employment, and in the employment practices of Federal contractors. The standards for determining employment discrimination under the Rehabilitation Act are the same as those used in title I of the Americans with Disabilities Act. http://en.wikipedia.org/wiki/1973_Rehabilitation_Act