Avellar e Duarte Consultoria e Design

Sobre o projeto deste site

Em dispositivos móveis

■ As páginas deste site são preparadas para saída em telas de computadores pessoais (PCs, em inglês), impressas em papel (sem barras de navegação visíveis) ou na tela de PDAs (assistentes digitais portáteis, Portable Digital Assistants)

A configuração para as três configurações é feita via CSS (Cascading Style Sheets), respeitando as características de cada suporte

A tarefa foi facilitada pelo uso de estilos CSS na estruturação do layout – utilizamos apenas uma tabela na estrutura, como container dos textos e das barras de navegação secundárias

O acesso pelo computador aciona a folha de estilos para mostrar a página em tela maior, na mídia configurada como “screen” (media=”screen”, no link para o arquivo CSS)

O acesso para impressão aciona a folha de estilos configurada como “print” (media=”print”, no link para o arquivo CSS)

O acesso para PDA aciona folha de estilos configurada como “handheld” (media=”handheld”)

■ Testamos o acesso por PDA num Palm TX, com acesso via Wi-Fi, banda larga. Não testamos ainda em celulares para verificar se as mesmas configurações se mantêm consistentes. Logo que o fizermos registraremos aqui os resultados

■ O modo de acesso “handheld” interpreta as marcações dos estilos de maneira diferente dos estilos para PC. O layout da tela do site, sem qualquer especificação especial de largura do monitor, aparece automaticamente verticalizado. Apenas as duas colunas da tabela da área de conteúdo aparecem uma do lado da outra

Para facilitar o acesso remoto, reposicionamos alguns elementos e “escondemos” outros. Alguns elementos só aparecem para os usuários móveis

■ Consideramos a largura da tela do PDA de 250px. O logotipo em formato de imagem, com 380px de largura, adequado para a interface em PC, fica muito pequeno na telinha e o texto difícil de ler. Por isto, fica escondido neste modo de saída. No seu lugar inserimos uma div com o nome da empresa em modo texto, visível apenas no modo "handheld"

Poderíamos inserir uma versão do logotipo para acesso apenas por PDA, mas resolvemos não incluir mais imagens nas páginas para não aumentar o seu tempo de carregação

■ O links com endereço de contato e assinatura do boletim ficam logo abaixo do logotipo nos PDAs - enquanto nos PCs ficam abaixo da barra de navegação principal, em lugar bem visível

■ A ordem dos elementos é muito importante na tela pequena dos PDAs. Como as páginas são muito verticalizadas, as informações realmente essenciais devem ficar no alto. Colocamos os elementos na seguinte ordem:

1) Nome do site
2) Data de atualização
3) Contato e boletim
4) Barra de navegação principal
5) Título do assunto
6) Texto
7) Barra de navegação de baixo
8) Link para “Voltar ao alto”

■ Algumas observações adicionais sobre a configuração para PDAs:

◊ O código do site deveria ter sido pensado desde o início do projeto com a perspectiva dos dispositivos móveis, para facilitar a ordenação vertical dos elementos em seqüência

A tabela da área de conteúdo, por exemplo, que aparece dentro dos limites da tela dos PCs, cria uma rolagem horizontal nas páginas dos PDAs. Sua retirada exigirá a reestruturação de todas as páginas, que devemos fazer ao longo de 2008.

Outra medida que facilitaria muito a publicação de conteúdo seletivo em cada mídia seria a delimitação de cada área de conteúdo por diferentes "divs" (por exemplo: "abertura" e "corpo do texto", que permitissem a visibilidade de apenas de uma parte do texto). É uma melhoria que também faremos quando reestruturarmos o código

◊ O uso de caracteres especiais como a seta que usamos para a mídia “screen” não aparece corretamente nos PDAs. Neste caso, deveríamos ter usado caracteres de uso universal, independentes de fontes (a seta é um caracter da fonte Arial)

◊ Todas as configurações que dizem respeito ao uso do mouse, como “hover” nos links, foram retiradas, pois não funcionam

◊ Também as diferentes marcações de fonte e tamanho de texto não funcionam: os textos têm apenas um tamanho e os estilos variam apenas entre negrito, itálico e sublinhado

■ O resultado está legível e fácil de usar, mas a barra de rolagem horizontal das páginas evidencia que alguns detalhes de acabamento ainda podem ser aperfeiçoados