4. Melhoria Progressiva
Utilizar tecnologias web em camadas para
permitir acesso a todos os conteúdos básicos
e funcionalidades de uma página usando
qualquer navegador e conexão à internet,
além de proporcionar as pessoas com mais
banda ou mais avançado software uma
versão melhorada da página.
Steven Champeon e Nick Finck, 2003
sexta-feira, 10 de setembro de 2010
5. Aplicando no javascript
Produzir sites que funcionem sem JS
Usar o JS para proporcionar uma melhor
experiência para usuário: mais usabilidade,
rapidez e mais diversão
sexta-feira, 10 de setembro de 2010
6. Algumas empresas bloqueiam JS no firewall
Existem pessoas usam o NoScript Firefox
para se “proteger de ataques”
Dispositivos móveis ignoram JS
completamente
LEITORES DE TELA NÃO
EXECUTAM JAVASCRIPT
sexta-feira, 10 de setembro de 2010
10. Como funciona?
<label for=”search”>Search</label>
<input type =”text” id=”search” name=”q”>
Quando a página é carregada:
Procure label associado com text field
Mova o texto para o text field associado
Remova o label
Crie um evento para remover o texto
quando o elemento estiver em foco
sexta-feira, 10 de setembro de 2010
12. Ruim
Você já leu nossos
<a href="javascript:window.open(
'termos.html', 'popup',
'height=500,width=400,toolbar=no' );">termos e
condições</a>?
sexta-feira, 10 de setembro de 2010
13. Menos pior
Você já leu nossos
<a href=”#” onclick="window.open(
'termos.html', 'popup',
'height=500,width=400,toolbar=no' ); return
false;">termos e condições</a>?
sexta-feira, 10 de setembro de 2010
14. Bom
Você já leu nossos
<a href=”termos.html” onclick="window.open(
'termos.html', 'popup',
'height=500,width=400,toolbar=no' ); return
false;">termos e condições</a>?
sexta-feira, 10 de setembro de 2010
15. Melhor
Você já leu nossos
<a href=”termos.html” onclick="window.open(
this.href, 'popup',
'height=500,width=400,toolbar=no' ); return
false;">termos e condições</a>?
sexta-feira, 10 de setembro de 2010
16. Ultra megaboga
Você já leu nossos
<a href=”termos.html” class=”nota_popup”>
termos e condições</a>?
sexta-feira, 10 de setembro de 2010
17. Características
Sem código inline
Todo o código em um arquivo externo .js
Site usável sem javascript
Links e forms reutilizados
Elementos javascript dependentes são
adicionados dinamicamente
sexta-feira, 10 de setembro de 2010
18. Javascript para o
nota_popup
Quando a página terminar de carregar:
Procurar todos os links com class
“nota_popup”
Quando o elemento for clicado:
Abrir uma janela popup da página
lincada
Não navegar na página
sexta-feira, 10 de setembro de 2010
19. Código
window.onload = function() {
}
sexta-feira, 10 de setembro de 2010
20. Código
window.onload = function() {
var links = document.getElementByTagName(‘a’);
for(var i = 0, link; link = links[i]; i++)
if (link.className == 'nota_popup') {
link.onclick = function() {
}
}
}
sexta-feira, 10 de setembro de 2010
21. Código
window.onload = function() {
var links = document.getElementByTagName(‘a’);
for(var i = 0, link; link = links[i]; i++)
if (link.className == 'nota_popup') {
link.onclick = function() {
var href = this.href;
window.open(href, ‘popup’,
‘height=500,width=400,toolbar=no’);
return false;
}
}
}
sexta-feira, 10 de setembro de 2010
22. Com jQuery
jQuery(document).ready(function() {
});
sexta-feira, 10 de setembro de 2010
23. Com jQuery
jQuery(document).ready(function() {
jQuery('a.nota_popup').click(function() {
});
});
sexta-feira, 10 de setembro de 2010
24. Com jQuery
jQuery(document).ready(function() {
jQuery('a.nota_popup').click(function() {
var href = jQuery(this).attr('href');
});
});
sexta-feira, 10 de setembro de 2010
25. Com jQuery
jQuery(document).ready(function() {
jQuery('a.nota_popup').click(function() {
var href = jQuery(this).attr('href');
window.open(href, 'popup',
'height=500,width=400,toolbar=no'
);
return false;
});
});
sexta-feira, 10 de setembro de 2010
26. Com jQuery
jQuery(function() {
jQuery('a.nota_popup').click(function() {
var href = jQuery(this).attr('href');
window.open(href, 'popup',
'height=500,width=400,toolbar=no'
);
return false;
});
});
sexta-feira, 10 de setembro de 2010
27. Com jQuery
$(function() {
$('a.sidenote').click(function() {
var href = $(this).attr('href');
window.open(href, 'popup',
'height=500,width=400,toolbar=no'
);
return false;
});
});
sexta-feira, 10 de setembro de 2010
28. Vantagens
jQuery(document).ready() é executado
quando o DOM estiver pronto
$(‘a.side’) usa seletores CSS para encontrar
os elementos
.click() cria um evento em background
sexta-feira, 10 de setembro de 2010
29. Características do
jQuery
Focado na interação entre HTML e JavaScript
Operações resumidas em:
Encontrar elemento
Fazer algo com ele
sexta-feira, 10 de setembro de 2010
30. CSS Selectors
$(‘#nav’)
$(‘div#content h2’)
$(‘#nav li.current a’)
sexta-feira, 10 de setembro de 2010
31. Resgatando Informação
$(‘div:first’).attr(‘title’)
$(‘div:first’).html()
$(‘div:first’).text()
$(‘div:first’).css(‘color’)
sexta-feira, 10 de setembro de 2010
32. Setando Informação
$(‘div:first’).attr(‘title’, ‘Home’)
$(‘div:first’).html(‘Novo <p>conteúdo</p>’)
$(‘div:first’).text(‘Novo texto de conteúdo’)
$(‘div:first’).css(‘color’, ‘red’)
sexta-feira, 10 de setembro de 2010
36. jQuery e Microformatos
<ul class="restaurants">
<li class="vcard">
<h3>
<a class="fn org url" href="..."> Riddle & Finns</a>
</h3>
<div class="adr">
<p class="street-address">12b Meeting House Lane</p>
<p><span class="locality">Brighton</span>,
<abbr class="country-name" title="United Kingdom">UK</abbr>
</p>
<p class="postal-code">BN1 1HB</p>
</div>
<p>Telephone: <span class="tel">+44 (0)1273 323 008</ span></p>
<p class="geo">Lat/Lon:
<span class="latitude">50.822563</span>,
<span class="longitude">-0.140457</span>
</p>
</li>
...
sexta-feira, 10 de setembro de 2010
37. Criando o mapa
jQuery(function($) {
var themap = $('<div id="themap"></div>').css({
'width': '90%',
'height': '400px' }).insertBefore('ul.restaurants');
sexta-feira, 10 de setembro de 2010
38. Criando o mapa
jQuery(function($) {
var themap = $('<div id="themap"></div>').css({
'width': '90%',
'height': '400px' }).insertBefore('ul.restaurants');
var mapstraction = new Mapstraction('themap','google');
mapstraction.addControls({
zoom: 'large', map_type: true
});
sexta-feira, 10 de setembro de 2010
39. Mostrando o mapa
mapstraction.setCenterAndZoom(
new LatLonPoint(50.8242, -0.14008),
15 // Zoom level
);
sexta-feira, 10 de setembro de 2010
40. Pegando os
microformatos
$('.vcard').each(function() {
var hcard = $(this);
var latitude = hcard.find('.geo .latitude').text();
var longitude = hcard.find('.geo .longitude').text();
var marker = new Marker( new LatLonPoint(latidude,longitude) );
marker.setInfoBubble(
‘<div class=”bubble”>’ + hcard.html() + ‘</div>’
);
mapstraction.addMarker(marker);
});
sexta-feira, 10 de setembro de 2010
41. labels.js com jQuery
...
<label for=”search” class=”inputLabel”>Search:</label>
<input type =”text” id=”search” name=”q”>
...
sexta-feira, 10 de setembro de 2010
42. labels.js com jQuery
jQuery(function($) {
$('label.inputLabel').each(function() {
});
});
sexta-feira, 10 de setembro de 2010
43. labels.js com jQuery
jQuery(function($) {
$('label.inputLabel').each(function() {
var label = $(this);
var input = $('#' + label.attr('for'));
var initial = label.hide().text().replace(':', '');
});
});
sexta-feira, 10 de setembro de 2010
44. labels.js com jQuery
jQuery(function($) {
$('label.inputLabel').each(function() {
var label = $(this);
var input = $('#' + label.attr('for'));
var initial = label.hide().text().replace(':', '');
input.focus(function() {
input.css('color', '#000');
if (input.val() == initial) {
input.val('');
}
})
});
});
sexta-feira, 10 de setembro de 2010
45. labels.js com jQuery
jQuery(function($) {
$('label.inputLabel').each(function() {
var label = $(this);
var input = $('#' + label.attr('for'));
var initial = label.hide().text().replace(':', '');
input.focus(function() {
input.css('color', '#000');
if (input.val() == initial) {
input.val('');
}
}).blur(function() {
if (input.val() == '') {
input.val(initial).css('color', '#aaa');
}
})
});
});
sexta-feira, 10 de setembro de 2010
46. labels.js com jQuery
jQuery(function($) {
$('label.inputLabel').each(function() {
var label = $(this);
var input = $('#' + label.attr('for'));
var initial = label.hide().text().replace(':', '');
input.focus(function() {
input.css('color', '#000');
if (input.val() == initial) {
input.val('');
}
}).blur(function() {
if (input.val() == '') {
input.val(initial).css('color', '#aaa');
}
}).css('color', '#aaa').val(initial);
});
});
sexta-feira, 10 de setembro de 2010
47. Perguntas?
Elber Ribeiro Próximo techtalk
elber@dynaum.com teremos sinatra!
sexta-feira, 10 de setembro de 2010