Update: 31/05/2010

I’m no longer using this technique on the site since the redesign – I’m using jQuery Tools Overlay. The examples below will still work but they use the new overlay library.

We interrupt the travelogues to talk about some geeky stuff that’s been going on around these parts.

I’ve recently been using grids of thumbnails to link to Flickr photos as they relate to blog posts (e.g. my previous post). One thing I’ve wanted to do is find a way to show these images without sending viewers over to Flickr and away from my site for fear that they might get lost (if they are navigationally challenged) or simply be pulled into something more interesting and not return. This would be a good excuse to add a little Script.aculo.us and AJAX sweetness to my blog posts.

What I needed was:

• To be able to embed images into blog posts and just link to my Flickr account rather than hosting the photos myself;
• A list of thumbnails for when there are several images to show;
• To avoid encouraging users to go off-site without resorting to pop-ups and such;
• A JavaScript solution, ideally, but I wanted to avoid adding more libraries (e.g. Mootools) and if possible re-use the ones my already rather bloated Wordpress theme already uses (in this case Prototype).

Solution:

Here’s an example of the end product. Click on the thumbnails…

Plaza de las Tres Culturas

Monument at Plaza de las Tres Culturas

Statue of JPII

Basilica de Guadalupe

Obsidian carving

Temple of the Moon at Teotihuacán

At the Temple of the Sun at Teotihuacán

You can hit escape, click the close button or anywhere outside the box to close the overlay. Mouse over the image and click on previous or next to view other images (when part of a series). Even use keyboard shortcuts (P and N). NICE.

For this I had to use my many and varied skills (such as searching on Google, copying and pasting code snippets, checking my Facebook) to come up with the best solution. The end result was shamefully easy and involved:

• Floating the thumbnails and captions in a grid (using a DL element) was a nice reusable way of displaying the thumbnails regardless of container and text size. TJK Design has a good scalable technique for this.
• Modal windows are becoming a good solution for contextual user interactions when used appropriately. They are becoming fairly familiar to users, especially those who use Windows Vista (where they have the annoying tendency to come up every 10 seconds or so), and are quite appropriate for viewing larger images in the context of a gallery.
• Using AJAX to load the images (as I wanted to load an external image rather than load all the images within the page or launch another window).

I found a few great contenders but I settled on the very excellent Lightbox 2 by Lokesh Dhakar, as it did exactly what I needed, looked good and used prototype and script.aculo.us. If I wanted overlays in general for other interactions or content, I would have gone with one of the scripts previously mentioned, or the very cool ModalBox, and if I was using the Mootools JavaScript framework (which would have been ideal, I really like Mootools) I would have used MOOdalBox.

I was pleased to find I didn’t need to really hack any JavaScript out at all in order to get this going, I just had to make a few changes here and there to tie it in with my current Wordpress scheme.

This type of interaction is something you will see more often in sites rich in functionality. I’m currently starting to use these type of techniques at work in order to build user friendly standards-based e-commerce user interfaces. The down side of the ease of using these types of libraries is that it’s very possible there will be a flurry of overuse leading to massive user annoyance. Use wisely…

Published at HenryTapia.com – Experiencing and designing things

Day 103 – 105, Dallas, Texas

Meg and I arrived at Dallas-Fort Worth Airport on March 7 and took an airport shuttle mini-bus to downtown Dallas, and after a bit of searching we found Jade’s place. Jade is an old work friend of Meg’s who we thought we’d visit while we were in the area. She and her partner Carter were kind enough to let us stay for a couple of nights prior to taking a Greyhound bus to Austin.

In that time we went to some of the local cafés and bars. Interestingly, the streets of Dallas were very quiet for a weekday. I was told that there is a network of underground malls where you’ll find the crowds, especially during summer when the heat is treacherous.

The main attraction in Dallas (and the only one I could find) was the Sixth Floor Museum, built on the sixth floor of the Texas School Book Depository building, from where it is believed Lee Harvey Oswald assassinated President John F. Kennedy on November 22, 1963. This was a very interesting and detailed exhibition about the life and death of JFK and all the controversy surrounding his assassination.

Hank, Meg, Jade, Carter and tips

Sixth Floor Museum

Photos courtesy of Meg. Click ‘em to see ‘em bigger (at Flickr). But don’t forget to come back…

Day 105 – 111, Austin, Texas – South by South West

On the 8th, we took a Greyhound bus to Austin, the capital of Texas. We arrived at the bus terminal on the outskirts of the city, somewhat lost and without a guide book for the city. We eventually decided on taking a taxi to our hotel, seeing there were very few other options.

Austin was a great city to visit. It’s the creative centre and cosmopolitan heart of otherwise conservative Texas. Austiners are very proud of this.

