• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Digitalproductioncoursetools_Bergs
 

Digitalproductioncoursetools_Bergs

on

  • 554 views

 

Statistics

Views

Total Views
554
Views on SlideShare
554
Embed Views
0

Actions

Likes
0
Downloads
13
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Digitalproductioncoursetools_Bergs Digitalproductioncoursetools_Bergs Presentation Transcript

    • 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 most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences Berg London partner/director Jack Schulze
    • Interactive ExperienceWednesday, May 25, 2011 most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences
    • Planning & BuildingWednesday, May 25, 2011 most of the icebergʼs mass is underwater - same applies to the systems behind interactive digital experiences
    • 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
    • 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
    • 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.
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Feasibility Philosophy •Reverse engineer •Existing similar examples •Technology requirements audit •Collaborate with expertsWednesday, May 25, 2011
    • 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.
    • 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.
    • Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - Interactive Production resources you most likely need to produce a mobile application
    • Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a Flash Microsite
    • 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
    • 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 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.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.
    • 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
    • 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.jpgWednesday, May 25, 2011
    • 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.
    • Flow Chart http://en.wikipedia.org/wiki/File:Flowchart_Showing_Driving_to_a_Goal.jpgWednesday, May 25, 2011
    • WireFrames http://johnlevenson.com/wp/wp-content/uploads/yapb_cache/wireframe_crop.747qc6vtsiskg0gsgsos4cc0s.594zrl0ettogcw0wkgwccgk80.th.jpegWednesday, May 25, 2011
    • WireFrames http://www.beccaescoto.com/lauren/Project%201/images/wireframe2.gifWednesday, May 25, 2011
    • 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 cyclical and tedius http://us.123rf.com/400wm/400/400/ika747/ika7471103/ika747110300002/9201421-arrows-circle-sign.jpgWednesday, 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 ServersWednesday, May 25, 2011
    • http://www.whatisawebsite.com/images/hosting-diagram_lr7g.gifWednesday, 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, SQLWednesday, May 25, 2011Map to timeline, documents/deliverables, sitebuild and setup
    • Documents Producer Copy Writer IA, CT ID, CT FE Coders BE Coders BE CodersWednesday, 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, RackspaceeWednesday, May 25, 2011
    • MS Project http://www.b4ubuild.com/resources/schedule/gant_chart_02b.jpgWednesday, May 25, 2011
    • Visio http://www.qweas.com/downloads/business/office-suites-tools/scr-microsoft-office-visio-professional-2007.jpgWednesday, May 25, 2011
    • 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, 2011
    • BugzillaWednesday, May 25, 2011
    • BugTrackingFlow http://developer.mindtouch.com/@api/deki/files/6780/=YouTrackFlowChart.pngWednesday, May 25, 2011
    • 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.
    • Interactive Production MatrixWednesday, May 25, 2011Interactive Production Baseline Interactive Production Matrix - - Interactive Production resources you most likely need to produce a NON - Flash Microsite
    • 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
    • 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 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
    • 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
    • THANKS!Wednesday, May 25, 2011