Transcript
Page 1: Responsive Design - Um nome bonito para um conceito antigo

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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