John F Croston III

I follow the great chef Jamie Oliver on twitter (@Jamie_Oliver) and knew he had been award the 2010 TED Prize. He mentioned on his twitter account about it and then linked to his speech after wards. I opened the link in my browser and figured I would back to them.

Last night I could not sleep because I had a few things on my mind. So I noticed that my good friend Justin Thorp(@thorpus) had written on his food blog (Justin Loves Food) an article about Jamie’s prize. It was entitled “Seriously, Watch Jamie Oliver’s TED Talk About Food Education!”.  I read this post and watched Jamie’s TED prize video and the following is the comment I left on his blog.

My Response to Jamie’s TED Prize Talk

The following is my response to reading Justin’s blog post and then watching Jamie Oliver’s TED Prize wish.  I felt so passionately about it I created my own blog post so more people will be able to see it an hopefully help with the problem.

I have been following Jamie Oliver for a few years on his different cooking show and have been a big fan of his style of cooking. I even watched Jamie’s series on how to improve the British school lunch system.

It took a bit of time to get the parents, students, and even the lunch ladies to start realizing that real food was better for the students. Once the students started eating better they paid more attention in classes and improved their grades and all they did was improving their eating habits at school and at home.

While at TEDxMidAtlantic this last fall (2009) there was a great talk by Tony Geraci, who is a “Fresh Food Advocate” for the city of Baltimore. You really need to watch Tony talk passionately about getting kids foods that are good for them. I strongly recommend that you watch his video from TEDxMidAtlantic - http://tedxmidatlantic.com/live/#TonyGeraci

So impressed with Jamie’s idea that I’m up at 3:25 AM after watching his TED wish that I’m writing this comment to make sure I get this out to you and your followers.

I know I have a way to go myself to improving my food habits and health. By starting to do more home cooking myself and bringing my lunch to work that will help me out in the long run. Doing so will improve my health without a lot of extra effort and if I add some exercise it will make it even easier.

P.S. I even listed to Tony’s whole talk while writing this comment. Please take the time to watch both of these powerful videos.

Start with Yourself

Please watch both Jamie’s TED talk and Tony’s TEDxMidAtlantic talk, along with read all the linked articles.

Finally, please start with yourself and spend more time cooking real food as Tony says. This will make you fell better and set a good example for others and even your children if you have any.

I plan on improving my eating habits and if you see me straying please remind me of that fact.

What do you think you can do to help improve this countries obesity problem?

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.

1. 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.
2. 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.
3. 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.
4. 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).
5. 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.
6. 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.
7. 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.
8. 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.

Access keys allow people to use the keyboard instead of the mouse to perform certain functions. Mostly to move from page to page or a different section of the current pages content. By using web standards you can improve peoples use of your website.

Example HTML Code

The code involved to adding access keys to your website is very simple, you just have to add one extra piece of code to the links as shown below.

<li id=“about”><a href=“about.shtml” ACCESSKEY=“1” tabindex=“300”>About</li>

Internet Explorer(IE), Firefox, Opera, and Safari each have their own way of using access keys. In most web browsers, the user uses the access key by pressing “ALT” (on PC) or “CTRL” (on MAC) simultaneously with the appropriate character on the keyboard.

The following are the different ways to use the access key function combinations broken by PC or MAC and then browser type.

PC

• IE - press the “ALT” key + access key and then press the “ENTER” key to active the action.
• Firefox 2.0 - “ALT” + “SHIFT” and access key.
• Firefox 3.0 - “ALT” + “SHIFT” + access key and the “ENTER” key are required. I finally personally tested Firefox 3.o on Vista Basic and sometimes you need to hit “ENTER” and other times you don’t. (UPDATED)
• Opera - the user presses “SHIFT” + “ESC” followed by the access key (without “ALT”). Doing this will display the list of access keys over the current web page.

MAC

• Firefox 2.0 - “CTRL” + access key.
• Firefox 3.0 - this has been changed so that the key combination only focuses on the link, “CTRL” + access key and an “ENTER” is required after the access key combo. I have not personally tested Firefox 3.o as of yet.
• Opera - “SHIFT” + “ESC” followed by the access key (without “ALT”). Doing this will display the list of access keys over the current web page.
• Safari - “CNTL” + access key.

