Ruby on Rails

  

ExhibitFiles: BETA on April 23rd

unknown.jpg
Three weeks from today the ExhibitFiles website will be publicly available. This National Science Foundation-sponsored Website will allow exhibit developers to “connect with colleagues, find out about exhibits, and share experiences.”

For over a year now we’ve been working with our partners at the Association of Science-Technology Centers and Independent Exhibitions to design this community site. We’ve had a great group of advisors and we’ve also received helpful comments through the ExhibitFiles Development blog. The site is being custom built with Ruby on Rails and represents thousands of hours of development time.

The ExhibitFiles will allow exhibit designers and others to share their experiences in the form of exhibit or exhibition case studies and to offer opinions through reviews and comments. A variety of media types (images, audio and video) will be supported. User profiles, favorites, and commenting will allow ExhibitFiles members to interact with other on the site. The development blog contains more details on the ExhibitFiles site and design process.

If you’re attending the Museums and the Web conference you can get a sneak preview in in the Usability Lab from 11:40-12:00 on Friday the 13th. We hope to see you in the ExhibitFiles later in the month!

  
 
 
  
  

Ideum's New Portfolio: Technical Aspects

Flash is a great technology for presenting information to the user in an interesting, fun, functional and predictable way. It’s installed on nearly every internet-capable machine on the planet, and it’s perfect for deploying a rich media-driven experience. Despite its advantages the system has several noticeable drawbacks. Current cross platform support is uneven (although Flash 9 promises support for Linux, Mac, and Windows), textual content is displayed using a flash-specific renderer (native OS/WM text support is more functional, IMHO), and Flash files are impossible for search engines to index.

Re-enter the lingua franca of the Web: HTML. Supported (albeit at different levels) on every Internet-capable machine and utilizing the host system’s native libraries, standard HTML pages are visible to web crawlers, regular surfers, and users requiring special accessibility features. For example, you can link directly or bookmark the Ideum portfolio, or astronomy exhibits, or an individual project like Tour the Solar System. This was simply not possible with our Flash portfolio.

Considering our strong focus on video and exhibit development Flash was perfect for our portfolio. Things have changed dramatically in the past year, though. Server-side libraries are making client-side programming easy – the limitations of the infamous XMLHttpRequest object are more readily apparent, and mature libraries such as prototype and script.aculo.us make programming responsive desktop-like Web applications a breeze. An integration with Flash where we need to show video (like our Fuel Cell Q & A exhibit) fills multimedia voids that HTML/Javascript have yet to deliver. We decided things had advanced enough to make the Ideum portfolio a Web 2.0 application, and to create it we utilized some powerful, freely available software.

Ruby on rails makes the creation of some remarkable web sites very simple. We learned what Rails was capable of at RailsConf 2006, and decided it was time to give the system a shot. Remember CGI in C++? Validating user input was difficult, buffer overruns were all but avoidable, and actually creating something that looked halfway decent was impossible. When PHP made it’s debut the world (or at least those of us here) breathed a collective sigh of relief. PHP made it possible to quickly take user input and write to the browser. It handled Apache integration for us, and made web programming remarkably easy. Recently things have gotten even better.

If you’ve gotten this far you’ve probably heard of the MVC (Model, view, controller) architecture, as present in Ruby on Rails (and several other frameworks such as Django, CakePHP, and Struts). Instead of grabbing information from the request, looping through that information, and then echoing certain values to the response when the process comes across them, a ‘controller’ (ideally) contains all the application logic, and computed values are sent from it to a ‘view’ – a template that can be designed independently of the controller. Not only does the Ruby on Rails system offer MVC, but it also contains thousands of readily available functions for anything from html sanitizing to file serving. When swapping languages (in this case ActionScript to Ruby), you generally have to re-build your heavily used utility functions. Rails comes with most of what you need, so instead of laboring over input sanitizing and XML parsing, you get started with the real application immediately.

Development of the new portfolio was painless. Database integration, application processing and display is seamless and nearly automatic in rails. We were able to quickly set up a mailing list, a system for sorting portfolio items by category, and several other relatively static pages. Although in future plans, we currently don’t utilize a custom blogging solution. WordPress is a great tool, and we’ve no urgent need to dispose of it and start over. Since the portfolio is integrated with the blog in a number of ways, access to the blog information was essential. Our first attempt was opening a second database connection using the RoR ActiveRecord connection functions. We were successful in opening and querying the WordPress database for recent posts, but after five requests the connection would spontaneously close. This was a MySQL issue on the testing machine, but since one doesn’t always have unobstructed access to MySQL settings we decided to take another approach and simply merged the WordPress and portfolio databases.

