Criação de Páginas Web

Existem muitos tutoriais e apostilas para criação de páginas web na internet. Muitos são de péssima qualidade, muitos estão por demais desatualizados, outros simplesmente não combinam com o direcionamento desta disciplina. Sua primeira preocupação deve ser separar o joio do trigo.

As dicas iniciais para isso são:

Verifique se o material fala de HTML 4.x (quatro ponto alguma coisa). A última especificação de HTML é a versão 4.01. A partir da versão quatro, a linguagem tenta forçar desenvolvedores de conteúdo a separar conteúdo da apresentação. Se o material fala de HTML 3.x ou não se preocupa em falar a versão, temos um indício de que ele é impróprio.
Verifique se o material incentiva a separação entre conteúdo e apresentação. Se o tutorial ensina como deixar o texto piscando, rolando de um lado para outro ou mesmo se ensina a especificar cores por meio de atributos HTML (quando o correto seria usar CSS), temos um indício de que ele é impróprio.
Verifique se o material incentiva a acessibilidade. Em caso positivo, temos um indício de que ele é apropriado.

As outras seções deste documento contém direcionamento quanto à criação de páginas web e não informações sobre as linguagens usadas para isso. Leia este material antes de começar a aprender HTML e volte a este documento para consultas sempre que necessário.

Separação entre forma e conteúdo é importante para facilitar a manutenção de textos e para a evolução científica de maneira geral. Disponibilizando a informação para programas de computador e assim ajudando a transformar dados em informação.

Ao construir sua página, pense nela menos como algo que vai ser visto e mais como informação que será disponibilizada.

Tabelas

Seguindo na linha de que as páginas são informação disponível para o mundo, evite a tentação de definir o leiaute delas usando tabelas.

Tabelas podem dificultar a manutenção de um site, podem dificultar o acesso à informação, e podem significar desperdício de recursos computacionais. Use tabelas somente para apresentar dados tabulares, procurando seguir as recomendações de acessibilidade. Para definir o leiaute do seu site, use CSS.

Imagens

A primeira coisa a ter em mente sobre imagens é que elas devem ser usadas para informações de natureza gráfica. Melhor dizendo, não se deve usar imagens para representar texto. As pessoas usam imagens para representar texto quando estão preocupadas com a forma dele. Não que a forma não seja importante, mas é menos importante que o conteúdo.

O uso de imagens para representar texto traz várias desvantagens:

Deixa sua página pesada pois as imagens precisam de grandes quantidades de informação para representar pouco texto.
Deixa o conteúdo da sua página pouco acessível, dificultando a alteração do tamanho da apresentação, a identificação da estrutura do texto e a transformação da informação para outros formatos.

O uso correto do atributo alt reduz os problemas associados à representação de texto com imagens. Existem vários truques para apresentar imagens quando possível e texto nos outros casos. Também existem vários truques para criar efeitos visuais interessantes a partir de informação textual. Esses truques são tecnologia e por isso não serão abordados aqui. Ainda assim, é bom lembrar que os truques tecnológicos frequentemente esbarram em limitações de padronização. Esse é um bom exemplo de como o uso em massa de ferramentas que não atendem especificações de padronização prejudica a acessibilidade como um todo.

Mesmo quando uma imagem é usada devidamente (para representar informações gráficas), existem vários fatores a serem considerados.

Dimensões

Ao inserir uma imagem numa página web, é possível (e desejável) informar as dimensões da imagem. Uma imagem matricial (o tipo mais comum de imagem) é uma matriz de pontos coloridos. Esses pontos em princípio não tem um tamanho definido, porém ao apresentar uma imagem num dispositivo (como um monitor de vídeo), é preciso definir um tamanho para cada desse pontos. Assim, quanto mais pontos (pixels), mais espaço será necessário para apresentar a imagem.

É comum encontrar documentos HTML em que as imagens são apresentadas com dimensões muito diferentes das dimensões originais. Por exemplo: apresentar um arquivo que tem uma imagem de 1024x768 pixels num espaço de 640x480 do monitor. Essa diferença causa desperdícios que devemos evitar.

