Digitalproductioncoursetools_Bergs

Digital Production Course: Solutions, Resources, Documents and Tools05.20.11

Wednesday, May 25, 2011

CHRIS BERGER@BERGS


http://www.canadianfamily.ca/wp-content/uploads/cf_articles/images/lemon-spaghetti.jpg




http://s466.photobucket.com/albums/rr30/poombaa/?action=view&current=iceberg-poster.jpg&newest=1

Wednesday, May 25, 2011most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiencesBerg London partner/director Jack Schulze



Interactive Experience

Wednesday, May 25, 2011most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences

Planning &Building

Wednesday, May 25, 2011most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences

•SOFTWARE AS CONCEPT

•PLANNING: (Documents, Resources, Tools & Services)

•PRODUCING: Chinese Menu Development Approach

OVERVIEW

Wednesday, May 25, 2011Thereʼs a lot that goes into producing an interactive experience

SOFTWARE

•An interactive system that supports a User Experience


• Designed around the user, it is the foundation for all electronic devices that use software

• The User controls for software through an interface

• So the interface is designed to enable and respond to user input into the system and helps shape the order and form of the content the system delivers

SOFTWARE (basic system)

http://media.photobucket.com/image/recent/emando/patek-philippe-super-complication.jpg


• this why there is such a stringent process and why it’s communicated every time as define, design, etc.



SOFTWARE (basic system)

•Front End Interface

•Back End Code

•WWW Server Specifications

•Data

•Assets


• Designed around the user, it is the foundation for all electronic devices that use software

• The User controls for software through an interface

• So the interface is designed to enable and respond to user input into the system and helps shape the order and form of the content the system delivers

Interactive Experience

Documentation

Code & Asset integration, and host

Architects

Coders

SOFTWARE (Planning)

Tools & Serviceshttp://farm3.static.flickr.com/2084/1684999842_7434a6ce05.jpg

http://www.la912.fr/logo-livre-documentation.gif

http://media-2.web.britannica.com/eb-media/05/99005-050-76C0F172.jpg

Wednesday, May 25, 2011PuzzlePeople Illustration - http://us.123rf.com/400wm/400/400/eintracht/eintracht1103/eintracht110300030/9034317-illustration-of-a-team-putting-together-puzzle-

pieces--part-of-my-cute-little-people-series.jpg

http://farm3.static.flickr.com/2084/1684999842_7434a6ce05.jpg

http://farm3.static.flickr.com/2084/1684999842_7434a6ce05.jpg





Planning Arsenal

Documents,Tools &Services

People/Resources

The Team

Solutions

Wednesday, May 25, 2011Thereʼs nothing left to chance in a website. A button does what itʼs supposed to do, nothing more, nothing less. If the control isnʼt planned for up front, it canʼt be added, without consequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video

SolutionsDocuments,

Tools &Services

People/Resources

The Output

Planning Arsenal


SolutionsDocuments,

Tools &Services

People/Resources

The Deliverable

Planning Arsenal


SolutionsDocuments,

Tools &Services

People/Resources

The Production Matrix

Planning Arsenal


http://www.wordle.net/

Planning Arsenal


There are a myriad of terms to get your head around and understand. here are just a few. generated from wordle.com



SolutionsR

esou

rces

Scope [time & cost]

•Banners/Stnd

•Mobile apps

•Tablet apps

•Microsites/Flash

•OS widgets/apps•Digital Installations

•Digital Systems/Platforms

•Microsites/NOFLASH

•Banners/Rich

Wednesday, May 25, 2011Seems obvious, but this gives you an idea of the increasing complexity of projects as scope increases. x-axis=Scope[Time & Cost], y-axis=Resources

Feasibility Philosophy•Reverse engineer

•Existing similar examples

•Technology requirements audit

•Collaborate with experts


Interactive Production Matrix

Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - At any given time, this is the core group of resources needed to develop the kinds of applications and platforms out there today.


Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a banner campaign, standard and rich.


Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a mobile application


Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a Flash Microsite

DocumentsProject Plan

Functional & Technical Requirements/Specifications

Site Map & Wire Frames

Design Comps, Copy Deck, Style Guide

Quality Assurance Plan

Hosting Specification

Wednesday, May 25, 2011Interactive Documentation Timing Matrix

Lifecycle/Timing

•Scheduling Philosophy

•Phases

•Project Setup


http://images.macworld.com/images/legacy/2005/11/images/content/nudc_big.jpg

Wednesday, May 25, 2011Calendar based timelines/schedules - tasks and deadlines denoted inside date boxes of typical calendar. what film production calendars look like



