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.

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

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.

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.

Trabalhando de acordo com a Localidade em PHP

Resumo:

Introdução

Muitas aplicações web possuem uma área de abrangência bastante restrita, normalmente aos usuários de uma entidade ou pessoas de um país. Porém, também existem aplicações mais globais, usadas por pessoas de diferentes países e que possuem notações próprias para trabalhar com palavras e números.

A questão da internacionalização de uma aplicação envolve várias tarefas, como a tradução dos termos utilizados, possíveis reformulações de layout, e a aplicação de regras relacionadas à localidade. Neste artigo vamos tratar especificamente desta última, que são as regras relacionadas à localidade.

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.

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.

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.

Layout para Dispositivos Móveis

Resumo:

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.

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.

Dicas de Acessibilidade

Resumo:

Introdução

Já mostramos as principais recomendações sobre acessibilidade no artigo "Acessibilidade para todos". Agora, vamos ver algumas dicas rápidas e práticas para avaliar a acessibilidade de um sistema ou site Web.

Formulários no HTML 5

Resumo:

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.

Evitando o "autocomplete" de navegadores

Resumo:

Introdução

Sistemas Dinâmicos Web normalmente são repletos de formulários. Em alguns deles, é útil que o navegador ofereça sugestões de preenchimento automático baseado no histórico de preenchimento de determinado campo. Normalmente os navegadores gravam estes tipos de informação de acordo com o valor do atributo "name" do input de texto (e, talvez, de acordo com a URL em que o campo foi gerado).

Porém, em alguns campos, não desejamos este recurso por uma questão de segurança e/ou confidencialidade.

Transparência em CSS

Resumo:

Outro recurso bacana do CSS 3 é a transparência. Ela pode ser feita de duas maneiras:

1. Através da propriedade opacity;
2. Através da especificação de valores de cores com a "função" rgba.