Palestra / SDD / Crossbrowsing

1.404 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
1.404
No SlideShare
0
A partir de incorporações
0
Número de incorporações
47
Ações
Compartilhamentos
0
Downloads
18
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Palestra / SDD / Crossbrowsing

  1. 1. Crossbrowsing Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br
  2. 2. O que é? <ul><li>Cross-browser refere-se à habilidade de um site, Aplicação Web, construtor HTML ou script side-client suportar múltiplos navegadores. </li></ul><ul><li>Esta aplicação deve ser construída através de uma forma de programação que utiliza tecnologias compatíveis com qualquer navegador Web que suporte as especificações do W3C. (...) (fonte: Wikipédia, a enciclopédia livre | http://pt.wikipedia.org/wiki/Cross-browser 10/4/2007 12h40) </li></ul>
  3. 3. Exemplos <ul><li>Rádio http://www.forrodorecanto.com.br/radio/index.asp </li></ul><ul><li>Form de acesso à extranet https://servicos.vivo.com.br/VOLWeb/LoginAction.do?foneArea=21&foneNumero=98741743 </li></ul><ul><ul><li>http://www.meetweb.com.br/clientes/infnet/ecotrip/vivo.html </li></ul></ul><ul><li>Os dados estão sendo carregados http://www.iweb.pt/SAPPortal </li></ul>
  4. 4. Exemplos <ul><li>Cursor do menu http://www.claro.com.br/portal/site/siteTA/?epi_menuItemID=65d4f00cbf2a86bb934c6f10d28051a0&epi_menuID=fc1060d610b546ea934c6f10d28051a0&epi_baseMenuID=05341fa85af675a8020fdda1908051a0&idlocal=50 </li></ul><ul><li>Rolagem horizontal http://www.tmn.pt/portal/site/tmn </li></ul><ul><li>Pra que tantas rolagens?! http://www.fil.pt/ </li></ul>
  5. 5. Marketshare atual dos navegadores Fonte: www.W3Schools.com/browsers | 10/4/2007 - 15h
  6. 6. Porque se preocupar com o crossbrowsing Fonte: www.css3.info/kill-ie6-to-let-css3-live 12/7/2007 18h
  7. 7. Como testar seu site em diversos navegadores <ul><li>Internet Explorer </li></ul><ul><ul><li>Multiples IEs (Problemas com conditional comments  ) http://tredosoft.com/Multiple_IE/ </li></ul></ul><ul><li>Extensions </li></ul><ul><ul><li>IE Tab (Mozilla) </li></ul></ul><ul><ul><li>Webdeveloper Toolbar (Mozilla) </li></ul></ul><ul><li>Screen Shots </li></ul><ul><ul><li>BrowserShots </li></ul></ul><ul><ul><li>Browsrcamp </li></ul></ul><ul><ul><li>iCapture </li></ul></ul><ul><li>Múltiplas partições </li></ul><ul><ul><li>Windows98 + IE5.5 </li></ul></ul><ul><ul><li>Windows XP + IE6 </li></ul></ul><ul><ul><li>Windows Vista + IE7 </li></ul></ul><ul><li>Máquinas virtuais </li></ul><ul><ul><li>Microsoft Virtual PC 2007 </li></ul></ul><ul><ul><li>VMware </li></ul></ul><ul><ul><li>PearPC - PowerPC Architecture Emulator </li></ul></ul>
  8. 8. Praticando... Crossbrowsing
  9. 9. Qual a jeito certo para começar
  10. 10. Ferramentas interessantes <ul><li>Firefox Webdeveloper toolbar </li></ul><ul><ul><li>Information > Display Element Information </li></ul></ul><ul><ul><li>Resize </li></ul></ul><ul><ul><li>IE Tab </li></ul></ul>
  11. 11. Box model <ul><li>Mais informações > http://www.torresburriel.com/box-model-hack.html </li></ul>Fonte: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug#_note-2 | 10/4/2007 – 17h
  12. 12. CSS <ul><li>CSS 2.1 </li></ul><ul><ul><li>http://www.w3.org/TR/CSS21/ </li></ul></ul><ul><ul><ul><li>FF2 </li></ul></ul></ul><ul><ul><ul><li>OP9 </li></ul></ul></ul><ul><ul><ul><li>IE7 </li></ul></ul></ul><ul><ul><li>http://www.meetweb.com.br/clientes/infnet/ecotrip/seletores_inteligentes.html </li></ul></ul><ul><li>CSS 3 </li></ul><ul><ul><li>http://css3.info </li></ul></ul>
  13. 13. HTML 5 <ul><li>www.WHATWG.org – que pressão! </li></ul><ul><li>Opera > </li></ul><ul><ul><li>http://devfiles.myopera.com/articles/67/example.html?search = </li></ul></ul><ul><ul><li>http://dev.opera.com/articles/view/improve-your-forms-using-html5/ </li></ul></ul>
  14. 14. Como diferenciar: Javascript.. <ul><li>Dreamweaver Check-bowser e demais scripts </li></ul><ul><li>Dynamic Drive Browser Sniffer Script </li></ul><ul><ul><li>www.dynamicdrive.com/dynamicindex9/browsersniffer.htm </li></ul></ul>
  15. 15. <ul><li>O que são </li></ul><ul><li>Porque evitar os hacks: </li></ul><ul><ul><li>Porque não estão dentro dos padrões web. http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.terra.com.br%2Fcapa%2F </li></ul></ul><ul><ul><li>O IE7 simplesmente ignora! http://meetweb.com.br/clientes/infnet/ecotrip/hacks.html http://meetweb.com.br/clientes/infnet/ecotrip/hacks2.html </li></ul></ul>Como diferenciar: Hacks <style type=&quot;text/css&quot;> html > body { background: red; } body { background: yellow; } </style> <ul><li><style type=&quot;text/css&quot;> </li></ul><ul><ul><ul><ul><li>body { background: red; _background: yellow; } </li></ul></ul></ul></ul><ul><ul><ul><li></style> </li></ul></ul></ul>
  16. 16. Como diferenciar: Conditional Comments – o segredo! <ul><li><!--[if IE]> </li></ul><ul><li>Este navegador é internet explorer...<br> </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if lt IE 5.5]> </li></ul><ul><li>De acordo com o comentário condicional este é o Internet Explorer </li></ul><ul><li>versão menor ou igual a 5.5<br> </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if IE 5]> </li></ul><ul><li>IE 5 Qualquer atualização > Peça de museu... </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if IE 5.5]> </li></ul><ul><li>IE 5.5 Atualização 5 > A mais bugada da história </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if gte IE 5]> </li></ul><ul><li><br>IE 5 ou superior<br> </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if lt IE 6]> </li></ul><ul><li>Se for inferior ao IE6 </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if IE 6]> </li></ul><ul><li>IE 6 > Clássico... Use Firefox: é mais rápido! </li></ul><ul><li><![endif]--> </li></ul><ul><li><!--[if gte IE 7]> </li></ul><ul><li>IE 7 > Melhorou bastante... Mas ainda prefiro o Firefox. </li></ul><ul><li><![endif]--> </li></ul>
  17. 17. Na prática <ul><li>Correções </li></ul><ul><ul><li>Mozilla </li></ul></ul><ul><ul><ul><li>Borda com canto arredondado </li></ul></ul></ul><ul><ul><ul><ul><li>Nifty Corners Cube - Tutorial </li></ul></ul></ul></ul><ul><ul><li>IE6+7 </li></ul></ul><ul><ul><ul><li>Barra de rolagem colorida </li></ul></ul></ul><ul><ul><ul><li>Botão fechar em galeria </li></ul></ul></ul><ul><ul><li>IE6 </li></ul></ul><ul><ul><ul><li>Distância do :hover no menu principal </li></ul></ul></ul><ul><ul><ul><li>Distancia do H1 interna para o cabeçalho maior que no mozilla </li></ul></ul></ul><ul><ul><ul><li>Margens do menu de navegação local (atividades) </li></ul></ul></ul><ul><ul><ul><li>Largura da DIV na home </li></ul></ul></ul><ul><ul><ul><li>Titulo de galeria não assume largura total </li></ul></ul></ul><ul><ul><ul><li>Botão de contato não assume estilo. </li></ul></ul></ul><ul><ul><li>IE7 </li></ul></ul><ul><ul><ul><li>Barra de rolagem forçada em roteiros </li></ul></ul></ul>
  18. 18. Estilos especiais <ul><li>Proprietários </li></ul><ul><ul><li>Mozilla </li></ul></ul><ul><ul><ul><li>http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions </li></ul></ul></ul><ul><ul><li>mozilla.css </li></ul></ul><ul><ul><li>#overlay - lightbox </li></ul></ul><ul><ul><li>Incompatíveis com o IE6 </li></ul></ul><ul><ul><ul><li>:focus </li></ul></ul></ul><ul><ul><ul><ul><li>Contato </li></ul></ul></ul></ul><ul><ul><ul><li>:hover </li></ul></ul></ul><ul><ul><ul><ul><li>Pacotes </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Contato </li></ul></ul></ul></ul><ul><ul><ul><ul><li>busca </li></ul></ul></ul></ul>
  19. 19. Conclusões Crossbrowsing
  20. 20. Livros recomendados <ul><li>Projetando Web Sites Compatíveis </li></ul><ul><ul><li>Jeffrey Zeldman </li></ul></ul><ul><ul><li>Editora Campus em 2003 </li></ul></ul>
  21. 21. Livros recomendados <ul><li>XHTML: Guia de Consulta Rápida </li></ul><ul><ul><li>JULIANO NIEDERAUER   </li></ul></ul><ul><ul><li>Novatec </li></ul></ul>
  22. 22. Crossbrowsing Hugo Dias [email_address] Materiais da palestra em www.hugodias.com.br

×