DESENHO DE SOLUÇÕES INTERACTIVAS<br />PARA<br />DIVERSAS PLATAFORMAS<br />
QUEM SOU EU?<br />MAURO MARTINS<br />Software Developer<br />Web Developer<br />iPhone Developer<br />AUG Porto Co-Manager...
AGENDA<br />Novo paradigma?<br />Responsive Web Design<br />Aplicações VS Websites<br />Rato VS Corpo<br />Less is more!<b...
amigahistory.co.uk<br />
flickr.com<br />
apple.com<br />
apple.com<br />
NOVO PARADIGMA?<br />Desktop<br />Laptop<br />Smartphones<br />Tablets<br />Consolas<br />Quiosquesmultimédia<br />Instala...
NOVO PARADIGMA?<br />Desktop<br />Laptop<br />Smartphones<br />Tablets<br />Consolas<br />Quiosquesmultimédia<br />Instala...
NOVO PARADIGMA?<br />
NOVO PARADIGMA?<br />Todos com diferentestamanhos, resoluções,<br />formas de utilização!<br />
NOVO PARADIGMA?<br />Apenasos smartphones*<br />* Smartphones maisvendidosnos EUA<br />
OS CLIENTES?<br />QUEREM TUDO!<br />Desktop + Smartphones + Tablets!<br />e o quemaishouver…<br />
OS CLIENTES?<br />Desktop + Smartphones + Tablets!<br />meusite.css<br />m.meusite.css<br />tablet.meusite.css<br /><ul><l...
m.meusite.com
tablet.meusite.com</li></li></ul><li>RESPONSIVE WEB DESIGN!<br />
RESPONSIVE WEB DESIGN<br />Uma “fundação” flexível<br />Layouts com percentagens<br />Imagens com percentagensmáximas<br /...
RESPONSIVE WEB DESIGN<br /><ul><li>http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/</li></li></ul><li>RESPONSIVE WEB DESIG...
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/</li></li></ul><li>RESPONSIVE WEB DESIG...
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/</li></li></ul><li>RESPONSIVE WEB DESIG...
OS CLIENTES (parte2)<br />Desktop + Smartphones + Tablets!<br /><ul><li>meusite.com
m.meusite.com
tablet.meusite.com
?</li></li></ul><li>OS CLIENTES (parte2)<br />Desktop + Smartphones + Tablets!<br /><ul><li>meusite.com
m.meusite.com
tablet.meusite.com
Aplicações!</li></li></ul><li>APLICAÇÕES VS SITES<br />Soluçãoquevariabastanteconformecadasituação!<br />
APLICAÇÕES VS SITES<br />Soluçãoquevariabastanteconformecadasituação!<br />
COMO TRANSFORMAR O<br />NOSSO SITE EM UMA APLICAÇÃO?<br />* Tambémfunciona com os sites mobile<br />
LESS IS MORE!<br />
LESS IS MORE<br />Menosfuncionalidades<br />Navegaçãorápida e simples<br />Nãoterinformaçãodesnecessária<br />Hierarquizar...
LESS IS MORE<br />
LESS IS MORE<br />
RATO VS CORPO<br />
RATO VS CORPO<br />
RATO VS CORPO<br />48px<br />
RATO VS CORPO<br />
RATO VS CORPO<br />
Upcoming SlideShare
Loading in …5
×

Desenho de soluções interactivas para diversas plataformas

1,895 views

Published on

-- Os slides tinham um gradiente que não passou para o upload --

O workshop que decorreu na FNAC de Santa Catarina e foi patrocinado pelo centro de formação FLAG (www.flag.pt)

Speaker: Mauro Martins

Agenda:
- Um novo paradigma?
- Tantos dispositivos e todos tão diferentes;
- Do teclado e rato para a utilização "natural";
- Aplicações VS Websites;
- Dicas para criar uma boa aplicação;

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

  • Be the first to like this

