Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

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

by
Difficulty:BeginnerLength:ShortLanguages:
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
Advertisement
Advertisement
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.