Portfolio
Digital Design
Misc
Photos
Print Design
Scripting
Video
Web Design
Web Development
Writing
Justin Trudeau @ the University of Waterloo

Justin TrudeauJustin TrudeauJustin Trudeau

These photos were taken for Imprint during Justin Trudeau’s visit to the University of Waterloo in Winter 2007.


Tools used: Nikon D1H

Short film: Snapshots

Short film done for class (DAC 200: Designing Digital Sound & Video).

Script, direction, sound and video editing done by me.


Tools used: Sony Handicam, Adobe Premiere Pro, old Polaroids, real live couple, on-set locations, etc.


Supplementary materials:

Treatment

Script

Demonstrational Video: Effects Reel

Project for class (DAC200: Designing Digital Sound & Video)

Shows off a couple of neat effects.

Direction, sound and video editing done by me.


Tools used: Sony Handicam, Adobe Premiere Pro, Mustard (not recommended for face)


Supplementary Materials:
Analysis Paper

Commercial: iPod + iTunes - Transform Life

Spoof iPod commercial.

Done for class (DAC 200: Designing Digital Sound & Video), mostly to test out how well we could pull off the “green-screen” effect using household materials.

Direction, sound and video editing, and some special effects done by me.


Tools used: Sony Handicam, Adobe Premiere Pro, numerous yards of neon blue cloth, lawnmower, broom, etc.


Supplementary Materials:
Analysis Paper

Imprint Online

Imprint Online Imprint Online Administration
After several years in the online game, Imprint, the University of Waterloo’s official student newspaper, decided that it needed a fresh new website to adapt to the changing trends in the Internet news industry.

I modified the core code of the Mambo content management system to meet the unique needs of a newspaper’s online counterpart, such as having an issue-based publishing system, among others. This involved modifications to both front- and back-end code+interfaces. Beyond this, I investigated add-ons provide additional functionality such as a commenting system and integrated those into the website. If add-ons were not readily available or were not up-to-standard in terms of quality, I wrote them from scratch. A great example is the PDF Archive.


Tools used: Mambo CMS, lots and lots of coffee (for all the late nights spent analyzing and writing code)

Imprint Archives

Imprint Archiving

In conjunction with the 50 years of campus journalism celebration at the University of Waterloo, Imprint took made a push to make available online, all 50 years worth of its archives. I took the lead on this as I managing the Imprint website at the time.

We received scanned copies of all the archives in PDF format. To incorporate the archives into our existing system, and to make them easy to browse through, we needed certain pieces of information, such as the volume, issue number, etc. The files were all named with a certain convention and contained all the required pieces except for a key component: the date. Getting the date would be hard; there was no easy solution other than simply opening each PDF file and recording the date manually. The downside to this was that 50 years worth of archives meant that a lot of PDF files needed to be sifted through.

Given the access to a healthy and willing volunteer base, I decided to use “community” power to streamline the process. I set up a quick PHP script that extracted volume and issue information from the file name, and on top of that, threw a quick streamlined interface that asked the user to enter the date information for the PDF file presented. With volunteers working at the task in their spare time, we managed to codify 50 years worth of archives (1,000+ issues in less than a week), whereas, my going at it alone would have taken easily over a month.

Take a walk down history lane here: Imprint Archives

Update (2008-06-04): I recently upgraded the archives to make use of the Scribd API to generate on-the-fly “iPaper” versions of PDFs in the archives. The main benefits of this are savings in bandwidth usage (since some of the PDFs are ~100MB) and a faster, enriched user experience.


Tools used: Healthy and willing volunteers, PHP, MySQL, Regular Expressions

Adobe Photoshop script: optimizeMyImages

This script resizes, formats and saves a batch of images from the selected folder to the JPEG format.

The images are proportionally resized to either the maximum width or maximum height (depending on which is greater). If an image is smaller the the maximum width and height, it is not resized. (The max width and max height are set as constants in the script)

Find it here: http://imprint.uwaterloo.ca/wiki/index.php?n=Scripting.OptimizeMyImages


Tools used: JavaScript, Adobe Scripting Engine, Adobe Photoshop

Adobe InDesign script: createMyXML

This script generates an xml file (.xml) from an indesign document (.indd)

It was written largely to streamline the web publishing process at Imprint and is a major component of the Web Publishing system that I developed.

Find it here: http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1252518

Details:
Two files are required:
* createMyXML.jsx
* createMyXML.map

Extract the the two into your InDesign scripts folder and follow the instructions below:

* Open the createMyXML.map file in a text editor
* Follow the instructions in the file and add your Paragraph Styles and associated xml tags
* Open your InDesign document
* Assign each story (i.e. all textboxes relating to a story) in the document a unique scripting label (Window->Automation->Scripting Label)
* Run the script
* The script will tag the content accordingly based on the Paragraph Styles used for content