Num caso como esse (imagem apresentada com dimensões menores que as originais), muita informação é transmitida para o navegador que gasta processamento e memória para jogar parte da informação fora. Desperdiçou-se espaço para guardar o arquivo no servidor, desperdiçou-se banda para transmitir toda a informação para o cliente, desperdiçou-se memória e processamento no micro do cliente.

Além do mais, navegadores não são feitos para realizar essa tarefa com qualidade mas sim com rapidez, afinal navegadores que demoram para apresentar páginas são mal vistos pelos usuários. De maneira geral, os resultados obtidos pelos navegadores nessa "reconstrução" da imagem são bem piores que os obtidos pelos programas de tratamento de imagens.

Se a imagem é apresentada com dimensões maiores que as originais, a qualidade do resultado fica ainda pior, já que o computador precisa "inventar" mais informação para preencher o espaço desejado.

Por fim, o pior de todos os casos é aquele em que as dimensões da apresentação não tem a mesma proporção das dimensões originais. Nesse caso, a imagem fica achatada e passa uma sensação ruim para quem a vê.

Procure sempre apresentar imagens nas dimensões originais. Altere as dimensões dos arquivos de imagens usando um programa apropriado quando for necessário.

Vamos supor que você quer apresentar o logo da UFLA na sua página. Para isso você vai na página da UFLA e copia o arquivo que é disponibilizado lá. Esse arquivo tem o formato JPEG e contém uma imagem de 3354x1817 pixels. Monitores que podem apresentar essa quantidade de pixels são muito raros e você provavelmente quer que a imagem ocupe um pequeno espaço na sua página. É preciso reduzir as dimensões da imagem.

Note como o arquivo original parece ter menos qualidade que o alterado, quando na verdade ele é bem melhor (tem muito mais informação). O original tem 394907 bytes enquanto o alterado tem 9325 (2%).

Formato

Existem diversos formatos de arquivo para representar imagens. É importante que você conheça os principais e conheça suas características para usar os formatos mais apropriados para suas necessidades.

JPEG (Joint Photographic Experts Group): O mais famoso de todos. Esse formato usa compressão com perdas. Isso garante níveis altos de compressão, porém também tem desvantagens. A imagem não é recuperada exatamente como era quando foi salva (daí o nome compressão com perda) então cada vez que você altera um arquivo JPEG e salva de novo, um pouco de informação se perde. A informação jogada fora corresponde às regiões de alto contraste da imagem (os detalhes por assim dizer) e portanto é melhor para imagens naturais (fotos) em que os detalhes são menos importantes. Esse formato é livre.
PNG (Portable Network Graphics): Formato moderno e livre que se baseia em compressão sem perdas (a imagem é recuperada exatamente como foi salva). A compressão sem perdas não permite um nível tão alto de compressão (como o do JPEG), mas preserva detalhes e portanto é mais recomendada para imagens artificiais (logomarcas, diagramas, screenshots). Permite representar transparência, o que é importante se você deseja que a imagem "se adapte" ao fundo.
GIF (Graphics Interchange Format): Formato obsoleto baseado em compressão sem perdas. Esse formato já foi protegido por patentes, mas de tão antigo as patentes já expiraram. Uma característica importante deste formato é a capacidade de suportar "imagens animadas", ou seja, arquivos com diversas imagens que são apresentadas em sequência, dando a impressão de animação, como num filme. Dos formatos para "imagens animadas" esse é o que tem maior suporte (muitos programas entendem este formato), o que ainda pode justificar seu uso. Este formato não permite representar mais do que 256 cores diferentes e portanto ao salvar uma imagem nesse formato, as cores adicionais serão descartadas antes de passarem pela compressão sem perdas. Isso faz com que a idéia de "sem perdas" não se aplique sempre e também pode dar a falsa impressão de que este formato permite compressão maior que o formato PNG.
MNG (Multiple Network Graphics): Formato moderno e livre para "imagens animadas", baseado no PNG. Infelizmente ainda não é um formato suportado por muitos programas.
BMP (Windows Bitmap): Formato obsoleto sem compressão. Esse formato foi desenvolvido com o objetivo de facilitar a criação de programas que leêm e escrevem imagens numa época em que imagens eram bastante incomuns nos computadores. Esse formato é impróprio por não ter vantagens (do ponto de vista do usuário) em relação aos outros. Esse formato é especialmente impróprio para divulgar imagens pelo fato de não ter compressão. Existem algumas variações desse formato que às vezes aparecem inapropriadamente em arquivos .bmp porém essas variações não tem vantagens sobre os formatos apresentados anteriormente. Não use este formato.
SVG (Scalable Vector Graphics): Tentativa de padronização de um formato vetorial para a web. Esse formato é diferente de todos os demais por representar imagens vetoriais. Permite representação de animações por comandos (como Flash). Este formato ainda não é muito suportado pelos navegadores mais populares.

