Criar páginas web não é mais como era antes…

Reflections on a page design: my, how the web has changed…

Autor original: Terry Hancock

Publicado originalmente no: freesoftwaremagazine.com

Tradução: Roberto Bechtlufft

Já faz muito tempo desde a última vez em que eu fiz o design de uma página web, e de lá para cá a web mudou muito (ou ao menos as expectativas que temos em relação a ela). Páginas “esculpidas” do zero em HTML simples, geralmente pelas mãos de pessoas que o faziam por pura diversão, saíram de moda em algum momento dos anos 90. No início da década seguinte, a web só queria saber de sistemas de gerenciamento de conteúdo Em seguida, outras formas específicas de conteúdo, como fóruns, wikis e blogs começaram a dominar o cenário.

Hoje, até os blogs têm conteúdo demais para a maioria dos visitantes, e o microblogging e as redes sociais são a nova moda. Imagens estáticas foram substituídas por animações cafonas e vídeos, já que a maioria dos visitantes agora usava computadores rápidos, capazes de cuidar da renderização e conectados aos servidores por “tubos” de dar inveja a centros computacionais universitários dos anos 80.

Criação de filmes com software livre

Este artigo é parte de uma série sobre os desafios que eu encontrei na produção de dois filmes de licença livre, Marya Morevna, no Projeto Morevna, e Lunatics, do projeto Anansi Spaceworks.

Finalmente chegou a hora de criar um site de verdade para o Lunatics. Vou precisar me preocupar com muitas coisas nesse site, inclusive com a parte técnica, pois vou ter que dar um jeito do Plone e do Mediawiki fazerem o que eu quero que façam. Afinal, a maioria dos sites hoje em dia não é formada por meros documentos estáticos; os sites de hoje são aplicativos projetados para integrar muitos estilos diferentes de “sistemas de gerenciamento de conteúdo”.

Mas num primeiro momento, só estou pensando em que tipo de página um projeto de vídeo como o Lunatics deve oferecer.

Naturalmente, comecei analisando sites de projetos parecidos. A Figura 1 mostra vários deles. Quero atender às expectativas dos meus visitantes, e sei que elas mudaram muito desde a última vez em que desenvolvi um site.

Figura 1: fotos de sites de projetos semelhantes. O site do “Sita Sings the Blues” é fortemente baseado em um wiki; os sites do Blender Open Movies têm características parecidas, mas com uma boa variação estilística; e o “The Guild” mostra o visual de um projeto proprietário. Todos esses projetos têm coisas em comum com o Lunatics.

O carnaval dos tamanhos de tela

Na última vez em que desenvolvi uma página, os tamanhos de tela comuns iam de 640×480 a 1024×768. Embora não fosse tão simples, era possível criar um layout que funcionasse bem para todos esses tamanhos. Hoje a coisa ficou mais complicada.

Figura 2: com a chegada simultânea das telas gigantescas de alta definição das estações de trabalho e das pequenas telas de dispositivos portáteis, é preciso ter em mente uma gama muito maior de tamanhos

A tela do meu desktop é de 1280×1024,e estou pensando seriamente em adquirir um monitor widescreen de 1920×1080 para trabalhar com vídeo em HD. É raro alguém expandir a janela do navegador de modo que preencha uma tela de 1920×1080, mas tem gente que faz isso (minha mãe, por exemplo, que enxerga mal, gosta de ter tela e fontes maiores). Por outro lado, muitos jovens adultos de hoje querem navegar na web com seus smartphones e suas telas de 240×320 (portrait QVGA). Essa incrível diversidade de tamanhos e formatos de tela (como na figura 2) representa um desafio interessante de design. Com certeza a velha abordagem do design único esticado não vai funcionar com tantos dispositivos diferentes, então vou ter que dar um jeito de fazer minha página se adaptar ao tamanho de cada dispositivo.

O ideal seria que isso acontecesse de forma automática, mas por enquanto vou precisar de alguns layouts diferentes.

Rolar ou não rolar?

Cada pessoa pensa em páginas da web de um jeito diferente. Originalmente elas eram “documentos”, que nós “rolávamos” do início ao fim, sem a necessidade de quebras de página explícitas; para todos os efeitos, as quebras “apareciam” quanto necessário na hora de imprimir (e para quem ia ler na tela elas não faziam falta mesmo). Seguindo esse ponto de vista, é melhor que os dados estejam todos numa página só, para que você faça um download só e role a página usando os controles do navegador. Em suma, o controle estava mais próximo do leitor.

