Mark DuBois Weblog

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

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

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

Due to some last minute scheduling issues this semester, I almost had to have an open lab in a room with no removable hard drives and the computers locked down to the point where nothing could be installed. Yep, this would make teaching advanced web technologies a bit dicey. As I was scrambling to find other rooms, I was also working on “Plan B.” This would have involved the use of a web based IDE (Integrated Development Environment). As long as students had access to a browser (and could also bring a USB drive), this could have been a workable solution. Although the room issue did get resolved, I thought it might be helpful to others to learn a bit about what I discovered. Hence this post.

First, my criteria for any web based IDE. The short list is below. By creating this list, I eliminated a number of potential contenders (since some cost, for example).

• Must be free to use (even a limited version is ok as long as students don’t have to shell out any money to use the IDE).
• Must be able to handle HTML, CSS, JavaScript, and PHP at an absolute minimum.
• One must be able to access files (preferably via upload and download to a USB drive, but I also entertained using GitHub or similar platforms).

Ok, based on the above criteria (and some quick searching online), I came up with several contenders. Frankly, I was amazed at the number of choices. I am listing them in alphabetical order below. Yes, some of these are relatively restrictive (with a focus on a given technology). However, the may prove useful if your focus is on that technology and you are severely hampered at what you can install locally. I probably missed a fair number (please use the comments section to enlighten me on the ones I missed). If anyone has experience with any of these environments, I would also appreciate comments.

Those that made the list are discussed in more detail below. However, here are the links to each (for those who want to investigate further on their own).

• Cloud9 – http://cloud9ide.com/
• CodeRun – http://coderun.com/ide/
• CSSDesk – http://cssdesk.com/
• eXo – http://www.cloud-ide.com
• Ideone – http://ideone.com/ (PHP only for our purposes)
• jsFiddle – http://jsfiddle.net/
• ShiftEdit – http://shiftedit.net

Yes, there are a number of choices. No the choices are not comparable in all cases. That being said, I recommend using the appropriate tool for the job. For example, if you only need to code a small amount of CSS and observe the effects, CSSDesk may be a perfect solution. On the other hand if you need to develop a full application eXo and Cloud9 may be much better choices. Since I teach a number of disparate technologies related to web pages, any one of these solutions may be the correct solution in a specific case. I was amazed at the number of choices and capabilities available. I particularly like the integration with PaaS (Platform as a Service) providers in the more advanced IDEs.

Ok, here are my slightly more detailed overviews of the various IDE choices mentioned above. I tried to provide some screen captures to help you better understand their capabilities. Again, I would welcome feedback/ comments from those who have used a particular IDE.

Cloud9 – http://cloud9ide.com/ – this is free for open source projects. This IDE has a number of useful features. For example, one can employ JsLint when working with JavaScript. There are a number of default templates one can use to get started (see below).

Cloud9 relies mostly on GitHub for a repository, but it also appears that one can use FTP with your own server. I did not have time to fully investigate this, but the initial screen capture is below. Click on the image to see a larger version.

The only issue one might have with this facility is security. For example, you are placing your FTP credentials in Cloud9 without knowing who else is watching. This would be of particular concern when using plain FTP (instead of sFTP). Ok, I was once paid to be paranoid and I can’t help thinking of potential issues like this. Overall, this looks like a very useful solution. I have had several students (and former students) tell me they use and like this IDE. Although I did not use it (in the interest of time), there is a plugin for the Chrome browser.

CodeRun – http://coderun.com/ide/ You can sign up or simply start using the environment. Emphasis is on selected code (ASP.Net with C#, JS, and PHP). Note the project types shown below. With CodeRun you can also download a zip file of the solution you are working on.

I chose a jQuery template as a starting point. Note the code is XHTML compliant. Details from the initial template can be found in the image below.  Just click on the image to enlarge the details.

The end result is displayed below (only slight modification from supplied example).

CSSDesk – http://cssdesk.com/. Yep, this one has a focus on CSS. You can download the code you modify as a zip file. The changes happen in real time as you modify the CSS or HTML. A quick example is shown in the screen capture below. Click on the image to see a larger version.

