This weekend saw 2 re-invigoration: Martino Gamper’s website and PlatformTwo.
-
Martino Gamper and PlatformTwo - quick re-invigoration for websites
January 29, 2008 by jerome
-
WeAreBuild.com - AJAX and the round popup
January 10, 2008 by pierreA few months ago, we developed a new website for Build design studio. We worked with Tommi and Marc from Digital Club who art directed and designed the website, and with Nicky and Michael from Build who provided feedback and advises all along. Jerome and I worked on implementing both the publishing system, a custom content management system (CMS), and the templates (pages layout and interactive elements), while advising and checking designs with regard to the constraints of the technology we were using.
When we received the template we drafted a database model to represent and store the information that would be displayed on the site: “projects” containing many “images”, along with a few info pages and what we called “events” to store talks, press articles etc. To build the admin panel of the site we used a set of PHP functions (the CakePHP framework) which abstracts away many common programming tasks required to build a website on top of a database. For example, it allows to automatically generate forms to enter data in a database given a specific database model, or automatically build queries and associate the retrieved data to URLs and web-pages.
We then worked with Marc and Tommi on the implementation in HTML, CSS and Javascript of the templates and interaction they had designed using Photoshop and rough sketches in Flash. There are two main templates, one for viewing collections of projects, like the archives pages , and an other one for viewing specific projects.
The rest of the pages, like contact, press clippings, close up view on images etc. are mostly displayed on top of this two templates in overlays. This is done using a recently popularised technique in website development, allowing to add content to a webpage while it is already loaded on the client side in your web-browser (what most people are referring to when saying “I want AJAX for my website”); in tech terms it is an HTTP request followed by a DOM modification to inject the requested content in the structure of the page.
We used the jQuery javascript library to write the animations and develop the interactive parts of the site. If you are interested in more specific technical details: things are moving fast in the domain of web graphical user interfaces, since we deployed the site I stumbled upon new components that would have rendered our JS programming more simple and efficient, exactly where things had been a bit intricate to figure out. The Live Query plugging released in May 2007 allows to bind event to elements of the page after it has been first loaded and the DOM updated. The queuing support for animations is becoming quite robust, and there is a neat plugin to extend it.
In September 2007, jQuery was extended with a user interface library that provides most of the basic controls of cross-browsers basic graphical user interface library. We spent quite a bit of time fine tuning the templates for different browsers and platforms, but in a way using jQuery is simplifying the process as it provide a unique interface to web browser functions and take care internally of dealing with the implementations which are different across different web browsers and operating systems.
We worked on this project mostly remotely exchanging file via iChat and keeping track of things using GoogleDocs, it went quite well but took a bit longer than we expected due to modifications and adjustments during the prototyping phase; maybe we would have done it with less iterations using more of those side by side nice sessions with Digital Club as we ended up doing with Tommi.
With Electronest, we like to think that rather than specialising in a specific way of doing things or in a certain technology we are bootstrapping existing things to fit into different contexts and develop ideas. We both like this definition from the Oxford Dictionary:
“bootstrap: a loop at the back of a boot, used to pull it on. [usu. as adj. ] the technique of starting with existing resources to create something more complex and effective : her willingness to work night and day in a tiny basement office was evidence of her trademark bootstrap.”
One example is how Jérôme has used WordPress in many different ways in many different contexts. With this site the tools that we picked and tried to bootstrap are coming from the domains of the ‘web 2.0 apps’ (CakePHP, a web framework à la RubyOnRails, jQuery) rather that the domain of blogging, but I think we applied a very similar method: reading source code and how-to’s on the web, trials and errors, trying to understand and reproduce other people ideas and systems and refining with our own vocabulary and rules…
Tags: 36, 37, 39, 40, 41, 42, 43, 44, 45, 46, 9 | Comments (3)
-
Building and designing Digitalism’s Idealistic
by jeromeWe worked with Åbäke on the design of the Idealistic LP for Digitalism, released on Kitsuné. On the way, I discovered some nice things about idealism and utopia…