No Downloads
Views
Total views
1,895
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • AMIGA 500
  • SPECTRUM 48k
  • AIR
  • IPAD
  • ATENÇÃO AOS DPI
  • REGRA DOS 20% DO SITE -&gt; APLICAÇÃO!
  • NAO TEM INFORMACAO DESNECESSARIA!POUCAS FUNCIONALIDADES POR ECRA!
  • REGRA DOS 20% DO SITE -&gt; APLICAÇÃO!
  • REGRA DOS 20% DO SITE -&gt; APLICAÇÃO!
  • REGRA DOS 20% DO SITE -&gt; APLICAÇÃO!
  • IPOD
  • Desenho de soluções interactivas para diversas plataformas

    1. 1. DESENHO DE SOLUÇÕES INTERACTIVAS<br />PARA<br />DIVERSAS PLATAFORMAS<br />
    2. 2. QUEM SOU EU?<br />MAURO MARTINS<br />Software Developer<br />Web Developer<br />iPhone Developer<br />AUG Porto Co-Manager<br />mauroalexandremartins@gmail.com<br />imauro.com/blog<br />@Mauredo<br />linkedin.com/in/mauromartins<br />
    3. 3. AGENDA<br />Novo paradigma?<br />Responsive Web Design<br />Aplicações VS Websites<br />Rato VS Corpo<br />Less is more!<br />Dicasparacriaruma boa aplicação<br />
    4. 4. amigahistory.co.uk<br />
    5. 5. flickr.com<br />
    6. 6. apple.com<br />
    7. 7. apple.com<br />
    8. 8. NOVO PARADIGMA?<br />Desktop<br />Laptop<br />Smartphones<br />Tablets<br />Consolas<br />Quiosquesmultimédia<br />Instalações<br />TV?<br />
    9. 9. NOVO PARADIGMA?<br />Desktop<br />Laptop<br />Smartphones<br />Tablets<br />Consolas<br />Quiosquesmultimédia<br />Instalações<br />TV?<br />
    10. 10. NOVO PARADIGMA?<br />
    11. 11. NOVO PARADIGMA?<br />Todos com diferentestamanhos, resoluções,<br />formas de utilização!<br />
    12. 12. NOVO PARADIGMA?<br />Apenasos smartphones*<br />* Smartphones maisvendidosnos EUA<br />
    13. 13. OS CLIENTES?<br />QUEREM TUDO!<br />Desktop + Smartphones + Tablets!<br />e o quemaishouver…<br />
    14. 14. OS CLIENTES?<br />Desktop + Smartphones + Tablets!<br />meusite.css<br />m.meusite.css<br />tablet.meusite.css<br /><ul><li>meusite.com
    15. 15. m.meusite.com
    16. 16. tablet.meusite.com</li></li></ul><li>RESPONSIVE WEB DESIGN!<br />
    17. 17. RESPONSIVE WEB DESIGN<br />Uma “fundação” flexível<br />Layouts com percentagens<br />Imagens com percentagensmáximas<br />Media Queries paraesconder / modificarobjectos<br />
    18. 18. RESPONSIVE WEB DESIGN<br /><ul><li>http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
    19. 19. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/</li></li></ul><li>RESPONSIVE WEB DESIGN<br /><ul><li>http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html
    20. 20. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/</li></li></ul><li>RESPONSIVE WEB DESIGN<br /><ul><li>http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
    21. 21. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/</li></li></ul><li>RESPONSIVE WEB DESIGN<br />CSS 2<br /><link rel="stylesheet" type="text/css" href="core.css" media="screen" /><br /><link rel="stylesheet" type="text/css" href="print.css" media="print" /><br />CSS 3<br /><link rel="stylesheet“<br />type="text/css“<br />media="screenand(max-device-width: 480px)" href="shetland.css" /><br /><link rel="stylesheet“<br />type="text/css“<br />media="screenand (max-device-width: 480px)<br />and (resolution: 163dpi)" href="shetland.css" /><br />@media screenand (max-device-width: 480px) {<br />.column { float: none; }<br />}<br />
    22. 22. OS CLIENTES (parte2)<br />Desktop + Smartphones + Tablets!<br /><ul><li>meusite.com
    23. 23. m.meusite.com
    24. 24. tablet.meusite.com
    25. 25. ?</li></li></ul><li>OS CLIENTES (parte2)<br />Desktop + Smartphones + Tablets!<br /><ul><li>meusite.com
    26. 26. m.meusite.com
    27. 27. tablet.meusite.com
    28. 28. Aplicações!</li></li></ul><li>APLICAÇÕES VS SITES<br />Soluçãoquevariabastanteconformecadasituação!<br />
    29. 29. APLICAÇÕES VS SITES<br />Soluçãoquevariabastanteconformecadasituação!<br />
    30. 30. COMO TRANSFORMAR O<br />NOSSO SITE EM UMA APLICAÇÃO?<br />* Tambémfunciona com os sites mobile<br />
    31. 31. LESS IS MORE!<br />
    32. 32. LESS IS MORE<br />Menosfuncionalidades<br />Navegaçãorápida e simples<br />Nãoterinformaçãodesnecessária<br />Hierarquizarbem a informaçãoparacadaecrã<br />Usarmetáforas do dia-a-dia<br />Utilizargestosjáapreendidos<br />
    33. 33. LESS IS MORE<br />
    34. 34. LESS IS MORE<br />
    35. 35. RATO VS CORPO<br />
    36. 36. RATO VS CORPO<br />
    37. 37. RATO VS CORPO<br />48px<br />
    38. 38. RATO VS CORPO<br />
    39. 39. RATO VS CORPO<br />
    40. 40. RATO VS CORPO<br />
    41. 41. RATO VS CORPO<br />Ternoção do corpohumano<br />Validarbem as nossasescolhas a nível de design<br />Interacçõesfrequentesdevemestarnazona inferior;<br />Fazerbotões com +/- 48px<br />
    42. 42. DICAS PARA SEREM BEM SUCEDIDOS<br />Encontrar um problema<br />Resolver esse problema<br />Criar um nicho de mercado<br />
    43. 43. CONCLUSÃO<br /><ul><li>Ponderarbastantecadadecisão!
    44. 44. Pensar de forma global!
    45. 45. Tentarusarelementosfluídos e adaptáveis
    46. 46. Ternoção do nossocorpocomoobjectointeractivo
    47. 47. Menosémais!
    48. 48. Estaratento a problemas e vê-los comooportunidades!</li></li></ul><li>OBRIGADO!<br />Questões?<br />mauroalexandremartins@gmail.com<br />imauro.com/blog<br />@Mauredo<br />linkedin.com/in/mauromartins<br />

    ×