W-Architectures

"W-Architectures is an architecture and urban-planning agency. The firm brings together a highly-qualified team of architects with international experience." This is how they introduce themselves and I couldn't have said it better myself.

I recently published their brand new website, designed by Christelle Bonnet and developed 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 WordPress and MooTools to develop it. Everything was designed to be light and subtle, I think I can safely say that it is.

le bureau baroque

As a freelancer I mostly work on AIR apps, but when friends asked me to develop their new website I happily jumped aboard!

Le bureau baroque is an architecture agency in Bordeaux; playing with art, design and — of course — architecture. They're the ones that set up the Pecha Kucha event in Bordeaux 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 considered a few options but quickly came to the conclusion that Indexhibit was exactly what we were looking for. But one thing that was really bugging us is how most (if not all) Indexhibit sites look the same. Indeed they're a great way to show big images and the navigation is damn simple, but hey, why not keep these great qualities but in a more original layout?

Since we're really keen on horizontal layouts we went for this. But something bothers me with this: you get a horizontal scrollbar at the bottom of the page; which is hard to see, because it sits at the bottom of your screen and we — dumb humans — are not really used to it. So I thought: why not have a horizontal layout scrolled by a vertical scrollbar? That seemed a bit tricky at first, for two reasons:

  1. Is that technically feasible?
  2. Isn't that too weird, for the end-user?

Both questions could not be answered without trying, so I tried. And it looked cool!

When the prototype was ready I started taking a look at Indexhibit's guts; and although it looked a bit ugly to me, I realized pimping it was no big deal... A few e-mails and burger-meetings after we were happy with the newly created theme. Christelle Bonnet 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 concept and tell me what you think!

AIR Application Updater: switch to the 2.5 namespace

I just wasted a few hours on understanding how to update an AIR app from the 2.0 namespace (or earlier) to the brand new 2.5 one. As you may know, two new tags have been introduced ("versionNumber" and "versionLabel") to replace the old "version" one.

To avoid breaking things you have to create an intermediary app version 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 version 1 to version 2, an intermediary update step must be added as follows: application version 1, packaged with AIR 2 and using the 2.0 namespace gets updated to: application version 1.5, packaged with AIR 2.5 and using the 2.0 namespace. This version of the application must include the version of the Application Updater SWC/SWF included with the AIR 2.5 SDK. This gets updated to: application version 2.0, packaged with AIR 2.5 and using the 2.5 namespace.

Where "application 1.5" is the intermediary step.

