More on Web Accessibility

For reminds:
There are 10 simple guidelines

1. Use meaningful title attributes
2. Place important interactive elements higher up the web page
3. Don’t begin title attributes with the same text
4. Use headings correctly
5. Use distinct and meaningful page titles
6. Use skip navigation
7. Label your form elements
8. Test your web pages with CSS and JavaScript disabled
9. "See" what it’s like to use assistive technologies
10. Web accessibility is not about degrading the overall user experience

How People with Disabilities Use the Web This is W3C publish a document that have lots of example and cases to give the overview of the person with handicaps use the web.

WebAIM (Web Accessibility In Mind) promotes universal design on the web and has plenty of articles on web accessibility.

This web sites shows lots of articles
The most interesting is the Rich Media Accessibility,
For example the Captioning Windows Media,Captioning Quicktime, Captioning RealPlayer..




The articles help to enhance the websites more accessibility.

Web Template (web2.0)

This is the last blog for the course,
so i want to introduce a great web template website to all of you.
Since we have learn about the accessbility and usability of design the webpage.
We can build a success website with a good and attractive layout design.

However, design is a kind of art, some of us may not have a creative imagine to create some trend and modern design. Also, lots of people are talking about web2.0
how to build a website have a high color contrast, big font size, Big icon, rounded button ....etc.

WordPress Themes, can give us an idea.

This is a free site to download lots of themes of web2.0 template.
The package of the files have the CSS maybe is a php, XTHML webpage files.

We can choose the theme we like and modify them to become a modern, attriactive also base on the guilelines of Accessibility and usability, I think we can have a success webpages.

We can become a professional website designer now!

Reference: http://www.themes2wp.com/download-wordpress-themes/web-20

Google Web Toolkit

In this course, we already run-though the approach of User-Centered Design (UCD). There are lots of tools help the software developer to develop their website in the implementation and development phase.

Google Web Toolkit is a simple and easy to use toolkit that allow developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language.

Overview of Google Web Toolkit (YouTube) introducing the web toolkits overview.

Developer can installing with Eclipse or either. There are tutorials in the website to teach you how to using this toolkit.


There are forums, gallery share the developers coding. The coding also can be share with your developer teams which seems like as Google doc.



Google has lots of powerful tools can be use to help the web become following the accessibility and usablilty guidelines, let discover and explore more about them.

Web 3.0

Although there are not a definition of Web 3.0. However, lots of experts and professionals are discussing this topic.

In the Web 3.0, all of the websites, links, media and database can be intelligent, automatic transmission, for example, a Web site announces a meeting, all the related information and programs behind the meeting can be simply point by the users. Besides,the time, place topics on the list of the meeting may immediately log and sent to the relevant person by the GPS.

In the future, there may be lots of network applications that you cannot imagine such as personal financial advisor, through the intelligence system to help families plan for retirement, or as applications for university /institute of education consultants, or predict the next in the first best-selling songs.

There are lots of definition of Web 3.0

1. Some professional said the first step towards to Web 3.0 is the "internet" in to a database
2. The road to the evolution of artifical intelligence
3. Semantic Web and the realization of SOA
4. Evolution of 3D

Although there is still a variation of Web 3.0, however, Web 3.0 will be a totally different Web generation. "Nothing is impossible" !

There is a funny imagination video of Web 3.0
Let have a look in it, just 1:00.

Web 3.0 Betatest


Reference:
http://elearning.iiiedu.org.tw/blog/term/2/20080429/45
http://www.alistapart.com/articles/web3point0/

Useful web information site

Six Revisions - This site provide useful information for the web developer.
Everyday, it provides a article which is practical, useful. Sometimes are some new modern standards, modern techniques.

The articles are written by a few web developers and designers. They all are professional on this field.

There are lots of tools introduce for the testing the accessbility, color design, web analytics..etc.
For example
14 Brilliant Tools for Evaluating Your Design’s Colors
this articels introduce famous free tools to evaluate the web site design colors.
This really help on design the website.
Those tools are easy to use and user friendly to perform a beautiful color schemes.

It also provides tutorial for the visitor to follow those tutorials can speed up the develop workflow processes,
For example,
Create a Clean Business Web Template Design in Photoshop
I love this tutorial, it shows the step clearly and detail.
we can follow those steps to perform the design very fast.

As this site update the articles on everyday.
We can keeptrack on this sites to learn more about the web information.

Usability Testing Templates

Usability Testing ,
This websites provides a details guidance on usability testing with participants with disabilities.

1. Preparing for Usability Testing


2. Conducting Usability Testing


3. Reporting Usability Testing


4. Checklist for Usability Testing


5. Recruiting Screener

