Web Development : Presentation Layer Design - Part 2

Go back to Web Development : Presentation Layer Design - Part 1

DHTML, JavaScript, jQuery, and Ajax

Remember, HTML by itself its just a scaffold. Woven into that scaffold are scripting languages such as JavaScript, Ajax, and jQuery which control the behavior of user interface elements and content displayed on a page.

 
For example, in above the user interface features a rotating slideshow with good image transitions powered by jQuery, CSS, and HTML5 woven together. The back and forth arrows manually advance through the
“carousel” (as these user interfaces are collectively called), and a small row of proxy icons displays a rollover preview of all the images in the slideshow.

JavaScript is a robust scripting language that is capable of complex animation and interaction effects, such as
creating a drop-down menu or an expanding window layer. When JavaScript is artfully interwoven into HTML to create interesting interactive components and animations, the HTML is then referred to as “DHTML”, short for dynamic HTML.

jQuery is a lightweight form of JavaScript that focuses on the commonly-used interactions between JavaScript and HTML. An ever-growing archive of open-source jQuery scripts is available in online libraries such as http://docs.jquery.com. You can copy and paste these scripts into your web pages and customize
them for your specific purposes. Using jQuery, you can create popular animation and interaction design
effects with much less code than would be required with JavaScript. And, because it exists as a library
of code snippets, it saves developers time too.

Here are some links to online examples:
• Expanding and collapsing accordion windows
• Carousel image rotations
• Image zoom upon rollover

Lastly AJAX, which stands for JavaScript and XML, is code that allows data processing to occur “in the background.” In other words, without having to reload the page or click an “update” button, data on the page can be refreshed/updated automatically. AJAX enables content updates such as news headlines, price totals, stock tickers, date/time, etc to occur on certain parts of the page.

 
For instance, the shopping cart in above allows the user to change the quantity of each item. As the user enters new quantities the total updates automatically.

Read Next Web Development : Presentation Layer Design - Part 3