O documento apresenta uma palestra sobre JavaScript feita por André Luís no evento SAPO Sessions #2 em 2009. A palestra discute como JavaScript pode ser usado de forma não obstrutiva, respeitando princípios como degradação graciosa e melhoramento progressivo, através de técnicas como separação de camadas e carregamento assíncrono. O objetivo é mostrar como problemas comuns de acessibilidade, usabilidade e compatibilidade podem ser evitados ao se usar JavaScript de forma correta.
6. SAPO Sessions #2 javascript, done right.
Desde brincadeiras em javascript
no site dum canal de IRC.
2000
7. SAPO Sessions #2 javascript, done right.
Até aplicações web inseridas
no Webmail do SAPO.
2009
8. 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
9. SAPO Sessions #2 javascript, done right.
javascript
Tem sido muito maltratado ao longo do tempo
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.
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. SAPO Sessions #2 javascript, done right.
javascript é usado para
14. SAPO Sessions #2 javascript, done right.
javascript é usado para popups
15. SAPO Sessions #2 javascript, done right.
javascript é usado para efeitos de estilo
16. SAPO Sessions #2 javascript, done right.
javascript é usado para decorações
natalícias
17. SAPO Sessions #2 javascript, done right.
javascript é usado para pré‐carregar
imagens
18. SAPO Sessions #2 javascript, done right.
javascript é usado para mudar de página
19. SAPO Sessions #2 javascript, done right.
javascript é usado para evitar recarregamento
de páginas inteiras
20. SAPO Sessions #2 javascript, done right.
javascript é usado para evitar recarregamento
AJA X
de páginas inteiras
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. SAPO Sessions #2 javascript, done right.
Será que isto é um problema?
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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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.
36. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Mas como?
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. 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. 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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Quão importante é um mero link?
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. 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. SAPO Sessions #2 javascript, done right.
Douglas Engelbart
1963: NLS (oNLine System), que utilizava ligações (links) do conceito do hipertexto.
48. SAPO Sessions #2 javascript, done right.
Tim Berners‐Lee
tanaka
1991: WWW, num lab do CERN.
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. 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. 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. 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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
<a href=”wonderbra.png”
class=”preview”
>...
melhor
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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
Frameworks ajudam a lidar com as
incoerências dos browsers
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. 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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
E formulários?
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.
73. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
AJAX
!
W
PO
KA
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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
HIJAX
by Jeremy Keith
Mais info, no blog DomScripting.org
http://whit.me/hijax
85. 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
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
Inconsistências de browsers *cof*IE*cof*
3
http://developer.yahoo.com/yui/history/