Adrien’s blog
Stuff I like, stuff I do, stuff I make

My homepage needs some freshing up but I have so many ideas (sometimes conflictual) that I don’t know where to start!

Firstly, I must define what I understand by “homepage”: it must be the web page that I will spread around to represent my identity on forum/email signatures, on wikis, etc… So, it must provide some personal introduction and links to several facets of my identity (e.g. the researcher, the musician, the technology enthusiast…) on the web.

I considered using one of my existing public social profiles (netvibes, friendfeed, my lab profile, my wiki, or even this blog) as homepage. But:

• those public profiles are either too specific (representing only one of the facets of my identity) or too messy when too general (e.g. netvibes);
• my homepage is very well referenced on Google, so I’d better leverage that;
• …and I would like to manipulate some code!

So, let’s share some thoughts on what I’d like to make:

• The homepage must be nice looking on a computer and adapted for easy navigation on a mobile device => should I make a WAP version or use some generic HTML instead?
• I would like my page to be machine-understandable, by adding some semantics (RDFa, FOAF…)
• I want to be able to edit quickly and precisely (no WYSIWYG please!) the content of my homepage directly on the web.
• The content must be backed up on every change, so that I can revert a change, either accidental or malicious.
• I want the page to be lightweight and respectful of W3C standards.

Err.. this sounds like a neat semantic wiki, doesn’t it?

And now, some more precise ideas I’ve had:

• In order to have a self-contained homepage for all the facets of my identify, I’m thinking of a unique HTML file with fragment anchors for each facet (e.g. http://joly.adrien.free.fr/#music would only display the “music” part of my homepage). It would be nice to display a menu/tabs to switch from a facet to another, without having to load another page. The nice thing about this solution is that legacy web browsers (including MS Pocket Internet Explorer on Windows Mobile “smartphones”) that do not support modern javascript will still be able to render the full page and leverage anchors.
• I want to include some lifestreaming on the page. For that I could deploy Noserub to federate my feeds, or simply embed a friendfeed gadget. The possibility for visitors to comment lifestream entries directly on my homepage (incl. through Facebook/Google friend connect) is a plus.
• EditArea seems like a great way to make my page editable online.
• Concerning the semantics, I see two possibilities: the simple one is to embed some RDFa and/or microformats directly in the HTML code and to have a separate FOAF file that I would have to maintain separately; the geeky solution is to store the content of my homepage (mostly links, anyway) in a FOAF file (in RDF) and to render it as HTML pages using stylesheet-based transformations (e.g. XSLT). As a geek I obviously prefer the second option! However it is also a quite heavy solution, and I’m not sure that its complexity is worth the result, and it might not comply with all the requirements I expressed above…

Do you have any thoughts to share on this?

I won’t teach you that spam is a major problem these days. As soon as your email address is found on a web page, it is potentially exposed to spammers that can extract it automatically from HTML pages using robots. For that reason, many people cloak their email address:

• by writing something like "john dot doe at gmail dot com" or even "john.doe(removethis)@gmail.com" in order to trick robots whereas humans can still understand the actual address.
• by replacing its textual form with an image. That way, unless the robots use OCR, the email address can’t be extracted automatically from web pages.

Both methods have a downside: visitors can’t click the email address to send an email immediately if the email address is not textually included in the HTML page (as a "mailto" anchor link). Here, I propose a workaround that allows visitors to see and click your email address without exposing it in textual form on your HTML page.

The trick is to cloak your clickable email address in a flash object. If you even too paranoid to leave your email address in textual form in the flash file (which is binary and compressed), you can even put an image instead (this won’t be explained here, though). We will use SWF Tools to create the flash a file from an image containing your email address.

Step 1: Create an image representing your email address

Use your favorite "paint" program (I use "paint.net") to write your email address, crop the canvas (mine is 164x18), then save the image to a file (use png if you want optimal quality). Note that you may want to make the background of your image transparent, this will be supported in the resulting flash file.

Step 2: Create a script to generate the flash file

This time, you’ll need to create a file with your favorite plain text editing program (like notepad). Write (or copy-paste if you’re lazy) the following source code in the file:

# Generate a flash file cloaking an email link
# Run using Swftools http://www.quiss.org/swftools/
.flash bbox=164x18 version=5  name="emaillink.swf" compress
  .png button_img "emailmini.png"
  .button email_button
    .show button_img as=idle
    .show button_img as=area
    .show button_img as=hover
    .show button_img as=pressed
    # ActionScript
    .on_press:
    getURL("mailto:myemail@address.com", "");
    .end
  .end
  .put email_button pin=center x=82 y=9
.end

Now we’re going to do some replacements for the parts written in red. 164x18 are the dimensions of the image you created on step 1, and emailmini.png is its filename. Write your email address in the getUrl function. Then replace x=82 y=9 with the central coordinates of your image (in my case x=(164/2)=82 and y=(18/2)=9).

Save your file as "emaillink.sc", in the same directory as the image you created in step 1. 

Step 3: Run the script using SWFTools

First, you may need to download SWFTools freely from http://www.SWFTools.org then install it. Then run "swfc.exe" with "emaillink.sc" as an argument. Whatever the way you do (command line or drag&drop), make sure that the image file you’re referencing in your script can be found in the current directory.

This will result in a "emaillink.swf" flash file in the current directory. You can test it by drag&dropping it to a web browser.

Step 4: Embed the flash file in your html page

Embedding your cloaked email link into your html page consists in writing the following code: 

<object type="application/x-shockwave-flash" data="emaillink.swf" width="164" height="18">
  <param name="movie" value="emaillink.swf" />
  <param name="wmode" value="transparent" />
  <!–alternate content –>
  <img src="emaillink.png" alt="my e-mail address: myemail at address dot com"/>
</object> 

As for the script, you may need to replace some values here. emaillink.swf (appearing twice) is the name of your flash file, 164 and 18 are its dimensions. The img element defines an alternative, if the user’s environment is not able to display Flash content. If you want to keep it, you may need to put in the name of the image file you created on step 1 and a human-understandable textual representation of your email address (don’t write its normal form if you don’t want robots to extract it automatically by parsing your page).

Enjoy the result

This is how my cloaked email link looks:

If it doesn’t show as a Flash object, check it out on my homepage instead.

Here we go! Proximate is now distributed on the PocketPCFreeware preview website. If successful, it could be published on the main site which is much more popular!

PocketPCFreeware : Proximate 1.0 beta

Here we go! One of the most interresting study project I’ve done in Australia is now online! It’s a chat program on top of a peer-to-peer framework for Pocket PC. Check it out and tell me how you like it! BE CAREFULL though, it’s quite unstable!

Proximate, proximity peer-to-peer framework

Proximate is a framework/middleware that empowers proximity communication applications using peer-to-peer technology. Designed for mobile devices with wireless connectivity, this platform can host pluggable applications sharing the same network and user identification layers. It can be compared to MSN/Windows Live Messenger in the way it integrates diverse modules in a common environment, allowing people to communicate and interact.

The current (UNSTABLE) version allows to chat with online users around you, using your stylus either to type or scribble.

• Homepage
• Screenshots

I developed 2 python scripts to consult my gmail inbox off-line in my favorite email client (thunderbird):

• gmailretr.py downloads your inbox (or threads having the label of your choice) from your gmail account, using the libgmail API into a mbox file
• gmailboxpopd.py runs a POP3 server locally on which your favorite email client will connect to download your retrieved inbox (mbox file)

Use cases:

• you don’t have access to the internet, but someone else can bring your email back on a usb stick while keeping your privacy (emails are invisible, you don’t need to give your password)
• you have access to the internet for a short amount of time => you can download your emails online now and read them later while you’re offline.

In order to make it work, you need to be familiar with Python. You’ll also need to download and install the last version (tested from 0.1.3.3) of libgmail API.

 Download gmailbox version 0.9 (GPL)

Here is my first program contribution advertised on this blog.

One day I decided that I wouldn’t use MS Outlook any longer to manage my contacts. While it’s still convenient to have them always with you on your PocketPC, I also wanted to import my contacts into my Gmail account. But I couldn’t find a way to transfer them from my PPC to my PC…

I made that small c#.net program in order to export all the contacts stored on the PocketPC (using the native but invisible Pocket Outlook) into a CSV file, basing on a template (to define the fields to export).

Its usage is fairly simple: you install it on your PPC, copy the template.csv file in the root directory (after editing it if you like), then your run the program and wait for it to finish. There’s no UI at all, it’s script-like. The contacts will be exported in the contacts.csv file, in the root directory of your PPC. If you used the default template, you can directly import this resulting csv file into your Gmail account!

So far, the project is hosted by berlios under the Microsoft Shared Source license (since I’m using their POOM wrapper…).

Check that out: Pocket Outlook Export