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.

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.

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?

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

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.

• Adobe Proto – the code (part 2)
• Adobe Proto – the code
• Adobe Proto – navigation and wireframe
• Form design with Adobe Proto
• Proto cheatsheet

Let’s next examine the code generated by form elements. I want to examine individual form elements and then examine what happens when one groups these elements together in Proto.

Text input  object - In examining the generated code, I discovered there is no <form> element generated when one includes a form object in Proto. I do realize this is a wireframe application, but it is definitely something to remember when you are modifying the resulting HTML (one will typically need to include a form element with appropriate attributes). I also found it curious that although the code is HTML5, no placeholder attribute is used. Instead, a value attribute is used. Details are found in the image below.

Textarea object – This is similar to the text input element discussed above. Details of generated code are shown below.

Selection List object – as with the other objects discussed above, the selection list object consists of s simple set of HTML and a bit of CSS styling. Details are shown below.

Checkbox object – Standard HTML is generated for this object and some CSS styling is applied. I did find it a bit interesting that there is a separate bit of CSS for each check box. As you can see below, this is for positioning. Perhaps one might want to style each separately. I would think that most web designers would rely on specificity and greatly reduce the amount of CSS actually needed to style and position the resulting HTML.

Radio button object – As one would expect, this is quite similar to the checkbox object examined above.

Button object – This is fairly standard HTML5 code as well with limited styling.

So, we now have a reasonable understanding of generated code (HTML and CSS) when various form objects are added to our Proto wireframe. Before we leave this topic, one last item remains. What happens when one groups objects together in Proto? The answer is shown below – absolutely nothing. The grouping feature in Proto only provides one the ability to manipulate grouped items within Proto itself. Nothing changes with the generated HTML and CSS.

Hopefully this series of weblog posts gives you a better understanding of what i actually happening when you draw an object with a gesture in Proto. For those who have patiently read through all this material, I provide a link to the actual HTML5 and CSS generated by Proto. I would be keen on learning whether these posts helped you. Comments are welcomed.

• Adobe Proto – the code
• Adobe Proto – navigation and wireframe
• Form design with Adobe Proto
• Proto cheatsheet

For this post, I will cover code associated with Proto navigation objects. As I have done previously, you will be able to see an image with the default Proto object along with the HTML and CSS generated by that object.

Navigation objects. We have a horizontal menu, a vertical menu, breadcrumbs, an accordion control, and a tabbed menu. These items are where Proto really helps in wireframes. The objects are associated with jQuery (and the appropriate objects in that library). This can save a significant amount of typing by the designer/ developer after they receive the wireframe.

Horizontal menu. As one might expect, the generated HTML is an unordered list (styled with CSS). This is an industry “best practice” approach to navigation and I am glad to see it is incorporated into the horizontal menu object. Details are below.

Vertical menu. As with the horizontal menu, accepted industry best practices are followed and the generated HTML is an unordered list styled with CSS. Details are shown below.

Breadcrumbs. As one might expect, this object generates a paragraph of text (with appropriate entities). Details of the code are below.

Accordion object. Although this is typically not associated with navigation, it is a rather complex object and is often used to display a large amount of information on a single web page. It seemed reasonable to include this object with my discussion on navigation. In addition to generated HTML and CSS, jQuery is also involved with this object.

Tabs. This is the last object I will examine in this post. It also has associated jQuery. Details concerning the generated code are found in the image below.

In my opinion, these last two objects (accordion and tabs) are what adds significant value to Proto. Not only do you get to include a working wireframe, but you also get the necessary jQuery to enable functionality for these objects. The jQuery libraries are placed in the proper location and the necessary code to enable the functionality is included in the <head> of the HTML document.

I hope this continuing series of analysis of the generated HTML and CSS is helpful. Those who know me, know that I detest black boxes. I don’t accept “magic” and like to examine what actually happens with a given tool. In my opinion, this is key to understanding how to properly use these tools to accomplish necessary tasks. I am curious about your insights. Please place them in the comments below.

Before we dissect the code itself, let’s examine the files included in the zip file one would download from the Creative Cloud. I am impressed that so many files and folders are automatically generated (including proper inclusion of so many of the necessary jQuery files). Since I tried to pull in most of the known Proto objects, I suspect this folder/ file structure is larger than most wireframes. The screen capture below is not meant to be all inclusive, but should give you an idea of what is actually included when you place items in the Proto wireframe.

Let’s examine some of the snippets of HTML (and associated CSS and JS) code generated when you create wireframes with Proto. These are listed somewhat in the order of items you will find in my Proto Cheatsheet.

Let’s first examine the document heading source code (and document name). By default, the file is called Index.html. Makes sense (unless you are using a Linux system, which many do). In my opinion, the filename should be index.html (lower case i). We see the first lines are HTML5. These lines provide a solid starting point for a web designer who needs to modify the prototype. A screen capture is shown below [ you can always view these in full size by clicking on them].

Division – In many wireframes, we need to specify a containing region (typically using one or more <div> elements to define such a region). I tapped on the DIV icon in Proto and the resulting code was generated. Obviously, one can re-size the object in Proto; this is the default value. As one can see, CSS is used for absolute positioning. I understand this approach to generating a wireframe; obviously a web designer would need to modify all of these. One question that comes to mind is where does the number 3 come from (as in id=”div_3″)? The best I can determine is that these numbers are automatically generated by Proto based on how many of these you have included in the current (or previous) wireframe.

