JavaScript done right
Upcoming SlideShare
Loading in...5
×
 

JavaScript done right

on

  • 2,883 views

Práticas de JavaScript menos conhecidas.

Práticas de JavaScript menos conhecidas.

Unobtrusive JavaScript, progressive enhancement vs graceful degradation, HIJAX, incompatibilidades entre browsers e mais.

Statistics

Views

Total Views
2,883
Views on SlideShare
2,669
Embed Views
214

Actions

Likes
1
Downloads
33
Comments
0

2 Embeds 214

http://developers.blogs.sapo.pt 213
http://blogs.sapo.pt 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript done right JavaScript done right Presentation Transcript

  • 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
  • SAPO Sessions #2 javascript, done right. Antes de começar... um disclaimer. :)
  • SAPO Sessions #2 javascript, done right. Não venho pregar.
  • SAPO Sessions #2 javascript, done right. Nem vender nada.
  • SAPO Sessions #2 javascript, done right. Venho‐vos falar da minha  experiência.
  • SAPO Sessions #2 javascript, done right. Desde brincadeiras em javascript  no site dum canal de IRC. 2000
  • SAPO Sessions #2 javascript, done right. Até aplicações web inseridas  no Webmail do SAPO. 2009
  • SAPO Sessions #2 javascript, done right. Índice Uso dado ao Javascript Problemas Como resolvê‐los Javascript Não Obstrutivo Hijax Scripts não bloqueantes Histórico com Javascript 2009
  • SAPO Sessions #2 javascript, done right. javascript Tem sido muito maltratado ao longo do tempo
  • 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.
  • SAPO Sessions #2 javascript, done right. 2005 http://whit.me/ajax Até que...
  • 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
  • SAPO Sessions #2 javascript, done right. javascript é usado para
  • SAPO Sessions #2 javascript, done right. javascript é usado para popups
  • SAPO Sessions #2 javascript, done right. javascript é usado para efeitos de estilo
  • SAPO Sessions #2 javascript, done right. javascript é usado para decorações natalícias
  • SAPO Sessions #2 javascript, done right. javascript é usado para pré‐carregar imagens
  • SAPO Sessions #2 javascript, done right. javascript é usado para mudar de página
  • SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento de páginas inteiras
  • SAPO Sessions #2 javascript, done right. javascript é usado para evitar recarregamento AJA X de páginas inteiras
  • 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
  • SAPO Sessions #2 javascript, done right. Será que isto é um problema?
  • 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.
  • 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.
  • 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.
  • 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
  • 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=”#”
  • 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
  • SAPO Sessions #2 javascript, done right. Degradação Graciosa vs. Melhoramento Progressivo Graceful Degradation Progressive Enhancement
  • 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. 
  • 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. 
  • 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.
  • 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.
  • 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.
  • SAPO Sessions #2 javascript, done right. ?
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  • 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.
  • 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.
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo Mas como?
  • 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
  • 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
  • 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!!
  • 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
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo Quão importante é um mero link?
  • 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.
  • 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)
  • SAPO Sessions #2 javascript, done right. Douglas Engelbart 1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.
  • SAPO Sessions #2 javascript, done right. Tim Berners‐Lee tanaka 1991: WWW, num lab do CERN.
  • 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...
  • 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!
  • 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!
  • 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.
  • 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. ;)
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções <a href=”wonderbra.png” class=”preview” >... melhor
  • 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’; }
  • 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!
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções Frameworks ajudam a lidar com as  incoerências dos browsers
  • 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; } ); } );
  • 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;'); }); });
  • 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); }); });
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo Remover obstruções demo
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo Exemplo Lightbox http://www.lokeshdhakar.com/projects/lightbox2/ Fonte das imagens: http://brunoluis.com
  • 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.
  • 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
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo E formulários?
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://web.mail.sapo.pt/
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo onSubmit DOM LOADED!
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo demo
  • 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.
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo AJAX ! W PO KA
  • 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.
  • 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
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo HIJAX by Jeremy Keith Mais info, no blog DomScripting.org http://whit.me/hijax
  • SAPO Sessions #2 javascript, done right. javascript não obstrutivo http://unobtrusify.com
  • SAPO Sessions #2 javascript, done right. ?
  • SAPO Sessions #2 javascript, done right. Scripts não‐bloqueantes
  • SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <script> <script> <body>
  • SAPO Sessions #2 javascript, done right. scripts não bloqueantes <head> <body> <script> <script>
  • 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)
  • 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>
  • SAPO Sessions #2 javascript, done right. Histórico em Webapps
  • 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
  • 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/
  • SAPO Sessions #2 javascript, done right. ?
  • 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