Category Archives: HTML

2014 = FOCUS

Posted on by

No, New Year’s resolutions for this guy, but this year’s theme will be “FOCUS”. Themes is an idea, which was taken from Jared Goralnick’s blog posts from a few years ago:

Instead of doing New Year’s resolutions, which I haven’t done in decades I’m going to spend an extra five hours a week minim, hopefully at least ten hours, a week on a given subject for a month or more depending on the amount of knowledge gathering needed for a given subject. More time will be spent each week if my schedule happens to allow for more, but at least five hours a week, which will make over 250 extra hours of training over the course of the year. The week will start on Monday and ending Sunday night, which allows me the opportunity to either catch-up on the weekends of add more hours for that week.

Plan for Spending My Time

I will spend the first two to three hours per month writing down more details of what and how I’m going to spend my time learning that month. The months focus maybe to spend the next five or ten hours reading blog posts, books, etc. on a given subject before diving in to learn and work on a given subject. Or it might be to spend an hours reading a book, blog post or whatever and then another hour or to doing something like coding or painting.

Will also need to spend and extra hour or two towards the end of each month contacting people that are smart and know more about a given subject for recommendations on what to read and anything else I will need to stay focused on the next month’s subject. This time spent asking questions, for help, or recommendations will not be part of the hours each week/month focusing on a given subject.

I want to spend at least four full weeks on the subject. If the month starts or ends somewhere in the middle of the week, I will need to decide if I have learned enough or if I should spend and extra day or so continuing to learn or move on to the next subject/area of focus.

Topics of FOCUS

A lot of the topics I’m going to be focusing on for one month will hopefully help prepare me for the next month and be able to be improved upon and use this whole time. By the time, I get into the months of August and September (PHP), October and November (mySQL), and finally December these focus areas are going to get me closer to finishing my web based event registration application Hold An Event or at least build something a little less complicated, so I have some kind of finished project by the end of 2014.

Below are the months and what subject I plan on focusing on during a given amount of time. Some subjects span a few months because I have determined that to learn anything useful I will need to focus on them for a longer amount of time. Under each month/topic of focus is a list of things I can think of now that I want to focus on with more to be added at the beginning of each month or as I delve deeper into a subject.

January – Improve My Writing

  • Start with doing a bunch of reading on how to improve my writing and grammar.
  • Create outlines for some writing examples.
  • Next will be outlines of blog posts, slide presentations, etc.
  • Write short blog posts or stories to get more practice in .
  • Write Hold An Event content from the perspective of first time user/visitor to website/application.

February – Creativity, Inspiration, and Passion

  • Read about how to be more creativity, inspired, and passionate.
  • On the weekend or weekday night take a trip to the National Gallery or Art.
  • Take a bus road trip to NYC to visit MoMA or one of the other museums.
  • Spend time painting.
  • Watch YouTube videos to learn how to play the guitar.
  • Take a guitar lesson or two.
  • Do some sketching on iPad using Paper from 53 of new “I Gotta Eat Here” web application.

March – Learn Git, along with Github

  • Learn Git.
  • Learn Github.
  • Practice starting with:
    • Improving my website content.
    • Update blog posts for grammar and spelling issues.
    • HTML code, JavaScript, CSS, etc:
      • Improve or remove obsolete code.
      • Delete commented out code.
      • Make pages responsive.
  • Add META data to web pages.
  • Continue to improve my writing by re-writing website content for:
  • Accessibility improvements need to be made in the process of learning Git.

April – Learn More about Accessibility

  • Some subjects include ARIA, JAWS, Dragon Naturally Speaking, VoiceOver, etc.
  • Use accessibility information gained at CSUN to start working on being a better developer.
  • Focus on improving my knowledge about ARIA/accessibility issues the better I will be at building websites, web applications, and making JavaScript/jQuery items more accessible.

May – Better Health

Originally had this January as everyone does to start the year out on the right foot and decided, since that usually doesn’t work, why not try it later on. This allows me to focus on other subjects during the colder months and start with health once ti gets warmer, since I tend to like to walk as my exercise.

  • Starting with food (better choices, smaller portions, etc.).
  • Exercise more by walking after work and on weekends.
  • Work on having more energy to be able to stay up late to work on Hold An Event later on down the road and still feel rested.
  • Create easy ways to cook and prepare healthy meals.
  • Decide how many days during given a week I should cook/prepare my own meals.
  • Decide how to have me to bring my own healthy food to work for lunch, which saves me money.

