Mark DuBois Weblog

We are now in the second week of the semester. I have a challenge for students in my CMWEB classes. I put together a brief slideshow (using PowerPoint and Adobe Captivate) to include audio and transitions. This information came mostly from a Time Magazine article I read over the weekend (dealing with YouTube). Ok, it took me roughly 2 hours to do a little research, prepare the PowerPoint slides, import the slides into Captivate, select the audio (I have an account with Soundzabound and this audio is ok to use on the WWW). Your challenge, should you decide to accept it is to do something similar in HTML5. Keep track of your hours to duplicate this as well. You can use any framework, CSS, JS, and new elements (like <canvas>) that you want. The resulting web page needs to include audio which plays throughout (with the ability to turn it on or off). The text needs to show some sort of transition effect (like the fade in this example).

Should you meet the challenge, post your work and send me a link to it via email. I will review and those who come closest to achieving a similar presentation will receive a grade on 100 on a quiz of their choosing (any one except the final) or a lab assignment. This means you can skip one quiz or lab assignment if you meet the challenge. Obviously, you can take as long as you want to mimic this example (but your work needs to be completed and reviewed by me before May 8, 2012). Assuming you meet the challenge, I will post a link to your work. I will also post the number of hours you spent mimicking this example (so make certain to track your time).

How close can you come to this example? Note – audio starts playing when you click on the link so you might want to turn your speakers down if you are in any sort of shared space.

I just completed supervising the 11th annual WOW web design contest for the state of Illinois. I have done this every year (with the exception of 2008 when I was giving a pre-conference seminar at the 17^th International WWW Conference in Beijing). There are separate competitions for secondary and post-secondary aspiring web professionals. This contest is held as part of the SkillsUSA competitions in Springfield every April. The contest consists of a series of challenges, a quiz and an interview.The contest itself would not happen without the support of the World Organization of Webmasters (WOW). I am Director of Education for WOW. Prizes for this contest were donated by lynda.com. My sincere thanks to everyone on the lynda.com team for going the extra mile to support aspiring professionals in the web design field.

To the contestants themselves let me offer my congratulations. You are all winners. I mean that. It takes an extra spark to put forth the effort to travel to Springfield, Illinois and spend two days away from family and friends. Of course, there can be only one winning team at each level. These two teams will be going on to the national contest in Kansas City in June. That being said, everyone present demonstrated their courage to test their knowledge, skills, and abilities related to web design against others in the state.  Everyone who participated demonstrated their willingness to put forth an extra effort. That is precisely what employers are looking for today. For those who are considering entering this contest next year – do so. Be passionate and committed to your profession. Demonstrate that you are willing to take risks.

To the judges (Brandy and Jonathan) I express my gratitude. Your assistance was greatly appreciated. The fact that you both took a day off work to judge is impressive in these tough economic times. I also appreciate that you are practicing professionals and are so willing to “give back” to help the next generation of web professionals. Having you there as part of the de-briefing session at the end of the competition was a distinct plus. This allowed the participants to directly hear your comments and suggestions.

Every year, I try to impart some observations and insights to those who participated. Surprisingly many of the same items come up year after year. I will only touch on some of these points below. I have tried to group them into technical (coding) and professional (non-coding) areas. For those reading this who are advisers and teachers, feel free to contact me if you would like to learn more about any of these items. We at WOW are always willing to help faculty by reviewing curricula and verifying class materials focus on web standards and modern design techniques. This is why we stress web standards as part of this competition every year.

Professional

• Ask questions. Ask insightful questions. Verify that you really understand the challenge. If you don’t understand a response, ask again.
• Don’t forget to diagram your work before diving into the actual coding. Scaffolding and wire framing are quite helpful techniques to allow you to focus on those aspects of each challenge which must be completed first (and which aspects should be consistent across all challenges).
• If you are told not to use templates (such as those found within Adobe Dreamweaver) and frameworks (such as Spry or jQuery) – Don’t use them. Yes, the judges notice this in a heartbeat and you lose points quickly.
• Divide and conquer – each team member has strengths and weaknesses. Identify those and play to your strengths. Don’t both work on the same aspect of a challenge at the same time.
• Keep on top of emerging trends (yes there were some questions about HTML5 on the quiz). Even if HTML5 is not yet a W3 recommendation, many browsers are starting to support. Yes, it takes time to learn new materials. This constant change is typically what attracts us to this profession.
• Make certain you take the time to thank your teachers and advisers for help they provided you to prepare you for this competition (and for your entry into the field of web professionals).

