Banner Creator

Full AngularJS app I concepted and developed for a prototype demonstrating my vision of how creating banners can be automated. Log in using 'testuser' and 'g' and take it for a drive. Once in choose 'FILE > NEW AD' from the top nav menu. The idea is straight-forward. The left side shows the key parts of the ad treatment beginning with Ad Properties where the size is chosen from a list or entered in manually. The background color is set and then it's onto the Ad Assets section - which toggles open or close upon a click of the header. A user clicks once on each asset they want to include in the ad. From the palette where the ad is displayed a user can then right-click on each asset to reveal a context board based on type to set the properties for that ad component. Drag and drop and resizing can be done on the palette. Positioning is set on the context board along with other type-specific items, e.g. color, layer, x/y positioning, image-binding, etc. Additional left side sections allow for multiple asset adjustments such as alignment and depth-setting. Angular was used from start to finish, allowing me to fully exploit its ability to structure code in a very MVC way with code broken down into fragments of between 100 and 200 lines on average. Other technology like jQuery and jQuery UI improved the user experience and then developer tools that included Yeoman, Grunt and Bower helped expedite the prototype process.

WebStorm Projects Presentation

Using RevealJS I put together a deck that shows the latest and greatest stack for the company where I lead the UI/UX charge in Chicago. It was the first time the organization was being introduced to the technology I was endorsing and I wanted to use something other than the traditional PowerPoint demos that prevailed among my peers. In it I show how NodeJS, Angular, Express, Compass, Sass, jQuery, jQuery UI, Semantic UI, Yeoman, Grunt and Bower can all be brought together into a project set up within JetBrains' WebStorm to make one hell of a web application and also greatly improve the efficiency of developers who embrace that stack and expedite time-to-market.

Agile Retrospective

While called upon do do some ScrumMaster duties I found myself faced with running an Agile Retrospective meeting with team members in multiple offices so I created a web-based app to simulate a virtual room. The app allows users to create Post-It-like elements that they can drag and drop into one of the four Agile Retrospective category sections where they can type comments and select their name from a pull-down list. Similarly the "Post-Its" can be dragged to a trash icon that appears at the bottom of each section to remove that particular item. This was built with HTML5 and JavaScript. To accomplish simultaneous use and do real-time post-backs to each member's computer NodeJS with Blackboard was used and MongoDB for data persistence.

jQuery Accordion Widget

jQuery widgets are nifty little things once you figure out how to build them - which is a relatively easy undertaking if you can follow a few of the rules. This example shows how easy it is to build something like an accordion menu. Yes, of course, jQueryUI has one and several have already been built but this is my version - weighing in at just under 100 lines of code for the POC I built it for.

Report Builder Concept

An HTML/Javascript-based UI for a report builder concept. Full version was built in ASP.NET and about 95% of the UI control was delegated to the client side. Concept uses CSS and jQuery for the effects. I tried to keep it simple, light and intuitive. The idea is that each section of the report is clearly separated by a horizontal dividing line and sections that contain substantial list items are collapsible and then expandable by clicking the [+/-] icon. The Metrics section has a circular icon with a pair of crossed tools in it. This is a link to the Metric Builder which would allow users to build their own custom metrics on the fly. In this concept the Metric Builder is only an image so is not functional. Upon opening the Metric Builder the main Report Builder goes into a modal mode to show that users are in a new state. The close button in the upper right corner of the Metric Builder window closes that state, removes the modal and returns the user to the primary display state. During the Metric Builder instantiation I use JavaScript to calculate the size of the user's browser viewport at time of opening and to center the window vertically and also suppress vertical scrolling.

AL Solution Center

A Flex solution ultimately deployed as a stand-alone AIR app. I was a part of this project from Day One, attending meetings, concepting, creating POCs and ultimately developing the whole thing from the ground up. Being a dynamic data-drive app I did all of the back end server-side PHP code and also served as the DBA for the MySQL database I created. The gist of the application was to provide potential clients with a tool where they could build a virtual network operations center (NOC) and furnish it with the desired equipment offered by the client. This was done using animations and hotspots set by an admin in each of the animations to show where certain hardware indigenous to a NOC go. Music was integrated to enhance the user experience and users could drill down into the data at a product level using a coverflow component I customized. Internally I built a tracking system that recorded all of a user's actions for storage in a database. I also built a full-featured admin system capable of importing and then parsing XML data into thousands of rows, asset management (uploading, deleting), hotspot setting, and more. Since the final version was made to run on a desktop and not in a browser there is some missing functionality in this demo. The full version was capable of generating PDFs and then emailing them to users. Loading the PDFs is not possible with the web version as well so the PDF icons in the app that are clickable do not load their configured PDFs. It should also be noted that this demo is made for a 1080p display.

