Javascript Cross-browser

  • 2,667 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,667
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Javascript Cross-browser por Davidson Fellipe
  • 2. about me... desenvolvedor frontend na globo.com mestrando na puc-rio co-organizador do rio.js webinterativa, cesar, fitec e upe...@davidsonfellipe
  • 3. frontend +engenharia
  • 4. Progressive Enhancement vs. Graceful Degradation
  • 5. websites precisam ter exatamente omesmo visual em todos os browsers? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  • 6. “trazer fidelidade de layout é muito trabalhoso seu madruga
  • 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. 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. 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. grade A• experiência completa• completamente testado• fidelidade visual• correção de bugs com alta prioridade
  • 11. grade C• browsers antigos• experiência pobre• minimo suporte• normalmente apenas HTML e CSS funcional
  • 12. grade X• não testado• pode se tornar um grade A no futuro
  • 13. definição de sua grade vs custos de produção
  • 14. estratégias cross-browser fonte: http://goo.gl/HKlxJ
  • 15. JS development livro do john resig - secrets of the javascript ninja
  • 16. browser bugs...• boa suíte de testes• feature simulation• object detection
  • 17. object detectionwindow.addEventListener(deviceorientation,function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; }}, false);
  • 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. axioma by john resig• relembre o passado• considere o futuro• teste o presente
  • 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. funcionalidades• focar em experiencia rica nos browsers GRADE A• versão HTML ou experiência reduzida em para os GRADE C
  • 22. regressões• por API diferentes• por bugs
  • 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. obrigado! @davidsonfellipe www.fellipe.com www.facebook.com/fellipewww.slideshare.net/davidsonfellipewww.github.com/davidsonfellipehttp://about.me/davidsonfellipe
  • 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/