Mark DuBois Weblog

Now that the semester is winding down, I wanted to spend some time experimenting with my Samsung Galaxy Tab 10.1 and Adobe Proto. To me this is a key tool to rapidly create wireframes. It is also something which I think needs to be incorporated into our web curricula. Therefore, I have decided to do several posts dealing with the fundamentals of using Adobe Proto. Arguably, this should be done in collaboration with the client.

For the first project, I thought it appropriate to tackle a simple form on a single page. BTW – this took me well under 20 minutes (including taking the screen captures). To me, this highlights why such a prototyping tool should be included in a web curriculum.

Step 1 – we need to create a new wireframe in Proto (we can touch the plus (+) icon in the bottom center of the application on the tablet to create a new wireframe. For the purposes of this document, I accepted the default values. A screen capture is below. As with all images, you can click on the image to enlarge it if you need to see more details.

Step 2 – I consider it a “best practice” to surround my content with a <div> element. Therefore, I first created an upper division which contained sample breadcrumb navigation.

Step 3 – I next added a <div> to contain the form and included a heading [Hint: long tap on the lorem ipsum content to edit it and replace it with more meaningful text.] I also included a couple of initial fields on the form. You can easily duplicate a field once it is placed on the form by tapping on it and selecting “duplicate” from the = choices adjacent to the field.

Step 4 – I began adding more fields for the form. Note that the text size may vary depending on the initial size of the input box. You can change the size of the text by selecting the object and modifying it as shown below.

Step 5 – I next added a dropdown list and began modifying the contents (instead of the default Item 1, etc. I thought it best to actually list states for the hypothetical client). To modify the contents, you select the item and long tap on the contents. You can then edit it for the desired content.

Step 6 – I next added some checkboxes (you can control the number of boxes with a slider).

Step 7 – I completed the wireframe by adding a “logo” and submit and reset buttons (and aligned them with the default grid).

Step 8 – I next tried a preview in Proto. Obviously this is where a client would need to be heavily involved in the review and modifications to the wireframe.

Step 9 – Lastly, I changed the default name to Sample Form and uploaded the wireframe to the Adobe Creative Cloud. I could then share the link with others and they could review and comment on the file.

Step 10 – I then downloaded the form, unzipped the files and began working on them in Dreamweaver. Once in Dreamweaver, I noticed several things. Obviously, the code is HTML5. However, the code does not validate initially. Most obviously, there is no <form> element encapsulating the form objects included in the wireframe. I also immediately noticed that the placeholder contents for each of the input form fields were included as value= attributes instead of the newer HTML5 placeholder= attribute. I also note that the CSS uses absolute positioning throughout. I do understand this is a wireframe and will need to be tweaked significantly by the web designer. However, the code is a reasonable starting point (and significantly beats doing this on a paper napkin and then trying to duplicate in code).

For those interested in examining the generated code from Proto, I provide this zip file. IT is exactly as downloaded from the Adobe Creative Cloud. I look forward to your comments as to whether this introductory tutorial helped you better understand the capabilities (and limitations of Proto).

For those who might get easily bored on this “Black Friday,” I offer the following short post on fun with Google. Just visit Google.com and try some of the following search terms. I suppose it should go without saying that you want to use a modern browser (which would not include IE). If you need to see a larger view, just click on any of these images. Yes, I found out about these using… Google.

Do a barrel roll – if you search for this term, the interface will roll once. A screen capture (part way through) is below.

askew – as you know, this makes your page slightly off level. A screen capture is below.

recursion – as you know, this is a function which calls itself. Note the results at Google. Ok, I find this funny – deal with it.

Google Gravity – choose the “I’m feeling lucky” option as shown below. Results are found in second image below.

google loco – as always, use the “I’m feeling lucky” option.

google 133t – for those who are not familiar with this. 133t is an old term for elite – has been used by script kiddies to show they are hackers. Results of this Google search are below.

ewmew fudd – Just because you can…

xx-klingon - yes, your search engine in Klingon

xx-piglatin

xx-swedishchef – remember the Swedish Chef form the Muppets?

Last one – what is the answer to life the universe and everything – If you know me or are familiar with a certain science fiction writer, you can probably guess what this will reveal. No screen capture – look it up yourself.

Ok, your turn… These are the ones I am aware of. What others ones have you discovered at Google.com? Please update through the comments below.

I have been working with Adobe Touch apps for a while and I occurred to me that someone may want a “cheat sheet” to help with specific gestures and menu items. Ok, I sometimes forget how to draw a dropdown list using a gesture. I created this list as a starting point. If others find it useful, please comment. I would appreciate receiving credit where appropriate. Click on the image below to get a full screen version. I also provide a PDF file (for those who want to print a copy for reference).

In my simple view of the world, it should be relatively easy to take a screen capture of what I see on a smart phone or tablet. Why would I want to? I often need to show students what a given environment looks like. Using a document camera or some other device to externally capture the image is lame at best. I want to do this as natively as possible. With a RIM PlayBook, I hold both the volume up and volume down keys at the same time and… presto… I have a screen capture. In the Android world, things are not quite as easy. This seems to be a feature of the firmware. Some devices (like my Samsung Galaxy Tab 10.1) have this as an option. Simply touch the appropriate spot and you have a screen capture.

When I received my Amazon Kindle Fire a couple of days ago, I thought it would be relatively easy to do the same. After all, with the new Silk web browser, I would certainly want to share images of websites with my students. Boy, was I mistaken as to how easy this is. [Note, I did discover in some forums that this is a future possibility in the next version of the Kindle Fire OS. My fingers are crossed that those responsible make this a feature.] In the event others want to do the same, I offer the following instructions. I am using Windows 7 (64-bit). Your mileage will vary. FYI – elapsed time to get this working was between 2 and 3 hours. Hopefully the notes below will lessen your efforts. All links will open in a new window. You can also click on any image to see the full sized view.

Step 1 – Install the current JDK (Java Developer Kit).

Step 2 – Install the current Android SDK (Software Developer Kit)

Step 3 – Navigate to the folder where you installed the Android SDK. In my case, this was C:\Program Files (x86)\Android\android-sdk. Once in that location, launch the SDKManager. You should then be able to install the necessary Google USB drivers. A screen capture of the finished result is shown below.

Step 4 – Locate the spot where these drivers were installed. In my case, they were located at C:\Program Files (x86)\Android\android-sdk\extras\google\usb_driver. Make a copy of the android_winusb.inf file (I never change original files without making a copy). Edit the android_winusb.inf file. Locate the following following lines [Google.NTx86] AND [Google.NTamd64] and place the following code underneath the [Google.NTamd64]  entry. Essentially you are telling the system that this is a composite USB device and providing the appropriate vendor ID (1949). I strongly recommend copying these lines.

;Kindle Fire
%SingleAdbInterface% = USB_Install, USB\VID_1949&PID_0006
%CompositeAdbInterface% = USB_Install, USB\VID_1949&PID_0006&MI_01

Step 5 – Open the adb_usb.ini file for editing (once you have made a copy). You will find this in the %userProfile%/.android folder. At the bottom, add the following item on a single line (don’t worry about the warning message to only modify this file using the adb utility.

0×1949

Step 6 – Connect your Kindle Fire. Make certain you have set your device to install applications from unknown sources. Note that the Kindle Fire seems to be running a modified version of Dalvik so you do not have the option to enable USB debugging (which you would have on other Android devices). You will likely get an error message indicating that the device drivers did not install properly.

Step 7 – open Windows Device Manager and locate your device. Select “update the driver” and point to the location of the drivers you installed. In my case – C:\Program Files (x86)\Android\android-sdk\extras\google\usb_driver. You may need to refresh the device list once finished, but your Kindle should now be recognized. I included a screen capture below showing that the device is recognized as a Kindle.

Step 8 – Run the adb utility at the command shell to confirm you have a device recognized. Note – you might want to add some of these paths to your environment variables unless you enjoy typing. I used the command adb devices to see the following.

Step 9 – Navigate to your Android SDK folder C:\Program Files (x86)\Android\android-sdk\tools and start the ddms.bat utility. You should now see your Kindle Fire (and be able to do screen captures).

Ok, where was I? Oh yeah, what does the Kindle Fire look like. First we see the interface (shown below). I do like this launcher. Your interface controls are at the top.

This is what the Silk browser looks like when viewing the current website.

Lastly, here is what the touch keyboard looks like.

I would be curious what your experiences have been with the Kindle Fire. I may well post additional comments in the future. Just thought that my experiences at obtaining screen captures was worth a post.

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.