All of this looks quite simple but really it isn't; or at least it wasn't for me. To be really explicit here are my 3 application descriptors and the update descriptor (version numbers changed to match Adobe's example).

Application descriptor – Version 1 (packaged 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>

Application descriptor – Version 1.5 (packaged 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>

Application descriptor – Version 2 (packaged 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 descriptor (PHP script receiving the caller's current version as "currentVersion" 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 simple, right? And this is not only annoying to the developer, but also to the end user. He will be notified of an update from version 1 to 1.5 and when he's done he'll get prompted about the new-new version (2): bang, another update process.

If you're curious of how I send the app's version to the update descriptor, here it is:

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

The App class is available in my as3bits repository.

Some helpful links on the subject:

I hope this helps!

eduMedia’s eBox

Guess what? AIR app! This one's for eduMedia.

An intro

We create and distribute pedagogical simulations and videos, and our school users can download them to prepare and illustrate their lessons. Until now we offered server-side generated ZIP files with an HTML, some CSS and the SWF, but users (who often are not computer geeks) wanted something simpler and more powerful... So we designed the eBox!

The eBox

Basically the eBox is an empty media library waiting to be filled. The first time you launch it, it installs itself (and the AIR runtime, if not already there) and then fills itself with the medias you chose. This happens thanks to AIR's BrowserInvoke logic and removes the "Save As" and "Uncompress" steps.

You can also fill it with "local medias" (of any type) but dragging and dropping files on it, or by browsing and selecting 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 ability to create directories to organize your library, and to reorder medias (via drag and drop). Pretty common, but cool.

Let's talk tech

Flex 4.1, localized with Lupo (now free and OpenSource!) and designed with Illustrator. Server-side communication is made through AMFPHP. I used some tiny techniques that helped deploy two different versions with only one project (we have a school and an individual version), I might detail that in a next post.

This is my first real-life project with Robotlegs, it helped me learn how to use it and how to write really clean code; with view, mediators and all. I loved it and think I will continue building 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 technical points of view. Go grab a free media and tell me what you think! We also set up a special page with a nice presentation 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 visually. 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 probably reading this from your RSS reader you should definitively come by and see how it looks. And share some feedback, if you feel like it.

Can't remember what it looked like before? I've archived screens over at Flickr.

A consistent look

Updating the blog's look is good, but a complete rewrite is better; for consistency, fool! I used to have a different look for every single page: home, projects, blog and so on. No more.

Long story short:

"Before: all different. Now: all good."

I've been into grids since the day I learned about Bluepint CSS and Josef Müller-Brockmann, this is why I wrote Boks. And this is why this site now heavily relies on a grid structure. For grid freaks out there, click here to toggle 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 different, but we'll get into that later.

Got a keyboard? Like shortcuts? Press that key!

I implemented a few keyboard shortcuts, from useful to useless. For example, if you liked the grid toggle, just press G (for grid) or W (for InDesign users) and you'll get the same effect. OK, that one is pretty useless.

But what about scrolling to the next article by pressing N (or the Down key)? And you guessed it already, P (or Up) will jump to the previous (inspired by AisleOne). You can also time-travel by pressing 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 discovered that technique on Hicksdesign and immediately thought I had to implement that: CSS Media Queries! The thing is pretty easy, you define your base CSS styles and then overwrite some declarations if the screen size matches some rules... I implemented 3 different layouts so the site should look good on about any device. Just resize your browser window 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 awesome

  • I've always wanted to use Webfonts 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 "Subtle Prompt". It happens when you use a keyboard shortcut or when you click the Contact link...
  • If you're on a WebKit browser (Safari or Chrome) you should see custom scrollbars, styled with CSS. Yeah.
  • I kind of don't support Internet Explorer. Yes, this IS an awesome feature!
  • Trackbacks are now separated from regular comments.
  • A blog post's author (my) comments appear differently, so you know who's the boss out there.

OpenSource

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

  • LazyScroller: turns your keyboard keys into a navigation dashboard.
  • SubtlePrompt: nice and gentle prompt for your sensitive users.
  • Lblr: form input in-context labeler.
  • ta-bg: allows a textarea's background image to scroll with its content.

I'll try to post docs/demos soon, I know this is probably a little 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

WordPress' Shortcode API is a really cool thing, and since I'm working on a Drupal site these days I've been looking for something similar. Unfortunately I couldn't find anything... There are some implementations out there but the ones I found and tested always come pre-bundled with specific tags and don't always provide an extensible and stable logic.

So I made mine!

Most of my work simply consisted in copying/pasting the code in WordPress' shortcodes.php and binding it into a Drupal filter. Easy enough.

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

  1. Get the module
  2. Add it to your "modules" directory
  3. Enable it
  4. Add it to one of your setup's filter bundle
  5. Write your own module where you'd implement one or more Shortcodes (via add_shortcode) and make sure you add "dependencies[] = shortcodes" in your .info file

You might experience a nasty "Call to undefined function add_shortcode". If so, you have to change you module implementation's weight, either directly in your database, or thanks to the cool Utility module. Set it to 10 and you're set!

Ébruiter²

Hop, je viens de payer des nouveaux habits à Ébruiter (le blog qui parle de musique à ceux qui ont des oreilles) qui ne se plaisait plus dans son premier ensemble... Grid system, bien sûr. Toujours WordPress, avec un thème maison (merci Boks et Greg) et des hacks par-ci par-là.

Ebruiter²

Et puisque finalement j'aime bien le concept, je vais essayer de reprendre l'habitude de poster des trucs. Ça va être super.

Chope le flux, poto !

Snips2

Remember my first and only WordPress plugin? Well it just got better.

Snips2

Snips 2.0 is basically Snips rewritten from scratch, updated to fit WordPress' Shortcode API. Let's see how good it is...

Tired of having to copy paste nasty HTML code from sites such as YouTube, Vimeo and so on? Looking for a way to insert recurrent content in your posts without having to type it every time? Would like to be able to inject parameters in these snippets? Well, now you can.

Just install Snips and use the bundled shortcodes or create/edit your own!

Each Snip is a combination of a name, a model and optional parameters. The name defines the shortcode tag you will be able to use, the model is the content that will replace your shortcode calls and the parameters (that look like #the-parameter# in the model) are portions of the model that can change from a call to an other. Those parameters can have default values or can be left empty and then become mandatory.

All of this can be edited via a simple UI, found under Settings > Snips... Here's screenshot:

Snips2 screenshot

For those that used Snips' first version: (0.2) everything should be OK, the previous syntax will work ; but I recommend using the new one and the corresponding updated model files (ex: yt becomes yt2). Also, the #up# parameter (used in mp3 and swf snips) has to be set manually 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 behavior (for the parameters' detection in the Settings page) so it could act a little weird.

Back on tracks!

Hi there!

I've been quiet for some time because my laptop died without warning... But happily 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 output is cleaner. Nobody cares, but I do.

Then, I've developed a functionality that will allow me (and others?) to make this blog more active: Link dump. It's still empty for the moment, but don't worry it should fill quite quick!

Basically it allows me to only post links and mysterious titles... No extra words, no image, just a simple link. Click at your own risks.

These links will also pop in your feed reader and to make them look different their title will be prefixed with a funny ∗ character. This is also true for the blog, here's how it will look like:

Link dump previewYou'll still be able to comment on the links like you do on regular posts...

Glad to be back!

eduMedia ’08

We have just updated our site!

We've been working on this new version 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 holding the thumbnails have been through a diet! Many UI elements have been removed for cleaner and simpler navigation. Here's a quick comparison:

All of the buttons have been removed but the functionalities are still here, they've just moved to a more logical place. Also, the cross that indicated that you where not logged and had only partial access to the simulation is not here anymore. This limitation is now shown with semi-transparency of the thumbnail and its holder (not present in this screenshot).

The login form (at the top of every page) is now hidden and accessible via a click on the "Log in" link. No extra click, though: your cursor will jump in the field automatically.

You now have a direct access to our tree at the bottom left of the homepage, faster! You can also search, with suggestions!

We worked on icons to illustrate the header's menu items.

On to the browse page!

Not much to say here, simpler, clearer, nicer. The RSS feed is clearly shown and you can subscribe to our newsletter, this is new!

We used to have a 3×3 grid of thumbnails, 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 regular page.

The big new thing here are the price buttons. We used to be quite shy about our commercial activity. We now fully admit it, which is a good thing!

You can notice the "age bar", allowing you to know who the simulation is intended for. Another new thing is the suggestor: simply click on it and you'll be suggested similar 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 subscription or the "about us", if you're interested.

Our simulations

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

Switching from a dual color theme (blue for light simulations, orange for dark ones) to a single an more universal gray one. Every component has been rethinked, here's what what they look like:

A technical point of view

Of course to end up with this UI and functionalities, you need some lines of code. Here's what lies behind the site you see when browsing:

  • PHP5: my favorite back end language, in its last stable version,
  • PostgreSQL: I've always preferred 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),
  • swfobject, to embed Flash files the right way,
  • TwinHelix's PNG fix. Because we love 24 bits transparency but some browsers don't.
  • A pimped out version of the PHP Layers Menu System, for the tree,
  • AMFPHP, for Flash remoting in PHP,
  • ActionScript 3 and Flash, to make things move!

And to write those lines of code, you'd better have good tools! Here's what we used:

Of course we also used Illustrator and Photoshop, 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 feedback please drop it there or on the site's dedicated page. We love feedback.