June and July – Javascript/jQuery

  • Find best book(s), video tutorials, or blog posts to learn JavaScript.
  • Learn JavaScript and to start with the basics, maybe with Jeremy Keith’s book (DOM Scripting), if it’s still a good resource, which will make understanding and fixing jQuery issues easier.
  • Learn jQuery, since most websites now a days use it to perform their JavaScript functionality.
  • Create accessible examples, along with ARIA, error messages, etc. examples for others to use.

August and September – PHP

  • Learn the best way to optimize code.
  • Create ways to read different parts of the database by changing parms.
  • Create API to use to create, read, update, and delete records.

October and November – mySQL

  • Create databases.
  • Write new records.
  • Update/delete record (not really deleted, but mark as done using date so I will know when record was deleted).
  • Find the best way to optimize database to get information as quickly as possible.

December – Security

  • Stop denial of service.
  • Look into protecting data, but mostly user information.
  • Figure out how to add SSL to website, along with cost per year, etc.

In Conclusion

After each month, I will write a blog post to continue to improve my writing, along with explaining what books, blog posts, videos, etc. I read or watched to help me focus on that months subject. Will also rate myself on how I thought I did with a given subject and if I truly learned anything, long with to tell everyone how many hours I managed to focus on that months subject for.

So this year I plan to “FOCUS” on monthly topics and hope to be better and more knowledgeable person by the end of 2014.

What are you planning to accomplish in 2014?

How to Improve Your Search Usability

Posted on by

Doing searches on websites is a pain when you are using assistive technology. There are ways to improve how you get to the results.

Why not add an HREF anchor like #maincontent, which we used for the “Skip Navigation” article to your “Search Results URL” so those using screen readers, other assistive technologies, keyboards only, or other non desktop web browsers to skip right to the results section of the page skipping all the header, primary navigation links, and secondary navigation, etc.

You also need to make sure you have a LABEL connected to your search box for screen reader and other assistive technology users to know what they are looking at. Below is some sample code you can use as a starting point, along with some CSS to hide the search LABEL visually off screen if your design calls for that kind of things.

Search Form Code

<div class=”SEARCH“>
<form name=”Skills_Search” action=”searchResults.html#MAINCONTENT“>
<label for=”search2“>Search</label>
<input type=”text” name=”search2″ id=”search2” />
<input type=”submit” value=”Search” />
</form>
</div>

Results of Search Code



To hide the word “Search“ just add to the hide class used for the skip navigation blog post this can be done easily by adding “.search label” to the CSS.

Here’s a live example of the search box and search results example page.

Hope this little change to your website was helpful to you and it will make accessing the internet for those using assistive technologies better.

If you have any questions or ways to improve this, please leave a comment or get in touch with me.

BarCampDC2 – October 18, 2008 – 9:00 AM – 6:00 PM

Posted on by

As you may have heard the registration for the for the BarCampDC2 event will open this evening (September 22, 2008) at around 8:00PM.

Here is some of the important information before registering you will need to know.

When

Saturday, October 18th, 2008, 8:00 AM – 6:00 PM

Where

Center for Digital Imaging Arts at Boston University
1055 Thomas Jefferson Street NW
Washington, DC 20007

Please make sure to only register if you know for sure that you can make it, since space is limited to the first 180 – 190 people. Also at time of registration you must choose your t-shirt size. The shirts should be American Apparel as I have been told and we will have women’s and men’s shirt sizes. For us larger guys, like myself we are planning on having sizes up to 3XL.

The ONLY place to register for the BarCampDC2 event is at the EventBrite website. Putting your name on the BarCamp wiki will NOT get you a seat at this event. Currently we have panel suggestions and will be adding more stuff there as time gets closer.

We are planning to have the panels be 45 minutes long and then have 15 minutes between sessions to get to the next room or mix and mingle with other BarCamp participants. Some more information to keep in mind.

  • Registration at 8:00 AM – 8:45 AM (submit panel talks at this time to help move things along)
  • Welcome BarCampers at 8:45 AM – 9:30 AM
  • Panels – 10:00 AM -6:00 PM
  • Lunch – around 12:30 PM
  • Event Ends at 6:00 PM
  • Clean up 6:00 PM -7:00 PM
  • Bar hopping afterwards 7:30 PM

