Mobile UX - MobileConf 2014 - RJ
Upcoming SlideShare
Loading in...5
×
 

Mobile UX - MobileConf 2014 - RJ

on

  • 978 views

Mobile UX: a experiência como vantagem competitiva.

Mobile UX: a experiência como vantagem competitiva.
Apresentação utilizada na palestra realizada no dia 31 de maio de 2014, no MobileConf no Rio de Janeiro.

Statistics

Views

Total Views
978
Views on SlideShare
969
Embed Views
9

Actions

Likes
6
Downloads
74
Comments
0

2 Embeds 9

http://www.slideee.com 8
https://twitter.com 1

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

Mobile UX - MobileConf 2014 - RJ Presentation Transcript

  • 1. ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Mobile UX 
 A experiência como vantagem competitiva
  • 2. @horaciosoares ! Especialista em experiência do usuário, usabilidade, Design e acessibilidade, é consultor da Acesso Digital e da Soyuz e possui 16 anos de experiência no desenvolvimento de soluções Web. Palestrante, professor e editor de artigos, faz parte do Conselho Consultivo do Instituto Intranet Portal e do GT de Acessibilidade na Web do W3C Brasil. Horacio Soares
  • 3. horacio@mestr.es facebook.com/mestresbrasil (21) 9 9925-5404 - @horaciosoares
 Skype: horacio.soares Horácio Soares
  • 4. Projetos UX Mobile
  • 5. Nunca esquecer de duas palavras mágicas no mundo móvel:
  • 6. Uma delas te rouba tempo:
  • 7. A outra te faz ganhar tempo
  • 8. Entretenimento
  • 9. Utilidade
  • 10. Como são as experiências dos seus clientes?
  • 11. O que os clientes esperam?
  • 12. felicidade
  • 13. felicidade X
  • 14. felicidade X
  • 15. Isso é felicidade
  • 16. Felicidade…
  • 17. experiência perfeita
  • 18. felicidade
  • 19. e o que as empresas esperam?
  • 20. Mulher com notebook em sinal de ok Todos querem o melhor osso… Cachorrinho caregando um enorme osso.
  • 21. mas como?
  • 22. com qualidade...
  • 23. com uma experiência de qualidade...
  • 24. Acertando o tiro certo no alvo certo
  • 25. Realidade nos projetos digitais:
  • 26. Para onde vamos? http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
  • 27. Livro: O Tiro e o Alvo Causo 1! Precisamos Construir uma mesa.
  • 28. CAUSO 1 
 
 - A propósito, que mesa? Livro: O Tiro e o Alvo
  • 29. De sinuca?
  • 30. Ping-pong?
  • 31. Futebol de botão?
  • 32. Carteado?
  • 33. Ou seria uma mesa para computador?
  • 34. Reunião?
  • 35. Escritório?
  • 36. Mesa de centro?
  • 37. Jantar?
  • 38. Ou seria uma mesa de cirurgia?
  • 39. De autópsia?
  • 40. CAUSO 1 (continuação) ! 
 - Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto, então, mãos à obra! Livro: O Tiro e o Alvo Livro: rework
 37 Signals
  • 41. Conclusão? ! Retrabalho, desgaste com o cliente e diminuição do lucro.
  • 42. É a média do tempo gasto em refação nos projetos de TI. 
 Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 
 
 Via Curso AI Faber Ludens:
 http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013 50%
  • 43. Mais caro fazer alterações em um projeto finalizado. 
 
 Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 
 
 Via Curso AI Faber Ludens:
 http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013 100x
  • 44. Dos projetos são abandonados depois de uma primeira entrega inadequada. 
 Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 
 Via Curso AI Faber Ludens:
 http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013 15%
  • 45. É a média da melhoria dos KPI’s em projetos com 10% do orçamento gasto em pesquisa de usabilidade.
 
 Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 
 Via Curso AI Faber Ludens:
 http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013 83%
  • 46. Aumento de KPI’s ! Conversões - Tráfego no site - Cadastros - Contatos de novos clientes - Vendas - Fatia de mercado - Transações - Taxa de sucesso em tarefas - Retenção - Produtividade - Pageviews - Uso do sistema - Visitas 
 key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
  • 47. Diminuição de KPI’s ! Custos do projeto - Tempo de desenvolvimento do projeto - Custo de treinamento - Erros no uso do sistema - Tempo do usuário - Chamadas em help desk - Refações – Manutenção.
 
 key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
  • 48. Afinal, o que é eXperiência 
 do Usuário (UX) ?
  • 49. eXperiência do Usuário (UX) é a qualidade da experiência que uma pessoa tem ao interagir com algo projetado.
 
 uxnet.org “ ”
  • 50. Experiências são uma 
 ! ! ! ! ! nova oferta econômica.
  • 51. Experiências que fazem esquecer o mundo a sua volta
  • 52. http://semanticstudios.com/publications/semantics/000029.php Colmeia da experiência 
 do usuário? ! ! ! ! HoneyComb User Experience
  • 53. http://www.sedentario.org/wp-content/uploads/2008/06/cachorrosempata2.jpg
  • 54. X
  • 55. http://semanticstudios.com/publications/semantics/000029.php
  • 56. http://semanticstudios.com/publications/semantics/000029.php
  • 57. Mas como são 
 nossas experiências no mundo digital?
  • 58. Como os usuários são vistos?
  • 59. Para alguns desenvolvedores e designers, é assim que os usuários deveriam ser tratados…
  • 60. Usuário bom é usuário m…
  • 61. Usuário bom é usuário m…
  • 62. Resumo da ópera
  • 63. E o resultado não 
 poderia ser diferente: experiência ruim = resultado pior ainda
  • 64. Estratégia = “uma conspiração
 para o sucesso”
  • 65. Como, na maioria das
 vezes, os projetos Web são desenvolvidos?
  • 66. 
 Cliente 
 Atendimento
  • 67. 
 Cliente ? ? ? ? ? ? 
 Atendimento
  • 68. v 
 
 Cliente Atendimento 
 Designer/Arquiteto ?? ? ?
  • 69. v 
 Cliente 
 Atendimento 
 Designer/Arquiteto
  • 70. v 
 Cliente 
 Atendimento 
 Designer/Arquiteto ? ? ?
  • 71. v 
 Cliente 
 Atendimento 
 Designer/Arquiteto OK OK
  • 72. v 
 Cliente Designer gráfico 
 
 Atendimento 
 Designer/Arquiteto ? ? ? #%$&*@#$%$#
  • 73. v 
 Cliente Designer gráfico 
 
 Atendimento 
 Designer/Arquiteto ?? ?
  • 74. v 
 Cliente Designer gráfico 
 
 Atendimento 
 Designer/Arquiteto ?? ?
  • 75. v 
 Cliente Designer gráfico 
 
 Atendimento 
 Designer/Arquiteto ?? ?
  • 76. v 
 Cliente Designer gráfico 
 
 Atendimento 
 Designer/Arquiteto ?? ?
  • 77. v 
 Cliente Designer gráfico 
 
 Atendimento 
 Designer/ArquitetoOK OK
  • 78. v 
 Cliente Designer gráfico Front End 
 
 Atendimento 
 Designer/Arquiteto ? ? 
 
 Backend ?
  • 79. v 
 Cliente Designer gráfico Front End 
 
 Atendimento 
 Designer/Arquiteto ?? 
 
 Backend ? #%$&*@#$%$#
  • 80. v 
 Cliente Designer gráfico Front End 
 
 Atendimento 
 Designer/Arquiteto 
 <html> <style> <script> 
 Backend ? ?
  • 81. v 
 Cliente Designer gráfico Front End 
 
 Atendimento 
 Designer/Arquiteto 
 
 Backend ? ? ? <% - - %> #%$&*@#$%$#
  • 82. v 
 Cliente Designer gráfico Front End 
 
 Atendimento 
 Designer/Arquiteto 
 <html> <style> <script> 
 Backend <% - - %>
  • 83. v 
 Cliente Designer gráfico Front End 
 
 Atendimento 
 Designer/Arquiteto 
 <html> <style> <script> 
 Backend <% - - %> #%$&*@#$%$# ?? ?
  • 84. Além dos problemas de comunicação, um outro grande problema é:
  • 85. Marte 
 Objetivos e metas da empresa Vênus
 Necessidades dos usuários Desafio 2:
 
 Como atender ao mesmo tempo 
 os objetivos e as necessidades?
  • 86. Objetivos
 e metas 
 do projeto
  • 87. • Precisa de novos clientes/usuários.  • Quer que os clientes atuais visitem seu site com maior frequencia. • Quer aumentar a margem de lucro. • Você precisa aumentar sua audiência, seu público. • Quer diferenciar sua marca. • Gostaria de melhorar o retorno sobre o investimento (ROI). • Quer que seus clientes gastem mais a cada compra. • Está à procura de novos canais de distribuição. • Quer aumentar sua fatia do mercado (market share). • ...
  • 88. Reais
 necessidades dos usuários
  • 89. • Qualidade.  • Simplicidade. • velocidade. • Utilidade. • Usabilidade. • Acessibilidade. • Portabilidade. • Bom custo x benefício. • Resolver seu problema. • ...
  • 90. Objetivos
 e metas 
 do projeto Reais
 necessidades dos usuários
  • 91. a busca
 do equilíbrio
  • 92. empresa usuários Objetivos
 e metas do
 projeto Necessidades dos
 usuários
  • 93. um case em equilíbrio…
  • 94. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 95. Erico Fileno
  • 96. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 97. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 98. Observação e identificação de um problema...
  • 99. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 100. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  • 101. Observação = Descoberta
  • 102. desafio 1: 
 identificar objetivos e necessidades…
  • 103. Por Quê?Por Quê?Por Quê?Por Quê?Por Quê? Precisamos automatizar a Contabilidade Preciso do Balancete dia 5 e não dia 15 como atualmente! Necessito da Conta X do Balancete até o dia 5. Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas. Precisamos informar o valor das Reservas ao Banco Central até o dia 8! Por que se não informarmos as Reservas seremos multados!! Investigação Baseada em Perguntas
  • 104. Por que um Novo Sistema de Materiais ? LUCRO! Diretor Presidente ROUBO! Chefe do Almoxarifado JUROS! Diretor Financeiro PARADAS! Diretor de Produção Modelagem Participativa
  • 105. Uma proposta de briefing baseado em perguntas: 
 http://clearleft.s3.amazonaws.com/client- worksheet.doc ! http://bit.ly/a5tRzF
  • 106. Work is never finished, only abandoned. Paul Valéry
  • 107. Mas, na busca por soluções para os problemas, o que maioria dos sites faz?
  • 108. Ctrl + C à Ctrl + V para quase tudo...
  • 109. Resultado: replicamos tudo sem questionamentos... !
  • 110. Código de barras
  • 111. X
  • 112. 
 CAPTCHA

  • 113. Artigo 
 CAPTCHA: herói ou vilão? ! http://acessodigital.net/art_captcha-heroi-ou-vilao.html
  • 114. Captcha http://sam.zoy.org/pwntcha/

  • 115. Captcha http://sam.zoy.org/pwntcha/
 X
  • 116. Captcha 
 (solução inacessível e insegura) (http://www.webvisum.com/en/main/download)
  • 117. Menu DropDown
  • 118. X
  • 119. Clique aqui!
  • 120. Clique aqui!
  • 121. “Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “clique aqui” no Google.
  • 122. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009)
  • 123. Site da Itautec http://www.itautec.com.br (acesso em setembro 2009) X
  • 124. Ou ainda as mais recentes modinhas como paralax, modal, one single page , etc…
  • 125. http://conversionxl.com/dont-use-automatic-image- sliders-or-carousels-ignore-the-fad/
  • 126. http://conversionxl.com/dont-use-automatic-image- sliders-or-carousels-ignore-the-fad/
  • 127. Should I use carousel?
 http://shouldiuseacarousel.com ! Exemplo: ! King Host
 http://www.kinghost.com.br/
  • 128. Hamburger or not?
  • 129. http://techcrunch.com/2014/05/24/before-the-hamburger-button-kills-you/ Kill The Hamburger Button
  • 130. http://exisweb.net/mobile-menu-abtest Mobile Menu AB Tested: Hamburger Not the Best Choice?
  • 131. http://www.newfangled.com/ user_experience_mobile_menus_and_nav_burgers Mobile Navigation Menus and Great User Experience
  • 132. Mas por quê?
  • 133. Porque está na moda, todo mundo usa, porque não temos tempo e somos reativos... ! REWORK: Business book from 37signals
  • 134. E porque somos preguiçosos…
  • 135. Qual é o contexto do Mobile?
  • 136. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
  • 137. crescimento = oportunidade
  • 138. http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg
  • 139. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6
  • 140. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 36
  • 141. no Brasil
  • 142. http://services.google.com/fh/files/blogs/our_mobile_planet_brazil_pt_BR.pdf
  • 143. 1 Os smartphones são indispensáveis no cotidiano
  • 144. 2 ! Os smartphones transformaram o comportamento do consumidor
  • 145. 3 Os smartphones ajudam os usuários a navegar pelo mundo
  • 146. Mas cuidado...
  • 147. 4 ! Os smartphones mudam o modo como os consumidores fazem compras
  • 148. 5 ! Os smartphones ajudam os anunciantes a entrarem em contato com os clientes
  • 149. http://blog.i2fly.com/wp-content/uploads/2011/04/its-not-about-people-not-device_4.jpg
  • 150. Estatísticas Brasil
  • 151. GIF
 animado...
  • 152. No mundo
  • 153. Vários GIFs
 animados...
  • 154. http://pt.slideshare.net/wearesocialsg/social-digital-mobile-around-the-world-january-2014
  • 155. 
 mitos = verdades
  • 156. X
  • 157. mitos
  • 158. mitos X
  • 159. mitos
  • 160. mitos
  • 161. mitos V
  • 162. mitos do mundo mobile
  • 163. difícil
  • 164. é caro
  • 165. limitador
  • 166. é demorado
  • 167. Não atende as pessoas idosas
  • 168. Muito menos as pessoas com deficiência
  • 169. é irrelevante
  • 170. Será?
  • 171. as pessoas não vão 
 se registrar via mobile
  • 172. não vão comprar via mobile
  • 173. http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 18
  • 174. não vão criar conteúdo, fazer reviews, dar opinião, etc.
  • 175. sempre seremos surpreendidos pelo que as pessoas fazem na experiência mobile
  • 176. se as perguntas fizerem sentido e a interface tiver um bom design, as pessoas vão responder...
  • 177. MOBILE TO THE FUTURE