Technical

• Review your work. Make certain you have no “Untitled Document” in the <title>. Yes, the judges saw a number of these this year.
• Similarly, rely on CSS (not &nbsp;) for properly arranging materials on the page.
• Think progressive enhancement and graceful degradation as you develop pages for multiple browser environments (and different screen sizes and resolutions).
• Don’t rely exclusively on the design view in Dreamweaver. Know how to directly manipulate the code. It can be much faster to change CSS (for example – if you know how to code this directly).
• Regarding CSS – rely on inheritance and the cascade. Keep classitis to a minimum (this would be the use of a class for every item).
• Use the tool (Dreamweaver) to validate your code. I know the judges valiated the code and every team had multiple validation errors in basic HTML.
• There were not a lot of entries which relied on tables for their overall layout (but there were a few). Please learn CSS and web standards. Tables make it incredibly difficult for those using accessible browsers to navigate your pages and glean content (among other reasons why tables are not a good idea).

As the supervisor of this competition, I was glad to see that all teams competing relied extensively on Adobe tools. In my opinion, these are the best in terms of helping with web design. Yes, I am an Adobe Education Leader, but I said that long before I was chosen for that honor. The overall distribution of versions this year was the following:

• Creative Suite 5 - 55%
• Creative Suite 4 - 10%
• Creative Suite 3 - 35%

I provide a link to some photos I took during the competition. I hope you enjoy them (view them as a slideshow at Flickr). I also hope they convey the intensity and desire and passion present during the competition. Just follow the link below to view the photos in larger dimensions (and as a slideshow).

I took a little time this afternoon to modify an example of some materials provided by lynda.com in a PaperVision course. PaperVision is a class of Actionscript libraries which allow you to do some fairly magical things. Given that I have a limited amount of time (and really should be grading assignments), I made some small modifications to the example. If you examine this “hello world” example, you will encounter two images (both are JPEG files). These are wrapped around a  sphere and a particle field is added for some additional interactivity. Yes, this is a fairly processor heavy example (and may take a moment for the entire file to load and begin playing. Just trying to give students some ideas as to what is possible with Actionscript. Note that this example will open in a new browser window/ tab. I also provide the source code for those who are interested. This was created in Flash Builder 4.

In honor of our major snow event starting today, I put together a little bit of Flash Actionscript code to generate even more snowflakes. It just populates  a small array with one snowflake symbol which is re-sized  and rotated and placed. I will be showing students in my CMWEB 225 class (Flash and Actionscript) how I did this in a couple of weeks. The above link opens in a new browser window/ tab. Every time you refresh the linked page, a new array of snowflakes is generated. All told, this was 50 lines of  Actionscript code (the majority of which were lines of comments for my students).

These are some of the photos taken at the WOW Web Design Contest held in Kansas City, MO June 23 – 25, 2009. We had 46 teams competing for over $190,000 in prizes. Prizes were awarded on Friday, June 26.

Congratulation to Kathleen Quinlan and Matt Scachette on winning second place in the national SkillsUSA web design contest. The contest was held on June 25, 2009. Great work!

Congratulations to Luan Railsback and Sheri Humphrey. They won First Place at the SkillsUSA national web design contest in Kansas City this week. Well done! There should be some additional information about the contest posted on the WOW weblog (WOW Technology Minute) in the next week or two. Contestants at both secondary and post-secondary levels were asked to complete a series of 6 challenges. Over $150,000 in prizes were awarded to winners of this contest (including first, second, and third place at both secondary and post-secondary levels). I encourage others reading this to consider competing in this contest next year. More details and past winners can be found on the SkillsUSA webpage on this site.