mais do que um Log do sistema

Sempre alguém me pede dicas de como começar a estudar webdesign, qual o melhor caminho, a melhor forma, o que estudar primeiro.

Antes de mais nada, é importante saber que este artigo não tem o objetivo de substituir um bom curso ou um bom estudo por conta. Não irei me aprofundar em conceitos práticos nem em códigos/tags. Ao terminar de ler este artigo você não saberá criar um site ainda, mas terá uma pequena noção de como funciona o desenvolvimento web e terá idéia de como funciona toda a programação online.

Desenvolvimento web não é difícil, mas exige muita dedicação.

HOSPEDAGEM / DOMÍNIO

Ter um site na internet, significa ter um espaço virtual disponível para todo o planeta visitar, mas como colocar um site na internet? Aí que entram o servidor de hospedagem e o domínio.

Para que o site fique conectado 24 horas por dia, é necessário um servidor, que irá armazenar todos os arquivos dele, e um domínio, endereço dele na internet, que é único.

Existem vários servidores e variados planos de hospedagem, existem planos gratuitos, que são menos confiáveis e a maioria insere algum tipo de propaganda, como pop-up, banner, barra superior ou um domínio ao qual seu site ficará subordinado (por exemplo http://seusite.servidor-gratuito.com.br).

O domínio é o endereço do seu site na internet. Não existem 2 domínios iguais no mundo. Para ampliar o numero de possibilidades e também para separar por categoria e país, foram criados os DPN (Domínios de Primeiro Nível), que é o que determina a categoria e também o país, como em .COM.BR, que significa que o domínio é comercial e é de origem brasileira. A lista completa de DPNs disponíveis para registro no Brasil pode ser vista aqui.

Quem faz a manutenção dos domínios aqui no Brasil é a NIC.br, através do portal Registro.BR. A manutenção é paga, e os valores podem ser consultados aqui.

O portal CO.CC disponibiliza domínios de forma gratuita, mas possui apenas o DPN “.co.cc” disponível para registro. Ou seja, não tem como registrar um domínio “.com.br” nele.

Após adquirir o domínio, é necessária a contratação de um servidor para hospedagem. O Registro.BR possui um tempo limite até que você encontre e contrate o servidor, caso contrário a manutenção do seu domínio será expirada e o mesmo voltará a ser disponibilizado para registro.

Ao contratar o servidor, será necessário o preenchimento do campo domínio. Assim, o servidor saberá qual será o seu domínio.

Após a contratação do servidor de hospedagem, você deve ir até o serviço no qual você registrou o domínio e inserir os endereços DNS disponibilizados pelo servidor. Assim, o domínio saberá onde seu site está hospedado.

No Registro.BR é necessária a inserção de, pelo menos, dois endereços DNS. Caso um deles esteja fora do ar no momento da atualização dos DNS na internet, o outro estará online para garantir que seu site fique no ar.

PROGRAMAÇÃO

Em qualquer linguagem de programação, seja ela voltada à web ou não, é necessário saber alguns detalhes comum a qualquer linguagem.

Toda linguagem é composta por objetos, que possuem uma, ou mais, propriedades, e cada propriedade possui um valor.

Outra coisa que é bastante comum ver erros, principalmente com quem está começando a estudar desenvolvimento web, é a inserção de objetos externos, afinal, programação é puramente códigos de texto, apenas linhas de comando, não tem como colocar uma imagem no código. É necessário setar sua localização, e a mesma deve manter esta localização exata, inclusive quando estiver no servidor. Pode-se indicar a imagem com um endereço URL exato da localização, por exemplo http://servidor.com.br/pasta-de-imagens/imagem1.jpg, ou com sua localização relativa, indicando a pasta e o nome da imagem.

Vou tomar como exemplo o CSS, mas o mesmo conceito vale para qualquer linguagem de programação.

#CAMADA {

  background: url('imagens/imagem1.jpg');

}

Neste exemplo, temos o objeto, chamado aqui de CAMADA, a propriedade BACKGROUND e o valor, indicando a localização relativa da imagem.

HTML

Bom, o básico a se saber é que as páginas na internet são compostas de toda uma programação de códigos, chamados de HTML (HyperText Markup Language). Todo navegador web está programado para converter a linguagem codificada HTML para aquilo que vemos quando acessamos uma determinada página.

Para começar a criar uma página em HTML você poderá utilizar softwares como Adobe Macromedia ou o Microsoft Frontpage, que são softwares editores HTML chamados WYSIWYG (What You See Is What You Get), ou seja, são editores HTML que mostram o resultado visual ao mesmo tempo em que ele programa. Você insere um objeto ou formata um texto, com ferramentas simples em interface gráfica e o próprio software insere a codificação.

