Practical Prototype and script.aculo.us - Part5

Today i started reading Practical Prototype and script.aculo.us By Andrew Dupont.

Nice book written by Andrew Dupont.

I want to share few quotations i found from this book from next 2 chapters (9-10).

1) DHTML isn’t a special language; it’s just a term for what becomes possible when the DOM APIs for markup and style are made available to JavaScript. Some of it relies on stable, agreed-upon standards like the DOM; some of it relies on the mystical APIs that were introduced a decade ago as part of the browser wars. It exists at the intersection of the visual and the analytical, making designers and developers equally uncomfortable.

2) DHTML is the termassigned to a collective set of technologies used to create dynamic web content, including HTML, JavaScript, and CSS. The dynamism in DHTML comes from the fact that we’re modifying the structure and presentation layers of the document (HTML and CSS) after the page has been loaded

3) Visualizing with Block-Level Elements

Visually, most elements are represented as blocks—big rectangles, if you prefer—and are thus called block-level elements.

4) The z-index Property

I wasn’t entirely accurate when I said that order doesn’t matter with absolute positioning. In this example, the two elements overlap quite a bit, so order is used to determine which one should be "on top."

But the CSS z-index property lets us override that default ordering :

#box {
position: absolute;
width: 600px;
height: 300px;
top: 50px;
left: 25px;
background-color: #ddd;
z-index: 2;
}

5) Relative Positioning

Relative positioning is the most confusing—it’s a mix of static and absolute positioning. Like absolute positioning, it responds to the top, bottom, left, and right properties. Unlike absolute positioning, it does not remove an element from the document flow.

6) In script.aculo.us, an effect is the modification, over time, of any aspect of an element. For an animation of any sort, you need three things:

• The target of the animation: an element
• Starting and ending points: typically integers, like pixel values
• A way to get from beginning to end incrementally: a function

7) When Effects Are Good

Effects in web apps grab the user’s attention, so your application should embrace effects as a way to mark what’s important. Here are a handful of good reasons to use effects in your web app:

To show motion:Many applications employ some sort of spatial metaphor—a user can move things around on the page. A "to-do list" application might organize items into two sections, "completed" and "not yet completed"; checking a box would move an item from the latter into the former.Without a reinforcing effect, this action could startle the user. It’s important to show that the item hasn’t disappeared outright. The
obvious way to express this is through actual motion—the item moves in a straight line from its original spot to its destination—but other effects can be used, as well.

To alert the user of new content: As web apps move toward a single-page model, in which all content is fetched through Ajax instead of through traditional page loads, it becomes more important to show the user when things change on the page. Imagine a news reader application that fetches headlines from major sites. When new headlines get added to the page, they’ll more easily be noticed if they fade in. If, on the
other hand, they suddenly appear on the page, the user may not notice unless he’s looking at the screen at that very instant. To show what’s changed on a page: A similar (but slightly different) use case is alerting
the user when existing content changes.

About the Author

ANDREW DUPONT is a UI developer living and working in Austin, Texas. He is a member of the core development team for Prototype, the popular JavaScript toolkit. He has contributed to Prototype in many different ways: writing code and documentation, offering support, and evangelizing to colleagues. In addition, Andrew has spoken about JavaScript at South by Southwest Interactive and other tech industry conferences.

Andrew received liberal arts and journalism degrees from the University of Texas at Austin. He occasionally attended classes, but much preferred the time between classes, during which he experimented with web design and learned about the emerging web standards movement.