RamonPage.com . Web na ponta do lápis » DOM

HTML5 e o outro lado da moeda

RamonPage — Tue, 23 Sep 2008 04:46:12 +0000

Para você que leu meu último post sobre HTML5 e encarou com estranheza a idéia de que só em 2022 ele estará definitivamente “pronto para uso”, alguns pontos importantes precisam ser esclarecidos. Saiba quais são eles.

1. Compatibilidade dos browsers

A expectativa é de que em 2009 (data programada para um novo rascunho) o HTML5 já esteja suportado na maioria dos browsers modernos, mas não por completo.

Assim como a guerra dos browsers propõe, cada browser deve se basear primeiramente naquilo que lhe convém. Dentro deste tema, será interessante ver a abordagem das tags e que certamente implicarão em interesses pessoais de Microsoft (Media Player) e Apple (QuickTime).

2. Implementação incompleta

Veja uma pequena lista de implementações catalogada pelo pessoal do whatwg, cujo trabalho é voltado exatamente no HTML5.

Veja outra lista no wikipedia. O Opera Browser (Presto Engine), como já é de se esperar, tem o melhor suporte até então.

3. Cultura

Passamos um bom tempo até chegarmos numa web satisfatória (mesmo que numa percentagem pequena ainda). Poucos anos atrás, não existia a preocupação nos desenvolvedores em manter a marcação de seus sites organizada, que dirá pensar em standards: era perda de tempo demais!

Agora, nos deparamos com uma nova realidade, já que até quem trabalha com XHTML 1.x poderá se converter para o HTML5. Mas, será que os desenvolvedores querem mesmo isso? Esse ponto é importantíssimo para aqueles que correlacionam padrões web apenas com XHTML. Ledo engano.

John Resig, aquele do Jquery, escreveu no início do ano sobre uma forma prática de implementar sempre o mais recente DOCTYPE nas marcações. Essa técnica será válida para o HTML5. Assim, os desenvolvedores poderiam continuar com seu HTML4 e ir adicionando funcionalidades ao longo do tempo — de acordo com a compatibilidade dos browsers — dentro da marcação HTML5. Como o DOCTYPE não define a versão da marcação, ele sempre procurará corresponder à mais recente encontrada.

O código é simples:

Essa seria uma forma interessante de comerçarmos a nos acostumar com o HTML5.

Conclusão

Apesar de existir um longo caminho até o HTML5 substituir completamente o HTML4, estamos próximos de conseguirmos utilizá-lo aos poucos, já com certa compatibilidade de recursos nos browsers. De qualquer forma, penso que a “cultura” que trato neste artigo está diretamente ligada à previsão de 2022 tratada no artigo anterior, visto que certamente haverá um bom tempo até que alguma parte dos desenvolvedores/webdesigners se conscientizem da nova realidade. Vale lembrar que tínhamos bom suporte à HTML standard há muitos anos (mais de uma década) e só agora, desde poucos anos atrás, nos tocamos disso. :P

A maturidade do javascript e acessibilidade

RamonPage — Sun, 05 Aug 2007 18:05:45 +0000

Corrija-me se eu estiver errado: javascript se não for “o” é um dos grandes adventos da Internet de todos os tempos! Porém ainda existem muitos mitos em torno da sua utilização. Assim como disse para o ajax, repito para os scripts em geral: javascript é bom, mas na medida certa. E para justificar isso, apresento algumas formas acessíveis de se usar javascript, além de divagar sobre sua maturidade, que vem se revigorando à cada dia.

Javascript como deve ser

Algumas razões para se usar javascript:

Interatividade;
Validação de dados;
Processamento de informação;
Efeitos visuais.

Como o javascript oferece um sem fim de possibilidades, a má utilização de um dos itens acima pode ser perigosa e determinante para o resultado insatisfatório de um projeto.

E este perigo está diretamente ligado à acessibilidade do javascript. É importante lembrar que páginas não devem depender de scripts. Scripts devem, apenas, incrementar seus resultados.

Javascript acessível?

