1. História da internet
A partir de 1990, com a invenção da linguagem HTML por Tim Berners-Lee, a internet começa a usar a linguagem do hipertexto para fornecer informação aos seus usuários. Assim, começa uma nova fase para a internet, surge a World Wide Web, ou seja, a Web. A web é o conteúdo que acessamos através de um navegador. A Web é, portanto, um sistema de documentos que roda sobre a infraestrutura da Internet. Quando você envia um e-mail usando o Outlook, por exemplo, está usando a internet mas não a web. Já quando usa um webmail (conjunto de páginas de um site que gerencia e-mails) como o Gmail por exemplo, está usando também a Web, pois se utiliza do hipertexto presente no navegador. Historicamente, no princípio, o navegador era somente um programa que recebia o código HTML e o transformava em hipertexto acessível ao usuário. Ele recebe o código HTML e ‘renderiza’ a página, isto é, monta o layout e executa as funções presentes no código recebido. Por isso, navegadores diferentes podem gerar layouts diferentes a partir do mesmo código. Este, aliás, tem sido um grande problema para nós, designers.
Os primeiros sites surgiram e seus usuários (preferencialmente universidades e bases militares) criaram conteúdo a ser disponibilizado. O sucesso foi imenso e, em pouco tempo, muita gente se envolveu na criação de páginas web, baseadas na linguagem HTML. Começam a surgir os portais, grandes sites que indexam (classificam) outros sites, como o Yahoo e, no Brasil, o UOL. Também surgiram os mecanismos de busca que encontram páginas a partir de uma palarva-chave.
No Brasil, o acesso à internet era fornecido preferencialmente pelas universidades, a uma velocidade baixíssima, se comparada com os dias atuais… Para acomodar a largura de banda, as páginas eram muito simples e contavam basicamente com texto. Aos poucos, com o aumento da banda, foi possível incluir imagens, áudio e vídeo.
Pode-se ver um pouco desta evolução com o WayBack Machine, um projeto que guarda a memória da web.
2. O código HTML e o designer de web
O problema inicial endereçado pelo HTML foi o de formatar conteúdo para ser mostrado na web, fazendo links entre trechos de conteúdo. Com o passar do tempo, o HTML foi se tornando mais complexo e hoje passa por algumas mudanças interessantes.
- Web stardards: um código XHTML melhor, mais próximo dos standards do que qualquer gerador de código automatizado (como o SiteGrinder, por exemplo).
- SEO: código otimizado para os mecanismos de busca: o famigerado Search Engine Optimization.
- Acessibilidade: ora, se você gera um código mais próximo dos stadards e mais otimizado para busca, logo, você deve gerar um código mais acessível. Lembre-se: não há um mecanismo automático que consiga pensar por você em termos de: quem é seu público alvo, qual o cenário de uso que estou considerando, etc.
- Os dois lados do cérebro: a atividade de gerar código é um bom complemetar à do ‘designer criador de interfaces’. Se o criador gráfico usa o lado direito do cérebro, o programador usa o esquerdo, e isso é bom! Afinal, quem não quer usar todo o cérebro, certo? Se você pensa que programação é uma atividade chata, repetitiva e cansativa, se enganou: há poucas atividades mais criativas que a de gerar código a partir da descrição que um cliente faz da interação que imaginou para seu site. Sempre existe mais de uma solução para o mesmo problema, e várias maneiras de abordá-las. Assim, ser um bom ‘coder’ é um desafio e tanto, assim como ser um bom designer de interface.
- Cuidado, você pode gostar: não é raro assistir à conversões. Você pode começar reclamando mas, depois de montar o seu primeiro site em HTML com CSS se espantar com a engenhosidade da aplicação destas linguagens para formar uma interface instigante.
- O instrumentista e o maestro. Se quer ser um bom instrumentista basta dominar um instrumento. Mas se quer ser maestro, criar, compor, coordenar o trabalho de outros, domine vários! Se você quiser ser um bom designer digital, deve dominar tanto Flash quanto HTML. Poderá mesmo ser um diretor de criação mais completo pois saberá pedir exatamente o que quer de seu ‘coder’. Assim poderá escolher e mesclar técnicas.Você vai perceber que, na mairoria das vezes a solução híbrida, que mistura HTML e Flash é a mais adequada.
* Esta lista foi inspirada (não adaptada ou traduzida) na lista do WebdesignerDepot.
3. Elementos da linguagem HTML
Embora este curso não se aprofunde demais na linguagem HTML (pois vamos dar mais ênfase à criação de sites do que ao conhecimento específico da linguagem), vamos ver qual a estrutura de uma página HTML.
A linguagem HTML, como toda linguagem (mesmo a falada…) está sempre em constante evolução.
A linguagem é regulamentada por um consórcio de universidades e entidades, o W3C, sigla o World Wide Web Consortium, cujo endereço na internet éhttp://www.w3c.org/ Eles estão na 4a versão atualmente (estamos em fevereiro de 2003), por isso, quando falarem em HTML4, você já sabe o porquê do 4… Aliás, HTML significa Hyper Text Markup Language, ou seja, linguagem de marcação de hiper texto.
O código
Relembro que não seremos especialistas em código HTML, mas vamos dar uma olhada em como ele se parece.
Vejamos o código de uma página básica em HTML
<html> <head> <title> Este é o título </title> </head> <body> <p>Este é o primeiro parágrafo</p> </body> </html>
Deste modo, pode-se ver que existem sempre objetos (cada tag é um objeto) dentro de outros objetos. A tag TITLE, por exemplo, está dentro da tag HEAD.
Esta página, bem básica, pode ser vista clicando aqui.
Algumas tags do HTML
- HTML (declaração de linguagem)
- HEAD (cabeçalho)
- TITLE (título)
- BODY (corpo: a parte visível do documento)
- P (parágrafo)
- H1 – H6 (hierarquia de títulos)
- P (parágrafo)
- IMG (imagem)
- A HREF (link)
- UL (lista não ordenada)
- OL (lista ordenada)
- LI (item de lista)
- TABLE (tabela)
- TR (linha de uma tabela)
- TD (célula de uma tabela)
Dica: o melhor tutorial sobre HTML e CSS em língua portuguesa é o do Maujor. Em caso de dúvida sobre o significado de alguma tag, não pense duas vezes em consulta-lo.