1. Its All in the DetailsThe Inner Workings of a Large-Scale Media Project.

2. PresentersLiz Neely, Art Institute of Chicago@lili_czarina, @artinstitutechiScott Sayre, Sandbox Studios@zbartroutKyle Jaebker, IMA Lab@kjaebker#mcn2012deets 2 3. Project Goals Enliven the European Decorative Arts Galleries Engage and entertain the visitors Tell the rich histories and stories of these worksAnd.. Develop an authoring system connected tocollection management and re-usable in othergalleries Open Source#mcn2012deets3 4. Challenges#mcn2012deets 4 5. We needed help..#mcn2012deets5 6. LaunchPad Project ManagementScott Sayre, Sandbox Studios@zbartrout 7. LaunchPad Project Management1. Developing requirements2. Formation of teams3. Developing content and workflow4. Developing software5. Testing and revision6. Building infrastructure#mcn2012deets7 8. 1. Defining the Application Object selection Documentation assessment Object analysis Existing tools and lessons Story telling tools and devices Wireframes#mcn2012deets 8 9. Object Selection#mcn2012deets9 10. Documentation Assessment#mcn2012deets10 11. Object Analysis#mcn2012deets 11 12. Existing Tools and InfluencesPachyderm#mcn2012deets 12 13. Existing Tools and InfluencesAIC Online Scholarly Catalog OSCI#mcn2012deets 13 14. Existing Tools and InfluencesTAP Tours Authoring Tool#mcn2012deets 14 15. Wireframe Development#mcn2012deets 15 16. 2. Formation of Teams1 Management team Oversaw and managed overall project andrelationship with the funder.2 Core Content team Defined content and media plan for eachobject and developed checklists, production and permissionrequests.3 Content Production team Produced required supportingmedia, manages workflow, schedule and development of standardprocesses.4 Software Development team Managed the production andtesting of the authoring and delivery software as well as interfacerelated design.5 Infrastructure team Manages hardware, furniture and utility(power, network, lighting) design, construction and installation.#mcn2012deets 16 17. Management Team EDAResponsibilities1) Managed funder relationship2) Defined and managed scope of program3) Defined core components4) Defined and managed workflow5) Address administrative issues and obstacles6) Managed project budget7) Reviews completed work 17#mcn2012deets17 18. Funder Relations 18#mcn2012deets18 19. Core Content TeamThe hive of activity happens with the 3 Core Content contributors sometimes meeting 4-5 times per week. Digital Information & Access Identify where multimedia is appropriate Find sources for artist talent to produce media Manage contracts with media talent Oversee the multimedia production process and budgetsCuratorial Education Identify stories and tour stops that will Object Researchbest resonate with audiences Liaison with curator in charge of project Ensure language and tone are appropriate Drafts story and other textsfor the galleries Identifies comparative illustrations Assist in authoring drafts for stories Reviews revisions 19#mcn2012deets19 20. Core Content Team.Digital Information & Access Identify where multimedia is appropriate Find sources for artist talent to produce media Manage contracts with media talent Oversee the multimedia production process and budgetsCuratorial Education Identify stories and tour stops that will Object Researchbest resonate with audiences Liaison with curator in charge of project Ensure language and tone are appropriate Drafts story and other textsfor the galleries Identifies comparative illustrations Assist in authoring drafts for stories Reviews revisionsPublications & Editorial Edit all written copy Manage rights requests Produce labels 20#mcn2012deets20 21. Core Content Team -Training Interpretive writing Thinking from a media perspective Authoring and non-print media Multimedia provenance21#mcn2012deets 21 22. Core Content TeamMultimedia Interpretation WorksheetTechniques ContextualizeExamine/Manipulate Historical Context Turn it around Physical context Open it up Use Disassemble it Zoom in/MagnifyCare and Preservation Details Restoration Tour Process/CreationCompare Construction Like items Materials Unlike items/differences Technique 22#mcn2012deets22 23. Content Production TeamTraining Multimedia InterpretationTechniques (cont.)Reference/Documentation Voices Interpretation Talking heads Biography Interviews involving props Bibliography Other experts and sources Provenance Location/Maps Movement Glossary Timeline 23#mcn2012deets23 24. Content Production TeamTraining Multimedia InterpretationPotential ToolsMediaPersonalization Images Communicate Animation Collect Interactions Share Audio Video Text 24#mcn2012deets24 25. Content Summary Sheets 25#mcn2012deets25 26. Core Content Reporting 26#mcn2012deets26 27. Editorial Program Style GuideObject#_TORelated Teaser Object DT: Display Title, Date Entered as regular case, not CAPs TO: Teaser Object Text Word Count: 8027#mcn2012deets 27 28. Publications Editorial, Image Licensing 28#mcn2012deets28 29. Content Production TeamThis team addressed cross-departmental issues and workflowsneeded to produce media for the publication.Imaging Media ProductionArt Handling CuratorialDigital Information & Access Education Management 29#mcn2012deets29 30. Imaging#mcn2012deets 30 31. 360 Object Rotations#mcn2012deets31 32. Videography#mcn2012deets 32 33. Masking#mcn2012deets 33 34. 3D Modeling and Animation#mcn2012deets 34 35. #mcn2012deets 35 36. #mcn2012deets 36 37. #mcn2012deets 37 38. #mcn2012deets 38 39. #mcn2012deets 39 40. #mcn2012deets 40 41. Software Development TeamThis team met bi-weekly to agile process and discuss priorities.Digital Information & Access IMA Labs 41#mcn2012deets41 42. Software Development 42#mcn2012deets42 43. Testing and Revision Prototype testing#mcn2012deets43 44. Infrastructure TeamThis team met as needed.Responsibilities: Networking, Electrical, Mounting, Furniture Design and Construction Digital Information & Access Information Services44#mcn2012deets 44 45. Installation Mapping#mcn2012deets45 46. Installation Options#mcn2012deets46 47. Furniture Design#mcn2012deets47 48. iPad Enclosures#mcn2012deets 48 49. #mcn2012deets 49 50. Furniture design#mcn2012deets50 51. Testing and Revision Installation testing#mcn2012deets51 52. Yay team!#mcn2012deets 52 53. Part of the TEAM #mcn2012deets53 54. Some More of the TEAM #mcn2012deets 54 55. And Even More of the TEAM !!!#mcn2012deets 55 56. Results 57. #mcn2012deets 57 58. #mcn2012deets 59 59. #mcn2012deets 60 60. Content Authoring Stats 190 unique stories 26 videos 4 animations 21 360 degree object rotations > 500 comparative illustrations > 300 guide tour stops#mcn2012deets62 61. Manipulating Images:Svres Tea Kettle#mcn2012deets63 62. #mcn2012deets 63. Patrick Edwards 64. Ubaldo VitaliEngaging Artists: Ubaldo Vitali 65. Ubaldo Vitali#mcn2012deets 66. Noreen Czosnyka 67. Yuki Nyhan 68. Engaging Artists: Yuki Nyhan#mcn2012deets 69. #mcn2012deets 71 70. #mcn2012deets 72 71. #mcn2012deets 73 72. #mcn2012deets 74 73. #mcn2012deets 75 74. #mcn2012deets 76 75. #mcn2012deets 77 76. #mcn2012deets 78 77. Authoring Tool#mcn2012deets 78. Moving Forward#mcn2012deets80 79. #mcn2012deets 81 80. http://bit.ly/RwH8oz#mcn2012deets 81. THE NUTS & BOLTSHow technology helped bring LaunchPad together. Photo by Flickr user josephrobertson#mcn2012deets 83 82. Requirements Open Source Software usage Easy authoring environment Integration with Collection Management Beautiful and Performant Kiosk App Scalable to multiple galleries/many objects Authors ability to preview content#mcn2012deets 84 83. Workflow Iterative development App and Authoring tools built at same time Bi-Weekly Check-ins with all stakeholders Updates pushed from IMA to AIC sochanges can be tested and iterated onquickly#mcn2012deets85 84. Can we leverage existing tools? Photo by Flickr user OZinOH#mcn2012deets86 85. Why TAP & TourML Content analysis made it aclear fit for the TourMLschema (stops, assets,and connections) IMLS funded grant for TAP allowed updatesto the project to be leveraged by LaunchPad Allowed focus on Kiosk App and Authoringinterface since TAP provided thearchitecture#mcn2012deets 87 86. Authoring Tools Built on the CMS Drupal Custom views and content editing screens TAP tools integrated to allow export ofTourML CITI (collection management) objectsearch integrated to pull in object data andimages#mcn2012deets88 87. #mcn2012deets 89 88. #mcn2012deets 90 89. #mcn2012deets 91 90. Authoring Tools CITI Integration SearchArtworks IngestArtwork id#mcn2012deets92 91. Authoring Tools CITI Integration SearchImages ImportImages intoDrupal#mcn2012deets93 92. The Kiosk App How can we build an app that will be easyfor an author to see their changes? Content will need to be updated while theapp is in the galleries The app must be beautiful and performantto attract users Can the app be reused in other galleries?#mcn2012deets 94 93. The Kiosk App - PhoneGap Allows us to leverage HTML5, Javascript,& CSS in an app Leverage some native features of iOSthrough the provided framework Build one codebase to use in the app andthe authoring tools preview App caches all content#mcn2012deets95 94. The Kiosk App Other Tools Zepto.js lightweight JavaScript library formobile Backbone.js MVC (Model-View-Controller) like JavaScript framework iScroll.js plugin to mimic native appscrolling in a web app 360.js plugin for handling the 360 view Modernizr.js feature detection library Google Analytics#mcn2012deets 96 95. One code base Desktop Browser iPad App#mcn2012deets 97 96. Photo by Flickr user spcbrass#mcn2012deets 98 97. Danger App Performance Performance dropped off quickly ascontent grew Some screens became sluggish and reallyhurt the users experience Retina images can be quite large andmany on the same screen is problematic#mcn2012deets 99 98. Photo by Flickr user steveharrisNothing to Worry about#mcn2012deets 100 99. Lessons Learned Compress and optimize all images Only use retina images where users willnotice (sometimes 1.5x instead of 2x isgood enough) Limit animations on retina images Cache, Cache and more cache#mcn2012deets 101 100. Would native have been better? Depends on the project and requirements For platform portability HTML5, CSS, andJavaScript have great potential Native most likely would have offeredbetter performance Native would allow access to all featuresof the device#mcn2012deets 102 101. Questions?Thank you!