she saysdigiprodcrsetools2 23_sep_2011

Digital Production Course: Solutions, Resources, Documents and Tools09.23.11

CHRIS BERGER@BERGS

Monday, October 10, 2011

Design Comps

•Microsite and mash-up

•Always on Destination

•User Generated Content

•Google Maps API

•HTML/Ajax

•Flash

•Facebook Connect API

•Twitter Auth API

•User Experience

Red Bull Street Art

Interactive Experience

Planning &Building

•SOFTWARE AS CONCEPT: Base understanding of software development, examples.

• PLANNING: Timing,Teams, Documents

• PRODUCING: Ensure collaboration and coordination of all UX, Design, Assets, and Code - Tools and Documentation examples

Digital Production: the Role of the Producer

SOFTWARE•An interactive system that supports a User Experience

SOFTWARE (on the web)

•Browser

•Application

•Server

SOFTWARE (Client and Server)

•Browser Displays Code

•Client Side = Front End: HTML, FLASH

•Server Side = Back End - Data, Data Processing, WWW Server OS and Hosting (ISP)

SOFTWARE (Evolution)

PAGE STAGE

SOFTWARE Objects + Connectivity

•Objects in a Browser or Applications

•Connectivity to internet +

•Display and Data

• APIs = (Application Programming Interface) - objects talk to eachother, and share functionality

•Objects on a device

•SDK (Software Developer Kit) applications talk to device hardware

What Is Digital Advertising?

•Banners (Polite and Rich)

•Interactive and Video

•Websites (Basic, Dynamic, Enterpise)

•Microsites, Facebook Tabs, Youtube Channels

•Applications (Web based, Mobile)

•Facebook Applications, iPhone & iPad Applications, Android and windows phones and tablets

PLANNING•Why you need to plan (a lot!): The People, Documents, and Tools you need to map out an experience

Producer vs. PM Producer

•Producer: Works out of Lead Agency to Manage Specialist Agency

•Project Manager: Works out of Specialist Agency, manages specific resources and tasks... (and Lead Agency)

Interactive Experience

Documentation

Code & Asset integration, and

Architects

Coders

Digital Planning

Tools & Services

Phases - LifecycleProject Plan

Discovery

Define

Design

QA Testing

Alpha -> Beta ->Gold

SolutionsDocuments,

Tools &Services

People/Resources

The Production Matrix

Planning Arsenal

SolutionsR

Scope [time & cost]

•Banners/Stnd

•Mobile apps

•Tablet apps

•Microsites/Flash

•OS widgets/apps•Digital Installations

•Digital Systems/Platforms

•Microsites/NOFLASH

•Banners/Rich

$5-40K $20-200K $100K - $250K $200 and up6 weeks 6 months and upTime:

Planning the experience

•Creative Development

•Functionality

•Technology

•User Experience

Planning: Feasibility Philosophy•Translate Creative Concept

•Producer Collaborate with experts to reverse engineer experiences, and verify requirements are possible

•Always source existing similar examples

•Agree on What it does: Functional Requirements

•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

Process Tools & Svcs•Project Plans/Gantt Charts: MS Project (PC only), Merlin (mac)

•SITE MAPS: Visio (PC only)

•WIRE FRAMES:Axure (mac/pc)

•HTML PRODUCTION: Coda, Aptana, Eclipse, DreamWeaver

•Social platform Dashboards: Facebook, Youtube

•FLASH PRODUCTION: Flash

•ONLINE PROJECT COLLABORATION: Extranet - BaseCamp

•CENTRALIZED QA TESTING TOOL: Jira, Bugzilla

•SITE/DATA HOSTING: Dreamhost, Rackspace

•SITE ANALYTICS: Omniture, Google Analytics

Lifecycle/Timing

•Scheduling Philosophy

•Phases

•Project Setup

Phases - DocumentsProject Plan - Schedule

Functional & Technical Requirements/

Site Map & Wire Frames

Design Comps, Copy Deck, Style Guide

Code Development, API integration

QA Testing

Phases - ResourcesProducer

Technical Director

UX, TD, CT

UX, ID, CT

FE Coders

BE CodersBE Coders

TestersTesters

Gantt Chart Schedule

Project Plan

Primary Scope Documents

•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

Functional Requirements

Technical Requirements

•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.

PRODUCING•What and how the People, Documents, and Tools need to work together to create the experience

Process Tools, Docs & Svcs•Project Plans/Gantt Charts: MS Project (PC only), Merlin (mac)

•SITE MAPS: Visio (PC only)

•WIRE FRAMES:Axure (mac/pc)

•HTML PRODUCTION: Aptana, Eclipse, DreamWeaver

•FLASH PRODUCTION: Flash

•ONLINE PROJECT COLLABORATION: Extranet - BaseCamp

•FTP CLIENT: Cyber Duck

•CENTRALIZED QA TESTING TOOL: Jira, Bugzilla

•SITE/DATA HOSTING: Dreamhost, Rackspace

•SITE ANALYTICS: Omniture, Google Analytics

Site Map

Flow Chart - Lamp working?

Flow Chart - Driving a Car

Flow ChartFlow Chart

WireFrames

Building/Coding/Asset Interation

•HTML PRODUCTION: Aptana, Eclipse, DreamWeaver•FLASH PRODUCTION: Flash•API Integration: Coda

Site Testing: Quality Assurance

•Quality Assurance Plan: Mirrors Functional and Technical Specs

•Uses wireframes as a guide

•Cycles with site Builds

•Online Bug Tracking Tool protocol - Bugs, identify, describe, assign, resolve, retest

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

How Hosting Works

Rackspace

register.com

www nameservers

Browser

ISP: AT&T

FTP - cyberduckFTP: CyberDuck

Hosting: Rackspace

Basecamp

Bugzilla

Google Analytics

Take away Pointers•Collaborate with experts to plan and produce

•Reverse engineer similar whenever possible

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

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

•Tools enable resources to create a better experience more efficiently

Appendix: Production Menu Matrix!

she saysdigiprodcrsetools2 23_sep_2011

end data

end coder data mysql

software objects

software client

planning arsenaldocuments

interactive experiencemonday

planning whyyou

planning buildingmonday

Business

by ulysse and romain. she was born on 6th november 1995. she...

into a new era...her favorite teacher, miss desaray. she...

she said/she saw

she loves me. she loves me not

section b. who is this? she is yang lan. what is she like?...

click here elizabeth was a frog, she thought she was a...

“se pone + emoción” he/she/it gets + emotion example:...

starting the holiday...

· rosie had long blond hair when she was young. she had a...

mes-english likes (マークの英会話教室) · she...

she did what she could - tyndale...

she-pro-04 - she training [2]

chapter 8 what’s she like? she is smart, funny, and nice!...

safety, health, & environmental (she) program visitor...

everyone else in his class had one. leo’s ed round and...

it is a woman she is not a vampire she wears glasses she is...

was she a good friend? yes, she was. she … or no, she...

was she a good friend? yes, she was. she … or no, she...

he is tall. he is short. she is medium height. she is thin....

she said she said