Home Services Resume Portfolio Weather Sailing Links

web application programmer

Joseph Oster
Resume - Portfolio
(formerly wingo.com)

Bandon, Oregon

3D CAD Services

web skills

"tab view panels" may be dragged ("un-docked") and re-sized to explore page layouts. When dropped, these panels retain momentum and bounce off the top and left sides.
"my craigslist" - RSS feed aggregator;
personal view of multiple RSS feeds that can be dragged between columns, individually sized and refreshed - AJAX / XMLHttpRequest / DHTML / DOM, object oriented JavaScript
open in separate window
see Google Maps API demo page
or drag and zoom this map
initializing map...
DHTML slider controls
Red, Green and Blue slider controls for Frequency, Phase and Bias of animated background color patterns.
open in separate window
progress bar demo page
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.

..Web site design

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)

Still, an application programming layer connects these browser views with what some would call "the model", as recorded in the database.

Cascading Style Sheets
..Web site design

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.

Cascading Style Sheets (Wikipedia)
W3C CSS Home Page
W3C CSS Specification, level 2

application programming
..Web site design

"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"
..Web site design

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:

  1. it can be dragged around
  2. title and content can be replaced
  3. content may contain HTML
  4. width is adjustable
  5. responds well to resizing of content or browser, re-positioning itself, if necessary
  6. CSS based
  7. 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