Image – When one includes an image in the wireframe, there is an actual gif image included (personal note, I would prefer a png image).

Video – An actual sample video is inserted when one chooses this option. Let’s first look at the object and code. Note that the object displays differently in the Creative Cloud than it does on the tablet (you don’t appear able to preview the video in the Creative Cloud).

The sample video (screen capture only) is shown below.

Heading – I was surprised to learn that all headings (no matter how large the text) are paragraphs. In this case, the wireframe is not conveying any structure to the document. To me, this would be one feature to watch out for as many would assume a large text item like that shown below would be a <h1> element.

Paragraph – obviously, this is a paragraph of text as one would expect. Details are shown below.

Vertical Rule – This is represented as a vertical line. As expected, it is formed using a horizontal rule styled with CSS. Details can be found below.

Table – Lastly, we examine the generated code for the table object. As expected, this has fairly standard code for a data table. Details are below.

As you can see, the majority of code generated is as expected. The one item I found unusual was the heading object and the resulting code rendering as a paragraph. I plan to follow this post up with another focusing on navigation and form elements. As always, I am interested in whether readers find this information useful or have additional insights to share.

Very important note. I have found it easiest to fully develop navigation on the initial page I create in Proto. I also try to include any features which would be common throughout the site. It is very easy to duplicate a page in Proto. I have not found any way to move objects between pages within Proto (I hope that is a feature in any new version of the product). Because you can not easily exchange objects between pages, it is a lot easier to put most of what you want on one page, then duplicate that page multiple times. Otherwise, you will end up having to add objects to each page and you may well have a different spacing or different font, etc. between pages. Although these are wireframes, they should still be consistent for the client.

Step 1 – I created a new wireframe (took the web page settings as the default). I consider it a best practice to include navigation in a separate <div> so I first added a background<div> element to the top of the wireframe. I then placed a large image at the top (to be consistent with the final site I would develop in MUSE). Underneath that, I then placed the initial navigation menu. I verified the font size was “reasonable.” Detials are in the image below (you can always click on the image to see the full version with all the details).

Step 2 – I next modified the contents of the navigation (using actual terms instead of Menu 2, Menu 3 and so forth). Simply select the desired item from the list (see the bottom of the image), then long tap on the word and you can then modify that text.

Step 3 – Once I have created necessary elements which will appear on every page (perhaps a bottom navigation as well as copyright, terms of use and similar information), I would then duplicate the initial page. Click on the pages icon in the upper right, tap the initial page and select duplicate form the options presented (see below).

Step 4 – I would then rename the page to the appropriate name. Index Copy just doesn’t seem like a proper name *grin*.

Step 5 – On the duplicated page, I also included breadcrumb navigation (which may be desired by the client on any pages beyond the initial (home) page). I also changed the contents from the default to something more meaningful for the client (again, long tap to select the text and change it). Note that I have only made one duplicate page at this point. Since I want to include the breadcrumb navigation on subsequent pages, I would then duplicate the modified page for the rest of the site). Personally, I have found it easier to develop the initial home page (navigation), then a sub-page, then duplicate the sub-pages for the rest of the site, then create working navigation, then return to each page and fill in the appropriate content the client desired for that page.

Step 6 – Once I have all the pages for the site wireframe, I would next verify that I had all the navigation working. I have found it easiest to create a page, select the text for the navigation to that page (and the home page), link to the appropriate page, then duplicate that page and repeat the process for the subsequent page. This makes it easier/ quicker to verify all your links are working. The alternative is to add all the pages, then go back to each page and change all the links for that single page. I find this latter approach takes much longer than gradually building out the navigation on each page as you create it. Your mileage may vary.

Step 7 – After I have confirmed all navigation is working as desired, I would return to each of the pages and add appropriate placeholder content. Note that since the site is a wireframe, we only need to include content for pages which have a different layout (of course in this example, every page has a different layout).

Step 8 – I would then test the site to confirm that the navigation is working as desired and that the content placeholders are as the client desired.

If you would like to experiment with the resulting code, I have included a link to the files generated from Proto. For those with limited experience with the use of wireframes, compare the wireframe site (after downloading the files generated) with the resulting site developed in Adobe MUSE. The wireframe would be the first step where the client would sign off, the resulting site would be the last step in the initial development process. Obviously, the site could then be expanded with further capabilities over time.

To summarize what I have found to be a best practice when developing a prototype website in Adobe Proto…

1. Develop the initial page and include necessary main navigation components. Modify the text for these components to reflect the desired names for each of the links. Do not include a lot of content on this page initially.
2. Duplicate the page and rename it. Add any sub-navigation components which would not be found on the main page. Verify the links are working between this page and the initial page.
3. Add subsequent pages as needed. Always add a page, change the links on that page and on earlier pages, then test all the links before proceeding to the next page.
4. Return to each page and add desired content placeholders (typically done in collaboration with your client).
5. Verify all wireframe pages are as the client desires, upload to the Adobe Creative Cloud and have the client review one more time. Once you have a sign-off that this is what is desired, download the zip files and begin actual development of the site in a tool like Dreamweaver.

I am curious if you have discovered other best practices when developing sites in Proto. If so, please place a comment below.