Digitalproductioncoursetools_Bergs
description
Transcript of Digitalproductioncoursetools_Bergs
Digital Production Course: Solutions, Resources, Documents and Tools05.20.11
Wednesday, May 25, 2011
CHRIS BERGER@BERGS
Wednesday, May 25, 2011
http://www.canadianfamily.ca/wp-content/uploads/cf_articles/images/lemon-spaghetti.jpg
Wednesday, May 25, 2011
http://s466.photobucket.com/albums/rr30/poombaa/?action=view¤t=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
Wednesday, May 25, 2011
• 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
Wednesday, May 25, 2011
• 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
Wednesday, May 25, 2011
• 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
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
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 Deliverable
Planning Arsenal
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 Production Matrix
Planning Arsenal
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
http://www.wordle.net/
Planning Arsenal
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
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.
Interactive Production Matrix
Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a banner campaign, standard and rich.
Interactive Production Matrix
Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a mobile application
Interactive Production Matrix
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
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
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.
Wednesday, May 25, 2011
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.
Wednesday, May 25, 2011
Site Map
http://www.sqa.org.uk/e-learning/IMPlanning02CD/images/pic006.jpg
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
WireFrames
http://johnlevenson.com/wp/wp-content/uploads/yapb_cache/wireframe_crop.747qc6vtsiskg0gsgsos4cc0s.594zrl0ettogcw0wkgwccgk80.th.jpeg
Wednesday, May 25, 2011
WireFrames
http://www.beccaescoto.com/lauren/Project%201/images/wireframe2.gif
Wednesday, May 25, 2011
Design Comps
Wednesday, May 25, 2011
Design Comps
Wednesday, May 25, 2011
Design Comps
Wednesday, May 25, 2011
Design Comps
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
http://www.whatisawebsite.com/images/hosting-diagram_lr7g.gif
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
MS Project
http://www.b4ubuild.com/resources/schedule/gant_chart_02b.jpg
Wednesday, May 25, 2011
Visio
http://www.qweas.com/downloads/business/office-suites-tools/scr-microsoft-office-visio-professional-2007.jpg
Wednesday, May 25, 2011
FTP - cyberduck
http://terrychay.com/m/im/blog/cyberduck_screenshot.jpg
Wednesday, May 25, 2011
Rackspace
http://clloud.com/wp-content/uploads/2010/03/Rackspacescreen1.jpg
Wednesday, May 25, 2011
Google Analytics
Wednesday, May 25, 2011
Basecamp
http://www.crunchbase.com/assets/images/original/0000/7399/7399v1.png
Wednesday, May 25, 2011
Bugzilla
Wednesday, May 25, 2011
BugTrackingFlow
http://developer.mindtouch.com/@api/deki/files/6780/=YouTrackFlowChart.png
Wednesday, May 25, 2011
Interactive Production Matrix
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.
Interactive Production Matrix
Wednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a NON - Flash Microsite
Interactive Production Matrix
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.
Wednesday, May 25, 2011
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
Wednesday, May 25, 2011
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/
Wednesday, May 25, 2011
THANKS!
Wednesday, May 25, 2011