Outra forma de editar HTML é com os códigos mesmo. Através de um editor de texto simples (bloco de notas por exemplo), você consegue visualizar e editar todas linhas de comando e, ao salvar, deve-se dar um nome ao arquivo e terminar utilizando a extenção .HTML ou .HTM, que é o formato que os navegadores irão reconhecer.

O HTML é composto por tags, indicadas entre os sinais de menor (<) e maior (>), por exemplo: <html>.

Toda tag que é aberta, deve ser fechada. O processo de fechar uma tag é simples, basta utilizar uma barra antes da tag, assim: </html>. A única exceção para esta regra são as tags de objeto, assim podemos simplesmente  colocar uma barra no final da tag, assim:

<img scr="imagem1.jpg" />

Com este processo de abrir e fechar uma tag, é possível delimitar o intervalo que aquela configuração está sujeita. Como no exemplo abaixo:

Em HTML:

Este trecho é <i>apenas um exemplo</i> de formatação <b>HTML</b>

Convertido:

Este trecho é apenas um exemplo de formatação HTML

A tag <i> indica itálico. Todo texto digitado entre <i> e </i> estará sujeito à formatação em itálico, assim como acontece com a tag <b>, que indica negrito.

Toda página na internet é composta por um esqueleto básico HTML, montado da seguinte maneira:

<html>

  <head>

     <title></title>

  </head>

  <body>

  </body>

</html>

Onde:

<HTML> e </HTML> indicam que ali começa (<HTML>) e termina (</HTML>) a linguagem HTML.

<HEAD> e </HEAD> indicam onde começa e termina o cabeçalho da página. Nesta área vem informações importantes, que servem como referência para o navegador.

<TITLE> e </TITLE> são as tags que informam ao navegador o título daquela página. O que estiver escrito entre estas duas tags aparecerá na barra de títulos do seu navegador.

<BODY> e </BODY> é onde tudo acontece. Este é o corpo da página HTML. Tudo que estiver aqui, entre estas tags, será convertido pelo navegador em objeto.

Como pode-se perceber, é possível inserir tags umas dentro das outras, mas é importante lembrar que toda tag que for aberta, deve ser fechada.

Um site é composto por várias páginas. Cada página deve estar ligada a outras, através de links.

Para saber qual página o navegador deve abrir primeiro, utilizamos uma INDEX. A página inicial do site deve-se chamar index.html (ou index.htm). Esta página é o índice que deverá ligar às outras páginas do seu site.

CSS

O CSS (Cascading Style Sheets) são as folhas de estilo de padrões de formatação, ou seja, define tamanho de fonte, estilo de fonte, cores dos títulos, do texto, do fundo. Sem a necessidade de fazer isto individualmente no HTML.

O CSS opera em conjunto com outra linguagem, em geral o HTML, e pode ser inserido de três formas:

1. Através de um arquivo externo contendo toda programação e salvo no formato .CSS. Deste modo, o arquivo .CSS deverá ser indicado entre as tags <HEAD> e </HEAD> com a seguinte linha de comando:

<link rel="stylesheet" type="text/css" href="style.css" />

Onde style.css é o arquivo editado. Esta tag deve ser inserida em toda página que deverá conter a formatação programada.

2. Através do código CSS embutido. Onde podemos fazer toda a estrutura CSS, válida apenas para aquela página, dentro do próprio HTML, entre as tags <HEAD> e </HEAD>, inserindo o seguinte comando:

<style type="text/css">

</style>

Entre as tags <style> e </style> vem a codificação CSS normal. 3. Uma terceira forma insere atributos CSS a uma tag HTML, utilizando a propriedade HTML Style. Assim:

<div style="background=#000000; color:#ffffff; height: 200px; width: 400px;">

</div>

OUTRAS LINGUAGENS DE PROGRAMAÇÃO

Atualmente aprender HTML e CSS é pouco para quem quer trabalhar com desenvolvimento web. É necessário conhecer outras linguagens de programação, como JavaScript, PHP, ASP, Rubi, SQL, VBScript.

ESTUDE

Um ótimo site que eu recomendo, tanto para quem está buscando aprender, como para quem já conhece, é o W3Schools, um portal que possui tutoriais, aulas, dicas e principalmente uma vasta lista de todos os códigos: propriedades e valores das principais linguagens de programação utilizadas na web.