Minificação de arquivos para Web

Resumo:
Introdução
compressão de arquivos

O ambiente web é repleto de requisições e respostas HTTP contendo arquivos HTML, JS, CSS, imagens, etc. Dependendo da arquitetura da aplicação, cada página pode requerer muitos arquivos de estilos, script ou imagens auxiliares, que acabam consumindo tempo para serem baixados e processados pelo navegador. Portanto, é útil aplicar algumas técnicas para minimizar o tamanho destes arquivos, afinal, arquivos menores podem ser trafegados mais rapidamente. Uma página rápida é sempre bem vista pelos buscadores, como o Google, pois impacta diretamente numa melhor experiência do usuário.

Neste artigo, veremos algumas dicas de como minimizar o tamanho de alguns tipos de arquivos, para tornar as páginas mais rápidas de serem carregadas e, consequentemente, ter maior relevância para buscadores. Os assuntos estão divididos em:

Background com Gradientes

Resumo:
Introdução

Já escrevi aqui no blog sobre CSS Gradient, que é um recurso do CSS 3 para gerar degradês a partir de especificações de estilos. Porém, o recurso também pode ser utilizado para gerar algumas texturas sofisticadas e que, em alguns casos, podem substituir imagens de fundo. Neste artigo veremos alguns exemplos e suas vantagens.

Criando Triângulos com CSS

Resumo:
pirâmides do Egito
Introdução

Hoje estive procurando uma forma de montar triângulos para o HTML e descobri um artigo no the david walsh blog. Eu imaginava utilizar canvas do HTML 5 ou então o recurso do CSS 3 para realizar transformações geométricas em uma div, mas encontrei a técnica muito mais simples. Neste artigo vamos ver como ela funciona.

Design Responsivo com Media Queries

Resumo:
Introdução
Diferentes dispositivos exibindo o mesmo conteúdo, ilustrando um design responsivo

Design Responsivo (ou Responsive Design) é uma técnica que tem ganhado destaque nos últimos tempos, mas sua ideia é bastante antiga. Ela está diretamente relacionada ao pensamento de Tim Berners-Lee (o criador da Web), que dizia que os documentos da Web deveriam ser acessíveis por qualquer tipo de hardware que estivesse conectado à Internet, seja ele uma estação física ou móvel, com tela pequena ou grande. Ou seja, Design Responsivo é o nome de uma técnica que possibilita isso: prover um documento na Web que pode ser visualizado por qualquer dispositivo, de modo que o layout se adeque de forma amigável às restrições do aparelho.

Layout Toolkit

Resumo:
imagem de um pincel
Introdução

Toolkits de front-end são estruturas que oferecem recursos para auxiliar o desenvolvimento do layout das aplicações. No caso das aplicações web, normalmente eles oferecem folhas de estilo CSS bem organizadas, scripts JavaScript para oferecer interações com elementos de interface, um conjunto de ícones e, principalmente, padrões para a confecção do layout. Eles são muito úteis para desenvolvedores de aplicações web que não tem muito domínio ou paciência com CSS, mas também podem facilitar muito a vida de web designers e de desenvolvedores que já dominam o CSS, afinal, eles foram extensivamente usados e testados para se comportar da melhor forma possível na maioria dos navegadores web atuais.

A maioria deles vai de encontro com o que foi comentado no artigo Nova Geração de Web Design, que citava o "layout limpo" como sendo a principal tendência dos layouts modernos. Além disso, alguns seguem a crescente tendência "Mobile First" e design responsivo, que prevê um estudo da arquitetura do front-end para ser suportado por dispositivos móveis e por telas maiores. Você pode conhecer mais sobre o assunto no artigo Mobile First – A arte de pensar com foco.

Neste artigo, veremos 3 frameworks de front-end, mostrando as capacidades de cada um: Gumby Framework versão 2.0.0, Twitter Bootstrap versão 2.3.1 e Foundation versão 4.1.2.

Montando seletores CSS eficiêntes

Resumo:
Introdução

Recentemente, li o artigo How to write efficient css selectors (Como escrever seletores CSS eficiêntes) e aprendi que os seletores descendentes do CSS na verdade são avaliados da direita para a esquerda e não da esquerda para direita, como eu imaginava. Este é um pequeno detalhe, mas que faz toda a diferença na hora de montar seletores CSS de forma eficiênte para que o navegador renderize uma página com alta performance.

Neste artigo, vamos entender melhor como funciona esse processo de aplicação dos estilos pelas folhas de estilo e debater sobre a criação de seletores CSS eficiêntes.

Hijax - Ajax não obstrutivo

Resumo:
Introdução

Recentemente vi uma apresentação de slides cujo título era Hijax - Progressive Enhancement with Ajax (Hijax - Melhoria Progressiva com Ajax). Por abordar um tema muito interessante, resolvi compartilhar sobre o assunto aqui no blog.

O termo "Hijax" foi proposto por Jeremy Keith, e tem como princípio o planejamento/implementação de soluções com Ajax de forma acessível e não obstrutiva, ou seja, a aplicação se mantém funcional em navegadores com ou sem JavaScript habilitado ou disponível. Embora o tema esteja intimamente relacionado à acessibilidade, ele representa apenas a prática da organização de um documento HTML da forma como deveria ser feito em toda web.

Estruturação e Organização do CSS (parte 2)

Resumo:
Introdução

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.

Estruturação e Organização do CSS (parte 1)

Resumo:
Introdução

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.

A Propriedade CSS "text-overflow"

Resumo:
Introdução

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.

Nova geração de Web Design

Resumo:
Introdução

A Web surgiu como hipertextos bastante simples. A primeira geração gráfica ficou marcada por uma extensa lista de sites com gifs animados, textos coloridos e layout com tabela. Mais tarde começaram a pipocar sites montados com frames, onde se separava título, menu e conteúdo em frames separados. Com o passar dos anos os web designers passaram a adotar os padrões da W3C e utilizar corretamente a semântica das tags (tableless). Mais recentemente, ocorreu uma explosão de sistemas Web de alta popularidade, que exploraram a chamada Web 2.0, com recursos mais interativos sustentados basicamente por JavaScript. Porém, do ano passado para cá, tenho notado uma nova geração de Web Design. Neste artigo, vamos discutir alguns elementos que tem surgido e o que cada um pode impactar na usabilidade.

Firefox 5, surpresa!

Resumo:
Firefox 5
Introdução

Dia 21/06/2011 foi disponibilizada a versão final do Firefox 5. Dizem por aí que tem muita gente que "foi pega de surpresa", alguns chegaram a criticar a nova postura da equipe de desenvolvimento, enquanto outros ficaram entusiasmados com a agilidade com que novos recursos serão disponibilizados. E você? O que acha disso tudo?

CSS Gradient

Resumo:
Introdução

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.

Layout para Dispositivos Móveis

Resumo:
celular acessando a web
Introdução

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.

Google Web Fonts

Dica rápida: o Google Web Fonts permite utilizar algumas fontes estilizadas com facilidade no seu site. Basta seguir estes passos:

  1. procurar uma fonte no site Google Web Fonts,
  2. clicar sobre uma fonte,
  3. clicar sobre "Use this font",
  4. copiar a tag <link> para dentro do <head> da sua página e
  5. aplicar a diretiva font-family sobre os elementos desejados via CSS.

Textos em colunas

Resumo:
Introdução

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.

CSS Transitions

Resumo:
Introdução

CSS Transitions é um módulo da linguagem CSS 3 que permite especificar como serão as transições entre propriedades CSS quando ocorre algum evento. Por exemplo, no CSS 2.1, quando utilizamos a pseudo-classe ":hover" em um link e especificamos uma cor de fonte diferente, a transição da cor antiga para a nova é instantânea ao passar o mouse sobre o link. Com CSS Transitions, é possível especificar como se dará a transição de uma cor para a outra, ou seja, dentro de um tempo especificado, a cor do link irá variar várias vezes, percorrendo o degradê que varia entre a cor inicial e a cor final, causando um efeito [eu diria] mais "agradável" de se ver. E o melhor: é uma animação nativa do navegador, sem precisar de JavaScript ou Flash.

Uma das melhorias da nova engine do Firefox 4 (Gecko 2) é justamente o suporte (ainda incompleto) às transições CSS. Portanto, nada melhor que aprender um novo recurso e já curtir os efeitos onde eles são suportados.

CSS Dinâmico

Resumo:

Normalmente a linguagem PHP é utilizada para gerar HTML dinamicamente. Porém, a linguagem PHP pode gerar qualquer tipo de arquivo, desde que se conheça a especificação do tipo de arquivo. Gerar um arquivo CSS dinamicamente é muito simples pois é um tipo de arquivo texto com uma sintaxe bastante simples.