Vamos agora, voltar ao exemplo em que você que colocar o logotipo dos 100 anos da UFLA (que é disponibilizado em formato JPEG, como vimos anteriormente) na sua página. Qual formato usar?

Trata-se de uma imagem artificial e por isso se beneficiaria do formato PNG. A transparência proporcionada pelo formato PNG também vai ajudar a integrar o logotipo com uma cor de fundo que não é branca como no caso desta página.

Felizmente o arquivo original tem muita informação o que permite uma conversão com qualidade. Por outro lado, o formato disponibilizado não permite distinguir o que é o logotipo e o que é o fundo. Precisamos saber o que é o fundo para colocar a transparência adequadamente, usando um programa de edição de arquivos gráficos. Sabemos que o fundo é branco, mas e a parte branca ao redor dos anéis que formam os zeros do número cem? Será que deveriam ser consideradas parte do fundo? Se o arquivo fosse disponibilizado no formato PNG desde o princípio, este problema não existiria.

logo UFLA Bom eu interpretei que a borda branca ao redor dos anéis é parte do fundo, e então converti para o formato PNG, obtendo o resultado apresentado ao lado.

Quantidade de bytes

Ajude a melhorar este material mostrando que reduzir as dimensões de uma imagem não é necessariamente a melhor forma de reduzir a quantidade de bytes dela.

Tamanhos absolutos e tamanhos relativos

Ajude a melhorar este material explicando as várias formas de definir tamanhos dos elementos de uma página.

Ajude a melhorar este material explicando as vantagens e desvantagens desses dois tipos de definição.

Conteúdo primeiro

Ajude a melhorar este material comentando sobre vantagens (em termos de acessibilidade) do conteúdo vir antes de menus, notas, etc.

Acentos e caracteres especiais

Para que sua página web no servidor do BCC, seja visualizada corretamente, utilize o sistema de codificação ISO-8859-1.

Vários caracteres especiais estão definidos em HTML através de nomes. A idéia de usar nomes ao invés de números ajuda a criar um padrão que pode ser estendido ou até alterado com pouco ou nenhum impacto para os programas desenvolvidos anteriormente.

Vamos tomar como exemplo o caracter á (a minúsculo com acento agudo). Esse símbolo é identificado pelo número 225 em ISO-8859-1 e pelo número 41411 em UTF-8. Em HTML, ele pode representado pelo nome aacute, ou seja, escrevendo á o navegador apresentará o caracter desejado no local. Para escrever á não é preciso usar nenhum caracter especial (no sentido que esses caracteres foram defindos no código ASCII e permanecem iguais na grande maioria dos sistemas de codificação). Ou seja, mesmo que servidor e cliente não se entendam sobre o sistema de codificação do texto, ele deverá ser apresentado corretamente.

Conclusão

Nesta disciplina a separação entre conteúdo e apresentação e a acessibilidade são elementos fundamentais a levar em consideração na criação de páginas web.