JAVASCRIPTDONE RIGHT!
SAPO Sessions #218 Março 2009
André Luíshttp://[email protected]
creative commonsattributionnon-commercialshare-alike 3.0
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.
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
SAPO Sessions #2 javascript, done right.
javascript
Tem sido muito maltratado ao longo do tempo
javascriptpopups
SAPO Sessions #2 javascript, done right.
filho do diabo
popupspopupspopups
2001
popups
Em 2001, era o filho do diabo.
SAPO Sessions #2 javascript, done right.
http://whit.me/ajax
2005
Até que...
SAPO Sessions #2 javascript, done right.
javascripteverybody’s bitch
lover
2005
XMLHttp
Request
WebApps
Mashups
AJAX
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çõesnatalícias
SAPO Sessions #2 javascript, done right.
javascript é usado para pré‐carregarimagens
SAPO Sessions #2 javascript, done right.
javascript é usado para mudar de página
SAPO Sessions #2 javascript, done right.
javascript é usado para evitar recarregamentode páginas inteiras
javascript é usado para evitar recarregamentode páginas inteiras
SAPO Sessions #2 javascript, done right.
AJAX
SAPO Sessions #2 javascript, done right.
javascript é usado para tudo
Mapas Validação de Forms
Emuladores de Jogos(spectrum, etc) Office S
uites
Ambientes GráficosApps Offline
Pub/Sub
SAPO Sessions #2 javascript, done right.
Será que isto é um problema?
-------25%------
SAPO Sessions #2 javascript, done right.
problemas com o javascriptAusência de suporte para JavascriptIntranets 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 javascriptAusência de suporte para Javascript
Não é bookmarkableNã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 javascriptAusê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 javascriptAusência de suporte para Javascript
Não é bookmarkable
Quebra o histórico (retroceder, avançar)
Acessibilidade: navegação por tecladoEventos 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 javascriptAusê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 linkAbrir numa nova tab, nova janela ou enviar link por mail. Problema: href=”#”
SAPO Sessions #2 javascript, done right.
problemas com o javascriptAusê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
Boas notícias: tudo isto é evitável.
SAPO Sessions #2 javascript, done right.
Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo
SAPO Sessions #2 javascript, done right.
Mostram‐se versões alternativas no caso do cliente não suportar todas as tecnologias utilizadas.
Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo
Mostram‐se versões alternativas no caso do cliente não suportar todas as tecnologias utilizadas.
SAPO Sessions #2 javascript, done right.
Exemplos:<img src=”foto.png” alt=”Fotografia”><noscript><noframes>
Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo
SAPO Sessions #2 javascript, done right.
Constrói‐se uma versão base/usável duma
funcionalidade e melhora‐se progressivamente.
Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo
SAPO Sessions #2 javascript, done right.
Constrói‐se uma versão base/usável duma
funcionalidade e melhora‐se progressivamente.
Exemplos:Substitução de Imagens por CSS
Javascript Não Obstrutivo
Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo
SAPO Sessions #2 javascript, done right.
Constrói‐se uma versão base/usável duma
funcionalidade e melhora‐se progressivamente.
Exemplos:Substitução de Imagens por CSS
Javascript Não Obstrutivo
Graceful Degradation Progressive EnhancementDegradação Graciosa vs. Melhoramento Progressivo
Melhorar 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/
FAILFunny 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údoHTML
ComportamentoJAVASCRIPT
ApresentaçãoCSS
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
ConteúdoHTML
ComportamentoJAVASCRIPT
ApresentaçãoCSS
/whatever.php
/css/style.css /js/whatever.js
Revisão da matéria dada: Camadas de Separação
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
ConteúdoHTML
ComportamentoJAVASCRIPT
ApresentaçãoCSS
/whatever.php
/css/style.css /js/whatever.js
Revisão da matéria dada: Camadas de Separação
Não misturar tecnologias.
Loose coupling FTW!!
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Revisão da matéria dada: Carregamento e Eventos
HTML
JAVASCRIPTCSSonDomReady / domContentLoaded
MEDIAwindow.onLoad
DOMContentLoaded no HTML5
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Quão importante é um mero link?
-------50%------
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...
<a href=”#” onclick=”show( ‘wonderbra.png’, ...
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
FAILAinda assim...
Está a definir um handler por Javascript... mas não tem href.AVISO: Sempre que escreverem “#”. YOU’RE DOIN’ IT WRONG!
<a href=”#” onclick=”show( ‘wonderbra.png’, ...
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
FAILAinda assim...
I CAN HAZ CHEEZBURGERhttp://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
menos mau
<a href=”wonderbra.png”onclick=”show(‘wonderbra.png’);return false;”>...
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
melhor
<a href=”wonderbra.png”class=”preview”>...
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
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’;
}
meanwhile...in a js file not far from there
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
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’;
}
meanwhile...in a js file not far from there
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 (document).ready ( function () {jQuery('a.jquery').click (function () {
alert('jQuery!');return false;
} );} );
jQuery
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
document.observe ( 'dom:loaded', function () {$$('a.prototype').each (function (el) {
Event.observe (el, 'click', function () {alert('Prototype!');
});el.setAttribute( 'onclick', 'return false;');
}); });
Prototype.js
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
document.observe ( 'dom:loaded', function () {$$('a.prototype').each (function (el) {
Event.observe (el, 'click', function (ev) {alert('Prototype!');
});Event.stop(ev);
}); });
Prototype.js
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Remover obstruções
demo
Demo #1 @ http://workshop.andr3.net/saposessions/
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
1 Links para as imagens: href=”wonderbra.jpg”
Exemplo Lightbox
2 on dom:loaded, procurar links com rel=”lightbox”
3 Definir funções para mostrar o Loading... e carregar imagem dentro da página
4 Cancelar a acção de “click” para o browser não seguir o que está no href.
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
1 <a href=”wonderbra.jpg” rel=”lightbox”>
Exemplo Lightbox
2 a[rel=lightbox] todos os links com atributo rel=lightbox
3 addEventListener (w3c) / attachEvent (IE)
4 return false;
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/
-------75%------
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
Demo #2 @ http://workshop.andr3.net/saposessions/
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
AJAX
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
KAPOW!
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
HIJAX
1 Construir um site que utilize links e formulários tradicionais. Sem recurso a javascript.
2 Entrar no DOM, definir eventListeners para os eventos certos e substituir os carregamentos de páginas completas por pequenos pedidos AJAX.
by Jeremy Keith
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
1 Planear para o AJAX desde as wireframes.
2 Implementá‐lo no final.
by Jeremy KeithHIJAX
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
Mais info, no blog DomScripting.org
http://whit.me/hijax
by Jeremy KeithHIJAX
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
http://unobtrusify.comJeremy Keith: Behavioral Separation
SAPO Sessions #2 javascript, done right.
javascript não obstrutivo
1. Começar com o conteúdo
2. Darlhe estrutura com html semântico
3. Aplicar css
4. Aplicar comportamento com JS
http://whit.me/behavsepBehavioral Separation, by Jeremy Keith
A LIST APART.
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>
<body>
<script>
<script>
SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<body>
<script><script>
SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<body>
<script><script>
<script type=”text/javascript”>(function () {
var scr = document.createElement(‘script’);scr.type = ‘text/javascript’;scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;var cabeca = document.getElementsByTagName(‘head’)[0];cabeca.appendChild(scr);
)( );</script>
Função Anónima, auto-executável e limpa. (nada no scope global)
SAPO Sessions #2 javascript, done right.
scripts não bloqueantes
<head>
<body>
<script><script>
<script type=”text/javascript”>(function () {
var scr = document.createElement(‘script’);scr.type = ‘text/javascript’;scr.src = ‘ficheiro_de_js_nao_obstrutivo.js”;var cabeca = document.getElementsByTagName(‘head’)[0];cabeca.appendChild(scr);
)( );</script>
Esquecer: document.write
SAPO Sessions #2 javascript, done right.
Histórico em Webapps
SAPO Sessions #2 javascript, done right.
Quebra o histórico (retroceder, avançar)Não oferece, de origem, mecanismos para guardar o histórico
Histórico em Webapps
1 Alterar o location.href.hash
2 Verificar se o location.href.hash mudou e lidar com essa mudança
SAPO Sessions #2 javascript, done right.
Quebra o histórico (retroceder, avançar)Não oferece, de origem, mecanismos para guardar o histórico
Histórico em Webapps
1 Alterar o location.href.hash
2 Verificar se o location.href.hash mudou e lidar com essa mudança
http://developer.yahoo.com/yui/history/
3 Inconsistências de browsers *cof*IE*cof*
IE = usar uma iframe, ir alterando a SRC.
SAPO Sessions #2 javascript, done right.
?
SAPO Sessions #2 javascript, done right.
That’s all folks!
http://domscripting.orghttp://www.alistapart.com/topics/code/scripting/http://talks.andr3.net/2009/js,doneright.pdfhttp://slideshare.net/andr3
creative commonsattribution
non-commercialshare-alike 3.0
André Luí[email protected]@andr3.net