Outro grupo tende a ver uma página da web como uma apresentação de slides glorificada, onde rolar a tela é uma baita inconveniência. Segundo esse ponto de vista, uma página sempre deve ser projetada para caber na janela do navegador, com botões para apresentar dados adicionais. Desse jeito, o usuário não precisa mexer com barras de rolagem.

Figura 3: comecei a criar o design com o Inkscape, desenhando o que eu tinha em mente. Imaginei a parte de cima como uma tela estática, enquanto a de baixo abriga trechos de artigos como em um blog ou como na página inicial da Free Software Magazine

Usuários acostumados a rolar a tela odeiam sites nos quais a informação está distribuída em pequenas páginas, que não permitem o acesso aos dados do jeito que eles querem. Já os acostumados à segunda abordagem não gostam de usar a barra de rolagem, ou pior, não vão notar o conteúdo na parte de baixo da tela quando a página carregar.

Minha solução foi um meio termo, com os dados que costumam ser mais necessários no começo da página e blocos grandes de texto no fim, onde as pessoas interessadas em ler podem encontrá-los com facilidade. Nas montagens que eu fiz, marquei mais ou menos onde ficaria a “dobra”. Acima dela eu trato do layout como uma tela fixa, e abaixo eu penso na página no paradigma antigo de “documento”.

CSS

Ninguém mais usa tabelas no layout de um site. Há anos, enquanto eu ainda cuidava do meu último design “pra valer” de um site, as tabelas já estavam saindo de moda, mas eu relutei em abandoná-las. Fiquei fera no uso de tabelas, então foi incrivelmente doloroso ter que adotar um sistema totalmente novo para o layout das páginas. O lance agora é CSS, folhas de estilo.

E olhando hoje, posso dizer: o CSS é meio estúpido. Você tem que abrir mão de um monte de coisas e aceitar soluções meio capengas, e mesmo assim não tem um mecanismo adequado para cuidar do layout.

Figura 4: um design “esticado” baseado na abordagem “float” do CSS proporcionou boa parte da flexibilidade que eu queria. Observe como a caixa da direita se ajusta ao visual quando o tamanho da tela é muito pequeno

E o que é mais importante, o CSS torna o web design muito menos intuitivo. Tudo bem que ele oferece um ponto de controle único para um bocado de texto, o que teoricamente facilita alterações, mas só se você souber onde estão as configurações. No HTML simples a gente sempre sabe onde procurar (a parte do estilo geralmente fica próxima ao texto correspondente), mas no CSS as coisas não são tão simples. Muitas vezes é preciso fazer uma busca em várias regras paralelas (às vezes até em arquivos separados, já que pode haver uma hierarquia), e é possível ter várias (dúzias!) de folhas de estilo afetando a exibição de uma única página.

Ainda assim, há coisas muito legais no CSS. Agora posso remover a maior parte do código de estilo do meu HTML, usando itens como “class” e “id” em vez de estilos específicos. Embora você possa dar um baita tiro no pé com o CSS, com um pouquinho de disciplina dá para evitar boa parte da confusão.

Figura 5: O mesmo CSS gera este resultado em um monitor bastante largo (1440×900). O design destaca a imagem de fundo, dando à página um estilo meio espacial sem parecer vazio

Em relação ao meu problema com o tamanho da tela, o CSS oferece várias abordagens diferentes. Uma é a criação de uma página bem “flexível”, com elementos de design posicionados com uma combinação de limitações fixas e fracionais (embora isso não seja tão simples quanto deveria ser). Outra é criar folhas de estilo separadas para classes de dispositivos diferentes.

Na verdade, os padrões de CSS e HTML oferecem uma opção “media” que teoricamente deveria simplificar isso – basta especificar uma folha de estilo para dispositivos com tela (“screen”) e outra para dispositivos portáteis (“handheld”). O problema é que pelo que andei lendo não dá para confiar muito nisso, exceto pelo uso das opções “screen” e “print” (para impressão).

