Responsive Design - Um nome bonito para um conceito antigo
-
Upload
praticasdesoftware -
Category
Design
-
view
151 -
download
4
Transcript of Responsive Design - Um nome bonito para um conceito antigo
![Page 1: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/1.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Responsive DesignUm nome bonito pra um conceito antigo
André Luiz Batista – ASA Inovação e Tecnologia (www.asainovacao.com.br)
DISCUSSÃO SOBRE
![Page 2: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/2.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
MAS PORQUE?
Porque falar sobre Design em um grupo de Práticas
de Software?
![Page 3: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/3.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Para não fazer isso…
![Page 4: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/4.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Ou isso…
![Page 5: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/5.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
E sim, isso…
![Page 6: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/6.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
,isso…
![Page 7: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/7.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
E isso…
![Page 8: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/8.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
UI E UX DESIGNER
User Interface – UI
User eXperience - UX
Nem sempre temos um profissional
desses!
Interface homem-máquina
Percepções e emoções do usuário ao
utilizar o produto. Envolve o Fluxo de
Uso.
![Page 9: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/9.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Logo, temos que aprender a
constuir projetos intuitivos e
bonitos
Vamos lá
![Page 10: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/10.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
AMBIENTE CONTROLADO
Até pouco tempo atrás
tinhamos somente os
Desktops
![Page 11: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/11.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
IT’S MADNESS!
Hoje, com a tecnologia móvel,
existe um mar de dispositivos.
+
resoluções+ telas
![Page 12: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/12.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
ONIPRESENÇA DOS SISTEMAS
“Nós nos responsabilizamos a
apresentar a informação de
forma acessível e confortável
para diversos meios de acesso”Diego Eis, Tableless.com.br
![Page 13: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/13.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
PROJETANDO PARA
TODOS
Deve-se planejar se o conteúdo
será acessado por diversos
dispositivos
![Page 14: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/14.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
EM WEB DESIGN HTML
CSSO poder do HTML5 e
CSS3.
Novos dispositivos já
incentivam o HTML5.
GOOGLE GLASS
![Page 15: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/15.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
NA PRÁTICA com HTML
Media Queries:
É a utilização de Media Types com uma ou mais
expressões envolvendo características de uma
media para definir formatações para diversos
dispositivos. O browser ou a aplicação lê as
expressões definidas na query, caso o dispositivo se
encaixe nestas requisições, o CSS será aplicado.
![Page 16: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/16.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
NA PRÁTICA
![Page 17: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/17.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Tipos de media queries
Media Queries
all, braille, embossed, handheld, print, projection,
screen, speech, tty(teletypes ou terminais), tv.
![Page 18: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/18.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
media queries
Monte sua própria query de acordo com o target:
![Page 19: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/19.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
media queries
![Page 20: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/20.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Visualmente:EM UM COMPUTADOR:
![Page 21: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/21.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Visualmente:EM UM TABLET:
![Page 22: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/22.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Visualmente:EM UM SMARTPHONE:
![Page 23: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/23.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
FUNÇÕES DIFERENTES
Cada dispositivo pode ter funções diferentes
para o mesmo sistema.
Ex: Um sistema de pedidos.
No PC: Cadastros e Acompanhamento em Gráficos.
No Smartphone e Tablet: Realizar Vendas.
![Page 24: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/24.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.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
![Page 25: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/25.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
O que você acha da Revolução
Móvel?
Como ela implica na construção de
sistemas?
O Desenvolvedor deve se preocupar
com UI, UX, Responsividade…?
![Page 26: Responsive Design - Um nome bonito para um conceito antigo](https://reader030.fdocument.pub/reader030/viewer/2022020101/55acd1f41a28ab4a078b4608/html5/thumbnails/26.jpg)
P: 555.123.4568 F: 555.123.4567
123 West Main Street, New York,
NY 10001
www.rightcare.com|
Obrigado! :)
André Luiz Batista
Asa Inovação e Tecnologia
www.asainovacao.com.br