Indiana Web Contest

“The Road to Nationals” Documentary

Barry J. Sullens — Thu, 24 May 2012 18:32:10 +0000

Today, May 24, 2012, I visited Anthis Career Center to record some interviews with Ms. Nikki Craig, Rob Dukarksi, Russ Gibson, and Justin Neeley. Ms. Craig is one of the SkillsUSA advisors at Anthis, and she teaches the Computer Programming class in which Rob Dukarski is enrolled. Rob and Russ are this year’s State winners who are headed to Nationals in KCMO. Justin was on the winning team in 2010 that also made the trek to Nationals. I plan to interview the other half of the 2010 team, Bobby Parker, very soon. I’ll also be revisiting Anthis to get input from Ms. Wise and Ms. Gillie who also had a hand in preparing the 2012 winners during their career at Anthis. Once all of my video footage is filmed for these “before the trip” interviews, I’ll compile them into a short documentary “The Road to Nationals,” and post it here. The editing and post-production work can take a little time, but I’ll get the finished product out here as soon as I can. Since I’m headed to KC too, I’ll be following Rob and Russ around with camera(s) in hand, documenting their experience at the national competition. I’ll blog and Tweet from the contest hall, so keep your eyes on your email (if you subscribe) or Twitter if you follow! This year promises to be one to remember.

The Anthis SkillsUSA Wall of Fame

KCMO, here I come!

Barry J. Sullens — Sun, 06 May 2012 19:49:48 +0000

Well, my flight plans are made, bags are packed (figuratively), and I’m ready to go. Between now and then, I plan to meet with the winning team, and their advisor, for a sort of “road to KC” interview. Stay tuned…

Check out the brief video tribute to the 2012 State Contest

Barry J. Sullens — Mon, 23 Apr 2012 01:06:49 +0000

This year’s contest was certainly one to remember. I’ve put together a brief video to help commemorate the hard work and excellent results achieved by all. Why not take a minute (actually 1 minute 33 seconds) to reflect. Again, on behalf of the judges, Heather Jacob and Travis Klotz, and myself, congratulations to everyone for a job well-done.

A Saturday to Remember

State Contest Feedback

Barry J. Sullens — Mon, 23 Apr 2012 00:22:26 +0000

Here are some of the observations made by the judges regarding the team submissions for this year’s contest. Look on the supplements page for the figures referenced below.

Not all pages were completed.
- The project required only three (3) pages.
- Three hours should be adequate time to complete three (3) pages.
Some teams made good efforts at including CSS3 properties like rounded corners and shadows.
Some teams attempted to use values for attributes that are invalid in XHTML (e.g., absmiddle).
The form was given to you unformatted. Your instructions were to align the form appropriately. This was a perfect opportunity to use an HTML table for alignment. Some teams did not attempt to align the form elements at all resulting in a design that looked unprofessional. (see Figure 1)
The form was also given to you without any element names. Your instructions were to use the PHP processing script to determine what to use for the names of the form elements. Some teams left the underscores in their source code rather than changing the underscores to the correct field names. (see Figure 2) As a result, the form did not function properly.
Some teams named the checkbox elements incorrectly. (see Figure 3)
Avoid using file names that contain spaces or mixed case. The use of CamelCase is a reasonable exception if it is used with absolute consistency. (see Figure 4)
When using Dreamweaver, do not forget to adjust the title of each page. Some teams left pages with “Untitled Document” in the ; element. Visitors to your site will leave thinking the developers do not care enough to take care of important details. (see Figure 5)
Some teams allowed the logo and navigation area to occupy too much space, leaving more important information “below the fold.” While logo and navigation are important, nothing trumps the importance of actual content.

Projects were graded on the following criteria:

Design and Layout
Programming and Code
The Design Process
Teamwork and Professionalism

The judges considered how the teams used storyboards and wireframes in the design process. Using proper amounts of white space, principles of alignment, and the importance of content above the fold were among the other considerations. For programming and code, the judges examined several aspects of the site source code. These aspects included valid markup, the use of an external style sheet (as required), proper indentation of source code, and adequate use of embedded comments. Of course, projects that implemented the new HTML5 semantic elements instead of the departing XHTML 1.0 standard earned priority attention.

Interpersonal interactions between team members weighed heavily in this year’s contest. Teamwork and professionalism, especially when in the direct presence of the client, cannot be emphasized enough. Team members should avoid arguing or bickering in the presence of the client. Contestants should maintain a professional atmosphere by handling disagreements carefully and discretely. We noticed another issue that should never happen during a competition or while working in the presence of the client: contestants sleeping, napping, or playing online games like Minecraft during the competition. In short, that behavior is absolutely unprofessional and unacceptable at a SkillsUSA contest.

