Thursday, March 08, 2007

Top Web Technologies

Jim Rapoza of eWeek compiled his list of the Top Web Technologies of All Time as a collection of slides.

Here is his list:

  • XML
  • HTML
  • Netscape Navigator
  • HTTP
  • Apache
  • NCSA Mosaic
  • CERN httpd
  • Internet Explorer 3
  • NCSA httpd
  • Firefox
  • SSL
  • ViolaWWW
  • WAIS
  • CGI
  • Internet Information Server
  • Squid
  • Java
  • HotMetal
  • Flash
  • PHP
  • Dreamweaver
  • RSS
  • WebTrends
  • Blogger
  • PlaceWare
  • Lynx
  • Perl
While I would definitely concur on many items on the list, there are others that I would disagree with or substitute.

Regarding the standardized protocols and languages: XML, HTML, HTTP, RSS, SSL, Java, PHP, Perl, RSS, and even Flash, I have no objections. They are certainly the foundations of the web. However, I do think he's missing a biggie of JavaScript which, while it had a dubious start and I avoided it for quite a while, is shaping out to be the scripting language of Web 2.0.

Regarding his list of browsers: NCSA Mosaic, Netscape Navigator, and Internet Explorer, Firefox? Absolutely. ViolaWWW? I don't think so. Yes, it came out before NCSA Mosaic, but Mosaic was really more responsible for bringing the WWW to the masses, and if you really want to show the start of the web browsers, why not point to the actual original browser named WorldWideWeb by Tim Berners-Lee? Spyglass? Come on, it's just a commercial re-branding of NCSA Moasic. Yes, it became Internet Explorer, but you could just as well say NCSA Moasic became Internet Explorer and not bother to mention this interim step. Similarly, Netscape was first called Mosaic Netscape, so do we need to list that too? Is wasn't really significant in itself. Lynx? Sure, it comes in handy from time to time, but I don't think it's a top web technology. Opera? It's a nice browser and all, but I don't think it's ever made that much of an impact overall. Yes, it introduced some new ideas like mouse gestures, but I just don't think it was that significant. Why not Safari for the Mac, or Galleon or Konqueor on Linux? Same thing. They're nice, but more of an also ran than a top web technology.

Then we have our web servers: CERN httpd and NCSA httpd which begot Apache, no question. IIS? I guess in some circles, but Apache is still significantly more important. If it's on his list because it provides the .Net platform, what about Tomcat, JBoss, or other commercial products like WebSphere and BEA for J2EE? I don't think I'd put IIS on the list, but if I did, I think I'd be remiss not to include Tomcat or some of the other Java application servers.

Next are HTML editors HotMetal and DreamWeaver. Personally, I think the Netscape/Mozilla Composer and/or FrontPage had a wider impact toward bringing HTML editing and composition to the masses originally. Jim makes the comment that, nearly all serious Web developers now use Dreamweaver, but I know plenty of serious web developers who don't use Dreamweaver so I think that was a personal bias on his part.

Finally he have various web services like WAIS and Blogger. WAIS had it's place as a search technology (though more familiarly recognized as Gopher), but I think Yahoo and subsequently Google had a more significant impact in organizing the Web to make it useful to the masses. It's hard to classify it as a Web technology when Gopher/WAIS was essentially replaced by the web. Blogger is certainly important and can stay on the list, but if it is, I think some other services should also be on the list. For example, Yahoo's provision for free email (as well as Hotmail, GMail, and others) was more important toward getting people to use the web for online services. Also, services like MySpace are more significant toward advancing the collaboration ideas of Web 2.0. And is PlaceWare really more significant than all the other similar solutions? Why not CUSeeMe or NetMeeting?

Also, what about other key technologies that make the web work like databases (MySQL anyone?).

Just my thoughts. Any other suggestions?

Tuesday, March 06, 2007

The Truth about Global Warming?

A local talk show personality, Todd Schnitt, has compiled a list of articles by respected scientists who dispute global warming.

It is virtually shoved down our throats that scientists are in complete agreement about global warming. Al Gore and the media assure us that there is an absolute consensus in the scientific community that humans are heating the planet and irreversible damage is looming as a result of man's carbon output. How about some intellectual honesty? Reasonable debate?
-- SchnittShow.com



It's nice to hear the other side of the story.