Javascript plays an important, albeit relatively transparent role on the site. You’ll notice the “Screen Width” option in the upper right hand corner of the page. We made some adjustments to the standard prototype library to include stylesheet swapping and a few extra DOM functions. At first we determined that the “Screen Width” link would simply route to the javascript function which would swap between two stylesheets, the regular one and a smaller version. After the function was implemented we found that both Windows and Linux would resize the images without anti aliasing. A small script on the server now creates a second set of images, sized (with anti-aliasing) for the smaller screen, and a new routine swaps the image source when the screen width is changed.

Internet Explorer doesn’t like stylesheet changes (or much of anything, really), and refused to re-render the images. We wrote a special case procedure for IE, which sends a request to the server in the background, telling it to send images pre-sized for a specific stylesheet. After forcing a refresh, the new style is applied. As the site neared completion we began to integrate the flash videos, only to realize that we needed a procedure to resize them, as well. Resizing flash videos can be tricky, as the browser tends to cache them immediately. The simple solution? Just copy the HTML from the containing element, set the containing element’s HTML to nothing, and then insert the copied HTML. The browser will refresh the video. The same technique is used during the slide show to prevent and start playback at the appropriate time. Unfortunately, the same problem with image quality appeared with the flash video, and we were forced to resize each one for storage on the server side.

ideum-cms.jpgOur custom content management system also witnessed a few core changes during the portfolio build. The CMS is quite simple in concept: 1) track certain collections of components on a web page, and 2) allow those components to contain value maps and react to outside messages. We utilized the CMS in some static sites. The goal in which was to track the changes to the page, strip all unnecessary markup, and save the result to the file which was loaded. The result is an amazingly simple utility which is easily applied to any static page. When it came to utilizing it for the portfolio site we were able to fully explore the opportunities present in what became a very nifty little library.

Each piece of data on the page is tagged and aware of its relation to the database. Sound familiar? It’s pretty much the core concept of an ORM (Object-relational mapping system). ORM’s will take a database table, and transform it into a representation native to whatever language you’re programming in. SQLObject (Python), Hibernate (Java), and ActiveRecord (Ruby) are some pretty popular ORM systems for those with interest. To the best of our knowledge we are the first ones to ever create an ORM system that operates via Javascript.

Through a Ruby on Rails layer we’re able to allow Javascript to both pull information from the database, and insert/update the database depending on what changes are made – all via HTML. It’s truly interesting stuff, and allows for the addition of amazing and natural authoring ability to any page we build, while letting the designer maintain styles and certain aspects so the user doesn’t accidentally break the page layout with an edit. We’ll post an introduction to the CMS later this month.

  
 
2
 
  
  

A new look for the Ideum portfolio and blog

As the Web has evolved, so has our portfolio. I’ve always believed that a strong portfolio site not only demonstrates our capabilities, but also reflects our approach towards design and technology.

This is our fifth portfolio site in less than seven years and while it is never easy to find the time to redesign, we’ve always managed to squeeze it in between projects. There were several motivating factors at play here for this redesign.

First, as screen size has grown over the last few years our portfolio was looking increasingly small on the screen. Currently, 6 in 10 monitors are at 1024×768 pixels only about 17% use 800×600. This is according to designer Jakob Nielsen’s alertbox July 2006.

A larger size portfolio means larger slides and video. This is particularly important for the electronic exhibits that we create, that are not viewable on the Web. (For example, Tour the Solar System or Clean Power: The Promise of Fuel Cells are on the museum floor only.) Nielsen’s advice was to optimize the design for 1024×768 and then create a “liquid” design that would continuously resize based on a range of browser window sizes. We took a slightly different approach. The Ideum portfolio automatically detects browser window size and provides the option (top right under About and Contact) for the visitor to resize if they wish. Like Neilsen, we agree you can’t ignore 17% of your audience.

Another consideration was accessibility. While Adobe Flash has made strides in accessibility with each new version, HTML is simply more accessible. A screen reader or portable device can more easily access the information on our new site. (By the way, if you’re interested in accessibility issues in Adobe Products, check out their Accessibility blog).

When we launched our blog in January of this year, we quickly saw our page views jump in our Google Analytics and we watched them rise 1,500% according to Alexa.com. While there were certainly more pages generated, we noticed an improvement in the number of visitors site-wide.

Our all-Flash portfolio was basically a black box. Individual project pages couldn’t be indexed by search engines or even bookmarked by interested visitors. Also, browser navigation was problematic. For example, the back button would take visitors out of our portfolio. Don’t get me wrong, Flash is still an amazing tool, particularly for online and electronic exhibits. However, developments in AJAX and other Web technologies and the issues I’ve described make Flash less appealing in certain settings. Take a look at AJAX vs. Flash on the dotone site to learn more about this ongoing competition.

