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, Done Right

2,771 views

Published on

SAPO Sessions #2

Javascript, done right.

Algumas dicas de como resolver alguns dos principais prolemas em usar *tanto* javascript na web hoje em dia.

Published in: Technology
  • Login to see the comments

Javascript, Done Right

  1. 1. SAPO Sessions #2 18 Março 2009 JAVASCRIPT DONE RIGH T! creative commons André Luís attribution non-commercial http://andr3.net share-alike 3.0 aluis@co.sapo.pt
  2. 2. SAPO Sessions #2 javascript, done right. Antes de começar... um disclaimer. :)
  3. 3. SAPO Sessions #2 javascript, done right. Não venho pregar.
  4. 4. SAPO Sessions #2 javascript, done right. Nem vender nada.
  5. 5. SAPO Sessions #2 javascript, done right. Venho‐vos falar da minha  experiência.
  6. 6. SAPO Sessions #2 javascript, done right. Desde brincadeiras em javascript  no site dum canal de IRC. 2000
  7. 7. SAPO Sessions #2 javascript, done right. Até aplicações web inseridas  no Webmail do SAPO. 2009
  8. 8. SAPO Sessions #2 javascript, done right. Programa de Festas . Uso dado ao Javascript . Problemas . Como resolvê‐los . Javascript Não Obstrutivo . Hijax . Scripts não bloqueantes . Histórico com Javascript 2009
  9. 9. SAPO Sessions #2 javascript, done right. javascript Tem sido muito maltratado ao longo do tempo
  10. 10. SAPO Sessions #2 javascript, done right. 2001 ppopu s puop p pop p o u up pjavascript s popups s ps filho do diabo Em 2001, era o filho do diabo.
  11. 11. SAPO Sessions #2 javascript, done right. 2005 http://whit.me/ajax Até que...
  12. 12. SAPO Sessions #2 javascript, done right. 2005 st X que JA e A pR tt javascript H WebAp L M ps X everybody’s bitch lover Mashup s
  13. 13. SAPO Sessions #2 javascript, done right. javascript é usado para
  14. 14. SAPO Sessions #2 javascript, done right. javascript é usado para popups
  15. 15. SAPO Sessions #2 javascript, done right. javascript é usado para efeitos de estilo
  16. 16. SAPO Sessions #2 javascript, done right. javascript é usado para decorações natalícias
  17. 17. SAPO Sessions #2 javascript, done right. javascript é usado para pré‐carregar imagens
  18. 18. SAPO Sessions #2 javascript, done right. javascript é usado para mudar de página
  19. 19. SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento de páginas inteiras
  20. 20. SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento AJA X de páginas inteiras
  21. 21. SAPO Sessions #2 javascript, done right. javascript é usado para tudo Am s Valid a p a bie ação M  de  nte Form fline s Of s G s pp A ráf /Sub icos Emu Pub lador es de (spec  Jogo trum tes s ui e S , etc) ffic O
  22. 22. SAPO Sessions #2 javascript, done right. Será que isto é um problema? -------25%------
  23. 23. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Intranets corp., screen-readers, search engine crawlers, NoScript, etc. Somando as pequenas percentagens destes factores, facilmente se chega acima dos 10%. Mais: um utilizador que veja um site quebrado, muito provavelmente, não volta.
  24. 24. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Não oferece, de origem, mecanismos para guardar o estado duma webapp Soa a algo familiar? Argumento muitas vezes usado por *nós* contra sites 100% Flash.
  25. 25. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Quebra o histórico (retroceder, avançar) Não oferece, de origem, mecanismos para guardar o histórico Permite-nos implementar mecanismos para isto, mas não fornece de origem.
  26. 26. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Quebra o histórico (retroceder, avançar) Acessibilidade: navegação por teclado Eventos onmousedown, onmouseover não disparam se não se usar um disp. apontador focus para além do onmouseover, onclick em vez de onmousedown
  27. 27. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Quebra o histórico (retroceder, avançar) Acessibilidade: navegação por teclado Usabilidade: controlar a abertura dum link Abrir numa nova tab, nova janela ou enviar link por mail. Problema: href=”#”
  28. 28. SAPO Sessions #2 javascript, done right. problemas com o javascript Ausência de suporte para Javascript Não é bookmarkable Boas notícias: tudo isto é evitável. Quebra o histórico (retroceder, avançar) Acessibilidade: navegação por teclado Usabilidade: controlar a abertura dum link
  29. 29. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement
  30. 30. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Mostram‐se versões  alternativas no caso do  cliente não suportar todas  as tecnologias utilizadas. 
  31. 31. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Exemplos: <img src=”foto.png” alt=”Fotografia”> Mostram‐se versões  <noscript> alternativas no caso do  <noframes> cliente não suportar todas  as tecnologias utilizadas. 
  32. 32. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Constrói‐se uma versão  base/usável duma  funcionalidade e melhora‐se  progressivamente.
  33. 33. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Exemplos: Constrói‐se uma versão  Substitução de Imagens por CSS base/usável duma  Javascript Não Obstrutivo funcionalidade e melhora‐se  progressivamente.
  34. 34. SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement Exemplos: Melhorar  Constrói‐se uma versão  Substitução de Imagens por CSS progressivamente! base/usável duma  Javascript Não Obstrutivo funcionalidade e melhora‐se  progressivamente.
  35. 35. SAPO Sessions #2 javascript, done right. ?
  36. 36. SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  37. 37. SAPO Sessions #2 javascript, done right. obstrutivo: adj. que causa obstrução; que serve para obstruir. Funny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS obstrutivo.
  38. 38. SAPO Sessions #2 javascript, done right. obstrutivo: adj. que causa obstrução; que serve para obstruir. fonte: Priberam  http://priberam.pt/dlpo/ FAIL Funny story: não foi possível colocar o link directo para “obstrutivo” pq a priberam usa JS obstrutivo.
  39. 39. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Mas como?
  40. 40. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Camadas de Separação Conteúdo HTML Comportamento Apresentação JAVASCRIPT CSS
  41. 41. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Camadas de Separação /whatever.php Conteúdo HTML /css/style.css /js/whatever.js Comportamento Apresentação JAVASCRIPT CSS
  42. 42. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Camadas de Separação /whatever.php Não misturar  Conteúdo tecnologias. HTML /css/style.css /js/whatever.js Comportamento Apresentação JAVASCRIPT CSS Loose coupling FTW!!
  43. 43. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Revisão da matéria dada: Carregamento e Eventos HTML onDomReady / domContentLoaded CSS JAVASCRIPT MEDIA window.onLoad DOMContentLoaded no HTML5
  44. 44. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Quão importante é um mero link? -------50%------
  45. 45. SAPO Sessions #2 javascript, done right. Vannevar Bush 1945: propôs o Memex, um computador teórico que em vez de ordenar informação alfabeticamente, usava associações entre documentos. Inspirou a criação do conceito de hipertexto. Artigo: As We May Think.
  46. 46. SAPO Sessions #2 javascript, done right. Ted Nelson 1960: Fundou projecto Xanadu, definiu o conceito de Hipertexto. Apesar do seu conceito ser um pouco mais completo, xanadu falhou. (links que se quebram nem gestão de versões, na WWW do TBL)
  47. 47. SAPO Sessions #2 javascript, done right. Douglas Engelbart 1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.
  48. 48. SAPO Sessions #2 javascript, done right. Tim Berners‐Lee tanaka 1991: WWW, num lab do CERN.
  49. 49. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”javascript:show( ‘wonderbra.png’, ... FAIL Link sem href = big no no. Motores de busca não seguem. Não há JS, não há link. Não tem de ser assim...
  50. 50. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”#” onclick=”show( ‘wonderbra.png’, ... FAIL Ainda assim... Está a definir um handler por Javascript... mas não tem href. AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!
  51. 51. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”#” onclick=”show( ‘wonderbra.png’, ... FAIL Ainda assim... I CAN HAZ CHEEZBURGER http://whit.me/doinitwrong Está a definir um handler por Javascript... mas não tem href. AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!
  52. 52. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” onclick=”show(‘wonderbra.png’); return false;”>... menos mau Já tem href. ATENÇÃO: return false; impede o browser de seguir o href= Mas... javascript inline é má idea.
  53. 53. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” onclick=”show(this.href); return false;”>... menos mau DRY - don’t repeat yourself. ;)
  54. 54. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” class=”preview” >... melhor
  55. 55. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções meanwhile... in a js file not far from there var prevs = document.getElementsByClassName(‘preview’); for (var i=0,len=prevs.length;i<len;i++) { prevs[i].addEventListener (‘click’, show); prevs[i].onclick = ‘return false’; }
  56. 56. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções meanwhile... in a js file not far from there var prevs = document.getElementsByClassName(‘preview’); for (var i=0,len=prevs.length;i<len;i++) { prevs[i].addEventListener (‘click’, show); prevs[i].onclick = ‘return false’; } In your dreams, sucker!
  57. 57. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Frameworks ajudam a lidar com as  incoerências dos browsers
  58. 58. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções jQuery jQuery (document).ready ( function () { jQuery('a.jquery').click (function () { alert('jQuery!'); return false; } ); } );
  59. 59. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Prototype.js document.observe ( 'dom:loaded', function () { $$('a.prototype').each (function (el) { Event.observe (el, 'click', function () { alert('Prototype!'); }); el.setAttribute( 'onclick', 'return false;'); }); });
  60. 60. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Prototype.js document.observe ( 'dom:loaded', function () { $$('a.prototype').each (function (el) { Event.observe (el, 'click', function (ev) { alert('Prototype!'); }); Event.stop(ev); }); });
  61. 61. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções demo Demo #1 @ http://workshop.andr3.net/saposessions/
  62. 62. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox http://www.lokeshdhakar.com/projects/lightbox2/ Fonte das imagens: http://brunoluis.com
  63. 63. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox Links para as imagens: href=”wonderbra.jpg” 1 on dom:loaded, procurar links com rel=”lightbox” 2 Definir funções para mostrar o Loading... e carregar  3 imagem dentro da página Cancelar a acção de “click” para o browser não seguir o  4 que está no href.
  64. 64. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox <a href=”wonderbra.jpg” rel=”lightbox”> 1 a[rel=lightbox] todos os links com atributo rel=lightbox 2 addEventListener (w3c) / attachEvent (IE) 3 return false; 4
  65. 65. SAPO Sessions #2 javascript, done right. javascript não obstrutivo E formulários?
  66. 66. SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://web.mail.sapo.pt/ -------75%------
  67. 67. SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  68. 68. SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  69. 69. SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  70. 70. SAPO Sessions #2 javascript, done right. javascript não obstrutivo demo Demo #2 @ http://workshop.andr3.net/saposessions/
  71. 71. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Mais aplicações: Ecrãs de registo, transformar link  “Termos e condições” num overlay. Reconhecer microformatos e inserir links  para as transformações.
  72. 72. SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX
  73. 73. SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX ! W PO KA
  74. 74. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Construir um site que utilize links e formulários  1 tradicionais. Sem recurso a javascript. Entrar no DOM, definir eventListeners para os eventos certos e  2 substituir os carregamentos de páginas completas por pequenos  pedidos AJAX.
  75. 75. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Planear para o AJAX desde as wireframes. 1 Implementá‐lo no final. 2
  76. 76. SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Mais info, no blog DomScripting.org http://whit.me/hijax
  77. 77. SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://unobtrusify.com Jeremy Keith: Behavioral Separation
  78. 78. SAPO Sessions #2 javascript, done right. javascript não obstrutivo Behavioral Separation, by Jeremy Keith http://whit.me/behavsep 1. Começar com o conteúdo 2. Dar­lhe estrutura com html semântico 3. Aplicar css 4. Aplicar comportamento com JS A LIST APART.
  79. 79. SAPO Sessions #2 javascript, done right. ?
  80. 80. SAPO Sessions #2 javascript, done right. Scripts não‐bloqueantes
  81. 81. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <script> <script> <body>
  82. 82. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <body> <script> <script>
  83. 83. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <script type=”text/javascript”> (function () { <head> var scr = document.createElement(‘script’); scr.type = ‘text/javascript’; <body> scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”; var cabeca = document.getElementsByTagName(‘head’)[0]; cabeca.appendChild(scr); )( ); </script> <script> <script> Função Anónima, auto-executável e limpa. (nada no scope global)
  84. 84. SAPO Sessions #2 javascript, done right. scripts não bloqueantes <script type=”text/javascript”> (function () { <head> var scr = document.createElement(‘script’); scr.type = ‘text/javascript’; Esquecer: document.write <body> scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”; var cabeca = document.getElementsByTagName(‘head’)[0]; cabeca.appendChild(scr); )( ); </script> <script> <script>
  85. 85. SAPO Sessions #2 javascript, done right. Histórico em Webapps
  86. 86. SAPO Sessions #2 javascript, done right. Histórico em Webapps Quebra o histórico (retroceder, avançar) Não oferece, de origem, mecanismos para guardar o histórico Alterar o location.href.hash 1 Verificar se o location.href.hash mudou e  2 lidar com essa mudança
  87. 87. SAPO Sessions #2 javascript, done right. Histórico em Webapps Quebra o histórico (retroceder, avançar) Não oferece, de origem, mecanismos para guardar o histórico Alterar o location.href.hash 1 Verificar se o location.href.hash mudou e  2 lidar com essa mudança Inconsistências de browsers *cof*IE*cof* 3 http://developer.yahoo.com/yui/history/ IE = usar uma iframe, ir alterando a SRC.
  88. 88. SAPO Sessions #2 javascript, done right. ?
  89. 89. SAPO Sessions #2 javascript, done right. That’s all folks! André Luís aluis@co.sapo.pt me@andr3.net http://domscripting.org creative commons http://www.alistapart.com/topics/code/scripting/ attribution http://talks.andr3.net/2009/js,doneright.pdf non-commercial http://slideshare.net/andr3 share-alike 3.0

×