Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design - Um nome bonito para um conceito antigo

316 views

Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

Responsive Design - Um nome bonito para um conceito antigo

  1. 1. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Responsive DesignUm nome bonito pra um conceito antigoAndré Luiz Batista – ASA Inovação e Tecnologia (www.asainovacao.com.br)DISCUSSÃO SOBRE
  2. 2. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|MAS PORQUE?Porque falar sobre Design em um grupo de Práticasde Software?
  3. 3. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Para não fazer isso…
  4. 4. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Ou isso…
  5. 5. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|E sim, isso…
  6. 6. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|,isso…
  7. 7. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|E isso…
  8. 8. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|UI E UX DESIGNERUser Interface – UIUser eXperience - UXNem sempre temos um profissionaldesses!Interface homem-máquinaPercepções e emoções do usuário aoutilizar o produto. Envolve o Fluxo deUso.
  9. 9. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Logo, temos que aprender aconstuir projetos intuitivos ebonitosVamos lá
  10. 10. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|AMBIENTE CONTROLADOAté pouco tempo atrástinhamos somente osDesktops
  11. 11. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|IT’S MADNESS!Hoje, com a tecnologia móvel,existe um mar de dispositivos.+resoluções+ telas
  12. 12. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|ONIPRESENÇA DOS SISTEMAS“Nós nos responsabilizamos aapresentar a informação deforma acessível e confortávelpara diversos meios de acesso”Diego Eis, Tableless.com.br
  13. 13. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|PROJETANDO PARATODOSDeve-se planejar se o conteúdoserá acessado por diversosdispositivos
  14. 14. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|EM WEB DESIGN HTMLCSSO poder do HTML5 eCSS3.Novos dispositivos jáincentivam o HTML5.GOOGLE GLASS
  15. 15. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|NA PRÁTICA com HTMLMedia Queries:É a utilização de Media Types com uma ou maisexpressões envolvendo características de umamedia para definir formatações para diversosdispositivos. O browser ou a aplicação lê asexpressões definidas na query, caso o dispositivo seencaixe nestas requisições, o CSS será aplicado.
  16. 16. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|NA PRÁTICA
  17. 17. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Tipos de media queriesMedia Queriesall, braille, embossed, handheld, print, projection,screen, speech, tty(teletypes ou terminais), tv.
  18. 18. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|media queriesMonte sua própria query de acordo com o target:
  19. 19. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|media queries
  20. 20. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Visualmente:EM UM COMPUTADOR:
  21. 21. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Visualmente:EM UM TABLET:
  22. 22. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Visualmente:EM UM SMARTPHONE:
  23. 23. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|FUNÇÕES DIFERENTESCada dispositivo pode ter funções diferentespara o mesmo sistema.Ex: Um sistema de pedidos.No PC: Cadastros e Acompanhamento em Gráficos.No Smartphone e Tablet: Realizar Vendas.
  24. 24. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Referências:http://tableless.com.br/introducao-sobre-media-queries/http://tableless.com.br/introducao-ao-responsive-web-design/http://tableless.com.br/design-responsivo-foco-no-ser-humano/http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/Ou pelo link do paste.bin:http://pastebin.com/1DAkYi4n
  25. 25. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|O que você acha da RevoluçãoMóvel?Como ela implica na construção desistemas?O Desenvolvedor deve se preocuparcom UI, UX, Responsividade…?
  26. 26. P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Obrigado! :)André Luiz BatistaAsa Inovação e Tecnologiawww.asainovacao.com.br

×