![]() |
|
|
Are you a eMedia designer, producer or buyer? If you are, then we need to know each other. Form a mutually beneficial partnership. Or just have lunch and trade shop-talk. Find out more about: Design Vs Technology Guerilla Web-development Advanced Webcoding? Custom Servers My contact details. Digital Artisan Perhaps the best way to see what I do is to look at some recent projects: Case of The Wired Golfers! A Very Thin Client. Live Event Netcasting. Customizable Emulators And here is the inevitable page of past glories. Project Screenshots. Testimonials These folks have graciously given of their time to vouch for me and the quality of my work. Connecting Images Digital Cafe ViewSonic Corporation Lectec Corporation (1986) Ozone Ramblers (1983) are from my earliest years in the United States. I have included them as character references This page and it's contents are copyright © 1996 - 2003 by Chino and Chino.Com. All rights reserved. |
Solution:
This is an example of a data display element similar
to the ones that are used with this project.
Project:
This client needed a eCommerce application along with client-side html coding that has to look consistent among all the popular browsers and platforms used today.
This website contains highly designed data and graphical layout.
All content (data and design elements) within each
page is dynamic, datasets would change based upon a variety of parameters, eg: family member, geographical location
and even the time of year.
And, the code has to maintainable by the client's admin staff.
ASP, Handwritten Level 2 HTML
![]()
Building websites that are consistent in look and feel across multiple browsers and platforms
in itself is not a difficult task. Look at the growing selection of eCommerce sites and search sites
like Yahoo or Altavista. Those websites looks pretty much the same regardless of browsers or operating systems.
Also note that most of these sites are mainly text based and contain only minimal graphics.
![]()
The challenge in this project is to make a website, using minimal graphics, look and feel
like it was a fully graphical website, and have it behave consistently across different versions of
Netscape Navigator/Communicator and Microsoft Internet Explorer runing on different versions of Microsoft Windows
and Apple Macintosh operating systems. The dynamic nature of each page also presented it's own set of challenges,
there was very little consistency between each instance of a page in terms of length of textual data or number
of elements. In other words.. Joe Smith from Arizona would not see the same things on a page as would Mary Hill from
California, even though they are viewing the same file. Because of this, the graphical elements used to contain
the data had to grow/shrink/multiply as required.
![]()
I chose to go with handwritten HTML 2.0 for the front-end and used ASP/COM/SQLserver for the back-end.
Level 2 HTML was the lowest we could go, we needed to use HTML tables to create the graphical elements.
Handwritten because there is no GUI based HTML editor that could give me the finese needed in creating
nested, multi-cell tables with ultra-complex colspans and rowspans. ("Hmm, there is a opportunity here somewhere..")
![]()
![]()
![]()
![]()
![]()
DYNAMIC HEADER TEXT
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
Encapsulated presentation:
Note the rounded corners used with this graphical element.
This softens the look and feel of the element. But is difficult to create in HTML using only minimal graphics.
The graphic element being totally dynamic, is low in bandwidth and builds quickly. This entire element with all the graphics and text is under 8K!
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
Fits any size browser:
Also notice that as you open and close your browser window, the size of this element changes and and the textual data within it re-flows.
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
![]()
HTML 2.0:
The look and feel of this element is consistent across multiple browsers, including AOL's and AT&T's and other graphical browsers and platforms.
![]()
![]()
![]()
![]()
![]()
![]()
IT LOOKS LIKE A BITMAP, BUT IT IS NOT!
![]()
![]()
![]()
![]()
![]()
![]()