Post about "JavaScript"

This is the second part of the Concept 2 Fruition post I made at the end of December. We left off at the prototyping phase. This second part of the series will follow through the “cutting” of the prototype design, fitting it into an HTML/CSS layout, and conclude with a dash of interactivity using some simple JavaScript. Rather than trying to implement this into the Drupal PHP template right away I decided to make sure it fits together in a non-CMS (Content Management System) webpage. When it comes time to working with the CMS I’ll be able to open the PHP template files and copy and paste what I have put together in this dummy page.

Cutting

Cutting up the layout to be in web friendly pieces can be one of the more difficult parts of the project. The reason this can be so difficult is because designs can be complex and may not fit very well into the squares and rectangles of an HTML layout. After my prototype is created in Photoshop I go back to pencil and paper to see how my design may be broken up into squares and rectangles.

This process can take a a large chunk of time. I ran through a tutorial posted by Carlos Aleman that that has some great pointers and tricks on how to make this process as stream lined as possible. Your Photoshop layout will most likely consist of many layers which don’t always want to cut apart very nicely. Carlos’ process has you duplicate your layout into a new file that you then “flatten” so all of the layers become one. This single layer layout is now easily cut apart into your smaller pieces. Carlos suggests that you use the marquee tool to select the various elements of your design and create new files for each part (Cmd+C -> Cmd+N -> Enter -> Cmd+V -> Cmd+Alt+Shift+S). This worked for most of the pieces in my design, but there were some pieces with which I had some difficulty getting the right dimensions. To work around these finicky pieces I did use the crop tool, saved the for web, and then undid the crop to continue on to the next piece.

Even though my layout is relatively simple I still ended up with 20 different PNG files for the header navigation and the edge shadows, as seen in the above image. Since I want interactivity for each image that will act as a link I had to cut out each “button”. I also had to create the moused-over version of the button. For this site I am using a teal gradient for the button and an orange gradient for when the button is moused-over. The other pieces are the logo, button spacer, edge shadows, and edge ribbon folds.

One very important note: in order for your various pieces to fit next to each other they will have to be the same height to ensure straight lines across the pieces. After much trial and error I got all of the pieces cut out and ready for fitting into the HTML.

Fitting

This step gets us out of Photoshop and into our HTML editor. I use Dreamweaver simply because I have it as part of Adobe’s Creative Suite and it colors and formats my code quite nicely. It also has extensive libraries to help you out if you can’t quite remember what the syntax is for a specific attribute. However, I stay away from Dreamweaver’s design view. Trying to move things around there, from my experience, is a sure-fire way to turn your code from a work of standards-art into a nightmare.

As far as the design work goes the difficult part is past. Assuming your pieces were cut out accurately they should easily fit into your layout. Now is the time to decide which layout method you can use. For my purposes I decided to use a table layout. Div tags can only be used to be two things next to each other, when it gets to be more than two things it doesn’t work. Some other methods I could have used would be an HTML list with heavy CSS modification or span tags. For a quick and easy solution I decided to use a table. I have used tables in the past, I know exactly how to manipulate them to attain my desired output, and tables have been a part of HTML for a long time so they are widely supported across browsers.

Some key tags and attributes are:
<table></table> – Creates the table. Some elements you’ll want to use are border, cellspacing and cellpadding. I have all three of these set to 0 to make sure my image are flush against each other.
<tr></tr> – This is the row tag. Use this to create the horizontal rows. One element that I am using on this tag is the valign (vertical alignment) attribute set to “top”. My ribbon fold images are taller than the buttons. Setting the vertical alignment to the top ensures that they all sit flush along the top of the row.
<td></td> – This is the column tag. The column tag must exist inside a row tag. You can have multiple columns per row. A key attribute here is the colspan attribute. By default the columns will line up with the column from the top row. In order for one column to span many columns you must use the colspan attribute and set it equal to however many columns it needs to span. This can take some playing around with.

After the table is set up start adding images using the <img /> tag. Just set the src attribute equal to the image location. In my case I put all of my layout images in a folder entitled “graphic”. Repeat this process until all your images are in place. Throughout this process you will want to save your document and open it in a web browser. After you make changes just save and hit reload in the web browser to view the changes.

Now that the dummy webpage looks like the Photoshop design it is time for the fun part: interactivity!

Interactivity

The interactivity phase goes to the next level, from design HTML to coding simple JavaScript using the DOM (Document Object Model). If you can wrap your head around how JavaScript works with the DOM it becomes very simple to create some great-looking interactivity.

The first step is to add a name attribute to each of the images you would like to have as interactive. These names have to be unique for each image. The desired effect here is for the visitor to mouse-over the button and have it change from a teal background to an orange background. This takes a static design element and transforms it into something the viewer will interpret as a button. The DOM’s job  is to find the img element indicated by the JavaScript and swap out the current src attribute with the new one. The JavaScript code is entered as onmouseover and onmouseout attributes to the column tag and looks like this: <td onmouseover=”web.src=’graphic/btnWebMO.png’;” onmouseout=”web.src=’graphic/btnWeb.png’;”> “Web” is the name of the image that will act as the link to my website portfolio. This JavaScript snippet says “When this table cell is moused-over set the attribute ‘src’ of the element named ‘web’ to btnWebMO.png” then if the user doesn’t click on that link and instead moves on the mouse pointer to another area of the screen the onmouseout code runs and does this – “When the mouse pointer leaves this table cell set the attribute ‘src’ of the element named ‘web’ to btnWeb.png”. Not so complicated when translated from code to English, is it?

Rinse and repeat the above process until all areas where interaction is desired are interactive. Once I have the code written one time I just copy and paste it into the other cells and change the element name and the graphics it points to. This way of doing it is quick and easy. If you were to have more than just a few links or points of interaction you may want to create a separate JavaScript file and create a single method that could be used repeatedly. The benefit to having a separate JavaScript file and using short method/function names is to keep your HTML document less cluttered for ease of editing. When I begin to implement this layout into the Drupal CMS I will most likely create a separate JavaScript file to hold these methods and just have the onmouse events call them rather than having all the code written out in my HTML/PHP document.

This concludes the second part of Concept 2 Fruition. To see where I am in this process you may view the interactive navigation here: http://dtedwards.com/v4

The next, and most likely final, post in this series will go through the steps of PHP template implementation. I won’t go through the process of installing Drupal to your web server as that would warrant a post all on it’s own. I will, however, explain how to find the correct files that need to be edited in the labyrinth of PHP files that come with a CMS.

Thanks for reading!

– Dylan E.