Your SlideShare is downloading. ×
0
Digital Production Course:     Solutions, Resources, Documents and Tools     05.20.11Wednesday, May 25, 2011
CHRIS BERGER     @BERGSWednesday, May 25, 2011
http://www.canadianfamily.ca/wp-content/uploads/cf_articles/images/lemon-spaghetti.jpgWednesday, May 25, 2011
http://s466.photobucket.com/albums/rr30/poombaa/?action=view&current=iceberg-poster.jpg&newest=1Wednesday, May 25, 2011   ...
Interactive ExperienceWednesday, May 25, 2011     most of the icebergʼs mass is underwater - same applies to the systems b...
Planning &                                                                        BuildingWednesday, May 25, 2011     most...
OVERVIEW                  •SOFTWARE                               AS CONCEPT                  •PLANNING:                  ...
SOFTWARE               •Aninteractive system that supports a User               ExperienceWednesday, May 25, 2011    •    ...
SOFTWARE (basic system)                                                                                                   ...
SOFTWARE (basic system)               •Front             End Interface               •Back              End Code          ...
SOFTWARE (Planning)                                                                                                       ...
Planning Arsenal                                                                               Documents,          People/...
Planning Arsenal                                                                               Documents,          People/...
Planning Arsenal                                                                               Documents,          People/...
Planning Arsenal                                                                               Documents,          People/...
Planning Arsenal                                        http://www.wordle.net/Wednesday, May 25, 2011There are a myriad of...
Solutions                                                                                                                 ...
Feasibility Philosophy    •Reverse              engineer    •Existing             similar examples    •Technology         ...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - At any...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Intera...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Intera...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Inte...
Documents         Project Plan         Functional & Technical         Requirements/Specifications                    Site M...
Lifecycle/Timing       •Scheduling        Philosophy       •Phases       •Project      SetupWednesday, May 25, 2011
http://images.macworld.com/images/legacy/2005/11/images/content/nudc_big.jpgWednesday, May 25, 2011Calendar based timeline...
Project Plan                                                                                                              ...
Functional Reqs               •How  a particular experience functions, what a               system is supposed to accompli...
Technical Requirements               •How a particular system functions, how a system is               supposed to accompl...
Functional & Technical      Specifications   •How a particular experience functions, what a system is supposed to   accompl...
Site Map                          http://www.sqa.org.uk/e-learning/IMPlanning02CD/images/pic006.jpgWednesday, May 25, 2011
Flow Chart                                               http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/LampFlow...
Flow Chart                          http://en.wikipedia.org/wiki/File:Flowchart_Showing_Driving_to_a_Goal.jpgWednesday, Ma...
WireFrames                          http://johnlevenson.com/wp/wp-content/uploads/yapb_cache/wireframe_crop.747qc6vtsiskg0...
WireFrames                          http://www.beccaescoto.com/lauren/Project%201/images/wireframe2.gifWednesday, May 25, ...
Design CompsWednesday, May 25, 2011
Design CompsWednesday, May 25, 2011
Design CompsWednesday, May 25, 2011
Design CompsWednesday, May 25, 2011
Quality Assurance Plan          •Mirrors  Functional and Technical Specs          •Uses wireframes as a guide          •Is...
Hosting Specification        •Defines   where and how the site will be hosted        •Comply with Client digital governance ...
http://www.whatisawebsite.com/images/hosting-diagram_lr7g.gifWednesday, May 25, 2011
Team              •Associate           Producer              •Producer              •Sr. Producer              •Exec. Prod...
Documents        Producer        Copy Writer                  IA, CT                           ID, CT                     ...
Process Tools & Svcs    •Project      Plans/Gantt Charts: MS Project (PC only), Merlin (mac)    •SITE      MAPS: Visio (PC...
MS Project                                       http://www.b4ubuild.com/resources/schedule/gant_chart_02b.jpgWednesday, M...
Visio                          http://www.qweas.com/downloads/business/office-suites-tools/scr-microsoft-office-visio-profes...
FTP - cyberduck                               http://terrychay.com/m/im/blog/cyberduck_screenshot.jpgWednesday, May 25, 2011
Rackspace                           http://clloud.com/wp-content/uploads/2010/03/Rackspacescreen1.jpgWednesday, May 25, 2011
Google AnalyticsWednesday, May 25, 2011
Basecamp                           http://www.crunchbase.com/assets/images/original/0000/7399/7399v1.pngWednesday, May 25,...
BugzillaWednesday, May 25, 2011
BugTrackingFlow                          http://developer.mindtouch.com/@api/deki/files/6780/=YouTrackFlowChart.pngWednesda...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Intera...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Inte...
Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Intera...
Take Away Pointers        •Invention:  No solution is the same, but there are        lots of similarities.        •Reverse...
Reference Terms        For a nice definition of almost all the terms included in this course, please reference this Glossar...
Reference Links        Services - Referenced in the deck under Tools and Services, these are mostly web-based services tha...
THANKS!Wednesday, May 25, 2011
Upcoming SlideShare
Loading in...5
×

Digitalproductioncoursetools_Bergs

425

Published on

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
425
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Digitalproductioncoursetools_Bergs"

  1. 1. Digital Production Course: Solutions, Resources, Documents and Tools 05.20.11Wednesday, May 25, 2011
  2. 2. CHRIS BERGER @BERGSWednesday, May 25, 2011
  3. 3. http://www.canadianfamily.ca/wp-content/uploads/cf_articles/images/lemon-spaghetti.jpgWednesday, May 25, 2011
  4. 4. http://s466.photobucket.com/albums/rr30/poombaa/?action=view&current=iceberg-poster.jpg&newest=1Wednesday, May 25, 2011 most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences Berg London partner/director Jack Schulze
  5. 5. Interactive ExperienceWednesday, May 25, 2011 most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences
  6. 6. Planning & BuildingWednesday, May 25, 2011 most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences
  7. 7. OVERVIEW •SOFTWARE AS CONCEPT •PLANNING: (Documents, Resources, Tools & Services) •PRODUCING: Chinese Menu Development ApproachWednesday, May 25, 2011Thereʼs a lot that goes into producing an interactive experience
  8. 8. SOFTWARE •Aninteractive system that supports a User ExperienceWednesday, 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
  9. 9. SOFTWARE (basic system) http://media.photobucket.com/image/recent/emando/patek-philippe-super-complication.jpgWednesday, May 25, 2011 • this why there is such a stringent process and why it’s communicated every time as define, design, etc.
  10. 10. SOFTWARE (basic system) •Front End Interface •Back End Code •WWW Server Specifications •Data •AssetsWednesday, 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
  11. 11. SOFTWARE (Planning) http://www.la912.fr/logo-livre-documentation.gif Architects Documentation Interactive Experience http://media-2.web.britannica.com/eb-media/05/99005-050-76C0F172.jpg Code & Asset integration, and host http://farm3.static.flickr.com/2084/1684999842_7434a6ce05.jpg Tools & Services CodersWednesday, May 25, 2011 PuzzlePeople 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
  12. 12. Planning Arsenal Documents, People/ Solutions Tools & Resources Services The TeamWednesday, 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, withoutconsequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
  13. 13. Planning Arsenal Documents, People/ Solutions Tools & Resources Services The OutputWednesday, 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, withoutconsequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
  14. 14. Planning Arsenal Documents, People/ Solutions Tools & Resources Services The DeliverableWednesday, 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, withoutconsequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
  15. 15. Planning Arsenal Documents, People/ Solutions Tools & Resources Services The Production MatrixWednesday, 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, withoutconsequence, later. Assets can be swapped, and parameters can change, for instance a video, but not functionality, like, rewinding a video
  16. 16. Planning Arsenal http://www.wordle.net/Wednesday, May 25, 2011There are a myriad of terms to get your head around and understand. here are just a few.generated from wordle.com
  17. 17. Solutions •Digital Systems/Platforms Resources •Microsites/Flash •Microsites/NOFLASH •Tablet apps •OS widgets/apps •Mobile apps •Digital Installations •Banners/Rich •Banners/Stnd Scope [time & cost]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
  18. 18. Feasibility Philosophy •Reverse engineer •Existing similar examples •Technology requirements audit •Collaborate with expertsWednesday, May 25, 2011
  19. 19. Interactive Production MatrixWednesday, 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 theretoday.
  20. 20. Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a banner campaign, standard and rich.
  21. 21. Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a mobile application
  22. 22. Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a Flash Microsite
  23. 23. Documents Project Plan Functional & Technical Requirements/Specifications Site Map & Wire Frames Design Comps, Copy Deck, Style Guide Quality Assurance Plan Hosting SpecificationWednesday, May 25, 2011Interactive Documentation Timing Matrix
  24. 24. Lifecycle/Timing •Scheduling Philosophy •Phases •Project SetupWednesday, May 25, 2011
  25. 25. http://images.macworld.com/images/legacy/2005/11/images/content/nudc_big.jpgWednesday, May 25, 2011Calendar based timelines/schedules - tasks and deadlines denoted inside date boxes of typical calendar. what film production calendars look like
  26. 26. Project Plan http://konradkubiec.com/wp-content/uploads/merlin.jpgWednesday, 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 linearcascading 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.
  27. 27. 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 LINKWednesday, May 25, 2011
  28. 28. 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
  29. 29. 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
  30. 30. Site Map http://www.sqa.org.uk/e-learning/IMPlanning02CD/images/pic006.jpgWednesday, May 25, 2011
  31. 31. Flow Chart http://upload.wikimedia.org/wikipedia/commons/thumb/9/91/LampFlowchart.svg/220px-LampFlowchart.svg.pngWednesday, 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 interfacesophistication, ultimately becoming dynamic - following a process with the proper tools, documents, and team form an instruction set for site programmers.
  32. 32. Flow Chart http://en.wikipedia.org/wiki/File:Flowchart_Showing_Driving_to_a_Goal.jpgWednesday, May 25, 2011
  33. 33. WireFrames http://johnlevenson.com/wp/wp-content/uploads/yapb_cache/wireframe_crop.747qc6vtsiskg0gsgsos4cc0s.594zrl0ettogcw0wkgwccgk80.th.jpegWednesday, May 25, 2011
  34. 34. WireFrames http://www.beccaescoto.com/lauren/Project%201/images/wireframe2.gifWednesday, May 25, 2011
  35. 35. Design CompsWednesday, May 25, 2011
  36. 36. Design CompsWednesday, May 25, 2011
  37. 37. Design CompsWednesday, May 25, 2011
  38. 38. Design CompsWednesday, May 25, 2011
  39. 39. 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.jpgWednesday, May 25, 2011
  40. 40. 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 ServersWednesday, May 25, 2011
  41. 41. http://www.whatisawebsite.com/images/hosting-diagram_lr7g.gifWednesday, May 25, 2011
  42. 42. 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, SQLWednesday, May 25, 2011Map to timeline, documents/deliverables, sitebuild and setup
  43. 43. Documents Producer Copy Writer IA, CT ID, CT FE Coders BE Coders BE CodersWednesday, May 25, 2011
  44. 44. 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, RackspaceeWednesday, May 25, 2011
  45. 45. MS Project http://www.b4ubuild.com/resources/schedule/gant_chart_02b.jpgWednesday, May 25, 2011
  46. 46. Visio http://www.qweas.com/downloads/business/office-suites-tools/scr-microsoft-office-visio-professional-2007.jpgWednesday, May 25, 2011
  47. 47. FTP - cyberduck http://terrychay.com/m/im/blog/cyberduck_screenshot.jpgWednesday, May 25, 2011
  48. 48. Rackspace http://clloud.com/wp-content/uploads/2010/03/Rackspacescreen1.jpgWednesday, May 25, 2011
  49. 49. Google AnalyticsWednesday, May 25, 2011
  50. 50. Basecamp http://www.crunchbase.com/assets/images/original/0000/7399/7399v1.pngWednesday, May 25, 2011
  51. 51. BugzillaWednesday, May 25, 2011
  52. 52. BugTrackingFlow http://developer.mindtouch.com/@api/deki/files/6780/=YouTrackFlowChart.pngWednesday, May 25, 2011
  53. 53. Interactive Production MatrixWednesday, 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 Mobileapplications, since, technically, Tablets are considered mobile devices.
  54. 54. Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a NON - Flash Microsite
  55. 55. Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a Flash Based facebook application
  56. 56. 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
  57. 57. Reference Terms For 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 slideWednesday, May 25, 2011
  58. 58. Reference Links Services - 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
  59. 59. THANKS!Wednesday, May 25, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×