Sim, é possível! Pensemos como se todas as páginas não usassem javascripts. Qual seria a alternativa para algo que invariavelmente um javascript faria? Complicado não? Porém não impossível.

Algumas regras

Não restringir apenas o uso do mouse para algum script;
Usar eventos independentes¹ de dispositivo (onFocus, onBlur, onSelect e onChange, por exemplo)
Não comprometer a navegação pelo teclado em qualquer seção de uma página;
Oferecer alternativas para situaçõs em que o javascript não esteja habilitado;
Usar DOM ao invés de DHTML; e
Usar javascript unobtrusivo.

¹ – Eventos independentes são eventos que podem ser acionados tanto por mouse, quanto por teclado, sem que o resultado seja comprometido.

Javascript maduro é o que há!

Do DHTML ao DOM, do javascript acoplado ao javascript unobtrusivo, dos scripts convencionais às APIs e libraries. O javascript notoriamente está sendo levado à sério.

Incrementado a acessibilidade com javascript maduro

Atualmente, existem diversas formas de se incrementar um javascript tradicional. Algumas são simples, como a adição de addEvents para observar eventos de elementos, outras mais complexas, como a escolha da library adequada para um projeto. E essa escolha tende a ser difícil, pois a gama de alternativas é grande: JQuery, Prototype, Mochikit, Dojo Toolkit, YUI, Ext JS… Ufa! Ainda esqueci outros, com certeza.

Conclusão

Está comprovado que é possível usar javascript de forma inteligente e acessível. E, como digo para qualquer outro recurso: o uso ou não de uma determinada alternativa depende, antes de tudo, da característica fim do projeto. Não fará sentido usar uma library apenas para validar um formulário. Em contrapartida, é quase que imprescindível o seu uso em uma aplicação baseada em Web. ;)

Gerador de ano de copyright via DOM

RamonPage — Sun, 25 Feb 2007 01:18:54 +0000

Deseja atualizar os anos de copyright de sua página, automaticamente, sem comprometer a sua marcação? Deseja, ainda, integrar essa atualização à estrutura de microformats que você já possui? Então, eis uma técnica simples de como atualizar automaticamente os anos de copyright de uma página web, via DOM.

Conceito

A lógica é simples: dado um ano, caso ele seja maior que o ano de criação do site, este é adicionado ao ano de copyright da página.

var firstYear = els[i].innerHTML; // Ano retirado do site
var currentYear = new Date(); // Data corrente
currentYear = currentYear.getFullYear(); // Ano corrente, ajustado para 4 dígitos (formato para todos os browsers).
if (currentYear > firstYear) { // Se o ano corrente for maior que o ano do site.
els[i].innerHTML = els[i].innerHTML + " - " + currentYear; // Ano do site recebe o ano de criação, mais o ano corrente.
}

Na notação acima, els[i].innerHTML representa todas as classes encontradas no site para a representação do ano de criação.

Como fazer funcionar?

Basta inserir o ano de criação do site dentro de um . O resto deixe por conta do script!

Exemplo:

2007

Resulta em¹:

¹ – Adiante a data de seu Sistema Operacional em 1 (um) ano para poder ver este exemplo em ação.

2007

Mas… Por que “copyright year”?

Lembra dos microformats? Pois então. Esta minha escolha de classes foi idealizada exatamente para não comprometer o seu uso.

Colocando para funcionar

Para fazer o Copyright Generator funcionar em seu site, basta baixar o arquivo copygen.js, inserí-lo na lista de scripts do de sua página e utilizar o para receber o ano de criação do seu site. Enjoy! ;)

Mostrar-esconder conteúdo via DOM V.2

RamonPage — Mon, 06 Nov 2006 11:39:07 +0000

Show-hide content with DOM V.2

Ontem, ao redigir o artigo sombra em imagem com DOM e CSS, percebi que o script de mostrar-esconder conteúdo poderia receber uma melhoria. Ao invés de procurar cada classe CSS que se referisse à outra língua (no meu caso o inglês), por que não utilizar o atributo lang inserido dentro das referidas tags?? Pois é, essa foi a sacada!

Novo código

