Como criar um site estático, parte 3: código

Antes de continuar, leia a Parte 1 (Definição de Estratégia) e a Parte 2 (Design) de como Criar um Website Estático.

Agora que temos todos as características de usabilidade e de estética definidas, está na hora de passar tudo para código!

Nos dias de hoje, desenvolver código para a web é bastante diferente do que era há 10 anos anos atrás… e a mudança é constante. Ao desenvolver um website são usadas várias linguagens de código, cada linguagem com um propósito diferente, e para o fazer apenas é preciso um editor de texto (eu recomendo o Sublime Text, é gratuito) e conhecimento de linguagens de código.

Regra geral, as linguagens de código mais importantes para o desenvolvimento de websites são os seguintes:

3.1. HTML: Estrutura e Conteúdos

HTML (HyperText Markup Language) é a principal linguagem de marcação utilizada para estruturar páginas web e formatar conteúdo. É possível comparar o seu papel, ao do wireframe que desenhámos na fase anterior (Design), pois é através desta linguagem estabelecemos a estrutura de cada página, através de tags HTML (como a <head>, <body>, <div>, etc), e inserimos os conteúdos a aparecer (como textos, imagens, links, etc).

Além da sua importância para o aspeto visual das páginas tem, como é sabido, um papel fundamental para o SEO, pois o Google usa um algoritmo para ler o conteúdo dessas páginas (como palavras-chave, links, descrições alternativas de imagens, meta tags, etc) e assim estabelecer um ranking nos seus resultados de pesquisa.

Exemplo de HTML (Ver na W3Schools)

código html exemplo

3.2. CSS: Folhas de Estilo

Se o HTML é usado para estruturar conteúdos, o CSS é usado para formatar conteúdos estruturados no HTML. Confuso? Eu explico!

CSS é a abreviatura para Cascading Style Sheets (Folha de Estilos em Cascata). Serve essencialmente para definir estilo das páginas HTML. Exemplificando, CSS controla tipos de letra, cores, margens, alturas, larguras, imagens de fundo e muito mais.

 

Atenção às várias dimensões de ecrã

Como referido acima, fazer código nos dias de hoje é bastante diferente do que era há poucos anos, e um dos motivos é a enorme variedade de dimensões de ecrãs que são usados para navegar na web. As páginas web precisam hoje de estar preparadas para serem exibidas em computadores convencionais (que geralmente vão das 11 polegadas até às 17), em tablets e em smartphones (os dois últimos até com duas variações, com o ecrã vertical e horizontal).

Por isso, há que criar regras de CSS para que os navegadores (o Chrome, Firefox, Safari, etc) saibam que tipo de formatação deverão dar às páginas HTML, o que é tão importante para a usabilidade, como para a otimização para os motores de busca. A isto chamamos de responsive design!

Exemplo de código CSS (Ver na W3Schools)

código css exemplo

3.3. JavaScript: Interatividade

O JavaScript é a linguagem que programação que tem como objetivo promover maior interatividade com o utilizador. Resumidamente, existem duas vertentes do JavaScript, por um lado os efeitos especiais, como elementos que tenham movimento (como um sub-menu) conteúdos dinâmicos, mudanças de cor, etc. Por outro lado, Javascript permite executar instruções como resposta às ações do utilizador, como calculadoras, agendas, ou tabelas de cálculo.

Podem ver um exemplo das vantagens do JavaScript ao visitar a página de Avaliação Oral da ASADOCORAL. Nela, o utilizador é convidado a avaliar certos parâmetros da sua saúde oral. No final, essa avaliação resulta numa sugestão de medidas a tomar.

Exemplo de código JavaScript (Ver na W3Schools)

exemplo código javascript

3.4. Esta é uma dica de amigo:

Há várias formas de agilizar a produção de código para um site estático. Existem frameworks (pedaços de código previamente criados… como uma casa modular) que podem poupar várias horas de trabalho. Eu aconselho a dar uma vista de olhos no Bootstrapcriado por um designer e um programador do Twitter, é hoje um dos frameworks mais utilizados do mundo!

E pronto!

O seu website está agora pronto a ser colocado num servidor e ser a visitado por qualquer pessoa! Porém, nunca é demais ter a certeza de que tudo está como é suposto, e a palavra de ordem é: testar, testar e testar. Siga o próximo artigo para saber que pontos deve analisar antes disponibilizar um website ao público.

Continuar para: Como Criar um Website Estático, Parte 4: Testes e Divulgação