Mark DuBois Weblog

Those who know me realize I am not a fan of paper. I have not provided paper handouts to my students since 2000. Personally, I find it much easier to organize and locate digital materials.I don’t think I am alone in this view. Of course, a big problem is having to lug a laptop around to access materials. I see this problem is starting to be solved and I believe it will fundamentally change the way we think about web design and how we teach web design.

As I begin to use tablets more and more in my daily activities, I thought it appropriate to start a series of posts summarizing my thought process as it evolves. I expect my insights to change significantly over time as I become more familiar with various apps and approaches. Personally, I think that we are on the cusp of a significant revolution in how we interface with computers (as big a change as when we moved from command line to GUI (graphical user interface). Ok, let’s start…

Adobe recently released various Touch Apps into the Android market (Nov. 15, 2011). Since I have a Samsung Galaxy Tab 10.1, I have been experimenting with these apps on this device. One should be aware that there are minimum requirements for many of these apps (Android 3.1+ operating system, minimum screen size of 8.9 inches, minimum screen resolution of 1280 by 800 pixels). Admittedly, I have only been using these apps for less than a day. However, it now seems possible to use a tablet effectively when meeting with a client to discuss a web design project. From a workflow perspective, I offer the following scenario.

Initial client meeting – Adobe Ideas, Kuler and Adobe Proto would seem to work well in combination. Some clients look for a logo in addition to a website (which is where Ideas could play a role). Kuler would be most helpful in selecting various colors the client would like and Proto would be used for discussions and initial design of user experience for selected pages. Since very few websites are static and most have a mobile component, Proto seems best suited for development of these initial pages. I especially like the fact that one can upload projects to the Adobe Creative Cloud and then share them with others or download them and import into the appropriate desktop tool (like Dreamweaver, Photoshop, or Illustrator). Biggest initial take away for me is that no paper is involved. I can’t think of the number of times I have met with a client and had to take a pad of paper or a laptop or both. Looks like a tablet will now suffice for these initial discussions.

For those who do not have direct access to these Touch Apps or an Android tablet, I provide a few screen captures below so you can have some initial exposure to what it is like working with these apps. Biggest things to remember when working with a touch interface is that a short tap and a long tap generate different results. Also, swipes are useful for exposing parts of the interface at times.

Adobe Ideas. One can import an image from a variety of sources and can then modify it as needed for a creative discussion with a client. I would think this would be very helpful for initial discussions regarding logo design and similar activities. Here is a starting point for something I am presently experimenting with. Yes, I would make many additional changes. Did I mention I have been working with these apps for less than a full day? Obviously, one can click on all these images to see them in full size.

Adobe Kuler. Once one has completed discussions surrounding a logo or branding, one might want to decide on a color theme for a website. This tool comes in very handy for those of us who are graphically challenged. Again, one could work directly with a client to see what colors work well for them. The initial screen capture below demonstrates the key aspect of the interface (similar to the Kuler website). Once can work with a color swatch (and upload it when finished). Again, the ability to work with a tablet when meeting with a client and immediately download and continue working using desktop apps should be a huge time saver. Yes, one might want to prototype the site before deciding on a color scheme. I am just showing one of multiple approaches.

Of course, one has access to all themes created (both public and your private ones). Yep, I did name one of my themes hideous. See if you can pick it from the swatches below. Did I mention I was graphically challenged (and proud of it)?

Adobe Proto. Once a color scheme has been created, one would then work with the client on the actual design of the site. Given that most sites are dynamic, one would need to include a few pages as samples for various parts of the user experience. The gestures based interface allows one to rapidly prototype a web page (or a series of pages). One can view them locally or upload to the Adobe Creative Cloud. As needed, you can share links to files in the Creative Cloud and seek feedback from others. One can also download a zip file from the Creative Cloud which can be opened and used immediately in Dreamweaver. One seems to have necessary starting assets and the materials are HTML5.

This is an initial view showing some of the allowed gestures in Proto.

In the image below, you note that I draw a crude triangle. Actually it is hard to draw and do a screen capture at the same time.

The triangle I drew is immediately recognized by Proto and a video placeholder is inserted in place of my crude drawing. I could then re-size the resulting placeholder as needed.

So, I no longer  need to take a pad of paper to an initial meeting with the client. I can work with them and seek immediate feedback. The results are something I can upload and access with an appropriate tool once I return to the office.

I envision using Photoshop Touch and Debut to review images and artwork with a client and annotate necessary changes jointly.

Adobe Photoshop Touch. I can modify an existing image and use multiple layers and filters for various effects. Here I have modified an image of a beetle making it look like a pencil sketch. This could be done working with a client directly. This is a screen capture as I was working in this tool.

Adobe Debut. Lastly, one could also mark up images or vector art using this tool. One could even get customer “sign off” on the actual revisions. In this example, one would need to make corrections to those parts of the image which appear washed out.

The fact that one can work with the client and make round trips to actual applications to me is a huge time saver. It should also significantly reduce confusion and misinterpretation of what the client desires.

The big issue to me is how to best incorporate these new approaches into the materials I teach. It is doubtful everyone can afford a tablet at this time. However, students need to be aware of these increased capabilities and how they affect work flow.

In  addition to the above mentioned Adobe Touch Apps, one also needs some browser capabilities as a web designer. It appears Firefox has the greatest set of useful mobile plugins at this point in time. I installed the mobile tools and error console add-ons. For example, one can view the page source (in the event there is a problem). In the screen capture below, we see magnified parts of a page I created last year.

One can also view page information.

Additionally, one can see how long it takes for a request and response from the server.

Lastly, one can work with an error console in the settings for Firefox.

Although this does not equal capabilities of a desktop environment, there are a number of features one can employ on a tablet to help with the basic design of a website. I see this as the ability to eliminate a fair amount of paper, increase understanding when meeting with a client and expedited workflows. I believe this is only the beginning of a significant transformation.

I look forward to your thoughts and comments in the space below. Due to past issues with spammers, I must approve all comments.

Having just gone through several episodes of email miscommunication, I thought it might be appropriate to put some notes together regarding the best approach to sending email to your professor (that would be me). It is important to recognize that I receive well over 100 email messages per day and am teaching multiple classes. Often the assignments are similar (not the same, but similar) in various classes. If you follow the approach described below, I can almost guarantee a quicker response and less email back and forth (it is a rather imprecise mechanism after all).

Subject line – This is probably the most important aspect of your message. DO NOT LEAVE IT BLANK. Yes, I was shouting. If you leave it blank, it may well go into a junk mail folder and never be seen by me (or may be viewed much later than you wanted). Tell me if you are supplying information or need some action from me. Begin with INFO: or ACTION: on the subject line. Next, tell me which class you reference (for example, CMWEB 123). Follow this with a synopsis of your request. Here is an example of an ideal subject line (no, there is not a CMWEB123 class):

• ACTION: CMWEB123 – Please open quiz 3 so I can take it one time (I missed the deadline)

Message: Please be as specific as possible. For example, “I don’t understand the current topic” is quite vague and will lead to a series of back and forth messages. Tell me the specific part you don’t understand about a given lab, project, discussion or issue. If you have a question about a bit of code, include that in the text of your message (not as a separate attachment). Where possible highlight the important parts. It is also quite helpful if you include your actual name in the message. This would be first and last name. Do not assume your email program automatically places your name as part of the sender field (some don’t).

Attachments: DO NOT INCLUDE ATTACHMENTS. Yep, shouting again. I have concluded that when someone sends me an email with an attachment which is over 1 – 2 MB in size, I never receive them. They are lost somewhere in our system at school. This means that you are left wondering why I am ignoring you. And I am wondering why you never turned in the assignment you promised. Ok, so what do we do to transmit files – use a tool like Adobe SendNow. Yes, it requires an Adobe ID (free). You can send me files up to 100 MB in size. They are virus checked by the system and I do receive these notifications that a file is waiting for download. The alternative is that I:

• never receive your message, or
• receive a message with a QUAR (quarantined attachment) which I can not open (even if I forward it to another account), or
• receive a message with a nearly empty attachment (which prompts me to ask you to send me the file again via an alternate means – like Adobe SendNow).

None of the above choices are optimal for my being able to help solve the problem you presented. Hence my desire for you to use an alternate tool like Adobe SendNow in the first place.

If you follow these simple steps, I can almost guarantee that our email communications will be more efficient. Lastly, if you do not receive a reply to an email message in a reasonable time, try an alternate means of contacting me (perhaps via Twitter – @Mark_DuBois or phone 909.mdubois). Keep in mind that I am prevented from setting an “out of office” assistant for email addresses external to the college. Therefore, I may be at some meeting or conference and unavailable. If that is the case, sending me another email message will simply add to the stack. This is why an alternate means is preferred.

Therefore, when you decide to contact me via email, please follow these simple steps:

1. Include a meaningful subject line with ACTION or INFO, the course number, and a synopsis of your message.
2. Be as specific as possible in your email message.
3. Do not attach files (that is what Adobe SendNow is all about).
4. Include your full name in the message itself.

If you follow these tips, you will reduce the amount of back and forth which often happens in the email game called – Is my professor clairvoyant? Short answer – NO. I am busy and you are busy. The quicker we can get an issue resolved, the better.

Assuming you have decided to take initial steps into the Twitter ecosystem, I thought it might be appropriate to cover additional tools and websites which can help manage the information “overload.” Yes, 140 characters doesn’t seem like much, but there can be a fair amount of information when you start following more than a few people. I mentioned the initial tools in my previous post – TweetDeck (now owned by Twitter) and Tweetcaster Pro. No, I didn’t pay $4.99 for my version (it was one of those daily specials you see at the Amazon AppStore). There are a number of free Android clients, I am just letting you know the ones I tend to use. I am not making recommendations about any of these products. I am providing a list of resources which I have found useful as I work with the Twitter ecosystem. Your mileage will vary. Some of these links exist because… you guessed it… I learned about them from Twitter (and the people I follow).

• If you want to include a Twitter “badge” on your website – http://twitter.com/about/resources/widgets
• If you want to include a Twitter tweet button – http://twitter.com/about/resources/tweetbutton
• If you encounter SPAM, you should notify the folks at Twitter. With over 230 million users and roughly 50% tweeting at least once a month, they can use help policing rogue accounts – http://twitter.com/#!/spam

Ok, now let’s move away from the Twitter site itself and focus on some additional sites/ tools which you may find useful. To help, I have provided a logical arrangement (logical to me at least)  and alphabetized those within. Yes, I already mentioned some like SocialBro, but I want this to be a rather comprehensive list. At the time I am writing this, all these links are live. That being said, lengthening services can come and go (perhaps you have heard of Deck.ly).

Basic information about Twitter and how it can be used:

• Twitter “bible” – CIO Magazine article on many of the fundamentals. This article was published February, 2011 so the information may be a bit out of date.
• Twitter Fan “help” pages – not associated with Twitter, but a fair amount of useful informaiton for those just getting started.
• Video – Using Twitter to reach audiences (for those who prefer to watch instead of read)

Tools to analyze your account/ tweets:

• MentionMap – allows you to see Twitter conversations as a network.
• SocialBro – provides a fair amount of analysis including who has recently started following you, who has unfollowed you recently, where your followers reside, trends, and much more. I included some screen shots from this tool in my previous post. You need to manually refresh this client.
• SocialPing – Twitter monitoring
• Tweet Grader - see how influential you are on Twitter.
• TweetStats - statistics about your Twitter account (or others). I particularly like the “while you are waiting” messages. Once generated, you can also create a Wordle of your tweets.
• TwitaHolic – user rankings and Twitter statistics.
• TwitIQ - more analytics, automated expansion of shortened URLs and a lot more.
• TwitSprout – one page Twitter dashboard

Tools to improve upon Twitter (particularly the interface):

• BufferApp – allows you to spread your tweets out over the day
• coTweet – allows multiple users to tweet from one account. This can be very helpful for those who have a business related Twitter account and multiple people who want to use it. MediaFunnel is another service which is somewhat similar.
• FormULists – create Twitter lists and more
• HashTracking – this is presently in beta. It should allow you to track any Twitter hash tag.
• Manage Flitter – allows you to link Google+ to your Twitter account
• MarketMe Suite – social media dashboard
• NetVibes – Twitter (and other social media) aggregator service.
• Nurph – create your own Twitter chatroom
• SnapBird – allows you to search Twitter streams
• Twaiter – for those who want to send a tweet at a specific time (and you can determine the best time to send your tweets using tools like SocialBro).
• TweetChat – Twitter chatrooms (like Nurph)
• TweetDeck – built using Adobe AIR, this tool allows you to view your Twitter feeds in real time. You can set it to provide alerts each time something new is posted by someone you are following. I don’t recommend doing this for the same reason I don’t recommend setting alerts to tell you every time you get a new eMail message.
• TweetSpinner - follower analytics and various tools (such as the ability to rotate your Twitter profiles and designs). You cna also schedule tweets (like Twaiter).
• twhirl – built using Adobe AIR, an alternative to TweetDeck
• TwitLonger – for tweets exceeding 140 characters in length (see also twtFAQ)
• TwitPic - to share photos on Twitter (this can be automated within tools like TweetDeck)
• TwitterFall - to view trends and tweets by region or location.
• twtFAQ – for tweets exceeding 140 characters in length
• wtHashTag – API to examine specific hashtags. Useful to examine trends.

Browser add-ons:

• RockYourFirefox – official Twitter addon
• TwitBin – add on for Firefox

Conference (possibly class) related Twitter tools:

• TweetDoc – document your Twitter events
• TweetWallPro – turn your event into a Twitter conversation
• TwtPoll - create simple Twitter polls
• TwtVite – create and find TweetUps in your area.
• twubs – Twitter groups built around hashtags

I don’t know how to categorize these:

• twtBizCard – Twitter business card
• twtQpon – create Twitter Coupons
• twtPets – Twitter for pet enthusiasts

Device specific apps:

• Android
  • TweetCaster Pro
  • UberSocial (formerly TwitDroid)

• BlackBerry PlayBook
  • Blaq
  • Seesmic (looks like they are dropping support on the PlayBook)
  • tweedless

Yes, I know the above is an incomplete list. That is why comments are open/ moderated. If you have a tool which you prefer and it is not in the above list, please add it in the comments section. I do not own an iPhone, nor an iPad, nor an iAnything. Therefore my above items are focused on the Android market (with some Blackberry PlayBook apps) and web sites. Again, enlighten me by placing comments in the spot below. As long as they are not spam, they will be approved.

I hope this overview of various tools has been informative/ helpful. Perhaps you now have a better understanding why I refer to Twitter as an “ecosystem.”

On more than one occasion, I have mentioned to someone – “if you followed me on Twitter…” Often, I get either a blank stare or some short statement about not using Twitter. I thought I would take a little time and explain why I use Twitter. Short answer – it helps me professionally. I tend to think of Twitter as an online version of meeting around a water cooler. Of course, you get to choose the individuals you want to exchange information with. Ok, how does this help me professionally?

First, I follow a number of people I know and those who are influential with the technologies I have interest in. I never cease to be amazed at the insights one can obtain in a mere 140 characters.  One can be almost overwhelmed by the speed of change in web technologies. Frankly, it is faster and more pervasive than any other area of computer technology I am familiar with.  Those who know me, know that I am familiar with many aspects of computer technology. It is no longer possible to keep up with all the changes by reading articles and books. Most are outdated by the time they are published. Side note – depending on the people you follow, you can also keep yourself well informed of global news. For example, I knew Steve Jobs was dead before it was reported on any news network (and was able to share that information with others before the start of a session at AdobeMAX (no one else in the room had checked their Twitter feeds before me)). Similarly, I knew of the recent earthquake in San Francisco as it was happening. Twitter helps me keep up to date with what is happening in web technology as it happens. No other service comes close.

Second, I routinely use it myself (tweet). Originally, I published at least one new thing I learned every day. Now, I tend to post a number of tweets on various aspects of technology (ranging from articles I have read/ written) to questions about certain technologies. When I am participating in a conference, I tend to tweet more often (and employ an appropriate hashtag – for terms, see below). Many individuals at these conferences (myself included) review Twitter streams for that particular hashtag. This has allowed me to meet a number of individuals who I never would have met at these conferences. Often, we find we share very similar interests. This happened repeatedly at the recent AdobeMAX conference I participated in. For example, I posted a photo of the speaker as a session was about to start and was immediately mentioned in a tweet. The tweet told me to turn around because that individual was sitting two rows behind me in the session. They figured out my location from the photo I had just posted (and I am rather obvious in a crowd). Additionally, there is a #FF (follow Friday) tradition where individuals tell their followers that they should also follow certain individuals. This is typically done on Fridays. Twitter helps me connect with people who have similar interests.

Third – I often use it as a short chat session with individuals I know. This is done with DM (direct messages). These are private in that both you and the other individual must follow each other. These posts do not appear in your public timeline. This is one of the fastest ways to obtain an answer from a respected authority. Obviously, one doesn’t want to over use it. For example, a student in one of my network security classes identified a bogus gMail certificate. I tweeted a screen capture of this to several security experts and received nearly immediate feedback from a number of individuals who provided significant insights into this particular certificate error. Twitter helps me get needed information incredibly quickly.

Now that you know why I use Twitter, let’s focus a bit on the interface itself. First (and most importantly), I almost never use the Twitter website itself. It is simply too clunky. I use TweetDeck (now owned by Twitter) and TweetCaster Pro for most of my interactions. The latter tool can be found in the Android Market. One can set up lists to follow specific people or hashtags. One can set these to display notifications when there is  new tweet or you are mentioned by someone else. Yes, these can be just as annoying as the email notifications we have all turned off by now. I find these two tools to be very helpful in managing the amount of information generated by those I follow on Twitter (for example some tweet over one hundred times per day, others tweet once a month or less).

I also use tools to analyze who is following me. These include TwitSprout and SocialBro. Oh, yeah, I found out about these tools through… you guessed it… Twitter. Here is a little “behind the scenes” information. From TwitSprout, one can see overall trends (losing a few followers since I haven’t tweeted much in past few days). Just click on the image to see a larger view.

Using SocialBro, I can tell where my followers are located, what their interests are, and when the best time for me to tweet is to reach the greatest number of individual followers. For those who are curious, I provide maps to the locations of my followers around the world as well as those in North America.

Those reading this should now have a better understanding what I mean when I say “if you followed me on Twitter…”

Terms (these are some of the commonly encountered terms associated with Twitter that I have used above).

• Direct Message (DM) – In Twitter interface, one uses d followed by the Twitter user name to privately communicate with someone. Both you and the other individual must follow each other on Twitter in order to take advantage of this capability. These notes do not appear in the public timeline.
• Hashtag – One must begin with a # immediately followed by a short phrase. For example #AdobeMAX. If  number of people assign the same tag (perhaps during a large conference), one can follow posts by others participating in the conference.
• Mention – When someone else includes your Twitter username in their tweet. For example, @Mark_DuBois posted a blog entry on Twitter fundamentals.
• Tweet – This is the individual short message (140 characters or less) posted by someone on Twitter. For those who are verbose, there are services like TwitLonger (which allow you to use more than 140 characters).

It is rare that one is present at a defining moment in the history of technology. This was one of those events which focused on the tectonic changes happening in technology today. Although touch and gesture are big, the ubiquity of mobile devices is changing the way we interact. We need to recognize this also has profound implications for the way we teach and learn.

Here are my insights from all the events I participated in at AdobeMAX this year. We are witnessing a convergence of technologies including: cloud computing, mobility, and social media. This will have a definite impact on how we teach and learn. There are three “elephants in the room” that we should focus upon.

• Combined technologies. Although many of these technologies are revolutionary by themselves (for example, cloud computing), we need to focus on the combination of these technologies. That is where the significant gains in both teaching and learning will occur. Although I am still trying to understand all the implications, tools like Adobe Proto running on a tablet and passing wireframe information to “the cloud” which can then be directly imported into Dreamweaver is an example of a small convergence which may well affect the way we teach web design to our students. We need to start thinking in the terms originally voiced by Tim Berners-Lee when creating the WWW – access to desired information by anyone, at any place, and at any time. After over two decades, this is now within reach.
• Magnitude. We are probably underestimating the magnitude of the changes happening. Consider that each major technological innovation (whether mainframe to mini-computer or desktop computing to the WWW) resulted in at least a 10 fold increase in the number of devices and interactions. We already have more devices connected to the Internet than there are people (and the cell phone is more ubiquitous than the toothbrush). We can no longer think in terms of a virtual campus with online classes. We need to start thinking about unfettered access to information on an “as needed” basis. We need to think of the experience for both student and teacher and how multiple devices/ views will affect these experiences.
• Flexibility. We need to rethink how we can make this possible in our institutions. At school, it is impossible for me to set the “out of office” assistant to reach students who don’t use their “sanctioned” email account (news flash – most don’t). We put together rigid budgets annually. We select textbooks months in advance of a given class being taught. All these approaches worked great in the 1960s. However, it is 2011 and we need to adapt. We need to adopt a much more flexible approach to teaching and learning and the devices this is happening upon. On demand eBooks (or chapters) might be the least of our concerns. I can almost guarantee this is going to be a most cathartic experience for most academic institutions.

Ok, enough speculation; here are some notes I took during the various sessions. I have listed them in chronological order.

October 3 Keynote – The Adobe Creative Cloud was announced (planned availability in November, 2011). Services, community, and applications are synchronized via the Adobe Creative Cloud. Initially individuals will have access to 20 GB of storage in this medium. Creative services – Adobe has acquired TypeKit (https://typekit.com/). This will be a subscription based service with fonts under one license and working with all browsers. Adobe Digital Publishing Suite, Single Edition was also announced. Creative community – Adobe announced https://creative.adobe.com/ where individuals can share examples of their work. One can also search for examples of work and see how it was created. Creative applications – in addition to familiar desktop applications (such as Dreamweaver and Photoshop), there will be a number of touch based apps (for tablets) emerging in the coming months. These include: Ideas (which allows you to sketch on your tablet and upload your ideas for further refinement in other apps), Carousel (which allows you to store, share, and edit your photos form the cloud – they no longer need to reside on a given device), Kuler (to use and design color themes), Collage (think electronic mood board), Debut (for more elegant presentations), Proto (for initial web design work and wireframes), Photoshop Touch (for editing of photos on tablets). These will initially be deployed for Android devices in November, 2011.

Developing Android applications with AIR and Flash Builder – This hands on session provided experience in developing an app and testing on your local Android device. We started with the basics of configuing your device and progressed through the more advanced topics of launching native SMS text and phone call applications, working with gestures, handling multi-touch, interfacing with the accelerometer, performing geolocation and interfacing with the camera. Working code snippets were provided (one needs the latest version of these tools to actually work with the code). Additional deployment issues were also discussed (including whether to pull the AIR app form the Android Market or include a captive Runtime version). I learned a lot in this session.

360/ Flex Unconference session – Getting data from here to there – This session covered the basics of connecting your Flex application to various data sources. Except for raw TCP calls, the following means of passing data were discussed (and code samples were reviewed): BlazeDS, remote object calls, SOAP and Web Services, REST/ JSON calls, XML over http, external variables within the web page itself (using FlashVars). Advantages and disadvantages of each approach were discussed along with a list of which servers work best for a given technology. This session provided a lot of useful information.

October 4 Keynote – Where the October 3 keynote focused on design aspects, this keynote focused on developer aspects. One of the items to emerge over and over was the inclusion of greater emphasis on HTML5, CSS3, and JavaScript as the core means of developing apps. Flash was covered and the combination of Flash with HTML yields great possibilities. Flash Player 11 and AIR 3.0 were released (with many impressive new capabilities). Contributions from Adobe to WebKit and jQuery were highlighted. PhoneGap has been acquired by Adobe (it is already incorporated into Dreamweaver CS 5.5). Numerous examples of what can be done in Flash for gaming were also covered. Fireworks update pack for CS 5.1 was also released (which allows one to easily modify jQuery mobile templates to create a custom theme). CSS Regions and CSS Exclusions were also discussed (I have demonstrated these at a previous Adobe User Group meeting on campus). CSS Shaders has now been submitted to the W3c (think Pixel Bender using CSS). 2D and 3D graphics and animation within Flash were also reviewed. This was another impressive keynote with a lot of additional information wich may well affect what we need to include in our web classes.

Building your first mobile application – This was another hands on lab session (I tried to focus on the lab sessions as much as possible as I know the other sessions are being recorded and I should be able to watch them in the future). We built a simple application with Flex and Flash Builder. We also saw some of the pitfalls one may encounter when developing for mobile devices. We developed a mobile app covering the restaurants in the vicinity of the LA Convention Center and Staples Center. We also saw how data is passed to the application.

Design better experiences with Fireworks by understanding how people think – This was a great session on UX (User Experience). The presenter has a background in psychology and covered many aspects which can affect the outcome of our testing. These include the framing effect, anchoring effect, and the theory of constraints. We reviewed various techniques to help individuals focus on solutions (such as the 10 – 3 – 1 technique and 6 in 6 minutes technique). The presenter reviewed creativity and flow and discussed how our apps should enhance flow (where you get so lost in the experience that time seems to stand still). A humorous reference was also provided http://www.uie.com/brainsparks/2011/07/08/beans-and-noses/. (Sometimes you just have to let an executive make a serious mistake; it is the only way some learn). We also had the opportunity to creatively design a digital mannequin as part of the concluding exercise.

Build it with jQuery Mobile – This was another hands on lab where we developed a wine list application for deployment on Android or iOS devices. We reviewed the advantages of single vs. multi-page apps and spent a great deal of time actually developing a working app we could deploy. I participated in a similar session last year, but this one took advantage of the latest technologies including WebSQL and persistence.js. We worked with swipe gestures (to delete items in the application).

Adobe MUSE overview – Although I have been working with this product for a while (version 3 is available from Adobe Labs), I learned a lot in this session. This also was a hands on session. We covered the basics of working with the interface (I presented on this at a recent user group meeting). There are many new features in version 3. We built a standards compliant site in 90 minutes.

Work in new ways with mobile apps – This session focused on the use of the just announced Proto tool for tablets. We got to see how one can develop a wireframe and then pull the developed wireframe into Dreamweaver (it generates HTML code). This takes the recent trend towards HTML wireframing to a whole new level. One can also collaborate with others via the Adobe Creative Cloud (by sharing these prototypes).

CSS for Web and Mobile Design – This session focused on many of the new CSS-3 enhancements (a fair number of those covered with –webkit specific). Progressive enhancement and regressive enhancement were covered. A number of advanced techniques were covered (such as using border to generate a triangle and making a box shadow with only one side).

Mastering mobile design in minutes with Fireworks – After spending a fair amount of time on the fundamentals of mobile design, the speaker focused on the newly released CSS-3 enhancements for Fireworks. This allows one to rapidly create/ modify existing jQuery mobile themes (much more difficult in the past). I have downloaded a copy and am in the process of developing a deeper understanding so I can share with students.

What’s new in Flash Catalyst CS 5.5 – This was the final session I attended at AdobeMAX. It was also the session where I saw the power of social media. I learned about the death of Steve Jobs before anyone else in the room (roughly 100 people in attendance). Just happened to check Twitter feed prior to the start of the session. The history of Flash Catalyst was covered (beginning with the announcement of Thermo in 2007 – at the AdobeMAX I also attended). Many new features and components were presented (a fair number of which I was unaware of until this session).

One final “take away” – I am amazed at the power of social media (such as Twitter). Yes, I tweet a lot (over 3,500 times at this point). However, I met new individuals at AdobeMAX (they approached me based on my tweets). Turns out we shared a number of common interests. In one case, I tweeted a photo of the speaker and had someone two rows back tell me to look back as they were also in the audience. I have gained new insights into what can be done with social media like Twitter based on my participation in the conference.

Los Angeles. Sunday, October 2,  2011 – This event was provided for educators (those living in the Los Angeles area and those visiting from many other states and countries). Sessions were recorded for those who could not physically be present. It was a great opportunity to meet and discuss current trends (in technology and education) with roughly 150 individuals throughout the afternoon and evening.

Synopsis of the information presented below. As educators, we need to be aware of the profound changes happening at this time. We have roughly 3 years to adapt to these changes. Learning will happen when and where students choose. We must use these technologies to fully understand their capabilities (hint – if your teacher doesn’t have one or more tablets and smartphones, it does not bode well for them in the long run).

I participated in the following sessions:

• Joseph Labrecque – From desktop to mobile: application functionality for small screens. The key points of his presentation included the following – when going from desktop to mobile, one must distil everything to the absolute minimum. One should also focus on the platforms where the app will be used (and adjust accordingly). AIR (Adobe Integrated Runtime) is one technology solution which can help you deploy consistently with less time focused on individual platforms. In the world of mobile, one needs to focus on issues such as resolution, touch interface and multi-tasking (whether applications continue to run in the background or are closed when you open a new app). Individual clients are used to specific behaviours on their device (iPhone vs. Android) and they expect your app to behave similarly. Joseph also provided an overview of the mobile app he developed at the University of Denver (and explained why certain aspects of the desktop app were not included (or were moved).
• Tom Green – Multi-screen: Our lives just got interesting. Tom focused on the world view of mobile devices (and used China as an example of sophisticated mobile users). He helped put many of the issues we face into a global perspective. For example, the transactions on Taobao (http://www.taobao.com/index_global.php) were $60 billion (in equivalent $US). This is the Chinese equivalent of eBay (which reported $3 billion in the same time period). 66% of Chinese access the Internet via their smartphones (that is 660,000,000 people). 70% say they can’t live without their phones. 40% of Chinese “netizens” create content (equivalent of Facebook, Flickr, and so forth). This is 2 times the US rate. Humanity has become untethered. There were roughly 10 billion devices connected to the Internet in 2010 (and there were only 6.775 billion people). Smartphone sales have exceeded PC sales. All this has profound implications for teaching and learning. As educators, we don’t need to develop apps, we need to focus on learning experiences. Unfortunately for many – “changing education is a lot like changing a cemetery – you don’t get much help from the inhabitants.” As educators, we must be both consumers and creators of media. We have about 3 years before we are left behind. Institutionally we need to rethink where learning happens (hint – it will not be in the classroom). How do we keep up? As educators, we must be intensely curious and not afraid of change. Tom also provided a list of resources.
• Jenna Date and Dylan Vitone – Collaboration and partnerships within the community. Jenna and Dylan provided a number of examples of work their students have been involved with. Both Human Computer Interaction and School of Design projects. Unfortunately, Jenna could not share the results of much of her student’s work as they developed proprietary applications for various companies. They covered the process by which their students developed these applications. This included a lot of research (and involved “social following” – mining information from clients Twitter and Facebook feeds). Unfortunately, I had to leave this session a bit early to set up for my presentation.
• Mark DuBois – Modifying existing websites for mobile/ multi-screen – I focused on the actual process involved in transforming an existing web page into a page which displays properly from a smartphone to a large screen TV (the largest is presently 82 inches). If you would like to examine the actual presentation (or the code I supplied, please visit http://markdubois.me/2011edsummit).

I have been examining the recently released Windows 8 Developer Preview. Obviously, my focus is on web development related materials. I was excited to see that JavaScript is included as a language choice with Visual Studio 2011. That will (hopefully) be the focus of another weblog entry in the near future). Today, I wanted to focus on my initial experiences with Internet Explorer 10.

Before getting started with the specifics, I think it important to note that Microsoft appears to be developing for emerging technologies and their associated human computer interactions. I suspect we will be seeing a lot of new hardware choices before Windows 8 is mainstream.  The emphasis on Windows 8 is obviously mobile and multi-screen. This does not always seem to play well on a more traditional desktop/ laptop machine. Since I don’t have a recent Windows phone, the Metro interface is not as intuitive as I had hoped. I experienced a fair amount of fumbling until I “got it.” This was likely compounded by the fact that I was testing in a virtual environment on both desktop and laptop machines (none had a touch interface).

My initial plan was to download the .iso file and install using VMWare Player. Thanks to a couple of timely tweets, I saved myself a significant amount of grief. Apparently, there were initial problems with trying to launch that in VMWare (although many observed the new blue screen of death). Therefore, I chose both Oracle VirtualBox and Microsoft Hyper-V virtual environments. The install went smoothly in both. The initial screen is shown below. Obviously, I would then choose Internet Explorer from among the options. One can click on the image below to see a larger version. This is true for all the images below as well.

When I clicked on Internet Explorer, I immediately was taken to the Metro version (yes, there is also a desktop version). The Metro version has little browser chrome. One must move the cursor to the bottom (or right click) to open the interface. The image below shows the interface (including the address bar). One will note there are a limited number of choices (hopefully this will improve in the final version). I also note much better support for advanced CSS-3 (including rounded corners, shadows and so forth). I also noted that one does not need a vendor specific prefix (like -ms or -webkit) for most of the CSS-3 features to be recognized. Here is what a page looks like in the Metro view.

Ok, that is great – now, how do I view the source code? I know, only Mark would want to know that. Short answer is that you need to go to the more traditional desktop view. And, how do you get there, you might ask? Although not intuitive, one clicks on the second icon form the right on the bottom.

This activates the desktop view (which is another copy of Internet Explorer 10). Note that you can use the traditional Alt-Tab and Windows Key – Tab to switch between running applications. The desktop view has more traditional browser chrome and features such as view source and developer tools. That view of the same page is shown below.

Ok, now, how do I go back (without using the Alt-Tab key combination). Turns out there is the ability to hover over the edge of the application and see the most recent application. This took a little getting used to (I suspect this is where the touch environment would come in very handy). Note the screen capture below.

Now that I am back in the Metro view, I might want to open a new tab. If one right clicks, more options appear. In this case, I already have two tabs open.

The tabs are similar to what one experiences in other platforms and their browsers (for example Android browsers). One can choose to add a new tab. This is where it does get a bit “interesting.” So, I asked for a new tab and received the following screen.

Note the back arrow in the upper left of the image above. Should I foolishly click on that (instead of selecting from the choices presented), I would get a white page. This makes sense as I did open a new tab and the tab would initially be blank. However, I need to examine the open tabs to realize this. In my opinion, this is a potential issue for those with cognitive memory impairments. In my simple mind, clicking on the back icon should close the new tab and take me back to the most recent tab I was using.

I also wanted to note that you can pin specific pages to the start menu. Note the pin icon above.

Now for overall initial impressions. The interface is somewhat intuitive (provided you have experience with smart phones or tablets). The lack of chrome in the Metro interface is a plus for those wishing to see more of the web page as an immersive experience/ app. The ability to see the page in a more traditional desktop view (along with necessary tools for a developer) is a plus. Of course, having this as a separate application will take up additional resources.

My biggest concern about the entire Windows 8 environment is that I see one could potentially lose work in progress. For example, one might have multiple tabs open in the Metro version. Perhaps one is in the middle of doing some research, filling out a form, checking weblogs, and so forth. Without right clicking, there are no visual clues that you have multiple tabs open. Therefore, one might forget to complete the rest of the form (or have it time out) before logging out. Perhaps the touch version addresses this concern. Overall, I do like the interface (and choices). However, it is a bit of a risk to diverge this far from more traditional Windows interfaces. Time will tell how risky this is.