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