Mark DuBois Weblog

As the current semester draws to a close, I have started working on parts of a class on web design and development for mobile devices. I wanted to share some initial thoughts as I begin work on this course (which will focus on HTML5 since so many smart phones currently support many of the HTML5 elements and attributes). My first step is to develop a test environment. As readers know, there any many different mobile devices and their screen size affects what a web page looks like in that environment. The pinch and zoom approach simply does not work well. One needs to have the page styled with CSS so that it appears appropriate for that device. For example, one should allocate at least 7 mm of space for a finger press. Learned this at the latest AdobeMAX conference.

My first step is to use appropriate emulators for the more popular environments. I chose to use the Android SDK emulator and the iPhone/ iPad emulator (which is an AIR application that mimics the browser part of these devices). One can also use an online iPhone emulator (which requires the Safari browser to work properly). I am also using a couple of actual devices (a Blackberry Torch and Droid 2) which are connected to my wireless network. Lastly, I chose to include the Windows 7 phone emulator to be reasonably complete. Curiously, the Blackberry emulators do not play well with a browser interface (as far as I have investigated). I installed the Blackberry Torch emulator and the browser icon throws a Java error each time I try to use it. The Playbook emulator only seems to be aimed at developing specific applications as I cannot even find a browser in that environment. Both these emulators also need to run on actual hardware and I can not use them in a virtual environment (where I like to do the majority of my testing). I thought it appropriate to show screen captures of various emulators as a first step. For comparative purposes, I chose the same web form example from my Learning-HTML5 website. Note that the majority of this site is not optimized for mobile devices (the purpose is to demonstrate what presently works in desktop browsers).

Android emulator. The download and install for this emulator was relatively fast (roughly an hour to completely install). I can run the emulator in a virtual environment (presently running in Windows XP under virtual Box). It does take the emulator a little while to load when I first open the environment, but the performance is fine once the emulator is actually functioning. Here is what the sample page looks like in the Android browser emulator.

iPad/ iPhone emulator (Adobe AIR application). Of all the emulators I have installed, this was the simplest. Total install time was under 15 minutes (including download). I can also run this in a virtual environment (and it is presently running side by side with the Android environment described above). Of course, the capabilities are limited as this essentially is running Webkit within a chrome that emulates the  iPhone and iPad. I could probably accomplish something relatively similar by just appropriately sizing the window size in Safari. Here is what the sample page looked like in that browser environment.

Windows 7 Phone emulator (running Internet Explorer, of course). Note that the emulator required a download of 12 different pieces of software (at least on an old Vista computer) and can not be run in a virtual environment. Although the download is relatively simple, the install took nearly 2 hours. Here is what the sample page looked like in the Windows 7 Phone emulator browser environment.

For those readers who re also planning to develop mobile browser based applications, what additional environments do you use? What have been your experiences with the above environments?

Bob Flynn (fellow Adobe Education Leader) asked me to make a presentation on HTML5 to the Indiana University Web-Multimedia Community today. According to Bob there were approximately 80 people in attendance. Since the presentation was recorded, I provide a link to the presentation. [It will open in a new browser window/ tab]. If anyone would like copies of the slides, you can download them from http://learning-html5.info/. The learning HTML5 site is a work in progress (designed to show my students the capabilities and errors of coding in HTML5) and designed to show significant differences between current browsers. Therefore, I really don’t recommend visiting it with Internet Explorer 8 or earlier. Bob – thanks again for the opportunity to present to your group. I really enjoyed myself and a number of great questions were asked.

A recent post on MeyerWeb got my attention. Essentially, someone asked Eric Meyer whether they should drop out of school (they are pursuing a computer science degree at a 4 year college). They wondered how useful a degree in computer science was for web development. You can read Eric Meyer’s response. I thought I would provide my own thoughts on this as well as solicit feedback from current and former students (I have been teaching web systems for 11 years).

My advice would be for the person to stay in school at this point. An education is valuable and often will allow you to get your first job. Once you have your foot in the door, it will be up to you to keep the job (based on your knowledge, skills, and abilities). By staying in school, you have the ability to hone these aspects. I would add that anyone considering entering this field might consider taking classes at a community college for the first two years. That being said, I have observed that there are vast differences in what is offered at various colleges and universities (some are still teaching materials which were out of date in 2001; others are staying at the cutting edge). Students should shop around and verify that the college is not only accredited, but also vetted by some web specific organization (for example, our program has been reviewed by the World Organization of Webmasters). One should verify that web standards are being taught consistently in the program (sadly, some programs do not teach web standards in any of their classes) and that current best practices are encouraged.

