Project 52 Plans

Posted on January 14, 2010 by John F Croston III

I’m still working on my plan of how to complete Project 52, but I first want to thank Anton Peck for coming up with the idea to get himself and others to blog at least once a week for a year. Anton at first thought that maybe 25 or at most 50 of his friends would participate and ended up with over 700 last time I checked the list.

When Anton first came up with the idea on his blog I was all for participating, because I didn’t do a whole lot of blogging last. Instead I attended a few web conferences, ran a few (Accessibility Camp DC and BarCamp DC) with help from others, along with starting a monthly accessibility meet-up here in Washington, DC.

Donate to Charity

In the comments of Anton’s blog post about Project 52 I even talked about why not try and do some good out of all this by donating $10 to charity for ever week I miss blogging, creating code examples, making a “How To” videos of either accessibility related items or whatever. So each quarter I will donate $10 per week of missed blogging to a local charity like Martha’s Table or to Kiva.

Blog Post Ideas

Some of the things I plan on blogging abut this year are listed below:

Accessibility related issues and best practices
SXSWi – spring-break for geeks in Austin, Texas
Access U – accessibility conference in Austin, Texas, put on by Knowility
Accessibility Camp DC
BarCamp DC
Accessibility DC monthly meet-up
Food and wine
An Event Apart DC – great web standards conference put on by Jeffrey Zeldman and Eric Meyer
creating my web application (more to following in a future post)
lessons learned from things I have done or from others (friends and experts)
book reviews – mostly technology
spending more time with friends
more writing

So those are some of my ideas for blog posts and plans for the next 50 weeks. Might have to write a few accessibility best practices or code examples posts in advance for times like when I’m at SXSWI for a week and won’t have much time to blog. I already have six or eight subjects with titles and a short outline started from ideas from last year, now to just do the writing and coding required.

Are you planning on doing more blogging this year or just more reading and other work?

Please tell me what you are doing or suggestions for me to do in the comments.

Wish me luck.

Need Help Deciding which Web Application to Build

Posted on July 14, 2009 by John F Croston III

Now that the house issues have been mostly settled I can get started on building one of the many small web applications that I have been tossing around. Some of these ideas I have been thinking about for what seems like years and others just a few months. I have a good 7 or 8 different web applications that I want to build and I’m looking for some help in determining which one(s) I should build first.

Reasons Why

I need to get other peoples opinions on which will be useful them and more importantly the general public and might in the long run I would be able to charge enough to cover my hosting costs with ads or annual fees. I know that probably all of these have been done many times over, but there are a few reasons why I want to build them and they are:

Learn PHP and MySQL
Use the newest accessibility implementations of WAI-ARIA and possibly HTML 5
Use microformats were applicable
Test newest features in screen readers – JAWS, NonVisual Desktop Access (NVDA), etc. and web based browsers (Firefox 3.5, IE8, etc.)
Use Web Standards
Test abilities for user interface design (UI or UX)
Create 508 compliant and usable examples for others to learn from for accessibility presentations.

But most importantly to create web applications that I would like to use personally.

Important Part

Now comes the important part, which from the following list of web applications should I build? I added a short description of what they do along with different ways I could help pay the hosting cost. I even created one page prototypes just so you could see what types of information is stored in each one. The style (CSS) and layout (UI/UX) will be changing. I just took some old CSS and put these together.

Online URL/bookmark storage which allow user to have X URLs/bookmarks stored online for free, charge per X items stored, set up annual fee, or show ads of some type. I started this one a while ago and stopped for some odd reason. I’m tired of having bookmarks on two home computers (MAC and PC), along with on work one. Yes, I have heard of delicious.com and ma.gnolia.com.
Store individuals personal contact information and either have X individuals for free, charge per X customers, annual fee, or show ads of some type. Always looking for an address or phone number when at someone else’s house or office and would like to have it be web based.
Online wine inventory – personal use hosted by me with ads for up to X entries or small annual fee for limited number, bigger ones for people with 1000s of bottles of wine. Yes, I know corkd.com is around. I started mine about the same time they (Dan Cederholm and Dan Benjamin) did, just did not have enough get up and go to get past midway with it. Once Cork’d came out I stopped for the most part. So this one is a good way completed using ASP and Microsoft Access, which only needs to be converted to PHP and MySQL.
Online wine inventory – for wine stores to allow their customers to store their wine collection information and then place their (wine store) ads on website (charge monthly fee to store per customer or flat rate by amount of storage and bandwidth used).
Mini adhoc conference information service (no prototype just yet), which would help groups like BarCamp create main information page about event and later at event add an online schedule of talks (allow addition of rooms, topics, speakers, etc.). Place AdSense and/or links of event sponsors on pages. I created similar conference room scheduling web application for old job so have the general idea for it already in my head of what it would need. Not sure if this one exists, but I assume it does somewhere and have not really looked if it does.
RSS/XML Feed reader, which either would have X feeds free, charge per X feeds over free amount, annual fee, or show ads of some type. Created one to pull in a feeds and either display all records contained in RSS/XML, first X amount, or only display records that contained certain words or phrases. There are way to many of them around.
Store multiple weather location information, which would allow you to save multiple zip codes or city/state/country combinations to keep track of home, vacation location, other friends, or families weather. Same idea for covering hosting costs as previous ideas.
Technology Skills or Skill Swap repository, which would allow members to put in there different skills and then have the rights to search for others for help with questions or for projects. Would have ability to make personal information private so as not to get spammed. Could charge fee for those just looking to find people for work or projects, charge for recruiting type ads, or just place AdSense on pages.

Conclusion

So please do me a great favor and list the top three applications in order you think I should build them so I can get an idea of what others are thinking.

Thanks, greatly in advance for your time and effort for helping me learn new things and decide which web application to build first. I will post findings in a few weeks along with the order in which I will build them in, since a few could be bundled together to make an over arching suite of applications.

How to Hide “Required” from Visual Users, but Make it Available for All Others

Posted on August 27, 2008 by John F Croston III

How do most people usually designate that a field is “Required” in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made “bold” and “RED”. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word “Required” within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is “Required” to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.

<label for=“username”>RequiredUser Name</label>

To hide the word“Required” you will be able to use the same CSS used for hiding “SKIP NAVIGATION” by adding a new class or stating that LABELs with an “EMâ€œ in them will be displayed.hidden off the page.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word “Required” from browsers.

.skip a, .skip a:hover, .skip a:visited, label em {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” minus 10,000 pixels and a “TOP” position of auto. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.

<label for=“username”>RequiredUser Namemust not contain spaces</label>

The CSS to do this is fairly simple and follows below.

label strong {
color: #aaa;
font-size: .85em;
font-style: normal;
position: absolute;
top: 0;
right: -275px;}

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.

Don’t forget to listen to your FORMs by using the Firefox extension Fire Vox. Here is an example how placing extra notes or instructions would look in a FORM, along with some “Required” field examples.

I hope this post is useful and further explains how to hide visual the word “Required” from my Accessibility presentation “Is your Website Accessible?”, please look for the most current presentation closer to the top of the list.