We are looking for a few people to help set up Friday night (Oct 17) from 6:00 PM – 8:00 PM (?). Along with others to help out with registration, handing out t-shirts, helping with food, people to monitor rooms that others are not bring in food or drinks into the rooms, lunch, clean up after, etc.

So if you want to help please e-mail me at jfciii [at] jfciii [dot] com or on direct message me on twitter – @jfc3.

If we have not contacted you about sponsoring part of the event (max $250) and you would like to please contact me. For your sponsorship you will get your name on the back to the t-shirt (if payment in t-shirts are sent to printing), plus like two minutes in front of one of the panels about you or your company.

Hope you all will enjoy the event that a bunch of us have been working really hard to pull off.

How to Set Up and Use Access Keys

Posted on by

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.html” 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:

Text sizing buttons with Small (S), Medium (M), and Large (L) options.

  • “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.

Long Week in Technology Last Week

Posted on by

It’s been a long week in technology for me this week. I spent about five or six hours on both last Saturday and Sunday working on the website for my accessibility talk for the Refresh DC meet up on Thursday night. This is the prototype for the DC Tech Skills website I’m building so the Washington, DC, technology community can post their skills and then find others that either have the same skills or might need help on projects for skill they need.

Monday was long day at work  with one meeting that ended up needing a few changes and a few other meetings were canceled. The rest of Monday night was spent updating the “Accessibility“ slides I had prepared for “BarCamp DC“ talk back in mid August, 2007.

Tuesday was spent working on getting stuff ready for a move of code to PROD, which never happened. I took a few hours off in the beginning of Tuesday night to go to the “Opportunities & Challenges of the One Laptop Per Child (OLPC) Project” meet up. It was really cool to be able to get to use some of the other features of the OLPC has besides the internet. We had a “Chat” going  and afterwards demonstrated the “Write” and “Memorize” activities to people. Then it was home for about three more hours of presentation work.

Wednesday was filled with meetings and luckily a few were canceled. I’ve had more meeting in the last few days than I normally have in a month. I got approval to move code to PROD for one project. I have like two others that just need user/client review and approval and I’m good to go to PROD.

I got home from work around 5:00 PM and started working on  the final dozen or so slides. Things were going well so I took an hour off to watch the Discovery Channel. I forget what the show was, but it must have been good that i took and hour off to watch it. Once that ended I started back on the presentation. The first thing after the TV show my laptop would not type. There was a problem with the keyboard. I saved things and re-booted.

Around 12:15 AM my keyboard  stopped working a second time. I used the mouse to save everything before re-booting the PC.  The only problem was that it never re-booted. At that point I guess I must have said a few four letters words, since I had not uploaded a copy of my presentation to the server or made a backup in over a day.

After walking into the living room and then the bedroom to try and figure out what I might have to do next. I remembered my friend from Rochester, NY, saying that COMPAQ laptops sometimes won’t re-boot if you have them plugged in all the time and don’t let the battery drain every so often.

So the first thing I did was take the battery out and just used the power cord and that did not work. Next was put the battery back in and unplug the PC and that worked. First thing after twittering about the problem now at like 1:45 AM I put a copy of everything on the server, and two different thumb drives. By 1:00 AM, I was back and finishing the presentation.

I ended up finishing it around 2:15 AM and spent the next bit of time re-copying the updated information to the server, thumb drives, and into another folder on my machine. It was then 2:30 AM and I tried to get to sleep but was to wound up. Finally went to sleep after 3:00 AM. The latest night in five days. All the other nights it had been between 1:00 and 2:00 AM.  I’m getting to old to stay up five night that late.

Thursday morning it started sinking in that close to 100 people were now going to show up to listen to me talk about accessibility. It was just a bit surreal, since when I was at SXSW 2007, I went to most of the accessibility talks and only 50 or 60 people where there to listen to the likes of Derek Featherstone, Ian Lloyd, Patrick Lauke, Glenda Simms (Glenda the Good Witch),  and many others.

These people are proven accessibility experts. I felt like just some guy from Washington, DC consulting for the Army that is really passionate about accessibility.

I had sent the link to two friends to look over early in the morning. I got some feedback from one that I should run the presentation through a spell checker. I said it’s hard when it is done using “S5“, which is HTML based. A guy from the office said paste it into word and run it through, while overriding the code parts. I did this over my lunch. My friend read the whole thing over during his early lunch and liked most of it.  He thought the topic might be to long to get done in the hour I had along with a few other suggestions to improve it some. While on my lunch I made most of his changes along with using a bit of his wording, since it made more sense than what I had first written.

One of the people from work noticed that my accessibility talk was the most popular event on Upcoming for the DC area that day. Once I looked it up I got rid of the DC part and looked and it was the third most popular event  for that day anywhere in the world. The first place event was a  new Flickr feature meet up in San Francisco and then a “MacWorld” meet up in San Francisco. Our event was even about 25 people larger than the London “Pub Standards” meet up. This was just unthinkable to me. It put me in a bit of a panic most of the morning and early afternoon.

After the lunch of updating  my presentation I was much better and the panic slowly went away. The rest of the afternoon flew by because I had to finish some work and move other things to PROD server.

I headed home around 4:30 PM to pickup my computers and get to the Refresh DC meet up early to make sure everything was ready and working correctly. By this time it seemed like everything was okay and I was relaxed on the Metro trip there.

I guess I finally realized I had been thinking about this presentation for the last few months and what I wanted to present. So when it finally came to doing the presentation all the stress, lack of sleep, and everything just went away.

I thought the presentation just flowed out of me. Part way through the presentation I asked the audience if I was going to fast and if they were understanding it. They said no my pace was fine and that yes they understood my talk. I thought I was talking like a million miles a minute. At another point I asked how long it had been and they said like twenty minutes. I was not sure if that meant I had talked for that long or that was how much time I had left.

I got to questions around 8:14 PM (I looked at the computer clock). I guess I had kept the presentation to close to an hour, since we waited a little bit because of the poor weather (snow with rain at rush hour). During the question time I took two photos of the audience of about 50 or 60 people, while someone was answering an audience members question that I had no experience or answer for.

After the talk and then at Cafe Asia everyone I talked to really like the presentation and had only good things to say to me about it and this was other people than my friends.

Now for the general overview of my talk, for those that might have missed it.

  1. Explained a few personal stories of why I’m so passionate about accessibility. One being seeing all the soldiers that come to Pentagon from Walter Reed Medical Center. Meeting Pat Pound at the Knowbility booth in Austin, TX at SXSW 2007. Also having Charles L. Chen show me his great free software, which are two Firefox extensions. One being a page reader called “CLiCk Speak“and the other being “Fire Vox“, which is a paired down screen reader.
  2. The next section was on using “Skip Nav” and “Access Keys” and how useful they are to people that need them.
  3. After that I then talked a bit about the “Color and Contrast” of website and that Text plays an important part of usability for everyone that is sighted.
  4. It was then on to how to build proper data tables by having a “Summary” element to explain what the table contain, along with a “Caption” of the table instead of having header in front of it. The final piece about tables was that you need table headers and then information on you cells to identify what pieces go together.
  5. We got into the longest section of the talk which was about “Forms”. I explained that you need “Fieldsets” and “Legends” to group similar content together and say what it was. The next idea was to put “Labels” and “Input Controls” in either “UL” or “OL”, so screen readers will tell you how many items are there and people will know how many fields they need to fill in. I also explained all the other “Input Controls” in a form and their attributes.
  6. I explained how the “Search” box needs to have the word “SEARCH” in front of it so you can tell what it is, along with using the word “Required” on fields. This is done using the same technique that you used for “Skip Nav”.
  7. The last thing I talked about before questions putting error messages in the label, such as “User name can not contain spaces”.

A lot of the slides have examples of code or links to other articles or my examples of items in use.

The busy technology week did not end with my “Accessibility” talk, no I attended the “DC Adaptive Technology“ talk at the MLK library Saturday afternoon. Because of the issues with Metro maintenance I was not able to stay for the whole talk. The part I did see was about using “Dragon Naturally Speaking“ some scripting code to allow people with visual issues to use Microsoft Word and other products much easier. It was cool watching the guy giving the presentation talk into his microphone and then seeing the words on the screen. By using certain commands he could start, stop, or edit the files that he was in. He could even get software to open and close.

This has been a long week in technology for me and it probably will not be the last one like it. I have also been working on a few different accessibility blog posts to be posted in the next week or so.

Please tell me of similar weeks like this you have had or if you enjoyed my presentation.