sábado, 31 de dezembro de 2011

Documento XHTML 1.0 mínimo

Seus sites seguem os padrões web? Um jeito rápido de você saber é usando o serviço de validação do W3C (World Wide Web Consortium), o Markup Validation Service. Nele podemos validar documentos HTML e XHTML. Mas porque ter o trabalho a mais de manter os meus sites dentro dos padrões web? Bom, além de torná-lo um cidadão modelo na internet, sites que seguem os padrões web são melhores vistos por engines de busca como a google o que melhora a posição e visibilidade de seus sites. O uso de padrões também melhora a acessibilidade dos sites para pessoas com deficiências, isso é especialmente importante para sites governamentais. Outra vantagem é que com os padrões é mais fácil evitar problemas de incompatibilidades entre diferentes browsers, hoje um site tem que ser exibido corretamente em no mínimo três browsers diferentes: Firefox, Chrome e Internet Explorer. Sem contar os browsers de dispositivos móveis que são um boa parte dos acessos hoje em dia.

Eu geralmente uso XHTML 1.0 nos meus sites, e toda página servida deve uma estrutura mínima para estar dentro dos padrões. Aqui vai o exemplo:



Este documento usa o DOCTTYPE XHTML 1.0 Strict, que é bem rígido com a estrutura do documento. O DOCTYPE define os DTD (Document Type Definitions) usados para validar a sintaxe e gramática da marcação XHTML. Existem várias regras para escrever um documento xhtml válido como todas as tags tem que ser escritas com letras minúsculas, todas as tags de abertura devem ter a tag de fechamento correspondente, os atributos das tags também devem ser escritos com letras minúsculas etc.

O DOCTYPE Strict é mais indicado para páginas onde a marcação html e a apresentação são totalmente separadas através do uso de CSS. Um DOCTYPE mais flexível é o Transitional, que permite o uso de elementos em desuso, ou quando o documento mistura marcação e regras de apresentação. Neste caso o exemplo seria:



Muitas das informações neste post foram obtidas no excelente livro "Construindo sites com CSS e (X)HTML" de Maurício Samy Silva.

Quer você use XHTML ou HTML eu acho muito importante seguirmos os padrões web, desta forma sempre estaremos tornando a web um lugar melhor.

domingo, 18 de dezembro de 2011

Como escrever javascript com PHP?

Quem já tem alguma experiência com desenvolvimento web já deve ter passado pela experiência de escrever código javascript usando código PHP. A técnica é bem interessante e poderosa, pois você está gerando código javascript dinamicamente usando PHP que também é uma linguagem dinâmica, Batman e Robin ficariam orgulhosos.

Aqui vai um exemplo: Você tem um site bastante visitado e que usa bastante ajax para evitar recarregar toda a página para cada ação do usuário. Mas e que tal você economizar até nas chamadas ajax? Supondo aquela situação básica onde o usuário do site escolhe uma opção em um select e algum lugar da página é recarregado automaticamente de acordo com a opção escolhida. Supondo ainda que as informações envolvidas não mudem com muita frequência, vamos fazer com todas as informações já estejam na página permitindo o código javascript carregar as informações na página sem uma requisição ajax.



O código simplesmente preenche o input "sentimento_cor" de acordo com a cor escolhida no select. Como vocês podem ver estou preenchendo o array javascript "sentimentos_cores" com os valores vindos do array PHP "sentimento_cores". Desta forma a função "mostra_sentimentos" vai somente pegar o valor do input diretamente do array javascript sem a necessidade de uma requisição ajax.

Até aí tudo bem. No entanto se você testar este código vai perceber que um erro javascript vai aparecer logo de cara na seguinte linha:
sentimentos_cores.push("depressão, luto e "escuridão"");
Como a palavra escuridão está entres aspas duplas estas se misturaram com as aspas duplas do código javascript formando um comando inválido. O problema aqui foi que nós não escapamos a saída javascript. E como já comentei em um artigo anterior não escapar a saída pode trazer sérios problemas para sua aplicação web.

E como escapamos a saída javascript? Muito simples, a linguagem PHP já possui uma função que faz isso, embora o nome da função não seja óbvio, a função json_encode. Assim o trecho onde a PHP gera o código javascript ficaria assim:



Agora vá e observe a saída gerada pela linguagem PHP:



As aspas foram escapadas e os acentos foram convertidos para uma representação unicode. Na verdade nós poderíamos ter simplificado o código usando a função json_encode diretamente no array PHP o teria gerado a seguinte string:

["al\u00edvio e paz","amor e paix\u00e3o","depress\u00e3o, luto e \"escurid\u00e3o\""];

Esta string é código javascript, e pode ser usado diretamente no código javascript da página:



Espero que este post seja útil para quem estiver usando PHP para gerar javascript, até a próxima!