Glenn work with a friend

Web Applications

These are ‘lightweight’ web applications I created that demonstrate some interesting functionality … some useful and some for fun.  Mostly to apply my developing Javascript skills.

I used Photoshop, Javascript, Jquery, CSS3, and WebRotate 360.  IMO …WebRotate 360 is an E-commerce winner.

Clicking on each offers a different technology experience.  Enjoy 🙂


imageswap-75


The colored ensamble is automated until you click on a color, then you can bonk around.  Prices adjust by brand, naturally.

I started with a blue shirt/cap photo, and used PhotoShop to alter the hue and saturation of selected areas.

By doing this I was able to create 4 new ensembles all digitally, keeping the shading and cloth folds in tact.

Labor costs are zilch since the model is a poor student and was only needed for the one photo anyway 🙂



Clicking on this image will launch the CSS3/Javascript application.

In the new window, click and hold on the shoe, and slide the mouse left and right.

Notice that there is an information dot that I put on the shoe, and created a path for when it will appear.  The controls allow for automatic rotation, click on image to zoom, turn the info dot on or off.

This demo was made using Web-Rotate 360 software and required 36 photographs (frames) of the object at 10 degree intervals as the object was rotated during the photo shoot.  The software stitches the frames together, and has other utility to add the info dots & text, change background, etc.

Sorry about the hard to read text on the info dot … still something to figure out 🙂

 


 tweetcube-75


Clicking on this image will launch the CSS3/Javascript application.

You can swivel the cube.  The links on the cube sides are enabled.

Hit the browser back key to return to the gallery.

 


blinkometrics75

 

 

I call this the Blink-o-Metric application – measure the intervals between your blinks.

  1. Click on the image to open the app
  2. Click the Start/Restart button to begin the timer
  3. Each time you blink (try not to), click the ‘Click on Blink’ button.
  4. CSS3 <canvas> graphs your blink intervals with the Jquery counter data.
  5. Or, start counting to 10 … thousand one, thousand two, etc.  Click when you begin and again at ten.  See how accurate your count to ten is 🙂