Regional Feedback Coming Soon…

I understand all of the regional competitors are eager to receive some feedback on the contest projects. My goal is to have the feedback completed and posted by end of week. I recommend subscribing to this blog with your email address so you can be notified when I update with a new post.

 

HTML5 / CSS3 Example Site

Introduction

As I promised, I’ve created a small demo site written in HTML5 and CSS3 that SkillsUSA participants can analyze in an effort to learn more about the emerging standards. I’ve validated each document to meet the HTML5 DTD standards. The W3C does have a CSS validator recognizes CSS3, but is not designed to handle vendor prefixes. The only validation errors in the external style sheet for the demo result from the use of vendor prefixes. For anyone who thinks allowing or using vendor prefixes is bad practice, think again. Vendor prefixes are “part of the process of vetting [new] properties and syntax” in CSS. They are a normal and “necessary part of the specification process” adopted by the W3C (Jacobs).

New HTML5 Elements

• header
• footer
• section
• article
• nav
• aside
• figure

New HTML5 Form Attributes

• type="email"
• placeholder="Some Text"
• For other new form elements and attributes, see form example.

New CSS3 Properties

• gradient
• text-shadow
• border-radius
• box-shadow
• nth-of-type
• Just to name a few

 

Clarification about Regional contest language requirements

I’m still working on that sample site in HTML5/CSS3 that I mentioned last night in my post, but I wanted to make a quick clarification about the language requirements for the upcoming Region 2 contest.

At a minimum, participants will be expected to generate well-formed documents using the latest W3C standard for XHTML 1.0 and either a transitional or strict DTD. In addition, as per the W3C’s recommendation, CSS should be used instead of HTML-specific elements and attributes for controlling document style.

According to W3C standards documentation as of August 2002,

XHTML 1.0

The XHTML family is the next step in the evolution of the Internet. By migrating to XHTML today, content developers can enter the XML world with all of its attendant benefits, while still remaining confident in their content’s backward and future compatibility.
Retrieved February 14, 2012

According to W3C standards documentation as of May 2011,

HTML5

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.
Retrieved February 14, 2012

Based on the current XHTML 1.0 standard and the emerging HTML5 standard, the SkillsUSA Web Design contest for Region 2, Northeast Indiana, will require validation to the XHTML 1.0 transitional DTD at a minimum and validation to HTML5 validation as a preference. Work product submitted as valid HTML5 code will earn higher ranking than code submitted as XHTML, but any work product submitted using a standard prior to XHTML 1.0 will not be considered for judging. In 2012, you should be developing all of your work in either XHTML 1.0 or HTML5 with the latter preferred.

You may ask, “Why should we follow Web Standards? Why should I code in HTML5 now?” I could not state the reasons any more clearly than my friends at Webprofessionals.org have already done:

HTML5 is a fast emerging technology standard and now is the time to be learning these best practices to get a head of the curve. HTML5 aims to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and [mobile] devices. Consider what has happened in the past — it was the wild west — everyone was doing what they thought best, but with many inconsistencies. As a result, many Web professionals and many sites did not meet minimal Web standards. Retrieved February 14, 2012

I hope this clarifies the language requirements for the upcoming Regional contest.

 

Room Update for NE Indiana Regional Contest

General Rooms and Equipment

On February 1, I posted a note to indicate that we were having some room scheduling challenges this year due to the CCDC competition that is being held at Ivy Tech on the same day as the SkillsUSA Region 2 competition at the Ivy Tech Community College campus. I am happy to report that as of this afternoon, the room issues have been resolved. As a result, each of the computer-related contests (computer programming, computer maintenance, and Web design) will be held in properly equipped rooms. For the computer programming participants, this means the computers in Room CC2368 will have Visual Studio installed. For the computer maintenance participants, Room CC2352 has ample bench area to open the hood and do more than change the oil (figuratively speaking). For the Web contestants, the workstations in CC2378 have Dreamweaver CS5 installed. Each contest will have the same (if not better) tools with which to work this year as we had last year.

Web Contest Update

For the participants in this year’s Web Design contest, I would like to re-iterate some of the new expectations for the competition. This year, top consideration will be given to work product developed using HTML5 and CSS3. The use of HTML5 and CSS3 will be required for the state contest, and those who advance to nationals will be expected to be able to code in HTML5/CSS3 for the National contest as well. For this reason, I will be helping you to prepare for success at the State and National level by providing you the chance to exercise your HTML5/CSS3 muscles at Regionals.

My February 1st post provided some guidelines for beginning your transition to HTML5. Tomorrow, if all goes well, I will post a link to a demo site written entirely in HTML5 and using CSS3 to give you examples of as many different new HTML5 elements as possible. The link will be to “live” pages that you can render in a browser, but I will also provide “print outs” of the source code for each HTML document as well as the external style sheet for your review. Although you cannot bring any pre-coded documents with you to any of the competitions, you can certainly use them as study guides to learn the new elements and good techniques. Check back tomorrow for the link and supplementary documents.

I don’t foresee the need for any additional “changes” information to be posted here, but as long as you have subscribed to this blog, you will be automatically informed when I post something new. I’ll see you all on Saturday!

 

2012 Nationals on June 22, 2012 in KCMO

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.

 

Become a member of a Web Professionals organization

Participating in a professional association is a great way for those just starting out in their careers such as students in Web Design, Web Development and Web Business to make connections with industry. The World Organization of Webmasters (WOW) now offers a free first year of membership to all SkillsUSA high school students and their teachers! As a member of the Executive Committee for the School of Web initiative within WOW, I work very closely with the president and CEO, Bill Cullifer, on everything from high school and college Web curriculum recommendations to the SkillsUSA national competition. In a phone conversation today about certifications, Bill mentioned WOW’s new promotion to get SkillsUSA high school students and their teachers directly involved in the School of Web. This is a fantastic opportunity for all of you. WOW is the organization that sponsors, facilitates, and conducts the national competition for SkillsUSA in Web Design. These are the guys you will see in Kansas City if you advance to the nationals. This year, at nationals, I will be there along with several other Executive Committee members, Bill Cullifer, and the Director of Education for WOW, Mark DuBois. Why not take them up on their offer to join this prestigious and nationally active professional organization tailored to the needs of future Web professionals like yourself? I’m a member, and the benefits to me as a college professor get better as the organization grows. I strongly endorse and recommend WOW membership to every Web student interested in getting the most from their education and giving back to the Web community. And the first year of membership is FREE! If you want or need more information about WOW, the School of Web, certifications, SkillsUSA (regional, state, or national), feel free to contact me directly at bsullens@ivytech.edu or by commenting on this post.

 

2012 Regionals Update

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.

 

Preparing for SkillsUSA 2012 State Competition

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).

 

Keep the images on your site legal and royalty-free

Every semester, at least one learner asks me how they can ensure the images they use on their Web pages are legal and royalty-free. I mean, you can always take a chance: “Google” a phrase, download an image, and hope you aren’t violating the law or infringing on someone’s copyright. The safer and more professional thing to do is to purchase a license for every image you use in any of your Web sites (unless you take the photo yourself). The cost is typically miniscule. I have opened an account with iStockPhoto.com to make sure I’m always covered. I hope each of you will consider it too.

 

Mobile First!

If you haven’t heard this phrase yet, you will. There’s a new school of thought surrounding the way we develop Web applications, sites, and products. The traditional approach has been to begin with a design for the desktop platform first. If, and I mean “if,” we get around to it, we might retrofit our project to the mobile platform at some non-existent or improbable date in the future. Given the explosive and sometimes even viral manner in which mobile Web access continues to grow, it seems only logical that Web designers and developers need to change our way of thinking. Some very bright minds out there have decided to begin “preaching” a new idea: design for the mobile platform first, and then adapt the project to the larger real estate of the desktop world. This is a radical idea for me. I’ve been teaching Web design for over 12 years, and the first time I heard “mobile first,” I was a skeptic. Nonetheless, this old dog has decided to learn some new tricks, and the “mobile first” concept is one of them.

Luke Wroblewski has put together a brief article along with a more descriptive YouTube presentation to introduce this revolutionary Web design doctrine. Since my hope is that this blog will become a virtual water cooler for SkillsUSA Web Design Contest participants (as well as my Ivy Tech Web majors/learners), I encourage those of you following this blog to check out LukeW’s article and presentation, and then come back here to discuss it.