Mark DuBois Weblog

This is yet another article in a continuing series of posts dealing with the Adobe Touch app Proto. I complete my analysis of code generated by Proto objects. Previous posts can be found in the list 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.

This is another article in a continuing series of posts dealing with the Adobe Touch app Proto. Previous posts can be found in the list below.

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

This is part of a continuing series of posts dealing with the Adobe Touch App – Proto. I have been examining this (downloaded from the Android Market and installed on my Samsung Galaxy Tab 10.1). Previous posts in this series included: Proto Cheatsheet, Form Design with Adobe Proto, and Adobe Proto Navigation and Wireframe. I thought it was now time to focus on the HTML 5 code generated by Proto when you build a wireframe. In addition to understanding what you are creating in the actual wireframe, I am hoping this post also points out some things I would like to see improved in future versions of this product. This post will focus on the majority of elements (excluding form elements and navigation – that is the focus of a future post).

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.

Now that I have created a “cheatsheet” for common Proto gestures and discussed creation of a form with Proto, I thought it time to turn my attention to the process of creating a prototype website (with working navigation). I am creating a wireframe for a site I created with Adobe MUSE some time ago. Thought this would help students better visualize the function of a wireframe since they could see the completed website and compare specific pages.

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.

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