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