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:
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.
Basically you need a combination of four HTML tags (div, ul, li, a) which are elegantly explained by
Resulting sample HTML codes are
<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>
You need to know how to use additional HTML tags (br, p, img). Tag br is important in order to place the buttons vertically.
<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.
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>
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.
Client side pagination can be programmed internally or deployed via open source or off-the-shelf libraries. Here is a good free starting point.
This is a fairly complex example compared to previous ones. But you followed our presentation so far, at least logically, you will immediately understand that you just need additional layer of incremental open source or off-the-shelf libraries and tell your programmers to do the integration. Also here is the list of libraries for timelined story-telling
The purpose of this example is stage setting for the next example requiring the data base usages, which is one level up complexity-wise.
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.