We stayed our first night at a fairly fancy but relatively cheap (though still out of our budget) hotel on the outer rim of Austin City. I’d left the hotel booking too late and it was near impossible to get anything during SXSW unless you booked months in advance. Austin’s only hostel (that we could find) was Hostelling International Austin (HI-Austin) and they seemed to be completely booked. That didn’t stop us from trying to get in there though. Once we’d settled in at the hotel and used the facilities, we headed over to the hostel and asked if we could get any beds in the dorms. We managed to book one and then another one became available when someone cancelled. With hostels, it’s worth hanging around on stand-by as rooms often become available at short notice, so long as it’s not one of the few hostels that now only take advance bookings online. HI-Austin was a small hostel with a great vibe and in a great location, close to the heart of the city and right on the river where you could watch teams of rowers race past.

Austin was a great city to visit. Not just the administrative centre of Texas, it seemed to be the creative centre also, the cosmopolitan heart of an otherwise conservative state. Austiners are very proud of this and are quick to point out the cultural divide between themselves and other Texans.

There are a lot of creative types around Austin. Even the beggars seemed to have a certain flair. One fellow with tatty clothes and dreaded hair stationed alongside a main road on the outskirts of town had a series of signs featuring witticisms from the ubiquitous “Need money for beer, pot and hookers. At least I’m honest” to the more entertaining “Not suffering from insanity, loving every minute of it” and my favourite “Ninjas killed my family. Saving up for Karate lessons”. This style of begging seems to work in places like this as well as San Francisco and Los Angeles, where young male tourists find it hilarious and take photos of themselves with their new bum friend to show their buddies back home. For a small donation of course…

An Austin local

A rowing carnival

The lovely Kristen

Photos courtesy of Meg. Click ‘em to enlarge ‘em…

SXSW

Okay so that’s Austin. The main reason I went to Austin was to go to the South by South West festival, where folks from all over the USA and around the world converged for a few weeks of film, interactive and music awesomeness. I got a badge for the Interactive festival. I would love to have bought a badge for the film and music festivals as well but we didn’t have much time and to be honest, I couldn’t have afforded the US $600+ ticket price (and that’s early bird pricing), especially given we were travelling around the world for seven months and then resettling in London for a while.

But interactive was more than enough for my wondering mind. Lots of interesting talks, panels and after parties with free booze. Some of the highlights for me were:

• A field guide to design inspiration
  Jason Santamaria and Rob Weychert from Happy Cog Studios discussed how they, as designers, keep the creativity in their work. Cameron Moll was also meant to be involved in this presentation but he pulled out with a bad case of the ‘flu, which was a shame as I was really keen to see him, being one of my favourite web design bloggers. Still, Jason and Rob did a great job of it (with some good laughs in there too). In a nutshell, the main gist was that you can’t turn on creativity from 9-5 and then turn it off. Being a designer means you have to think and look at the world with a creative eye 24-7. Look at the good design around the place, look at the beauty in nature and find what inspires you. Do your own personal projects and apply design to every part of your life. Design is a lifestyle, not just a day job. Good advice.
• Grids are good
  Designers Khoi Vinh and Mark Boulton presented a very practical example of how a good grid can improve the design and usability of a site. To make their point, they decided to do a re-design of a very popular site using a good grid, in this case Yahoo.
• Open-source hardware
  Slightly different subject matter but nonetheless interesting keynote presentation from Limor Fried and Phil Torrone about home made hardware, hacking consumer electronics and open source hardware. Some interesting examples were hacking iPods to run Linux, home made MP3 players built from memory cards and how to make an (illegal) bluetooth and mobile phone jamming device in a cigarette packet.
• Adobe SXSW Web Awards
  Some complimentary fine food and drinks then the very cheeky Ze Frank presented the awards for the finest websites of the past year. Marco, an acquaintance I met at the registration night drinks who’d flown over from Italy, took out the award for best CSS site with his gallery of sideways scrolling sites The Horizontal Way. Congrats…
• Helvetica
  Tuesday’s (13/3/07) main events were great (but somewhat annoyingly overlapping), starting with the 1:30pm world premier screening of Helvetica, a documentary film about the most widespread typeface of our time. It was introduced by director Gary Hustwit, who was very pleased and humbled to see a fully packed auditorium. I found the film very enjoyable and humorous in parts, but you don’t have to be a typophilic designer to enjoy it, it is a relevant exploration of modern western popular culture. Shame I didn’t get to watch the whole thing, I’ll have to get it out on DVD.
• Will Wright on user generated stories (and Spore)
  I had to tear myself away from Helvetica (and I almost didn’t) to run over and attend a talk by the guy famous for inventing Sim City and The Sims. I wasn’t disappointed. Will Wright is a hip guy who knows how to make a slick presentation (well actually the PowerPoint slides weren’t all that slick). He explained about conventional linear storytelling versus the new wave of multi-threaded user generated storylines in online gaming communities. This discussion then neatly segued into a compelling presentation of Maxis‘ next game, Spore, which by all accounts promises to be brilliant. The basic premise of this game is you take a single celled creature and evolve it into an advanced species and take over the universe. Simple right? When you have a spare 35:51, take a peek below (or at YouTube)…