Project Plan

http://konradkubiec.com/wp-content/uploads/merlin.jpg

Wednesday, May 25, 2011An interactive timeline needs to be more granular, and so the square calendar format is too limiting for all of the simultaneous and cascating tasks, milestones, and deliverables. The linear cascading graphic here is called a Gantt Chart. This is a Merlin screenshot - Merlin is a low cost Mac based scheduling and Gantt software thatʼs basically a mac version of Microsoft Project.



Functional Reqs•How a particular experience functions, what a system is supposed to accomplish

•A typical functional requirement will contain a unique name and number, a brief summary, and a rationale. This information is used to help the reader understand why the requirement is needed, and to track the requirement through the development of the system.

•EG: Video Player: FF, RW, PAUSE, PLAY, REPLAY, SCRUB, FULL SCREEN, FEATURE LINK


Technical Requirements

•How a particular system functions, how a system is supposed to accomplish the functional requirements

•A typical Technical requirement will contain a unique name and number, and a description of the technical criteria for a particular funciton

•EG: The dimensions of the site are a minimum of 1024x768, but should elegantly accommodate for larger browser windows up to 1440x900.


Functional & Technical Specifications

•How a particular experience functions, what a system is supposed to accomplish

•a specification is a document that clearly and accurately describes the essential technical requirements for items, materials, or services including the procedures by which it can be determined that the requirements have been met. Specifications help avoid duplication and inconsistencies, allow for accurate estimates of necessary work and resources, act as a negotiation and reference document for engineering changes, provide documentation of configuration, and allow for consistent communication among those responsible for the eight primary functions of Systems Engineering. They provide a precise idea of the problem to be solved so that they can efficiently design the system and estimate the cost of design alternatives. They provide guidance to testers for verification (qualification) of each technical requirement.


Site Map

http://www.sqa.org.uk/e-learning/IMPlanning02CD/images/pic006.jpg




Flow Chart

http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/LampFlowchart.svg/220px-LampFlowchart.svg.png

Wednesday, May 25, 2011Interactive means choice, choice necessitates interface. As you embed if/thenʼs inside eachother, they compound geometrically, so as choice increases, so do the level of interface sophistication, ultimately becoming dynamic - following a process with the proper tools, documents, and team form an instruction set for site programmers.



Flow Chart

http://en.wikipedia.org/wiki/File:Flowchart_Showing_Driving_to_a_Goal.jpg




WireFrames

http://johnlevenson.com/wp/wp-content/uploads/yapb_cache/wireframe_crop.747qc6vtsiskg0gsgsos4cc0s.594zrl0ettogcw0wkgwccgk80.th.jpeg




WireFrames

http://www.beccaescoto.com/lauren/Project%201/images/wireframe2.gif




Design Comps


Design Comps


Design Comps


Design Comps


Quality Assurance Plan

•Mirrors Functional and Technical Specs•Uses wireframes as a guide•Is cyclical and tedius

http://us.123rf.com/400wm/400/400/ika747/ika7471103/ika747110300002/9201421-arrows-circle-sign.jpg




Hosting Specification•Defines where and how the site will be hosted•Comply with Client digital governance •Feasibility of project depends on hosting restrictions•Ownership of Domain Names and Name Servers


http://www.whatisawebsite.com/images/hosting-diagram_lr7g.gif




Team

•Associate Producer•Producer•Sr. Producer•Exec. Producer•Art Director•Copy Writer•Information Architect•Interactive Strategist•Creative Technologist•Interaction Designer•Technology Engineer•Front End coder HTML, HTML5, xHTML, ajax, ruby on rails, etc.•Front End coder ASPx•Front End coder FL•Front End Coder animation FL•Back-end Coder - PHP, asp, js, flash, Objective C., etc.•Back-end Coder Data - MySQL, SQL

Wednesday, May 25, 2011Map to timeline, documents/deliverables, sitebuild and setup

DocumentsProducer

Copy Writer

IA, CT

ID, CT

FE Coders

BE CodersBE Coders


Process Tools & Svcs

•Project Plans/Gantt Charts: MS Project (PC only), Merlin (mac)

•SITE MAPS: Visio (PC only)

•WIRE FRAMES:Axure (mac/pc)

•FTP CLIENT: Cyber Duck

•SITE TRAFFIC REPORTS: Google Analytics, Omniture, Nielsen

•FireWorks

•Flash

•Extranet - BaseCamp

•Testing, bug tracking, beta, gold

•HOSTING: Dreamhost, Rackspacee


MS Project

http://www.b4ubuild.com/resources/schedule/gant_chart_02b.jpg




