Move mouse to affect speed and direction
Testing at Kwajalein Atoll of the
Peacekeeper re-entry vehicles, all eight fired from only one missile. With live warheads, each line would represent the explosive power of twenty Hiroshima-sized (Little Boy) weapons.
DHTML / DOM
Dynamic HTML (DHTML) uses cross browser properties and methods of the
DOM (Document Object Model),
often combined with CSS layout and object oriented JavaScript,
to construct, hide and reveal interactive "views".
DHTML and JavaScript can carry a large burden of User interaction in the browser, exchanging data with the server by posting hidden FORMs, loading pages into IFRAMEs, using SOAP calls, etc.
Example DHTML work:
drag & drop Composer -
(LightSurf)
(Outlook)
Still, an application programming layer connects these browser views with what some would call "the model", as recorded in the database.
Cascading Style Sheets
Cascading Style Sheets ensure consistency across all pages for many HTML style attributes, including fonts, their sizes, colors, backgrounds, padding, margins, etc.
Dimensions and positioning for page layout in the CSS affect column widths, headers, footers, sizes of DHTML widgets, etc. "Responsive Web Design" uses the CSS3 '@media' feature to adapt layout for screen size.
CSS is one of the primary methods of "application branding" and "themes", changing many visual elements without modifying any code.
References:
Cascading Style Sheets (Wikipedia)
W3C CSS Home Page
W3C CSS Specification, level 2
application programming
"the model" is reflected on the server by the database and "business logic" that determines who can see and modify
which parts; it may be implemented as a set of Java classes and
servlets or a collection of JSP, PHP or even ColdFusion pages.
Traditionally, "the view" in the browser may be pages formatted on the server using
a variety of tools evolved around
JSP
(JavaServer Pages) to uniquely display a User's content -
Example work:
Shutterfly,
LightSurf.
JSP tools:
JSTL
(JSP Standard Tag Library with XML parsing),
custom tags,
I18N Internationalization,
Struts/Tiles.
A different approach uses little or no JSP, relying instead on DHTML in more powerful JavaScript applications, with greater burden on the browser (client) and less demand on the server.
widgets or "views"
This "tutorial box" is a "view" or widget; though modest in DHTML usage, it's a good candidate for becoming a JavaScript class supporting multiple instances.
Properties that make it useful, general purpose and re-useable:
- it can be dragged around
- title and content can be replaced
- content may contain HTML
- width is adjustable
- responds well to resizing of content or browser, re-positioning itself, if necessary
- CSS based
- basis for more elaborate widgets with interactive features
Web site design
Navigation among a collection of static pages is a visual art, often aided by well designed CSS.
When a web site is personalized by account login or other choices, "site navigation" becomes web application programming: conditional access to a dynamic collection of page views whose contents can be modified.
For production sites, interaction with a database is key to maintaining "state" and personalized content: "the model".
With dynamic content (DHTML), pages have different "views" depending on "state". This can change the entire architecture of an application.
page tour - interactive highlights
These features, when used in combination, will test a browser's
performance! (and the machine it runs on)
iFrames may drag slowly... in part, because
when mouse enters iFrame, dragging stops