Para contornar o problema, encontrei um código JavaScript software livre que permite realizar testes simples para telas pequenas. Com ele é possível mudar a folha de estilo com base no tamanho da janela do navegador, o que parece uma boa, mas o dispositivo precisa rodar JavaScript. Passei algum tempo fazendo testes com esse código, mas acabei percebendo que seria mais simples fazer praticamente tudo o que eu precisava com um layout baseado no “float”, em vez do “position” que usei no início. A Figura 3 mostra o que acontece quando esse design baseado no “float” é redimensionado para ficar cada vez mais estreito. Na Figura 4, vemos o design em telas de 1280 pixels. Ele funciona bem em navegadores comuns, e provavelmente dá para navegar nele em dispositivos móveis, mas acho que vou precisar fazer outra folha de estilo para eles. Na Figura 5 temos o design para colunas estreitas: é a mesma página HTML, só que com uma folha de estilo diferente.

Figura 6: a mesma página com uma folha de estilo diferente, otimizada para exibições em telas estreitas. Alguns dos elementos gráficos foram substituídos por versões mais estreitas ou menores (obviamente é preciso rolar a tela para exibir todos os recursos).

Cuidando do lado social

Hoje em dia as pessoas usam vários sites de relacionamentos, e cada um oferece serviços diferentes. Eles são uma excelente maneira de promover seu site (ou o que quer que seu site promova). No caso do Lunatics, obviamente nós queremos fazer o máximo de propaganda possível. Uma das melhores coisas que podemos fazer é permitir que os visitantes postem links para nosso site nas redes sociais de sua preferência.

Por outro lado, daria muito trabalho cuidar disso por conta própria, já que há muitos serviços disponíveis.

Eis que chega a nuvem. Sim, a nuvem do mal. Podemos ter medo dela, mas se não nos tornarmos dependentes dela podemos usufruir de suas muitas conveniências. Eu estou usando um tipo de “software como serviço” para configurar o link “compartilhar” da minha página, e importo o JavaScript de um provedor online. Para ser mais específico, tenho planos de usar o Add This (embora as fotos aqui do exemplo mostrem apenas um marcador que usei para ocupar o espaço na fase de design).

É cedo para que eu recomende ou não o serviço, estou aprendendo a usar agora, então não vá dizer que estou fazendo propaganda dele. Mas parece bem fácil de usar. Sei que há outros serviços do gênero na web, e se alguém puder defender algum como particularmente compatível com a filosofia do software livre, posso pensar em mudar.

Liberdade de vídeo

Hoje em dia, parece que todo mundo coloca vídeo nos sites, e como o Lunatics é um projeto de vídeo, precisa seguir a onda. O ideal é que as pessoas visitem o nosso site e assistam ao vídeo, além dos extras, dos previews e afins.

Em suma, precisamos de vídeo no site. Hospedar vídeo é um transtorno danado, e não vou tentar fazer isso em nossos servidores (um sistema de hospedagem virtual). Lembrem-se que esta é uma operação de orçamento bem pequeno. Diante disso, é claro que vamos hospedar o vídeo em um serviço especializado na hospedagem desse tipo de mídia. Ainda não escolhi um serviço, mas isso não importa muito agora, só temos que saber que o site precisa permitir vídeos embutidos. Na fase de testes vou usar o YouTube, pois já tenho alguns vídeos hospedados por lá.

Figura 7: alguns dos principais recursos do site, e a forma como eles interagem com a “nuvem” de serviços externos. A página é muito dependente de recursos externos para ter sentido

Obviamente, os fãs do software livre e do conteúdo livre não vão curtir muito o uso do YouTube. Afinal, ele desencoraja ativamente o download e a exibição de vídeos fora do navegador. Para esses usuários, vamos oferecer um link para o download direto, em diferentes formatos ao gosto do usuário, então vamos precisar de alguns botões.

A Figura 6 mostra meu protótipo, com notas sobre os serviços relacionados.

Protótipo

Este foi o protótipo da página inicial. Já comecei a trabalhar no design das outras páginas, e obviamente tenho que pensar em como o conteúdo real do site vai substituir o conteúdo de exemplo que estou usando aqui. As coisas mudaram muito desde a última vez em que fiz isso, e é interessante ter que bolar um design básico.

Estou muito feliz com a vasta gama de serviços que tornam mais fácil a criação de um site, mas fico um pouco preocupado com a dependência de servidores e software de terceiros.

Créditos a Terry Hancock – freesoftwaremagazine.com

Tradução por Roberto Bechtlufft <info at bechtranslations.com.br>