On a positive note, I was pleased to see teams incorporating HTML5 semantic elements, new form elements, CSS3 styling to promote a page’s look and feel from amateur to professional. By pressing forward with these emerging standards, developers take an active role in advancing the Web into a future of greater cross-platform and cross-browser compatibility as well as mobile readiness.

Each team had aspects of their project that demonstrated their strengths. In the wake of the competition, I challenge each contestant to take inventory of your strengths and identify corresponding weaknesses. By turning a weakness into a strength, you will fulfill your potential as a Web professional. Never accept defeat; conquer it. In the words of one of the judges, think of the State contest as “a chance to show off what you have learned and to further hone your skills. Use the opportunity wisely.”

I can say this without hesitation: with each passing year, the projects get more challenging, and the competitors get more impressive. The work you accomplished in three and a half hours rivals what I have seen from college students working an entire semester. Congratulations to you all for the fine performance this year, and all the best to the team advancing to Nationals.

2012 State Exam Review (KEY) has been posted

Barry J. Sullens — Sun, 22 Apr 2012 08:54:02 +0000

As promised, I have converted the written exam used for the 2012 State Contest into a study guide of sorts. You can find the link on the Documents page of this blog site. You may use this online exam to quiz yourself and review the questions and topics that were on the written exam this year. You may recall there were two errors on the exam discovered during the contest:

On question 3, the value of each placeholder attribute was "000-000-0000" as the pattern of a phone number, even though the question related to an email address.
On question 25, two of the responses were possible matches.

Both of these inconsistencies have been corrected, so the online study guide should be error- and confusion-free. I hope you find this resource helpful as you continue to construct your knowledge of HTML5, CSS3, Web design, and Web development topics.

One last note: I am still compiling the team project feedback. I appreciate your patience. This week, I was a bit under the weather for several days, and that has thrown me behind on all of my todo items, including the contest feedback. I am recovering nicely and will complete the feedback as promptly as I can.

Like us on Facebook

Barry J. Sullens — Sat, 21 Apr 2012 04:03:18 +0000

This will be a quick post. I’m furiously compiling feedback from the State contest that took place this past Saturday. In the meantime, I’ve expanded our accessibility by creating a Facebook page. Why not check it out. Now you can follow what’s happening with the SkillsUSA Web Contests on our blog, on Twitter, and now on Facebook!

Congratulations Rob and Russ

Barry J. Sullens — Mon, 16 Apr 2012 04:04:41 +0000

Rob Dukarski and Russ Gibson earned first place in the Indiana SkillsUSA Web Design contest this year, and as a result have been invited to represent Indiana at the 48th annual SkillsUSA National Leadership and Skills Conference in Kansas City June 23-27. Meghan Mckenna and Ryan Stav succeeded to second place, and the exceptional work of Shelby Kline and Tyler DeLong merited them third position. All of the contestants should be commended. The road to this contest was long, and the work order this year was challenging. Kudos to you all!

As I promised while we were in Indy, in the next few days, I will provide some feedback regarding observations I and the judges, Heather Jacob and Travis Klotz, made during the contest. Notes taken by the three of us will require a little time to compile, but I will post the feedback as soon as I can. In addition, I will convert the written test into an online form that can be referenced as a self-scoring study guide.

I appreciate how seriously each of you took the contest this year. Your hard work and dedication was definitely evident. Look for the feedback post very soon!

2012 State Contest Guidelines are available

Barry J. Sullens — Sun, 08 Apr 2012 19:53:02 +0000

The state contest is right around the corner: Saturday, April 14, 2012. Contestants should prepare themselves by reviewing the documents available: tools list, contest guidelines, special instructions, and technical supplement.

I’ll take this opportunity to give you one last recommendation. If you’ve been following this blog for a while, this will be just the latest reminder. Contestants are urged to produce documents using the latest W3C standards: HTML5 and CSS3. Team site submissions that are coded using HTML5 and CSS3 will rank highly with the judges.

Why teach Web standards?

Barry J. Sullens — Thu, 01 Mar 2012 05:06:12 +0000