I am also curious as to what current and former students think about this topic. I know a fair number of former students have gone on to significant jobs in various aspects of web design and development. I also know that some students are struggling in the current economic climate. If you are reading this and you are a current or former student, please post a comment regarding your thoughts as to the value of your education (particularly the web systems classes). I do not plan to filter the comments (except to block the obvious SPAM drivel which plagues most content management systems these days).

The ROME project is an interesting concept from Adobe. I have been working with it for some time. It is now in beta and can be accessed via http://rome.adobe.com/education/ (for the education version, drop the education part of the URL for the non-education version). I participated in the AEL (Adobe Education Leaders) quarterly meeting this morning and was inspired by David Egbert’s 5 minute discussion of an interactive presentation done in ROME. I decided to put together a few details about the recently concluded AdobeMAX conference as an interactive PDF developed using ROME. [The link to the PDF will open in a new browser window/ tab]. It took me roughly 1.5 hours to go from a blank canvas to the completed project (including developing the next and previous arrows in Fireworks). Yes, I also could output this as a Flash .swf file, but thought an interactive PDF might be more impressive (especially for those who still believe a PDF file is just another way to print a Word document). The majority of my time was spent selecting the appropriate images and videos to include (the actual development time as minimal).  I believe this tool will be particularly handy for educators who need to create engaging interactive content rapidly. I encourage you to try it out.

Last week, I traveled half way across the country, enduring incredibly cramped conditions on multiple aircraft, waited patiently at various airports in uncomfortable chairs and took valuable time away from my classes. I didn’t realize how little time I would have to reply to email last week and am faced with a growing mountain of messages this week. I appreciate that my students are very understanding and patient as they await many items being graded and returned as well as responses to many email messages. However, I believe that I must also answer the simple question – why? As you know, my philosophy is “when the going gets tough – ROAD TRIP!” Seriously, why did I endure so much travel, a two hour time difference and time away from family, friends and students?

The short answer is that I simply could not afford to miss the wealth of information and networking opportunities afforded by AdobeMAX. It was a tremendous opportunity to learn from industry luminaries (and ask questions of them). This was an opportunity to network with over 4,600 highly creative and intelligent people.  It was an opportunity to gain significant insights into the directions our industry is headed. Without a doubt, this is the one major opportunity I have each school year to enhance my skills and knowledge in the disciplines I teach. I had the opportunity to network with so many people (including colleagues I already know and many I met last week). What other venue allows you to sit next to industry leaders an engage them in conversation directly related to the technologies I teach. I also obtained a number of working (and mostly working) examples of  code which I can use for demonstration purposes. Based on the information I received last week, I plan to incorporate a number of changes into various materials I cover in courses. I simply would not have been able to observe and obtain all this new information.

As an educator, this event was also important. In addition to AdobeMAX, I was able to attend the community summit and education summit held the Sunday just before the conference. I was also able to tour the School of Cinematic Arts at  the University of Southern California and observe their efforts behind the scenes. I was able to ask questions of the professors who teach in both the George Lucas Building and the Steven Speilberg Building. I was also able to attend the Adobe Design Achievement Awards. I do hope to be able to inspire some of my students to enter this competition next year. I could observe industry best practices and listen to those who have established those practices and ask them questions. I was able to significantly update my skills throughout the week. I was also able to network with a number of fellow educators. None of this woul have been possible without attending in person.

The reason I thought it important to include such a post is that I want students to understand the importance of keeping their skills up to date, the importance of participating in conferences, and the importance of networking (and continually growing your network). In my opinion, any teacher who teaches this technology and is not keeping up to date (through networking and attending conferences and training) is doing their students a significant dis-service.

Wednesday, Oct. 27, 2010 was the last day of AdobeMAX and I tried to get as much out of this day as previous days. I participated in the following sessions:

