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.
sábado, 31 de dezembro de 2011
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!
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!
segunda-feira, 28 de novembro de 2011
Sobre como montar árvores armazenadas em bancos de dados relacionais
Sumário: Neste post vou falar sobre como montar a árvore de relacionamentos de uma estrutura hierárquica armazenada em uma tabela de um banco de dados relacional, e em seguida aplicar isso na exibição de um select(html) onde os relacionamentos entre pais e filhos são demonstrados. Download de código de exemplo no final do post.
Em um projeto que ajudo a desenvolver no trabalho, um CMS, temos uma tabela no banco de dados chamada Páginas. Esta tabela armazena informações sobre as página de um site, estas páginas indicam cada local de conteúdo de um site, como Home, Busca, Notícias, etc. Acontece que as páginas são inter-relacionadas, ou seja, a página Home pode ser pai da página Notícias e a página Notícias pode ser pai da página Destaques. A estrutura simplificada da tabela Página é a seguinte:
Como vocês podem ver a coluna id_pagina_pai é uma referência a coluna id da mesma tabela, por exemplo, olhando no registros da tabela podemos ver que a página Destaques é filha de Notícias.
Este tipo de estrutura hierárquica é muito comum em muitos softwares e sistemas e no dia-a-dia como relações familiares, grupos e sub-grupos, sistemas de arquivos com suas pastas e sub-pastas e muitos outros. Acontece que bancos de dados relacionais não são as melhores ferramentas para armazenar e manipular estes tipos de informações. Por exemplo, como faríamos para exibir a estrutura da tabela de Páginas mostrada acima em um select html da seguinte forma?:
No código exemplo que pode ser obtido abaixo eu demonstro a forma que eu encontrei para fazer isso. Provavelmente não é a melhor forma, mas resolveu meu caso muito bem. Só lembrando que em bancos de dados como Oracle e Postgre existem recursos como queries recursivas que ajudam na hora de manipular dados hierárquicos. No exemplo estou usando o banco de dados Mysql.
A Função que faz a Mágica
O principal trecho do código é função create_pool_tree, reproduzida abaixo:
Esta função basicamente cria toda a árvore que está armazenada na tabela paginas usando referências dentro de um array. Um pouco difícil de entender? Vamos por partes:
O primeiro foreach do código basicamente pega todas as páginas e as coloca em um array com uma estrutura pré-preparada. A imagem abaixo vai ilustrar o processo tomando como exemplo os dados da tabela Páginas acima:
Em um projeto que ajudo a desenvolver no trabalho, um CMS, temos uma tabela no banco de dados chamada Páginas. Esta tabela armazena informações sobre as página de um site, estas páginas indicam cada local de conteúdo de um site, como Home, Busca, Notícias, etc. Acontece que as páginas são inter-relacionadas, ou seja, a página Home pode ser pai da página Notícias e a página Notícias pode ser pai da página Destaques. A estrutura simplificada da tabela Página é a seguinte:
| id | nome | id_pagina_pai |
|---|---|---|
1 | Home | null |
2 | Notícias | 1 |
3 | Destaques | 2 |
4 | Busca | 1 |
5 | Menu | null |
Como vocês podem ver a coluna id_pagina_pai é uma referência a coluna id da mesma tabela, por exemplo, olhando no registros da tabela podemos ver que a página Destaques é filha de Notícias.
Este tipo de estrutura hierárquica é muito comum em muitos softwares e sistemas e no dia-a-dia como relações familiares, grupos e sub-grupos, sistemas de arquivos com suas pastas e sub-pastas e muitos outros. Acontece que bancos de dados relacionais não são as melhores ferramentas para armazenar e manipular estes tipos de informações. Por exemplo, como faríamos para exibir a estrutura da tabela de Páginas mostrada acima em um select html da seguinte forma?:
No código exemplo que pode ser obtido abaixo eu demonstro a forma que eu encontrei para fazer isso. Provavelmente não é a melhor forma, mas resolveu meu caso muito bem. Só lembrando que em bancos de dados como Oracle e Postgre existem recursos como queries recursivas que ajudam na hora de manipular dados hierárquicos. No exemplo estou usando o banco de dados Mysql.
A Função que faz a Mágica
O principal trecho do código é função create_pool_tree, reproduzida abaixo:
Esta função basicamente cria toda a árvore que está armazenada na tabela paginas usando referências dentro de um array. Um pouco difícil de entender? Vamos por partes:
O primeiro foreach do código basicamente pega todas as páginas e as coloca em um array com uma estrutura pré-preparada. A imagem abaixo vai ilustrar o processo tomando como exemplo os dados da tabela Páginas acima:
Array $pool
Cada quadrado destes é um elemento do array $pool. Os nomes Home1, Noticias2, Destaques3, Busca4 e Menu5 são os índices. O índice pagina dentro de cada item é o objeto pagina. E filhas é um array vazio por enquanto.
O próximo foreach vai criar referências onde cada item de $pool vai ser referenciado por uma referência no array filhas de seu pai que também está em $pool. Complicado? A figura abaixo deve ajudar:
Array $pool com as refrências.
Vejam que todos os elementos estão no array e como as referências nos permitem saber a estrutura da árvore. Observem como Home e Menu não são referenciados por ninguém, o que significa que são os nós raízes da árvore.
O link para download do código exemplo está logo abaixo. São apenas dois arquivos, um de código php e outro com o banco de dados exemplo. Acho que o código não deve ser muito difícil de se adaptar para as necessidades de cada um. Qualquer dúvida, sugestão ou crítica sou todo ouvidos.
segunda-feira, 14 de novembro de 2011
Mais um pequeno Jogo que desenvolvi - DarkMatters
Link para o jogo
ScreenShot:
Um pequeno jogo desenvolvido usando Flixel e a biblioteca Flixel Power Tools, usada pelo método de colisão usando a transparência dos sprites. Devo dizer que demorei muito mais tempo do que eu imaginava para finalizar este game, e é um jogo bem simples, mesmo!
ScreenShot:
Um pequeno jogo desenvolvido usando Flixel e a biblioteca Flixel Power Tools, usada pelo método de colisão usando a transparência dos sprites. Devo dizer que demorei muito mais tempo do que eu imaginava para finalizar este game, e é um jogo bem simples, mesmo!
sábado, 29 de outubro de 2011
Escapar saída html em PHP
Você está escapando a saída de todo o conteúdo inseguro nos seus scripts PHP? E por conteúdo inseguro eu digo tudo o que não for interno da aplicação como qualquer informação enviada pelos usuários, dados de outros servidores, webservices, banco de dados etc.
Uma boa notícia é que se você usa algum dos modernos frameworks php (Code Igniter, Symfony, Cake PHP) corretamente ele provavelmente já está cuidando disso para você, mas é bom você checar só por precaução. O problema é que muitos de nós desenvolvedores PHP temos sites ou sistemas que já tem um bom tempo de estrada e não usam nenhum framework.
Agora, você deve estar se perguntando, o que é este negócio de escapar a saída (output escape)?! Bem, como você deve saber desde os primórdios da internet a principal função de um browser web é exibir documentos html. E um documento html nada mais é do que um arquivo de texto, formado por tags html e texto puro. Aqui vai um exemplo de um típico trecho de um documento html:
Como você pode ver neste trecho de html temos um pouco texto comum, mas também temos as nossas famosas tags. As tags nada mais são do que comandos para o browser. Insira um imagem aqui, uma parágrafo aqui e crie uma div neste ponto...
Como o browser identifica estas tags? Através de caracteres especiais como < e >. Existem alguns outros caracteres importantes como ', " e &. E o que isso tem a ver com escape de saída? Bom imagine que em um blog um dos usuários insira um comentário com um conteúdo como este:
O que você acha que vai acontecer? Bom o browser de qualquer visitante que exibir este comentário vai executar o que quer que esteja no script perdeu_mane.js. Podem ser ações desde de redirecionar o usuário, exibir anúncios, quebrar o layout do site, roubar senhas e cookies, e até mesmo fazer com que usuários logados com previlégios de administrador executem ações no site. Isso meu amigo, é o famoso ataque XSS(Cross-site Scripting).
Escapar a saída nada mais é do que exibir aqueles caracteres especiais de uma forma representativa fazendo com que o browser não execute nenhuma ação disparada por tags. Neste caso < e > são escritos como < e >.
Uau! E como eu faço isso? Bom, escapar exibição de html em PHP não é particularmente difícil.
Exibir texto simples em uma página web:
Exibir text simples dentro de uma tag html:
Se você sempre usa aspas-duplas " nas suas tags, como por exemplo <input type="text" name="nome aqui" /> você pode usar ENT_COMPAT ao invés de ENT_QUOTES. ENT_COMPAT diz para a função transformar apenas as aspas-duplas, ENT_QUOTES vai transformar tanto aspas-duplas quanto aspas-simples.
Importante! Quando escapar a saída?
Você deve estar pensando que ao invés de ficar sempre chamando a função htmlspecialchars na hora de exibir o conteúdo você pode chamá-la apenas uma vez na hora de salvar o conteúdo? Talvez não seja uma boa ideia, hoje em dia é muito provável que você não vai exibir seu conteúdo apenas em páginas html, você também tem rss, json, csv, arquivos texto, emails e outras opções. Para cada uma destas opções de exibir conteúdo o processo de escape é diferente. Se você quiser salvar processamento você pode armazenar uma versão inalterada do conteúdo junto com versões já escapadas de acordo com sua necessidade.
Por enquanto é isso pessoal, espero que o artigo seja útil a vocês.
Uma boa notícia é que se você usa algum dos modernos frameworks php (Code Igniter, Symfony, Cake PHP) corretamente ele provavelmente já está cuidando disso para você, mas é bom você checar só por precaução. O problema é que muitos de nós desenvolvedores PHP temos sites ou sistemas que já tem um bom tempo de estrada e não usam nenhum framework.
Agora, você deve estar se perguntando, o que é este negócio de escapar a saída (output escape)?! Bem, como você deve saber desde os primórdios da internet a principal função de um browser web é exibir documentos html. E um documento html nada mais é do que um arquivo de texto, formado por tags html e texto puro. Aqui vai um exemplo de um típico trecho de um documento html:
Como você pode ver neste trecho de html temos um pouco texto comum, mas também temos as nossas famosas tags. As tags nada mais são do que comandos para o browser. Insira um imagem aqui, uma parágrafo aqui e crie uma div neste ponto...
Como o browser identifica estas tags? Através de caracteres especiais como < e >. Existem alguns outros caracteres importantes como ', " e &. E o que isso tem a ver com escape de saída? Bom imagine que em um blog um dos usuários insira um comentário com um conteúdo como este:
O que você acha que vai acontecer? Bom o browser de qualquer visitante que exibir este comentário vai executar o que quer que esteja no script perdeu_mane.js. Podem ser ações desde de redirecionar o usuário, exibir anúncios, quebrar o layout do site, roubar senhas e cookies, e até mesmo fazer com que usuários logados com previlégios de administrador executem ações no site. Isso meu amigo, é o famoso ataque XSS(Cross-site Scripting).
Escapar a saída nada mais é do que exibir aqueles caracteres especiais de uma forma representativa fazendo com que o browser não execute nenhuma ação disparada por tags. Neste caso < e > são escritos como < e >.
Uau! E como eu faço isso? Bom, escapar exibição de html em PHP não é particularmente difícil.
Exibir texto simples em uma página web:
Exibir text simples dentro de uma tag html:
Se você sempre usa aspas-duplas " nas suas tags, como por exemplo <input type="text" name="nome aqui" /> você pode usar ENT_COMPAT ao invés de ENT_QUOTES. ENT_COMPAT diz para a função transformar apenas as aspas-duplas, ENT_QUOTES vai transformar tanto aspas-duplas quanto aspas-simples.
Importante! Quando escapar a saída?
Você deve estar pensando que ao invés de ficar sempre chamando a função htmlspecialchars na hora de exibir o conteúdo você pode chamá-la apenas uma vez na hora de salvar o conteúdo? Talvez não seja uma boa ideia, hoje em dia é muito provável que você não vai exibir seu conteúdo apenas em páginas html, você também tem rss, json, csv, arquivos texto, emails e outras opções. Para cada uma destas opções de exibir conteúdo o processo de escape é diferente. Se você quiser salvar processamento você pode armazenar uma versão inalterada do conteúdo junto com versões já escapadas de acordo com sua necessidade.
Por enquanto é isso pessoal, espero que o artigo seja útil a vocês.
sábado, 17 de setembro de 2011
Rodar aplicativos 32-bit no Linux 64-bit
Computador novo, nova instalação do Ubuntu, desta vez a versão 11.04. E desta vez a versão 64-bit do sistema operacional, afinal, agora eu tenho 8 GB de memória ram e sistemas 32-bit não podem reconhecer mais do que 4 GB.
Quando estava testando alguns programas que costumava rodar no sistema antigo, como o flashplayerdebugger, o sistema estava me retornando uma mensagem dizendo que não tinha encontrado o arquivo ou diretório, apesar do caminho estar correto. Depois que algumas buscas sem resultado algum tive a ideia de que o problema poderia ser o fato de agora o programa estar em um sistema operacional 64-bit. Procurei para se achava uma versão 64-bit do flashplayerdebugger sem sucesso. Então procurei como rodar programas 32-bit em um sistema 64-bit.
Finalmente encontrei este post. Instalei a biblioteca indicada ia32-libs e pude rodar o programa. Aparentemente existem diversos problemas para rodar aplicativos 32-bit em ambientes 64-bit, pelo menos no linux. Este outro post pode ajudar a resolver os problemas de compatibilidade das bibliotecas.
Quando estava testando alguns programas que costumava rodar no sistema antigo, como o flashplayerdebugger, o sistema estava me retornando uma mensagem dizendo que não tinha encontrado o arquivo ou diretório, apesar do caminho estar correto. Depois que algumas buscas sem resultado algum tive a ideia de que o problema poderia ser o fato de agora o programa estar em um sistema operacional 64-bit. Procurei para se achava uma versão 64-bit do flashplayerdebugger sem sucesso. Então procurei como rodar programas 32-bit em um sistema 64-bit.
Finalmente encontrei este post. Instalei a biblioteca indicada ia32-libs e pude rodar o programa. Aparentemente existem diversos problemas para rodar aplicativos 32-bit em ambientes 64-bit, pelo menos no linux. Este outro post pode ajudar a resolver os problemas de compatibilidade das bibliotecas.
sábado, 10 de setembro de 2011
Jogo brasileiro no KickStarter
Olá pessoal! Só um post rápido para ajudar a divulgar o game The Light of The Darkness. Este game está sendo desenvolvido por uma equipe brasileira e atualmente eles estão buscando financiamento no site kickstarter. Este site permite que qualquer pessoa possa investir no projeto (eles chamam isso de crowd funding). Você entra no site, escolhe uma quantia que você quer investir no projeto e recebe algum mimo como retorno de acordo com a quantia que você investiu. No caso do The Light of Darkness você pode receber desde wallpapers do jogo, um cópia do jogo no dia do lançamento e até ter o logo de sua empresa como patrocinadora do projeto junto com um vídeo de divulgação.
Quanto ao jogo, ele parece uma excelente mistura de ação, aventura e exploração com gráficos 2D de alta qualidade. Espero que eles consigam juntar a quantia de que precisam, é legal ver estas iniciativas de densenvolvimento de jogos no Brasil.
Quanto ao jogo, ele parece uma excelente mistura de ação, aventura e exploração com gráficos 2D de alta qualidade. Espero que eles consigam juntar a quantia de que precisam, é legal ver estas iniciativas de densenvolvimento de jogos no Brasil.
Assinar:
Postagens (Atom)