Our experience with blogging and other “Web 2.0″ technologies and approaches convinced us that a redesign was necessarily, not only improve the user-experience, but also to heighten our visibility. You’ll notice that we’ve added new features allowing visitors to email individual project pages and to post them to del.icio.us or My Yahoo!.

The structure of the main portfolio page is much the same. We kept the matrix of subjects (Art, History, Science, etc.) and media types (DVD/CD, exhibit, etc.) from the Flash version. It helps users easily find projects while showing the range of work that we’re capable of doing as well as the topic we explore (without having to say, “we do x, y, and z…”).

Finally, the new portolio was developed in Ruby on Rails and uses our own custom content management system (CMS). James here at Ideum will do a post later on the back-end of the site and our new CMS. Until then, we hope you enjoy the new portfolio. Let us know what you think.

  
 
 
  
  

RailsConf 2006 or: How I Learned to Stop Wasting Time and Love Web Programming.

Last month I had the good fortune of attending RailsConf 2006 in Chicago, the first official international conference dedicated to Ruby on Rails. For those of you who are out of the web development loop, Ruby on Rails (or simpy Rails) is an open source web application framework written in the Ruby programming language. In short, the Rails framework gives developers the power to create powerful web applications quickly and sustainably using much less code. What follows are some highlights from the conference.

WalkingBoss, a GPS/Google Maps/Flickr Mashup
Doug Fales gave a great presentation on WalkingBoss, a mashup that plots GPS data and photographs on a Google map. The basic process involves uploading a coordinate file generated by your GPS device, and then uploading photos or hooking it up to a Flickr photo collection. From the uploaded info, the site plots out a full course along the map with photo markers along the way.

This presentation was particularly intriguing to me because of its similarity to a project we’re currently working on at Ideum. Using PHP, we’ve built an Ajax-driven recycling site that plots recycling centers on a Google map. After seeing seeing this presentation, it became apparent that the site could be built more easily with Rails, making use of such features as built-in Ajax functionality, form validation, Scaffolding, and simple Google Maps integration using JavascriptGeneratorTemplates.

A few map-related links..
Google Maps Mania Blog
Google Maps Blog – Geocoding at last!
RailsConf Facebook
RecyleMap Torrance (coming soon)

BBC on Rails
Matt Biddulph, former Head of Plugging Things Into Other Things at the BBC’s Radio and Music Interactive, gave a great presentation on how they used Rails to create the BBC Programme Catalogue site, a searchable index containing details on nearly a million BBC radio & TV programs, dating back 75 years. His talk covered the ups and downs of converting the BBC’s database from an internal green-screen application into a publicly accessible Web 2.0 site using Rails. The resounding message of this talk was that Rails can easily be put to use for large-scale web applications.

Why the Lucky Stiff
A welcome performance was made at the otherwise exhaustingly technical conference by why the lucky stiff, a writer, musician, artist, and computer programmer best known for his work with the Ruby programming language. He graced the audience with a rousing show full of poetry, improvisational music (with three backup singerettes!), a smattering of hand-animated existentialist videos about computers and technology, and powerpoint slides of dysfunctional, redundant, and inherently illogical code snippets. A niche performer, you might say.

Oh yeah. He wrote a Ruby book too.

Other Things I Discovered at RailsConf
Rails incorporates the Model-View-Controller (MVC) architecture, which separates a web application’s data model, user interface, and control logic into three distinct components so that modifications to one component can be made with minimal impact to the others. I didn’t really fully undertand the importance of this design metaphor until attending this conference. MVC makes applications easier to build, maintain, and, as Dave Thomas (not the Dave Thomas you’re thinking of) pointed out, easier for other programmers to read.

Siege is an http regression testing and benchmarking utility. It was designed to let web developers measure the performance of their code under duress, to see how it will stand up to load on the internet. It lets the user hit a webserver with a configurable number of concurrent simulated users. Those users place the webserver “under siege.”

Shopify is fancy shopping cart creator built in Rails. It lets you build shops with as much style and flare as you see fit. When you signup for Shopify, you can choose from one of our growing number of custom-made designs or get really creative and create your own designs.

Camping is a tiny web framework, less than 4k, basically a Rails microcosm. Built by why the lucky stiff.

Rails Weenie – find answers to your Ruby on Rails questions

End
All the cool kids say Rails is awesome. And from what I gathered at Railsconf 2006, they appear to be right. We’ll keep you posted as our relationship with Rails blossoms.

  
 
8
 
  
Page 2 of 212