Building a Custom Build Interface

Question

I am looking to really challenge myself by building an interface that generates custom (product) builds based on user selection.

Here are 2 examples of what I'm referring to:

*NOTE: These can sometimes take a little while to load

Design Your Own Converse Shoes

Custom Made Womens Shoes - Shoes of Prey

As you can see, users select a base product (shoe type or style) and select options allowing them to custom build their own products with different linings, colors, materials etc. I know that some t-shirt companies also do this sort of thing but I've chosen these examples as they are a little more comprehensive with the detail variations.

So my SO questions are:

1. Is there a specific name for this kind of app that I can research further?

2. Is there a framework or existing foundation that will help me to learn and better understand the logic behind this type of software application?

3. If anyone has built or used something like this before, what language/s did you use and why?

I am a learning Web Developer and I am getting pretty comfortable with web technologies like HTML, CSS, JavaScript, PHP, mySQL etc. I am only now just getting my head around building my first MVC based project. It is a slow learning process as I am trying different things before I "specialize" in a particular discipline. Deciphering what is used where and why is a challenge in itself.

There are obviously different ways to do this as Converse is using Adobe Flash Player to generate results and Shoes of Prey are updating jpg images each time a new change has been made. My current (and limited) understanding of the logic so far is that there are likely hundreds of images in the backend that update depending on the variables selected by the user. I would really like to reverse engineer a working example so I can understand the programming involved and build one using those understandings.

I have gone through the source code of the examples above but obviously there is a lot of server side stuff that I cannot see. I have also run each website through the builtwith.com resource but there is not a whole lot of technical information that has helped me so far.

Any advice, resources or professional insight is genuinely welcome too. I learn a lot from the SO community so I thank you for your time and apologise for the long post.

Answer 1

I will suggest using SVG files for your shoes.

SVG is supported by all major browsers today and they are very small compared to JPG and work on tablets/phones as well, which Flash does not.

This will make your app very fast as you don't mess with too many images and when coloring etc will be set, you just switch classes on the object and it changes, no server callback what so ever.

You can even make it possible to alter the height a shaft or widen the sole etc.

SVG can handle both irregular areas (polygons), patterns, images, text and colors, in layers, with transparency, so you can create very good looking shoes :)

And they scale without loosing quality, fitting small and big screens/displays.

Here you can read some more about what HTML5 has to offer when it comes to graphics
http://www.html5rocks.com/en/features/graphics

And here about SVG and HTML5 Canvas
http://seenjs.io/

If you want to complicate even further, google for "3D" and find things like this
http://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954

But I recommend, keep it simple and sell shoes instead of building a cool 3D web site.