Documentação do Tema 'Bolha'
Intro
Este documento pretende, de forma concisa e acessível, apresentar e justificar o projeto atual de interface do estudiolivre.
Abreviações utilizadas
- el: estudiolivre
- px: pixel
Objetivos
A nova interface do el tem alguns objetivos, dentre eles:
Centrada no usuário
Ou seja, na qual a experiência do usuário no site esteja sempre relacionada com a sua identidade, isso é dizer: há um certo grau de 'customização' (que dever chegar ao máximo possível em próximos releases) para que o usuário tenha, associado ao seu username/login, suas preferências sempre mantidas.
Esse objetivo deve ser analisado através da 'caixa de usuário' e da 'página do usuário', que está sendo completamente repensada para conter mais informações sobre cada usuário.
O el é feito de pessoas!
Wiki
Para que nunca fique obscuro para os usuário que o site
é um wiki e deve ser encarado como tal. O máximo de destaque é dado para o fato que todas as páginas são editáveis e como isso pode (e deve) ser feito. Um aspecto interessante disso é a descomplicação da sintaxe wiki em oposição ao HTML puro. Estamos estudando formas de não mais permitir o uso de HTML, para que o código das páginas fique
realmente acessível.
Conceitos-chave
Alguns pontos chave devem ser levantados como guias do trabalho desenvolvido para alcançarmos os objetivos propostos. A interface, antes de tudo, deve ter:
- clareza de informação
- flexibilidade
Para o primeiro item, estamos nos preocupando, no primeiro momento, com browsers que sejam totalmente compatíveis com os padrões da
W3C. Outro questão importante é a da acessibilidade, ainda não está sendo implementado uma interface acessivel para, por exemplo, visualização sem estilos (css) e afins. Em resumo, estamos fazendo o html e css para o Firefox para depois adaptá-lo aos poucos.
Clareza
O desenvolvimento de uma maior clareza passa por diversos pontos, inclusive alguns introduzidos nesse release. Destacamos (eles serão discutidos pontualmente):
- legibilidade
- coerência visual
- ajuda contextual sempre
- 'a interface de um click'
Legibilidade
Esse é um dos problemas principais do layout atual segundo a nossa visão. Para melhorar a legibilidade foram utilizados dois artifícios:
- fundo branco com letra preta
- página com largura fixa
Sobre o primeiro não há muito segredo. Basta comparar as imagens abaixo:
Sobre o segundo item há
muita controvérsia. Uma discussão interessante sobre as vantagens de se utilizar largura fixa pode ser encontrada
aqui.
De qualquer forma, a justificativa para se utilizar uma largura fixa é muito simples: em telas grandes as linhas ficam grandes demais e dificultam a leitura. Como acontece no el atual para, por exemplo, uma resolução de 1600x1200, onde podem ser lidar 240 letras numa mesma linhas; contra 120 linhas numa tela com resolução de 800x600.
A resolução horizontal escolhida foi 800px não só para permitir acesso a usuários com computadores mais antigos, mas também pois essa é a resolução ótima segundo se pode verificar nos sites de referência 1-6 e também em:
ministério da cultura,
mozilla foundation,
opera,
blogger,
technorati,
new york times. Além dos seguintes (que não são centralizados):
cnn,
bbc,
new yorker,
folha de são paulo e muitos outros.
A maioria dos livros romance no mercado têm uma diagramação muito similar a esta. O mesmo pode ser observado em revistas e jornais (a não ser quando utilizam disposição em colunas).
Mesmo assim, o ideal seria utilizar um design
elástico para uma resolução horizontal de 1024px ou mesmo 1280px. No entanto, modificar um layout que já é fixo para um layout elástico é um tanto complicado, não só pelo fato de muita coisa ter que ser recodificada, mas também porque a maneira como o layout foi pensada levava em conta que ele era fixo, de modo que o layout em si teria que ser totalmente repensado (ou seja, não basta apenas modificar o código).
As duas imagens abaixo demonstram como um layout fixo é preferível a um que escala totalmente com o tamanho da janela
Outro ponto importante é o uso de letras sem serifa. Nesse tópico há também uma certa controvérsia, mas a utilização de letras sem serifa para leitura em tela parece estar bem estabelecido.
Mais ainda, trabalhamos em modificar o css do tikiwiki para que os títulos 'h1', 'h2' (e assim por diante) fossem mostrados de maneira mais clara, realmente servindo para o seu intuito: separar seções e agrupar conteúdo (vê-se que soluções esdrúxulas tem sido usadas no el para obter esses resultados). As diferenças mencionadas podem ser comparadas nas imagens abaixo
Agrupamentos
Tomou-se um cuidado muito grande na confecção da nova interface para manter sempre próximos os conteúdos relacionados. Isto é, uma caixa de usuário com todas as informações pertinentes ao usuário, uma seção do site com toda a informação do site e assim por diante. Na versão anterior do site já se podia verificar alguns agrupamentos desse tipo. Mesmo assim havia algumas pendências, como a busca e as informações do uruário.
A
busca, nesse release, vai ter um destaque um pouco maior. Todos aprendemos, nos últimos anos, sobre o importante papel da busca, por isso a disposição dos dados da busca foi clarificada (informações redundantes ou desnecessárias foram removidas), além disso algumas novas funcionalidades para a busca estão sendo estudadas. De qualquer forma, já nos preparando para releases onde a busca tem um papel maior, estamos acostumando os usuários a utilizarem essa ferramenta mais freqüentemente e com melhores resultados.
Para facilitar a busca foram introduzidas 'abas' para a filtragem dos resultados obtidos na busca. Nos próximos releases estão planejadas novas abas (pessoas, imagens, textos, etc) e filtros mais complexos (data, comentário e outros).
A
caixa do usuário é uma ferramente nova desse release. A idéia é que o usuário possa escolher quais os 'módulos' ele deseja que sejam mostrados na sua caixa e assim controlar o conteúdo que lhe é mostrado. Por enquanto não há possibilidades de outros módulos além de 'Últimas alterações' e 'Usuários online'. Mas, com o tempo, outros módulos devem surgir.
Menu do Site e Menu do Wiki
Esses dois fatores foram completamente retrabalhados. Para o menu do wiki alguns nomes foram repensados levando-se em conta os padrões mais comuns na internet. Por exemplo a utilização de 'faq' ao invés de 'perguntas freqüêntes' e de 'sobre' ao invés de 'o que é o estudiolivre?'. As novas chamadas são mais curtas e diretas.
O menu do wiki foi completamente redesenhado. Ainda não estamos completamente satisfeitos com os desenhos atuais, mas mesmo assim eles já estão mais coerentes com o resto do site.
Coerência Visual
Ainda em estudo. Estamos buscando uma maneira de fazer com que as cores, as formas e as ações estejam relacionadas de forma que sejam de mais fácil compreensão e mais simples de usar.
Ajuda Contextual
Nenhum recurso é estranho e de difícil compreensão.
Isso foi feito para que possam ser incluídos novos recursos que não quebrem a experiência de uso de usuários avançados ou de usuários menos experientes. Assim podemos suprimir explicações que seriam desnecessárias para quem não as quiser e, ao mesmo tempo, colocar explicações rápidas e simples para que os recursos sejam compreendidos onde e quando eles precisam ser compreendidos.
Sobre as tecnologias usadas
Esta seção é sobre tudo o que se refere a programação do layout. É importante frisar que estamos tentando comentar o código ao máximo para que fique mais compreensível para iniciantes em css, html, javascript, smarty e php.
Tableless
Conteúdo separado do layout. Mais fácil do que re-explicar toda essa história é ler a
referência 1 e a
referência 2.
TikiWiki
O
TikiWiki não possui nenhum tema com recursos avançados como o estudiolivre.org; por isso foi necessário fazer:
- uma refatoração total dos tpls e css's.
- uma nova estrutura para os temas.
- possibilitar temas definidos 'dinamicamente'.
- criar novas sintaxes wiki (para listar itens do acervo, por exemplo).
Javascript
O uso de javascript (js) em sites web é muito contestado, mas já está bastante enraizado na experiência de uso da maioria dos usuários.
No tema bolha do estudiolivre.org o js foi utilizado através da biblioteca de 'ajudas', a
Overlib.
Além disso, os
LightBox das janelas modais dos erros e que mostra as imagens do acervo (entre outras coisas) tembém foi implementado através do uso de js.
AJAX e Web 2.0
A tecnologia
AJAX é bem conhecida da maioria das pessoas que utilizam a internet hoje (apesar de muitas pessoas não saberem o que ele é). Na realidade o termo
Web 2.0 está bastante ligado ao uso do AJAX.
No estudiolivre.org os maiores exemplos de uso de AJAX são:
- acervo.livre (paginação, filtros e busca)
- envio de arquivos (abundantemente).
A interface de um click
O conceito por trás da interface de um click é que a apresentação das informações e a possibilidade de mudá-las esteja separada por apenas um click.
Um exemplo prático disso no estudiolivre.org é a página de usuário, onde os dados como nome e localização podem ser editados diretamente ao se clicar neles.
CVS
Padronização de nomes
Todos a nomenclatura de divs e ids seguiu um padrão. No entanto, esse padrão se perdeu com o tempo e agora ele praticamente não existe. Além disso, há divs, classes e ids demais espalhados pelo site, então esse aspecto está um tanto complicado. Recomenda-se o uso da extensão
web developer para o Firefox, muito útil para saber o que é o que e qual div é qual na hora de fazer CSSs e templates.
Houve ainda a introdução de um
padrão de nomenclatura e organização das pastas do CVS relativas ao desenho.
Telas (ou Layout)
Introdução das idéias através dos SVG's.
Todos eles podem ser encontrados no
CVS do estudiolivre.
Commits na lista do hacklab
Todos os commits são listados na lista (aberta) do hacklab. Para ver como ela funciona dê uma lida na parte sobre 'desenvolvimento', em
contato.
Referências
Dentro do estudiolivre.org
- portal de desenvolvimento
Arquitetura, estética e techniques
- flickr
- box.net
- youtube
- odeo
- audible
- overmundo
- remember the milk
- last.fm
- ccMixter
- wikipedia
outros:
- http://www.alistapart.com/articles/elastic/
- http://www.zeldman.com/dwws/
