blog
HOME · CREATIVE · WEB · TECH · BLOG

Thursday, September 25th, 2008

What are “dynamic web pages”?

"Dyamic web pages" is one of those terms that's used frequently that has a variety of meanings. In general there are three ways a web page can be dynamic:

  1. It can have elements on the page that change due to scripting that happens in the browser (client side dynamic scripting with Javascript or Flash).
  2. As the page is being served by the web server the web server can customize aspects of the page (thanks to server side dynamic scripting or a web application).
  3. The browser can communicate asychronously with the server to update the page without reloading the page (with technologies such as AJAX and Flex).

Let's go into each with a little more detail...

Client Side Scripting

Client side scripting with Javascript has been around for a long time now, but the uses are getting more and more sophisticated... There are many, many examples out there, but here are just a few...

  • Sony Ericsson presents images of their phones on their website using Javascript. If you look at one of their phones you'll see that when you click on a thumbnail at the bottom it changes the big picture above it. That's pretty basic, but also notice how the green box around the active thumbail slides across between the thumbnails. Thast usually somehting you only see with Flash, but it's being done with Javascript.
  • A more basic example in some ways are the before and after shots at the bottom of the page on AcnePractice.com. Notice how two images change at once as well as the text below each of the images. If you look at the source code for the page you'll see it's all based on data making it a simple, data-driven example of using data with Javascript to create a dynamic element on a web page.
  • Simple animations like rolling over the logo n the bottom of this page and getting a nav bar are also examples of client-side Javascript in action.

Flash can also be used to implement client-side dynamic features. One of the standard uses is to present collections of images (e.g. the portfolio site for a food photographer). Sites like these can give a very controlled user experience, but they're barely based on HTML at all - notice how the URL doesn't ever change on the example site.

One of the dangers with client-side scripting is that you'll hide important elements from search engine spiders. In the Sony Ericsson example all that was being hidden were some photos, so it wasn't a big loss. On Acne Practice the text and photos shown on the home page were repeated on static pages elsewhere on the site, so no loss there either. And there is no danger in animated nav bars provided they aren't the only nav bars on the site. However, the food photographer's site does have problems with search engines because there's no quality content for the search engine spiders to index. When you look at what's indexed on his site there's only one page and one Flash animation.

Server Side Scripting & Web Applications

Scripting can also happen on the web server before the page is returned to the user using sever-side scripting languages like PHP or ASP. From the user's perspective the page can appear to be a static page, when in fact it's not. Typically what's done is there will be templates on the server and those templates will control a specific type of page. Take for example this blog. In gross terms there's one template that controlls the home page, another that controls archive and category pages, and yet another that controls post pages. Those few templates control everything on the blog.

An example would be the image detail pages on Netter Images. One template controls many pages - The Cerebrum, The Knee, and Alcohol Withdrawl to name just a few of the thousands the template powers.

Those are based on database lookups, but it's possible to not use a database and still have dynamic pages. The case study pages on Acne Practice are an example of that. For example there's one page showing a case of a Latina with long-term acne, another with a black woman with a bad case of acne, another with a Hispanic guy who can't get rid of the acne on his back, as well as probably a dozen other cases.  Those pages are composed using one template that accesses a textual data file located on the server which is used instead of a database. This approach works well when there is just a small amount of data. In fact, since there's no chance of a database going down, it's actually more reliable.

Other examples would be things like database driven forum software. WebmasterWorld.com has their own custom software package that does things like only allow people to view one full page before having to register and login. Then there are sites like WebHostingTalk.com which are based on more widely used forum software like vBulletin. All of those solutions are database and template driven solutions.

Server side dynamic scripting can be incredibly simple. If you go to Netter Images and reload the home page a few times you'll notice the background image and text changes. That's due to a very simple server side script. To the user, the page is a static page, but it changes so users see a variety of things when the come to the home page and different site features can be emphasized.

Still server-side dynamic would be things like ad serving software that embeds banner ads into web pages - changing the ads each time so the users are more likely to notice them and not just tune them out.

One thing that's important to note about server side scripting is that it usually returns what look like static pages. This is great from an SEO perspective as it means nothing is hidden from the search engine spider. But server side scripting can also be used to embed the scripts necessary for client side scripting. So it's not an either/or approach and you can wind up hiding content from spiders using server side scripting if client side scripting is in the mix as well.

AJAX, Flex, etc.

The newest form of scripting is AJAX and Flex, but the concepts have been around for a while. AJAX is "asynchronous Javascript" which means Javascript is doing calls to a server to get some information in order to avoid having to submit a form and do a page reload. A simple example of this is when you're registering for a site and after entering your e-mail address an alert pops up telling you that you've already registered - before you finish filling out the rest of the registration form.

Flash has been able to do calls back to the server for a while now to get things like images, movies and even data, but Flash wasn't all that great at rendering user interface elements like drop down lists and form input boxes. A couple years ago Adobe came out with Flex which was an application development environment for web applications. It gives the developer access to libraries of user interface elements, and makes it relatively easy to communicate with data servers. Flex applets/applications compile down to .swf files and run in any browser that supports Flash 9,0,115 or higher.

Whether you use AJAX, Flash or Flex depends on the nature of your project.

Flash and Flex are completely stable environments that can be depended on to continue to work as new browsers are developed. Adobe ensures that the Flash player is backwards compatible. However, Flash and Flex are often big heavy objects on the page that can take a while to load.

On the other hand AJAX is popular because it tends to be light - you just use what you need and nothing more. The problem with AJAX is that it's based on Javascript and as new browsers come out Javascript functions have a habit of breaking.

An example of AJAX would be things like the rating system YouTube where you click on a star and it sends a quick database call which registers your vote. Google uses AJAX extensively for far more complicated features... Google Maps is based on AJAX as is the Adwords Keyword Tool.

To see Flex in action look at the pricing module on the Netter Images image detail pages (e.g. The Cerebrum, The Knee, and Alcohol Withdrawl). It pulls data from the server, asks a series of questions to determine the type of license that is appropriate to the person's use of the image, and then adds the image license to their shopping cart all without reloading the page.

Technologies like AJAX and Flex most definitely hide data from search engine spiders and should not be used on anything that you want to use to drive organic traffic.

So to wrap up, if the page is based on a template or changes either client side or server side, then it's a dynamic page.

Tags:
Categories: AJAX, Databases, Flex, PHP

Leave a Reply

HOME · CREATIVE · WEB · TECH · BLOG