Embed Size (px)
DESCRIPTION
-- Os slides tinham um gradiente que não passou para o upload -- O workshop que decorreu na FNAC de Santa Catarina e foi patrocinado pelo centro de formação FLAG (www.flag.pt) Speaker: Mauro Martins Agenda: - Um novo paradigma? - Tantos dispositivos e todos tão diferentes; - Do teclado e rato para a utilização "natural"; - Aplicações VS Websites; - Dicas para criar uma boa aplicação;
Citation preview
DESENHO DE SOLUÇÕES INTERACTIVASPARA
DIVERSAS PLATAFORMAS
QUEM SOU EU?
• Software Developer• Web Developer• iPhone Developer• AUG Porto Co-Manager
[email protected]/[email protected]/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!
