Federico Maggi

iWebSkel: The Ultimate Website Skeleton

admin — Thu, 14 May 2009 16:53:29 +0000

When you start implementing a website design in the modern world, you seldom begin from scratch. Many of the Javascript frameworks, for instance, are part of everyday work for many web designers. The same happens for CSS initialization rules.

Sometimes is just boring to create the directory skeleton, just because it’s always the same. I know, I am a lazy one! That’s why I created iWebSkel, which is more for me than for the community.

However, I thought it was a good idea to share it. Let me know if you like it: feedback is always appreciated!

iWebSkel is the ultimate ready to use kit for website design. It features only the latest version essential components to start developing quickly using XHTML, CSS, and Javascript. Elegantly packed together.

Before iWebSkel

Suppose you are about to implement the design of a new website called foobar. Here is what you do normally:

$ mkdir fooweb
$ cd fooweb/
$ mkdir -p images/icons js style
$ cd style
$ edit style.css

At this point you realize that you need to reset style definitions. You code it and after having spent a few minutes you find out this Resetting Again: you have just thrown away your time.

Not too bad. You get back to your work:

$ cd ../
$ edit index.html

Same story. You have to write the code you write every single time. Isn’t that just annoying?

After iWebSkel

How do you do the same things with iWebSkel? Much more easy!

$ wget http://iwebskel.com/get
$ unzip iwebskel.zip
$ mv iwebskel foobar
#Done!

What you do from this point on is just creation. No more repetitive typing. But there is more!

You have all the best icons at your disposal, style is already reset, and a nice HTML template is ready to be filled.

And what about JavaScript? Same story: the two best frameworks are just right there along with a nice event handling template:

/* Example - main.js */
Event.observe(window, 'load', function() {
		//event handling goes here
});

To conclude, let’s take a closer look a the directory tree:

$ find iwebskel -maxdepth 2
  iwebskel
  iwebskel/behavior    #js files go here
  iwebskel/behavior/main.js
  iwebskel/behavior/mootools
  iwebskel/behavior/scriptaculous
  iwebskel/design    #design sketches go here
  iwebskel/images    #site images go here
  iwebskel/images/icons    #tons of icon packs already here
  iwebskel/index.html
  iwebskel/style    #style files go here
  iwebskel/style/images    #style images go here
  iwebskel/style/main.css
  iwebskel/style/reset.css

Fine Border for Your Photos: ImageMagick and Exiv2 to the rescue!

admin — Mon, 16 Feb 2009 12:10:14 +0000

Photos without a frame are like out from their living space. Would you put your favorite pictures on the desktop or on the wall with no frame? Even digital images have found their own form of framing.

So, why not adding a fine border to your pictures before publishing on Flickr, for example? I am not talking about obtrusive, noisy, complicated and bumped borders: I am talking about (sort of) fine art! :)

ImageMagick and Exiv2 (man exiv2) are the perfect combination to create fancy, black and white borders along with a professional signature. Also, instead of having your visitors figure out the settings you used, why not adding them (e.g., aperture, shutter and ISO speed, focal length) right at the bottom of the picture? Take a look a the sample below.

And here is the details.

If not installed, you would need to install exiv2 and ImageMagick. With MacPorts this is as easy as typing:

$ sudo port install imagemagick exiv2

Second, let’s build two tiny scripts to extract the metadata of interest. In my case, I created ~/bin/exiv_data and ~/bin/exiv_year which return an empty string if something goes wrong. For instance, if you forget to embed metadata on your picture we want the scripts to fail in an educate manner.

#!/bin/sh
#File: $HOME/bin/exiv_data
time=$(exiv2 -PEkt pr $1 2 >/dev/null | tr -s " " " " | grep -E "\.ExposureTime" | awk '{print $2}')
focal=$(exiv2 -PEkt pr $1 2 >/dev/null | tr -s " " " " | grep -E "\.FocalLength" | awk '{print $2}')
aperture=$(exiv2 -PEkt pr $1 2 >/dev/null | tr -s " " " " | grep -E "\.ApertureValue" | awk '{print $2}')
iso=$(exiv2 -PEkt pr $1 2 >/dev/null | tr -s " " " " | grep -E "\.ISOSpeedRatings" | awk '{print $2}')