Of course the Aussie contingent were representing, with Cameron Adams, Maxine Sherrin, Scott Gledhill and Cheryl Lead all doing their bit in various panels. I also caught up with Aussie web standards regulars Anson, Lachlan and Lisa.

Worth mentioning were talks I attended from Doug Coupland, the author of Microserfs, Life After God and Everything’s Gone Green (which is now being made into a film), Dan Saffer from Adaptive Path on 2Las Vegas Design”, what can be learnt from Sin City and applied to web design, and Brian Oberkirch and Dan Cederholm on the feasibility of building web apps outside of Silicon Valley. The Dorkbot event was pretty cool too, a show of home made devices and mashup technology.

At this time Meg and I made friends with Kristen and Tony who were staying at the hostel. They were a fun pair who were travelling around working as pedicab drivers. They took us to a retro Mexican restaurant. Also found a café not far from the convention centre that did decent organic coffee and excellent Tex-Mex for breakfast.

While I was geeking it up, Meg got to enjoy a little time-out from me, relax in the parks and riverside around Austin and enjoy going to cafés with new found friends. We had pretty good weather most of the time we were there, so I took a few time-outs from SXSW myself to join Meg and have a relax from all the bits and bytes…

We enjoyed the USA a lot, but besides bigger roads and cars, it felt a lot like home in so many ways. I needed to be pushed out of my comfort zone a little and get a little culture shock. Latin America would provide this. And I’d need to brush up on Spanish. Plenty of opportunity to do just that over the next month in Mexico and Guatemala…

Related posts

• Travel plans

Published at HenryTapia.com – Experiencing and designing things

Generally speaking, I’ve been one to follow the aforementioned flowchart (ie. just say no), but having been in the role of “The company Flash guy” previously, I was used to sprinkling bits of Flash here and there on various websites I worked on. Being a search-friendly, usability and accessibility sort-of-guy, I generally avoided full Flash site development like the plague, but I’ve found some interesting reads on Flash best practices, for those times you choose to use it.

Geoff at Deconcept discusses Flash and search engines, yes those two things can work together:
A modern approach to Flash SEO

Glass Onion (my employer until a few days ago) have been wise to the technique Geoff mentions for a while, using a little JavaScript called SWFObject, which detects the presence of the Flash plugin and replaces a piece of accessible, search-friendly XHTML with your razzle-dazzle Flash piece. It just so happens to also get around the whole EOLAS mess that forces IE users to click on a Flash piece to activate it.

The very wise Bobby van der Sluis, writing for Adobe explains how to similarly do this using his UFO (Unobtrusive Flash Objects) script, and explains the whole technique with examples in this tutorial:
Developing Flash websites using progressive enhancement

The whole concept of progressive enhancement fascinates me – you get the best of both worlds, the accessibility and search engine friendliness of web standards, coupled with the beauty and enhanced user experience of AJAX, or in this case, Flash.

Along with the accessibility features being built into the Flash plugin by Adobe, other flash enhancements are being written in the form of small scripts like SWFObject and UFO. One I’ve just recently seen and found interesting is:
ASUAL’s SWFAddress

SWFAddress is a small script that sits on top of SWFObject and provides deep linking for Flash websites and applications. In other words it enables the Back, Forward and Reload buttons of the browser and creates unique URLs with page titles that can be sent over email or IM.

SWFAddress involves attaching a JavaScript file (after the SWFObject js file) to the head of the page and then adding a little ActionScript to your Flash movies.

The thing to remember with all these techniques is that they still involve building on a base of HTML. We then enhance this basic accessible version with CSS, JavaScript and Flash. It’s a bit of extra work but it’s worth it for the search engine factor as well as accessibility (not just blind people, think about all those mobile devices out there – they’re not all Flash ready yet). If the budget (or inclination) is not there to take these extra steps, refer back to the Flash Website Flowchart…

Published at HenryTapia.com – Experiencing and designing things

It’s great that the McFarlane Prize is giving recognition to developers not only for good design but for all round well built solutions. Building to web standards and best practices is seldomly valued or even perceived, so it’s a good thing that I hope the organisers of the prize continue to recognise.

Published at HenryTapia.com – Experiencing and designing things

I’ll be going along representing Glass Onion, shortlisted for the design and development of the Australian College of Physical Education website, which I was involved in designing. Good luck Glass Onion.

Published at HenryTapia.com – Experiencing and designing things

Visit Nifty Corners for the details, and see Nifty Corners in action here.

So I’m going to play around with these ideas, probably have a go with them at work and see how it goes.

Update

Alessandro has updated his technique with the help of several gurus and has posted the results here

Update again

Roger at 456 Berea St has come up with Transparent Custom Borders and Corners. Beautiful!

Published at HenryTapia.com – Experiencing and designing things