Indiana Web Contest

Mark your calendars! Save the date! The SkillsUSA National Web Design Contest will be here before you know it. As a member of the Executive Committee for the SchoolofWeb.org, I will be there to assist and cheer on the participants. I hope to see some of you there too.

Due to some room scheduling conflicts that have yet to be resolved, participants in the 2012 Northeast Regional competition at Ivy Tech Community College in Fort Wayne should be prepared to develop their Web documents using an ASCII editor (e.g., Notepad++). The college is hosting another competition (CCDC) on the same day, and the organizers claimed all of the rooms that we typically use for the SkillsUSA competitions. As a result, we will not have access to any CINS rooms that have our typical software installed on them. I am working feverishly to accommodate the special needs of each of the computer-related competitions, but I was completely caught by surprise by the CCDC competition. If anything changes, I will post another update to this blog. Until and unless something changes, however, Web contestants should be prepared to do all development of their HTML5 and CSS documents without the aid of GUI editors. Given the heightened security surrounding the nature of the CCDC competition, no SkillsUSA participants will be allowed to enter the building with personal computer equipment. Security guards will be posted at various points on the first and second floors of building 3 (where the computer competitions take place), and movement from room to room will require security badge and ID. Having SkillsUSA and CCDC compete at the same time should prove interesting, if nothing else. Stay tuned to this blog for further updates.

The statewide showdown for SkillsUSA Web Contest is fast approaching! You are probably asking yourself, “What can I do to prepare myself for success?” That is the purpose of this blog. I will give you some tips, hints, and advanced “warnings” about what will be expected of you in the state competition. Since many of you will be seeing this blog for the first time right before your regional contests, you may not have time to incorporate many of the suggestions into your work for Regionals, you can still use the local competition to help you prepare and practice for State. I would like you to consider both Regional and State contests as “practice runs” for what to expect at the Nationals. I work closely, and sometimes weekly, with the group that facilitates the national SkillsUSA Web Contest; as a result, my tips and tricks can go a long way toward informing you of those expectations.

Where to Start

If you have not already done so, you need to begin using the new HTML5 standard for all of your Web documents. This is the direction in which the Web is going; no one can stop it. If we want to advance the Web, designers and developers must advance the standards. As a result, the state competition will require all Web documents to validate to the HTML5 DTD. If you do not have any resources that provide you with instruction on the standard, I strongly recommend any book by O’Reilly Press.

A Simple Beginning

Here are some simple steps you can use to begin transitioning your documents to HTML5.

1. Include the HTML5 !doctype declaration as your first line of code.
2. Include the lang attribute in your root element: lang="en".
3. Immediately after the title element, include the charset attribute in a meta element: charset="utf-8".
4. Use CSS exclusively for style, avoiding the temptation to use any HTML elements or attributes that have traditionally (and poorly) been used to manage presentation.
5. Use the new HTML5 form elements and attributes as much as possible to facilitate ease of use on the Mobile Web.
6. And finally, but by no means the least important, begin to wean yourself off of the div element in favor of the new semantic HTML5 elements: header, nav, section, article, footer, aside, figure, audio, video, and so on.

What was wrong with div?

The div was a multipurpose container that provided browsers, screen readers, and other Web agents with absolutely no indication of how a box was being used within the Web page. It was so versatile that it became overused and literally degraded the accessibility of our Web page structure. By contrast, HTML5 is a semantic language. In other words, the semantic HTML elements self-describe how each box is being used within a page. By using a semantic element, the name of the element itself tells all Web agents accessing the page the context in which that box should be handled. Screen readers will “know” that a segment of code is intended to serve as the navigation for the page because you delimit it with the nav element. Browsers will (eventually) have an intuition of sorts about what parts of the page are supposed to provide the logo area, header, and exactly where the footer is located. In fact, at some point in the future, browsers on both mobile and desktop devices will have the ability to collapse an entire page down to an expandable outline view to put the user in complete control of how the page is navigated, not to mention providing screen readers and other Web agents with the most logical (and semantic) way to parse a page they have ever had. Users will be able to activate the outline view and click a series of “plus” and “minus” icons to the left of major components of the page to navigate. This will bring Web development into the 21st century. I know. It’s about time!

SHOW ME FOR PETE’S SAKE!

I know, you are probably saying to yourself, “Enough already! Let me see a sample page!” Well, Here is a link to an example of a fully validated, HTML5 form on a page styled with CSS3 (another new standard with which you should begin to familiarize yourself. More on that later.)

Now What?

As I said at the beginning of this post, you may not be able to fully HTML5-ize the site you create during your regional competition. It does take some time to change your thinking about developing Web pages, dump the div (or at least scale back its abuse), and begin taking advantage of the wonders of semantic elements. However, that should not stop you from starting now. The most current version of every browser (well, with the exception of Internet Exploder) is fully capable of rendering most if not all of the new HTML5 elements. Start writing semantic code in HTML5 now! If you or your advisors have questions about the new language and how it should be implemented in upcoming SkillsUSA contests (regional, state, and national), feel free to contact me by email (bsullens@ivytech.edu) or through Twitter (see home page).