Backspaces

October 10, 2004

XHTML/CSS: The Quiet Web Revolution

Filed under: Tutorials — backspaces @ 12:35 am

While updating my ancent website (started in the 1995’s .. so very html 1.0), I decided to look into the current state of the art of web publishing.

Imagine my surprise when I found that the cruddy table based mess the .com sites used to achieve their unnatural, pixel perfect goals had been replaced by a very clean separation of content and structure (xhtml) and the looks and style of the page (css).

I put together several examples for a talk to our local technical team. Here’s the talk’s “slides” .. pages of reference material and demos.

Note: The talk included considerable CSS magic by making simple changes in the style sheet using CSSEdit and having immediate response in the preview page. So some of that is missing for folks just looking at these pages.

The Basics

Here we look at old html and new xhtml and css.

Before we start: Some of The Heros

These folks, and many others, brought order back from the chaos of the early, table-centric (read “Gawd Awful”) mess our poor web wandered into. Notice how design played a strong role in achieving this revolution. Techies — be humbled.

The Tutorial

Note: During this part, I used the very simple document discussed above, simply changing its style sheet. Between step 1 and 2 I added a bit more material to show the impact of the styling.

Help: The Great CSS Community

Here’s the tip of the help iceburg. My recent experiences converting to xhtml/css and then Textpattern as a CMS really made me appreciate all the help out there. Angels, we thank you!

October 7, 2004

Recent Web Findings

Filed under: Musings — backspaces @ 5:01 pm

Recent Web Findings

This is a writeup on recent findings I’ve made in the web & internet world as I explored it to upgrade my web site and to begin thinking about development issues we’ve been discussing at WedTech and other venues like Ars Publica, RedfishGroup, and other opportunities.

First and foremost is a huge change in the core web world itself. Html has been regularized into being xhtml, a subset of xml. (Xhtml is simply html with ballanced tags and other xml regularities. We’ll use “html” from now on but mean xhtml) In addition, the MVC style (Model, View, Controller) has become a core value, promoting an extremely clean separation of content from layout/looks.

The xml direction has prompted several new capabilities such as news feeds and added web semantics. Robert’s recent posting on his web site’s use of feeds was quite interesting. Google, Yahoo and other sites have dynamic interfaces letting you use the xml world to programmatically query their huge repositories.

While becoming immersed in all this, I tried some new tools.

One was Textpattern, a content management system (CMS) which makes it quite easy to manage and update a web site. It provides easy access to html/css, and makes it easy to incrementally modify both the content and looks of the site. It provides a browser based “dashboard” for doing all this in a very simple way. It manages fragments of content (articles) and html (forms), integrating them into pages for you.

Textpattern is based on PHP and MySql, two interesting core web technologies. PHP is a server based dynamic page generation technology, while MySql is a freely available, well supported SQL server. HostGo, our popular hosting service, provides both. And there is an excellent phpMyAdmin web application for managing and viewing your MySql database.

Templating is a widespread technology for separating the php programming from the html content. It works by custom defined html tags. For example, the tag <txp:page_title /> will generate a reasonable page title for the current page based on the section/category/article contents of the page. It invokes this php function:

    function page_title($atts) {
        global $sitename,$id,$c,$q,$parentid,$pg;
        if (is_array($atts)) extract($atts);
        $sep = (!empty($separator)) ? $separator : ': ';
        $s = $sitename;
        if ($id)       return $s.$sep.fetch('Title','textpattern','ID',$id);
        if ($c)        return $s.$sep.$c;
        if ($q)        return $s.$sep.gTxt('search_results').$sep.' '.$q;
        if ($pg)       return $s.$sep.gTxt('page').' '.$pg;
        if ($parentid) return $s.$sep.'comments on '.
            fetch('Title','textpattern','ID',$parentid);
        return $sitename;
    }

All extensions to Textpattern are done via these tags. Thus your article and form fragments have no php programming, keeping programming separate from content and form. It is possible to use Textpattern with absolutely no knowledge of PHP and MySql.

