ConceitosInterativos_01

773 views

Published on

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

No Downloads
Views
Total views
773
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

ConceitosInterativos_01

  1. 1. Conceitos Interativos Aula 01 Plinio Okamoto
  2. 2. O que é interação?
  3. 3. O que é interação? Interação* = comunicação, contato, convívio, diálogo, relação, trato. * Dicionário Houaiss de Sinônimos
  4. 4. <ul><li>Essa busca não é exclusividade da Internet </li></ul><ul><li>Interação com o consumidor durante a transmissão da mensagem publicitária aumenta o recall, envolve com a marca/produto, aumenta as chances de atingir resultados desejados </li></ul><ul><ul><li>Revistas - textura, cheiros, cupons, QR codes </li></ul></ul><ul><ul><li>TV - estímulo a participar da construção do programa (Big Brother) </li></ul></ul><ul><ul><li>Ponto de Venda - experimentação de produtos, jogos, envolvimento com a marca </li></ul></ul>
  5. 5. E interatividade na Internet? Para que? Que conseguimos? Como?
  6. 6. “ Acredito que exista um mercado mundial para, no máximo, 5 computadores.&quot; Thomas Watson, chairman da IBM, 1943
  7. 7. &quot;640K é mais que o suficiente para qualquer um.&quot; Bill Gates, 1981
  8. 8. “ Não existe razão para que as pessoas queiram ter um computador em suas casas.&quot; Ken Olson, presidente, chairman e fundador da Digital Equipment Corp., 1977
  9. 9. Ubiquidade Digital Casa Casa > Trabalho Trabalho Almoço Trabalho Trabalho > Casa Casa
  10. 10. Revistas Jornais Outdoors Ponto de Venda Mobile Eventos Cartões de visita TV Ads Radio Mkt Direto
  11. 12. Statistics source: www.w3schools.com – Fev 2010
  12. 13. Statistics source: www.w3schools.com – Fev.2010
  13. 14. Fonte: www.w3schools.com – Fev 2010
  14. 15. Fonte: www.w3schools.com – Fev 2010
  15. 16. Fonte: http://blog.velocitude.com/tag/mobile-screen-sizes/ Mobile - Resoluções 128 x 160 pixels (ex: Motorola) 176 x 220 pixels (ex: LG) 240 x 320 pixels (ex: Blackberry) 320 x 480 pixels (ex: iPhone)
  16. 17. iPhone - Resolução Descubra a resolução de um determinado celular: http://www.mobile3k.com/mobile/mobile-screen-resolution-guide.php 480-by-320-pixel
  17. 18. iPad - Resolução
  18. 23. Datacentric Design
  19. 27. User Centered Design De fora para dentro
  20. 29. Tão simples que minha avó pode usar
  21. 30. Joystick X-BOX
  22. 31. Joystick Wii
  23. 33. http://img2.sankakustatic.com/wp-content/gallery/safe-misc-iii/nintendo-wii-user-demographics.jpg
  24. 34. Project Natal
  25. 35. Produção Personalizada
  26. 36. PLAY
  27. 37. Interação – Sem Click?
  28. 38. http://www.dontclick.it/ PLAY
  29. 39. Interação – Webcam
  30. 40. Wii Spray Plinio Okamoto [email_address] Local Video
  31. 41. Nikon Virtual Touch Experience http:// http://vimeo.com/9407790 PLAY
  32. 42. Biotherm Experience http://www.youtube.com/watch?v=V5QWefQPI1o&feature=player_embedded PLAY
  33. 43. Fonte: DIGITIME – TBWADIGITAL Sem Sites?
  34. 44. Fonte: DIGITIME – TBWADIGITAL Sem sites?
  35. 45. Doritos HOTEL626 http://www.hotel626.com/ Plinio Okamoto [email_address] <ul><li>18h às 06h </li></ul><ul><li>Usa webcam, fones e mic </li></ul>
  36. 46. http://www.youtube.com/watch?v=Elo7WeIydh8&feature=player_embedded PLAY
  37. 47. Digital 1:Conceitos Básicos Entretenimento + Serviços Uniqlock Fonte: http://itunes.apple.com/us/app/uniqlock-for-iphone-season5/id293286667?mt=8 http://www.uniqlo.jp/uniqlock/ Ver Case
  38. 48. Interação - Áudio
  39. 49. Plinio Okamoto [email_address] Mala direta
  40. 50. HotSite
  41. 51. Ver Case Volkswagen Passat EcoFuel: iphone app
  42. 52. YouTUBE Interaction : Metropolitan Police &quot;Anti-Knife Crime&quot; http://www.youtube.com/user/adifferentending
  43. 53. Lego Interactive Kiosk
  44. 54. Virtual Box Simulator - USPS
  45. 55. Rayban – Virtual Mirror
  46. 57. Projeto Skinput Transforme o seu corpo em uma touchscreen Carnegie Mellon University + Microsoft Research Labs. Essa tecnologia é capaz de captar o sons de baixíssima frequência que produzimos ao tocar a nossa pele com o dedo. Assim, ele determina que parte do seu corpo está sendo pressionado e executa o comando que está naquela área. http://www.youtube.com/watch?v=g3XPUdW9Ryg PLAY
  47. 58. Interação – Mídias Tradicionais
  48. 59. Plinio Okamoto [email_address] Weeds is an HBO show based on the premise of a single mother making ends meet by dealing pot. This print ad for the show includes a scent strip that smells like pot. Or so I'm told. How would I know what pot smells like?
  49. 60. Plinio Okamoto [email_address] WAL-MART IS RUNNING OUT But if you haven't got your 3-D glasses yet, I'm afraid I have a spot of bad news for you. The Wal-Marts are running out of the free 3-D glasses. But don't panic, keep reading. Two days ago, I stopped by my local Wal-Mart, and noticed their free Hannah Montana 3-D glasses display was empty. I thought perhaps they were keeping their stock in reserve, so I asked the store manager when he planned to put more glasses out. (I hasten to add that I didn't want to take any more for myself, I just needed to know so I could report on this.) He told me: never! The Hannah glasses were already gone, and they would not be getting any more. I wasn't terribly concerned. Just because one store had run out, it didn't necessarily mean that the national supply of Hannah Montana glasses was in jeopardy. But then I read, on the 3-D Revolution blog , that Disney only distributed a paltry one million pairs of free glasses for this promotion! A million? It might sound like a large number, but there are about 4,000 Wal-Mart stores in the United States. If that figure is correct, that means, on average, each store had about 250 pairs of Hannah glasses to offer. So, if you don't have your free Hannah Montana 3-D glasses yet, I would estimate your odds of finding them at your local Wal-Mart today to be about zero. [CORRECTION: I have subsequently learned that Disney really gave away 25 million pairs of the glasses through Wal-Mart, not 1 million as &quot;3D Revolution&quot; wrongly reported.] AN IMPORTANT WARNING The good news is, you can still make your own 3-D glasses in time for the concert. But I'm begging you, girls, please, please, do not use Sharpie markers and plastic wrap for the lenses, the way the Starz channel instructs you to do! The colors will be uneven and will not filter properly; the plastic will wrinkle and pucker; the concert will stink. And for days afterward, you will look like this:
  50. 61. Plinio Okamoto [email_address]
  51. 62. Plinio Okamoto [email_address]
  52. 63. Outras possibilidades?
  53. 64. Código de Barra
  54. 65. Unidimensional
  55. 66. Exemplo: DESIGN BARCODE
  56. 69. Ver Vídeo
  57. 70. Código de Barra Exercício de classe
  58. 71. Inside QR Code
  59. 72. Inside QR Code <ul><li>- Anatomia do QR Code </li></ul><ul><li>Variações de aplicação gráfica </li></ul><ul><li>Aplicações: Product ID </li></ul><ul><li>Fashion Decorative </li></ul><ul><li>Ambient </li></ul><ul><li>Outside In/Inside Out </li></ul><ul><li>Interactive content </li></ul><ul><li>Experimental </li></ul><ul><li>Service </li></ul><ul><li>Aplicativos Geradores de QRCode </li></ul>
  60. 73. Unidimensional Bidimensional http://blog.vizuarna.si/2009/02/new-generation-code/
  61. 74. <ul><li>QR Code stands for Quick Response - it allows its contents to be decoded at high speed. </li></ul><ul><li>It can encode different types of data, such as alphabetic and numeric characters, Kanji and Kana, Hiragana, symbols, binary, and control codes. </li></ul><ul><li>The code can manage up to 7,089 numeric characters or maximum 4,296 alphanumeric * Barcode manages 20 characters </li></ul><ul><li>Ocupa em geral 1/10 do tamanho do código de barras </li></ul><ul><li>Interação com URL ! </li></ul>http://blog.vizuarna.si/2009/02/new-generation-code/
  62. 75. http://www.qrme.co.uk/qr-code-resources/understanding-a-qr-code.html Anatomia de um QR Code
  63. 77. http://d-qr.net/service-kind/designqrplus.htm
  64. 78. http://www.flickr.com/photos/brigadeneurale/3610919136
  65. 79. QR Code Product ID
  66. 82. QR Code Fashion
  67. 83. A Box Life ECO 2.0: Re-use boxes and track them by QR-code http://blog.cyber-media.co.jp/2009/11/11/eco-20-re-use-boxes-and-track-them-by-qr-code/ <ul><li>Ecological idea: “Reduce, Re-use and Recycle” </li></ul><ul><li>Re-using cardboard boxes to reduce costs and avoid thousands of boxes being thrown away every day. </li></ul><ul><li>Cardboard boxes sometimes travel a long way around the world </li></ul><ul><li>Tracking service by QR codes </li></ul>
  68. 84. A Box Life ECO 2.0: Re-use boxes and track them by QR-code http://blog.cyber-media.co.jp/2009/11/11/eco-20-re-use-boxes-and-track-them-by-qr-code/
  69. 85. A Box Life ECO 2.0: Re-use boxes and track them by QR-code http://blog.cyber-media.co.jp/2009/11/11/eco-20-re-use-boxes-and-track-them-by-qr-code/
  70. 86. Gucci´s QR Code Ad http://japon.typepad.fr/marketing_japon/2008/09/alors-que-ralph.html
  71. 87. Puma´s QR Code Ad http://japon.typepad.fr/photos/uncategorized/2008/09/19/puma_japan_2.jpg
  72. 88. Cachecol QR http://photo.kaywa.com/roger/detail/1543/
  73. 89. Cachecol QR http://photo.kaywa.com/roger/detail/1543/
  74. 90. QR Code Ring http://www.flickr.com/photos/fluidforms/3635425508/in/pool-qrcodes/
  75. 91. QR Code Belt http://farm4.static.flickr.com/3399/3525672926_ed27b2ecb4.jpg
  76. 92. QR Code > Twitter http://www.flickr.com/photos/qrazystuff/4518390570/sizes/o/in/pool-24833696@N00/
  77. 93. QR Code Fashion http://www.flickr.com/photos/julianbleecker/4441975297/in/pool-qrcodes
  78. 94. Tattoo QR Code http://www.flickr.com/photos/webkeika/4499071280/in/pool-qrcodes
  79. 95. QR Coat by Pedro Toast http://2d-code.co.uk/qr-code-coat/
  80. 96. QR Code Decorative
  81. 97. Almofada QR Code http://www.flickr.com/photos/tikaro/4387464054/in/set-72157623506385892/
  82. 98. QR Code Desk Lamp http://2d-code.co.uk/qr-code-desk-lamp/
  83. 99. Cupcakes de QR Code comestíveis http://boingboing.net/2010/03/18/edible-qr-code-cupca.html/ These edible QR Code cupcakes from Montreal's clevercupcakes are actually scannable, and will direct you to the Montreal Science Centre website.
  84. 100. QR Code Ambient
  85. 101. Informational QR Code &quot;Informational Mobility&quot; - Cellphone -> QRCode -> Web
  86. 102. http://www.flickr.com/photos/julianbleecker/4441975297/in/pool-qrcodes Display - QR Code
  87. 103. http://www.brainstorm9.com.br/mobile/fotografe-o-produto-na-vitrine-e-curta-no-facebook/ Display - QR Code
  88. 104. Primario Restaurant Backlit QR Code Sign http://www.qrchannel.com/blog/wp-content/uploads/2009/01/p1120011.jpg <ul><li>Acesso ao menu diário </li></ul><ul><li>Visível dia-e-noite – Backlit </li></ul>
  89. 105. Giant QR Code Billboard London http://www.qrchannel.com/blog/wp-content/uploads/2009/01/p1120011.jpg <ul><li>Promoção do DVD 28weekslater </li></ul><ul><li>Sem conteúdo extra </li></ul><ul><li>“ It’s back on DVD September 10th” </li></ul>
  90. 106. Giant QR Code on Southbay Beach Scarborough UK http://www.flickr.com/photos/48195423@N06/4413219857/sizes/l/in/pool-24833696@N00/ Video
  91. 107. <ul><li>Vitrine da Joalheria Folli Follie / Tóquio </li></ul><ul><li>QR Code desenhado pela SET Japan </li></ul><ul><li>Branded Hummer circula com o código </li></ul><ul><li>QR Code > mobile phone campaign site > Catalog + Contest </li></ul>First Store Window Designer QR Code http://2d-code.co.uk/folli-follie-store-qr-code/
  92. 108. QR Code Color http://www.flickr.com/photos/alvarobarata/4354319412/sizes/o/
  93. 109. QR Code Color - Grafite http://www.flickr.com/photos/alvarobarata/4352836095/in/pool-qr-art/
  94. 110. QR Code Color - Grafite http://www.flickr.com/photos/alvarobarata/4354319412/sizes/o/
  95. 111. QR-code in de bibliotheek http://www.flickr.com/photos/moqub/3887184821/in/pool-qrcodes
  96. 112. QR Code at at SXSW http://www.flickr.com/photos/brucesterling/4441756800/in/pool-qrcodes
  97. 113. interlinkONE's floor decal http://www.flickr.com/photos/24427897@N06/4370601426/in/pool-qrcodes
  98. 114. Walt Disney QR Codes http://www.qrme.co.uk/qr-code-news/3-newsflash/178-walt-disney-qr-codes.html <ul><li>Posteres na estação de Ikebukuro no Japão </li></ul><ul><li>Mickey Mouse, Donald Duck e Stitch parcialmente cobertos por QR Code </li></ul><ul><li>Redirect users para o site mobile </li></ul>Video
  99. 115. QR Code Outside In / Inside Out
  100. 116. Sephora QR Code Billboard http://www.flickr.com/photos/gladiolabean/4371698259/in/pool-qrcodes
  101. 117. Sephora QR Code Contest http://pennykim.com/post/473253336/sephora-showcases-qr-codes
  102. 118. Sephora QR Code Comments http://mark-logan.blogspot.com/2010/03/innovate-10-wrap-up.html Sephora posts consumer reviews on in-store signage and encourages users to visit their mobile site to get more information.
  103. 119. BestBuy QR Code Reviews http://mark-logan.blogspot.com/2010/03/innovate-10-wrap-up.html Best Buy is using QR Codes in store to allow consumers to quickly get product ratings and reviews.
  104. 120. QR Code Interactive Content
  105. 121. http://www.flickr.com/photos/rlares/3615900549 Urban Visions Book: A Coruña
  106. 122. LIVING BOOK The first QRcode book of the world www.thelivingbook.org/ http://www.amoreodio.org/
  107. 123. LIVING BOOK The first QRcode book of the world http://www.flickr.com/photos/amoreodio/
  108. 124. Anúncio Vivo – DM9DDB http://www.dm9ddb.com.br/anunciovivo/
  109. 126. QR Code Experimental
  110. 127. The QR Cloud Project: Micro Secrets In Public Space <ul><li>Amsterdam – Projeto artístico </li></ul><ul><li>7 trabalhos utilizando QRCode: Micro contos, Poemas e Proverbios </li></ul><ul><li>Escritos por escritores, poetas e cientistas. </li></ul>http://popupcity.net/2009/09/the-qr-cloud-project-micro-secrets-in-public-space/
  111. 128. Os 10 Mandamentos http://www.flickr.com/photos/take-care/3442952292/sizes/o/in/pool-1049441@N25/
  112. 129. Autobiography http://www.flickr.com/photos/azimuthphotos/2895474717/sizes/l/in/pool-1049441@N25/
  113. 130. Cow Parade Brasil Cow Parade Brasil
  114. 131. Layar – Augmented Reality + Paid Content http://site.layar.com/company/blog/layar-launches-worlds-first-augmented-reality-content-store/
  115. 133. People preparing phones at #arflashmob  
  116. 135. QR code #arflashmob  
  117. 137. Statistics source: www.w3schools.com – Fev.2010 Next ARflashmob: Rio! #Mobilefest 24 28 may Brasil - Ipanema beach
  118. 138. Sensitive Rose by Martha Gabriel http://www.sensitiverose.com/rose.php
  119. 139. QR Code Services
  120. 140. Chamber of Commerce of Tsuruga População de 70k! Poster para turistas mostrando todos os restaurantes locais. QR Code: Site mobile / Cardápio / Como chegar / Estacionamento / Ofertas especiais http://2d-code.co.uk/qr-coded-local-restaurant-poster/
  121. 141. QR Code as Boarding Pass
  122. 142. QR Code as Loyalty Program ID Novo cartão do programa de relacionamento Smiles Design by Cauduro Associados
  123. 143. QR Code: Realtime Bus Schedule - GPS
  124. 144. Favorite Place On Google http://www.google.com/help/maps/favoriteplaces/business/index.html <ul><li>Reconhecimento de mais de 100 mil negócios </li></ul><ul><li>Adesivos enviados para esses estabelecimentos nos EUA </li></ul><ul><li>Interação via QR Code </li></ul><ul><li>Opinião do consumidor, resenhas </li></ul>
  125. 145. Aplicativos Geradores de QR Code
  126. 146. QR Code JAM MAKER http://staff.aist.go.jp/hagiwara.hagiwara/qrjam/
  127. 147. QR Code JAM MAKER
  128. 148. http://www.jaxo-systems.com/barshow
  129. 149. http://www.jaxo-systems.com/solutions/barcapture/?lang=en_US
  130. 150. http://www.likify.net/
  131. 151. QR Code: Possibilidades http://2d-code.co.uk/qr-code-design-service/
  132. 152. QR Code: Possibilidades
  133. 153. QR Code: Possibilidades
  134. 154. QR Code: Possibilidades http://2d-code.co.uk/qr-code-design-service/
  135. 155. QR Code: Possibilidades http://2d-code.co.uk/qr-code-design-service/
  136. 156. QR Code: Possibilidades http://2d-code.co.uk/qr-code-design-service/
  137. 157. QR Code: Possibilidades http://2d-code.co.uk/qr-code-design-service/
  138. 158. QR Code - Maker: http://qrcode.kaywa.com/
  139. 159. Estúdio de QR Design – SET JAPAN: http://setjapan.com/
  140. 163. QR codes + Twitter Prédio comercial Toquio, Japão
  141. 164. Criação de Camiseta QR Code QR Code - Maker: http://qrcode.kaywa.com/ http://reader.kaywa.com/
  142. 172. Conceitos Interativos Aula 01 Plinio Okamoto

×