No post anterior comecei uma série de dicas sobre estruturação do CSS, inicialmente apresentando a correta utilização dos seletores. Neste artigo, veremos algumas estratégias para separação de estilos em arquivos e organização das regras de estilos dentro de um arquivo.
Desde as primeiras páginas web até os dias de hoje, muitas coisas mudaram em relação à estruturação dos estilos aplicados. Por algum momento, páginas utilizavam estilos embutidos no HTML. Aos poucos, isso foi mudando e os estilos foram separados. Atualmente, é altamente recomendado o uso de folhas de estilos externas para possibilitar manutenções em estilos sem afetar a estrutura do documento. Além disso, a transferência de dados entre cliente e servidor fica reduzida (já que as folhas de estilos podem ser cacheadas), e também melhora a legibilidade da estrutura do documento.
Nos próximos posts vou citar algumas dicas sobre como estruturar seu CSS para permitir mudanças futuras sem grandes impactos e, na medida do possível, justificar as abordagens.
No post passado, comentei que está previsto para o PHP 5.4.0 um novo recurso, que permitirá nativamente controlar o progresso do upload de arquivos. A pedidos, vou postar um exemplo de código que utiliza o novo recurso.
O principal código é em JavaScript. Você pode optar por usar jQuery ou algum framework próprio. Aqui no post, usei JavaScript/DOM puro, apenas para ilustrar.
Para montar a barra de progresso no HTML, utilizei a tag <progress> do HTML 5.
Para quem gostaria de incluir informações metereológicas em um site ou aplicação PHP, segue uma dica de como fazer isso usando o web service provido pelo site The Weather Channel.
Quem trabalha com design Web e CSS, deve conhecer a propriedade overflow, que define como será o comportamento de um bloco em relação à sua rolagem caso o seu tamanho seja inferior ao do seu conteúdo. Mas hoje me deparei com a propriedade text-overflow, que eu nunca havia visto. Ela é muito simples, mas só está prevista para o CSS 3.
O Firefox só suportará esta propriedade na versão 7, enquanto outros navegadores já a suportam há algumas versões. O interessante é que o Internet Explorer suporta a propriedade desde a versão 6.0 (aquela famosa versão). Creio que seja uma invenção da Microsoft na época e que acabará se tornando um padrão.
Embora PHP seja especialmente desenvolvido para geração de páginas dinâmicas (HTML), ele também possui recursos para manipular outros tipos de dados, por exemplo, imagens. Neste post, veremos como trabalhar com a biblioteca GD sem precisar criar uma matriz de cores da imagem, ou seja, trabalhar diretamente na imagem.
Ao utilizar a função mail do PHP, você pode se deparar com um inconveniente por causa de codificação de caracteres usada para o assunto ou o conteúdo do e-mail. O problema é que o protocolo SMTP só permite a transmissão de dados em US-ASCII. Para utilizar caracteres que não fazem parte da tabela US-ASCII, é preciso utilizar um mecanismo de codificação dos dados para que o resultado seja compatível com US-ASCII. Neste artigo, veremos como fazer isso e enviar e-mail com assunto e conteúdo corretamente.
Vira e mexe existe alguém aparecendo com problemas com apresentação de caracteres por conta de codificação de caracteres errada. Já escrevi sobre Unicode, Códigos e Símbolos Unicode e sobre HTML entities. Mas neste artigo, veremos como utilizar UTF-8 em tudo e nunca mais ver caracteres sendo exibidos errado.
Dica rápida: a equipe de desenvolvimento do PHP disponibilizou a documentação das funções do PHP via manpage. A instalação é simples: basta instalar o PEAR e instalar o pacote "pman" (é só executar o comando abaixo).
$ pear install doc.php.net/pman
Acompanhando o site da especificação da futura CSS 3, achei algo bacana: CSS Gradient. Este recurso permite aplicar um degradê de uma cor para outra no fundo de um elemento. E não são degradês simples (de uma cor para outra) apenas. É possível especificar várias cores, o sentido em que caminhará o degradê, e em que pontos haverá mudança de cor, ou seja, é possível especificar várias cores e obter resultados muito bonitos.
A web tem mudado muito nos últimos anos. Antigamente, a resolução mais indicada para desenvolvimento de sites era 800x600. Muitos sites optavam por um layout de largura fixa de aproximadamente 780px e deixavam margens desocupadas nas laterais. Com o tempo, a resolução dos computadores pessoais e notebooks foi aumentando, passou para 1024x768. Recentemente, é comum utilizar uma resolução acima de 1024x768.
Por outro lado, um outro mercado tem cada vez mais se conectado à web: o mercado de dispositivos móveis de pequeno porte. Este mercado inclui celulares, smartphones, ipads, tablets, etc. Alguns destes dispositivos tem uma resolução compatível com um notebook (por exemplo, os tablets), mas outros tem resoluções muito pequenas. Neste cenário, o desenvolvimento web precisa de uma outra atenção para atender a um público ainda maior.
Ontem me deparei com um problema que eu nunca tinha visto antes. Instalei o Apache no Fedora 14 (Linux), que vem configurado para utilizar o diretório "/var/www/html" como repositório de sites, mas ele não estava conseguindo acessar arquivos/diretórios em outras partições.
Muitas vezes vi programadores perguntando como se faz para um script PHP obter os links de um documento HTML ou então as imagens ou outro elemento qualquer. Este artigo mostra como percorrer elementos de um documento HTML e capturá-los de acordo com seu nome ou atributo. Para tanto, é utilizada a extensão DOM.
A arquitetura de aplicações Web define que o documento gerado dinamicamente no servidor seja renderizado através de um programa (navegador Web ou "browser") no computador cliente. Normalmente são utilizadas as linguagens HTML e CSS para geração do documento. No entanto, existem vários navegadores disponíveis no mercado, cada um com características próprias e com um motor (engine) de renderização específico, que procura (ou não) seguir as especificações da W3C a respeito das linguagens citadas, e manter um certo "padrão de qualidade" do resultado visual.
Diante das diferenças entre os motores de renderização, pode ser útil detectar qual deles o cliente está usando para, talvez, aplicar alguns ajustes no layout, seja para torná-lo mais atrativo, seja para contornar algum bug no motor de renderização.
Neste artigo, veremos como detectar qual programa está acessando o sistema e, a partir disso, conseguir ajustar o layout de acordo com este valor detectado, ou oferecer o download de um programa para uma plataforma específica, ou simplesmente gerar estatísticas sobre os programas usados por quem acessa o sistema.
Dica rápida: o Google Web Fonts permite utilizar algumas fontes estilizadas com facilidade no seu site. Basta seguir estes passos:
No post anterior, vimos como consultar informações sobre tabelas, colunas e relacionamentos em bancos de dados MySQL. Neste post serão apresentados os recursos correspondentes no banco de dados PostgreSQL.
Diferente do MySQL, o PostgreSQL não possui um banco de dados reservado chamado information_schema. Ao invés disso, possui algumas tabelas reservadas prefixadas por "pg_".
Ao desenvolver um framework ou um sistema que possui uma "porta dos fundos" para o BD, onde é possível acessar a base de dados diretamente através de uma interface genérica, podemos precisar obter informações sobre as tabelas, colunas, relacionamentos, etc. No MySQL, estas informações ficam em um banco reservado chamado information_schema, que possui diversas VIEWS para consulta de dados.
Este artigo apresenta algumas SQLs úteis para se obter informações a respeito de tabelas, colunas, índices, chaves e relacionamentos entre tabelas, no SGBD MySQL.
Navegando pelo manual do PHP, encontrei a classe SplFileObject, que permite a manipulação de arquivos através de uma proposta orientada a objetos. Ela extende a classe SplFileInfo, que serve para obter informações sobre o arquivo.
Além dos métodos básicos, que inclusive tem nomes semelhantes aos das funções de mesmo propósito (paradigma procedural), vi que ela oferece uma forma de leitura de arquivos CSV através de um iterador.
Armazenamento de dados em sessão é um mecanismo oferecido pelo PHP que permite que a aplicação armazene/recupere dados específicos por usuário e compartilhados entre diferentes scripts. Este recurso é comumente utilizado para garantir a autenticação do usuário para que ele só precise informar a sua credencial uma única vez (log-in). Porém, este recurso também é importantíssimo para criar aplicações com nível de dinamicidade alto, e que requer o armazenamento constante de dados temporários, como uma cesta de compras, por exemplo. Neste artigo, veremos como utilizar a sessão de forma inteligente e otimizada, além de aprofundar em seu funcionamento.
Continuando a sequência de artigos sobre CSS 3, veremos agora um recurso que permite a disposição de um texto em várias colunas, de forma semelhante à disposição de um jornal. Trata-se do módulo Multi-column Layout Module (Módulo para Leiaute de Múltiplas Colunas).
O principal benefício deste recurso é facilitar a leitura de um texto que está em um espaço relativamente largo da página (pode ser um "DIV", ou outro elemento qualquer). Atualmente, usuários da Web utilizam as mais variadas resoluções de tela (exemplos: 800x600, 1024x768, 1280x800, etc.) e, dependendo do estilo de layout do site, pode ocorrer de uma região ficar muito larga. De fato, um layout de largura fixa (ou seja, que não aumenta ou diminui a largura de acordo com a resolução ou tamanho da fonte) permite a elaboração de efeitos bastante atrativos visualmente, embora em muitos casos prejudique a acessibilidade. Por outro lado, um layout elástico (que expande ou reduz de acordo com a resolução da tela ou do tamanho da fonte) pode ser mais acessível, mas também pode propiciar o aparecimento de regiões muito largas com texto. Acompanhar a leitura de uma linha muito grande horizontalmente é um tanto quanto "desagradável" para alguns usuários, por isso separar estes textos em colunas com largura menor pode facilitar bastante a leitura.