Quodis Journal

Making-of: Layers

leo — Wed, 23 Jan 2013 18:15:11 +0000

This lab experiment was inspired by our 2012 minisite and a technique Leo has been using for more than 10 years now, something between multiple exposures and layer masks.

It's quite simple really: take various pictures of a still scenario, from the same angle, where the object you want to repeat is in a differente place at every shot taken. Then just overlay the photos on your favorite photo editor, and mask in the parts you want to repeat.

With time you'll learn how to avoid shadows, overlaps (oh hair!!! how we hate you), reflections and so on. Give it a try!

About this project

We started with an 1 hour-long photo session with our Canon EOS 600D with remote. 57 photos taken.

After 17 Photoshop hours (CS6, but you really just need layers for this), we ended up with 91 individual items cut out.

Possible combinations: 1.795.500!

6 more hours of design in illustrator (with gorgeous IcoMoon icons) and 20 hours of responsive front-end development, we had all 91 images in 7 resolutions:

	Standard width	Retina width
Huge	2880px	No retina iMacs yet...
Large	1440px	2880px
Medium	720px	1440px
Small	360px	720px

Total image folder size: 169 MB, loaded on a S3 Bucket and served through a Cloudfront Distribution.

The complete code can be found on GitHub.

UI tips: you can click on each seat to loop through the photos, and each composition generates a unique, shareable URL.

Time to play!
layers.quodis.com

Teaser:

This lab experiment was inspired by our 2012 minisite and a technique Leo has been using for more than 10 years now, something between multiple exposures and layer masks.

Image:

Trend Map - Lisbon

leo — Mon, 29 Oct 2012 20:22:40 +0000

For the 200th issue special of Web Designer magazine, Quodis prepared some info about lovely Lisbon and its emerging web community.

Quodis, our work and some tips for enxt time you come to Lisbon were featured together with a list of nearby design agencies we also recommend:

To read the whole thing you'll have to buy the issue, but the short version is that Lisbon now has an emerging web community, fueled by startup incubators, their offsprings, and a growing list of inspiring world-class events.

The best way to meet the community still is to attend Florida After Seven, the monthly gathering organized by Quodis.

Teaser:

For the 200th issue special of Web Designer magazine, Quodis prepared some info about lovely Lisbon and its emerging web community.

Image:

Lisbon Digital Week

leo — Wed, 18 Jul 2012 11:31:33 +0000

Quodis is a proud sponsor of the first Lisbon Digital Week, to take place at the end of September.

It's a collection of events around all things digital, from developers to designers. The three major events are Refresh LX, LXJS and the local WordCamp. We'll of course take part on each one of them, even making sure we return earlier from our trip to Berlin.

To top things off, we joined the first Lisbon Digital Week with our monthly after-work meet up Florida After Seven and iths 14th edition, a place to meet the community. It'll take the role of LXJS's pre-conference meetup, and a nice mid-week get-together of all you digital crowd.

More details on the FA7#14 closer to the date - but it's free to drop by, and no registration required. So book the date!

Teaser:

Quodis is a proud sponsor of the first Lisbon Digital Week, to take place at the end of September.

Image:

Join us at LXJS 2012

leo — Sat, 02 Jun 2012 19:45:51 +0000

This September Lisbon will host its first major Javascript conference, and Quodis couldn't miss the chance to contribute. We launched a mini website for LXJS and will of course be proud attendees.

To be held during two days at a romantic venue on one of the cities hippest areas, and with an impressive line-up, this is a great excuse to come visit our city.

All the info can be found on their website. See you there!

Image:

Watermelon

leihla — Wed, 04 Jan 2012 14:36:09 +0000

We recently launched the website for Watermelon, a vibrant Portuguese company that creates entertainment content with branding potential.

Goals

Watermelon challenged us to create a new website to get in touch with their friends and clients. They wanted a space to showcase their work, team and ideas and asked us to think of an insteresting way to capture the life of Mr. Watermelon (their mascot).

Solution

We wanted to create a dinamic website that reflected the Watermelon essence, where people were able to access content in a fun and easy way and could always be up to date with the latest news about Watermelon.

The idea of a stream of content came to mind as a way to mark Mr. Watermelon's important life events. And with Facebook playing a huge role in the way people and brands connect and interact with each other, we took some inspiration from their timeline and decided to create one for Watermelon as well. So now, Watermelon's life is easily uncovered with the help of the new timeline and some nice content type filters - team, work, dreams and fun moments.

Technology

Powered by Wordpress, we used HTML5 for markup, CSS3 for styling and some Javascript to tie it all together. We also used canvas in the drops animation of the colored stripe.

Image:

Happy 2012 after a great 2011

leo — Tue, 03 Jan 2012 18:31:09 +0000

All of us at Quodis, including our robot servant, wish you a Happy 2012. In case you haven't yet seen our card, you can play with it here.

Before we take on 2012, we like to look back at what happened in an amazing 2011:

In May we celebrated our 10th anniversary with a memorable (although a rather blurry memory towards the end) party at our office.

Throughout the year worked on a ton of inspiring projects for our clients in and outside of Portugal. Some of them:

Concept, design and development of the Firefox Twitter Party for Mozilla (campaign offline, write us for a demo)
Hide My Ass complete redesign
UX and UI for an Android App soon to be launched by Novabase
The brand-new The Lisbon MBA website
Design for IBS and INDEG faculties (ISCTE university)
Go Sticky, our own Labs experiment now on Facebook
Complete new website (including mobile version) for Queer Lisboa, Lisbons oldest Film Festival

Some of us went on to fulfill their own awesome projects and dreams: Alex is working on Manybots, Valentin on Etamin Studio, Luís moved to London and NDP, as did André (London is clearly a hot spot!) to work at EF.

Others joined us as part of their quest: Bruno from Aveiro and SAPO Labs, and Jan (our first Dutch team member) from Near Interaction.

