Responsive Design - Um nome bonito para um conceito antigo

  • View
    144

  • Download
    4

Embed Size (px)

Text of Responsive Design - Um nome bonito para um conceito antigo

PowerPoint Presentation

Responsive DesignUm nome bonito pra um conceito antigoAndr Luiz Batista ASA Inovao e Tecnologia (www.asainovacao.com.br)

DISCUSSO SOBREP: 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 Prticas de Software?P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|Para no 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 UI

User eXperience - UXNem sempre temos um profissional desses!Interface homem-mquinaPercepes e emoes do usurio ao utilizar o produto. Envolve o Fluxo de Uso.P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|Logo, temos que aprender a constuir projetos intuitivos e bonitosVamos lP: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|AMBIENTE CONTROLADOAt pouco tempo atrs tinhamos somente os Desktops

P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|

ITS MADNESS!Hoje, com a tecnologia mvel,existe um mar de dispositivos.+ resolues+ telasP: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|ONIPRESENA DOS SISTEMASNs nos responsabilizamos a apresentar a informao de forma acessvel e confortvel para diversos meios de acessoDiego Eis, Tableless.com.brP: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|PROJETANDO PARA TODOSDeve-se planejar se o contedo ser acessado por diversos dispositivosP: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|EM WEB DESIGNHTMLCSSO poder do HTML5 e CSS3.

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 PRTICA com HTMLMedia Queries: a utilizao de Media Types com uma ou mais expresses envolvendo caractersticas de uma media para definir formataes para diversos dispositivos. O browser ou a aplicao l as expresses definidas na query, caso o dispositivo se encaixe nestas requisies, o CSS ser aplicado.P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|NA PRTICA

P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|Tipos de media queriesMedia Queries

all, 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 prpria 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|FUNES DIFERENTESCada dispositivo pode ter funes diferentes para o mesmo sistema. Ex: Um sistema de pedidos.No PC: Cadastros e Acompanhamento em Grficos.No Smartphone e Tablet: Realizar Vendas.P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|Referncias: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/1DAkYi4nP: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|O que voc acha da Revoluo Mvel? Como ela implica na construo de sistemas?O Desenvolvedor deve se preocupar com UI, UX, Responsividade?P: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|Obrigado! :)

Andr Luiz BatistaAsa Inovao e Tecnologiawww.asainovacao.com.brP: 555.123.4568 F: 555.123.4567123 West Main Street, New York, NY 10001www.rightcare.com|