eXo – http://www.cloud-ide.com. This is another environment which can be used for free. It is presently in beta (private). You begin by creating your preferred subdomain on their server. This has to be reviewed in their beta program and then accepted. It took roughly half a day for this to happen. I don’t view this as a problem at all since this is still a beta. Once all is created, you login and can then begin working with their sample templates or build your own files from scratch. Example templates are shown below.

The resulting code is HTML5 (I chose a simple example with limited HTML, CSS, and JS). Click on the image to see a larger version that you can read.

eXo Cloud also has significant integration with various PaaS (Platform as a Service) suppliers. Another screen capture is below.

Lastly, there are a number of capabilities found in the file menu system (including the ability to download your work to save locally).

Ideone – http://ideone.com/ (again, PHP only for our purposes). Although a number of languages are supported, there is no support for HTML,CSS, and limited JavaScript. Note the screen capture below (click on the image to enlarge).

I have included this for those who are interested in other languages, but I would recommend one of the other IDEs for those who just want to focus on HTML, CSS and related web technologies.

jsFiddle – http://jsfiddle.net/. The emphasis with this environment is obviously JavaScript. One can employ a significant number of JS frameworks (some are shown in the screen capture below).

One can easily modify one of the examples (in this case, I used YUI and pulled my recent tweets after also updating the CSS. I would recommend signing up for an account so you can share your fiddles. It would appear that the easiest approach to saving your work locally is to simply copy [separately] the HTML, CSS, and JS and then save them locally.I recommend clicking on the thumbnail image below to open it as a full sized image.

ShiftEdit – http://shiftedit.net This is another web based IDE focused on HTML, CSS, JS and related technologies. This site wants you to tie the editor directly to a site. One can test small bits of code in the editor, but to do a lot, one must link to a site. Of course, this assumes one trusts that the credentials you supply are secure. Note the types of files one can create (below).

Again, one must also link to some repository (this can be a web site). For example, one could connect via FTP as shown in the screen capture below.

The generated HTML is HTML5 by default (see below).

So the above is my list of alternatives to trying to develop web pages on a locked down computer. Frankly, I was amazed at the choices. Many appear quite robust. I would be most interested in your experiences with these web based IDEs and what others you would recommend for HTML, CSS, JS and server side web technologies. Note that I need to approve comments (I get too many attempts at SPAM to blindly accept comments). That being said, as long as you have a legitimate comment, it will be approved below.

We are about to start the Spring, 2012 semester where I teach. Our college [Illinois Central College] has been recognized as a Web Professional Academy since 2006 (when the Web Professional Program began). Before we start the semester, I though I would reflect on what it means to me to be a web professional. I look forward to your comments (please place them below). Note that I must approve all comments due to the vast amount of spam comments received.

So, what are the characteristics of a Web Professional?

1. They make a concerted effort to constantly learn. Anyone who has worked with web technologies for any length of time recognizes that our field changes daily. There is always some new technology which can be employed to better address client problems. Part of this learning is that we must also unlearn and relearn. This is something I try to convey to students every semester. If you think that you already know the answer to a problem, stop and do a little research. Chances are that something has changed which will impact how you help solve a client’s problems.
2. They stay in contact with other professionals. Whether this is through the use of social media (like Twitter, Google+ or the like) or via participation in conferences or some other means. Our field is rapidly expanding and it is impossible for any one person to stay on top of all the changes. Being in contact with other professionals often helps me decide where to focus my efforts at continual learning.
3. They give back to their community. Yes, I spend a lot of hours serving as Director of Education for WebProfessionals.org and as an Adobe Education Leader and user group manager. However, I have found that it is through these interactions I often meet incredible people and establish lasting friendships with people throughout the world. I also find that these contacts help me learn where to focus my efforts (ok, this is also covered in my second point). From a selfish perspective, I have found that I always get back so much more than I can contribute when I help others in the community.
4. They understand their short comings and make a concerted effort to improve. We all have faults and blind spots. We need to recognize that and actively work at improving. If a deadline is missed, fess up to it and apologize (if necessary). Make a concerted effort to never make the same mistake twice. Always strive to improve (every day).
5. They give credit where it is due. We can not be masters of everything, but we can identify best practices and recognize those who have helped us.

What are your thoughts on what it means to be a web professional? I look forward to your comments.

As I begin this post, I must stress that I am incredibly impressed with the initial versions of Adobe Touch apps on the Android Market. I have obtained Proto, Photoshop Touch, Ideas, Kuler, and Debut. I make the assumption that these apps will be updated at some point in the future. As an educator, These are some of the things I would like to see in the way of enhancements. In my opinion, these improvements would make these products even better. I welcome your comments as I am curious if I am on the right track or have missed something crucial. I am going to focus on Proto, Photoshop Touch, Kuler, and Ideas. I have not had sufficient time to work with Debut. My perspective on all these apps is based on my use on a Samsung Galaxy Tab 10.1.

For those who want the “Cliff Notes” version – the ability to include my own starting files and tutorials and better integration between the Touch Apps would be key points.

Proto improvements I would like to see.

1. Integration with Adobe Fireworks. I have recommended Fireworks as a prototyping application for many years. It seems to me that there is a great possibility to use Proto as input to Fireworks, then to Dreamweaver. At least, that is the workflow I envision.
2. The ability to include tutorials (in the manner of Photoshop Touch tutorials) within Proto. As an educator, it would be most helpful to students if I could show them directly within the touch app how to accomplish various tasks. If it can be done in Photoshop Touch, why not in Proto?
3. The ability to import starting point (wireframes) from the Adobe Creative Cloud. Many of my students are just getting started. I would like to be able to help them better understand what wireframes are capable of (and what they are not capable of). It would be easiest if I could provide starting points (without the student having to do it all). Checkpoint files are so helpful as an educator.
4. Better adoption of HMTL5 “best practices.” For example, instead of using a value attribute for form input elements, use the HTML5 attribute placeholder. Also include a form element when a form object is placed on the page (or at least when form objects are grouped together).

Photoshop Touch improvements I would like to see.

1. The ability to add my own tutorials. The ones provided are great as a starting point. As an educator, I would really like to be able to build on these. For example, I would like to include an entire section on copyrights directly within the app. I know this is obvious to professionals, but this is something educators must stress repeatedly to students.
2. Additional capabilities (like red eye removal). There are a number of great features already included and this is one I think should also be there by default (unless I missed it).
3. Better integration with other Touch Apps. For example, I can see a file created in Ideas in the Creative Cloud, but I can not directly import the contents into a new Photoshop Touch image. With Ideas, I can include a psdx file or ideas file from the Creative Could. Seems like this should go both ways between these apps.

Ideas improvements I would like to see.

1. It would be great to be able to include additional layers. Yes, I can switch images in the photo layer, but having multiple photo layers active and multiple drawing layers would allow me greater flexibility.
2. The ability to manipulate lines once they are drawn. Ok, I admit it, I am spastic. Even with the smoothing algorithms, there are times when I draw a line and want to reposition a part of it. I know I can download and do this in Illustrator, but I also like to continue working in Ideas. Erasing and re-drawing can become a royal pain.
3. The ability to control smoothing and snap/ completion of drawing lines. This would be similar to the capabilities that have long existed in Flash Professional.

Kuler improvements I would like to see.

1. I do like this app a great deal. However, it has the same features as the online version. If there are no added features, why would the majority of people pay $9.99 (plus tax) for this app when they can use the website? In my opinion, there needs to be a clear differentiator to encourage people to use this app. Greater integration with other Touch Apps (like Photoshop Touch would be a definite plus in my opinion).

So these are my “wish list” items. In my opinion. these enhancements would greatly improve my ability to utilize and adopt these technologies in the courses I teach. I am curious what others think. Please use the comments section below to add your “two cents.” What have I overlooked? What have I misinterpreted? What would you like to see as an educator?

Another Adobe Touch App I have been experimenting with on my Samsung Galaxy Tab is Ideas. This is mostly an app to allow one to sketch/ draw using a tablet. One can either draw using a blank canvas or one can import a photo and add a new drawing layer to trace over parts of the photo. I chose this latter approach for this initial overview. I started with an image of a tropical flower that I photographed in Belize in 2007. If you wish to follow along, I provide the original image. Simply save this image locally, then upload it to the Adobe Creative Cloud and import it into your version of Adobe Ideas. You are free to use this copyrighted image for educational purposes provided I am given credit as the photographer. Your import should look similar to the screen capture shown below.

I then changed the drawing color and line size in the app. Hint: I have found having a stylus (no matter how cheap) gives me better control than using my fingers. In the screen capture below, I am changing the color of the drawing line. There is a similar capability to change the line size. If I understand correctly, for those tablets which have pressure sensitive screens, one can actually draw a line which increases in thickness as one applies more pressure to the stylus. In this case, my tablet only provides for a consistent line size regardless of the amount of pressure.

One can then add a drawing layer. Note that there is presently the ability to only add one layer in the Android version of Ideas. One can click on the camera icon to swap images (if needed). You will find that icon on the photo layer once you select that layer. I chose to stick with the single image of the flower. The drawing layer is included in the screen capture below.

One can then begin drawing or sketching over the image. In my case, I chose to trace over parts of the flower only. I also adjusted the size of the lines in various parts of the sketch. One can control the opacity of either layer (by tapping on the layers icon). In this case, the opacity of both layers is 100%.

To see the result, I deselected the background image. This leaves the line drawing only visible. That is what is shown in the screen capture below.

Once you have completed the sketch, you can upload it to the Adobe Creative Cloud. One can then download the sketch from the Creative Cloud and directly open it with Adobe Illustrator. Once in Illustrator, these lines are vector shapes which can be manipulated as desired. I provide both the .idea file and the .ai file in the event you wish to compare your results with mine.

As with my earlier posts, I hope this gives you a better understanding of the fundamentals of working with this Adobe Touch App. I look forward to your comments (below).

The next Adobe Touch App I wanted to review is kuler. This app is similar to the features you can experience on the WWW at http://kuler.adobe.com. The big advantage to using the Touch app on a tablet is the ability to work offline. For comparison purposes, I provide a screen capture of the kuler website (once I have authenticated and uploaded a photo). With all these images, simply click on the image to see the larger version.

For those who wish to work along using the kuler Touch app, I provide the original photo. You may use this for educational purposes only and should give me credit as the photographer. I took this photo of a tropical flower in Belize in 2007. Simply use your browser to save the file locally so you can include it.

Task/ mission – We will use this image as the starting point to select a possible set of colors for use on a website. I often find it easier to use a photograph and build a color theme from that when working with a client. Your mileage will vary.

Step 1 – open the kuler Touch app on your tablet (I am using a Samsung Galaxy Tab 10.1). You will need to locate the desired image and import it into the kuler app.

You should use the add image icon to include a desired image as a starting point for your color swatch. This is very similar to what you would do on the kuler website. A screen capture is shown below. Note that you can locate images from a variety of sources. I strongly recommend you respect copy rights on all images being used. In the example below, I uploaded the image to the Adobe Creative Cloud so I could easily import it into kuler.

 Step 2 – once the image has been imported, the app will automatically select some potential colors. You can choose these (default swatch is on the left). You can move the small circles around to modify the colors. Decide on which colors are appropriate for the desired look on the website.

You can also tap on the small flower icon (upper right) and choose from additional preset color combinations (based on the photo you have imported). I recommend experimenting with the various choices. Don’t forget you can modify any of these choices by moving the small circles for each of the chosen colors.

Step 3 – once you have decided on the desired color swatch, long tap on the default name so you can change it before saving the swatches. Obviously, you can change this at any time, but I find it easiest to make the change before saving my file.

Step 4 – you can then upload your swatch to the Adobe Creative Cloud (as shown below) or further refine the colors (in step 5).

Step 5 (if needed) – you can also tap on the color swatch and open the kuler color editor. Additionally, you can decide whether to work with rgb values or hsl and so forth.

That is it. You should now be able to import an image into the kuler app and choose a desired color combination for a website based on the colors in that image. As noted above, you can modify these as needed. If you need more information about color theory and related concepts, the kuler website has a number of helpful links.

Let me know if you find this brief introduction into the Adobe kuler touch app helpful. Please use the comments below.

I have been working with several Adobe Touch Apps since they have been released. Although Proto is one I am using frequently for web design work, I also find I am using Photoshop Touch frequently as well. Since I put together a Proto cheatsheet (which has been well received), I thought I would also develop a Photoshop Touch cheatsheet. Frankly, I am amazed at the number of features packed into this app. To me it is well worth the price (US$ 9.99). I would appreciate feedback (via the comments below) whether you find this cheatsheet helpful or not. If you want a full sized version, simply click on the image and then zoom in with your browser. Alternately, you can use the PDF version of this cheatsheet.