Tuesday, September 20, 2011

Save a tree with TreeSaver.js (Think "JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS")

Martha Rotter's Blog - An Introduction to Treesaver

"In my Con­tent Strategy Forum work­shop, we cre­ated a short, online magazine called The CS Forum Times. The magazine used Treesaver to quickly lay­out the art­icles and images and make them work well on a vari­ety of browsers and devices. This is an over­view of how we built The CS Forum Times and how you can do some­thing sim­ilar very quickly and eas­ily. The before and after files we used are loc­ated here for you to download.

To cre­ate your own online pub­lic­a­tion, the simple steps are as follows:

  1. 1) Source your content
  2. 2) Source your art/imagery
  3. 3) Cre­ate a new HTML file for each art­icle & paste in the content
  4. 4) Style using an HTML editor
  5. 5) Res­ize images if neces­sary & add in image tags
  6. 6) Edit the TOC file & make sure you’ve included each article
  7. 7) Upload to your server



The CS Forum Times



"Treesaver® is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS.


Download the latest stable beta version, 0.9.2:

treesaver-0.9.2.js (21kb minified & gzipped)



Here's another referenced demo, Nomad Editions’ Real Eats Sample Issue



This reminds me of the WPF Newsreader app, used for a time by the NY Times, but this is done in HTML/CSS and so should be much more portable.

It sure does allow for some pretty content. I'm going to have to keep an eye on this.

No comments: