W-Architectures

W-Architectures is an archi­tec­ture and urban-planning agency. The firm brings together a highly-qualified team of archi­tects with inter­na­tional expe­ri­ence.” This is how they intro­duce them­selves and I couldn’t have said it bet­ter myself.

I recently pub­lished their brand new web­site, designed by Chris­telle Bon­net and devel­oped by me. It’s been a pretty long process (they are very busy guys) but it’s here and I like it!

I used mostly Word­Press and MooTools to develop it. Every­thing was designed to be light and sub­tle, I think I can safely say that it is.

le bureau baroque

As a free­lancer I mostly work on AIR apps, but when friends asked me to develop their new web­site I hap­pily jumped aboard!

Le bureau baroque is an archi­tec­ture agency in Bor­deaux; play­ing with art, design and — of course — archi­tec­ture. They’re the ones that set up the Pecha Kucha event in Bor­deaux and who invited me to show off a bit! Of course they work on lots of other great projects so they needed a site to let the world know what’s up.

They wanted a highly visual site that would be easy to update, we con­sid­ered a few options but quickly came to the con­clu­sion that Index­hibit was exactly what we were look­ing for. But one thing that was really bug­ging us is how most (if not all) Index­hibit sites look the same. Indeed they’re a great way to show big images and the nav­i­ga­tion is damn sim­ple, but hey, why not keep these great qual­i­ties but in a more orig­i­nal layout?

Since we’re really keen on hor­i­zon­tal lay­outs we went for this. But some­thing both­ers me with this: you get a hor­i­zon­tal scroll­bar at the bot­tom of the page; which is hard to see, because it sits at the bot­tom of your screen and we — dumb humans — are not really used to it. So I thought: why not have a hor­i­zon­tal lay­out scrolled by a ver­ti­cal scroll­bar? That seemed a bit tricky at first, for two reasons:

  1. Is that tech­ni­cally feasible?
  2. Isn’t that too weird, for the end-user?

Both ques­tions could not be answered with­out try­ing, so I tried. And it looked cool!

When the pro­to­type was ready I started tak­ing a look at Indexhibit’s guts; and although it looked a bit ugly to me, I real­ized pimp­ing it was no big deal… A few e-mails and burger-meetings after we were happy with the newly cre­ated theme. Chris­telle Bon­net helped out with her great typographic/balance eye and we were ready to go!

Go see the site live, enjoy those nice projects, play with that side-scroll con­cept and tell me what you think!

AIR Application Updater: switch to the 2.5 namespace

I just wasted a few hours on under­stand­ing how to update an AIR app from the 2.0 name­space (or ear­lier) to the brand new 2.5 one. As you may know, two new tags have been intro­duced (“ver­sion­Num­ber” and “ver­sion­La­bel”) to replace the old “ver­sion” one.

To avoid break­ing things you have to cre­ate an inter­me­di­ary app ver­sion that will smoothly switch from 2.0 to 2.5, here’s what you can read on the release notes page:

In order to be able to update from ver­sion 1 to ver­sion 2, an inter­me­di­ary update step must be added as fol­lows: appli­ca­tion ver­sion 1, pack­aged with AIR 2 and using the 2.0 name­space gets updated to: appli­ca­tion ver­sion 1.5, pack­aged with AIR 2.5 and using the 2.0 name­space. This ver­sion of the appli­ca­tion must include the ver­sion of the Appli­ca­tion Updater SWC/SWF included with the AIR 2.5 SDK. This gets updated to: appli­ca­tion ver­sion 2.0, pack­aged with AIR 2.5 and using the 2.5 namespace.

Where “appli­ca­tion 1.5″ is the inter­me­di­ary step.

All of this looks quite sim­ple but really it isn’t; or at least it wasn’t for me. To be really explicit here are my 3 appli­ca­tion descrip­tors and the update descrip­tor (ver­sion num­bers changed to match Adobe’s example).

Appli­ca­tion descrip­tor – Ver­sion 1 (pack­aged with AIR 2.0):

  1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/2.0">
  3. (...)<version>1</version>(...)
  4. </application>

Appli­ca­tion descrip­tor – Ver­sion 1.5 (pack­aged with AIR 2.5):

  1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  2. <application xmlns="http://ns.adobe.com/air/application/2.0">
  3. (...)<version>1.5</version>(...)
  4. </application>

Appli­ca­tion descrip­tor – Ver­sion 2 (pack­aged with AIR 2.5):

  1. <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  2. <update xmlns="http://ns.adobe.com/air/framework/update/description/2.5">
  3. (...)<versionNumber>2</versionNumber>(...)
  4. </update>

Update descrip­tor (PHP script receiv­ing the caller’s cur­rent ver­sion as “cur­rentVer­sion” GET variable):

  1. <?php
  2. header("Content-Type: text/xml; charset=utf-8");
  3. echo '<?xml version="1.0" encoding="utf-8"?>';
  4. $currentVersion=array_key_exists('currentVersion', $_GET) ? (float)$_GET['currentVersion'] : 1;
  5. $isNewNamespace=$currentVersion>=2;
  6. $ns='http://ns.adobe.com/air/framework/update/description/'.($isNewNamespace ? '2.5' : '1.0');
  7. $version=$currentVersion>=1.5 ? 2 : 1.5;
  8. $versionTag=$isNewNamespace ? 'versionNumber' : 'version';
  9. ?>
  10. <update xmlns="<?php echo $ns ?>">
  11. <<?php echo $versionTag ?>><?php echo $version ?></<?php echo $versionTag ?>>
  12. <url>http://www.your-site.com/update/your-app-<?php echo $version ?>.air</url>
  13. </update>

Not that sim­ple, right? And this is not only annoy­ing to the devel­oper, but also to the end user. He will be noti­fied of an update from ver­sion 1 to 1.5 and when he’s done he’ll get prompted about the new-new ver­sion (2): bang, another update process.

If you’re curi­ous of how I send the app’s ver­sion to the update descrip­tor, here it is:

  1. _appUpdater.updateURL='http://www.your-site.com/update/version.php?currentVersion='+App.getVersion();

The App class is avail­able in my as3bits repository.

Some help­ful links on the subject:

I hope this helps!

eduMedia’s eBox

Guess what? AIR app! This one’s for edu­Me­dia.

An intro

We cre­ate and dis­trib­ute ped­a­gog­i­cal sim­u­la­tions and videos, and our school users can down­load them to pre­pare and illus­trate their lessons. Until now we offered server-side gen­er­ated ZIP files with an HTML, some CSS and the SWF, but users (who often are not com­puter geeks) wanted some­thing sim­pler and more pow­er­ful… So we designed the eBox!

The eBox

Basi­cally the eBox is an empty media library wait­ing to be filled. The first time you launch it, it installs itself (and the AIR run­time, if not already there) and then fills itself with the medias you chose. This hap­pens thanks to AIR’s Browser­In­voke logic and removes the “Save As” and “Uncom­press” steps.

You can also fill it with “local medias” (of any type) but drag­ging and drop­ping files on it, or by brows­ing and select­ing them. If these medias are SWFs they’ll be opened within the app, if not the OS will open them with their default app. Handy.

You also have the abil­ity to cre­ate direc­to­ries to orga­nize your library, and to reorder medias (via drag and drop). Pretty com­mon, but cool.

Let’s talk tech

Flex 4.1, local­ized with Lupo (now free and Open­Source!) and designed with Illus­tra­tor. Server-side com­mu­ni­ca­tion is made through AMFPHP. I used some tiny tech­niques that helped deploy two dif­fer­ent ver­sions with only one project (we have a school and an indi­vid­ual ver­sion), I might detail that in a next post.

This is my first real-life project with Robot­legs, it helped me learn how to use it and how to write really clean code; with view, medi­a­tors and all. I loved it and think I will con­tinue build­ing big projects with RLs, makes you feel pretty.

So?

I’m pretty happy with the final result (not that final, expect updates!), both on visual and tech­ni­cal points of view. Go grab a free media and tell me what you think! We also set up a spe­cial page with a nice pre­sen­ta­tion of how it works, in case you’re lost.

Redesign

I’ve had this blog for 2 and a half years now, and it never really evolved visu­ally. So I decided to update it a bit, from scratch.

So that means a new theme?

Yay! Since the blog has been redesigned and you’re prob­a­bly read­ing this from your RSS reader you should defin­i­tively come by and see how it looks. And share some feed­back, if you feel like it.

Can’t remem­ber what it looked like before? I’ve archived screens over at Flickr.

A con­sis­tent look

Updat­ing the blog’s look is good, but a com­plete rewrite is bet­ter; for con­sis­tency, fool! I used to have a dif­fer­ent look for every sin­gle page: home, projects, blog and so on. No more.

Long story short:

Before: all dif­fer­ent. Now: all good.”

I’ve been into grids since the day I learned about Blue­pint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heav­ily relies on a grid struc­ture. For grid freaks out there, click here to tog­gle the columns and see what I mean. Of course if you’re on a small device (such as a phone) the UI is a bit dif­fer­ent, but we’ll get into that later.

Got a key­board? Like short­cuts? Press that key!

I imple­mented a few key­board short­cuts, from use­ful to use­less. For exam­ple, if you liked the grid tog­gle, just press G (for grid) or W (for InDe­sign users) and you’ll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next arti­cle by press­ing N (or the Down key)? And you guessed it already, P (or Up) will jump to the pre­vi­ous (inspired by AisleOne). You can also time-travel by press­ing Shift+P (for Past) or Shift+F (Future). Handy? Yep.

Feel like you’re stuck in the blog? Just press 1 to go to the Home page, or 2 for Projects. 3 is for the Blog and 4 is the About page.

My screen is smaller than yours

I dis­cov­ered that tech­nique on Hicks­de­sign and imme­di­ately thought I had to imple­ment that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then over­write some dec­la­ra­tions if the screen size matches some rules… I imple­mented 3 dif­fer­ent lay­outs so the site should look good on about any device. Just resize your browser win­dow and see things move. How cool is that?

My brother (and his iPhone 4) helped me test the retina-display-ready logo, too. Optional but cool.

More awe­some

  • I’ve always wanted to use Web­fonts but never really knew where. Here it is, you’ll find a nice OFL Sorts Mill Goudy TT on the home page. Thanks Google.
  • Another tiny thing is the “Sub­tle Prompt”. It hap­pens when you use a key­board short­cut or when you click the Con­tact link…
  • If you’re on a WebKit browser (Safari or Chrome) you should see cus­tom scroll­bars, styled with CSS. Yeah.
  • I kind of don’t sup­port Inter­net Explorer. Yes, this IS an awe­some feature!
  • Track­backs are now sep­a­rated from reg­u­lar comments.
  • A blog post’s author (my) com­ments appear dif­fer­ently, so you know who’s the boss out there.

Open­Source

I always try my best to share the use­ful and reusable bits. Here are some JavaScript (MooTools required) goodies:

  • LazyScroller: turns your key­board keys into a nav­i­ga­tion dashboard.
  • Sub­tlePrompt: nice and gen­tle prompt for your sen­si­tive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea’s back­ground image to scroll with its content.

I’ll try to post docs/demos soon, I know this is prob­a­bly a lit­tle bit rough right now…

What now?

Well, you tell me! I’m pretty happy with it, but things can evolve—just share feedback!

Shortcodes for Drupal

Word­Press’ Short­code API is a really cool thing, and since I’m work­ing on a Dru­pal site these days I’ve been look­ing for some­thing sim­i­lar. Unfor­tu­nately I couldn’t find any­thing… There are some imple­men­ta­tions out there but the ones I found and tested always come pre-bundled with spe­cific tags and don’t always pro­vide an exten­si­ble and sta­ble logic.

So I made mine!

Most of my work sim­ply con­sisted in copying/pasting the code in Word­Press’ shortcodes.php and bind­ing it into a Dru­pal fil­ter. Easy enough.

Now if you want to use it, you have to:

  1. Get the module
  2. Add it to your “mod­ules” directory
  3. Enable it
  4. Add it to one of your setup’s fil­ter bundle
  5. Write your own mod­ule where you’d imple­ment one or more Short­codes (via add_shortcode) and make sure you add “depen­den­cies[] = short­codes” in your .info file

You might expe­ri­ence a nasty “Call to unde­fined func­tion add_shortcode”. If so, you have to change you mod­ule implementation’s weight, either directly in your data­base, or thanks to the cool Util­ity mod­ule. Set it to 10 and you’re set!

Ébruiter²

Hop, je viens de payer des nou­veaux habits à Ébruiter (le blog qui parle de musique à ceux qui ont des oreilles) qui ne se plai­sait plus dans son pre­mier ensem­ble… Grid sys­tem, bien sûr. Tou­jours Word­Press, avec un thème mai­son (merci Boks et Greg) et des hacks par-ci par-là.

Ebruiter²

Et puisque finale­ment j’aime bien le con­cept, je vais essayer de repren­dre l’habitude de poster des trucs. Ça va être super.

Chope le flux, poto !

Snips2

Remem­ber my first and only Word­Press plu­gin? Well it just got better.

Snips2

Snips 2.0 is basi­cally Snips rewrit­ten from scratch, updated to fit Word­Press’ Short­code API. Let’s see how good it is…

Tired of hav­ing to copy paste nasty HTML code from sites such as YouTube, Vimeo and so on? Look­ing for a way to insert recur­rent con­tent in your posts with­out hav­ing to type it every time? Would like to be able to inject para­me­ters in these snip­pets? Well, now you can.

Just install Snips and use the bun­dled short­codes or create/edit your own!

Each Snip is a com­bi­na­tion of a name, a model and optional para­me­ters. The name defines the short­code tag you will be able to use, the model is the con­tent that will replace your short­code calls and the para­me­ters (that look like #the-parameter# in the model) are por­tions of the model that can change from a call to an other. Those para­me­ters can have default val­ues or can be left empty and then become mandatory.

All of this can be edited via a sim­ple UI, found under Set­tings > Snips… Here’s screenshot:

Snips2 screenshot

For those that used Snips’ first ver­sion: (0.2) every­thing should be OK, the pre­vi­ous syn­tax will work ; but I rec­om­mend using the new one and the cor­re­spond­ing updated model files (ex: yt becomes yt2). Also, the #up# para­me­ter (used in mp3 and swf snips) has to be set man­u­ally to your blog’s upload path.

If you use it and find bugs, please let me know! This is the first time I use jQuery behav­ior (for the para­me­ters’ detec­tion in the Set­tings page) so it could act a lit­tle weird.

Back on tracks!

Hi there!

I’ve been quiet for some time because my lap­top died with­out warn­ing… But hap­pily I’m back with a brand new one (with Vista, ouch!) and just took time to enhance this blog a bit!

First of all I’ve updated the theme’s code so the HTML out­put is cleaner. Nobody cares, but I do.

Then, I’ve devel­oped a func­tion­al­ity that will allow me (and oth­ers?) to make this blog more active: Link dump. It’s still empty for the moment, but don’t worry it should fill quite quick!

Basi­cally it allows me to only post links and mys­te­ri­ous titles… No extra words, no image, just a sim­ple link. Click at your own risks.

These links will also pop in your feed reader and to make them look dif­fer­ent their title will be pre­fixed with a funny ∗ char­ac­ter. This is also true for the blog, here’s how it will look like:

Link dump previewYou’ll still be able to com­ment on the links like you do on reg­u­lar posts…

Glad to be back!

eduMedia ’08

We have just updated our site!

We’ve been work­ing on this new ver­sion for about 9 months and now it’s here. The URL hasn’t changed, but the site has!

Let me show you what’s new…

Before/After

The site used to be designed for 800×600 screens, it is now for 1024×[anything], so the UI is wider and not as high as it used to be.

First thing you can notice: the blocks hold­ing the thumb­nails have been through a diet! Many UI ele­ments have been removed for cleaner and sim­pler nav­i­ga­tion. Here’s a quick comparison:

All of the but­tons have been removed but the func­tion­al­i­ties are still here, they’ve just moved to a more log­i­cal place. Also, the cross that indi­cated that you where not logged and had only par­tial access to the sim­u­la­tion is not here any­more. This lim­i­ta­tion is now shown with semi-transparency of the thumb­nail and its holder (not present in this screenshot).

The login form (at the top of every page) is now hid­den and acces­si­ble via a click on the “Log in” link. No extra click, though: your cur­sor will jump in the field automatically.

You now have a direct access to our tree at the bot­tom left of the home­page, faster! You can also search, with suggestions!

We worked on icons to illus­trate the header’s menu items.

On to the browse page!

Not much to say here, sim­pler, clearer, nicer. The RSS feed is clearly shown and you can sub­scribe to our newslet­ter, this is new!

We used to have a 3×3 grid of thumb­nails, we now have a 5×2 one. That’s less pages to browse in some cases!

The media page

It used to be a popup… Nasty. We all decided to avoid it and go for a reg­u­lar page.

The big new thing here are the price but­tons. We used to be quite shy about our com­mer­cial activ­ity. We now fully admit it, which is a good thing!

You can notice the “age bar”, allow­ing you to know who the sim­u­la­tion is intended for. Another new thing is the sug­gestor: sim­ply click on it and you’ll be sug­gested sim­i­lar simulations.

Again, icons. In the tool box:

Every other page has changed, but I’ll let you go and see that on your own! The biggest reworks have been the sub­scrip­tion or the “about us”, if you’re interested.

Our sim­u­la­tions

Not only did we change the UI of the site, we also redesigned our simulations!

Switch­ing from a dual color theme (blue for light sim­u­la­tions, orange for dark ones) to a sin­gle an more uni­ver­sal gray one. Every com­po­nent has been rethinked, here’s what what they look like:

A tech­ni­cal point of view

Of course to end up with this UI and func­tion­al­i­ties, you need some lines of code. Here’s what lies behind the site you see when browsing:

  • PHP5: my favorite back end lan­guage, in its last sta­ble version,
  • Post­greSQL: I’ve always pre­ferred it to its more famous friend MySQL,
  • CSS, lots of them. With Eric Meyer’s reset,
  • JavaScript, based on the nicest lib: MooTools (for Ajax and visual effects),
  • swfob­ject, to embed Flash files the right way,
  • TwinHelix’s PNG fix. Because we love 24 bits trans­parency but some browsers don’t.
  • A pimped out ver­sion of the PHP Lay­ers Menu Sys­tem, for the tree,
  • AMFPHP, for Flash remot­ing in PHP,
  • Action­Script 3 and Flash, to make things move!

And to write those lines of code, you’d bet­ter have good tools! Here’s what we used:

Of course we also used Illus­tra­tor and Pho­to­shop, for the graphics.

Clap, clap!

Heads up to the team, I think (and hope) we did a great job!

As always, if you’ve got feed­back please drop it there or on the site’s ded­i­cated page. We love feedback.