#pernambucojs 

Javascript Cross-browser por Davidson Fellipe 

@davidsonfellipe desenvolvedor frontend na globo.com mestrando na puc-rio co-organizador do rio.js webinterativa, cesar, fitec e upe... about me... 

página de atleta 

página de atleta 

No content

frontend + engenharia a medida que a nossa profissão foi evoluindo, a adição de conceitos de engenharia foi fundamental para aumentar o indice de profissionalismo, melhorando a fundamentação do que fazemos e especificando niveis de garantia de funcionamento e tolerancia a falhas. 

Progressive Enhancement vs. Graceful Degradation The concepts of graceful degradation and progressive enhancement are often applied to describe browser support strategies. Indeed, they are closely related approaches to the engineering of "fault tolerance". These two concepts influence decision-making about browser support. Because they reflect different priorities, they frame the support discussion differently. Graceful degradation prioritizes presentation, and permits less widely-used browsers to receive less (and give less to the user). Progressive enhancement puts content at the center, and allows most browsers to receive more (and show more to the user). While close in meaning, progressive enhancement is a healthier and more forward-looking approach. Progressive enhancement is a core concept of Graded Browser Support. http://www.alistapart.com/articles/ 

tvs vs browsers 

websites precisam ter exatamente o mesmo visual em todos os browsers? http://dowebsitesneedtolookexactlythesameineverybrowser.com/ 

trazer fidelidade de layout é muito trabalhoso seu madruga “ 

• técnica criado pelo Yahoo para informar quais browsers serão suportados • baseado em 3 notas • Grade A • Grade C • Grade X 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 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 Grade Browser Support 

• experiência completa • completamente testado • fidelidade visual • correção de bugs com alta prioridade grade A 

• browsers antigos • experiência pobre • minimo suporte • normalmente apenas HTML e CSS funcional grade C 

• não testado • pode se tornar um grade A no futuro grade X 

definição de sua grade vs custos de produção 

No content

No content

No content

No content

estratégias cross-browser fonte: http://goo.gl/HKlxJ 

JS development livro do john resig - secrets of the javascript ninja 

• boa suíte de testes • feature simulation • object detection browser bugs... 

object detection window.addEventListener('deviceorientation', function(event) { var a; if(event.alpha){ a = event.alpha; }else{ a = event.x; } }, false); 

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 ); }; 

• relembre o passado • considere o futuro • teste o presente axioma by john resig 

• 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! external code e markup 

No content

No content

No content

• focar em experiencia rica nos browsers GRADE A • versão HTML ou experiência reduzida em para os GRADE C funcionalidades 

• por API diferentes • por bugs regressões 

• 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/ browser releases 

@davidsonfellipe www.fellipe.com www.facebook.com/fellipe www.slideshare.net/davidsonfellipe www.github.com/davidsonfellipe http://about.me/davidsonfellipe obrigado! 

• http://mislav.uniqpath.com/ 2010/05/semicolons/ • http://dev.opera.com/articles/ view/the-seven-rules-of- unobtrusive-javascrip/ • http://www.slideshare.net/ nzakas/progressive- enhancement-20-conference- agnostic • http:// dowebsitesneedtolookexactlyt hesameineverybrowser.com/ • https://github.com/styleguide/ javascript • http://www.slideshare.net/ jeresig/performance- improvements-in-browsers • http:// www.impressivewebs.com/ browsers-tvs/ • livro secrets of the javascript ninja - john resig referências