The JavaScript is courtesy of JavaScript Kit: http://www.javascriptkit.com with some slight modifications. It’s pretty slick.

Check it out here!

Or visit the VirtualViewer AJAX online demo!

For me the hard part is the design. There’s always something more to add, another element to experiment with, a new widget or technology to implement or a new technique to try. As web designers, part of our nature is to explore new ideas, learn new technologies and create new, improved ways of representing data.

So when I finally choose a layout, the code part seems easier than designing. Web development can be difficult as well but at least there is a relatively clear path to follow when writing code. It works or it doesn’t. It’s valid or it’s not.

Let’s assume that the tough decisions about navigation, site architecture, color schemes, usability, and how best to represent your content on an aesthetically pleasing page have been decided. For arguments sake, let’s also assume that we have communicated – at a glance – what our site is about and it is time to start writing the HTML/CSS code and editing the PHP template files.

Two hurdles to overcome:

1. In the past, I started from scratch – meaning, I wanted to be a purist and write every line of code, not only is this unnecessary but it wastes valuable time, for you and your clients.

2. Next, I would make sure everything was pixel perfect by scribbling down some of the exact measurements from the Photoshop layout, but no more!

Instead of dissecting a Photoshop file as I have in the past, or even taking measurements, there is a much easier way to get that pixel perfect design you spent hours perfecting.

A few weeks ago I was building Photoshop compositions for a new landing page when I realized I could use the entire comp as a background image and then code on top of the image. The technique is very similar to that of using tracing paper in your high school art class.

Take a look and see how it’s done:

First you need to have a mock-up created and ready to roll out to your new page. For this example, I’ll use a basic page from an older project:

Simply use Photoshop to save your file for web and devices once you’ve prepared a standard 960px width file (or choose your own width). I generally start with 960px.

File > Save for Web and Devices

Now set up a basic HTML file and place an inline style tag on the body. Note: Normally, we wouldn’t want to use inline style but because we plan to remove it once we have our framework in place, it should be fine for now.

And that’s all there is to it!

You can see what the final web page should look like as it sits in the background which makes writing the content code on top of the image much easier and allows you to line things up pretty precisely.

As an added bonus, you can quickly delete the inline style and see what your page looks like as you build it. This has generally helped decrease my time building HTML layouts and definitely improves the accuracy of the design/code.

Marketing a product that provides useful functionality for so many applications can be challenging. As there are several CMS-type business solutions, like FileNet and SharePoint, in the marketplace, we wanted to provide a quick tutorial for providing useful proof of concept wireframes for our VirtualViewer product.

In the following demonstration, I’ll show how we can quickly embed our VirtualViewer application into a custom frame for proof of concept projects and wireframes. In the following example, we will be using the AJAX VirtualViewer application from Snowbound to view medical records.

After a recent health care conference, our Marketing Department was thrilled to hear how engaged customers were with product features and development. The users we spoke with were not only very specific about how medical imaging technology and repositories were changing, but they also provided specific examples of what they needed in a document viewing system and how the landscape was changing.

Rather than showcase our standard VirtualViewer demo, we wanted to find a way to showcase the viewer embedded in a medical imaging system with some of the features requested from end users at the show.

This is what we came up with:

As you can see, we wanted the repository to be connected directly to the VirtualViewer interface so that documents and images could be retrieved without having to change screens or navigate to additional directory pages.

We include a search feature so that documents can be retrieved by medical identification numbers, primary care physician, patient name, and even date of birth. A file repository is also included in the left column so that documents can be quickly organized, retrieved, annotated and saved back to the database (all without modifying the original document) by date and with a time stamp.

Keep in mind, this is a proof of concept to use as an example of how quickly and easily AJAX document viewing capabilities using VirtualViewer may be implemented.

The first part of this tutorial deals with importing the viewer data structure and code. You can see a screenshot of the directory structure below:

As you can see, most of the folders can remain static and modifications for a proof-of-concept wireframe can be made simply by editing the HTML and CSS files directly. Of course more advanced features could be added by simply including popular JavaScript libraries like MooTools or Jquery but in the following example we will be working directly with the HTML and CSS files.

Let’s get started!

Simply open one of your favorite text editions. (Coda or Dreamweaver for example) and find the code in brackets:

<!–THIS IS THE VIRTUALVIEWER CONTENT CODE–>

This code embeds the viewer and some modifications should be made in order for the content to scale properly.

Our main concern at this point, is the “ContentColumn” div which acts as the container for hosting the VirtualViewer code. If you view the original VirtualViewer demo http://ajax.snowbound.com/ you will notice that the contentcolumn div contains everything from the imageControlsDiv

And the annToolbar div

As you can see from the images, these divs contain our navigation and will need to be moved into our contentcolumn div in the following order:

Next, to ensure that the navigation doesn’t break rank and collapse onto itself, we will apply a percentage to the contentcolumn div and use CSS3 to give this window a minimum and maximum width while giving our container divs, “anntoolbar” and “imagecontrolsdiv” an absolute position:

Now that we have our VirtualViewer code embedded into our contentcolumn div, we can resize the browser and test to make sure it’s embedded properly and that the navigation expands and contracts as expected.

Now we will begin working on the surrounding proof of concept code for our physicians Portal with VirtualViewer AJAX. As I mentioned previously in this post, we are going to add images that will represent specific functionality (in concept only).

The top navigation is, conceptually, pretty straightforward. A search feature provides quick access to patient information and physicians files and notes. We also added links that could potentially guide the search. An easy integration here would be to use the Google Custom Search to integrate a searchable form for your front end.

Second, we’ve added a visual representation of application search fields, which could be used to extract records or documents from a database with either XML or a structure for the metadata.

Last, we’ve used the MooTools JavaScript library to integrate an animated drop down menu in the left column to further enhance the customization and organization of files and medical documents. All this code can be easily modified to restrict certain elements and/or add others dependent upon whether it’s a patient using the site or a physician.

MGH Boston recently incorporated a Patient Portal which was a popular concept at the McKesson users group gathering. We hope that demonstrations of this type will help more developers expand on their own proof of concept wireframes for medical imaging systems, so that they can quickly assemble the tools needed to develop their own patient portals and medical repositories.

We hope you found this tutorial helpful and informative and would love to hear any feedback or comments you may have about your own development tools or the medical imaging field in general. Many thanks for reading and stay tuned!