• Deconstructing the HTML5 mobile development workflow – this session was presented by two Adobe employees who were instrumental of development of the assets and website for the hypothetical client – Citrus Cafe. As professional web designers and developers, they were able to shed significant light on what is the same and what is different when developing across multiple devices. Their main focus was on the areas of 1) discovery and planning, 2) design and production, and 3) testing and deployment. Numerous examples were presented (along with demonstrations of the development of the site at various points). A number of potential technologies were covered along with a rationale as to why certain technologies were selected for this project.
• Developing World Ready applications using the Flex SDK – this session was all about internationalization and the many issues involved (from whether text reads right to left or left to right, to number formatting, date formatting and translation of text). Given how much our world is becoming interconnected, this session provided me with a host of insights which I plan to include in a number of classes. Emphasis was both on localization and internationalization.
• Progressing beyond the desktop at universities with Adobe AIR – this was a great session which covered the capabilities of this technology. For example, one can integrate this with projection hardware and the operating system processes. Numerous examples were presented including a discussion of the Course Media server at the University of Denver and how an AIR application can be set to convert video to the appropriate format as soon as it is placed in a specific folder on the desktop. I got a lot of great ideas and a better understanding of the breadth and depth of this technology.
• Creating accessible Flash content with Flash Professional CS5 – this session provided a number of insights and tips I can employ in the web accessibility class. I learned about a number of tools which can now be used to check whether a Flash .swf file is accessible. I also gained greater insights into the 21st Century Communications and Video Accessibility Act recently signed by President Obama.
• Deep dive with Device Central CS5 – This was the final session of the conference and another BYOL (Bring Your Own Laptop). The focus was on the use of Flash in Device Central. In addition to better understanding how to use Device Central for testing and debugging, I received a number of working applications which I can share and demonstrate to students to help them better understand the capabilities of Device Central. For example, I was unaware that this tool supported the pinch behavior one experiences on smart phones. Yes, it involves a number of keystroke combinations, but it does work.

Overall, this was the most information intensive AdobeMAX conference I have attended. The emphasis on a multi-screen environment (especially mobile) was obvious throughout. I learned a lot regarding emerging technologies and what can be done today. The state of this environment is rapidly evolving and I am glad I was able to be a part of this event to obtain so much current information. I will be sharing some of this knowledge in various venues over the coming weeks. For example, I will be presenting on mobile at the next WOW/ Adobe User Group meeting on November 9 in TC 210 at 6:00 p.m.

I also included a few photos from Wednesday. I encourage you to follow the link below to view them as a slideshow on Flickr.

I started on Tuesday with another BYOL session (Bring Your Own Laptop). This one focused on building mobile applications with jQuery. The session began with an overview of what features of a mobile phone can be accessed via the browser (and which can not). Various technologies which can speed up the creation of mobile applications were discussed (with an emphasis on jQuery). jQuery recently released mobile components and we were able to use these components as part of the class. We also used additional addons (such as jQTouch). During the session we started with a blank screen in our browser and gradually developed an application which used the SQLLite capabilities of modern browsers to store persistent information. I plan to expand on this to demonstrate a number of applications to students in classes (both this semester and in the spring).

The general session focused on user experiences – the next generation. A number of examples of multi-screen applications were demonstrated. There was significant coverage of Google TV and the implications of that technology on the digital living room.

I also participated in the following sessions after the general session:

• How to make your application able to use social networks – this presentation focused on the use of Gigya as an aggregating service for social applications (such as Twitter and Facebook). I learned how to use Gigya to create a custom site (Domain Name associated with their API – essentially a C Name which forwards to the Gigya servers). I also learned how to use OpenID authentication within this environment (so a visitor does not need to authenticate more than once across various social feeds). Most of our work was done using Flash Builder.
• Fusing Art and Technology with Flash Professional CS5 – this session focused on a review of that part of the keynote which contained a fusion of Flash with the audio streams and gestures being generated on stage. In addition to obtaining code examples, we were able to better understand the though processes involved in creating this form of art. The individual who developed these applications is highly skilled in Flash and incredibly creative. Some of his clients include Wired Magazine, Nike, and Hard Rock Cafe. I have a number of photos and examples I can share with students to inspire them.
• Introduction to Adobe AIR for mobile – this session focused on a review of the enhancements since last year in this technology. Different form factors and functionality across numerous devices was discussed along with how AIR helps reduce the amount of necessary changes per platform. Along with a  number of demonstrations, there was an emphasis on debugging and packaging AIR applications for mobile. This was a great overview of what can be accomplished today with this technology.
• The AdobeMAX awards and sneak peeks this year were hosted by William Shatner. A number of possible technologies were presented (of course the disclaimer was that none of these may ever be developed as commercial products).
• I also participated in the MAX Bash on Tuesday night and had the opportunity to meet and network with a number of individuals. It was great to see so many familiar faces and catch up on what is happening in other colleges and universities. In addition to the vast amount of information and training received during this conference, I believe the networking with peers is as important and this venue was great for many of the necessary discussions.

As I also did for my previous post, I have included a link to a number of photos I took on Tuesday. It is probably best to view these as a slideshow at Flickr.