Mark DuBois Weblog

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

There has been a fair amount of controversy over the CEO of GoDaddy (Bob Parsons) recently killing an elephant in Africa. Personally, I have begun pulling my accounts from GoDaddy and placing them elsewhere. As part of this process, I realized how potentially convoluted the process is. Therefore, I decided to put together a short series of screen captures to help students who want to move from one ICANN registrar to another. Obviously, I am using GoDaddy as a starting point, but most of these steps apply to any/ all registrars. Some of the particulars may vary, but you should get the gist by following my outline of steps below. Click on any of the images below if you want to see a slightly larger image (for ease of viewing details).

What other registrars are out there? Many. A complete list can be found at: http://www.icann.org/en/registrars/accredited-list.html. If you are curious about specific ICANN policies, you can read the pertinent ones at the ICANN site.

Based on a recent request I posted on Twitter, here are some of the registrars others use. I recommend you do your own research to identify costs, customer service, top level domains they support and any related issues. Keep in mind that once you make a transfer, you can not transfer that domain again to another registrar for 60 days – be sure you are comfortable of the ICANN registrar you are about to do business with.

• NameCheap (even ran a promotion for a  while donating money to Save the Elephants)
• Hover
• MediaTemple
• Registar
• Gandi.net
• Your current hosting provider (such as HostGator)

Step 1 – login to the registrar’s site and view all your domains registered with that company. For example, I am in the Domain Manager in the screen capture below.

Step 2 – choose a single domain. This should  bring up a page with many details abut that domain (including the name servers). Determine if the domain is locked or not. I believe a fair number of registrars lock a domain once you have registered it with them. In the case shown below, the domain is locked. You need to click on the manage link to unlock that domain. You will need to do this for every domain you wish to transfer. Make certain you also turn auto renew off as well.

Step 3 – You next need an authorization code to place at the new registrar. In the above image, you click on the link “Send by Email.” Within 10 minutes, you should have received an email message from the registrar with the authorization code. A redacted version is shown below. Expect to see numbers and letters with a length of approximately 16 characters.

Step 4 – Now you have sufficient information to visit your new registrar (make certain you have created an account with them – typically free to do so). Once you have accessed your account with the new registrar, choose their “transfer domains” option. you may see a screen like that shown below.

Step 5 – As part of the transfer process, you will be asked by the new registrar to enter the access code you received via email. Once you have paid for the transfer (actually, the fee is to extend your registration for a year – there is no fee to actually make the transfer), you should see something like the following indicating the process has started.

Step 6 – return to the initial registrar and accept the transfer request. Check the box next to the domain(s) and you can either accept or decline. Obviously, you want to accept. Should you not do this, it can take 5 days for the actual transfer to happen.

Step 7 – visit your new registrar and confirm that the domain has been transferred and that the  new renewal date has been set. You also may want to set a domain lock so the domain can not be transferred without your permission. Some registrars set this for you, others do not.

That is it. You now should be able to transfer your domains from one ICANN registrar to another. Keep in mind that once you transfer, you will not be able to transfer again for a couple of months. Also keep in mind that if the domain renewal date is close, you may not be able to transfer.

Once you have made the transfer, it is always a good idea to check periodically to verify that the domain is accessible via your browser. It is possible a problem may happen, so check from various locations for a few days to make certain all is working as desired.

Lastly, you will receive a number of email messages from your original registrar asking you to stay with them. It is safe to ignore these.

I have been learning more about the capabilities of Photoshop Lightroom 3. I recently completed a set of tutorials at lynda.com and thought I would use that knowledge to work with some photos I took yesterday. Lightroom allows one to work with the native image formats (and seems to have many more capabilities than Bridge). In fact, the more I work with this tool, the less I find myself using Bridge. It has a lot of the capabilities one finds in both Camera Raw and Photoshop for image manipulation (in the native format – which allows for non-destructive editing). As a starting point, I put together an example of a web photo gallery created with this tool. [Note: this link will open in a new browser window/ tab.] Although the HTML is rather outdated and clumsy (and I plan to use this example to discuss in a future class), I am most impressed with what this tool accomplished (and the short time it took to accomplish this). In this case, I used as input the native Nikon format (.NEF) and directly generated this photo gallery of JPEG images. Total time to go from native format to these images was less than 10 minutes. Keep in mind that I am shooting at 14 megapixels (which is roughly a 20 x 30 inch poster size for each image. Individual images are roughly 15 MB in size and there were over 150 of them (yielding an input of over 2 GB). This was done on a 1.5 year old laptop. I started with roughly 170 photos (over 2.08 GB). Results were 484 files (and 64 MB of images). I found the speed amazing (note that original image had to be resized as a thumbnail as well as a significantly smaller image). And it was finished in less than 10 minutes. Kudos on the speed.

I was also impressed with the number of HTML templates found in this tool. There were lots of initial choices (both for Flash based and HTML based templates). [See screen capture below.] I also understand that additional templates are available at the Adobe Exchange and other websites.

Once one has selected a template (there is a preview option for each), one can then significantly modify the options. I placed a screen capture of some of the choices below. The spinner controls allow one to focus on certain effects.

That being said, one should consider significantly modifying the HTML output (as well as the CSS) before actually publishing to the WWW (I didn’t as I wanted to show the raw results). The HTML is version 4 (transitional), most of the formatting is done with CSS  (which can/ should be modified before posting). Both the HTML and CSS fail to pass validation (numerous errors). The CSS also seems to have more classes than necessary. As others have recently mentioned, “classitis” is part of the weeds in the garden of meaning. Examine both the HTML source code and CSS in the resulting web photo gallery to gain a better understanding of the generated code.

Would I use  these templates in the future? Yes. They allow one to rapidly generate necessary information. Given that I am graphically challenged, there are a number of professional templates to choose from. However, I would also spend some time pruning both the HTML and CSS before officially publishing.

After giving this matter a great deal of thought, I think I have finally solved the entire problem/ controversy regarding the use of Flash instead of HTML5. Given this special day, I thought it appropriate to share my thoughts with the world. In a nutshell, these are completely different tools. While they may appear superficially similar, each has a use on the WWW. Of course, we need to keep in mind that HTML5 is still not a formal recommendation from the W3C and is not completely supported in all major browsers. Therefore, I recommend we use each tool as appropriate to solve each specific job. Thanks for listening.