Documentos de Académico
Documentos de Profesional
Documentos de Cultura
@analauragomes
Bem vind@s!
analauragomes@gmail.com @analauragomes emblema.art.br webdemais.com.br Docente, palestrante e consultora nas rea de Web e Computao Grfica Colaboradora do W3C Escritrio Brasil Publicaes:
Editora Senac-SP: XHTML/CSS Criao de Pginas Web, Dreamweaver CS5, Fireworks CS5 Editora Abril: Coleo Clique a Clique, O curso de informtica da Abril
96,66%
3,34%
96,66%
3,34%
2.605.200
comScore | 22/11/2011
http://bit.ly/wTMG1S
5 - Design Responsivo / Adaptativo
1.014.000
78 milhes
http://bit.ly/wpHhNj
7 - Design Responsivo / Adaptativo
32 milhes de usurios conectados por disp. mveis Estimativa CISCO para o Brasil em 2015
http://bit.ly/wYRpek
9 - Design Responsivo / Adaptativo
No s tamanho...
Tipo
celular tablets e-readers
Recursos
touch caneta memria bateria SO linguagens navegador
Predisposio / Expectativa
Estratgias de adaptao
no fazer nada
1 contedo
1 contedo
Vrios estilos
www.eng.com.br/designresponsivo
21 - Design Responsivo / Adaptativo
Vrios estilos
www.eng.com.br/designresponsivo
22 - Design Responsivo / Adaptativo
Contedo
XHTML-MP HTML5
Forma
CSS2 CSS3
Interao
JavaScript
[DOM]
http://www.adobe.com/br/products/dreamweaver.html
25 - Design Responsivo / Adaptativo
Dicas contedo
Dicas contedo
Procura por fatos. AGORA!
Ateno... Estado de esprito...
Dicas contedo
Simplicidade + Objetividade
28 - Design Responsivo / Adaptativo
Dicas contedo
O que mais importante aparece no topo da pgina
Dicas contedo
Evite o que no vai funcionar
framesets tabelas
Dicas interao
lembre-se dos gestos no tem mouse over projetar para o tamanho do dedo (40/80px)
Dicas interao
rolagem vertical (contedo e menu) navegao fcil de aprender
Dicas interao
links e acessos inteligentes acesso ao site normal
Dicas layout
usar poucas fontes na pgina (2 ou 3) usar o espao em branco para separar os elementos no criar distrativos e empecilhos para acesso ao contedo
34 - Design Responsivo / Adaptativo
Dicas layout
usar poucas cores e grficos/imagens otimizar imagens no usar background com fotos usar cones como background no CSS
35 - Design Responsivo / Adaptativo
Dicas layout
d ao usurio opes de layout claro e escuro manter consistncia com verso desktop
Planeje antes
Foco no usurio
Foco no usurio
experincia de uso no focar no aparelho mas no recurso
Design Responsivo/Adaptativo
1. Introduo ao Design Responsivo / Adaptativo 2. Grids
O design para a flexibilidade Layout estruturado com CSS
4. Media queries
Importncia dos Grids Grids Estrutura para grids com HTML5, e seus ganhos
O que so Adobe Dreamweaver CS5 HTML5 pack / Dreamweaver CS5.5 Exemplos de como utilizar Compatibilidade entre navegadores
Elementos para contedo incorporado com HTML5 Imagens flexveis Imagens transparentes Ajustes para IE6 Propriedades para imagens com CSS3
Dicas sobre desenho para mobilidade jQueryMobile Fireworks CSS3 mobile pack Dreamweaver CS5.5 jQuery mobile framework
Design Responsivo/Adaptativo
Curso prtico, onde os exerccios envolvem:
Modelagem Criao de arquivos externos de CSS e CSS3 Tcnicas de migrao ao Design Responsivo/Adaptativo Aplicaes e particularizaes no Dreamweaver CS5.5
Obrigada e sucesso
@analauragomes :: analauragomes@gmail.com :: www.emblema.art.br www.webdemais.com.br