We also spent two deeply inspiring (and equally fun) weeks at a solar-powered beach-house in southern Portugal, had seven successful editions of Florida After Seven (our monthly after-work get-together for all things web, design & co), and Liberdade 229 is thriving through its super diverse and engaged coworkers.

So although we're sad that 2011 came to an end, we're eager to tell you about all the cool stuff we'll be doing in the next 12 months.

Thank you for reading, and Happy 2012!

Teaser:

All of us at Quodis, including our robot servant, wish you a Happy 2012. But before we take on 2012, we like to look back at what happend in an amazing 2011.

Image:

Server Monitoring made easy

bruno — Mon, 02 Jan 2012 12:38:18 +0000

Managing a remote server can be hard. You need to perform regular maintenance, make sure everything stays up, monitor server load, disk usage, database usage… you get the point.

If you however scale that from one lone machine to five or ten, you can quickly find yourself running out of precious time for watching cat videos on the Internet. And that is simply unacceptable.

Here at Quodis we had the same problem: keeping up with about six servers everyday got old really fast, so we decided to set up a networked monitoring system.

This monitoring system's job has two primary functions: make sure everything stays up and running (and, in some cases, email the sysop) and log every single bit of useful data for future analysis. In order to accomplish this we decided on two different open-source tools: Monit and Munin.

Monit, the watchdog

Monit allows you to define a set of conditions for different services running on the machine, and perform tasks once those conditions are reached. Some common examples:

Apache is misbehaving, and your sites are quickly becoming unresponsive. Monit can pick up on this and restart Apache for you. Crisis averted!
Your available disk space is getting low, and that might cripple your system because your app really depends upon writing some files to the disk in order to run. Monit can alert you by email once disk usage is over a certain threshold, so that you can avoid your app having to go down.