var arrEls = new Array("h1","h2","h3","h4","h5","h6", "p","span","ul","ol","blockquote")
function getTextNodeByLangName(tag,eventNode) {
var els = document.getElementsByTagName(tag);
var idLink = 'showHideTextNode';
var messageShow = '[+] Show english content';
var messageHide = '[-] Hide english content';
var linkTextNode = document.getElementById(idLink);
for (i = 0; i < els.length; i++) {
var lang = els[i].getAttribute("lang");
if (lang == 'en') {
if (eventNode == 'hide') {
linkTextNode.innerHTML = messageShow;
linkTextNode.className = "link-show";
linkTextNode.onclick = function() {
for (j = 0; j < arrEls.length; j++) {
getTextNodeByLangName(arrEls[j],'show');
}
};
els[i].style.display = 'none';
} else if (eventNode == 'show') {
linkTextNode.innerHTML = messageHide;
linkTextNode.className = "link-hide";
linkTextNode.onclick = function() {
for (j = 0; j < arrEls.length; j++) {
getTextNodeByLangName(arrEls[j],'hide');
}
};
els[i].style.display = 'block';
}
}
}
}
function init_textNode() {
if (!document.getElementsByTagName) return
for (j = 0; j < arrEls.length; j++) {
getTextNodeByLangName(arrEls[j],'hide');
}
}
addLoadEvent(init_textNode);

A grande mudança está na localização do atributo lang, como a seguir:

var lang = els[i].getAttribute("lang");
if (lang == 'en') {

Agora, a classe que antes era responsável por esconder os conteúdos, agora ficou apenas com o trabalho de estilizar estas áreas. ;)

Sombra em imagem com DOM e CSS

RamonPage — Sun, 05 Nov 2006 22:01:56 +0000

Image drop shadow with DOM and CSS

Inspirado pelos artigos do A List Apart, há um tempo venho pensando numa solução para criar sombras em imagens sem atrapalhar minha semântica, ou seja, com o mínimo de manipulação da marcação em torno da imagem. Depois de alguns estudos e testes, cheguei num resultado onde é necessário utilizar apenas uma classe para criar as sombras.

Inspired by two articles of A List Apart, I come thinking about a solution to create drop shadows on images without confuse my semantic, that is, with the minimum of manipulation in markup around the image. After some studies and tests, I arrived in a result where it’s necessary to use only one class to create the drop shadows.

Como funciona

How it works

O conceito da criação das sombras é o seguinte:

Adicionar um div, via DOM, em volta da imagem;
Setar este div com a mesma largura da imagem, para que a sombra fique proporcional à largura da mesma;
Inserir um background que simule uma sombra neste div via CSS;
Deslocar, levemente, a imagem para obter o tamanho de sombra desejado, também via CSS.
Pronto!

Insert a div, with DOM, around the image;
Set this div with the same width of the image;
Insert a shadow background on div with CSS;
Dislocate, lightly, the image to get the desired size of drop shadow, also with CSS.
That’s all!

Veja um exemplo:

Take a look:

Resulta em:

Results in:

Os códigos

The codes

Criando o container, via DOM, para receber a sombra da imagem.

setImageDropShadow = function (searchClass,tag) {
var browser=navigator.appName;
var agent = navigator.userAgent;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
var opera = false
if(agent.indexOf("Opera")!=-1){
var versionindex=agent.indexOf("Opera")+6;
if (parseInt(agent.charAt(versionindex))>=8)
opera = true;
}
var els = document.getElementsByTagName(tag);
var pattern = new RegExp("\\b"+searchClass+"\\b");
for (i = 0; i < els.length; i++) {
if ( pattern.test(els[i].className) ) {
var NewDiv = document.createElement('div');
NewDiv.className = "shadow-container";
if (((browser=="Microsoft Internet Explorer") && (version>=4) && (!agent.indexOf("MSIE 7") != -1)) || (opera)) { // Fix IE 6 and Opera width problem
NewDiv.style.width = (els[i].width - 4).toString() + "px";
} else {
NewDiv.style.width = (6 + els[i].width).toString() + "px";
}
var parentDiv = els[i].parentNode;
parentDiv.insertBefore(NewDiv, els[i]);
NewDiv.appendChild(els[i]);
}
}
}
window.onload = function() {
setImageDropShadow('shadow','img');
};