Notes:
* The script will only tag textboxes
* Multiple pages are supported
* To avoid being prompted for the map file every time, open the createMyXML.jsx file in a text editor, browse down till you see /** —-EDIT—- */ and enter the location of the map file
* I have only tested this on Windows with InDesign CS2 (theoretically, it should work on Mac and CS as well)

The script is licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)


Tools used: JavaScript, Adobe Scripting Engine, Adobe InDesign

Silenced Voices speak out on Sri Lanka

Originally published in Imprint (September 1, 2006, Volume 29, Issue 8)

Honourable Mention in Student News Category at the Ontario Community Newspapers Association Better Newspaper Awards 2007


Their voices were anything but silenced as the eight speakers took to the podium at “Silenced Voices,” a forum held August 29 at the University of Toronto to speak out against the human rights violations faced by the Tamil population in Sri Lanka.

The forum was held in the in wake of recent arrests of alleged LTTE supporters in Canada and the U.S. and the ceasefire break in Sri Lanka. It was a joint partnership between the Student Administrative Council (SAC) at the University of Toronto and the Tamil Youth Organization (TYO) held to get a better understanding of the human rights issues currently taking place in Sri Lanka, said Jennifer Hassum, SAC president and moderator of the forum.

The panel of speakers had representation from various groups, including three individuals who had seen or suffered through the violations firsthand.

Dr. Joseph Chandrakanthan, professor of bioethics at the University of Toronto, recounted memories of his time as a priest in Jaffna in Sri Lanka and the atrocities he witnessed before fleeing to Canada with thousands of other refugees during the ‘90s as the civil war between the Sri Lankan government and the Tamil rebels raged on.

“I do not stand before you as an expert on human rights but someone who has seen the human rights violations,” he said. His last act as priest in Jaffna, he shared with the audience, had been blessing the only remaining body parts of a friend’s brother who had been killed during the fighting.

Read the full story


Tools used: pen, paper, laptop, coffee

UW tests TV offered through residence internet

Originally published in Imprint (October 26, 2007, Volume 30, Issue 15)


“The timing is right … what better place to be than [Waterloo]?”

Pushing into unchartered waters is no easy task, though.

Despite the many challenges in the horizon, Sean Van Koughnett, director of UW Graphics, has high hopes for the project he has been charged with leading. The Media & Mobility Network Project (MMNP) is the University of Waterloo’s foray into the transformation of media and communications in the university environment, the first project of its kind in Canada.

In an age where Facebook, Google, cell phones and other digital technologies are as much a part of a student’s life as basic necessities, UW wants to push the envelope, as the cliché goes, and further connect our already digital lives. The multi-tiered project hopes to explore various technological enhancements to student life.

A pilot study is currently underway to test the feasibility of Internet Protocol Television (IPTV) in residence. Currently, seven senior staff from ResNet — UW’s in-residence, student-powered answer to the Geek Squad — have Freewire TV, an IPTV software, activated in their rooms which enables them to view 11 channels on their computers.

Read the full story


Tools used: pen, paper, laptop, coffee

Varsity Football @ University of Waterloo

Here Come the WarriorsWarriors Stand Tough


Tools used: Nikon D1H

Concert Photography @ various locations

The Junction @ Polar JamRock \'n\' RollFinal Fantasy @ Grad HouseFinal Fantasy @ Grad HouseBrass Munk @ Polar Jam


Tools used: Nikon D1H, Sony Cybershot

Feds Elections @ University of Waterloo

Renjie Butalid & Jeff Henry

“Jeff Henry discusses the coming hard work with fellow Feds executive Renjie Butalid in the wake of vice-president internal Sai Kit Lo’s resignation.” (details here)

3rd place winner in Campus Photography at the Canadian Community Newspapers Association Better Newspaper Competition 2008


Tools used: Nikon D1H

stallwallpoetry.com

stallwallpoetry.com

Falling under the category of “Interesting (and peculiar) Blogs”, stallwallpoetry.com aims to preserve and provide an appreciation for the under-appreciated art of bathroom graffiti. I created the template for the blog, incorporating various plug-ins such YAPB and GeoPress to take advantage of this blog’s unique offering. Oh, and I contribute with the occasional photograph from the men’s room ;).


Tools used: Aptana IDE, Wordpress, YAPB plugin, GeoPress plugin, etc.

Imprint - Wiki Project

Imprint Wiki

Imprint, the University of Waterloo’s official student newspaper, faces an interesting HR challenge every 4 months. A new editorial is selected at the start of every school term and volunteers come and the years pass by. Given the high turnover of its staff and the need to attract fresh, new faces to the organization, providing adequate training can be a challenge.

I initiated the Imprint Wiki project with the editor-in-chief at the time to act as a living resource that volunteers would update on an ongoing basis with training and best practices information.


Tools used: PmWiki, some sweet Linux servers, volunteer-power

Imprint Online - Web Publishing System

Imprint Publishing

What do you get when you marry the Adobe Scripting Engine with the magic of XML Parsing? Well, one thing you can come out with is a web publishing system that automates the process of publishing the online version of a weekly newspaper.

This is exactly what I did for Imprint. Online publishing for Imprint was always seen as a chore and took forever to do. I searched for a solution, but could not find anything substantial. So it was time to hack something together.

Using the powerful Adobe Scripting Engine and some cleverly crafted JavaScript, I was able to turn an (almost) semantically dead laid out newspaper page (in Adobe InDesign) into a meaningful XML file. (I have to note that some user input was involved; the Web Editor had to appropriately label related Text Boxes within InDesign to associate story elements together). This XML file could then be pumped into a customer online administration component for the Mambo CMS, that would parse through the XML and create the appropriate database entries and automagically publish the newspaper online (I should also note here, that some user input was involved; Users were walked through the list of articles extracted from the XML file and had to indicate the Section and Category each belonged to). Goodbye copy-pasting!

Clever, no?


Tools used: JavaScript, Adobe Scripting Engine, Adobe InDesign, XML, PHP, MySQL, DOMIT XML Parser, Mambo, and hours of rigorous testing


Supplementary Materials:

Sample XML code:


<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Root>
<Article Label="Story 1">
<bylineName>Writer Name</bylineName>
<bylineTitle>Writer title</bylineTitle>
<copyFirstPara>This is copy for story 1.</copyFirstPara>
<copyRegular>
OdoloreNulputpat diamconsecte dolent nis nulluptation henim vel dolore del exer adit nonse ipsusto commodiam dio duis nullam volortio odolore dit nim veliquatue magna core dolesed tat.
</copyRegular>
<copyRegular>
Ut utpatetue dolobor aliquat uerat, sim ectetumsan et, venit velesenibh eu feu feugiam, volobore core minciniatem velis non vel er iril dolenibh ea aliquis autet aciliquis niam, veliquisit iusciliquam ent vel ut ip etue vulluptat. Duis am acipsus cidunt velit nostis am delit exeraestrud et utpat.
</copyRegular>
<emailAddress>writer2@yournewspaper.com</emailAddress>
<headline>This is headline for story 2</headline>
</Article>
</Root>

Bill Gates @ the University of Waterloo

Bill GatesBill Gates

These photos were taken for Imprint during Bill Gates’ visit to the University of Waterloo in October 2005.


Tools used: Nikon D1H

Promotional Materials

Laurel Centre - Overview Document Laurel Centre - Lecture Series Poster Whiteout Promotional Poster


Tools used: Adobe Photoshop, Adobe InDesign

Newspaper (Layout) Design

Imprint - Sports Section - 2006-07-14 Opinion Section - 2007-07-27 Imprint - Opinion Section - 2007-05-18-1

For full (readable) versions of these and more, please visit: http://www.scribd.com/groups/view/803-my-layout-designs


Tools used: Adobe InDesign

Notepad Design for New Faculty

Notepad - Back Page

The above was the final design created by me for the project that I worked on during my first work term. The objective was to create effective resource materials for new faculty at the University of Waterloo. After multiple informational and design interviews with various new faculty members, the result of the project was a personalized stationary pad (design seen above), coupled with an online resource guide.


Tools used: Adobe Photoshop

Supplementary Materials:

Report - New faculty interviews

Web Application: KiwiShake

KiwiShake was a prototype Facebook application. The idea was to provide users with the ability to create eCards that could be customized with photos, videos, etc.

I programmed the interface of the application, which involved lots of JavaScript and some AJAX work.

See a somewhat functioning prototype here: http://batmoo.com/a/media/kiwi/kiwi.html


Tools used: JavaScript, Aptana IDE, YouTube API, various JavaScript libraries

User Interface Design: CanTeach Volunteer Handbook

The final result of the group project for class, DAC 300 (Special Topics in Digital Design: User Interfaces). We created a Volunteer Handbook for CanTeach International, a Waterloo-based organization that sends volunteers to Central America to assist Teachers in schools.

The aim of the project was to design, prototype and test an electronic handbook to be used by volunteers new to the CanTeach program. The expectation was for volunteers to use the handbook throughout all phases of their journey (before, during, and after) as a learning and information gathering tool. The handbook was also to act as an electronic scrapbook of sorts, with tools for volunteers to capture their experiences in text.

The final prototype is below along with various supplementary materials related to the project.

CanTeach Volunteer Handbook (~3MB file; requires TK3 Reader)


Note: Since the prototype requires TK3Reader to be installed, I have included sample screenshots of the eBook as well.

eBook - Intro Page eBook - Table of Contents eBook - Chapter Title Page eBook - Internal Content Page


Tools used: TK3 Author, Adobe Photoshop


Supplementary Materials:

Architecture diagrams
CanTeach eBook - Architecture (initial draft)
Initial Draft


CanTeach eBook - Architecture
Final Architecture

Strategy and Scope Document: http://www.scribd.com/full/3088149?access_key=key-2exzroa8srabm4b2nl5d

Presentation: http://www.scribd.com/full/3088089?access_key=key-1ibct2pwtngup105sysb