Flash Map Project

Built using Flash/AS3 this small interactive demo features a Google map of a neighborhood in Chicago with XML-based data representing a short list of some eating establishments that existed in 2008. As a user clicks the name of a resturant from the list on the left side the mask area to the right of the list moves the map accordingly and zeros in on the exact location of the restaurant based on coordinates stored in the XML datasource. For the UX Caurina Tweener was used for fades and motion.

Reflexis UI Concept

This was a concept I worked on to demonstrate how a web-based front end might suffice for a company interested in a project management system. The solution was built entirely with HTML, CSS and Javascript and featured a lot of functionality, e.g. dynamic menus, drill down components, a custom calendar, scheduling system, etc. I worked with a creative director who came up with the overall look and feel and all the visual treatments along with the primary direction. This allowed me to focus strictly on devlopment and implementation. I took the design all the way up to where the next step was the actual wiring up of the system to a datasource. In the interim I stubbed out what I needed to simulate data retrieval. The final solution target deploy was to be a laptop or tablet PC, hence the small dimensions.

Actos Lunch N Learn ILP

This was a stand-alone interactive learning program built entirely with ActionScript 3.0. In essence it was a game could be run in either 1 or 2 player mode. Once started users were presented with a random mix of multiple choice questions. The object of the game was to get the score bar that started at 100% for your player to reduce down by correctly answering each question - educating users along the way. Video clips were used to simulate each player character's actions during gameplay. With each answer, whether right or wrong, information would display modally along with any diagrams supporting the answer. An alternate mode was programmed to account for a tie-breaker contingency. The game also featured a PDF loader, sounds and controls for additional data display, refinements and quitting.

Responsive Web Layout

One challenge facing today's developers in an ever-changing device platform market is how to create web applications that are responsive to display size changes. Obviously there is the device sniffing that can be done but what if the dimensions of the client software that the app is being viewed on is changed by the user on their end? Using Javascript and well-architected CSS it's relatively easy to insure that a single code base for a web app responds appropriately and also the same within all modern browsers. Here is a simple example of this using JavaScript, jQuery and CSS3. To test this demo open it up in any modern browser and then resize the browser view port to see how the layout changes to best fit the height and width it's being displayed in.

Flash Image Gallery

Using Flash and AS3 I built a custom image gallery that reads data from an XML file and allows users to easily navigate a collection via buttons or clicking on a load bar. Galleries are loaded from a list that appears below the main image window and can be drilled into using a custom scroll bar. A number indicates which image they are viewing at any given time and a watermark appears atop the lower right corner of each image. If users want to print an image the app ties into their computer's print system to allow them to do so - also via a button click.

Pure JS Slider

This is an example of a slider for an HTML page built entirely with JavaScript. No jQuery or any other library was used - nor was it built with HTML5. Adjusting the slider thumb is done with CSS while the start and end points are controlled with some simple relative math. I bind the value of the slider based on 0-100 increments to reflect the present setting.

Tiny Image Gallery

This is an image gallery that was built for an application that had only a small area to use, hence the name "Tiny Image Gallery." There is a collage-style grid that fades in each thumbnail at random intervals. Once fully loaded a user can hover over each thumbnail to see a larger version of what the image is before clicking that thumbnail to see the full size version. Users can also use the left and right arrow buttons to navigate the images in a logical order. Navigation is also accomplished via the keyboard arrows. I added a reflection effect to the large images to make the UX more appealing. An XML document allows users to customize the gallery in a variety of ways by simply changing values, saving the doc and then reloading the app. Things that can be changed include: the background color, the visiblity of the relfection, the position of the large image, the gap between the thumbnail images in the thumbnail grid, the speed of the images that fade in, the visibility of the hover over image, the visiblity of the display caption, various positioning and more.

Color Picker

This is an example of a simple color picker built with HTML and JavScript. It functions fully in IE8+, Firefox and Chrome browsers. It's lightweight, uses an unordered list styled with CSS to display horizontally and utilizes use of pseudo classes with jQuery to provide the user experience and color reporting.

Tico Realty Raffle

This was a basic web site built for a real estate company based out of Costa Rica that was raffling off a new home built in the hillside of the Pacific coast. The site was non-dynamic but I jazzed it up a bit with some custom effects. This demo shows the intro landing page and the XML-based image gallery I built into that page.

Chicago Restaurants

I'm a bit of a Chicago foodie, having eaten at over 750 different restaurants in the city in about 12 years. I still try at least one new place each week. So I decided to put the list of places I dined at in a database along with my very basic review of the food, establishment and service. I was working on learning Flex at the time so made this a project of mine and figured out how to wire up a Flex UI to an MS Access database using SQL and Cold Fusion as the middleman. The result in a simple datagrid that, when you click a row, the item and associated details pop into a container designed to look like a sheet of paper. The paper and pencil are draggable. As an admin I also have an edit mode whereby I can modify any piece of information for a record then repost back to the database with a single click. Nothing fancy, of course, but it actually does help me refer friends and colleagues to restaurants that I'm particularly fond of.

Selva Perdida

Took a crack at building an interactive Flash game based on the classic arcade game Frogger. Selva Perdida (The Lost Jungle) is a single-player action game where you get 4 chances to navigate your player icon from a starting point to a destination point using only a keyboard. The challenge is to dodge obstacles and collect points as you go in as short of time as possible. To give the player some edge there's a 'power up' feature that can be acquired by grabbing a select item from the field of play that renders your character invincible to player-destroying obstacles for an 8-second time span. Each level gets increasingly more difficult with a different set of obstacles that become faster, effectively making it harder to earn points. Originally intended to be marketed online through FlashDen.net, I've since decided to use it to showcase the abilities of ActionScript in a game capacity using as little code real estate as possible. This guy weighs in at around 1200 lines of code with generous formatting and ample commenting intact.

Animated Video

The PNV Animated Video project was a stand-alone app designed to market a new line of pre-natal vitamins. The app consisted of a series of video animations and audio voice-over. The video assets and voice-over were separate so the challenging part of this project involved synchronizing the recorded dialog with the delivered animated videos and then also with the on-screen text and transition sequences. This was all done programmatically with ActionScript using cue points. The finished result was the simulation of five different animated babies that delivered their audio messages from the safety of mom's womb using pre-recorded voice over, bulleted copy and chapter settings that provided the ability to skip to key pointed spots in the message. Visually, the app was very light in its look and feel with each and every asset flowing nicely both on and off the stage as users navigated each screen.

Animated Web Promo

In late 2009 I worked on a project involving an email/web campaign for Evista, who wanted to market their drugs that were indicated for the treatment of osteoporosis and the reduction in risk of invasive breast cancer in postmenopausal women with osteoporosis. The approach to this was to include links to various web site pages within emails that were mass-mailed. Each link used a unique app to convey the take-away message. This particular promo was an animation of several Indy-style race cars on a track. During the 30 seconds it ran the cars would vie for position and the perspective would change from outside the cars to inside one particular car that would eventually win the race. The animation included a full audio soundtrack and the sounds of cars racing. The final screen offered the drug message along with the option to replay the animation.

HTML5 Drag And Drop

Ultra-simple example of drag and drop functionality in HTML5 - because, hey, it is easy. Basis for some interfaces I am planning on developing in the future. Basically the images in this example utilize the draggable attribute which is set to "true" and then a JavaScript method specifies what happens when an item is clicked on and dragged about by using the reference to the object that is being dragged. Another JavaScript method handles the dropping of the object - in this case the logic adds the object (element) to whichever retangular box the user is over when they release the mouse. You will notice that the images can continually be moved by dragging them between each of the rectangular boxes. They cannot, however, be dragged from the rectangular boxes out to the surrounding region. This is by design.

Word Search

I created a Flash game app that simulated a word search puzzle where users are presented with a list of words in a grid full of seemingly random letters. The logic first positioned all of the words before generating the full grid. Words were placed vertically, horizontally, diagonally and even backwards – and they were uniquely positioned every time the game was started anew. Users had to locate the words then click and drag from one end of the word to the other to ‘circle' it. With each found item a line would strike through the word that appeared in the word list. A timer kept track of how many seconds were used to find all of the words. Once all words had been found a closing screen displayed the time used to complete the game and an XML-based list of client-provided winners. Notable features developed but not used by the client on this project included a pause feature and reset feature that generated a completely new letter grid with a single click.