7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Kids

Web Design para Crianças: Preparando para Construir um Website

Scroll to top
Read Time: 4 mins
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Portuguese (Português) translation by Nuno Fidalgo (you can also view the original English article)

Bem-vindo à segunda lição da nossa série Web Design para Crianças!

Nesta lição vamos aprender tudo sobre algumas coisas que precisamos fazer e também algumas ferramentas que precisamos antes de começarmos a escrever código para o nosso website Cidade Tuts+. Vamos lá chegar, eu prometo! Não te esqueças de fazer algumas questões na área dos comentários no fim da página.

Primeiro de tudo vamos ver exactamente o que vamos construir juntos!

Esboço

Ajuda bastante fazermos um esboço de qualquer ideia que tenhamos na nossa cabeça antes de as começarmos a criar. É um exercício que nos pode salvar bastante tempo quando chegarmos à parte do código.

Talvez o que esteja nas nossas cabeças não nos pareça bem quando as colocarmos em papel. Talvez algumas questões e problemas virão ao de cima no nosso esboço? Talvez o nosso design não seja o melhor? Muitos destes problemas irão aparecer nos nossos esboços.

É normal não gostarmos dos nossos esboços numa primeira vez, é exactamente o que nós queremos que aconteça! Primeiro queremos que funcione tudo no papel.

Desenhando o Website Cidade Tuts+

Nós precisamos de um site para os turistas visitarem e conhecerem as lojas e negócios que a cidade tem para oferecer. Iremos agrupar estes negócios de uma forma que faça sentido, como por exemplo "hotéis" num grupo e "restaurantes" noutro grupo. Iremos ter links para os websites de cada negócio, desta forma os visitantes podem clicar e receber mais detalhes.

Também irão haver algumas imagens que vamos usar para dar um aspecto de boas-vindas à cidade.

Este é o aspecto do esboço que nos irá guiar para uma pré-visualização do site.

Este é exactemente o website que iremos criar de raiz! 

Editores

Para escrever código HTML (aquela linguagem secreta que falamos na primeira lição) precisamos de um editor de texto para escrever.

O melhor é não usarmos nada como por exemplo Microsoft Word, um editor de texto de código irá facilitar o nosso trabalho. Um editor de código irá perceber o que estamos a escrever e fará o código colorido, enquanto o Microsoft Word é melhor para relatórios escolares por exemplo.

Existem alguns bons editores de código grátis, que podemos fazer download na web. Se não tens a certeza como fazer o download de algo ou não tens a certeza se o podes fazer, o melhor é pedires a um adulto.

Bluefish é bom para computadores com Windows, enquanto Atom é uma boa escolha para o Mac.

No próximo curso iremos entender o que é que este texto significa, mas aqui está uma olhadela do que esperar vir a escrever.

Ficheiros, Ficheiros, Ficheiros

Como já falámos um bocado, um website é apenas um conjunto de ficheiros. Estes ficheiros devem estar na mesma pasta em ordem para que o navegador os leia.

O webiste Cidade Tuts+ vai ter um ficheiro HTML (salvo com uma extensão de ficheiro .html no fim), um ficheiro CSS (salvo com uma extensão de ficheiro .css no final) e quatro imagens que serão salvas numa pasta chamada "images". A pasta das imagens vai ficar na mesma pasta dos ficheiros HTML e CSS.

A extensão do ficheiro é o grupo de letras que vêm depois do ponto no nome do ficheiro, que nos diz que tipo de ficheiro é:

Como mencionei, as nossas imagens serão salvas na pasta chamada "images" dentro da pasta principal do site, desta forma:

Na imagem acima temos uma imagem chamada town.svg (a extensão .svg é apenas um tipo de imagem) que colacamos numa pasta extra chamada "images". Fazendo isto estamos a manter as coisas organizadas:

Ambas as formas estão correctas, mas nós vamos usar pastas extras como na imagem da direita.

Navegadores

Nós iremos ver o nosso trabalho no navegador, como este que tu estás a usar agora ao ver a página Tuts+!

Existem vários navegadores disponíveis para download grátis caso não tenhas nenhum, como o Google Chrome e o Firefox. Se estás a usar um computador Mac já tens o Safari instalado, fixe!

Não na Web, ainda

Nós vamos construir o nosso website directamente nos nossos computadores e não na Internet. Se te lembras na nossa primeira lição, nós explicamos que nós não podemos ver um website na Internet se não estiver num servidor.

A imagem acima mostra como fica um website localmente (não na Internet) no navegador. Em vez de vermos um endereço web como www.tutsplus.com, nós o endereço local do site, que parece um pouco diferente: 

Bem Feito!

Nesta lição nós vimos algumas coisas importantes que nos vão ajudar a prepararmos-nos para escrever o código do nosso website. Nós vimos como preparar os ficheiros e algumas ferramentas como o editor de texto e o navegador.

Na nossa próxima lição vamos directamente para a parte do código do nosso website! Nós vamos organizar (eu sei, muita organização!) e adicioanr algum código ao nosso ficheiro HTML. É aqui que a piada começa!

Vejo-te pela cidade!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.