DESENHO DE SOLUÇÕES INTERACTIVASPARA

DIVERSAS PLATAFORMAS

QUEM SOU EU?

• Software Developer• Web Developer• iPhone Developer• AUG Porto Co-Manager

mauroalexandremartins@gmail.comimauro.com/blog@Mauredolinkedin.com/in/mauromartins

MAURO MARTINS

AGENDA

• Novo paradigma?

• Responsive Web Design

• Aplicações VS Websites

• Rato VS Corpo

• Less is more!

• Dicas para criar uma boa aplicação

amigahistory.co.uk

flickr.com

apple.com

apple.com

• Desktop

• Laptop

• Smartphones

• Tablets

• Consolas

• Quiosques multimédia

• Instalações

• TV?

NOVO PARADIGMA?

• Desktop

• Laptop

• Smartphones

• Tablets

• Consolas

• Quiosques multimédia

• Instalações

• TV?

NOVO PARADIGMA?

Desktop

Utilização Casa

Ecrã Médio / Grande

Interacção Teclado + Rato

NOVO PARADIGMA?

Desktop Smartphone Tablet TV

Utilização Casa Rua Casa + Rua Casa

Ecrã Médio / Grande Pequeno Pequeno Grande

Interacção Teclado + Rato Tacto Tacto Comando

Todos com diferentes tamanhos, resoluções,formas de utilização!

NOVO PARADIGMA?

Telefones Ecrã Resoluções

iPhone 4 3.2’’ 640 x 960

HTC Aria 3.2’’ 320 x 480

HTC Droid Incredible 3.7’’ 480 x 800

HTC HD2 4.3’’ 480 x 800

HTC Evo 4.3’’ 480 x 800

Nokia N900 3.5’’ 480 x 800

* Smartphones mais vendidos nos EUA

Apenas os smartphones*

NOVO PARADIGMA?

QUEREM TUDO!

Desktop + Smartphones + Tablets!

e o que mais houver…

OS CLIENTES?

Desktop + Smartphones + Tablets!

OS CLIENTES?

• meusite.com• m.meusite.com• tablet.meusite.com

meusite.cssm.meusite.csstablet.meusite.css

RESPONSIVE WEB DESIGN!

• Uma “fundação” flexível– Layouts com percentagens

– Imagens com percentagens máximas

• Media Queries para esconder / modificar objectos

RESPONSIVE WEB DESIGN

• http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

RESPONSIVE WEB DESIGN

• http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

RESPONSIVE WEB DESIGN

• http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/• http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

RESPONSIVE WEB DESIGN

<link rel="stylesheet" type="text/css" href="core.css" media="screen" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

CSS 2

<link rel="stylesheet“ type="text/css“ media="screen and (max-device-width: 480px)" href="shetland.css" />

@media screen and (max-device-width: 480px) { .column { float: none; }}

<link rel="stylesheet“ type="text/css“ media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" />

CSS 3

RESPONSIVE WEB DESIGN

OS CLIENTES (parte2)

Desktop + Smartphones + Tablets!

• meusite.com• m.meusite.com• tablet.meusite.com

• ?

OS CLIENTES (parte2)

Desktop + Smartphones + Tablets!

• meusite.com• m.meusite.com• tablet.meusite.com

• Aplicações!

APLICAÇÕES VS SITES

Aplicações Sites

Dedicadas Servem para tudo

Podemos ser mais criativos Temos de nos restringir a certas coisas

Vários dispositivos = Várias plataformas Uma web

Maiores custos ao longo do tempo Corrige uma vez, corrige em todo o lado

Solução que varia bastante conforme cada situação!

APLICAÇÕES VS SITES

Aplicações Sites

Dedicadas Servem para tudo

Podemos ser mais criativos Temos de nos restringir a certas coisas

Vários dispositivos = Várias plataformas Uma web

Maiores custos ao longo do tempo Corrige uma vez, corrige em todo o lado

Solução que varia bastante conforme cada situação!

COMO TRANSFORMAR ONOSSO SITE EM UMA APLICAÇÃO?

* Também funciona com os sites mobile

LESS IS MORE!

• Menos funcionalidades

• Navegação rápida e simples

• Não ter informação desnecessária

• Hierarquizar bem a informação para cada ecrã

• Usar metáforas do dia-a-dia

• Utilizar gestos já apreendidos

LESS IS MORE

LESS IS MORE

LESS IS MORE

RATO VS CORPO

RATO VS CORPO

RATO VS CORPO

48px

RATO VS CORPO

RATO VS CORPO

RATO VS CORPO

• Ter noção do corpo humano• Validar bem as nossas escolhas a nível de design– Interacções frequentes devem estar na zona inferior;– Fazer botões com +/- 48px

RATO VS CORPO

DICAS PARA SEREM BEM SUCEDIDOS

Criar um nicho de mercado

Encontrar um problema

Resolver esse problema

CONCLUSÃO

• Ponderar bastante cada decisão!• Pensar de forma global!• Tentar usar elementos fluídos e adaptáveis• Ter noção do nosso corpo como objecto interactivo• Menos é mais!• Estar atento a problemas e vê-los como oportunidades!

OBRIGADO!

Questões?

mauroalexandremartins@gmail.comimauro.com/blog@Mauredolinkedin.com/in/mauromartins