Web Developer 1.1.6

A useful Firefox extension for exploring code generated by a CMS (Content Management System).

Web Developer can be downloaded from http://chrispederick.com/work/web-developer/ and installed by dragging the "xpi" file onto a Firefox window. Once installed, extensions must be enabled, sometimes configured and finally invoked with a restart or two in between. Web Developer is accessed through a Tool bar between the Bookmarks tool bar and "tabs" and the Menu item "Tools".

Web Developer provides access to a number of browser internals which one can begin to appreciate by digging through each of the menu trees. Documentation is sparse and Wed Developer intersects almost all of the "world wide web" so expect to have your attention fragmented and to get dragged into unexpected places. You might start getting lost here - http://www.mozilla.org/docs/end-user/.

It is common for developers to "scrape" and "paste" code onto a WYSIWYG editor such as FCKEditor or TinyMCE. THe embedded HTML code does not improve in the process. Code generated by the WYSIWYG tools themselves can become convoluted as objects are moved and "adjusted". Cleaning up the code by switching to "plain text mode" and editing is contrary to the purpose in using a WYSIWYG editor in the first place.

A WYSIWYG is supposed to obviate the matter of layout by "div" or "table". A decent treatment of the tradeoffs can be found here - http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/. My own preference is to use the simplest and most direct tool and for most of the history of the web, layout by table was the norm. For some reason, tables have fallen into dis-repute and now you are expected to know and live with enough CSS to create "table-less" designs. Drupal does provide for "local" CSS and Drupal, Apache on the server and the browser will all try to "improve" performance through a variety of caching techniques. Your WYSIWYG tool makes the decision for you and not always the most appropriate choice.

I looked through a "home" page for one sight recently and found images burined in 5 or more level of "<div>". Parallel constructs had their own unique code and CSS. This is where Web Developer comes into play. The HTML/CSS scheme provides means of naming and marking both points and spaces. Points are "named" (<a name="..."> which are called an "Anchors". "Anchors" may have "links" (<a href="...">). "Divs" define spaces. That is, they mark the beginning and end of group of characters. CSS gleefully combines point and space directives which can leave authors, browsers and readers confused. Web Developer will "Display" a number a number of these aspects either in context or on a separate page such as "Anchors" and "Div Order".

So what do you do when you find you now have a "fine kettle of fish". You can ask for a second opinion by pasting the subject HTML into a third party HTML editor. I use "Kompozer" for this purpose. In this case, Kompozer simply confirmed the information provided by Web Developer, too many levels of "div". Fortunately, the asseets can be extracted, categorized, inventoried in preparation for re-deployment.  Deployment is guided by a careful assessment of the topology, identifying the surfaces (spaces).