Colophon

Vizuali is a new innovative scrapbooking tool for collecting your favourite visual content from around the web.

Create beautiful, visual collections containing your favourite videos, images and websites using a powerful bookmarklet that lets you grab content from any webpage.

Executive Summary

Vizuali was created to provide a solution to a common problem faced by many artists and designers - it allows users to collect and organise inspirational or interesting visual content.

The interface is simple and easy to use, providing an appealing, elegant view of your collection without clutter. This makes it a great tool for creating mood boards, scrapbooks, photo albums or simply to fulfil the enjoyment of collecting.

Content is easily imported with the bookmarklet, by simply dragging this to the bookmarks bar in any browser, users can open the Vizuali toolbar on any webpage.

The toolbar enables content to be imported as a user browses, simply by clicking items on the page in which they reside.

Single images can be added, an entire webpage or videos from sites like Youtube or Vimeo. For every item added, a visual preview is generated so it's easy to quickly find items at a glance.

Items can be shared on Facebook or Twitter at the click of a button and a simplistic URL structure also makes it easy to share links with others.

Background

Vizuali was developed and launched as a final major project for the BSc Hons Interactive Multimedia Design degree. The initial alpha build was produced in November 2010 and kindly demonstrated by the Web Standardistas at their Build workshop.

The soft launch beta was then launched on the 4th April 2011. The development of the project will continue, with future plans for integrating a social interface to the site and the addition of an iPhone application.

Designer Biography

Kyle Gawley is an interactive designer from Belfast, Northern Ireland who specialises in both the design and development of standards compliant web sites and web applications.

He harbours a slight obsession with jQuery and AJAX and is always keen to experiment with new technologies to keep the web moving forward.

Kyle is soon to complete an honours degree in Interactive Multimedia Design at the University of Ulster, although he will be furthering his studies after being accepted to join the MA Multidisciplinary Design course in Belfast, run by the Web Standardistas

Prior to his degree he studied BTec eMedia at the NRC where he gained a triple distinction grade and was awarded the NI Opera Shield for outstanding achievements in eMedia.

Kyle has been working on the web as a freelance designer and developer for a number of years now, working with clients such as Stena Line and the Ulster Arts festival.

He has also worked for local design agencies, The GCAS Group and Being Communications.

Technical & Development Information

Weighing in at only 836kb for the entire site and containing 5,371 lines of HTML, CSS, jQuery, PHP and YQL, Vizuali is quite a diverse application in terms of technical implementation.

It is primarily a Javascript application, built using the wonderful jQuery framework. This is used for all the front end animations, interactions and server communication via AJAX.

The application has been designed using a single page model for most functionality, creating a seamless, smooth user experience without the need for unnecessary page reloads.

There are some exceptions to this rule however, due to some common issues with AJAX content. To enable pages to be shared, bookmarked or indexed by search engines, they each require their own unique URL.

However, when content is loaded with AJAX, the application URL never changes, making it impossible to bookmark individual pages. This is why certain pages, such as the collection and item views demand a full page reload.

Content Management System

Content is stored in a custom designed and built CMS, consisting of a MySQL database and a series of "AJAX Handlers" - these are a variety of PHP scripts called from an AJAX interface to bridge communication between the browser and server.

The AJAX interface provides a two way system, for sending data to the server - for storing data, and also retrieving data from the server, returning it to the front end.

The CMS stores user information, their collections and details of individual items including the addition date, source and item type.

Preview images for all content are generated and stored on the server in a structured file system. Original image files are also copied to the server to prevent hotlinking to the original files.

Bookmarklet

Bookmarklets are becoming more commonplace on the modern web, they offer a powerful alternative to browser extensions - they are entirely cross browser compatible and very simple to 'install'.

They are pretty much small Javascript applications stored inside a bookmark. Most modern browsers have the ability to execute Javascript in the address bar. You can try this out by entering the following line of code into your browser or just click the link.

javascript:alert("Hello World!");

While it's possible to include a small script entirely in a single line of code like this, the Vizuali bookmarklet uses this line of code to load an external script from the server, injecting it into the current page.

This external script is a normal .js file written with jQuery. The script first tests to see if the jQuery library is included on the current page, if not then it loads it. The YQL plugin is also loaded before adding the toolbar to the top of the browser - by appending some HTML, styled with an external stylesheet.

Several selectors are then bound to the images and videos contained on the page, when these are clicked - an AJAX call is made to pass the source of the item to the server, where an AJAX handler adds the item to the database.

Yahoo Query Language

Yahoo Query Language provides some aspects of the importing functionality, such as importing all the images from a particular webpage, and obtaining video information and thumbnails from Youtube and Vimeo.

YQL is like MySQL for the web, it provides an interface for 'querying' webpages or RSS feeds to select HTML content. YQL also provides a wealth of community tables/APIs - such as Youtube and Vimeo. This enables data to be obtained from these sites simply by asking for a particular video title, author or thumbnail associated with a video ID.

Example:
SELECT * FROM youtube.video WHERE id='BpWM0FNPZSs';

It's a very powerful tool and extremely simple to learn, the syntax is based on MySQL and it provides a universal interface for querying various APIs without having to learn the individual APIs for sites like Youtube or Vimeo.

Find out more about Yahoo Query Language

URL Structure

To provide a clean URL structure for the basis of sharing content, a series of complicated, headache inducing mod_rewrite rules where added to the .htaccess file on the Apache server. These rules create, clean, consistent URLs from quite often, unclean, messy PHP URLs that contain additional parameters.

Example:

collection.php?page=22&item=22

becomes

collection/page/22/item/22

Development Strategy

Vizuali has been developed using an agile development approach utilising a series of iterations.

Initial prototypes where constructed for the core functionality such as importing content and the bookmarklet, this allowed room for experimentation with technologies and methods that were new to me.

The final build was built in the browser based on some initial site impressions created in Photoshop. The CMS was then constructed with the core functionality implemented using the initial prototypes, tailored to work with the new CMS.

The application was then built feature by feature using a series of iterations of building, testing and then adjusting, with the input of additional users.

Developing using an agile approach reduces the time spent on documentation or in image editing applications. A working application is produced from the offset and features are built in their natural environment - the browser.

Development Resources

The development of Vizuali would not have been possible without the following tools:

jQuery / jQuery UI

Front end interactivity, communication with the backend processing scripts and bookmarklet is built entirely with jQuery and AJAX.

The jQuery UI framework in place for drag & drop functionality and to provide easing for animations.

Masonry Plugin by David Desandro

The main layout relies on Masonry to overcome issues with the CSS box model in creating an interlocking grid system with items of varying height.

Yahoo Query Language (YQL)

Yahoo Query Language is used primarily for querying the Youtube and Vimeo APIs for obtaining video thumbnails and information.

It also provides the functionality for importing all the images from a specific web page.

YQL Plugin by Gabriel Falcão

The YQL plugin provides a Javascript interface for querying the YQL console. Used in the main interface and bookmarklet.

Batch Image Load by H. Yankov

Used to detect when all the images on a page have successfully loaded before calling Masonry to arrange the layout.

Font Deck

Web font service for providing the two main fonts used in the application:

Urbano Condensed Light
Alternate Gothic No.3

PHP

The backend processing and CMS communication is written entirely with PHP, bridged to the front end with AJAX.

MySQL

All user and collection data is stored in a custom database built with MySQL.

Bluga Web Thumbs

Web Thumbs is a third party web application used for generating screenshots of websites. The service is accessed from the Vizuali server using PHP to connect to the Web Thumbs API.

Development Tools

The following tools and applications where used throughout the various stages of project design and development.

Adobe Photoshop & Illustrator

Used for creating an impression of the site's design, site graphics, logo, business cards and badges.

Sequel Pro

MySQL database management application used for creating and managing databases.

Fraise

Text editor used for coding HTML, CSS, PHP and jQuery.

MAMP

Local server application running Apache, MySQL and PHP.

Filezilla

FTP application for uploading.

Browser Testing

Vizuali has been tested in all major browsers on both OSX and Windows, including the latest versions of Internet Explorer - this excludes version 6.

Every effort has been made to provide a consistent experience for all users, however due to browser inconsistencies the experience may vary from user to user.

For the best experience, please use a modern, standards compliant browser such as Firefox, Google Chrome, Safari or Opera.

The project has also been tested in Safari for iPhone and while there are some minor issues, these will be resolved in the forthcoming dedicated iPhone application.

Hosting

Vizuali is hosted by the highly recommended Big Wet Fish.

Contributors & Acknowledgements

I would like to show my gratitude to all of those who helped with this project in some way and I extend my special thanks to the following.

Ian Turner, Kelly McAleese, Dez Shearer, Graeme Bell, My Parents, Jonathan Wallace

For their feedback and support throughout the development of the project.

I would also like to thank everyone else who signed up for the beta and tried out the project, and for anyone who has shared their thoughts and feedback.