Estilizando a sombra.

.shadow-container {
position: relative;
background: url(bg-small-shadow.png);
}
.shadow-container img {
position: relative;
display: block;
top: -3px;
left: -3px;
margin: 0;
padding: 2px;
background: #fff;
border: 1px solid #e1e1e1;
}

Para criar a sombra, utilizei uma imagem de 20x20px, em tom de cinza claro (#d8d8d8) e 50% de transparência. A imagem pode ser vista aqui!

Get the drop shadow background here!

Detalhe importante! A parte em negrito, a seguir, é a que determina a distância da sombra em relação à imagem. Quanto menores os valores inseridos para top e left, maior será a distância da sombra em relação à imagem.

Important detail! The lines in boldface, below, are that determine the distance between the image and the drop shadow. Change the values for better use.

.shadow-container img {
position: relative;
display: block;
top: -3px;
left: -3px;
margin: 0;
padding: 2px;
background: #fff;
border: 1px solid #e1e1e1;
}

Tudo o que você precisa para usar sombras em suas imagens

All you need to work with it

Esta solução foi testada no Opera 9.x, Firefox 1.5.0.7, IE 6.0, IE 7.0 RC1 e Safari 2.0.4.

Reportes de erros, bugs, e, pricipalmente, sugestões são muito bem-vindos. ;)

Mostrar-esconder conteúdo via DOM

RamonPage — Mon, 04 Sep 2006 04:10:50 +0000

Show-hide content with DOM

Um dos requisitos que declarei para o meu site foi a possibilidade de inserir conteúdo em outras línguas para as minhas postagens, em especial em inglês. Depois de alguns estudos cheguei à estrutura que desejava e desenvolvi um script em DOM para implementá-la. Como este não era um requisito de prioridade alta, deixei sua implementação para uma data futura. Eis que esta data chegou!

O conceito do script é simples: defini uma classe para todos os elementos (tags) que eu gostaria de inserir em inglês e fiz uma função em javascript para localizar todas as instâncias desta e escondê-la. Clicando em um link específico, as áreas são apresentadas. Clicando novamente no mesmo link, as áreas são escondidas.

Exemplo escondido:

This is an example of show-hide english content on

element

This is a list with english content
Line example
Line example

This is an
element with english content.

Definindo os recursos da solução

O primeiro passo foi definir um link para esconder e mostrar as áreas. Inseri um ID para este link para poder trabalhá-lo via script.

Não inseri nenhum conteúdo no link para poder manipulá-lo via script, trocando o texto, via innerHTML, de acordo com o clique efetuado ([+] Show english content para mostrar o conteúdo e [-] Hide english content para esconder o conteúdo).

Após, apenas defini uma classe para cada elemento que tivesse conteúdo em inglês. A classe foi chamada de lang-eng.

Manipulando a classe lang-eng via javascript

O primeiro passo foi definir um Array para todos os elementos que poderiam receber a classe lang-eng.

var arrEls = new Array(“h1″,”h2″,”h3″,”h4″,”h5″,”h6″,”p”,”span”,”ul”,”blockquote”)

Após, foi preciso apenas uma função para localizar a classe lang-eng e efetuar as alterações nas páginas em que ela foi instanciada. Utilizei como base o script getElementByClass do Dustin Diaz. A partir daí, otimizei o script para chegar ao resultado que gostaria.