We set up a Github repository for Monit that includes installation instructions as well as a sample file containing several general-purpose recipes (which express a set of conditions and instructions in case they're matched) to make setting up new machines easy. Just clone the repository, follow the instructions and adjust the recipes file to your server's specific needs.

Munin, the observer

While this sort of responsiveness can certainly be adequate enough, you might find yourself needing to dig a little deeper to find the root cause of an issue: enter Munin, a very detailed logging service that records as much system data as your heart desires.

Munin works best in a master-slave setup, with several nodes (or servers) reporting to a single master instance that compiles and generates all the data. The data is output as simple HTML files and the graphs are all simple images, which makes Munin fast and just work out of the box. If you dig deep enough, it's even themeable. Here's the theme we use and that you can see in the screenshot below:

Wrapping up

Setting up a system such as this is easy nowadays, and keep in mind there are a lot of other solutions besides the ones presented here; Nagios, for example, is a pretty popular choice among system administrators. Just make sure your setup allows you to act quickly when (because it will) disaster strikes, while letting you dig down deeper to find the root source of the problem.

Other cool resources

Setting up Munin on a Linux machine
htop, an interactive process viewer with a lot of bells and whistles
The Devops newsletter, a weekly email digest with lots of resources and discussion on the topics of system operations.

Teaser:

Managing a remote server can be hard. If you need to monitor more than a few machines, it gets old really fast. We had the same problem, so we set up a monitoring system for all our machines.

Image:

Improving CSS3 animations on iOS

bruno — Wed, 28 Dec 2011 13:43:19 +0000

If you're developing a web app for users on iOS, there's a pretty good chance you're using CSS3 to power your interface animations. The performance and battery life improvements over traditional Javascript-powered animations are well worth the switch.

Although they're arguably one of the best features of the Mobile Safari development platform, regular CSS3 transitions are severely gimped from the get-go. By default, the engine uses software to render CSS animation instead of offloading the task to the GPU. This tends to produce somewhat stuttery animations, especially as your objects get more complex by adding shadows and overlaying them on top of other objects or backgrounds.

Take a look at this test-case (preferrably on an iOS device) using a regular CSS3 transition to animate a change to a rectangle's "top" property.

So how do we make non-choppy animations? How can we force Safari to use the GPU to render animation instead of doing it in software?

Translate3D to the rescue! Instead of manipulating the "top" property of an object we'll actually use a 3D translation on it's Y axis, moving it by the same amount of pixels down. Here's the demo.

You can view and edit the code on both test-cases by using the little edit button at the top right corner of the page.

Unfortunately there is a potentially huge drawback to using the 3D translation technique. In order to apply a 3D transform, the engine must turn the object into a bitmap texture, which means that text-heavy elements can become blurry, especially if they're placed on top of other complex objects - think text on an animated modal window, for example.

If you've ever wondered why your CSS transitions were so laggy on iOS devices, there you go: just make the hardware render the animations and they'll be buttery smooth.

Teaser:

Are you using CSS3 to power your interface animations and wondering why performance is sometimes very poor?

Image:

Now hiring: An awesome web developer

leo — Mon, 06 Jun 2011 21:01:00 +0000

(Update as of August 2011 - we've found our awesome developer. But do send us your application, we're always happy to meet amazing web designers and developers).

One of our developers is going to live abroad, and we're looking for a full-time web developer to replace him. You must have great passion for the web and a deep knowledge of its technologies, to join our team in Lisbon, Portugal. Personally, you should be an autonomous and reliable team player, as well as an enjoyable human being. Technically, you should care deeply about elegant code, beautiful design and usability.

What's in it for you?

Zero bureaucracy, challenging projects, being part of all the decisions, flexible working hours, an awesome team, an office space with unique access, location and coworking environment, ping-pong, gaming and overall geekness paradise.

Profile

We quickly learned there's no such thing as a perfect profile - the best match always turns out to be the one we weren't looking for. So these bullets are just some of the things that might come in handy:

You can and want to handle Drupal and/or Wordpress projects
You're not afraid of, and will tackle some, PHP and/or RoR
You can make Javascript dance
You're fluent in XHTML/CSS and designer-friendly
Projects like these make your eyes sparkle

Last details

Web presence, open source projects and/or a portfolio can - and moste likely will - be more important to us than your academic qualifications and professional experience. A good level of English and/or portuguese are a must.

Interested? We can't wait for you to tell us why!

Teaser:

Quodis is looking for a full-time, design-aware web developer, with great passion for the web and a deep knowledge of its technologies, to join our team in Lisbon, Portugal.

Image:

Going to UXLX

bruno — Tue, 24 May 2011 22:55:41 +0000

The UXLx is a newcomer to the conference scene, but after only two editions it has now established itself as one of the premium European User Experience conferences.

This year I was lucky enough to attend, and believe me, dismissing it as the new kid on the block is a gross oversight. Unfortunately, I only managed to attend the last Conference day, with the two previous days having been chock full of interesting and practical workshops. It certainly didn't help that the Gold tickets - a full 3-day access - practically sold themselves. Still, this last day was packed with top notch speakers who delivered some pretty mind blowing presentations.

The venue in and of itself was great, making good use of the FIL pavilion, one of Lisbon's premium spots for this kind of gig. The organization made sure everything went smoothly (and deliciously too, as the catering was great) and even provided a couple of fun card trading games (Get Mental Notes was my favourite) in the swag bag, which proved a good ally in breaking the ice when networking opportunities came up.

On this last day, the speaker lineup was nothing short of fabulous, and actually made me a little starstruck. The stars of the show may very well have been Don Norman (he wrote "The Design of Everyday Things", just in case you've been living under a rock) and Louis Rosenfeld (of "Polar bear book" fame) but they were matched all the way by fascinating speakers such as Christian Crumlish, Kristina Halvorson and Nick Fink.

Lou Rosenfeld kicked things off to a good start with a great talk on going beyond user research by using the power of analytical data and by making different departments work together to achieve user experience excellence. The message was that intercommunication is key, and that different people going out of their comfort zones can achieve great things.

Christian Crumlish came after, delivering a heartfelt talk about letting design give users room for play. The thing to take away is that we as designers should relinquish full control of the experience, instead providing users with a framework with which they can develop their own stories and curate their own experience. He mentioned Twitter as a great example of an experience whose users either make or break, tuning it and curating it in their own different ways. Hey, the dude even played the ukulele!

Nick Fink talked about how important cross channel communication is to the user experience of a brand. Paraphrasing Nick, "customers don't think in terms of channels. To them, it's a unified experience". Nick backed his talk with lots of detailed examples where the brand either got it right or absolutely crash and burning wrong. Netflix was the best example on how a cross channel experience should work. I wish it came to Portugal...

Kristina Halvorson, a widely known Content Strategist delivered a laughter infused introduction to her craft, explaining through detailed examples how even an otherwise sound web strategy can come crashing down when no one is in charge of planning and orchestrating content. "Content is king" so they say, and Kristina drove this point home like few I've seen before.

Jeffrey Veen was scheduled to make an appearance, but as he had to cancel his talk, Josh Clark (he wrote the fabulous Tapworty book) came out and pitted Mobile Native Apps vs. Mobile Web Apps in a glorious cage match; to the victor the spoils. Among a few surprising facts about the mobile landscape I learned that about 70% of Ebay's mobile traffic comes from iPhones, and that Android is targeted at a market almost entirely composed of people wishing their arms were cyborg phones.

It turns out that in the end, both approaches have their pros and cons, and the real winner turned out to be the API: it doesn't matter what you build your experiences with, just make sure content flows freely and follows the user wherever she goes.

Of particular interest was Don Norman's presentation on "Living with Complexity". Don shatters the myth that things should be simple. In fact, people are surrounded by complexity; life in itself is a complex mess and we deal with it just fine. As you grow in expertise at using something your desire for complexity naturally increases. The key is to design things which are just complex enough so that they get people engaged without boring them too quickly or frustrating them too early in the exploratory process.

Don also advises designers to look for hacks, things people do to signify a need for something that was not planned from the beginning (think treadmarks in a park, where there should be a paved walk but there isn't). Besides being a fascinating and engaging speaker, Don's presentation was eye opening in a number of ways, and I'm anxiously looking forward to his next book about this same subject. If you still haven't read "The Design of Everyday Things" and "Emotional Design", seriously, drop everything and go read them now.

Summing it all up, this year's UXLX was all kinds of awesome. I'm super glad to have had the opportunity to attend and wouldn't miss next year's for the world.

Teaser:

The UXLX is a newcomer to the conference scene, but after only three editions it has now established itself as one of the premium European User Experience conferences. This year I had the opportunity to attend and listen to an awesome line-up with names like Don Norman, Lou Rosenfeld and Christian Crumlish. Juicy details on what struck me the most are just a click away!

Image:

Quodis Party Live Photo Wall

luis — Wed, 11 May 2011 21:08:57 +0000

Last friday the 6th of May 2011 was Quodis’ 10th Anniversary party, and for that event, we wanted to give everybody a way to show the photos they took during the party. For that objective we hacked away a simple Live Photo Wall to display photos taken during the party.

The way it works is very simple, any present party animal simply needed to snap a picture and send it via email, additionally, anyone with access to the dropbox shared folder could add and remove photos from their phone or computer.

In this article we’ll share a few technical details about the app we built and how we used services like Tarpipe and Dropbox to create a simple publishing workflow.

The App

The web app itself is composed of two simple php scripts and does one simple thing: gather and process photos so they fit nicely in a grid layout.

Image Sources

The workflow of the app had to be simple and allow for easy management of photos either from a camera or by email.

To satisfy the first requirement, easy management of photos, we chose to use Dropbox. Dropbox allowed us to add and remove photos via any dropbox client(desktop/mobile) simply by copy/pasting the image file over to a ‘originals’ folder.

For the email upload we chose Tarpipe. The workflow we created parses incoming email and sends the attachment to the Dropbox folder checked by the app for originals, upon completing the upload the workflow triggers the image processing php script.

Image Processing and Retrieval

Image processing is done by a php script that invokes the convert binary from ImageMagick and saves the result in the processed images folder. This script is invoked on demand by the Tarpipe workflow as previously mentioned and is also ran by cron.

The browser client polls the server for the list of processed images and decides which to add to the existing grid.

The Setup

The final setup consisted of a 46” tv connected to a laptop running a chrome browser displaying the Live Photo Wall client, the page itself displayed a simple call to action on the bottom right corner and was left running during the whole party. We tried running it off of a Playstation 3 browser but the fade in animations we applied to the new photos were pretty choppy so we decided to use a laptop used for real-life browser debugging.

The server only needs an http server, php and dropbox-cli.

Teaser:

Details about the Live Photo Wall we built for the Quodis 10th Anniversary Party.

Image:

10th Anniversary

leo — Thu, 05 May 2011 11:11:47 +0000

Today is Quodis' 10th anniversary. It's been a decade since we rose out of the 2001-ashes as a slowly and sustainably growing web boutique, eager to learn and perfect our clients' and own work.

Today, as we celebrate 3.650 days of love for the web, we couldn't be more thrilled.

It's not just where we are today that gets us excited, but also what still lies ahead. A neverending landscape of exciting opportunities in all things web-related.

And it's as clear as ever that our mixed skills of design and technology are the perfect ingredient for our clients and ourselves.

This Friday (May 6th) we're going to have a party with all of our friends at our coworking space (Liberdade 229), and you're invited to drop by.

If you can't make it, here's a very special thanks to all of our friends who've helped us along the way, the (quickly growing) portuguese web community, all of our clients and to everyone that was part of our team at some point (Joana, Bárbara, Lívia, Marcelo, Telmo, Mihai).

From all of us at Quodis, thank you for being a part of our first decade, and stay tuned for more. Leo, Ricardo, Luís, Alex, Leihla, André, Valentin, Bruno

A little bit of history

The logo: we quickly went from the initial swiss-flag-like pattern and red to the still existing different shades of blue.

The workplace: in 2001 at Leo's dad office, then the 2003 laptop-frenzy, and finally in 2005 our first office in Chiado, Lisbon. From there we moved to the gorgeous Liberdade 229, also in Lisbon.

Teaser:

Today is Quodis' 10th anniversary. It's been a decade since we rose out of the 2001-ashes as a slowly and sustainably growing web boutique, eager to learn and perfect our clients' and own work.

Image:

Drupalcamp Lisboa 2011

luis — Sat, 26 Mar 2011 21:15:37 +0000

This past saturday 26th the Drupalcamp Lisboa 2011 took place at Lispolis in Lisbon and Quodis was there to learn and hang around the the Portuguese Drupal Community.

We were glad to see the community is doing well with both a high number of attendees and high quality speakers.

The aproximately 150 attendees, new and old members of the community, were able to attend presentations about drupal security, search using Apache Solr, introductions to modules such as Rules or Features, Localization and much more.

We're happy to have sponsored such an event and congratulate the organization and everyone who was able to attend the event. Count with us for the next one!

Photos by Alexandre Romão

Teaser:

This past saturday 26th the Drupalcamp Lisboa 2011 took place at Lispolis in Lisbon and Quodis was there to learn and hang around the the Portuguese Drupal Community.

Image:

Party with Firefox 4 - insights

leo — Tue, 22 Mar 2011 15:32:18 +0000

Today's a special day: Firefox 4 just launched and everyone is invited to join the party.

We're honored to be part of the Firefox 4 launch activities with this latest project of ours for Mozilla. It is a visualization of twitter activity surrounding this special moment, and everyone can join by tweeting with the #fx4 hashtag.

Let us give you a few insights to the party:

Goals

Get the party started! No, really: get as many people as possible to celebrate the Firefox 4 launch in big style by building a huge Firefox logo mosaic out of everyone's twitter avatar. That's what Mozilla challenged us to do, and that's what we've been working on for the past two months. Browser compatibility requirements included: Firefox 3.5+, Chrome 8+, IE8+, Safari 5+.

Solution

Divide the logo into 1.804 12x12 pixel avatars, each representing a single tweet containing the #fx4 hashtag. Each avatar is processed to match it's final position and coloring in the logo. So the complete Firefox logo only exists by the joint forces of the latest 1.804 individual users celebrating the moment. The user can also search for a specific twitter username and find his participation on the party.

Front-end

HTML5 markup, CSS3 for styling, 1.803 DOM elements for the mosaic and a lot of javascript magic to bring it all to life. Our first approach was to exclusively use canvas and base64 encoded images, but the browser compatibility requirements threw that off the table. But rest assured, even with all those DOM elements the performance is still good enough to run it on your iPad, Android or iPhone 4.

Since most of the Javascript work for this app involved some form of DOM manipulation, the excellent jQuery framework was used. We serve it directly from Google's AJAX CDN, fully minified, in order to guarantee the best downloading speed possible.

At first, all the tiles were generated and displayed on the screen at the same time. This generally slowed the experience down to a crawl as a result of overloading the browser UI queue, so by using some smart function throttling we managed to display tiles in evenly spaced intervals of time. Besides dramatically improving the snappiness of the app, this created a cool side effect: The logo was now built progressively, almost as if the Firefox brand was being slowly built by the community.

We also use a lot of event throttling (through basic usage of the setTimeout() function) to handle computationally expensive events such as hovering over the mosaic tiles. Had we not used throttling, just swiping your mouse over the mosaic could very well result in thousands of HTTP requests to the Twitter servers (because of the avatars). Oh, and the browser would eventually lock up.

Back-end

The backend was built on a PHP + ImageMagick + memcached + mysql stack. It relies on 3 separate jobs that perform the twitter search, the image processing and the mosaic building. The main challenges here were to keep this process streamlined, fast, and above all resilient to peaks and image processing errors, while at the same time compressing all images and other downloadable assets.

Localization

The party speaks 30 different languages, thanks to an amazing effort of the team of Mozilla Localizers. LTR and RTL are supported, and although the tweets themselves are the same across all languages, all the remaining interface (logo, date and number formats inclusive) are localized.

The team

On our side here at Quodis this meant a lot of challenges and fun, but it wouldn't have been half that good without the incredible support of everyone over at Mozilla, from Marketing and IT up to the L10n teams. Time-zone differences kept blurring away. Nothing is more motivating than waking up in the morning (or at any other point of the natural daylight cycle, really) and have tons of development done by the rest of the team while you were asleep. Thanks everyone!

Lessons learned

We tweaked and twisted DOM animation performance to learn it's limits, dived deep into ImageMagick and understood all the amazing things happening behind a localization project.

So what are you waiting for? Get Firefox 4 and join the party now at twitterparty.mozilla.org!

Teaser:

Image:

Invitation: Florida After Seven, once a month in Lisbon

leo — Mon, 14 Mar 2011 14:22:45 +0000

Are you in or around Lisbon on March 24? Then you have no excuse not to show up at the first "Florida After Seven" event, a great finish to your stressfull workday.

Once a month, every penultimate thursday, you're invited to join a mix between web, IT, design, mobile, entrepeneurship, and all kinds of web-aware and creative industries related crowds.

We'll have music, drinks, free snacks, wifi and an awesome view from the terrace bar over Marquês de Pombal, Lisbon's both busiest and most beautiful roundabout.

Of course we launched a brand new mini-site for the event, and although it's in portuguese and you might not master our beautiful lating language, Valentin's retro-futuristic illustrations are reason alone for you to visit the website at http://floridaafterseven.com

It's an event put together by Hotel Florida and Quodis, and we would be ever so happy if you would show up (no RSVP required, but do visit the Facebook page) on thursday the 24th.

Oh, and the name of the event most certainly already gave away at what time you should show up :)

Teaser:

Are you in or around Lisbon on March 24? Then you have no excuse not to show up at the first "Florida After Seven" event, a great finish to your stressfull workday.

Image:

Drupal Data Import

luis — Sun, 05 Dec 2010 01:27:59 +0000

Recently, for the Accender Africa website, we needed to import a large amount of data: Projects (nodes) and their locations (taxonomy terms with hierarchy and geo information).

The Setup

First things first, before we can go on, I'll have to explain a bit of the setup I used for the project data.

We have projects (nodes) associated with locations (terms), on the node side there's no special setup besides using Hierarchical Select for the term selection, but on the taxonomy side we used:

Term Fields - to add extra information to location terms like budget, population, etc;
Geo Taxonomy - to add geo information to location terms

For the actual import we used three great drupal modules:

Feeds - for the parsing and creation of the nodes
Data - required for Feeds
Taxonomy CSV - for importing hierarchical taxonomy terms and geo data

Nodes depend on taxonomy terms to be available so that an association can be made, so we'll start with taxonomy import.

Taxonomy Import

Browse to the Taxonomy CSV import page, should be something like /admin/content/taxonomy/csv_import or Content Management > Taxonomy > CSV Import.

There you can change several settings to suit your needs, but for this Journal Entry we'll just cover the basics:

'1. What do you want to import?' - Geotaxonomy
'2. Where are items to import?' - In a local file
'4. Which vocabulary do you want to import into?' - here you should just select which vocabulary you want to import your items into.

You'll notice the module provides information on the formatting of the CSV file, in this case it should be something like 'name, latitude, longitude, parent, top, right, bottom, left boundaries'.

The process is pretty straightforward and after you export and upload the CSV you just need to submit the form for the import process to start, any errors will be displayed after the process is complete, if you ever used the Node Import module the process should feel pretty similar.

Node Import

The node import process is very similar, we'll be using the Feeds module for this and CSV data once again.

After you enable both Feeds and Data modules you can go to /admin/build/feeds/list and create a new importer for our projects. After you name it you need to change a few settings, here's the setup we're using:

Basic Settings - no need to change anything here, it should be using a standalone form and display the name you gave it when you created the importer;
Fetcher - change it to file upload
Parser - change it to a CSV parser
Processor - node preprocessor should already be the default one
- settings - you'll need to specify the content type it'll create in the parser settings, other fields are optional.
- mapping - here you'll have to match sources to targets, you should use the source names as column headers in your CSV file, that way the importer can fo its field mapping magic.

After you have the importer setup, you can browse to /import on your drupal website and select the importer you just created, there you can upload and start the import process.

Summary

And that's it! By leveraging the power of the huge list of modules drupal has we imported thousands of projects and a few dozen locations with hierarchical and geo data into our drupal website.

Image:

One month working and living in Berlin

leo — Wed, 06 Oct 2010 10:17:12 +0000

Our team just arrived back to our charming coworking space in Lisbon after all of us worked and lived for a whole month in Berlin.

Why?

Because all of us at Quodis have the constant urge of getting to know new sights, people and inspiration. So why not join work and leisure and, for a whole month, get to live a normal life in a different city? For 30 days we get to feel like Berliner. So in our case the real question was Why Not?

How?

By renting a beautiful apartment (thanks Pension Liebling) for us in calm Prenzlauer Berg district, and by getting a team table at Betahaus, one of the biggest coworking spaces around.

Expenses were shared between company (for work-related stuff) and our own pockets (for everything else), and we managed to keep the budget relatively low. That's another great thing about Berlin, it's not prohibitively expensive as so many other european mega-cities.

Se we kept working on the same projects for our same clients, with a little more phone and video conferencing than usual (thank you Skype), but that's all there is to it.

And how was it?

Un-be-lie-va-ble. Granted, we've just arrived in Lisbon and emotions are still running high, but we are genuinely impressed by the way of life, of being, by the never-ending and incredibly diverse energy felt in this both historic and yet so young city.

We can only try to imagine how overwhelming this city was 10 to 20 years ago, when all hell (in the best possible sense) broke loose. In case you've been or going to be in Berlin, here's a map of our favorite spots.

Best moment?

Please don't make us choose! But since you already asked, there is one specific episode where the unpredictability helped to turn it memorable: After one hour to get to an abandoned CIA radio-spy-station in Teufelsberg (alone the history of this place is staggering), and another half hour to get to the topmost graffiti-covered antenna for a view over Berlin, we were presented with a contrabass improv right in the center of the acoustic marvel that such a perfect sphere creates. At 80 meters high, and with a window open to the sunset over Berlin. Hard to beat!

Next move?

Geez, give us a break guys, we just came back! No, seriously, we do have some ideas about what places we would like to visit. But for now they're just ideas anyway, so let's settle down and get back to enjoying lovely Lisbon first!

Teaser:

Our team just arrived back to our charming coworking space in Lisbon after all of us worked and lived for a whole month in Berlin. This is a journal entry about this awesome experience.

Image:

Insights about the Firefox Tweet Machine

leo — Sat, 02 Oct 2010 21:13:44 +0000

Introduction

As some of our friends and followers might already know, our Tori’s Eye labs project has got - and still gets - a lot of attention. The good guys over at Mozilla stumbled upon it and challenged us to present them with something both aesthetically and technically inspiring.

Although Tori’s Eye (also a Twitter visualization) was the initial inspiration, it was clear from the beginning that this new project had much higher stakes.

Mozillas initial briefing asked for a visualization that “captures the unique and multi-dimensional nature of our community, their conversations, and the energy that flows through their tweets”.

The result is Firefox Tweet Machine, an experiment with exclusively open web tools and technologies, that works on all modern browsers supporting HTML5 and CSS3.

Conceptual challenge

Right from the start we had the idea that information would flow into the screen through specific filters, allowing the user to control what tweets are ultimately displayed.

This is where we started playing with the usage of pipes representing the channels through which data flows, partly influenced by Mozilla’s use of pipes in their graphic language.

After some initial experiments we pursued the idea of a central machine where all pipes converge and then show the actual tweets in form of bubbles, floating through the screen.

The bubbles themselves could then have variations in size, colors or even in the data they show, giving place to relevant, beautiful or just interesting information.

In later versions, after discussing the project scope and timing, it was decided to minimize the filtering ability (bringing it down to the search box). So the need to have one pipe for each filter (four filters had been planned initially) disappeared, but we kept the graphical concept anyway since it was working really well.

We took inspiration from the 60’s and 70’s handcrafted illustration style for the artwork, which is close to most of Mozillas style throughout their communication.

DOM or Canvas/SVG

There was a big question that took us some time and some experiments to answer: bring the machine to life with regular DOM animation (as we had previously done with Tori’s Eye) or go a step further and do it all in one big Canvas or SVG element (Raphaël was the option to build the whole thing in SVG).

A relevant context to keep in mind is that although experimental, this visualization should still perform relatively smoothly on less state-of-the-art processors. In some way we wanted to find the compromise between experimenting with new, usually more processor-intensive technologies on the one hand, and a acceptable number of visitors that would still be able to experience the result with some acceptable requirements on the other hand.

Arguments in favor of Canvas or SVG were: experiment with new frameworks, smoother animations, and have one big single canvas to draw and animate everything, instead of various DOM elements including images and SVG objects.

There were two main reasons for which we ended up going for DOM animation: First, the simplicity of developing user interaction with the bubbles (hovering, flipping, selecting text and clicking links) along with the relatively complex text rendering is that is hard to achieve using either Canvas or SVG. Second, we found out that there are considerable performance issues when drawing large Canvas/SVG objects with a lot of complex shapes, forms, text rendering and high frame rates at resolutions as big as Full HD.

Physics engine

Most gravity and collision scripts we found would work well with both DOM animation or Canvas/SVG drawing, since it’s all abstract math. Basically the whole 2d world is processed in the scripts, and frame by frame you just loop through all the objects making up your 2d simulation and draw/update them in whatever way you want, be it updating the DOM element’s CSS position or redraw the whole canvas.

At an early stage we started writing a very simple and stripped down version of our own gravity and collision prevention (different then collision detection) script, which basically cut the whole stage into a large matrix and then kept track of what squares of it were currently occupied with objects. But the lack of smoothness, collision impacts, acceleration, friction and other basic physical behaviours made it unfit for duty.

That’s where we chose between Box2DJS and Blob Sallad. The first is a port to javascript (by ANDO Yasushi) from the famous Box2D c++ physics engine, also used by Mr. Doob in a Chrome Experiment. Blob Sallad (by Swedish Björn Lindberg) on the other hand was only applied to drawing directly on canvas, and seemed to us more of a (very enlightening and well documented) academic experience than a ready to use script. So we went for Box2DJS, which allowed us to build a quick prototype using large parts of the code used by Mr. Doob on his Ball Pool Chrome Experiment.

SD/HD switch

The FTM has a SD and a HD version that automatically switch depending on the screen size. This was needed to allow it to work both on regular notebook screens and as a wallpaper on a HD TV, while still being readable from a reasonable distance. The scenario is, for example, a HD TV showing the visualization in a conference reception room. The SD version is what most of users will see on their laptops.

CSS3 Media Queries could have been used instead of creating two resolution-specific CSS files, but since the physics had to be reset and reconfigured when switching resolutions, we opted for a standard javascript-based resolution detection, which then loads the resolution specific settings and CSS files.

HTML5, CSS3

HTML usage follows the most recent HTML5 guidelines. On some of our projects we use html5shiv to turn the newest DOM elements compatible with IE, and even most of the CSS3 properties would at least fail gracefully to allow for an acceptable experience on IE. But the reason to leave IE out of the supported browser list was the animation process and it’s underlying javascripts. Not that it wouldn’t be doable, but at a certain point the implied effort was far bigger than the need to make it compatible with less modern browsers. After all the objective for this specific project was to make use of modern browser’s capabilities.

When we first tested the HD version on a Full HD screen running from a standard laptop, the animation performance was terribly sluggish. After some debugging we learned that this was due to the relatively low performance of the background-size property when heavily used (as in: a dozen of big objects re-rendering at a high frame-rate).

Plugins & tools used

We were desperately looking for an excuse to use Raphaël JS (part of Sencha Labs) for one of our projects. And the little gauge right below the search box, indicating the level of tweet activity for the current search, was the perfect reason. Whenever you do a new search, the gauge (a simple png image) smoothly animates through the Raphaël’s SVG magic.

jQuery is our javascript framework of choice. Even though the pgysics script doesn’t rely on it, jQuery is what allows easy coding for all the interactions. And it allows for most of the following plugins to be used.

ColorBox (by Color Powered) is one of our favorite jQuery plugins to handle light-boxes. Although there are probably hundreds of light-box plugin alternatives, this one is, to our knowledge, the most well-written and robust, and allows for full and easy styling.

Whenever you do a custom search on the machine, a correspondent hash is added to the URL and therefore to the browser history. This is achieved using the history plugin by mikage, and allows you not only to go back and forward through your search history, but also to share a link to the visualization containing your specific search. By looking at tweet mentions of the FTM we noticed that a lot of the URLs shared are actually links to custom searches.

Preload CSS Images by the Filament Group is a jQuery plugin we use to make sure all elements are complete before you get to see the visualization. The “loading” wheel you see at the beginning is actually an animated background-image on the body element. This loading process was only added at the end of the project - until then you would see all images gradually load, and bubbles floating around without background. Funny, but not optimal!

Timeago by Ryan McGeary is a jQuery plugin used on the tweets datetime information. We used this one previously on Tori’s Eye, and it does what it promises: in goes a standard datetime, out comes a human-readable relative date info (X minutes ago).

Topsy provides a simple API and a good data set to keep track of all mentions of a specific URL (and most of it’s shortened versions) on Twitter, giving full control over it’s the styling. We initially tried using tweetmeme, but their retweet functionality requires their service to have Twitter authentication and their mentions page is not as straight-forward as Topsy’s.

Google Font API provides open-source fonts and code, and serves the files directly from their servers. It had just been announced by the time we were making choices, and we had to try it out. We’re happy with it’s results, even if we didn’t use it extensively: Kaffeesatz by german Yanone is being used here and there, and since we already were looking at the Google Font API directory we chose The Lobster Font by Pablo Impallari for the logo.

Server-side

All the data required for the visualization, except custom searches, are obtained through a server that delivers both the settings (which information to show on the countdown, default search, keyword to highlight) and the data (@firefox timeline, default search, number of Twitter mentions, Facebook shares, @firefox followers) in a single json request.

The server also acts as a proxy to allow on-demand requests to Twitter (to get each tweets author profile info) using OAuth. Server-side development was done in PHP, using memcached to cache common requests sent to third party servers.

A simple management console allows the configuration of various settings: default search term, keywords to highlight, keywords to censor, datetime or @firefox followers countdown target and description, versions (allowing to force a refresh on all open visualizations), etc.

The PHP proxy script is based on Ben Alman’s open source php-simple-proxy, the Twitter OAuth requests are made using Jaisen Mathai’s twitter-async php lib, and we are using YAML (via YAML Loader) to save the configuration options.

Conclusions

During the whole project we had the opportunity to interact with dozens of scripts, techniques and resources, always in the rein of Open Source, that allowed us to mash them all up in - we hope - an effective and elegant and beautiful way.

These kind of projects, by their nature of experimenting and pushing forward the capabilities of modern browsers, have a relatively limited life-span as such - but if you put the technical aspects aside, you’ve still got a beautiful and inspiring aesthetic experience.

There’s constant room for improvement, and as we write this we’re still twisting and tweaking things here and there. And that’s what makes this project so interesting: pushing the boundaries on what is doable means you’ll never reach a point of sitting back and saying “this is perfect, let’s stop here”.

We hope you enjoy the final result and are interested in your feedback, don’t hesitate to share your thoughts and ways to improve what is already done.

Last but not least, we had a lot of fun working on such an inspiring project with a great team on Mozilla’s side. All our client’s projects are unique, but doing a project for such a very good friend of ours called Firefox is an awesome honor. Special thanks to Tara Shahian and Michael Morgan for their inspiration and constant support.

http://firefoxtweetmachine.com

Teaser:

We thought some of you might be curious about the process and tools used while building the Firefox Tweet Machine, so we're glad to share.

Image:

Ich bin ein Berliner

leo — Mon, 30 Aug 2010 14:16:22 +0000

We've packed all our gadgets (some clothes too) and are ready to spend September in Berlin. From the 1st to 30th the whole team will be coworking from betahaus in Kreuzberg and living at Pension Liebling in Prenzlauerberg.

Why? Because it will be awesome :) Berlin is probably the most inspiring, creative, cosmopolitan and affordable mega-city in Europe. And we're eager to talk to new people, see new cityscapes, hear new music, and eat delicious Bratwurst, Döner & Co.

According to JFK we're all Berliners anyways: "All free men, wherever they may live, are citizens of Berlin, and, therefore, as a free man, I take pride in the words 'Ich bin ein Berliner!'".

Business will go on as usual for all of our clients, but expect added productivity due to the new environment and overal happiness. Reichstag picture and video above by pilpop.

Teaser:

We've packed all our gadgets (some clothes too) and are ready to spend September in Berlin. The whole team will be coworking from betahaus and living in Prenzlauerberg.

Image:

Newsletter: What a year!

leo — Mon, 02 Aug 2010 13:40:04 +0000

[This post is part of our 5th newsletter. You can see the complete issue here]

We're having a really good time doing what we love and know to do best. It's the middle of 2010, and these past and next few months are full of exciting stuff:

Our coworking space celebrated 1 year of existence
Besides a handful of projects, we launched our own new site
We launched a thrilling project for Mozilla
We're pushing hard to bring life to the StartU movement
In September, and for one month only, we're going experiment and relocate the office to another great city in Europe
Mihai is leaving back to Romania - thank you for the time you've spent here, Mihai!
We found a guy full of skills and passion to join our team soon

This is great news, because we love the way our boutique is working and producing projects with top notch quality for our clients and friends. And more is coming.

All of this only makes sense as long as we are able to help our clients to exceed their own expectations as to how they should approach and use the web for their business. So if you have something in mind where we can help, it would be a shame not to tell us about it :)

Teaser:

We're having a really good time doing what we love and know to do best. It's the middle of 2010, and these past and next few months are full of exciting stuff.

Image:

Welcome to our new site

leo — Sun, 11 Jul 2010 13:39:57 +0000

It's been more than a year since we started sketching and imagining what our new site should feel like. We went from ambitious to positively mad in our strive for perfection, and our clients work always had priority over our madness. That's why we promised launching it "soon" so many times, to the point where we actually just stopped sending out our newsletter (it's been 5 months since our last edition).

Now that we're finally here, and looking back at our initial sketches, we feel it was worth every single day. Not only because this new site shows the visitor who we are as persons, but also because it is way more informative and representative of our work. There are some twists and tweaks still to be done here and there, but we couldn't wait any longer - so let's call it a work in progress.

Now that we're proudly live, the press machines will start steaming again so that our Newsletters proceed to the bi-monthly regularity of before. Hope you enjoy our boutique's vitrine!

Teaser:

It's been more than a year since we started sketching and imagining what our new site should feel like. We went from ambitious to positively mad in our strive for perfection. Now we're live!

Image:

Barcamp Portugal Spring 2010

leo — Sat, 22 May 2010 18:46:48 +0000

Another Barcamp is coming up in Portugal, this time in the beautiful city of Porto. This edition is being organized by some of the same guys that were behind the Talks 2.0 event held in the same city. Talks 2.0 managed to gather a great number and quality of speakers together with an interested audience, in good part thanks to Felipe Ávila da Costa's effort.

Opposed to the usually and "laisser-faire" attitude of most Barcamp events, this one is getting a relatively detailed scheduling and organization. We welcome the experimentation and are curious to see how the changes in the model will turn out to work. This is also the first time Quodis sponsors a Barcamp, and since it's a keep-it-simple event, it's also a small sponsorship

A final note on the list of participants so far. It's refreshing to see some new names, companies and projects showing up. Maybe it's because the crowd in and around Porto hasn't been showing up on the previous Barcamp's & co events, or it's a sign that the pace of new web-related startup projects in Portugal is ramping up. Let's hope it's the latter!

Teaser:

Image:

9th anniversary

quodis — Sun, 16 May 2010 14:10:44 +0000

This month we celebrated our 9th year of existence since Leo registered the quodis.com domain back in 2001, right after completing high school.

It's been nine years where we changed our logo and offices three times, our signature 4 times and our website endless times. A lot of people joined our team, some left, and our skills kept changing to what we loved doing most. All to get to where we are today.

But most of all who helped us evolve were our clients, friends, the open web community and fellow entrepreneurs. Without them nothing would have been this enriching and fun.

So thank you all! And we hope that you will continue to be part of our adventure as another year comes along and new challenges bring our adrenaline to high levels.

Teaser:

This month we celebrated our 9th year of existence since Leo registered the quodis.com domain back in 2001, right after completing high school.

Image:

Conference-season in and around Lisbon

leo — Wed, 17 Feb 2010 23:00:00 +0000

We have full web-related conferences schedule in and around Lisbon this spring, with a mix of long-standing and new conferences promising tons of inspiration and workshops. In chronological order:

April - SHiFT 2010

This years theme is Do It Yourself. SHiFT 2010 will bring together the leaders and newbies of the communities which it has serviced in the past 2 editions, with a single purpose: to empower you, so that you can empower others. 16-17th April in Lisbon, very affordable tickets.

May - UX Lx: User Experience Lisbon

Quoting their beautiful website: "3 Eventful Days in Lisbon for User Experience Professionals. Meet a fabulous set of world renowned speakers and absorb their knowledge with thought-provoking talks and in-depth workshops". 12 to 14 May 2009, early bird tickets now available.

May - SWITCH Conference

From their website: "We want SWITCH to be way more than a conference. We want to become a way for you to enlarge your vision of the world, to share your ideas, to discover other's work and to participate creating a global human-wired network of knowledge and ideas. We want SWITCH to be an authentic two-day discovery experience".

June - Barcamp PT - Porto

Another edition of Barcamp, this time in beautiful Porto. More info here.

Image:

2010 ahead

admin — Sat, 09 Jan 2010 23:00:00 +0000

2009 was an amazing year for Quodis. We fulfilled all but one of our to-do list we've sent you January last year (the check on "launch our blog" is missing, but hey, you're reading this!) and even went a little further. 2010 brings us even bigger ambitions, and we'll keep you posted at least every two months about what we're doing and where we're heading. Stay tuned!

But it's not just us: all around the world people, organizations and governments are constantly reinventing the way we read, share information and collaborate over it, and trying to go one step further. One of the hot topics has been:

The struggle of newspapers

For a long time big players in the news publishing industry have been trying different ways - and mostly failing - to monetize their online audiences that consume free news. Supposedly eating-in their offline reader quote. It's not yet time for e-paper, but tablets sure are getting all the hype.

Maybe Apple will be to the newspaper industry what it has become for the music industry and what Kindle failed to achieve: huge user-base and content selection, simple affordable pricing and revenue deals, a usable and attractive must-have device, and the hardware that allows for a full-featured interactivity and multimedia blend that goes far beyond the traditional static offline PDF. And, of course, a already set-up and easy to use unobtrusive billing system.

A little story about Nexus One

While the tablet stays a rumor (as of today), Luís ordered his Nexus One on day One. Because, of course, we need to make sure that your websites work fine on it :) Turns out a DHL-employee wasn't in one of his best days and mishandled the delivery - so we had to write Google for them to send us our Nexus back. Will keep you posted on that!

Teaser:

2009 was an amazing year for Quodis. We fulfilled all but one of our to-do list we've sent you January last year (the check on "launch our blog" was missing, but it's live now!) and even went a little further.

Image: