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

Web Design para Crianças: Bem-vindo à cidade Tuts+!

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Getting Ready to Build a Website

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

Bem-vindo à Cidade Tuts+, onde toda a gente ama o web design! Nesta série vamos aprender tudo sobre desenhar e construir um website. Para ajudar, vamos criar um website em conjunto.

Estas lições (ou tutoriais) vão dar-te um guia passo-a-passo para criar um website. Todos os ficheiros de exercícios estarão incluídos no final de cada lição, para que possas comparar o teu trabalho à medida que avanças.

Então entra, por favor, põe-te confortável e vamos criar algo para as pessoas da cidade Tuts+!

Como é que a Web funciona?

Vamos dar um passo atrás e pensar sobre como a web funciona.

Quando dois computadores estão conectados à Internet (que aparece como uma linha amarela na imagem abaixo) eles podem falar um com o outro. 

Um servidor (a caixa azul) é um computador especial que contém ficheiros de páginas web. O teu computador em casa ou na escola não é um servidor, porque não está conectado directamente à Internet. Nós ligamo-nos à Internet através de um Prestador de Serviços de Internet (ISP).

O conteúdo de um site (tudo aquilo de que um website fala) é organizado dentro de um conjunto de regras especiais que os computadores entendem; mais ou menos como falar numa língua secreta, codificada, excepto que em breve também saberemos o seu pequeno segredo!

Como o teu computador se liga à web

Nesta imagem o navegador está a pedir para ver www.tutsplus.com a partir do servidor onde vivem os ficheiros do site. O servidor está a enviar os ficheiros para trás e a traduzi-los para mostrar uma página no ecrã. E isto acontece muito rapidamente!

É tudo sobre comunicação e partilha de informação.

É por causa disso que um site escrito localmente (no teu computador) não pode ser visto por outras pessoas num computador diferente, até que movas os ficheiros para um servidor. Vamos perceber isto como deve ser mais tarde.

O Trabalho de um Web Designer

O trabalho de um web designer é muito importante. Tudo o que vemos na imagem acima está a acontecer por uma razão: para vermos um website. O trabalho de um web designer consiste em decidir como é que esse website é e trabalha, e até mesmo outras coisas, como certificar-se de que o website pode ser utilizado por visitantes desactivados (da mesma forma em que és um visitante do Tuts+ neste momento).

O trabalho de um web designer

O Nosso Projecto

Nesta série vamos criar um website para a Cidade Tuts+. A cidade precisa de um local onde os turistas podem aceder a informação útil sobre a cidade antes de a visitarem.

Aqui está uma pré-visualização do website:

O que vamos construir:

Este website vai incluir todos os aspectos de web design que vamos aprender. Vai ser um primeiro projecto de web design mesmo fixe para ti!

Esboçar e Criar

Agora vamos falar um pouco sobre do que precisamos para lá chegar.

Primeiro vamos desenhar o nosso site e depois incluir o que queremos ter na página, num ficheiro especial. Também vamos adicionar links aqui para os visitantes irem para outros sítios, como os websites de lojas.

Esboçar é importante!

Estilo

Depois de termos desenhado e escrito um ficheiro especial para o nosso website vamos precisar de o fazer ter boa aparência. Esta é a secção na qual as nossas ideias de cor e disposição (decidir onde todas estas coisas vão habitar no ecrã) vão ganhar vida.

Como podemos tornar o nosso site fácil de usar? Que sensação queremos que as nossas cores dêm? Onde é que tudo deve ser colocado num ecrã de smartphone? E num ecrã de computador? Que tipo de letra resultará melhor? Estas são todas coisas que teremos de ponderar, mas não te preocupes, é um processo mesmo divertido e estas questões serão mais fáceis de resolver quantos mais websites fizeres.

Mapa da Série

Abaixo está um mapa completo para a viagem que vamos percorrer até criar o nosso website. Cada bloco tem uma introdução ao tópico que depois é partido em partes mais pequenas.

O nosso mapa

Introdução

Podes ver pela estrela cor-de-rosa que estamos a ler a Intro neste momento. Agora temos uma ideia básica de como a web funciona e o trabalho de um web designer, e demos uma espreitadela ao projecto que vamos desenhar e construir juntos.

Construir um Website

A próxima parte é onde vamos pensar e começar a esboçar ideias. Esboçar é uma forma muito divertida de reflectires as tuas ideias sobre um design antes de começares a codificá-lo. Pode salvar muito tempo e ajudar-nos a manter o nosso caminho.

Vamos então falar sobre ficheiros e das ferramentas de que precisamos para começar com a parte da codificação do nosso website.

HTML

HyperText Markup Language (HTML) é a tal linguagem secreta (mas não por muito!) utilizada para organizar o nosso ficheiro de texto de que falámos brevemente há pouco. Esta linguagem ajuda os nossos browsers a entender e mostrar os ficheiros do website.

Tudo no nosso website, e em todos os websites, já agora, vai viver dentro de elementos HTML. Elementos são pedaços desta linguagem que têm um significado e ajudam a descrever tudo o que colocamos na página.

Não te preocupes com o que este código realmente significa neste momento, desde que saibas que todos os websites são feitos a partir de um documento escrito.

CSS

Cascading Stylesheets, CSS, permitem-nos definir o estilo (cores, tipos de letra, sensação geral) para o nosso website, tornando-o o mais atraente e fácil de usar possível para os nossos visitantes.

Como é o aspecto do CSS

Disposição de página CSS

O CSS também nos pode ajudar a colocar todas as nossas peças na página.

Imagens

Nesta parte da viagem vamos falar rapidamente sobre o tipo de imagem que irá ser incluído no nosso site e como lhe dar algum estilo. Quatro imagens amorosas vão ser adicionadas, que pensas delas?

Our images

Fundamentos de Design

Nesta parte vamos olhar para os "blocos de construção" do webdesign. Queremos ter a certeza de que fazemos algo que as pessoas vão utilizar, e que podem usar facilmente, assim como assegurarmo-nos de que tem uma boa aparência.

Tipografia

Tipografia é a arte de combinar os tipos de letra e um bom acompanhamento da nossa nova lição de design, dado que pode muito bem construir ou destruir o sucesso do nosso website.

O primeiro exemplo de tipografia no nosso site pode ser visto logo no topo:

Heading

Cor

A cor é muito importante e divertida. A cor pode tornar um site bonito, assim como ter significado, algo de que falaremos aqui.

Final da Série

Terminaremos esta série de lições ao aprender como colocar os ficheiros do website num desses computadores especiais, um servidor, para que todos os teus amigos e família possam vê-lo na Internet. Também falaremos de onde podes aplicar os teus estudos com o teu novo título de "Web Designer para a Cidade Tuts+".

Mas não nos preocupemos com isso para já, ainda agora aqui chegámos!

Até já!

Na próxima lição vamos começar logo a aprender como nos prepararmos para a construção de um website em HTML. Mal posso esperar, vemo-nos pela cidade!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

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.