Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript Cross-browser

3,488 views

Published on

  • Be the first to comment

Javascript Cross-browser

  1. 1. Javascript Cross-browser por Davidson Fellipe
  2. 2. about me... desenvolvedor frontend na globo.com mestrando na puc-rio co-organizador do rio.js webinterativa, cesar, fitec e upe...@davidsonfellipe
  3. 3. frontend +engenharia
  4. 4. Progressive Enhancement vs. Graceful Degradation
  5. 5. websites precisam ter exatamente omesmo visual em todos os browsers? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  6. 6. “trazer fidelidade de layout é muito trabalhoso seu madruga
  7. 7. Grade Browser Support• técnica criado pelo Yahoo para informar quais browsers serão suportados• baseado em 3 notas • Grade A • Grade C • Grade X
  8. 8. Grade Browser Support• técnica criado pelo Yahoo para informar quais browsers serão suportados• baseado em 3 notas • Grade A • Grade C • Grade X
  9. 9. Grade Browser Support• técnica criado pelo Yahoo para informar quais browsers serão suportados• baseado em 3 notas • Grade A • Grade C • Grade X
  10. 10. grade A• experiência completa• completamente testado• fidelidade visual• correção de bugs com alta prioridade
  11. 11. grade C• browsers antigos• experiência pobre• minimo suporte• normalmente apenas HTML e CSS funcional
  12. 12. grade X• não testado• pode se tornar um grade A no futuro
  13. 13. definição de sua grade vs custos de produção
  14. 14. estratégias cross-browser fonte: http://goo.gl/HKlxJ
  15. 15. JS development livro do john resig - secrets of the javascript ninja
  16. 16. browser bugs...• boa suíte de testes• feature simulation• object detection
  17. 17. object detectionwindow.addEventListener(deviceorientation,function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; }}, false);
  18. 18. feature simulationvar STYLE_NAME = (function(){ var div = document.createElement("div"); div.style.color = "red"; if ( div.getAttribute("style") ) return "style"; if ( div.getAttribute("cssText") ) return "cssText";})();window.onload = function(){ var style = document. getElementById("test"). getAttribute( STYLE_NAME );};
  19. 19. axioma by john resig• relembre o passado• considere o futuro• teste o presente
  20. 20. external code e markup• seu código não pode afetar qualquer código externo • evitando modificar valores de variaveis existentes • baixo-acoplamento • function prototypes (ou prototipos) • qualquer área, já existente, que seu código modifica é uma potencial area de conflito• testes automatizados!
  21. 21. funcionalidades• focar em experiencia rica nos browsers GRADE A• versão HTML ou experiência reduzida em para os GRADE C
  22. 22. regressões• por API diferentes• por bugs
  23. 23. browser releases• Internet Explorer: http://blogs.msdn.com/ie/• Firefox: http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/• WebKit (Safari): http://nightly.webkit.org/
  24. 24. obrigado! @davidsonfellipe www.fellipe.com www.facebook.com/fellipewww.slideshare.net/davidsonfellipewww.github.com/davidsonfellipehttp://about.me/davidsonfellipe
  25. 25. referências• http://mislav.uniqpath.com/ 2010/05/semicolons/ • https://github.com/styleguide/ javascript• http://dev.opera.com/articles/ view/the-seven-rules-of- • http://www.slideshare.net/ unobtrusive-javascrip/ jeresig/performance- improvements-in-browsers• http://www.slideshare.net/ nzakas/progressive- • http:// enhancement-20-conference- www.impressivewebs.com/ agnostic browsers-tvs/• http:// • livro secrets of the javascript dowebsitesneedtolookexactlyt ninja - john resig hesameineverybrowser.com/

×