Thursday, March 01, 2007

Simple draggable HTML using prototype.js

I know there are plenty of JavaScript packages out there to allow you to create draggable elements on your HTML page, but to me, most of them appear to be overly complicated for a simple function and are often part of a larger framework that you may not need.

The solution I'm providing today does depends on the prototype.js package (I'm using version 1.5 currently) which allows the code size to stay smaller.

Here's how to make any HTML element draggable in 5 easy steps.

  1. Add the class of draggable to whatever you want to move. Actually, you can use any class identifier you want, but draggable is what I'm looking for in my code.

  2. Give your draggable element a position style (position: absolute; or position: relative;) and an initial top and left value. Generally, you'd want to put this in your styles in an external CSS with the draggable class, but the top and left values need to be set as an attribute in the HTML. Hint: setting the position to relative with the top and left values set to 0px will allow it to start located where it normally would be in the browser. You'll probably want to give it a higher z-index and solid background-color as well, but that's up to you.

  3. Include the 3 drag event handling functions I'll describe below in your code somewhere

  4. Register all your draggable elements to the event listeners.

  5. Have fun dragging window elements around.


The event handlers


Before you can use the following functions, you need to define some variables to hold some information during the drag. If you make the subsequent functions part of another containing object, you can simply prepend all occurrences of these variables in the functions with this. and they will be stored in the containing object instead.

var dragObj;
var cursorStartX;
var cursorStartY;
var elementStartX;
var elementStartY;
var dragGofn;
var dragStopfn;

startDrag

startDrag will initialize a mouse drag event. It captures the initial location of the mouse when beginning the drag in order to calculate movement later. It also captures the current coordinates of the dragged element for correct positioning as the location of the mouse are most likely not the origin of the element being dragged. Finally, it associates the additional event observers to the element to capture the mouse movement (onmousemove) and release of the mouse button (onmouseup).

function startDrag(event) {
dragObj = Event.element(event);
// if the target of the event is not a "draggable" element, then search
// through it's parents for an element that is draggable.
// if we can't find a draggable element before reaching the root document
// element, then bail out
while (!Element.hasClassName(dragObj,"draggable")) {
dragObj = $(dragObj).up('.draggable');
}
cursorStartX = Event.pointerX(event);
cursorStartY = Event.pointerY(event);
elementStartX = parseInt(dragObj.style.left, 10);
elementStartY = parseInt(dragObj.style.top, 10);

Event.observe(dragObj, 'mousemove', dragGofn);
Event.observe(dragObj, 'mouseup', dragStopfn);
}

dragGo

Once the drag event has been initiated by the startDrag function, the dragGo function will update the location of the element being dragged so that it moves around the screen with the mouse.

function dragGo(event) {

var x, y;
x = Event.pointerX(event);
y = Event.pointerY(event);

// move the target object
dragObj.style.left = (x - cursorStartX + elementStartX) + "px";
dragObj.style.top = (y - cursorStartY + elementStartY) + "px";

Event.stop(event);
}

dragStop

Once the user has release the mouse button, we need to stop observing the mouse movements, so the dragStop function will un-register the event handlers.

function dragStop(event) {
// Stop capturing mousemove and mouseup events.
Event.stopObserving(dragObj, 'mousemove', dragGofn);
Event.stopObserving(dragObj, 'mouseup', dragStopfn);
dragObj = null;

Event.stop(event);
}

Registering the draggable elements


You're almost ready to start moving items on the screen, but first you have to register all your draggable elements to the startDrag function so that they will be notified of the drag events. So, we utilize prototype's element-by-classname selector to find all the draggable elements and associate the event listener to them.

Note: in order to un-register the event listeners, you have to have the handle to the event listener you used to register it originally. Thus, we used the variables dragGofn and dragStopfn to register and un-register the event listeners. These variables are defined here during the original event registration.

function registerEvents() {
dragGofn = dragGo.bindAsEventListener();
dragStopfn = dragStop.bindAsEventListener();

$$(".draggable").each(function(draggableElem) {
Event.observe(draggableElem, 'mousedown', startDrag.bindAsEventListener(), true);
});

}


Note: the final true on the Event.observe tells prototype to request capturing instead of bubbling. This is necessary for this function to work in Safari (see Kir's blog)