Minificação de arquivos para Web

Resumo:

Introdução

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:

• Minificando arquivos JS e CSS
• Otimizando arquivos PNG
• Otimizando arquivos JPG
• Minificando arquivos HTML

Scroll Infinito

Resumo:

Introdução

Um dos elementos de usabilidade que vem aparecendo em alguns sites nos últimos tempos é o "scroll infinito". Trata-se daquele comportamento da página de linha do tempo de perfis do Facebook entre outras redes sociais. Quando você se aproxima do fim da página, ela automaticamente carrega mais elementos e, consequentemente, ajusta o scroll da página, que pode ser rolada mais para baixo. Embora o scroll infinito gere uma experiência interessante para o usuário, também pode se tornar um vilão, quando mal planejado.

Neste artigo, veremos como montar uma página com scroll infinito, mas também discutiremos as preocupações a serem tomadas para garantir a acessibilidade do seu site.

Gerar gráficos em PHP com o Google Charts

Resumo:

Introdução

Em 2011, escrevi o artigo "Criando Gráficos com o Google Chart e PHP", que mostrava como gerar gráficos através da passagem de parâmetros para URL de geração de gráficos provida pelo Google. Porém, este recurso foi depreciado em abril de 2012 e aparentemente renomeado para "Image Charts" (uma seção do Google Charts).

Neste artigo, veremos o funcionamento do novo Google Charts e quais suas vantagens e desvantagens em relação ao recurso depreciado.

jQuery 2.0 é lançado

Resumo:

Introdução

Recentemente foi lançado o jQuery 2.0, com uma proposta de suportar navegadores modernos. Neste artigo veremos o que muda e o que se mantém nesta nova versão do jQuery.

Layout Toolkit

Resumo:

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.

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.

Implementando uma Barra de Progresso de Upload com PHP

Resumo:

Introdução

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.

Controle do Progresso de UPLOAD no PHP

Resumo:

Introdução

É comum que sistemas de informação possuam um mecanismo de upload para algum propósito. Normalmente para enviar uma foto do perfil, anexar documentos, etc. O problema é que alguns sistemas esperam receber arquivos relativamente grandes para um tráfego (quase) imediato na Internet e, por este motivo, é útil informar para o usuário sobre o progresso do upload dos arquivos que ele está enviando para o servidor.

Uma das "soluções" mais comuns era a exibição de uma imagem de carregamento (normalmente aquela rodinha girando ou uma barrinha se mexendo), que dava a ideia de que o sistema estava trabalhando e que o usuário precisava esperar. O problema dessa solução é que o usuário não era informado sobre quanto do arquivo foi enviado e, consequentemente, se faltava muito ou pouco para aguardar. Pensando nisso, foram implementadas alguns mecanismos alternativos, baseados em applet, flash e/ou iframes. Todos muito funcionais, mas normalmente pouco elegantes por utilizarem recursos não nativos do PHP.

Felizmente, no PHP 5.4 foi incluído um recurso para controlar o progresso das requisições de Upload. A versão 5.4 ainda está em fase beta, mas o manual do PHP já apresenta uma prévia de como será o funcionamento desse novo recurso: [Controle de Progresso de Upload]. O recurso prevê, inclusive, o cancelamento do upload durante o processo. Neste artigo veremos como este recurso funcionará.

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.

Função para calcular idade

Resumo:

Como hoje é meu aniversário, segue uma função em PHP para calcular a idade a partir de uma data de nascimento.

Utilizando os botões voltar, avançar e atualizar com AJAX

Resumo:

Introdução

Fim da guerra entre AJAX e Botões do Navegador!

Um dos maiores inconvenientes dos sistemas que utilizavam AJAX é que era relativamente complexo utilizar este modelo e manter funcionando os botões voltar, avançar e atualizar do navegador. Porém, o novo Firefox 4 trouxe outro recurso previsto no HTML 5 que resolve este problema com bastante facilidade. Este artigo mostra como voltar o suporte a estes botões do navegador através do método history.pushState.

var_dump para JavaScript

Resumo:

Acho que a função var_dump (ou similares, como print_r e debug_zval_dump) é uma das mais úteis para se depurar alguns problemas em PHP. Ela avalia uma ou mais variáveis ou valores, mostrando informações sobre elas (tipo, classe, etc). O var_dump, no entanto, não existe nativamente em JavaScript. Para prover esta solução em JavaScript, tentei implementar uma var_dump parecida com a de PHP. Como ela não consegue detectar recursividade infinita (quando um elemento aponta para algum que já foi mostrado), então criei o atributo "max_iteracoes", que pode ser configurado antes de se chamar a função. Com isso, a função previne loops infinitos.

JSON (JavaScript Object Notation)

Resumo:

Introdução

JSON (JavaScript Object Notation) é um mecanismo de codificação/decodificação de valores para intercâmbio de dados. Ele é nativo da linguagem JavaScript, mas outras linguagens dão suporte ao mecanismo em função de sua simplicidade. PHP possui uma extensão que consegue codificar/decodificar valores de JSON para os tipos correspondentes do PHP e vice-versa. O funcionamento é semelhante ao visto nas funções serialize e unserialize, a diferença é que a linguagem JavaScript compreende um pacote codificado com JSON nativamente, mas não compreende um pacote codificado com serialize nativamente.