http://portfolio.williamcouch.com portfolio | william couch Fri, 14 Jan 2011 22:35:07 +0000 http://portfolio.williamcouch.com en http://portfolio.williamcouch.com/The-Year-in-Pictures-2010 http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/The-Year-in-Pictures-2010 Fri, 14 Jan 2011 22:35:07 +0000 portfolio | william couch 939011 View the galleries: News, Sports, Entertainment, Passages A new, scrollable photo gallery presentation to showcase notable events and photography from the year. The header and ad position remain fixed while scrolling, and keyboard shortcuts may be used to navigate the galleries, and all images have custom, in-line permalinks. Built in Django and utilizes the emerging concept of "responsive web design" with CSS3 media queries to allow for a fluid layout from huge monitors to small screens on portable devices. Audio playback is facilitated by HTML5 when possible, with a Flash fallback. <img src="http://payload.cargocollective.com/1/0/2565/939011/The Year in Pictures- News USA TODAY.jpg" border="0" width="670" height="724" width_o="1308" height_o="1414" src_o="http://payload.cargocollective.com/1/0/2565/939011/The Year in Pictures- News USA TODAY_o.jpg" align="left" /> http://portfolio.williamcouch.com/The-Living-Room http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/The-Living-Room Mon, 06 Dec 2010 05:50:32 +0000 portfolio | william couch 835426 View the site → Photography and videography are personal hobbies of mine and while I adore Flickr and Vimeo, I wanted a place to feature the occasional photo, video, or story in a large format. Obviously inspired by Laura Brunow Miner's wonderful Pictory Magazine, and Boston's The Big Picture but also the arrival of the iPad as a large portable screen that's incredibly well-suited for photo and video, I built a simple Tumblr theme to host personal, recreational visuals and narratives. Built as a Tumblr theme, with some minor JavaScript to alternate between a dark and light theme to "turn out the lights." Featured on Little Picture → <img src="http://payload.cargocollective.com/1/0/2565/835426/thelivingroom-full.jpg" border="0" width="264" height="790" width_o="264" height_o="790" src_o="http://payload.cargocollective.com/1/0/2565/835426/thelivingroom-full_o.jpg" align="left" /> http://portfolio.williamcouch.com/Talkin-bout-your-generation http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/Talkin-bout-your-generation Sun, 05 Dec 2010 23:32:32 +0000 portfolio | william couch 834650 View the interactive → A short little quiz that will approximate your generation/birth year with only five questions about various cultural signifiers. Prompted by a significant shift in the Baby Boomer generation and series from the News section, we culled memories from our readers through a brief survey a few months in advance, and from that built a database of over 400 cultural items spanning eight categories that fall within the six major generational shifts. With some simple math and the general rule that the first cultural signifiers people recall generally occur between the ages of 10 and 15, the quiz can peg your birth year quite reliably. Both the quiz and results pages were built as a single Django-rendered page, managed by JavaScript. Each user who takes the quiz is assigned a unique ID which can be used to share his/her results. The cultural item map is an unordered list of elements, whose positions are determined at template render-time by an inline Django function call. All cultural item elements are clickable and invoke a modal overlay that shows a photo and often play back audio and video via Flash or HTML5 accordingly. <img src="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-05 at 6.25.51 PM.JPG" border="0" width="670" height="422" width_o="941" height_o="593" src_o="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-05 at 6.25.51 PM_o.JPG" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-05 at 6.26.16 PM.JPG" border="0" width="670" height="447" width_o="942" height_o="629" src_o="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-05 at 6.26.16 PM_o.JPG" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-05 at 6.29.26 PM.JPG" border="0" width="670" height="499" width_o="945" height_o="705" src_o="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-05 at 6.29.26 PM_o.JPG" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-06 at 1.13.59 AM.JPG" border="0" width="670" height="481" width_o="944" height_o="678" src_o="http://payload.cargocollective.com/1/0/2565/834650/Screen shot 2010-12-06 at 1.13.59 AM_o.JPG" align="left" /> http://portfolio.williamcouch.com/Five-years-later-Hurricane-Katrina http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/Five-years-later-Hurricane-Katrina Sun, 05 Dec 2010 23:10:11 +0000 portfolio | william couch 834604 View the interactive → A project spanning several months to give readers an idea of where New Orleans stands five years after the devastation of Hurricane Katrina. All-original content, delivered asynchronously in a JavaScript intensive, chaptered story presentation. Django templates were built for each content type, which were populated for each section, and injected into the master page template upon request to keep page loads light. The project was optimized for iPad as an experiment to tell a story in a way that would work both on a desktop and tablet. Thus, it utilizes HTML5 video delivered from Brightcove, touch gesture support for then-now photo comparisons and demographic data in Google Maps, along with three custom templates for each of the three informational graphics. <img src="http://payload.cargocollective.com/1/0/2565/834604/Screen shot 2010-12-05 at 5.56.13 PM.JPG" border="0" width="670" height="508" width_o="985" height_o="748" src_o="http://payload.cargocollective.com/1/0/2565/834604/Screen shot 2010-12-05 at 5.56.13 PM_o.JPG" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/834604/Screen shot 2010-12-05 at 5.55.13 PM.JPG" border="0" width="670" height="509" width_o="981" height_o="746" src_o="http://payload.cargocollective.com/1/0/2565/834604/Screen shot 2010-12-05 at 5.55.13 PM_o.JPG" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/834604/Screen shot 2010-12-05 at 5.55.40 PM.JPG" border="0" width="670" height="508" width_o="985" height_o="748" src_o="http://payload.cargocollective.com/1/0/2565/834604/Screen shot 2010-12-05 at 5.55.40 PM_o.JPG" align="left" /> http://portfolio.williamcouch.com/Global-debt http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/Global-debt Sun, 05 Dec 2010 23:04:27 +0000 portfolio | william couch 834549 View the interactive → An interactive that shows domestic and international debt figures over time and allows users to compare the debts as a percentage of GDP from a select number of countries. Development time was about a month on and off with other projects. Built in HTML, CSS, JavaScript/jQuery with RaphaelJS, powered by Django. <img src="http://payload.cargocollective.com/1/0/2565/834549/Screen shot 2010-12-05 at 5.54.06 PM.JPG" border="0" width="670" height="443" width_o="942" height_o="624" src_o="http://payload.cargocollective.com/1/0/2565/834549/Screen shot 2010-12-05 at 5.54.06 PM_o.JPG" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/834549/Screen shot 2010-12-05 at 5.54.39 PM.JPG" border="0" width="670" height="479" width_o="940" height_o="673" src_o="http://payload.cargocollective.com/1/0/2565/834549/Screen shot 2010-12-05 at 5.54.39 PM_o.JPG" align="left" /> http://portfolio.williamcouch.com/USA-TODAY-for-iPad http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/USA-TODAY-for-iPad Wed, 07 Apr 2010 03:31:50 +0000 portfolio | william couch 347113 Application landing page → iTunes App Store → A tablet news application for Apple's iPad device on the iPhone OS platform. Built again in conjunction with Mercury Intermedia, this application was the top news application download at launch and remains in the top overall downloads for the device. The application offers the four signature sections of the paper alongside customized weather, sports scores, vivid photo galleries, and fun, brand-related Snapshots with associated polls. Different than the website and other mobile applications we've built, we sought to present the content in a natural, fluid way that encourages leisurely consumption and discovery and could invoke ideas of "the newspaper of the future" seen in science fiction film. <img src="http://payload.cargocollective.com/1/0/2565/347113/tumblr.jpg" border="0" width="670" height="426" width_o="980" height_o="624" src_o="http://payload.cargocollective.com/1/0/2565/347113/tumblr_o.jpg" align="left" /> http://portfolio.williamcouch.com/End-of-the-decade http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/End-of-the-decade Wed, 10 Feb 2010 23:06:27 +0000 portfolio | william couch 262940 View the interactive → Written in ActionScript 3, powered by XML. <img src="http://payload.cargocollective.com/1/0/2565/262940/decade01.jpg" border="0" width="670" height="356" width_o="940" height_o="500" src_o="http://payload.cargocollective.com/1/0/2565/262940/decade01_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/262940/decade02.jpg" border="0" width="670" height="356" width_o="940" height_o="500" src_o="http://payload.cargocollective.com/1/0/2565/262940/decade02_o.jpg" align="left" /> http://portfolio.williamcouch.com/Tracking-taxes http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/Tracking-taxes Wed, 10 Feb 2010 22:43:37 +0000 portfolio | william couch 262876 View the interactive → A look at historical tax rates and federal spending. Development time was about a month on and off with other projects. Written in ActionScript 3, powered by XML. PRESS Jim Ray on Tracking taxes → USA Today tracks US federal taxes in customizable graphic, Innovate Interactivity → Where Your Money Goes: An interactive tax calculator → <img src="http://payload.cargocollective.com/1/0/2565/262876/taxes01.jpg" border="0" width="670" height="356" width_o="940" height_o="500" src_o="http://payload.cargocollective.com/1/0/2565/262876/taxes01_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/262876/taxes02.jpg" border="0" width="670" height="356" width_o="940" height_o="500" src_o="http://payload.cargocollective.com/1/0/2565/262876/taxes02_o.jpg" align="left" /> <img src="http://payload.cargocollective.com/1/0/2565/262876/taxes03.jpg" border="0" width="670" height="356" width_o="940" height_o="500" src_o="http://payload.cargocollective.com/1/0/2565/262876/taxes03_o.jpg" align="left" /> http://portfolio.williamcouch.com/USA-TODAY-AutoPilot-for-iPhone http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/USA-TODAY-AutoPilot-for-iPhone Fri, 16 Oct 2009 19:57:56 +0000 portfolio | william couch 87657 Application landing page → iTunes App Store → A mobile travel application for Apple's iPhone/iPod touch platform. Working again with Mercury Intermedia, we wanted to build off the success of the general news application but this time offering an app centered around a suite of tools. Many of these tools are available on usatoday.com, but we sought to tie them altogether in a way that they could serve as your travel "assistant" when flying. This is what brought to mind the idea of the AutoPilot section. You can import or log your upcoming trips here and AutoPilot will provide you with important details about your trip. We additionally utilized Flickr's API to pull in photos nearby a user's departure or destination locations, and built a section of "articles and experts" which featured our travel section, communities and columnists. Notably, this is one of the first news-related apps that's not based strictly on news. Additionally, at its release, it was the only free iPhone application to integrate with TripIt. PRESS AutoPilot should be with you on your next trip, TUAW.com → Gadling gear review - USA Today AutoPilot → <img src="http://payload.cargocollective.com/1/0/2565/87657/iphone_shell.jpg" border="0" width="670" height="444" width_o="1000" height_o="663" src_o="http://payload.cargocollective.com/1/0/2565/87657/iphone_shell_o.jpg" align="left" /> http://portfolio.williamcouch.com/Presidential-poll-tracker http://portfolio.williamcouch.com/following/portfolio.williamcouch.com/Presidential-poll-tracker Sat, 01 Aug 2009 04:20:47 +0000 portfolio | william couch 52571 View the interactive → A look at the approval ratings of all presidents back to Truman according to Gallup polling data. Development time was about a month on and off with other projects. Our news producer, Joshua Hatch, approached me about the idea of creating a polling tracker that would allow us to not only track the polls of President Obama, but also of all other presidents for which polling data is available. We also wanted to juxtapose significant historical events with the polling data to add some additional context. Written in ActionScript 3, initially powered by XML, now running on Django via an Amazon EC2 instance. PRESS USA Today Launches Innovative Presidential Approval Tracker, Innovate Interactivity →