Each parts cover in deeply but in a simple and precisely.
These five parts are important in Usability Testing.
The interesting parts is the Recruiting Screener , it provide a list of question need to be consider in recruiting the users for testing. It helps to guide the developer to set the recruitment guidelines.

Usability Testing Template (PDF) , this PDF file is a detail usability testing template,

This template is simple, especially the questionnaire for the test users, It really simple and precise for his product, we can learn from it to provide a simple questionnaire to get the users opinions.

Reference:
Usability Testing
Usability Testing Template (PDF)

Web Accessibility for All

I have found a useful website to know more about the web accessibility.



First of all, this website apply lots of accessibility techniques.
For example, you can ajust the text size by yourself. It really helps the elderly to view your websites.





Also, it get the skip navigation to skip the navigation direct the user to the main content. This make the blind person easier to listen what the main content is without reading the long and useless navigation(if they are access the web thousand of times).

This web also provide somes tutorials and examples for web developer to reference.
We can learn the accessbility skills from them.





"Learn by Examples" is the most interesting page. It provide two pages: one page is applying inaccessbility skills, another one is apply accessbility skills. We can compare these 2 pages to clarify the accessbility of the site.

Besides it suggests some evaluating accessibility tools and show some showcases.
Learn from examples and fault are the ways to success.
Therefore, we should learn more and more .


Web Accessibility for All

Free SEO tools

SEOMOZ.org provide a multiple purpose free SEO tools with a simple registation.



After register an account in this website. It provide lots of tools for the websites.
We can easy to take 5 websites ranking by using the RankTracker.
We need to provide the links in the textbox is fine.





There are lots of Free tools to check the SEO.
For example. We can view the popular searches in those Search Engines
It can view the previous date with different search engines( ie. Google, Yahoo, Ebay, Amazon...)


This can also help to get the keyword when we develop our websites.



This "Trifecta" can score the website to measuer the pages importance and popularity. It predicts the page's ability to rank well in search engines, the reach of your brand awareness and how well you currently draw in traffic.

It also provide some opinions for you to improve the site.
To teach the developer how to get a higher ranker and score base on they existing websites.

There are still lots of free tools provide in SEOMOZ.org.
I think it is good to share with you.

There are also plenty of free online SEO tools.
The following website provide 15 popoular free SEO tools.
http://www.socialseo.com/the-top-15-free-seo-tools.html

Selction fonts when design the Web

When choosing the fonts of our web, we should consider the font types:

1. fit the character of your site,
2. are easy to read on a computer screen, and
3. are widely available across many browsers and operating systems.

There are basically two types of fonts: serif and sans serif.
Serif fonts are those that have fine cross-lines at the extremities of the letter.
Sans serif are fonts that don't have serifs.

The formation of serifs helps to guide the eye around the letter form and improve readability.

Examples of web-safe Serif fonts would be

and .

Georgia:

• Readibility On Screen: Very good. It is the best serif font for on-line reading.
  
• Character: Modern, friendly and professional.

Times New Roman: :

• Readability On Screen: Acceptable for font sizes of 12pt. and up, but terrible for smaller sizes.
  
• Character: Serious, formal and old fashioned.
• 
  

Sans Serifs have become the most popular typeface that is used online because of low screen resolutions that show serifs poorly, especially on smaller fonts sizes and details.

The most common Web-safe font examples for sans serif would be and

.

Arial*:

• Readability On Screen: Not the worse but definetely not the best, especially at small sizes, when it becomes too narrow and the spacing between characters too small.
  
• Character: Has a streamlined, modern look but is also plain and boring.

*For Mac users, the equivalent of Arial is Helvetica.

Verdana:

• Readability On Screen: Exceptional. It's wide body makes it the clearest font for on-screen reading, even at small sizes.
  
• Character: Modern, friendly and professional.

Generic	Font	Windows 9x/2K/XP	Windows Vista	Mac Classic	Mac OS X	Linux Unix
serif	Cambria
	Constantia
	Times New Roman
	Times
	Georgia
sans-serif	Andale Mono
	Arial
	Arial Black
	Calibri
	Candara
	Century Gothic
	Corbel
	Helvetica
	Impact
	Trebuchet MS
	Verdana
cursive	Comic Sans MS
monospace	Consolas
	Courier New
	Courier

*The green marks show very common fonts, the yellow shows not so common but all are generally accepted as web safe.

It is very important to include fall back fonts when creating the font selection of web site. It is because it can ensures the readers get the same look and feel of your web site. These are very simple rules to follow in order to ensure that our website gives a universal experience by using web standards and web safe fonts.

Reference:
http://www.theinternetdigest.net/archive/websafefonts.html
http://www.10e20.com/blog/2009/09/11/fonts-for-the-web-what-works-best/