Layout Fluido com Tableless Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
Indicação <ul><li>Sistemas </li></ul><ul><ul><li>http://www.google.com/analytics/   </li></ul></ul><ul><li>Webmail </li></...
Convergência <ul><li>A importancia do layout fluido na era de transição 800x600 // 1024x768 e de convergencia </li></ul>
Cuidados <ul><li>Texto muito largo </li></ul><ul><ul><li>7 - 11 palavras por linha </li></ul></ul><ul><ul><li>http://psych...
Tipos de layout fluido <ul><li>Pseudo-fluido </li></ul><ul><ul><li>http://meetweb.com.br/mw2/agencia_diferenciais.asp   </...
Tipos de layout fluido <ul><li>Fluido por resolução </li></ul><ul><ul><li>http://www.themaninblue.com/experiment/Resolutio...
Praticando
Setup <ul><li>Demonstração do ECOTRIP </li></ul><ul><li>Preparação  </li></ul><ul><ul><li>Arquivos </li></ul></ul><ul><ul>...
Praticando <ul><li>Definir conceitualmente elementos fixos e elementos fluidos! </li></ul><ul><li>Descontruindo a largura ...
Importante <ul><li>Exigências </li></ul><ul><ul><li>Regra, apesar do IE6 não obedecer...  float só onde tem WIDHT;  </li><...
Conclusões delicious.com/hugodiasneto/sdd
Layout Fluido com Tableless Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br Dúvidas?
Próximos SlideShares
Carregando em…5
×

Palestra / Layout Fluido Com Tableless / SDD

2.379 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
2.379
No SlideShare
0
A partir de incorporações
0
Número de incorporações
57
Ações
Compartilhamentos
0
Downloads
27
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Palestra / Layout Fluido Com Tableless / SDD

  1. 1. Layout Fluido com Tableless Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
  2. 2. Indicação <ul><li>Sistemas </li></ul><ul><ul><li>http://www.google.com/analytics/ </li></ul></ul><ul><li>Webmail </li></ul><ul><ul><li>http://gmail.com/ </li></ul></ul><ul><li>Buscas </li></ul><ul><ul><li>http://www.google.com.br/ </li></ul></ul>
  3. 3. Convergência <ul><li>A importancia do layout fluido na era de transição 800x600 // 1024x768 e de convergencia </li></ul>
  4. 4. Cuidados <ul><li>Texto muito largo </li></ul><ul><ul><li>7 - 11 palavras por linha </li></ul></ul><ul><ul><li>http://psychology.wichita.edu/surl/usabilitynews/42/text_length.htm </li></ul></ul><ul><li>Layouts onde o design é muito engessado </li></ul>
  5. 5. Tipos de layout fluido <ul><li>Pseudo-fluido </li></ul><ul><ul><li>http://meetweb.com.br/mw2/agencia_diferenciais.asp </li></ul></ul><ul><li>Fluido total </li></ul><ul><ul><li>http://news.google.com/ </li></ul></ul><ul><li>Fluido artificial </li></ul><ul><ul><li>http://www.bradesco.com.br/ </li></ul></ul><ul><ul><li>http://www.terra.com.br/ </li></ul></ul><ul><li>Fluido em blocos </li></ul><ul><ul><li>http://www.uxmag.com/features/101/experiencing-and-designing-experience </li></ul></ul>
  6. 6. Tipos de layout fluido <ul><li>Fluido por resolução </li></ul><ul><ul><li>http://www.themaninblue.com/experiment/ResolutionLayout/ </li></ul></ul>
  7. 7. Praticando
  8. 8. Setup <ul><li>Demonstração do ECOTRIP </li></ul><ul><li>Preparação </li></ul><ul><ul><li>Arquivos </li></ul></ul><ul><ul><li>SSI > DW Templates </li></ul></ul><ul><ul><li>Preview in browser – FF </li></ul></ul><ul><ul><li>Analise do HTML e CSS </li></ul></ul>
  9. 9. Praticando <ul><li>Definir conceitualmente elementos fixos e elementos fluidos! </li></ul><ul><li>Descontruindo a largura fixa </li></ul><ul><ul><li>Retirar largura dos boxes principais </li></ul></ul><ul><li>Galerias fluidas </li></ul><ul><ul><li>Clear > Float </li></ul></ul><ul><li>2 colunas de conteúdo complementares em Atividades > Rapel </li></ul><ul><ul><li>Float nas 2 </li></ul></ul><ul><ul><li>Clear:both após </li></ul></ul><ul><li>Blocos da homepage </li></ul><ul><ul><li>Formação de imagem </li></ul></ul><ul><li>MAX-WIDTH pra evitar blocos muito largos de texto </li></ul><ul><ul><li>Problemas com o IE6 </li></ul></ul><ul><ul><li>Soluções com JS </li></ul></ul><ul><ul><li>Menu deve ter largura maxima declarada </li></ul></ul><ul><li>FAUX COLUNS http://www.alistapart.com/articles/fauxcolumns/ </li></ul><ul><li>Fluido total na home? </li></ul>
  10. 10. Importante <ul><li>Exigências </li></ul><ul><ul><li>Regra, apesar do IE6 não obedecer... float só onde tem WIDHT; </li></ul></ul><ul><ul><li>Tem que ter float em todos os blocos para &quot;descer&quot;. Ex.: Rodapé que sobe.. :( </li></ul></ul><ul><li>Evitar position:absolute quando estiver usando float </li></ul>
  11. 11. Conclusões delicious.com/hugodiasneto/sdd
  12. 12. Layout Fluido com Tableless Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br Dúvidas?

×