This year we added a new section: our Bag Of Tricks which is a set of downloadable NetLogo files showing standard techniques such as:

• Ant pheromone techniques
• Craig Reynolds style Flocking simulation
• Using two graph layouts to create a bouncing ball
• How to have agents travel on links rather than patches
• The n-body problem, both 2D and 3D
• Use of NetLogo’s GIS extension.

The tutorial session was given in the evening at the Santa Fe Complex, an arts and technology non-profit here in Santa Fe, NM.

Note: the gisagents blog gave this a good mention.

Math Is A Second Class Citizen On The Web!

The Math Typesetting for the Internet page has a good discussion on the issues.

So what to do?! MathML? HTML/CSS? ASCII stunts? Equation Editors? LaTeX Tools? JavaScript?

The fact is that it’s not at all easy to make a choice. So here’s the road I took:

1. Notation: I decided on TeX notation. It’s the standard and I decided I’d be ignorant not knowing it!
2. Tools: LaTeXiT, TextMate and similar tools are good at equation creation, producing images/pdf helping visualize/debug the LaTeX source.
3. Plugins: I decided to not use plugins: I’d need a different one for each blog, wiki, forum and so on. They also often require root access.
4. Images: I similarly decided not to use static images: they are inflexible and hard to manage, and also loose the basic TeX source.
5. LaTeX2HTML: I did not want to use LaTeX2HTML (or similar) because my blog (and wiki and forum) all have their own markdown language that I did not want to “escape” by inserting raw HTML.
6. LaTeX Source: I wanted to retain the LaTeX source in the HTML so that in the future I might use the equation in a different tool.

This led fairly quickly to a very nifty solution: CodeCogs has created a LaTeX Equation Editor and a web service for rendering the results! Sixth Form Mathematics & Law blogs on using the CodeCogs facility for dynamic images created by a server.

The idea is quite elegant: send a LaTeX equation in a URL to a server which converts it, dynamically, to a tiny image. The LaTeX segment below is rendered into the equation following it.

\int_{-\infty}^{\infty}e^{-x^{2}}dx=\sqrt{\pi}

Click on the LaTeX code above to see the CodeCogs URL used and the result of its use as a stand-alone image.

Here’s the Textile markdown used in this article:

!http://www.codecogs.com/eq.latex?
int_{-infty}^{infty}e^{-x^{2}}dx=sqrt{pi}!

The following can be used instead and allows blanks in the LaTeX source:

== <img src=

http://www.codecogs.com/eq.latex?

int_{-infty}^{infty}e^{-x^{2}}dx=sqrt{pi}
/> ==

Note that the line breaks after the “?” in the above URLs are used to fit on the page, they do not occur in the HTML/Textile source.

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.

• Basic & Simple HTML
• DocTypes
• New XHTML/CSS
• Our Basic XHTML Doc
• Our Doc’s Structure
• Mozilla’s Editor’s Structural View

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.

• A List Apart
• Jeffrey Zeldman
• Eric Meyer
• Eric Costello
• Zen Garden
• Web Standards Group

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.

• Play0.html, our starting point
• Styling 101 – The CSS Box Model
• Play1.html styled with Play1.css
• Play2.html styled with Play2.css
• Play3.html styled with Play3.css
• Play4.html styled with Play4.css

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!

• The CSS Forum
• CSS Browser Support Charts
• CSS Layout Techniques: Eric Costello
• Drop-Down Menus, Horizontal Style: A List Apart
• CSS Design: Taming Lists: A List Apart
• The CSS Edge: Eric Meyer
• CMS and the Single Web Designer: A List Apart
• WordPress
• Textpattern

Our first stunt was to write a set of Agent Based Modeling tutorials, showing how to write simple simulations in NetLogo and Repast.