Textpattern is installed on your server (hostgo for many of us) and the site is directly managed from there. You need not have a local “mirror” of the site on your computer. Because html/css is used, the actual content you add to the site is trivial html with none of the complex table layout, and embedded font, color, etc styling. This leads to using a “MarkDown” style of data entry. By markdown I mean any of several simple text-to-html schemes. Wiki’s use a simple scheme of * bold *, _ italic _, CamelCase or [http://foo/bar.html] links, and so on. Several blogs use this text-to-html. Textpattern comes with Textile, a similar markdown. There are others as well.

There are several very interesting Java/XML CMS systems too. Carl’s presentation on XML and XSLT was quite an eye-opener. Combined with Ant, the Java/Apache build tool, an entire site can be maintained from a command-line interface! Very impressive and it has the advantage of being closer to the core xml used to have sites communicate with each other.

I view the Java/XML – PHP/MySql split as a positive thing, and something that brought about several Cathedral and the Bazaar discussions. Some sites combine both technologies. The http/webservices protocols provide clean separation.

Another tool I’ve begun using is jEdit, another interesting open source project. It has become a favorite among folks wanting an editor that runs on Windows, Mac, and Linux systems and which is easily modified via plugins and mode scripts. I think the most interesting thing for us is its ability to manage all its plugins directly within jEdit via a GUI that directly interacts with the plugin website without having to download and install. This surprising design, including the network directly in the application, makes sense for us as we consider complexity applications.

Because html/css usage promotes very simple html, I find jEdit handles content creation, when I’m not using Textile directly, quite adequately, with the bonus of being a good xml editor (for Ant and most modern configuration scripts). I use a separate css editor to very dynamically experiment with page style. So with Textpattern, I generated a simple page, cut/paste it to a local html file, and started styling with a css editor. Extremely simple and understandable, and very rapid design cycles.

During all these explorations, I found that the web communities have grown considerably in sophistication. First and foremost were the Forum sites with easy to use “bulletin board” style posts. The Textpattern forum (and WordPress, a blog system I also was exploring) are very active and useful. Because Textpattern is meant for more than just blogging, it is a bit more complex to install and use. The community was/is a huge help .. I visit daily and am starting to contribute help and plugins.

This community approach was used brilliantly by several open source projects. One example is MySql’s on-line manual. It allows readers to leave comments on each page! This has lead to very rapid discovery of problems and interesting usages. PHP uses the same style. Some projects use this as a way to build the manual itself: the core developer(s) create an outline for a manual in an open Wiki, and the community fills it in. This was used by the single Textpattern developer to document user-supplied plugins. All this documentation is very dynamic, often to pointers to the discussions which lead particular decisions.

I find myself making choices of which software to start using based on their community. A vibrant community often makes for a successful project. So when looking for Java based systems recently, I found myself guided considerably by the community activities around the project.

These experiences led to suggesting that we have an explicit “portal” section part in the Ars Publica grant proposal.

My most recent plunge into a new system is Eclipse, the open source IDE based on a plugin architecture which prompts considerable community activity. What captured me was it superb integration into the Mac desktop and its ease of configuration. No IDE is easy to use, but getting rid of barriers makes it much simpler.

My interest in Eclipse was not just as an IDE. Roger and others had found that it hoped to be used as an application framework. It is called the Rich Client Platform (RCP). So I’m currently going through a couple of RCP tutorials to see if it could be used as an integration platform for agent based modeling.

October 1, 2004

NetLogo: Cruising Model

Filed under: Hacks — backspaces @ 7:28 pm

I’ve got an initial version of a NetLogo model with cars cruising on a map of Santa Fe, NM. This was done as a proof of concept with summer students working in the RedfishGroup.

Their project included working with the Santa Fe police on understanding the dynamics of cruising around the plaza, a center of Santa Fe activities.

This model is somewhat unusual due to using tiny patches: 2×2 pixels each! Generally the patch size is considerably larger. The challenge was to use a GIS generated map of the downtown area, and to import this into NetLogo so that the patches gave a feel of a map image. This has been pushed to 1 pixel patches with no difficulty other than the time needed to import the image.

The jpg image was processed by converting it into the PPM image (portable pix map) text graphics format, then using the NetLogo rgb primitive to convert that image to a format NetLogo could use. It was then written back out to a data file consisting of only the NetLogo integer color values used by the model’s patches.

The final hack was to literally cut & paste the data file into the NetLogo program file (.nlogo file) as an array! This avoided some Java security problems concerning file access that will go away with the current NetLogo beta. But it works so well, we may just keep it for a bit.

Textpattern 1.0rc1: Boy, that was easy!

Filed under: Hacks — backspaces @ 5:34 pm

Being new to textpattern, I was delighted to see how easy it was to update from g1.19 to 1.0rc1. Deanload the bundle, unpack it, move the old …/textpattern to the side, replacing it with the deanload, and copy in my prior config.php file.

That’s it! I keep a mirror of the site on my laptop, and both upgrades were that simple.

The new system has some sweet features such as separating the edit articles page from the articles themselves, making it easier to manage existing articles. Also can specify how many articles show on a page .. nice for modem users I suspect.

Powered by WordPress