brunobergher::blog

I’m really proud to officially launch my friend and fellow designer Liana Nigri’s portfolio website, fully designed and developed by yours truly. The site has actually been up for a week now, but I just managed to sit down and write a post about it.

Liana approached me in need of a very simple website that should showcase some of her projects as both textile and graphic designer, while focusing on the former. She has a great body of work on textile patterns developed in some big Rio de Janeiro fashion houses as well as her current studies in London. Her main goals was to have a place where she could point new contacts to, and to have something she could edit on her own.

The result was this cute little website, highly interactive and inviting, which, as far as Liana has told me, is doing well towards some very specific goals of hers.

Backend developing was made as simple as possible—considering the big proportion of images vs. text content—and I chose a basic PHP/XML structure to handle the data. There’s a simple experimental admin tool (Liana is my friend, she told me I could test some new stuff with her) with lots of drag and drop functionality, which I plan to write about in a future blog entry. In the next few paragraphs, I’ll try to write a brief summary of the main considerations of this project.

Getting the design right

Liana’s line of work is mostly of colorful, vibrant, complex images, full of detail and interesting shapes and arrangements. Almost all of these images are repetition-based patterns, which can only really be fully understood and appreciated when visualized in side-by-side repetitions.

I realized then that I should create a design that was the least obstructive as possible allowing Liana’s work to shine without being obscured by the site interface. The result was this very simple interface, very application-like, which allows the user to see the patterns in a variety of sizes, zooming in and out as desired, and dragging them to get the best view. And even allowing the main window to be dragged around to get the best framing possible.

Since the site design itself was so minimalistic (in both quantitative and qualitative senses), the execution was pretty simple, with some nice use of CSS and lots of unordered lists, in 100% valid XHTML, no question about it. The central point to execution was adding interactivity.

Getting the interaction right

In order to have the level of interactivity I wanted, I certainly had to turn to JavaScript. Flash was available but was not adequate in some other aspects, mainly time. And considering the website has a 100% visual goal, the use of JavaScript became a non-issue regarding browser accessibility considerations.

There was no doubt I’d use the great jQuery library, to which I’m a huge fan, but there seemed to be a lot of UI to develop. jQuery UI to the rescue! This is a great set of extensions and plugins to jQuery which allowed me to include some advanced functionality, such as the resize slider and the background dragging. There’s no question my job would be infinitely harder without this.

jQuery also helped me add some animation to parts of the interface, and the AJAX-candy in the contact form.

From that point on, the frontend process became basically of adjusting some minor details, and getting on to developing the backend and administration.

Handling of images and javascript files

Liana’s site is very easy on the server: no database access, no complex calculations on the back end; but there are a lot of heavy images (to get the details right, some pictures are 500+ KB) and a lot of JavaScript, which could make the site very heavy to load. Fortunately, I developed these two simple scripts, on which I plan to get back to in a later article, which negotiate this heavy lifting.

One of them handles the resizing of max-size pictures in the server to the needed smaller sizes, generating cache files which can later be served directly, with no image processing on the server.

The second one handles just-in-time, server cacheable cacheable, javascript compression, which groups all of the needed scripts and then compacts them using Dean Edward’s packer port to PHP by Nicolas Martin, dramatically reducing the final file size and the number of requests needed to load the page. There are some current issues with browser caching with this script, which I intend to correct soon, and then release here.

Summing up

It’s been a pleasure working on this project, and I hope it goes on to fulfill it’s owner goals. If you have any comment, question or find any bugs, please don’t hesitate to comment here or contact me.

Since the beginning on November, Paula Scher has been exhibiting her latest painting work in Maya Stendhal Gallery, in New York. Great work.

It may be old news to some, but it’s quite a discovery for me.

I’m amazed with the density of information Scher conveys in her paintings, exploring very diverse aspects of the regions she is depicting in the maps, from income differences in New York City to the population composition of cities in the Middle East.

It resembles very much a lot of generative art projects, only made by hand. This brings a subjective and case-by-case kind of approach to the details that allows her to choose what to bring forth in a way a algorithm most probably couldn’t. Not to mention the infinitely more interesting texture that her brushstrokes produce, compared to the frequently dr—though frequently beautiful—results achieved with the computer.

On the other hand, the work has a very solid conceptual basis. From the exhibition essay:

“These are absolutely, one hundred percent inaccurate,” Paula Scher declares of her colossal map paintings. Then, after a pause: “But not on purpose.” Another pause: they’re actually “sort of right.” And therein lies their bracing paradox. Scher’s sites—Manhattan, Israel, and India among them—are instantly recognizable. Scanning the allover expanse of the canvases, you might easily pick out the swath of Central Park, the void of the Dead Sea, the dot of Mumbai. But they are also highly interpretive. The colors and graphic styles allude to loose, mostly media-fed impressions. Consider Middle East, where black paint predominates, reflecting both the dire conflict in the region and the oil underlying it.

If you know where to get more information about her art, and about other people that carry on projects similar to this in any level, please comment below.

I also dug up a link to a previous exhibition she did, with similar work, back in 2005, at the same gallery.

Via Visual Complexity.

Update: Erik Natzke does something that might be the other way around: Flash Paintings. Those are pieces of Actionscript generative art which end result get’s very close to the texture of acrylic or oil paint. Definitely worth the visit.

Just writing as a personal note and hopefully as help to others: I’ve just spent quite a few minutes struggling with a deploy package for a PHP site which worked in my machine and not in my co-workers. Debugging the HTTP responses with Fiddler we realized the problem was with the BOM—or Byte Order Mark—, three bytes of non-printing characters that sometimes are added to the beginning of UTF-8 encoded files by some text editors. These are \EF \BB \BF  in hex and usually printed as  when converted to ISO-8859-1 (in UTF-8 only, the Wikipedia article shows the differences among this and other Unicode enconding).

The problem was that a cookie was not being set by the PHP app because the BOM was being sent before the cookies, so the setcookie() function returned false, since it cannot send a cookie after any output has been sent to the browser, because of HTTP protocol restrictions.

We just could not figure out what was causing that, since the exact same set of files was being used in both my machine’s and my co-worker’s installations.

It turned out the problem was in the main configuration file, which had to be edited by him to make the application work on his machine. He used EditPad Lite to alter the configurations, and it seems that, by default, this program does add the BOM to the beginning of UTF-8-encoded files. So, if you use EditPad Lite (or maybe the Pro version), I surely recommend you should change that option upon installation.

The CakePHP just announced the new release of our favourite PHP framework.

They show some cool new features, some of which will come very handy in a new project we’re starting at work. So I’ll have a chance to try this new stuff, and hopefully will be able to post some impressions here.

Now… let’s bake!