Successfully reported this slideshow.

More Related Content

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 o mesmo 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 detection window.addEventListener('deviceorientation', function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; } }, false);
  18. 18. feature simulation var 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/fellipe www.slideshare.net/davidsonfellipe www.github.com/davidsonfellipe http://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/

×