MSDN Webcast - Melhores práticas cross browser

1.111 visualizações

Publicada em

Criar sites complexos que funcionem bem em qualquer navegador é um desafio constante para os desenvolvedores. Vejam como o Internet Explorer 9 torna isso fácil, possibilitando a criação de sites Web usando HTML, CSS e JavaScript interoperáveis. Neste WebCast mostraremos as melhores práticas que você pode usar hoje para atingir as maioria dos navegadores.

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

Sem downloads
Visualizações
Visualizações totais
1.111
No SlideShare
0
A partir de incorporações
0
Número de incorporações
45
Ações
Compartilhamentos
0
Downloads
10
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

MSDN Webcast - Melhores práticas cross browser

  1. 1. HTML 5: Melhorespráticas Cross-Browser<br />João Paulo Clementi<br />Development Specialist<br />blogs.msdn.com/jpclementi<br />twitter.com/jpclementi<br />06/05/2010<br />Daniel Ferreira<br />Development Specialist<br />blogs.msdn.com/danielsf<br />twitter.com/Eng_DanielSF<br />
  2. 2. Agenda<br />2<br />
  3. 3. Desafios de ser Cross-browser<br />3<br />
  4. 4. demo<br />
  5. 5. O quemaisimportanadetecção…<br />if( condition )<br />{<br />// Códigoprimário<br />}<br />else<br />{<br />// Códigoalternativo<br />}<br />5<br />
  6. 6. Primeironóstínhamosdetecção de versão<br />6<br />if( navigator.userAgent.indexOf('MSIE') != -1 )<br />{<br />// Códigoescritopara browser X<br />}<br />else<br />{<br />// Códigoescritopara browser Y<br />}<br />
  7. 7. Depoistínhamosdetecção de objetos<br />if( document.all )<br />{<br />// Códigoescritopara browser X<br />}<br />else<br />{<br />// Códigoescritopara browser Y<br />}<br />7<br />
  8. 8. Agora temosdetecção de funcionalidades<br />if( window.addEventListener )<br />{<br />// Códigoescritopara browsers<br /> // quesuportamaddEventListener<br />}<br />else<br />{<br />// Códigoescritopara browsers<br /> // quenãosuportamaddEventListener<br />}<br />8<br />
  9. 9. Melhorespráticas<br />Fazer<br />Detecção de funcionalidade<br />Detecção de comportamento<br />NãoFazer<br />Detectar browsers específicos<br />Assumirfuncionalidadesnãorelacionadas<br />IMPACTO: Custo de manutençãoreduzido<br />9<br />
  10. 10. Fazer: Detecção de funcionalidade<br />Testar a funcionalidade antes de usá-la<br />Principalmenteparafuncionalidadesnovas<br />Nãotãocríticoparafuncionalidadesbemestabelecidas<br />Testarospadrões antes<br />Sempreusarpadrõesquandosuportados<br />Evitarutilizaracidentalmentefuncionalidadeslegadas<br />10<br />
  11. 11. window.addEventListener("load", fn, false);<br />Fazer: Detecção de funcionalidade<br />11<br />
  12. 12. Fazer: Detecção de funcionalidade<br />if( window.addEventListener )<br />{<br />window.addEventListener("load", fn, false);<br />}<br />12<br />
  13. 13. Fazer: Detecção de funcionalidade<br />if( window.addEventListener )<br />{<br />window.addEventListener("load", fn, false);<br />}<br />elseif( window.attachEvent )<br />{<br />window.attachEvent("onload", fn);<br />}<br />13<br />
  14. 14. demo<br />
  15. 15. Fazer: detecção de comportamento<br />Problema<br />Um browser tem um bug emumafuncionalidade<br />Uma deteçãobásica de funcionalidadefalhaaoidentificar o problema<br />Solução<br />Executar um testeparaidentificar o comportamentoquebrado<br />Aplicar um workaround quandoele é detectado<br />15<br />
  16. 16. Fazer: detecção de comportamento<br />// Executar um testequedirecionapara um problemaconhecido<br />vartestPassed = runTest();<br />// Checar se o testepassou<br />if(!testPassed)<br />{<br />// Se não, aplicar um workaround<br />}<br />16<br />
  17. 17. demo<br />
  18. 18. Comparação do path do código<br />Detecção de funcionalidade<br />Detecção de versão<br />= Códigoalternativo<br />= Ponto de deteção<br />
  19. 19. Nãofazer: detectar browsers específicos<br />Mas euseiqueestafuncionalidadefuncionaneste browser<br />Estafuncionalidadedevefuncionarem outros browsers<br />O novo browser deveadicionarsuporteparaestafuncionalidade<br />Mas euseiqueestafuncionalidade tem um bug neste browser<br />O mesmo bug podeexistirem outros browsers<br />O bug podeserounãoconsertadoemumapróximaversão<br />19<br />
  20. 20. // Using the User Agent String<br />if( navigator.userAgent.indexOf(x) != -1 )<br />{<br />// Browser-specific code<br />}<br />Nãofazer: detectar browsers específicos<br />20<br />
  21. 21. Nãofazer: detectar browsers específicos<br />// Using Objects<br />if( document.all )<br />{<br />// Browser-specific code<br />}<br />
  22. 22. Nãofazer: detectar browsers específicos<br />// Using Library-based Detection<br />if( jQuery.browser.msie )<br />{<br />// Browser-specific code<br />}<br />
  23. 23. Nãofazer: detectar browsers específicos<br />// Using Conditional Comments<br /><!--[if IE]><br /> // Browser-specific code<br /><[endif]--><br />
  24. 24. Nãofazer: detectar browsers específicos<br />// ... but if you must, target legacy only<br /><!--[if IE lte 7]><br /> // Legacy browser-specific code<br /><[endif]--><br />
  25. 25. Nãofazer: assumirfuncionalidadenãorelacionadas<br />Mas euseique o browser com X tem também Y<br />Novos browsers podemter X e não Y<br />Custo<br />Risco de rupturaquandonovos browsers sãolançados<br />
  26. 26. if( window.postMessage )<br />{<br /> …<br />window.addEventListener();<br /> …<br />}<br />Nãofazer: assumirfuncionalidadenãorelacionadas<br />
  27. 27. Porqueninguémjánãofazisso?<br />… mas lembre do custo<br />
  28. 28. .target<br />{<br />border-radius: 20px;<br />-moz-border-radius: 20px;<br />-webkit-border-radius: 20px;<br />}<br />Fazer: detecção de funcionalidade no CSS<br />28<br />
  29. 29. Fazer: detecção de funcionalidade no HTML<br /><!-- Elements with fallback content --><br /><videosrc="test.vid"><br /><objectsrc="test.vid"><br /><ahref="test.vid"><br /> Download Video<br /></a><br /></object><br /></video><br />29<br />
  30. 30. Fazer: detecção de funcionalidade no HTML<br /><!-- Generic element handling --><br /><svgwidth="100"height="100"><br /><circlefill="#090"cx="50"cy="50"r="50"/><br /></svg><br />30<br />
  31. 31. demo<br />
  32. 32. Call to action<br />
  33. 33. Resumo<br />33<br />Mais: http://api.jquery.com/jQuery.support/<br />
  34. 34. Próximospassos<br />34<br />Baixe o Internet Explorer 9 Platform preview<br />www.IETestDrive.com<br />Visite o blog to time<br />http://blogs.msdn.com/ie <br />
  35. 35. © 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.  <br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.  MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />

×