Why tour HTML-to-DB?

It starts sounding like a very boring topic. Yes, we agree and suggest you to just visit some of the example pages and move on to your daily works

Then why are we suggesting this tour? But not for everyone. Let's see who can benefit from this tour. The audience:

* You are not a professional coder. Either your are curious in everything or  you have a great web site concept waiting to be coded.
* You are a content manager or a designer and wish to communicate better with your programmers.
* You are a decision maker or web entrepreneur.  You need to determine where to store your web assets. 
* You are already a coder. Sometimes you need new perspectives to right-size your development projects.

At this point we have a common denominator. We or you have to store some data, contents, images, write-ups, videos, links to videos, products or price lists. Let's call them your "web assets". Where do we save them?

Easiest to hardest:

* In HTML itself
* In Javascript or JSON files
* Somewhere in the Cloud-resident black-boxes or Restful services
* Your managed Data bases of your own servers
* Hybrid: Some in HTML, some in Javascript, some in black-boxes, some in Restful services, some in your in-house data bases

The development/maintenance costs of your current and future web sites will be basically determined by where your store your web assets, and the cost and complexity will grow in an exponential manner as you move up the ladder. (Luckily your revenue will sky-rocket more than exponentially.)

So we prepared this tour and talking points so that you can communicate with your peers and programmers using this tour as brain storming aids.

Tour Example 1 - Movies Saved in HTML List of Text -- visit the page

    <div>   
      <ul>
        <li><a href="http://www.youtube.com/embed/gYFlq7s6BrY">Youtube - People Are Awesome </a></li>
        <li><a href="http://player.vimeo.com/video/174254407">Vimeo - A Staffpick - Bear</a></li>
      </ul>
    </div>

Tour Example 2 - Movies Saved in HTML List of Buttons -- visit the page

  • Resulting sample HTML codes are
    <div>
      <p>
        <a href="http://www.youtube.com/embed/gYFlq7s6BrY"><img src="/img_files/news_img_01.png" style="opacity: 0.7;">
        </a>
      </p>

      <br>

      <p>
        <a href="http://player.vimeo.com/video/174254407"><img src="/img_files/news_img_02.png" style="opacity: 0.7;">
        </a>
      </p>

    </div>
  • Compared to the Example 1, you need to additionally know how to pre-make, download or buy buttons. The following free site provides an excellent service for creating custom buttons.

  • Also you can avoid preparing pre-made buttons, by dynamically creating buttons on-the-fly. Here is a good resource for creating buttons dynamically.

Tour Example 3 - Movies Saved in HTML List of Images -- visit the page

  • Technically, no difference from Example 1. Just buttons are placed horizontally instead of vertically. So you need to know a simple HTML tage of span.

  • Resulting sample HTML codes are


    <div>
      <span>
        <a href="http://www.youtube.com/embed/gYFlq7s6BrY"><img src="/img_files/news_img_01.png" style="opacity: 0.7;">
        </a>
      </span>
      <span>
        <a href="http://player.vimeo.com/video/174254407"><img src="/img_files/news_img_02.png" style="opacity: 0.7;">
        </a>
       </span>
    </div>

Tour Example 4 - Movies Saved in HTML List of HTML Marquee Entries -- visit the page


   <div id="s8">

     <a href="#" onclick="do_button_movie('http://www.youtube.com/embed/gYFlq7s6BrY')" title="Youtube - People Are Awesome "><img src="/img_files/news_img_01.png"></a>

     <a href="#" onclick="do_button_movie('http://player.vimeo.com/video/174254407')" title="Vimeo - A Staffpick - Bear"> <img src="/img_files/news_img_02.png"></a>

   </div> 

   * If you are not familiar with Javascript yet, it is the another road-block you need to overcome. We warned you that the cost and complexity will grow as you go up the ladder.

Tour Example 5 - Movies Saved in JSON Simplistic - Without Pagination -- visit the page

  • The resulting HTML codes are not different from Example 3 - Movies Saved in List of Images. At first sight, you won't find the rationale of introducing this additional layer of complexity. Why we save Movie list into a alien-sounding JSON file, and then move them back into HTML, so that we can have the same result? At least you will notice many more images (20 instead of 6) are there. That is the clue to be explained by the subsequent example.

  • Please read the following and understand it. If you don't grasp the concept, this is the good time to work with your programmers.

Tour Example 6 - Movies Saved in JSON With Pagination -- visit the page

  • Yes, that is right. This is the reason we went through the silly notion of saving Movie List into a JSON file and retrieving back it into HTML. Yes, Pagination was the intended objective. Pagination is another form of HTML magic, not performed by HTML itself, but by Javascript at Client side or server languages at Server side. Server languages include PHP and NodeJS.

  • Client side pagination can be programmed internally or deployed via open source or off-the-shelf libraries. Here is a good free starting point.

Tour Example 7 - Movies Saved in Timeline Format -- visit the page

Tour Example 8 - Movies Saved in Data Base -- visit the page

  • Yes, this is getting boring again. The Example 8 is intentionally made to look exactly same as Example 6 JSON with Pagination, to make a point. The point being that an intended web site can be made almost identical utilizing either easier tools or set of difficult components. Example 6 can be made out of HTML/Javascript, while the latter needs both HTML/Javascript and server components (Server itself, server tools, server languages, server-resident data base).

    Please don't get us wrong. Based on your requirements, you will be forced to use tools with much heightened complexities. Without considering such specific or additional requirements, the difference in Example 6 and 8 boils down to one thing: Pagination is done at Client side or Server side. Both are feasible as shown here. Part II will touch upon when you have to have server side components.

Part II of This Tour & Switching The Topic -- visit the page or visit the annotation

  • Hang on please. It is not over yet, we are rebooting the tour with new examples after a station break. We will talk about Server vs Client, PHP vs Node, MySQL vs MongoDB from business-decision making perspectives utilizing more business-like E-Commerce examples.