Adobe Proto – the code (part 2)

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.

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.

Code generated by Proto horizontal menu objectVertical 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.

Generated code with vertical menu object in Proto

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

Code generated by breadcrumbs objectAccordion 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.

Accordion object generated code

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.

Code generated for tabs object by Proto

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.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social media & sharing icons powered by UltimatelySocial