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.

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. SAPO Sessions #2 javascript, done right.
Antes de começar... um disclaimer. :)

3. SAPO Sessions #2 javascript, done right.
Não venho pregar.

4. SAPO Sessions #2 javascript, done right.
Nem vender nada.

5. SAPO Sessions #2 javascript, done right.
Venho‐vos falar da minha
experiência.

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.

11. SAPO Sessions #2 javascript, done right.
2005
http://whit.me/ajax
Até que...

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

29. SAPO Sessions #2 javascript, done right.
Degradação Graciosa vs. Melhoramento Progressivo
Graceful Degradation Progressive Enhancement

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.

35. SAPO Sessions #2 javascript, done right.
?

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

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. 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. 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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
demo

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?

66. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
http://web.mail.sapo.pt/

67. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo

68. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
onSubmit
DOM
LOADED!

69. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
onSubmit
DOM
LOADED!

70. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
demo

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. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
AJAX

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

77. SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
http://unobtrusify.com

78. SAPO Sessions #2 javascript, done right.
?

79. SAPO Sessions #2 javascript, done right.
Scripts não‐bloqueantes

80. SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<script>
<script>
<body>

81. SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<body>
<script>
<script>

82. 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)

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’;
Esquecer: document.write
<body>
scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;
var cabeca = document.getElementsByTagName(‘head’)[0];
cabeca.appendChild(scr);
)( );
</script>
<script>
<script>

84. SAPO Sessions #2 javascript, done right.
Histórico em Webapps

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/

87. SAPO Sessions #2 javascript, done right.
?

88. 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