if [ -n "$time" -a -n "$focal" -a -n "$aperture" -a -n "$iso" ]
then
	echo $focal"mm, "$time" @ "$aperture" (ISO " $iso")"
fi

The second script is super tiny:

#!/bin/sh
#File: $HOME/bin/exiv_year

exiv2 $1 2>/dev/null | grep timestamp | grep -oE '[0-9]{4}'

Don’t forget to make them executable with:

$ chmod +x ~/bin/exiv_*

At this point you are ready to try them out with your own pictures. For instance:

$ ~/bin/exiv_data foo.jpg
105.0mm, 1/400 @ F11 (ISO  100)

What about the borders? If you want to obtain a border like the above one, you can re-use my ~/bin/lr_borderscript. Or, you can modify it as you please.

#!/bin/sh
#File: ~/bin/lr_border

year=$($HOME/bin/exiv_year $1)
data=$($HOME/bin/exiv_data $1)

name="Federico Maggi"

if [ -n "$year" ]
then
	name=$name", "$year
fi

mogrify -border 5x5 -bordercolor black $1
mogrify -border 1x1 -bordercolor grey $1
mogrify -border 20x20 -bordercolor black $1

if [ -n "$data" ]
then
	mogrify -pointsize 9 -fill gray -gravity SouthEast -annotate +25+6 "$name" -gravity SouthWest -annotate +25+6 "$data" $1
else
	mogrify -pointsize 9 -fill gray -gravity SouthEast -annotate +25+6 "$name" $1
fi

Remember that this script will modify the original image file! So, if unsure, I’d recommend a backup before.

$ ls *.jpg | while read file; do cp $file $file.bak && ~/bin/lr_border $file; done

Just add a simple loop and you are done!

Follow my soup

admin — Sat, 24 Jan 2009 21:03:41 +0000

Since today, I am giving a try to the http://soup.io mashup service.

Give it a skim on http://soup.maggi.cc

YearBookYourself.com and ImageMagick

admin — Tue, 26 Aug 2008 01:52:16 +0000

I’ve this funny Flash application YearBookYourself.com that allows you to bring your face back to the good ages (from the 50s to nowdays): it’s really funny to see how your look gets perfectly morphed getting the real aspect of an old portrait. You can then share the pictures and/or download ‘em.

With a bit of bash scripting and ImageMagick I got a really aged-looking Polaroid composition, that is just ready to be printed and frameworked! Here is my result.

I took screenshots of each image: if you use a Mac or a smart screen capturing application then you should be able to give each screenshot a custom, progressive name such as:

$ ls
Picture 1.png   Picture 2.png  Picture 3.png  ... Picture 26.png

Renaming and resizing

So you just have to do the math to automagically rename ‘em to obtain

$ ls
1950.png   1952.png  1954.png  ... 2000.png

$ mkdir orig
$ cp *.png orig/
$ mogrify -resize 220x -antialias *.png

Adding a caption and a Polaroid look

And now ImageMagick comes into play; I gues this can be performed in one step (please let me know how) but a two phases processing is fine as well:

$ mkdir polaroids

$ find *.png | while read img; do montage \
-caption "$(basename $img .png)" -font Arial \
-geometry 220x -polaroid 0 $img \
polaroids/$(basename $img); done

Of course these are my settings, you may want to add variations but this is a good starting.

Let’s compose ‘em!

And now, ImageMagick is used to compose the 26 pictures:

$ montage $(ls poloaroids/*.png) yearbook.png

Done!

California here I come!

admin — Sat, 09 Aug 2008 03:18:02 +0000

As most of my friend and colleagues already know, I am about to go to UCSB to spend the last year of my PhD studies. I’ll work with the security group managed by Prof. Giovanni Vigna at Seclab (I’ll continue on my main research topic: anomaly detection). So, from September 1st to the end of June, 2009, I’ll live in the beautiful Santa Barbara, working on cool stuff with cool people! Cannot wait to be there! This is the end of the academic part of the story.

How about the fun?

I prepared a little web based journal, to keep track of the trip and to share pictures, videos and stories my parents and friends. Stay tuned at CA @ maggi.cc.