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:

Link prefetching

Resumo:
Introdução
Performance

Link prefetching (ou pré-carregamento de links) é um recurso oferecido por navegadores para que sites possam especificar arquivos que devem ser pré-carregados, de forma que estejam prontamente disponíveis quando solicitados, melhorando a performance e consequentemente a usabilidade do site.

Até o momento, apenas os navegadores baseados na engine Gecko (como é o caso do Firefox) implementam o link prefetching, embora a especificação está sendo proposta como recomendação da W3C.

Neste artigo, veremos como o recurso funciona e como tirar proveito para otimização de sites.

Rich Snippets (customização de resultados no Google)

Resumo:
Introdução

Rich Snippets (literalmente traduzido como "fragmentos ricos") é o nome das marcações que podem ser feitas em páginas HTML para agregar mais semântica a elas. O Google utiliza estas marcações tanto para renderizar as páginas de seus resultados de busca de forma diferenciada quanto para auxiliar algumas de suas buscas, como a de notícias, blogs, vídeos, etc. Ou seja, os rich snippets são uma importante ferramenta para transformação da web em uma estrutura mais semântica e compreensível não apenas para humanos, mas também para as máquinas (bots).

Neste artigo, vamos ver quais são os tipos de marcações de rich snippets, como elas podem ser feitas e como podem ser testadas.

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.

Role Attribute dando mais sentido ao HTML

Resumo:
Introdução

O atributo role é um atributo criado para dar mais semântica aos elementos de documentos baseados em marcação, como o HTML, além de oferecer mais acessibilidade. A partir de Março de 2013, este atributo passou a ser um recurso recomendado para uso pela W3C. Portanto, vamos entender melhor o que ele é, em que contexto mais amplo ele está situado e como usá-lo na prática.

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.

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.

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?

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.

Search Engine Optimization (SEO)

Resumo:
search engine optimization
Introdução

Search Engine Optimization (Otimização para Mecanismos de Busca) ou simplesmente SEO é um termo que tem aparecido cada vez mais vezes no meio tecnológico e dos negócios. Na atual "Era da Informação" e pelo atual nível de globalização, ter visibilidade digital (entre outras) tem grande importância econômica. A visibilidade digital é conquistada de diferentes formas e este artigo apresenta algumas delas, explicando o conceito de SEO.

Percorrendo elementos de um HTML com PHP

Resumo:

Muitas vezes vi programadores perguntando como se faz para um script PHP obter os links de um documento HTML (obter os links de uma página) ou então as imagens (obter as imagens de uma página) 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.

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.

Firefox 4 e Gecko 2

Resumo:
firefox logo
Introdução

Ontem foi lançado o Firefox 4. Você já viu? Para usuários finais deste navegador (que considero bastante satisfatório) a mudança na interface é facilmente perceptivel. Mas não é só isso que o novo Firefox tem a oferecer. Existem vários pontos fortes para programadores Web por debaixo de uma "roupinha" nova. Então vamos conhecer alguns deles.

Formulários no HTML 5

Resumo:
HTML 5

O HTML 5 ainda está em fase de desenvolvimento, porém, já estão previstas várias melhorias. Algumas destas novidades estão relacionadas à criação de formulários. Vamos listar algumas delas, lembrando que estas informações estão sujeitas a mudanças.

HTML Entities

Resumo:
Introdução

HTML é uma linguagem baseada em tags. Estas tags são definidas através de caracteres reservados (símbolos "<" e ">"). Além disso, as tags podem conter atributos definidos na forma: nome_do_atributo="valor" ou nome_do_atributo='valor'.

Com o uso de caracteres reservados, existe a necessidade de um mecanismo para representar estes mesmos caracteres fora do contexto nos quais são reservados. Ou seja, se desejamos mostrar um sinal de menor num documento HTML, precisamos representá-lo de outra forma, caso contrário, o interpretador de HTML pode achar que é um caractere reservado indicando o início de uma nova tag. O mecanismo que permite representar caracteres no HTML é chamado de HTML entities (ou "Entidades HTML").