Visio

http://www.qweas.com/downloads/business/office-suites-tools/scr-microsoft-office-visio-professional-2007.jpg




FTP - cyberduck

http://terrychay.com/m/im/blog/cyberduck_screenshot.jpg




Rackspace

http://clloud.com/wp-content/uploads/2010/03/Rackspacescreen1.jpg




Google Analytics


Basecamp

http://www.crunchbase.com/assets/images/original/0000/7399/7399v1.png




Bugzilla


BugTrackingFlow

http://developer.mindtouch.com/@api/deki/files/6780/=YouTrackFlowChart.png





Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a Tablet Application - This is almost identical to Mobile applications, since, technically, Tablets are considered mobile devices.


Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a NON - Flash Microsite


Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a Flash Based facebook application

Take Away Pointers

•Invention: No solution is the same, but there are lots of similarities.

•Reverse engineer similar whenever possible

•these tools are a conduit to making an experience

•It’s OK if it’s never been done, it’s NOT OK if it can’t be

•You don’t have to be able to write this stuff, you just have to know what they are and how they’re used.


Reference TermsFor a nice definition of almost all the terms included in this course, please reference this Glossary from Hackshackers.com:

http://hackshackers.com/resources/hackshackers-survival-glossary/

Tools - Referenced in the deck, the following are links to the applications that make documents and/or software easier to write:

MS Project - Scheduling and resourcing software - PC only

- http://www.microsoft.com/project/en/us/try.aspx?cmpid=RXGOOGUSBSR&gclid=CMXAxaDC_qgCFRDPKgodc344Sg

Merlin - Scheduling and resourcing software

- http://www.projectwizards.net/en/merlin/

Visio (sophisticated site mapping tool - also good for flowcharts and wireframes)

- http://office.microsoft.com/en-us/visio/

Omnigraffle (Simple SiteMap FlowChart)

- http://www.omnigroup.com/products/omnigraffle/

Axure (Advanced Wire Framing, prototyping, etc.)

- http://www.axure.com/?gclid=CJ_d2OHC_qgCFQHsKgod6whbTQ

Adobe Dreamweaver (Graphical HTML editor)

Adobe Fireworks (prototyping sites)

Coda - an HTML editor

http://www.panic.com/coda/

Expression Studio - for developing HTML5 and Silverlight solutions

- http://www.microsoft.com/expression/

Con’t on next slide




http://www.microsoft.com/project/en/us/try.aspx?cmpid=RXGOOGUSBSR&gclid=CMXAxaDC_qgCFRDPKgodc344Sg

http://www.microsoft.com/project/en/us/try.aspx?cmpid=RXGOOGUSBSR&gclid=CMXAxaDC_qgCFRDPKgodc344Sg

http://www.projectwizards.net/en/merlin/

http://www.projectwizards.net/en/merlin/

http://office.microsoft.com/en-us/visio/

http://office.microsoft.com/en-us/visio/

http://www.omnigroup.com/products/omnigraffle/

http://www.omnigroup.com/products/omnigraffle/

http://www.axure.com/?gclid=CJ_d2OHC_qgCFQHsKgod6whbTQ

http://www.axure.com/?gclid=CJ_d2OHC_qgCFQHsKgod6whbTQ



http://www.microsoft.com/expression/

http://www.microsoft.com/expression/

Reference LinksServices - Referenced in the deck under Tools and Services, these are mostly web-based services that are used to manage various stages of an Interactive Production

HOSTING

Hosting a web server:

- Rackspace.com, Mediatemple.com, Dreamhost.com

Checking Availability of Domain Names:

- www.checkdomain.com

If Domain Name unavailable, whois checks on public records who owns it

- whois.net

Buying domain names:

- Godaddy.com, Register.com, Networksolutions.com

Content delivery networks - when you need scale for streaming video, etc.

- Akamai.com, http://www.limelightnetworks.com/

Extranet - online document tracking and project management

- http://basecamphq.com/

Getting assets and documents back and forth

- dropbox.com

Tracking bugs - VERY IMPORTANT

- Jira - http://www.atlassian.com/software/jira/

- Bugzilla - http://www.bugzilla.org/


http://www.checkdomain.com

http://www.checkdomain.com

http://www.limelightnetworks.com/

http://www.limelightnetworks.com/

http://basecamphq.com/

http://basecamphq.com/

http://www.atlassian.com/software/jira/

http://www.atlassian.com/software/jira/

http://www.bugzilla.org/

http://www.bugzilla.org/

THANKS!


Business

Digitalproductioncoursetools_Bergs