http://www.zeldman.com/2012/07/09/mobile-to-the-future-luke-wroblewski/
 • People are 2x more likely to buy on mobile; • 2.5x more likely to subscribe; • 3x more likely to be engaged.
  • 178. capacidades/ vantagens
 do mobile
  • 179. ! GPS
  • 180. Acelerômetro
  • 181. Giroscópio
  • 182. Bluetooth
  • 183. Bluetooth
  • 184. ! Áudio, vídeo e imagem
  • 185. NFC
  • 186. Sensores multitoque
  • 187. Em qualquer hora e local.
  • 188. Novas maneiras de interação e apresentação
  • 189. Integração com dispositivos externos…
  • 190. Novos clientes…
  • 191. https://www.youtube.com/watch?v=4UoE-87I-Hg
  • 192. Boa compatibilidade entre navegadores Mobile e HTML5
  • 193. Atualizações frequentes...
  • 194. limitações/restrições
 do mobile
  • 195. Muitas vezes, ao interagir com mobile, as pessoas estão em modo: “fritando o peixe e olhando o gato” e com 
 apenas um dos dedos...
  • 196. @lukew
  • 197. ‘Desktop is like “diving”…
  • 198. …while mobile is like “snorkling.”’ 
 by Hinman at Nokia http://www.slideshare.net/Rachel_Hinman
  • 199. O que 
 todos quando 
 mergulham 
 desejam?
  • 200. @lukew desktop
  • 201. @lukew tela grande
  • 202. @lukew tela grande energia
  • 203. @lukew tela grande energia rede consistente
  • 204. @lukew tela grande energia rede consistente teclado
  • 205. @lukew tela grande energia rede consistente teclado mouse
  • 206. @lukew tela grande energia rede consistente teclado mouse cadeira
  • 207. @lukew tela grande energia rede consistente teclado mouse cadeira mesa
  • 208. tela grande energia rede consistente teclado mouse cadeira mesa caneca de café @lukew
  • 209. @lukew mobile
  • 210. tela pequena @lukew
  • 211. tela pequena bateria @lukew
  • 212. tela pequena bateria rede inconsistente @lukew
  • 213. tela pequena bateria rede inconsistente dedo gordo @lukew
  • 214. tela pequena bateria rede inconsistente dedo gordo sensores @lukew
  • 215. Slide 107 
 http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-
  • 216. Como o Luli disse no Digitalks no Rio:
 
 “Nesse mundo Mobile, somos
 todos daltónicos e sofremos do Mal de Parkinson”
  • 217. https://twitter.com/lukew/media
  • 218. https://twitter.com/lukew/media
  • 219. Mobile And Accessibility: Why You Should Care And What You Can Do About It http://www.smashingmagazine.com/2014/05/21/mobile- accessibility-why-care-what-can-you-do/
  • 220. Outras limitações: # Capacidade de armazenamento e processamento reduzido. # Uma aplicação em HTML5 para mobile pode ser até 100 vezes mais lenta que em desktop. 
 http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
  • 221. perda de 80% do espaço
  • 222. @lukew
  • 223. e isso pode ser ótimo para o negócio...
  • 224. te força a priorizar...
 
 te força a manter o foco…
  • 225. Flickr desktop
 60 opções de menu...
  • 226. @lukew
  • 227. Flickr mobile
 7 opções de menu...
  • 228. Less is more...
  • 229. Restrições são boas para o design, pois te forçam a priorizar, a manter o foco
  • 230. mas cuidado… No ponto.
  • 231. 
 Os detalhes do comprador não podem ser visualizados na versão mobile.
  • 232. Como anda a qualidade dos 
 nossos sites nas versões desktop?
  • 233. Será?
  • 234. Uma breve avaliação de conhecidos sites de notícias sobre TI
  • 235. Independente do caminho escolhido deve-se…
  • 236. Mobile First Luke Wroblewski Livro: http://www.abookapart.com/products/mobile-first
  • 237. O Mobile First 
 veio para tirar 
 os sites Desktop 
 do CTI
  • 238. SIMPLICIDADE
  • 239. Paradoxo da escolha
  • 240. Elimine da interface itens que não sejam extremamente necessários...
  • 241. Desktop first! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  • 242. Mobile First! http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
  • 243. UX 
 Alguns problemas
  • 244. UX Designer torna-se especialista na criação de docs como Wireframes, site maps, diagramas de fluxo, inventários de conteúdos, taxonomias, mockups e documentos com especificações, ao invés de projetarem experiências.
  • 245. Inventário de Conteúdo
  • 246. Taxonomia
  • 247. Personas
  • 248. Storyboard
  • 249. Casos de Uso
  • 250. Caso de uso
  • 251. Benthmarking
  • 252. Fluxos
  • 253. 
 protótipo

  • 254. 
 protótipo navegável…

  • 255. Quando combinado com metodologias de desenvolvimento, os entregáveis produzidos pelos designers podem gerar um grande desperdício de tempo.
  • 256. LEAN UX
  • 257. http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux
  • 258. http://www.slideshare.net/uxconsulting/iaxil-lunch-talk-lean-ux Não é uma UX preguiçosa, mas é sobre minimizar 
 desperdícios.
  • 259. ! Dev.! Prod. Processos ! Design
 Pesquisa Pessoas ! ! ! ! ! Startup Negócios ! UX ! Agile ! Lean
  • 260. LEAN
  • 261. Vem da Lean Startup (Eric Ries)
  • 262. Só uma bala na agulha…
  • 263. Lean Starput (Eric Ries)
  • 264. Quer uma boa interface? 
 Teste…
  • 265. First clic test.
 
 (um tipo de teste rápido)

  • 266. 
 First clic test.
  
 Se o usuário não clicar certo a primeira vez, a chance de clicar certo depois será muito baixa.
  
 A técnica muito boa e rápida para testar se os seus links/ botões/arquitetura estão funcionando.
  
 Chame o usuário e crie alguns cenários para testar a homepage, como, por exemplo:
 “Sua senha foi clonada e você precisa mudá-la com urgência... Onde você clicaria para mudar a senha?” 
 E observe o usuário.
 
 

  • 267. ESPN Brasil– abril 2010 X
  • 268. • Nada de (re)design, o caminho é o co-design
  • 269. Parallel Design ! Estudo: Improving System Usability Through Parallel Design By JAKOB NIELSEN
 http://www.nngroup.com/articles/parallel-design/ 
 "In a case study o a screen-based telephone interface, measured usability when going from version 1 to version 2 was improved by 18% when using traditional iterative design and by 70% when using parallel design. In the case study, parallel design was about 73% more expensive than iterative design, so it cannot be recommended for all development projects, but it seems a promising usability engineering method for speeding up time-to-market”.
 
 Parallel Prototyping Leads to Better Design Results, More Divergence, and Increased Self-Efficac https://www.cs.cmu.edu/~spdow/files/PrototypingParallel-TOCHI10.pdf
  • 270. 
 
 
 
 
 
 $ # @ % ^&* @ $ * ( ) ^+! ˜ % ˆ & $ # @ $ % ˆ Y )@ Y % ˆ & * &*ˆ%$ˆ&(&% %%$#%#$ % $#%$ˆ$%ˆ$ ˆ % ˆ & $ # @ $ % ˆ Y )@ Y % ˆ & * fkdsjkfl jdskf jsdkl fjsdlk fjsdlk fjsdl fksjfklsfj klsjf lksdjk fljsdk fjsdklj fklsdj klfjsdlkjfklsd flksd jklfjksldjflks jdfklj sdklfj sdkljf lksjd fkljsdlkf jsdkl fjskdlj flksdj flkjsd kfjslk fjskdl jfklds jfklsj flkjsd flkjsdkl fjskl fjklsjfklsj flkjsd klgjkldfjglidjoisufd ikzdjfhdkf dhkkj hkudz fhku hzkd khf kh kjzhkjfhz jkdhfkzd jkfhsdiuf howshfjkw hrjkweh fk kjhd kjhkfdh kshf kjhd kjzhf kzhf kjdhfk hkz fhkz hfjk
  • 271. 
 
 
 
 
 

  • 272. 
 
 
 
 
 

  • 273. 
 
 
 
 
 

  • 274. 
 
 
 
 
 -
 — $%ˆ*W&E& %*@ˆ@#ˆ*$ 

  • 275. Google X: - Gere 8 versões para resolver o problema em 5 minutos
  • 276. horacio@mestr.es facebook.com/mestresbrasil (21) 9 9925-5404 - @horaciosoares
 Skype: horacio.soares Horácio Soares Obrigado!