Example Key Combinations

Here is an example of three access key combinations you can use for IE:

• “ALT” + “S” to change to small text
• “ALT” + “M” to change to medium text
• “ALT” + “L” to change to large text
• Finally you must click or press the “ Enter ” button.

These key combinations are for IE on the PC and are used to set the text sizes that you want. You can make the text larger or smaller based on your preferences. This is what we have set up on my work website.

From some of the reading I have done I noticed that people that are creating mobile websites and applications, when doing so they are using just the numbers to make it easier for their users to navigate the website and application.

Please give these a try on your websites. I have access keys set up on my website, so please try using them with different browsers. If you have any issues please leave a comment.

This blog post about PodCampDC (April 20, 2008) is way over do. I noticed it in my work in progress post list. I had started the post a long time ago and decided I would still post the few items I had listed. That I after making them into full thought and not just a short scribble of a few words.

Below are the main points I took away from the day.

When creating a podcast you should have consistent branding and highlight the program or product not the people in podcast. That way if you ever have to get new people for the show it will be less likely to die.

Justin Thorp said “You should make stuff sharable across communities”. Meaning that if you have content you need to let others be able to get at it no matter the way or where they are.

It is very important to make sure to use the same name across communities (MySpace, Facebook, Twitter, blog, Mixx, Digg, etc.) so people can easily find you. When new applications/websites start up make sure to get your use name and any other user names that you are know for so other can not grab them and then start bad mouthing you or your products.

I noticed during Aaron Brazell (Technosailor.com) and Geoff Livingston’s live podcast District of Corruption some people where getting hung up on names of websites and the like. Sometimes a website may start out as one thing and then morphed into what it is today. The real important piece is the content not the name.

There were a few things that I thought could have been better and they were? Not needing two locations, meaning that I saw no point in having to get to the Spectrum Theatre an hour early just to go over to the final location after about ten minutes of announcements. The other issue had to do with having multiple five plus rooms on three different floors and having to take the stairs to get to them.

Hope these points are useful even though they are like two months over do.

Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to all.

• People using screen readers are forced to listen to a long lists of navigation links, sub-lists of links, and other elements before arriving at the main content.
• Keyboard users are forced to tab through all of the top links in order to reach the main content.
• Main content is not usually the first thing on the page or in the source order.
• People using Blackberries, Treos, etc. have to scroll through a huge list of links.

Now that I have listed some of the reasons for skip navigation here is the code that I use in my websites.

<body>
<div class=”hide”> <a href=”#MAINcontent”>Skip to Main Content</a> </div>

… navigation and other stuff goes here …

<a name=”maincontent”></a>
<p>This is the first paragraph</p>

Please notice that the HREF anchor has “MAINcontent” in the link part, by using “MAIN” in front of it you can still use “content” as an anchor somewhere else on the page for some odd reason. The other point to notice is that link text is “Skip to Main Content” because some screen readers or their voices might mis-pronounce the link text if it was “Skip to Content”. The screen readers have issues with the word content.

Below is the CSS that I use in my websites to not display the skip navigation link(s) accept for the first time you tab through it then after you use it it does not show up on the screen anymore. I changed the ID information from the ones used in the original article by WebAIM on how to implement skip navigation (thanks, Justin Thorp). The article uses the ID of “skip”, I figure you might want to use it hide other items or you might want to have more than one “skip” type link, so I changed it to be a “CLASS” instead of an “ID”. The reason I changed the “ID” to .HIDE from the article was so you could use the CLASSs for other things like visually hiding the word “Required” for web FORM LABELs.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it.

.hide a, .hide a:hover, .hide a:visited {
position: absolute;
left: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}

.hide a:active, .hide a:focus {
position: static;
width: auto;
height: auto;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers.

I hope this post is useful and further explains skip navigation from my Accessibility presentation “Is your Website Accessible?” at Refresh DC.