Mark Plewis

For this memory card game, I used CSS transformations and animations to create three-dimensional doors, which swung open when clicked. The objective was to uncover matching prizes behind the doors. The game was authored in HTML and packaged as a Facebook application. After playing, users were encouraged to share an image of their prize or their “wacky” consolation prize to their timeline. I wrote all of the game logic in JavaScript, following an object oriented design methodology (using JavaScript pseudo-classes). I did not rely on any third-party libraries, aside from jQuery. I used feature detection to identify older web browsers which do not support CSS animation and 3D transformations, and replaced these effects with two-dimensional, JavaScript-based animation, to ensure the best possible experience for all users.

This application, which was installed on iPads and Android tablets, simulated a lottery scratch card experience. When tapped, cards would flip over and move closer to the user in 3D space. Customers would then be able to “scratch” the card with their finger to reveal a promo code, which a Microsoft representative would then apply to the customer’s purchase. I used CSS animations to achieve the card flipping effect, and I created the “scratch” area using JavaScript, the HTML 5 Canvas API and the EaselJs JavaScript animation library.

Hoping to prove that their network was faster than that of their competitors, Rogers encouraged the public to test the speed of their wireless connections at various pop-up tents throughout Toronto. These tests were performed via a web application, which allowed users to visualize their results in real-time. I leveraged JavaScript and the HTML 5 Canvas API to create a compelling, speedometer-style display, which scaled to accommodate any screen size. I did not rely on any third-party libraries, aside from jQuery, in the development of this display.

This application was installed on iPhones and Android devices at various events throughout the U.S., as part of AT&T’s #GoodToGo GoPhone campaign. Users interacted with the app by answering a series of questions and creating a personalized design, which was then printed onto a canvas bag. They customized their designs by selecting background options and dragging/dropping illustrations onto predefined regions. Their designs were then emailed to them and they were given an opportunity to share them via social media. This was a bilingual application (English and Spanish).

During my time as a member of Permaculture GTA, I assessed their needs while participating in meetings, planting gardens, photographing events, managing email accounts and designing various print pieces. I redesigned their website from the ground up, replacing their existing Wordpress site with a customized Drupal 7 build. About six months later, I rebuilt it again using Craft CMS. I chose to abandon Drupal primarily because it’s admin interface was not responsive and the client did not possess the technical expertise to safely install security updates.

The Permaculture GTA website is now fully responsive and accessible (WCAG 2.0 Level A compliant). It’s also bilingual (French and English), although the client chose not to enable this feature due to the amount of time required to translate their existing content. This CMS allows the organization to manage all aspects of their website.

This application provided our client with powerful tools to observe, track and analyze in-store shopper behaviour. Features included push notifications, geolocation, maps of nearby stores, stopwatch timers, photo capture capabilities and various types of questionnaires. It was authored in HTML and packaged as native iOS and Android applications via Cordova. We also developed a separate, browser-based version, which connected to the same database and provided an administration interface to process data that was collected in-field.