function getTextNodeByClassName(searchClass,tag,eventNode) {

var els = document.getElementsByTagName(tag);

var pattern = new RegExp("\\b"+searchClass+"\\b");

var idLink = 'showHideTextNode';

var messageShow = '[+] Show english content';

var messageHide = '[-] Hide english content';

var linkTextNode = document.getElementById(idLink);

for (i = 0; i < els.length; i++) {

if ( pattern.test(els[i].className) ) {

if (eventNode == 'hide') {

linkTextNode.innerHTML = messageShow;

linkTextNode.className = "link-show";

linkTextNode.onclick = function() {

for (j = 0; j < arrEls.length; j++) {

getTextNodeByClassName('lang-eng',arrEls[j],'show');

}

};

els[i].style.display = 'none';

} else if (eventNode == 'show') {

linkTextNode.innerHTML = messageHide;

linkTextNode.className = "link-hide";

linkTextNode.onclick = function() {

for (j = 0; j < arrEls.length; j++) {

getTextNodeByClassName('lang-eng',arrEls[j],'hide');

}

};

els[i].style.display = 'block';

}

}

}

}

Por fim, inseri uma função para esconder todos os elementos declarados com a classe lang-eng. Esta função é inicializada por um addLoadEvent.

function init_langEngNode() {

if (!document.getElementsByTagName) return

for (j = 0; j < arrEls.length; j++) {

getTextNodeByClassName('lang-eng',arrEls[j],'hide');

}

}

add_event(init_langEngNode);

Como tudo funciona

Pegando todas as tags inseridas como parâmetro e selecionando apenas a classe desejada para estas tags. Numa tag com class="lang-eng alignleft", por exemplo, apenas a lang-left seria selecionada.

function getTextNodeByClassName(searchClass,tag,eventNode) {

var els = document.getElementsByTagName(tag);

var pattern = new RegExp("\\b"+searchClass+"\\b");

Eu poderia setar "*" como tag para pegar todas as tags na página (vide linha "var els = document.getElementsByTagName(tag);"), inutilizando a necessidade de criação do Array de elementos, porém esta estrutura tiraria o controle que eu teria sobre os elementos que eu efetivamente gostaria de esconder.

O bom da história é que praticamente toda a aplicabilidade da solução está no script, portanto qualquer alteração futura fica totalmente mais prática. Minhas intenções estavam totalmente voltadas na manipulação do mínimo possível de marcação e trabalhar diretamente no javascript.

Continuando...

Definindo o ID para o link de manipulação e suas mensagens.

var idLink = 'showHideTextNode';

var messageShow = '[+] Show english content';

var messageHide = '[-] Hide english content';

Pegando o ID inserido no link da página.

var linkTextNode = document.getElementById(idLink);

Para os elementos encontrados, testar se cada um deles tem a classe escolhida como parâmetro.

for (i = 0; i < els.length; i++) {

if ( pattern.test(els[i].className) ) {

Foram definidos dois parâmetros para manipular as tags: show para mostrar os conteúdos e hide para escondê-los. Uma estrutura de if foi criada para testar em qual status a página está. Caso o evento seja hide o link de manipulação recebe a mensagem [+] Show english content. Caso seja show, recebe a mensagem [-] Hide english content.

Para o evento onclick do link é inserida uma função para voltar à mesma função e mostrar ou esconder o conteúdo. A forma de esconder é simples: o elemento encontrado recebe como atributo display o valor "none" (els[i].style.display = 'none';). Para mostrar, o atributo display recebe o valor "block" (els[i].style.display = 'block';).

if (eventNode == 'hide') {

linkTextNode.innerHTML = messageShow;

linkTextNode.className = "link-show";

linkTextNode.onclick = function() {

for (j = 0; j < arrEls.length; j++) {

getTextNodeByClassName('lang-eng',arrEls[j],'show');

}

};

els[i].style.display = 'none';

} else if (eventNode == 'show') {

linkTextNode.innerHTML = messageHide;

linkTextNode.className = "link-hide";

linkTextNode.onclick = function() {

for (j = 0; j < arrEls.length; j++) {

getTextNodeByClassName('lang-eng',arrEls[j],'hide');

}

};

els[i].style.display = 'block';

}

}

}

}

O último passo foi estilizar a classe lang-eng para separar as áreas apresentadas (português/ inglês), senão ficaria tudo uma coisa só, visualmente.

Esta solução pode ser utilizada em vários outros contextos. Basta ter criatividade. ;)

Atualização 2006-11-06: Versão 2.0 concluída, ver: Mostrar-esconder conteúdo via DOM V.2