|
I've been working hard on getting up to speed with Javascript. My medium term project is to build software to put images from various sources (the Web, libraries with METS objects, amazon.com) into their Teacher's Box/Scholar's Box and then to make slide shows/albums with them. The user will be able to sequence the images, associate captions with pictures, and publish the album in various forms (I've been thinking of letting people generate METS and IMS Content Packages as well as plain old HTML albums and OPML-based slide shows to show in Manila as possibilities.)
I've been interested in DHTML for a while as a solution. As I wrote last week, I've discovered that the Javascript/DHTML scene is quite a mess. Still I've decided to persist and dig a bit deeper. Here I want to share some of my experiences and point out some resources that have been really helpful to me so far.
First of all, why DHTML? The pros are fairly obvious: it would be great to have dynamic, highly interactive web-based user interfaces that did not require every interaction to go back to the server. The cons have been clear too -- there are two many browsers out there that support mutually incompatible versions of Javascript/object models that make it so painful to use Javascript and DHTML in a way that preserves the cross-browser and cross-platform functionality that is supposed to be the great thing about the Web.
I'm still an optimist about the possibilities of DHTML. Perhaps as time marches on, users will have access to more modern, (increasingly) standards' compliant browsers. At any rate, what's the alternative? Build Flash-based sites? Build totatlly server-side straight-HTML driven sites? Create other browser plugins? Have users download custom apps? Each of these alternatives have their strengths and weaknesses.
I decided to really start working closely with Mozilla -- whose goal is to be a modern, open source, actively developing W3C standards'compliant browser. Mozilla is also the foundation for Netscape 6+ browsers -- code being developed for Mozilla is being worked into Netscape releases I As I wrote previously, I was surprised by the decision of the Mozilla/Netscape developers to drop backwards compatability with the Netscape 4.x object model. (I was puzzled, for example, why a demo that works in Netscape 4.78 and IE 6 does not work in Mozilla. My naive reaction was that there was some bug in Mozilla. I've learned the reasons for why the demo does not work in Mozilla -- but I'm afraid that there will be many out there who will just dismiss Mozilla because of this lack of backwards compatability with the admittedly horrid Netscape 4.x object model...)
My strategy for learning DHTML was to start with writing code that works in W3C compliant Mozilla and then work on making that code into cross-browser code (by which I mean, I wanted it to work in IE 5+, Netscape 4.x, Mozilla/Netscape 6+ (IE4 perhaps -- but I don't have IE4 running on my machines)-- and with some luck and work a lot of other less-well known browsers. I think that this is a good approach -- the W3C DOM is a nice piece of work by and large -- and certainly much easier to program with and understand. And it represents the future of web browsers (knock on wood ).
My training project that will also be hopefully useful in my prototyping work is an image sorter (much like the thumbnail sort mode in Acrobat or PowerPoint -- or Yahoo Photos). Right now, I just have a little demo that should let a user drag a picture of a butterfly around the screen. It doesn't do much -- but I'm hoping that it will work in a broad range of browsers (it works for me in Windows for Moz 1.2, NN 4.79, IE 6.0 and Opera 7 -- but for reasons I haven't yet figured out, not on Opera 6. It seems to work on a Mac IE 5. I make no claims that this is rock-solid code but it's been a learning experience of scrounging around for information and piecing all that together.)
Drag the Butterfly demo
Let me share some tips about what I've learned so far that might help others who might embark on a similar path to the one I am. (I'm writing from the perspective of a fairly experienced programmer who dabbled with Javascript along the way and who has an understanding of object models, event handling from other contexts. I'm not writing to people who have never programmed seriously before....)
- The single most helpful site in helping me get up to speed on cross-browser Javascript/DHTML is Peter-Paul Koch's site on Javascript. It's up-to-date and very well laid out. and seemingly well-researched. I appreciate Peter-Paul's efforts to make Javascript work well in as many browsers as possible and how he's distilled his knowledge/experience into simple frameworks. My code owes a lot to his advice (though you must realize that weaknesses in my code are likely to be reflections of my ignorance and not Peter-Paul's errors....)
- Being a huge fan of O'Reilly books in general, I have naturally turned to the O'Reilly books on Javascript/DHTML. In my earlier dabblings, I found Jerry Bradenbaugh's Javascript Application Cookbook inspiring. If you glance through the Amazon customer reviews, you'll see some disgruntled readers. Let me help put some context. The great thing about the book is that it helps a reader develop a gradually deeper understanding of the subject through looking at small non-trivial working programs. This might not be the best way for everyone to learn -- I personally gravitate to this style of learning. Books laying out the syntax are certainly useful -- but I want to see how the language is "spoken" in context. A major caveat about Bradenbaugh's book is that being published in 1999, it is out of date. If you were to follow my advice about starting with the W3C DOM, Bradenbaugh's book is of little use. So don't get confused if you can't get the sample code (which can be downloaded from the O'Reilly site) Mozilla at times.... Once I got oriented to the relationships between the new ways of doing things (W3C DOM) and the older ways (NN 4.x, IE 5), I returned to Bradenbaugh's book for guidance on how to get the code that was working in Mozilla to work in the older browsers. I wonder whether O'Reilly will update the book....
- I should also mention two other O'Reilly books. I own a copy of the 3rd edition of David Flanagan's Javascript: The Definitive Guide but consult the 4th edition online at safari.oreilly.com. I must say that I found Chapter 17 terribly useful in orienting me. It covers some of the same materials as Peter-Paul Koch's site -- but hearing the same material cast in different ways by knowledgeable people is quite helpful. I also own a copy of Danny Goodman's Dynamic HTML: The Definitive Reference. I am looking forward to having access to the latest edition online once it's available. I suspect it'll be very helpful once I get deep into programming. Its big value are the pages and pages detailing every HTML tag and the object model of the browsers....
- I started looking into using an abstraction API to deal with discrepencies in DHTML in the browsers. In the small amount of time I put into comparing alternatives, I tentatively decided that dynapi was the most promising. I may come back to looking at dynapi but decided that for the time being that I should expose myself to the intricacies of cross-browser compatibility directly as both a learning experience but also for the efficiency of the code.
I'll quickly list some other sources of DHTML info that look good and might be useful in the future:
Posted by Raymond Yee on 12/11/02; 5:00:30 PM
from the Bach dept.
Discuss
|
|
Wednesday, December 11, 2002