• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Responsive Design - Um nome bonito para um conceito antigo
 

Responsive Design - Um nome bonito para um conceito antigo

on

  • 256 views

 

Statistics

Views

Total Views
256
Views on SlideShare
256
Embed Views
0

Actions

Likes
0
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

    Responsive Design - Um nome bonito para um conceito antigo Responsive Design - Um nome bonito para um conceito antigo Presentation Transcript

    • 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
    • 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?
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Para não fazer isso…
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Ou isso…
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|E sim, isso…
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|,isso…
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|E isso…
    • 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.
    • 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á
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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.
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|NA PRÁTICA
    • 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.
    • 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:
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|media queries
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Visualmente:EM UM COMPUTADOR:
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Visualmente:EM UM TABLET:
    • P: 555.123.4568 F: 555.123.4567123 West Main Street, New York,NY 10001www.rightcare.com|Visualmente:EM UM SMARTPHONE:
    • 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.
    • 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
    • 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…?
    • 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