Javascript Cross-browser
4 gostaram1,703 visualizações
O documento discute estratégias para desenvolvimento de JavaScript cross-browser, incluindo Progressive Enhancement vs Graceful Degradation, Grade Browser Support e técnicas como object detection e feature simulation para melhor suporte entre navegadores. O palestrante também discute testes, lançamentos de navegadores e a importância de focar na experiência para navegadores Grade A.
Anúncio
Mais conteúdo relacionado
Mais procurados (20)
Destaque (11)
Anúncio
Semelhante a Javascript Cross-browser (20)
Anúncio
Javascript Cross-browser
- 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
- 4. frontend + engenharia
- 5. Progressive Enhancement vs. Graceful Degradation
- 6. websites precisam ter exatamente o mesmo visual em todos os browsers? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
- 7. “ trazer fidelidade de layout é muito trabalhoso seu madruga
- 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 Browser Support • técnica criado pelo Yahoo para informar quais browsers serão suportados • baseado em 3 notas • Grade A • Grade C • Grade X
- 11. grade A • experiência completa • completamente testado • fidelidade visual • correção de bugs com alta prioridade
- 12. grade C • browsers antigos • experiência pobre • minimo suporte • normalmente apenas HTML e CSS funcional
- 13. grade X • não testado • pode se tornar um grade A no futuro
- 14. definição de sua grade vs custos de produção
- 19. estratégias cross-browser fonte: http://goo.gl/HKlxJ
- 20. JS development livro do john resig - secrets of the javascript ninja
- 21. browser bugs... • boa suíte de testes • feature simulation • object detection
- 22. object detection window.addEventListener('deviceorientation', function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; } }, false);
- 23. 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 ); };
- 24. axioma by john resig • relembre o passado • considere o futuro • teste o presente
- 25. 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!
- 27. funcionalidades • focar em experiencia rica nos browsers GRADE A • versão HTML ou experiência reduzida em para os GRADE C
- 28. regressões • por API diferentes • por bugs
- 29. 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/
- 30. obrigado! @davidsonfellipe www.fellipe.com www.facebook.com/fellipe www.slideshare.net/davidsonfellipe www.github.com/davidsonfellipe http://about.me/davidsonfellipe
- 31. 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/