Whether I’m wearing my educator hat or my Web developer hat, current and emerging Web standards are constantly on my mind. When I promote HTML5 or CSS3 in the classroom, my learners often ask why I make such a big deal about adhering to the latest W3C Web standards. Over the years, I have run across many answers to that question. Here is one of the most eloquent responses to Why Web Standards? In addition to providing support for following Web standards, this open letter explains that a “heavy reliance on tools such as Adobe Dreamweaver” without a clear understanding of the HTML and CSS source code generated by a GUI leads to “numerous programming and logic errors.” This is one of the reasons why I advocate learning how to develop “by hand” using a text editor first before using a GUI editor to do the heavy lifting for you. Regardless of how you got your start, no matter how you’ve been generating your code so far, if you have not yet mastered HTML and CSS structure and syntax by “hard coding,” it is not too late to learn. Seek out and devour instruction in development from the ground up. You will be a better developer as a result. If you are interested in additional resources on the topic, reply to this post or contact me via email. Of course, you can also subscribe to this blog since I will continue to share Web standards and best practices right here.

Feedback from the Regional contest

Barry J. Sullens — Sat, 25 Feb 2012 05:20:16 +0000

Well, the 2012 SkillsUSA Web Design Contest for Indiana Region 2 (Northeast) has come and gone again. I have been involved with the Web Design portion of SkillsUSA in Indiana for many years now. Each year, the quality of the work submitted by the contestants improves over the previous year. In an effort to keep that momentum, contribute to continuous improvement, and treat these competitions as learning experiences, I will use this blog to provide the participants with feedback.

I have reviewed the Web sites submitted by the three teams in the Regional contest this year. Below are my thoughts and reactions. Remember, I am not voicing any criticisms. On the contrary, as a professor of Web development, an active member of the World Organization of Webmasters, and an executive committee member for the SchoolofWeb.org, my purpose is to provide you with constructive feedback that can help you become the best Web designer or developer you can possibly be.

General Feedback

Navigation should be consistent. Some teams submitted a Web site in which the navigation links on each page were different. Our users depend on us to help them with navigation by making it as “foolproof” as possible. To quote Steve Krug, “Don’t Make Me Think!” Rather than requiring the user to remember which links are available on which pages, it is best practice to provide the same links in the same order in the same location on every page. Your users will thank you, and after all, it’s all about them.
Centering text that wraps over multiple lines tends to result in content that is difficult for most people to read. The general consensus among Web professionals is that blocks of text that span more than two lines should be left-justified. As a general rule, centering should be reserved for single-line text as would be found in a heading.
This year, I noticed a significant use of HTML comments in teams source code. This is fantastic! You will never regret adding a lot of comments to your HTML and CSS source; you will, however, regret it if you don’t.
Some of the project submissions included the use of HTML elements and attributes to control presentation (i.e.
or
). This must stop. The use of HTML elements and attributes for presentation has been deprecated by the W3C for many years now. All presentation and style should be handled by CSS. If you are not comfortable with how you can use CSS instead of deprecated elements and attributes in HTML, you need to take the first step. Ask your teacher, find a good book (Smashing CSS is a good place to start), or drop me an email. I’ll be more than happy to share some of pearls with you.
Find a way to accommodate the variety of screen resolutions in use today. Consider implementing the idea of a “wrapper” inside the body and allow your wrapper to handle the adjustments between standard displays versus widescreen displays (check out the wrapper used in the example below). Eventually, you will want to master CSS media queries to provide separate groups of style rules for each size of media resolution.
The home page of your site should be named index.html (or the accepted file name for the default page on your chosen host). Avoid using the underscore character in the names of files on the Web. Files with the underscore character in the name can appear like spam or obfuscated URLs to search engine bots and crawlers. Most proponents of SEO recommend the use of the hyphen over the underscore. This is a much better habit to develop.
The element and the character entity should be used in singular occurrences. To force a “new line” on the screen, you may use a single element. If what you need is to create vertical spacing within the page, use CSS top or bottom padding or margin instead. If you need to make sure that two letters, words, or other content remain separated by a single space, the character entity may be used once. If what you need is to separate content horizontally with more than one space, use CSS left or right padding or margin instead. One more reason to become a master of CSS.
If you use images as navigation buttons, provide text-only links elsewhere on the page. This can most readily be done in the footer of each page. An image should never be the only method of navigating your site. There is nothing wrong with using images as links, but you should always provide a text-only alternative. Along the same line, every image included in your page via the element must include an alt= attribute that explains or describes the image. Not only does this make your page accessible to screen readers for the visually impaired, believe it or not, it makes your page more SEO compliant as well. It can assist search engines catalog and index the non-textual content on your page. Context is also important when it comes to the text you choose to include inside an anchor element used as a hyperlink.
Check out Myer's book, Smashing CSS3.

is more helpful to search bots than

Check out this book.

You’ve heard the old saying, “A picture is worth a thousand words.” Well, I’m slightly below a thousand words in this blog, but I will paraphrase the old adage to “A sample Web site is worth a 927-word blog post.” Navigate to this sample Web site for an example of some of the best practices I’ve included in this post. Happy coding!