Vetortec Informática

Tutorial Básico de HTML

2014-01-11T21:10:00.001-02:00

HTML

HTML é a abreviação de Hyper Text Markup Language, uma linguagem de

marcação/descrição de páginas que utiliza códigos chamados TAG’s, que ficam

entre <> para criá-la. EX.: <HTML>

Criando um Documento HTML

Para criar um documento HTML é necessária a utilização de um editor de

textos ou de HTML como o Notepad (Bloco de Notas). Vá em Iniciar –

Executar... – e digite: "notepad". Logo após abrirá um documento do bloco

de notas.

Tags HTML

A primeira Tag de sua página é justamente a que indica o tipo de linguagem a

ser utilizada: <HTML>.

Toda Tag deve ter um inicio e um fim. Exceção:<Br>. Além disso, as

primeiras são sempre as ultimas a serem fechadas, fazendo com que as outras

fiquem encadeadas dentro destas. Assim, <html> será a primeira a abrir e a

ultima a fechar.

A partir daí você vai criar uma espécie de cabeçalho para sua página a partir

da tag <head>.

Utilizamos as seguintes Tag’s:

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME="author" content="WebMaster"

</HEAD>

Title

A TAG Title vai dizer qual título aparecera na barra de nomes no topo da

página; do contrario aparecerá apenas o endereço da página.

A Tag Meta

As tag’s Meta são utilizadas por sites de busca como o Google® e o Cadê?®.

Através delas você irá descrever alguns comentários sobre sua pagina.

<META NAME=“DESCRIPTION”> Fará uma pequena descrição sobre seu

site.

Ex. <META NAME="DESCRIPTOIN" CONTENT="Site legal que estou

criando">.

<META NAME="KEYWORDS"> Com esta tag você colocará a(s) palavra(s)

chave(s).

Ex. <META NAME="keywords" content="Pagina web">.

<META NAME="AUTHOR"> Indica qual é o author de sua pagina.

Ex. <META NAME=“AUTHOR” CONTENT=“WebMaster Brenex>.

<META HTTP-EQUIV="language"> Indica o Idioma a ser utilizado na

página.

Ex. <META HTTP-EQUIV="language" content="pt-br">.

<META HTTP-EQUIV="Refresh"> Redireciona sua página para uma

página secundária, um outro Site ou para algum arquivo como uma foto.

Ex. <meta HTTP-EQUIV="Refresh" content="2;

URL=http://www.planetadorock.xpg.com.br/planetarock.html">, onde 2 é o

tempo em segundos que a página vai demorar até redirecionar e URL é para

onde o site será redirecionado.

BODY

A Tag BODY fará algumas configurações no corpo de sua pagina. Ela é quem

diz a cor do plano de fundo, a cor dos links, entre outras coisinhas.

ELEMENTOS BODY

BGCOLOR – Determina a cor do Plano de Fundo da pagina.

LINK – Determina a cor do Link que aparecerá na pagina

ALINK – Determina a cor que aparecera quando o link for clicado

VLINK – Determina a cor que aparecera no link após ser clicado.

BACKGROUND – Se você for por uma imagem como plano de fundo deve

usar este elemento de BODY no lugar de bgcolor.

LEFTMARGIN – margem esquerda da página(no MS Internet Explorer).

TOPMARGIN – margem superior da página(no MS Internet Explorer).

MARGINHEIGHT – margem superior(no Netscape).

MARGINWIDTH – margem esquerda(no Netscape).

EX. <BODY BACKGROUND="http://www.univab.

pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%2

0Background.jpg">

Parágrafo

Para iniciar um parágrafo utilizamos a Tag P.

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME=”author” content=”WebMaster”

</HEAD>

<BODY BGCOLOR=”GRAY” LINK=”RED” ALINK=”YELLOW”

VLINK=”DARKGREEN”>

Entendendo P

ALIGN – Alinha o texto de acordo com o que você colocar:

Left – Esquerdo;

Justify – Justificado;

Center – Centralizado;

Right – Direito.

A Tag FONT

Face – Indica o tipo de fonte que você vai usar. Ex. <font face="Times New

Roman">;

Color – Indica qual a cor você vai por em seu texto. Ex. <font color=Navy>.

Navy é a mesma coisa que azul-marinho;

Size – Indica o tamanho do texto. Varia de 1 a 7 o tamanho.

ESTILOS DE TEXTO

Como em editores de texto, o HTML também permite alterar o estilo do texto.

<B> - Aplica o estilo negrito. Ex. <b>texto em negrito</b>

<I> - Aplica o estilo itálico. Ex. <i>texto em itálico</i>

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME="author" content="WebMaster"

</HEAD>

<p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro

parágrafo em HTML</font></p>

<U>- Aplica o estilo sublinhado (nem todos os browser o reconhecem).

Ex. <u>texto sumblinhado</u>

<SUP> - Faz com que o texto fique sobrescrito. Ex. <sup>Texto

sobrescrito</sup>

<SUB>- Faz com que o texto fique subscrito. Ex. <sub>texto

subscrito</sub>

<BIG> - Aumenta a fonte e atribui negrito. Ex. <big>Texto GRANDE</BIG>

<SMALL> - Reduz e altera a fonte. Ex. <small>TEXTO pequeno</small>

<TT> - Aplica um espaçamento regular ao texto. Ex. <tt>Texto com

espaçamento regular</tt>

TITULOS E SUBTITULOS

Estas Tag’s são utilizadas para dar ao leitor uma visão geral sobre o que se

trata o texto em questão.

Estas tags apresentam seis níveis de títulos que são numerado de 1 a 6 por

ordem de importância. (1 - Titulo principal, - 2 titulo secundário, 3 –

subtítulo...)

Ex. <h1>Este é o meu titulo principal</h1>

<h2>Este é meu titulo secundário</h2>

<h3>Este é o meu subtítulo</h3>

Quebras de Linha

São utilizadas para escreverem textos em linhas diferentes, mas em um

mesmo parágrafo, como num poema, versos em linha diferentes, mas numa

mesma estrofe.

EX. <p align=center><font face="Tahoma" size="2">Este é meu texto em

cima<br>Este é meu texto embaixo</font></p>

A TAG DIV

Ela permite o alinhamento horizontal de qualquer elemento em uma página.

Esta TAG é muito utilizada em DHTML pela propriedade de agrupar elementos

de página.

Ex. <div align="center">Este texto está alinhado no centro.</div>

A TAG HR

Insere uma linha horizontal no Browser.

EX.

<HR WIDTH="n%" ALIGN="posição" SIZE="n" NOSHADE

COLOR="#RRGGBB">

Onde:

ALIGN="posição": pode ser left, center e rigth;

WIDTH="n%": define a largura da linha, pode ser definida em pixels ou em

percentagem do tamanho horizontal da tela;

SIZE="n": define a espessura da barra, em pixels;

NOSHADE: define que a barra não deve ser com efeito 3D;

COLOR="#RRGGBB": define a cor da barra. (MS Internet Explorer).

Criando Links

Existem dois tipos de links:

1º - Para páginas Externas

2º - Para paginas Internas, chamados de âncoras.

Criando um Link Externo:

<a href=protocolo://endereçodapagina/arquivo.extensão>Texto mostrando o

Link(ex. “Clique aqui”)</a>

Ex. <a href="http://www.planetadorock.xpg.com.br/index.html">

Clique Aqui</a>

Criando âncoras

Antes de criar um link interno, temos que criar uma ancora, desse jeito;

<A NAME="seção1">Este é o texto da seção</A>, em

que “seção1” é o nome da seção e "Este é o texto da

seção" é em que texto foi feito a seção.

Colocando Links nas Âncoras

Agora que a ancora foi feita, falta linká-la, desse jeito:

<a href="#seção1">Seção 1</a>

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME="author" content="WebMaster"

</HEAD>

<h1><font face=Tahoma color=green>Este é o meu primeiro título

</font></h1>

<p align=center><font face="Arial" color="navy" size="2">Este é o meu primeiro

parágrafo em HTML</font></p>

<p align="justify"><font face=Verdana size=2 color=orange>Este é o meu

segundo parágrafo<Br>E esta é minha primeira quebra de

linha.</font></p>

Google</font></a>

Inserindo Imagens

Para inserir imagens numa WebPage vamos utilizar a Tag IMG.

Ex. <img src="http://www.univab.

pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background

.jpg">

Configurando a Imagem

Após inserirmos a imagem temos de configurá-la. Não é necessário, mas você

pode utilizar para deixar a sua imagem ao seu gosto.

Utilizamos as seguintes Tag’s a partir de IMG SRC:

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME="author" content="WebMaster"

</HEAD>

<BODY BGCOLOR="gray" LINK="RED" ALINK="YELLOW"

VLINK="DARKGREEN">

<h1><font face=Tahoma color=green>Este é o meu primeiro título

</font></h1>

<a name="1"><p align=center><font face="Arial" color="navy"

size="2">Este é o meu primeiro parágrafo em

HTML</font></p></a>

<p align="justify"><font face=Verdana size=2 color=orange>Este é

o meu segundo parágrafo<Br>E esta é minha primeira

quebra de linha.</font></p>

Google</font></a>

<a href="#1">Voltar para o primeiro parágrafo</a>

Width – A partir dela informamos a largura da imagem. Se não for

configurada a imagem será inserida no seu tamanho original.

Height – Com ela, informamos a altura. Quando não é informada mantém

também sua altura original.

Border – Cria e configura o tamanho da borda da figura.

Align – Alinha a imagem em relação ao texto. Temos três tipos de

alinhamento.

Top – Alinha o texto paralelamente ao topo da Imagem.

Middle – Alinha o texto no centro da Imagem.

Bottom – Alinha o texto paralelamente à base da imagem.

Alt – É uma tag em que você insere um texto alternativo, para que se no caso

o browser não abrir a imagem o texto aparecerá no lugar.

Exemplo:

<img src="http://www.univab.

pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background

.jpg" width=120 height=160 align="top" border="3" alt="imagem principal">

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME="author" content="WebMaster"

</HEAD>

<h1><font face=Tahoma color=green>Este é o meu primeiro título

</font></h1>

<a name="1"><p align=center><font face="Arial" color="navy" size="2">Este é o

meu primeiro parágrafo em HTML</font></p></a>

Inserindo Imagens aos Links

Para inserir uma imagem num link basta colocar no lugar do texto do link a

tag que insere imagem.

Ex. <a href="teste.html><img src="http://www.univab.

pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background

.jpg" width=120 height=160 align="middle" border="3" alt="fundo"></a>

SOM

Para inserir sons na sua pagina vamos utilizar as seguintes Tag’s:

EMBED SRC – Para colocar as músicas para reproduzir em uma espécie de

mini-media player na pagina.

Ex.<embed src="audio.mp3" loop="1">

BGSOUND SRC – Para colocar músicas em plano de fundo, para que apenas

toque sem que ninguém consiga ver, apenas ouvi-la.

Ex.<bgsound src="audio.mp3 loop="1">

LOOP – Utilizamos o loop para colocarmos quantas vezes queremos que a

música toque. Com loop=1, a musica tocara apenas duas vezes, loop=2, suas

vezes... Para colocarmos para que se repita inúmeras vezes, colocamos

loop=infinite.

<p align="justify"><font face=Verdana size=2 color=orange>Este é o meu

segundo parágrafo<Br>E esta é minha primeira quebra de

linha.</font></p>

<img src="http://www.univab.

pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg"

width=120 height=160 align="middle" border="3" alt="fundo">

Google</font></a>

<a href="#1">Voltar para o primeiro parágrafo</a>

TABELAS

As Tabelas servem para deixar mais organizados os dados disponíveis em sua

pagina.

Criando tabelas

Para criar tabelas simples, vamos fazer da seguinte maneira:

As tag’s Table e /Table servem para indicar inicio e fim de tabela.

TR define cada linha de cada tabela.

TH Define o cabeçalho da Tabela. É uma célula da tabela.

TD Define os dados da Tabela.

Melhorando a Tabela

Agora vamos melhorar a aparência da tabela inserindo Tag’s

BORDER: espessura da borda em pixels.

BOREDERCOLOR: especifica a cor da borda da tabela

WIDTH: especifica a largura da tabela em relação ao browser, em pixels ou

HEIGHT: especifica a altura da tabela em relação ao browser, em pixels ou

CELLSPACING: especifica o espaço entre uma célula e outra, em pixels;

CELLADDING: especifica o espaço entre os dados e a borda da tabela, em

pixels;

BGCOLOR: cor de fundo das células da tabela.

<TABLE>

<TR>

<TH>Cabeçalho da Tabela</TH>

<TD>Dados da Tabela</TD>

</TR>

</TABLE>

Atributos Individuais

Vamos agora configurar individualmente cada célula.

ALIGN: alinha do conteúdo da célula ou das células da linha. Valores: right,

left, center.

BGCOLOR: define a cor de fundo das células da linha ou de uma célula

individual;

VALIGN: alinhamento vertical de uma célula ou de células de uma linha;

Pode ser top, middle ou bottom.

WIDTH: largura de uma célula em pixels ou %;

NOWRAP: indica ao browser que o texto da célula não pode ser dividido em

mais de uma linha. A coluna inteira terá o tamanho do texto escrito naquela

célula;

Células Mescladas

Para mesclar as células vamos atribuir à Tag TD os seguintes atributos:

COLSPAN: Será o numero de colunas que a célula ocupara.

ROWSPAN: Será o numero de linhas que a célula ocupara.

<table border="2" bordercolor="#003300" bgcolor="green" width="60%"

height="40%" cellspacing="3" celladding="3">

<table border="2" bordercolor="#003300" bgcolor="green" width="60%"

height="40%" cellspacing="3" celladding="3">

<tr align="left" valign="top"

<TD colspan="2">Célula 1</TD>

</TR>

</TABLE>

<HTML>

<HEAD>

<TITLE> Minha Primeira Página</TITLE>

<META NAME="author" content="WebMaster"

</HEAD>

<h1><font face=Tahoma color=green>Este é o meu primeiro título

</font></h1>

<a name="1"><p align=center><font face="Arial" color="navy" size="2">Este é o

meu primeiro parágrafo em HTML</font></p></a>

<p align="justify"><font face=Verdana size=2 color=orange>Este é o meu

segundo parágrafo<Br>E esta é minha primeira quebra de

linha.</font></p>

<img src="http://www.univab.

pt/disciplinas/dchs/pagina_dchs/disciplinas/527/media/Site%20Background.jpg"

width=120 height=160 align="middle" border="3" alt="fundo">

Google</font></a>

<a href="#1">Voltar para o primeiro parágrafo</a>

</embed>

<table border="2" bordercolor="#003300" bgcolor="green" width="60%"

height="40%" cellspacing="3" celladding="3">

<TH>Cabeçalho</TH>

<TD colspan="2">Minha primeira tabela</TD>

</TR>

</TABLE>

Frames

Frames são divisões de uma pagina em HTML. Ela é composta de uma pagina

principal e diversas outras divisões, compostas por outras paginas. Na pagina

principal você insere as outras paginas em colunas ou linhas, sendo que você

identifica o tamanho que cada uma deve ter.

É necessária cautela ao pôr frames, pois se você não souber como organizá-las,

sua pagina perdera todo o sentido. No entanto, elas podem ser muito

úteis para criação de menus em sua pagina.

Para criar as frames vamos usar duas Tag’s:

FRAMESET: Indica como vai ser sua Frame, se vai ser Horizontal ou vertical.

ROWS: Com este tipo, a frame ficará na horizontal.

COLS: As Frames ficarão verticalmente.

Quando você for configurar frame terá que dar valores de tamanhos para elas,

preferencialmente em % para ficar mais fácil de configurar.

Note que colocamos uma parte que vem ser o menu com 16% da pagina, os

outros 84% foram embutidos no asterisco, após a virgula.

Agora vamos ver o atributo SRC da tag FRAME.

No quadro acima você pode ver que inserimos dois arquivos: “menu.html” e

“texto.html” e damos nomes à elas. Os nomes são muito importantes para que

quando for abrir um link na outra frame coloque o atributo target e o nome da

frame. Exemplo: <a href="Downloads.html" target="home">

Os atributos Noresize e Scrollolling, servem respectivamente para não

deixar modificar o tamanho da frame e nem que apareça a barra de rolagem

nela.

</frameset>

criando um -commerce

2011-03-08T20:57:00.000-03:00

Olá, bom dia/tarde/noite a todos!

Estou criando este post baseada em um e-mail que recebi recentemente com a seguinte dúvida: “como fazer um e-commerce?”.

Como funciona a criacao de sites, banners, etc?

Hoje em dia é muito fácil ter uma página própria, sem muitas dificuldades. Existem vários sites que auxiliam você nessa tarefa gratuitamente. Alguns exemplos são Webnode e uCoz, onde você faz um site sem a necessidade de conhecimentos de HTML ou CSS. Porém essas são opções para sites simples e informais, sem muitas funcionalidades e com layout (aparência) comum (muitas vezes deixando muito a desejar).

Para a criação de um site mais robusto (como sites de empresas, bandas, com aparência e funcionalidade personalizados) é recomendado contratar alguma empresa especializada para que o resultado final seja satisfatório (afinal, o site é a cara da empresa na Internet). Não adianta simplesmente fazer um site de qualquer maneira e colocar lá várias informações. O usuário de hoje em dia é mais exigente, querendo sempre algo bonito, acessível e interativo.

Para os banners é a mesma história. Existem sites que criam banners com o texto que você quer, mas suas aparências são geralmente amadoras, o que traz descredibilização para empresas que os usam. A melhor opção sempre é contratar alguém que entenda de design.

Como e a criação de e-commerce (comercio eletronico)?

Ao se criar um e-commerce você tem que levar em consideração que estamos falando de negócios, independente do que você vá vender. Aí a atenção já deve mudar, pois não é um simples site onde as pessoas vão visitar e ler um pouco sobre um determinado assunto. O e-commerce é um site onde as pessoas irão fazer transações comerciais, trocando dinheiro por algum produto ou serviço.

Porque estou falando tudo isso? Porque, diferente do que eu falei acima sobre sites, para se criar e-commerces você não pode simplesmente usar qualquer construtor de site, mesmo que seja um construtor próprio para e-commerce, pois sempre existe o risco de algum construtor automático ser uma fraude e “roubar” números de cartões e senhas. Por essas e outras que o e-commerce é um caso que merece maior atenção.

Algumas empresas preferem que seus e-commerces sejam criados do zero, ou seja, todas as funcionalidades e sistemas criados desde o início (o que leva muitos meses para ficar pronto). Ora, antigamente era isso mesmo que acontecia, pois não havia opções no mercado. Mas hoje é diferente…

Atualmente várias empresas especializadas em criação de sites ou hospedagem oferecem o sistema-base gratuitamente. O que precisamos fazer é apenas instalar e personalizar de acordo com as necessidades, o que leva no máximo um dia se não for feita nenhuma personalização. É o mesmo que comprar a massa da pizza já pronta no mercado e montar o restante em casa de acordo com seu gosto. Quase ninguém hoje em dia fica fazendo a massa da pizza do zero, não é mesmo?
.

.O que nós (Surgimento e outros webdesigners) fazemos é instalar o sistema já pronto e personalizar a loja com layout e módulos que o sistema-base não tem, otimizando a experiência do usuário que for comprar, e acreditem: isso faz toda a diferença! Você não serviria apenas a massa da pizza para seus convidados, não é? Por isso que eu digo que é importante fazer uma personalização. O e-commerce tem que ter a cara de sua empresa (assim como qualquer site empresarial).

Atualmente o sistema-base de e-commerce que usamos é o da Locaweb. Trata-se da Loja Exemplo.Veja aqui como é a massa da pizza, ou melhor, a aparência da loja sem personalizar:

Não muito atraente, concorda? Isso sem falar que as funcionalidades que ela tem são as básicas de um e-commerce bem simples, sem muitas opções.

Por isso resolvemos incrementar essa pizza. Colocamos nela todos os módulos grátis que você viu neste blog, e muitos outros que você não encontra nos tutoriais daqui. A loja ficou realmente muito interessante e bonita! Veja abaixo o sistema em funcionamento:

Nem parece que se trata do mesmo sistema-base (Loja Exemplo), não é? Para fazer essa personalização de layout e módulos diferentes é necessário alguém que entenda de design e programação. Qualquer tentativa sem conhecimento pode causar danos à base de dados, fazendo com que se perca tudo, desde produtos até clientes cadastrados.

O que preciso para ter essa loja mostrada acima?

Em primeiro lugar, é necessário que você assine uma hospedagem, para ter onde coloca-la. Nós sugerimos a hospedagem da Locaweb (Profissional 1, plataforma Windows) pois ela é 100% compatível com o sistema apresentado. O preço deste plano de hospedagem é R$ 29,00 ao mês. Tendo isso, basta entrar em contato conosco.

E depois, como faço para aparecer?

Um investimento que recomendo é publicidade. Dificilmente um e-commerce irá se promover se não anunciar. E como estamos falando em comércio eletrônico e não em comércio comum, a dica é fazer o anuncio em sites comparadores (que compram preços de produtos), como por exemplo Buscapé, BondFaro e Shopping Uol. Esses três citados são pagos (você paga por clique de usuário em seu produto), mas são muito bons. Você também pode procurar por classificados grátis pela Internet. São muitos, mas os resultados nesses nem sempre são satisfatórios.

Por fim, vale ter um bom preço em seus produtos, mas a qualidade, atendimento, organização interna e o funcionamento otimizado junto com um bom visual fazem a cabeça do cliente. E vale lembrar: o comércio é eletrônico, mas a atenção que será direcionada a ele deve ser a mesma que qualquer outro comércio físico. Não se esqueça de controlar seus estoques corretamente para não ter dores de cabeça no futuro.

Espero ter ajudado.

Tutorial de PHP

2010-12-18T14:27:00.000-02:00

Tutorial da linguagem PHP

1. Introdução

O que é PHP?

PHP é uma linguagem que permite criar sites WEB dinâmicos, possibilitando uma interação com o usuário através de formulários, parâmetros da URL e links. A diferença de PHP com relação a linguagens semelhantes a Javascript é que o código PHP é executado no servidor, sendo enviado para o cliente apenas html puro. Desta maneira é possível interagir com bancos de dados e aplicações existentes no servidor, com a vantagem de não expor o código fonte para o cliente. Isso pode ser útil quando o programa está lidando com senhas ou qualquer tipo de informação confidencial.
O que diferencia PHP de um script CGI escrito em C ou Perl é que o código PHP fica embutido no próprio HTML, enquanto no outro caso é necessário que o script CGI gere todo o código HTML, ou leia de um outro arquivo.

O que pode ser feito com PHP?

Basicamente, qualquer coisa que pode ser feita por algum programa CGI pode ser feita também com PHP, como coletar dados de um formulário, gerar páginas dinamicamente ou enviar e receber cookies.
PHP também tem como uma das características mais importantes o suporte a um grande número de bancos de dados, como dBase, Interbase, mSQL, mySQL, Oracle, Sybase, PostgreSQL e vários outros. Construir uma página baseada em um banco de dados torna-se uma tarefa extremamente simples com PHP.
Além disso, PHP tem suporte a outros serviços através de protocolos como IMAP, SNMP, NNTP, POP3 e, logicamente, HTTP. Ainda é possível abrir sockets e interagir com outros protocolos.

Como surgiu a linguagem PHP?

A linguagem PHP foi concebida durante o outono de 1994 por Rasmus Lerdorf. As primeiras versões não foram disponibilizadas, tendo sido utilizadas em sua home-page apenas para que ele pudesse ter informações sobre as visitas que estavam sendo feitas. A primeira versão utilizada por outras pessoas foi disponibilizada em 1995, e ficou conhecida como "Personal Home Page Tools" (ferramentas para página pessoal). Era composta por um sistema bastante simples que interpretava algumas macros e alguns utilitários que rodavam "por trás" das home-pages: um livro de visitas, um contador e algumas outras coisas.
Em meados de 1995 o interpretador foi reescrito, e ganhou o nome de PHP/FI, o "FI" veio de um outro pacote escrito por Rasmus que interpretava dados de formulários HTML (Form Interpreter). Ele combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a mSQL, nascendo assim o PHP/FI, que cresceu bastante, e as pessoas passaram a contribuir com o projeto.
Estima-se que em 1996 PHP/FI estava sendo usado por cerca de 15.000 sites pelo mundo, e em meados de 1997 esse número subiu para mais de 50.000. Nessa época houve uma mudança no desenvolvimento do PHP. Ele deixou de ser um projeto de Rasmus com contribuições de outras pessoas para ter uma equipe de desenvolvimento mais organizada. O interpretador foi reescrito por Zeev Suraski e Andi Gutmans, e esse novo interpretador foi a base para a versão 3.
Atualmente o uso do PHP3 vem crescendo numa velocidade incrível, e já está sendo desenvolvida a versão 4 do PHP.

2. Sintaxe Básica

Delimitando o código PHP

O código PHP fica embutido no próprio HTML. O interpretador identifica quando um código é PHP pelas seguintes tags:

<?php
comandos
?>

<script language="php">
comandos
</script>

<?
comandos
?>

<%
comandos
%>

O tipo de tags mais utilizado é o terceiro, que consiste em uma "abreviação" do primeiro. Para utilizá-lo, é necessário habilitar a opção short-tags na configuração do PHP. O último tipo serve para facilitar o uso por programadores acostumados à sintaxe de ASP. Para utilizá-lo também é necessário habilitá-lo no PHP, através do arquivo de configuração php.ini.

Separador de instruções

Entre cada instrução em PHP é preciso utilizar o ponto-e-vírgula, assim como em C, Perl e outras linguagens mais conhecidas. Na última instrução do bloco de script não é necessário o uso do ponto-e-vírgula, mas por questões estéticas recomenda-se o uso sempre.

Nomes de variáveis

Toda variável em PHP tem seu nome composto pelo caracter $ e uma string, que deve iniciar por uma letra ou o caracter "_". PHP é case sensitive, ou seja, as variáveis $vivas e $VIVAS são diferentes. Por isso é preciso ter muito cuidado ao definir os nomes das variáveis. É bom evitar os nomes em maiúsculas, pois como veremos mais adiante, o PHP já possui alguma variáveis pré-definidas cujos nomes são formados por letras maiúsculas.

Comentários

Há dois tipos de comentários em código PHP:

Comentários de uma linha:

Marca como comentário até o final da linha ou até o final do bloco de código PHP - o que vier antes. Pode ser delimitado pelo caracter "#" ou por duas barras ( // ).

Exemplo:
<? echo "teste"; #isto é um teste ?>
<? echo "teste"; //este teste é similar ao anterior ?>

Comentários de mais de uma linha:
Tem como delimitadores os caracteres "/*" para o início do bloco e "*/" para o final do comentário. Se o delimitador de final de código PHP ( ?> ) estiver dentro de um comentário, não será reconhecido pelo interpretador.

Exemplos:

<?
echo "teste"; /* Isto é um comentário com mais
de uma linha, mas não funciona corretamente ?>
*/

<?
echo "teste"; /* Isto é um comentário com mais
de uma linha que funciona corretamente
*/
?>

3. Criando os primeiros scripts
Primeiro Exemplo

Neste exemplo, criaremos um script com uma saída simples, que servirá para testar se a instalação foi feita corretamente:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?php
echo "Primeiro Script";
?>

</body>
</html>

Salve o arquivo como "primeiro.php3" no diretorio de documentos do Apache (ou o Web Server escolhido). Abra uma janela do navegador e digite o endereço "http://localhost/primeiro.php3". Verificando o código fonte da página exibida, temos o seguinte:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

Primeiro Script

</body>
</html>

Isso mostra como o PHP funciona. O script é executado no servidor, ficando disponível para o usuário apenas o resultado. Agora vamos escrever um script que produza exatamente o mesmo resultado utilizando uma variável:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?php
$texto = "Primeiro Script";
echo $texto;
?>

</body>
</html>

Utilizando formulários HTML

Ao clicar num botão "Submit" em um formulário HTML as informações dos campos serão enviadas ao servidor especificado para que possa ser produzida uma resposta. O PHP trata esses valores como variáveis, cujo nome é o nome do campo definido no formulário. O exemplo a seguir mostra isso, e mostra também como o código PHP pode ser inserido em qualquer parte do código HTML:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?php
if ($texto != "")
echo "Você digitou \"$texto\"<br><br>";
?>

<form method=post action="<? echo $PATH_INFO; ?>">
<input type="text" name="texto" value="" size=10>
<br>
<input type="submit" name="sub" value="Enviar!">
</form>

</body>
</html>

Ao salvar o arquivo acima e carregá-lo no browser, o usuário verá apenas um formulário que contém um espaço para digitar o texto, como visto na figura 01. Ao digitar um texto qualquer e submeter o formulário, a resposta, que é o mesmo arquivo PHP (indicado pela constante $PATH_INFO, que retorna o nome do arquivo) será como na figura 02:

figura 01    figura 02

Isso ocorre porque o código PHP testa o conteúdo da variável $texto. Inicialmente ele é uma string vazia, e por isso nada é impresso na primeira parte. Quando algum texto é digitado no formulário e submetido, o PHP passa a tratá-lo como uma variável. Como no formulário o campo possui o nome "texto", a variável com seu conteúdo será $texto. Assim, no próximo teste o valor da variável será diferente de uma string vazia, e o PHP imprime um texto antes do formulário.

Interagindo com o browser

PHP também permite interagir com informações do browser automaticamente. Por exemplo, o script a seguir mostra informações sobre o browser do usuário. As figuras 03 e 04 mostram o resultado visto no Netscape Communicator e o Microsoft Internet Explorer, respectivamente.
<html>
<head><title>Aprendendo PHP</title></head>
<body>

<? echo $HTTP_USER_AGENT; ?>

</body>
</html>

figura 03    figura 04

Observe que o resultado mostra características de cada browser, como a versão, e no caso do Communicator até o idioma ("en"). Com isso, se você criar uma página com recursos disponíveis somente no Internet Explorer, por exemplo, pode esconder o código dos outros browsers, com um código semelhante ao seguinte:

<html>
<head><title>Aprendendo PHP</title></head>
<body>

<?
if (strpos($HTTP_USER_AGENT,"MSIE 5") != 0) {
echo "Você usa Internet Explorer";
} else {
echo "Você não usa Internet Explorer";
}
?>

</body>
</html>

Neste exemplo, será apenas exibido um texto informando se está sendo utilizado o Microsoft Internet Explorer ou não, mas para outras funções poderia ser utilizado algo semelhante.
É bom notar o surgimento de mais uma função no código anterior: strpos(string1,string2). Essa função retorna a posição da primeira aparição de string2 em string1, contando a partir de zero, e não retorna valor algum se não ocorrer. Assim, para testar se a string $HTTP_USER_AGENT contém a string "MSIE", basta testar se strpos devolve algum valor.

Acessando Bancos de Dados
Neste documento todos os exemplos referentes a acesso de bancos de dados utilizarão o gerenciador de banco de dados MySQL, que pode ser copiado gratuitamente no site http://www.mysql.org.
Para interagir com uma base de dados SQL existem três comandos básicos que devem ser utilizados: um que faz a conexão com o servidor de banco de dados, um que seleciona a base de dados a ser utilizada e um terceiro que executa uma "query" SQL.

Conexão com o servidor
A conexão com o servidor de banco de dados mySQL em PHP é feita através do comando mysql_connect, que tem a seguinte sintaxe:

int mysql_connect(string /*host [:porta]*/ , string /*login*/ , string /*senha*/ );

Os parâmetros são bastante simples: o endereço do servidor(host), o nome do usuário (login) e a senha para a conexão. A função retorna um valor inteiro, que é o identificador da conexão estabelecida e deverá ser armazenado numa variável para ser utilizado depois. No nosso exemplo, temos como servidor de banco de dados a mesma máquina que roda o servidor http, como login o usuário "root" e senha "phppwd":

$conexao = mysql_connect("localhost", "root", "phppwd");

Assim, se a conexão for bem sucedida (existir um servidor no endereço especificado que possua o usuário com a senha fornecida), o identificador da conexão fica armazenado na variável $conexão.

Seleção do banco de dados
Uma vez conectado, é preciso selecionar o banco de dados existente no servidor com o qual desejamos trabalhar. Isso é feito através da função int mysql_select_db, que possui a seguinte sintaxe:

int mysql_select_db(string /*nome_base*/, int /*conexao*/ );

O valor de retorno é 0 se o comando falhar, e 1 em caso de sucesso. O nome da base de dados a selecionar é o primeiro parâmetro fornecido, seguido pelo identificador da conexão. Se este for omitido, o interpretador PHP tentará utilizar a última conexão estabelecida. Recomenda-se sempre explicitar esse valor, para facilitar a legibilidade do código. No nosso exemplo, a base de dados a ser selecionada possui o nome "ged":

mysql_select_db("ged", $conexao);

Após a execução desse comando qualquer consulta executada para aquela conexão utilizará a base de dados selecionada.

Execução de queries SQL
Após estabelecida a conexão e selecionada a base de dados a ser utilizada, quase toda a interação com o servidor mySQL pode ser feita através de consultas escritas em SQL (Structured Query Language), com o comando mysql_query, que utiliza a seguinte sintaxe:
int mysql_query(string consulta, int [conexao] );

O valor de retorno é 0 se falhar ou 1 em caso de sucesso. Sucesso aqui significa que a consulta está sintaticamente correta e foi executada no servidor. Nenhuma informação sobre o resultado é retornada deste comando, ou até mesmo se o resultado é o esperado. No caso da consulta ser um comando SELECT, o valor de retorno é um valor interno que identifica o resultado, que poderá ser tratado com a função mysql_result() e outras. A string query não deve conter ponto-e-vírgula no final do comando, e o identificador da conexão é opcional. Vamos criar uma tabela como exemplo:
$cria = "CREATE TABLE exemplo (codigo INT AUTO_INCREMENT PRIMARY KEY, nome CHAR(40), email CHAR(50))";

mysql_query($cria, $conexao);

Agora vejamos como ficou o código completo para executar uma query SQL numa base de dados mySQL, com um exemplo que cria uma tabela chamada exemplo e adiciona alguns dados:

$conexao = mysql_connect("localhost", "root", "phppwd");
mysql_select_db("ged", $conexao);

$cria = "CREATE TABLE exemplo (codigo INT AUTO_INCREMENT PRIMARY KEY, nome CHAR(40), email CHAR(50))";

$insere1 = "INSERT INTO exemplo (nome,email) VALUES ("Mauricio Vivas","vivas@usa.net");

$insere2 = "INSERT INTO exemplo (nome,email) VALUES ("Jose da Silva","jose@teste.com");

$insere3 = "INSERT INTO exemplo (nome,email) VALUES ("Fernando Henrique Cardoso","fhc@planalto.gov.br");

$insere4 = "INSERT INTO exemplo (nome,email) VALUES ("Bill Clinton","president@whitehouse.gov");

mysql_query($cria, $conexao);
mysql_query($insere1, $conexao);
mysql_query($insere2, $conexao);
mysql_query($insere3, $conexao);
mysql_query($insere4, $conexao);

Tratamento de resultados de query SELECT

Ao executar uma query SQL SELECT através do comando mysql_query, o identificador do resultado deve ser armazenado numa variável que pode ser tratada de diversas formas. Duas maneiras interessantes de fazê-lo usam o comando mysql_result e o comando mysql_fetch_row, respectivamente.
O comando mysql_result tem a seguinte sintaxe:

int mysql_result(int resultado, int linha, mixed [campo]);

Onde resultado é o identificador do resultado, obtido com o retorno da função mysql_query, linha especifica a tupla a ser exibida, já que uma query SELECT pode retornar diversas tuplas, e campo é o identificador do campo a ser exibido, sendo o tipo descrito como mixed pela possibilidade de ser de diversos tipos (neste caso, inteiro ou string). Vejamos um exemplo utilizando a tabela criada anteriormente:

$consulta = "SELECT nome, email FROM exemplo WHERE email LIKE 'vivas'";

$resultado = mysql_query($consulta, $conexao);

printf("Nome: ", mysql_result($resultado,0,"nome"), "<br>\n");
printf("e-mail: ", mysql_result($resultado,0,"email"),"<br>");

Com o exemplo acima, o resultado será:

Nome: Mauricio Vivas<br>
e-mail: vivas@usa.net<br>

É importante notar que a utilização desta função é um pouco trabalhosa, já que no caso de um resultado com várias linhas é preciso controlar o número de linhas para tratá-las (pode-se utilizar a função mysql_num_rows(int resultado), que retorna o número de linhas de um resultado), e no caso de uma alteração no nome do campo é preciso alterar também a maneira de tratá-lo. Por isso é mais aconselhável que se use uma outra função, como por exemplo mysql_fetch_row, que possui a seguinte sintaxe:

array mysql_fetch_row(int result);

A variável resultado é o identificador da memória de resultados, obtido como retorno da função mysql_query. O resultado produzido por esta função é de retirar a primeira linha da memória de resultados, se houver, e colocá-la num array. Assim torna-se mais fácil tratar um resultado com várias linhas, e sem utilizar os nomes dos campos na rotina de tratamento do resultado:

$consulta = "SELECT nome, email FROM exemplo";

$resultado = mysql_query($consulta, $conexao);

echo "<table border=1>\n";
echo "<tr><td>Nome</td><td>e-mail</tr>\n";
while ($linha = mysql_fetch_row($resultado)) {
printf("<tr><td>$linha[0]</td>");
printf("<td>$linha[1]</td></tr>");
}
echo "</table>\n";

O código acima irá imprimir todos os registros da tabela exemplo numa tabela html. Se o programador desejar "pular" alguma(s) linha(s) do resultado, poderá utilizar a função mysql_data_seek, que tem por objetivo definir qual será a próxima linha da memória de resultados a ser impressa. Sua sintaxe é:

int mysql_data_seek(int resultado, int linha);

Sendo resultado o identificador do resultado e linha o numero da linha. Retorna 0 em caso de falha, e um valor diferente de zero em caso de sucesso.
Existem diversas outras funções para o tratamento de resultados, que armazenam as linhas em arrays e objetos, assim como outras funções para administrar o banco de dados, mas como este documento trata-se de uma introdução, inicialmente não tratará tópicos mais avançados.

4. Tipos

Tipos Suportados

PHP suporta os seguintes tipos de dados:
"    Inteiro
"    Ponto flutuante
"    String
"    Array
"    Objeto

PHP utiliza checagem de tipos dinâmica, ou seja, uma variável pode conter valores de diferentes tipos em diferentes momentos da execução do script. Por este motivo não é necessário declarar o tipo de uma variável para usá-la. O interpretador PHP decidirá qual o tipo daquela variável, verificando o conteúdo em tempo de execução.
Ainda assim, é permitido converter os valores de um tipo para outro desejado, utilizando o typecasting ou a função settype (ver adiante).

Inteiros (integer ou long)
Uma variável pode conter um valor inteiro com atribuições que sigam as seguintes sintaxes:

$vivas = 1234;    # inteiro positivo na base decimal
$vivas = -234;    # inteiro negativo na base decimal
$vivas = 0234;    # inteiro na base octal-simbolizado pelo 0
# equivale a 156 decimal
$vivas = 0x34;    # inteiro na base hexadecimal(simbolizado
# pelo 0x) - equivale a 52 decimal.

A diferença entre inteiros simples e long está no número de bytes utilizados para armazenar a variável. Como a escolha é feita pelo interpretador PHP de maneira transparente para o usuário, podemos afirmar que os tipos são iguais.
Números em Ponto Flutuante (double ou float)
Uma variável pode ter um valor em ponto flutuante com atribuições que sigam as seguintes sintaxes:

$vivas = 1.234;
$vivas = 23e4;    # equivale a 230.000

Strings

Strings podem ser atribuídas de duas maneiras:

a)    utilizando aspas simples ( ' ) - Desta maneira, o valor da variável será exatamente o texto contido entre as aspas (com exceção de \\ e \' - ver tabela abaixo)
b)    utilizando aspas duplas ( " ) - Desta maneira, qualquer variável ou caracter de escape será expandido antes de ser atribuído.

Exemplo:

<?
$teste = "Mauricio";
$vivas = '---$teste--\n';
echo "$vivas";
?>
A saída desse script será "---$teste--\n".

<?
$teste = "Mauricio";
$vivas = "---$teste---\n";
echo "$vivas";
?>

A saída desse script será "---Mauricio--" (com uma quebra de linha no final).

A tabela seguinte lista os caracteres de escape:

Sintaxe    Significado
\n    Nova linha
\r    Retorno de carro (semelhante a \n)
\t    Tabulação horizontal
\\    A própria barra ( \ )
\$    O símbolo $
\'    Aspa simples
\"    Aspa dupla

No apêndice 01 está disponível uma lista das funções utilizadas no tratamento de strings.

Arrays

Arrays em PHP podem ser observados como mapeamentos ou como vetores indexados. Mais precisamente, um valor do tipo array é um dicionário onde os índices são as chaves de acesso. Vale ressaltar que os índices podem ser valores de qualquer tipo e não somente inteiros. Inclusive, se os índices forem todos inteiros, estes não precisam formar um intervalo contínuo
Como a checagem de tipos em PHP é dinâmica, valores de tipos diferentes podem ser usados como índices de array, assim como os valores mapeados também podem ser de diversos tipos.
Exemplo:
<?
$cor[1] = "vermelho";
$cor[2] = "verde";
$cor[3] = "azul";
$cor["teste"] = 1;
?>

Equivalentemente, pode-se escrever:

<?
$cor = array(1 => "vermelho, 2 => "verde, 3 => "azul", "teste => 1);
?>

Listas
As listas são utilizadas em PHP para realizar atribuições múltiplas. Através de listas é possível atribuir valores que estão num array para variáveis. Vejamos o exemplo:

Exemplo:

list($a, $b, $c) = array("a", "b", "c");

O comando acima atribui valores às três variáveis simultaneamente. É bom notar que só são atribuídos às variáveis da lista os elementos do array que possuem índices inteiros e não negativos. No exemplo acima as três atribuições foram bem sucedidas porque ao inicializar um array sem especificar os índices eles passam a ser inteiros, a partir do zero. Um fator importante é que cada variável da lista possui um índice inteiro e ordinal, iniciando com zero, que serve para determinar qual valor será atribuído. No exemplo anterior temos $a com índice 0, $b com índice 1 e $c com índice 2. Vejamos um outro exemplo:

$arr = array(1=>"um",3=>"tres","a"=>"letraA",2=>"dois);
list($a,$b,$c,$d) = $arr;

Após a execução do código acima temos os seguintes valores:
$a == null
$b == "um"
$c == "dois"
$d == "tres"

Devemos observar que à variável $a não foi atribuído valor, pois no array não existe elemento com índice 0 (zero). Outro detalhe importante é que o valor "tres" foi atribuído à variável $d, e não a $b, pois seu índice é 3, o mesmo que $d na lista. Por fim, vemos que o valor "letraA" não foi atribuído a elemento algum da lista pois seu índice não é inteiro.
Os índices da lista servem apenas como referência ao interpretador PHP para realizar as atribuições, não podendo ser acessados de maneira alguma pelo programador. De maneira diferente do array, uma lista não pode ser atribuída a uma variável, servindo apenas para fazer múltiplas atribuições através de um array.
No apêndice 02 está disponível uma lista das funções mais comuns para o tratamento de arrays.

Objetos
Um objeto pode ser inicializado utilizando o comando new para instanciar uma classe para uma variável.

Exemplo:
class teste {
        function nada() {
            echo "nada";
        }
}

$vivas = new teste;
$vivas -> nada();

A utilização de objetos será mais detalhada mais à frente.

Booleanos

PHP não possui um tipo booleano, mas é capaz de avaliar expressões e retornar true ou false, através do tipo integer: é usado o valor 0 (zero) para representar o estado false, e qualquer valor diferente de zero (geralmente 1) para representar o estado true.

Transformação de tipos

A transformação de tipos em PHP pode ser feita das seguintes maneiras:
Coerções

Quando ocorrem determinadas operações ("+", por exemplo) entre dois valores de tipos diferentes, o PHP converte o valor de um deles automaticamente (coerção). É interessante notar que se o operando for uma variável, seu valor não será alterado.
O tipo para o qual os valores dos operandos serão convertidos é determinado da seguinte forma: Se um dos operandos for float, o outro será convertido para float, senão, se um deles for integer, o outro será convertido para integer.

Exemplo:
$vivas = "1";        // $vivas é a string "1"
$vivas = $vivas + 1;    // $vivas é o integer 2
$vivas = $vivas + 3.7;// $vivas é o double 5.7
$vivas = 1 + 1.5        // $vivas é o double 2.5

Como podemos notar, o PHP converte string para integer ou double mantendo o valor. O sistema utilizado pelo PHP para converter de strings para números é o seguinte:
-    É analisado o início da string. Se contiver um número, ele será avaliado. Senão, o valor será 0 (zero);
-    O número pode conter um sinal no início ("+" ou "-");
-    Se a string contiver um ponto em sua parte numérica a ser analisada, ele será considerado, e o valor obtido será double;
-    Se a string contiver um "e" ou "E" em sua parte numérica a ser analisada, o valor seguinte será considerado como expoente da base 10, e o valor obtido será double;

Exemplos:
$vivas = 1 + "10.5";        // $vivas == 11.5
$vivas = 1 + "-1.3e3";    // $vivas == -1299
$vivas = 1 + "teste10.5";    // $vivas == 1
$vivas = 1 + "10testes";    // $vivas == 11
$vivas = 1 + " 10testes";    // $vivas == 11
$vivas = 1 + "+ 10testes";    // $vivas == 1

Transformação explícita de tipos

A sintaxe do typecast de PHP é semelhante ao C: basta escrever o tipo entre parenteses antes do valor

Exemplo:
$vivas = 15;            // $vivas é integer (15)
$vivas = (double) $vivas    // $vivas é double (15.0)
$vivas = 3.9            // $vivas é double (3.9)
$vivas = (int) $vivas    // $vivas é integer (3)
// o valor decimal é truncado

Os tipos de cast permitidos são:
(int), (integer)        ==> muda para integer;
(real), (double), (float)    ==> muda para float;
(string)            ==> muda para string;
(array)            ==> muda para array;
(object)            ==> muda para objeto.

Com a função settype

A função settype converte uma variável para o tipo especificado, que pode ser "integer", "double", "string", "array" ou "object".

Exemplo:
$vivas = 15;            // $vivas é integer
settype($vivas,double)    // $vivas é double

5. Constantes

Constantes pré-definidas

O PHP possui algumas constantes pré-definidas, indicando a versão do PHP, o Sistema Operacional do servidor, o arquivo em execução, e diversas outras informações. Para ter acesso a todas as constantes pré-definidas, pode-se utilizar a função phpinfo(), que exibe uma tabela contendo todas as constantes pré-definidas, assim como configurações da máquina, sistema operacional, servidor http e versão do PHP instalada.

Definindo constantes

Para definir constantes utiliza-se a função define. Uma vez definido, o valor de uma constante não poderá mais ser alterado. Uma constante só pode conter valores escalares, ou seja, não pode conter nem um array nem um objeto. A assinatura da função define é a seguinte:

int define(string nome_da_constante, mixed valor);

A função retorna true se for bem-sucedida. Veja um exemplo de sua utilização a seguir:

define ("pi", 3.1415926536);
$circunf = 2*pi*$raio;

6. Operadores

Aritméticos

Só podem ser utilizados quando os operandos são números (integer ou float). Se forem de outro tipo, terão seus valores convertidos antes da realização da operação.

+    adição
-    subtração
*    multiplicação
/    divisão
%    módulo

de strings

Só há um operador exclusivo para strings:

.    concatenação

de atribuição

Existe um operador básico de atribuição e diversos derivados. Sempre retornam o valor atribuído. No caso dos operadores derivados de atribuição, a operação é feita entre os dois operandos, sendo atribuído o resultado para o primeiro. A atribuição é sempre por valor, e não por referência.

=    atribuição simples
+=    atribuição com adição
-=    atribuição com subtração
*=    atribuição com multiplicação
/=    atribuição com divisão
%=    atribuição com módulo
.=    atribuição com concatenação

Exemplo:

$a = 7;
$a += 2; // $a passa a conter o valor 9

bit a bit

Comparam dois números bit a bit.

&    "e" lógico
|    "ou" lógico
^    ou exclusivo
~    não (inversão)
<<    shift left
>>    shift right
Lógicos
Utilizados para inteiros representando valores booleanos

and    "e" lógico
or    "ou" lógico
xor    ou exclusivo
!    não (inversão)
&&    "e" lógico
||    "ou" lógico

Existem dois operadores para "e" e para "ou porque eles têm diferentes posições na ordem de precedência.

Comparação

As comparações são feitas entre os valores contidos nas variáveis, e não as referências. Sempre retornam um valor booleano.

==    igual a
!=    diferente de
<    menor que
>    maior que
<=    menor ou igual a
>=    maior ou igual a

Expressão condicional

Existe um operador de seleção que é ternário. Funciona assim:

(expressao1)?(expressao2):( expressao3)

o interpretador PHP avalia a primeira expressão. Se ela for verdadeira, a expressão retorna o valor de expressão2. Senão, retorna o valor de expressão3.

de incremento e decremento

++    incremento
--    decremento

Podem ser utilizados de duas formas: antes ou depois da variável. Quando utilizado antes, retorna o valor da variável antes de incrementá-la ou decrementá-la. Quando utilizado depois, retorna o valor da variável já incrementado ou decrementado.

Exemplos:

$a = $b = 10; // $a e $b recebem o valor 10
$c = $a++; // $c recebe 10 e $a passa a ter 11
$d = ++$b; // $d recebe 11, valor de $b já incrementado

Ordem de precedência dos operadores

A tabela a seguir mostra a ordem de precedência dos operadores no momento de avaliar as expressões;
Precedência    Associatividade    Operadores
1.        esquerda    ,
2.        esquerda    or
3.        esquerda    xor
4.        esquerda    and
5.        direita    print
6.        esquerda    = += -= *= /= .= %= &= != ~= <<= >>=
7.        esquerda    ? :
8.        esquerda    ||
9.        esquerda    &&
10.        esquerda    |
11.        esquerda    ^
12.        esquerda    &
13.        não associa    == !=
14.        não associa    < <= > >=
15.        esquerda    << >>
16.        esquerda    + - .
17.        esquerda    * / %
18.        direita    ! ~ ++ -- (int) (double) (string) (array) (object) @
19.        direita    [
20.        não associa    new

7. Estruturas de Controle

As estruturas que veremos a seguir são comuns para as linguagens de programação imperativas, bastando, portanto, descrever a sintaxe de cada uma delas, resumindo o funcionamento.

Blocos
Um bloco consiste de vários comandos agrupados com o objetivo de relacioná-los com determinado comando ou função. Em comandos como if, for, while, switch e em declarações de funções blocos podem ser utilizados para permitir que um comando faça parte do contexto desejado. Blocos em PHP são delimitados pelos caracteres "{" e "}". A utilização dos delimitadores de bloco em uma parte qualquer do código não relacionada com os comandos citados ou funções não produzirá efeito algum, e será tratada normalmente pelo interpretador.
Exemplo:
if ($x == $y)
comando1;
comando2;

Para que comando2 esteja relacionado ao if é preciso utilizar um bloco:

if ($x == $y){
comando1;
comando2;
}

Comandos de seleção

Também chamados de condicionais, os comandos de seleção permitem executar comandos ou blocos de comandos com base em testes feitos durante a execução.

if

O mais trivial dos comandos condicionais é o if. Ele testa a condição e executa o comando indicado se o resultado for true (valor diferente de zero). Ele possui duas sintaxes:

if (expressão)
   comando;

if (expressão):
   comando;
   . . .
   comando;
endif;

Para incluir mais de um comando no if da primeira sintaxe, é preciso utilizar um bloco, demarcado por chaves.

O else é um complemento opcional para o if. Se utilizado, o comando será executado se a expressão retornar o valor false (zero). Suas duas sintaxes são:

if (expressão)
   comando;
else
   comando;

if (expressão):
   comando;
   . . .
   comando;
else
   comando;
   . . .
   comando;
endif;

A seguir, temos um exemplo do comando if utilizado com else:

if ($a > $b)
$maior = $a;
else
$maior = $b;

O exemplo acima coloca em $maior o maior valor entre $a e $b

Em determinadas situações é necessário fazer mais de um teste, e executar condicionalmente diversos comandos ou blocos de comandos. Para facilitar o entendimento de uma estrutura do tipo:

if (expressao1)
   comando1;
else
if (expressao2)
    comando2;
else
    if (expressao3)
      comando3;
    else
      comando4;

foi criado o comando, também opcional elseif. Ele tem a mesma função de um else e um if usados sequencialmente, como no exemplo acima. Num mesmo if podem ser utilizados diversos elseif's, ficando essa utilização a critério do programador, que deve zelar pela legibilidade de seu script.

O comando elseif também pode ser utilizado com dois tipos de sintaxe. Em resumo, a sintaxe geral do comando if fica das seguintes maneiras:

if (expressao1)
comando;
[ elseif (expressao2)
   comando; ]
[ else
   comando; ]

if (expressao1) :
comando;
   . . .
comando;
[ elseif (expressao2)
comando;
   . . .
comando; ]
[ else
comando;
   . . .
comando; ]
endif;

switch

O comando switch atua de maneira semelhante a uma série de comandos if na mesma expressão. Frequentemente o programador pode querer comparar uma variável com diversos valores, e executar um código diferente a depender de qual valor é igual ao da variável. Quando isso for necessário, deve-se usar o comando switch. O exemplo seguinte mostra dois trechos de código que fazem a mesma coisa, sendo que o primeiro utiliza uma série de if's e o segundo utiliza switch:

if ($i == 0)
   print "i é igual a zero";
elseif ($i == 1)
   print "i é igual a um";
elseif ($i == 2)
   print "i é igual a dois";

switch ($i) {
case 0:
     print "i é igual a zero";
     break;
case 1:
     print "i é igual a um";
     break;
case 2:
     print "i é igual a dois";
     break;
}

É importante compreender o funcionamento do switch para não cometer enganos. O comando switch testa linha a linha os cases encontrados, e a partir do momento que encontra um valor igual ao da variável testada, passa a executar todos os comandos seguintes, mesmo os que fazem parte de outro teste, até o fim do bloco. por isso usa-se o comando break, quebrando o fluxo e fazendo com que o código seja executado da maneira desejada. Veremos mais sobre o break mais adiante. Veja o exemplo:

switch ($i) {
case 0:
     print "i é igual a zero";
case 1:
     print "i é igual a um";
case 2:
     print "i é igual a dois";
}

No exemplo acima, se $i for igual a zero, os três comandos "print" serão executados. Se $i for igual a 1, os dois últimos "print" serão executados. O comando só funcionará da maneira desejada se $i for igual a 2.
Em outras linguagens que implementam o comando switch, ou similar, os valores a serem testados só podem ser do tipo inteiro. Em PHP é permitido usar valores do tipo string como elementos de teste do comando switch. O exemplo abaixo funciona perfeitamente:

switch ($s) {
case "casa":
     print "A casa é amarela";
case "arvore":
     print "a árvore é bonita";
case "lampada":
     print "joao apagou a lampada";
}

comandos de repetição
while
O while é o comando de repetição (laço) mais simples. Ele testa uma condição e executa um comando, ou um bloco de comandos, até que a condição testada seja falsa. Assim como o if, o while também possui duas sintaxes alternativas:

while (<expressao>)
   <comando>;

while (<expressao>):
   <comando>;
    . . .
   <comando>;
endwhile;

A expressão só é testada a cada vez que o bloco de instruções termina, além do teste inicial. Se o valor da expressão passar a ser false no meio do bloco de instruções, a execução segue até o final do bloco. Se no teste inicial a condição for avaliada como false, o bloco de comandos não será executado.
O exemplo a seguir mostra o uso do while para imprimir os números de 1 a 10:
$i = 1;
while ($i <=10)
print $i++;

do... while

O laço do..while funciona de maneira bastante semelhante ao while, com a simples diferença que a expressão é testada ao final do bloco de comandos. O laço do..while possui apenas uma sintaxe, que é a seguinte:

do {
   <comando>
   . . .
   <comando>
} while (<expressao>);

O exemplo utilizado para ilustrar o uso do while pode ser feito da seguinte maneira utilizando o do.. while:

$i = 0;
do {
print ++$i;
} while ($i < 10);

for

O tipo de laço mais complexo é o for. Para os que programam em C, C++ ou Java, a assimilação do funcionamento do for é natural. Mas para aqueles que estão acostumados a linguagens como Pascal, há uma grande mudança para o uso do for. As duas sintaxes permitidas são:

for (<inicializacao>;<condicao>;<incremento>)
   <comando>;

for (<inicializacao>;<condicao>;<incremento>) :
   <comando>;
   . . .
   <comando>;
endfor;

As três expressões que ficam entre parênteses têm as seguintes finalidades:

Inicialização: comando ou sequencia de comandos a serem realizados antes do inicio do laço. Serve para inicializar variáveis.
Condição: Expressão booleana que define se os comandos que estão dentro do laço serão executados ou não. Enquanto a expressão for verdadeira (valor diferente de zero) os comandos serão executados.
Incremento: Comando executado ao final de cada execução do laço.
Um comando for funciona de maneira semelhante a um while escrito da seguinte forma:

<inicializacao>
while (<condicao>) {
comandos
...
<incremento>
}

Quebra de fluxo

Break
O comando break pode ser utilizado em laços de do, for e while, além do uso já visto no comando switch. Ao encontrar um break dentro de um desses laços, o interpretador PHP para imediatamente a execução do laço, seguindo normalmente o fluxo do script.
while ($x > 0) {
...
if ($x == 20) {
    echo "erro! x = 20";
    break;
...
}

No trecho de código acima, o laço while tem uma condição para seu término normal ($x <= 0), mas foi utilizado o break para o caso de um término não previsto no início do laço. Assim o interpretador seguirá para o comando seguinte ao laço.

Continue

O comando continue também deve ser utilizado no interior de laços, e funciona de maneira semelhante ao break, com a diferença que o fluxo ao invés de sair do laço volta para o início dele. Vejamos o exemplo:

for ($i = 0; $i < 100; $i++) {
if ($i % 2) continue;
echo " $i ";
}

O exemplo acima é uma maneira ineficiente de imprimir os números pares entre 0 e 99. O que o laço faz é testar se o resto da divisão entre o número e 2 é 0. Se for diferente de zero (valor lógico true) o interpretador encontrará um continue, que faz com que os comandos seguintes do interior do laço sejam ignorados, seguindo para a próxima iteração.

8. Funções

Definindo funções

A sintaxe básica para definir uma função é:

function nome_da_função([arg1, arg2, arg3]) {
        Comandos;
        ... ;
        [return <valor de retorno>];
}

Qualquer código PHP válido pode estar contido no interior de uma função. Como a checagem de tipos em PHP é dinâmica, o tipo de retorno não deve ser declarado, sendo necessário que o programador esteja atento para que a função retorne o tipo desejado. É recomendável que esteja tudo bem documentado para facilitar a leitura e compreensão do código. Para efeito de documentação, utiliza-se o seguinte formato de declaração de função:

tipo function nome_da_funcao(tipo arg1, tipo arg2, ...);

Este formato só deve ser utilizado na documentação do script, pois o PHP não aceita a declaração de tipos. Isso significa que em muitos casos o programador deve estar atento ao tipos dos valores passados como parâmetros, pois se não for passado o tipo esperado não é emitido nenhum alerta pelo interpretador PHP, já que este não testa os tipos.

Valor de retorno

Toda função pode opcionalmente retornar um valor, ou simplesmente executar os comandos e não retornar valor algum.
Não é possível que uma função retorne mais de um valor, mas é permitido fazer com que uma função retorne um valor composto, como listas ou arrays.

Argumentos

É possível passar argumentos para uma função. Eles devem ser declarados logo após o nome da função, entre parênteses, e tornam-se variáveis pertencentes ao escopo local da função. A declaração do tipo de cada argumento também é utilizada apenas para efeito de documentação.

Exemplo:

function imprime($texto){
   echo $texto;
}

imprime("teste de funções");

Passagem de parâmetros por referência

Normalmente, a passagem de parâmetros em PHP é feita por valor, ou seja, se o conteúdo da variável for alterado, essa alteração não afeta a variável original.

Exemplo:

function mais5($numero) {
   $numero += 5;
}

$a = 3;
mais5($a); //$a continua valendo 3

No exemplo acima, como a passagem de parâmetros é por valor, a função mais5 é inútil, já que após a execução sair da função o valor anterior da variável é recuperado. Se a passagem de valor fosse feita por referência, a variável $a teria 8 como valor. O que ocorre normalmente é que ao ser chamada uma função, o interpretador salva todo o escopo atual, ou seja, os conteúdos das variáveis. Se uma dessas variáveis for passada como parâmetro, seu conteúdo fica preservado, pois a função irá trabalhar na verdade com uma cópia da variável. Porém, se a passagem de parâmetros for feita por referência, toda alteração que a função realizar no valor passado como parâmetro afetará a variável que o contém.
Há duas maneiras de fazer com que uma função tenha parâmetros passados por referência: indicando isso na declaração da função, o que faz com que a pasagem de parâmetros sempre seja assim; e também na própria chamada da função. Nos dois casos utiliza-se o modificador "&". Vejamos um exemplo que ilustra os dois casos:

function mais5(&$num1, $num2) {
   $num1 += 5;
   $num2 += 5;
}

$a = $b = 1;
mais5($a, $b); /* Neste caso, só $num1 terá seu valor alterado, pois a passagem por referência está definida na declaração da função. */

mais5($a, &$b); /* Aqui as duas variáveis terão seus valores alterados. */

Argumentos com valores pré-definidos (default)

Em PHP é possível ter valores default para argumentos de funções, ou seja, valores que serão assumidos em caso de nada ser passado no lugar do argumento. Quando algum parâmetro é declarado desta maneira, a passagem do mesmo na chamada da função torna-se opcional.

function teste($vivas = "testando") {
   echo $vivas;
}

teste(); // imprime "testando"
teste("outro teste"); // imprime "outro teste"

É bom lembrar que quando a função tem mais de um parâmetro, o que tem valor default deve ser declarado por último:

function teste($figura = circulo, $cor) {
echo "a figura é um ", $figura, " de cor " $cor;
}

teste(azul);
/* A função não vai funcionar da maneira esperada, ocorrendo um erro no interpretador. A declaração correta é: */

function teste2($cor, $figura = circulo) {
echo "a figura é um ", $figura, " de cor " $cor;
}

teste2(azul);

/* Aqui a funcao funciona da maneira esperada, ou seja, imprime o texto: "a figura é um círculo de cor azul" */

Contexto
O contexto é o conjunto de variáveis e seus respectivos valores num determinado ponto do programa. Na chamada de uma função, ao iniciar a execução do bloco que contém a implementação da mesma é criado um novo contexto, contendo as variáveis declaradas dentro do bloco, ou seja, todas as variáveis utilizadas dentro daquele bloco serão eliminadas ao término da execução da função.
Escopo
O escopo de uma variável em PHP define a porção do programa onde ela pode ser utilizada. Na maioria dos casos todas as variáveis têm escopo global. Entretanto, em funções definidas pelo usuário um escopo local é criado. Uma variável de escopo global não pode ser utilizada no interior de uma função sem que haja uma declaração.

Exemplo:
$vivas = "Testando";

function Teste() {
echo $vivas;
}

Teste();

O trecho acima não produzirá saída alguma, pois a variável $vivas é de escopo global, e não pode ser referida num escopo local, mesmo que não haja outra com nome igual que cubra a sua visibilidade. Para que o script funcione da forma desejada, a variável global a ser utilizada deve ser declarada.

Exemplo:
$vivas = "Testando";

function Teste() {
global $vivas;
echo $vivas;
}

Teste();

Uma declaração "global" pode conter várias variáveis, separadas por vírgulas. Uma outra maneira de acessar variáveis de escopo global dentro de uma função é utilizando um array pré-definido pelo PHP cujo nome é $GLOBALS. O índice para a variável referida é o proprio nome da variável, sem o caracter $. O exemplo acima e o abaixo produzem o mesmo resultado:

Exemplo:
$vivas = "Testando";

function Teste() {
echo $GLOBALS["vivas"]; // imprime $vivas
echo $vivas; // não imprime nada
}

Teste();

9. Variáveis

O modificador static

Uma variável estática é visível num escopo local, mas ela é inicializada apenas uma vez e seu valor não é perdido quando a execução do script deixa esse escopo. Veja o seguinte exemplo:

function Teste() {
$a = 0;
echo $a;
$a++;
}

O último comando da função é inútil, pois assim que for encerrada a execução da função a variável $a perde seu valor. Já no exemplo seguinte, a cada chamada da função a variável $a terá seu valor impresso e será incrementada:

function Teste() {
static $a = 0;
echo $a;
$a++;
}

O modificador static é muito utilizado em funções recursivas, já que o valor de algumas variáveis precisa ser mantido. Ele funciona da seguinte forma: O valor das variáveis declaradas como estáticas é mantido ao terminar a execução da função. Na próxima execução da função, ao encontrar novamente a declaração com static, o valor da variável é recuperado.
Em outras palavras, uma variável declarada como static tem o mesmo "tempo de vida" que uma variável global, porém sua visibilidade é restrita ao escopo local em que foi declarada e só é recuperada após a declaração.
Exemplo:
function Teste() {
echo "$a";
static $a = 0;
$a++;
}

O exemplo acima não produzirá saída alguma. Na primeira execução da função, a impressão ocorre antes da atribuição de um valor à função, e portanto o conteúdo de $a é nulo (string vazia). Nas execuções seguintes da função Teste() a impressão ocorre antes da recuperação do valor de $a, e portanto nesse momento seu valor ainda é nulo. Para que a função retorne algum valor o modificador static deve ser utilizado.

Variáveis Variáveis

O PHP tem um recurso conhecido como variáveis variáveis, que consiste em variáveis cujos nomes também são variáveis. Sua utilização é feita através do duplo cifrão ($$).
$a = "teste";
$$a = "Mauricio Vivas";

O exemplo acima e equivalente ao seguinte:

$a = "teste";
$teste = "Mauricio Vivas";

Variáveis enviadas pelo navegador

Para interagir com a navegação feita pelo usuário, é necessário que o PHP possa enviar e receber informações para o software de navegação. A maneira de enviar informações, como já foi visto anteriormente, geralmente é através de um comando de impressão, como o echo. Para receber informações vindas do navegador através de um link ou um formulário html o PHP utiliza as informações enviadas através da URL. Por exemplo: se seu script php está localizado em "http://localhost/teste.php3" e você o chama com a url "http://localhost/teste.php3?vivas=teste", automaticamente o PHP criará uma variável com o nome $vivas contendo a string "teste". Note que o conteúdo da variável está no formato urlencode. Os formulários html já enviam informações automaticamente nesse formato, e o PHP decodifica sem necessitar de tratamento pelo programador.

URLencode

O formato urlencode é obtido substituindo os espaços pelo caracter "+" e todos os outros caracteres não alfa-numéricos (com exceção de "_") pelo caracter "%" seguido do código ASCII em hexadecimal.

Por exemplo: o texto "Testando 1 2 3 !!" em urlencode fica "Testando+1+2+3+%21%21"

O PHP possui duas funções para tratar com texto em urlencode. Seguem suas sintaxes:

string urlencode(string texto);
string urldecode(string texto);

Essas funções servem respectivamente para codificar ou decodificar um texto passado como argumento. Para entender melhor o que é um argumento e como funciona uma função, leia o tópico "funções".

Variáveis de ambiente

O PHP possui diversas variáveis de ambiente, como a $PHP_SELF, por exemplo, que contém o nome e o path do próprio arquivo. Algumas outras contém informações sobre o navegador do usuário, o servidor http, a versão do PHP e diversas informações. Para ter uma listagem de todas as variáveis e constantes de ambiente e seus respectivos conteúdos, deve-se utilizar a função phpinfo().

Verificando o tipo de uma variável
Por causa da tipagem dinâmica utilizada pelo PHP, nem sempre é possível saber qual o tipo de uma variável em determinado instantese não contar com a ajuda de algumas funções que ajudam a verificar isso. A verificação pode ser feita de duas maneiras:

Função que retorna o tipo da variável

Esta função é a gettype. Sua assinatura é a seguinte:

string gettype(mixed var);

A palavra "mixed" indica que a variável var pode ser de diversos tipos.
A função gettype pode retornar as seguintes strings: "integer", "double", "string", "array", "object" e "unknown type".

Funções que testam o tipo da variável

São as funções is_int, is_integer, is_real, is_long, is_float, is_string, is_array e is_object. Todas têm o mesmo formato, seguindo modelo da assinatura a seguir:

int is_integer(mixed var);

Todas essas funções retornam true se a variável for daquele tipo, e false em caso contrário.

Destruindo uma variável

É possível desalocar uma variável se ela não for usada posteriormente através da função unset, que tem a seguinte assinatura:

int unset(mixed var);

A função destrói a variável, ou seja, libera a memória ocupada por ela, fazendo com que ela deixe de existir. Se mais na frente for feita uma chamada á variável, será criada uma nova variável de mesmo nome e de conteúdo vazio, a não ser que a chamada seja pela função isset. Se a operação for bem sucedida, retorna true.

Verificando se uma variável possui um valor

Existem dois tipos de teste que podem ser feitos para verificar se uma variável está setada: com a função isset e com a função empty.
A função isset

Possui o seguinte protótipo:

int isset(mixed var);

E retorna true se a variável estiver setada (ainda que com uma string vazia ou o valor zero), e false em caso contrário.

A função empty

Possui a seguinte assinatura:

int empty(mixed var);

E retorna true se a variável não contiver um valor (não estiver setada) ou possuir valor 0 (zero) ou uma string vazia. Caso contrário, retorna false.

10. Classes e Objetos

Classe
Uma classe é um conjunto de variáveis e funções relacionadas a essas variáveis. Uma vantagem da utilização é poder usufruir do recurso de encapsulamento de informação. Com o encapsulamento o usuário de uma classe não precisa saber como ela é implementada, bastando para a utilização conhecer a interface, ou seja, as funções disponíveis. Uma classe é um tipo, e portanto não pode ser atribuída a uma variável. Para definir uma classe, deve-se utilizar a seguinte sintaxe:

class Nome_da_classe {
   var $variavel1;
   var $variavel2;
   function funcao1 ($parametro) {
    /* === corpo da função === */
   }
}
Objeto
Como foi dito anteriormente, classes são tipos, e não podem ser atribuídas a variáveis. Variáveis do tipo de uma classe são chamadas de objetos, e devem ser criadas utilizando o operador new, seguindo o exemplo abaixo:

$variavel = new $nome_da_classe;

Para utilizar as funções definidas na classe, deve ser utilizado o operador "->", como no exemplo:
$variavel->funcao1(

A variável $this
Na definição de uma classe, pode-se utilizar a variável $this, que é o próprio objeto. Assim, quando uma classe é instanciada em um objeto, e uma função desse objeto na definição da classe utiliza a variável $this, essa variável significa o objeto que estamos utilizando.

Como exemplo da utilização de classes e objetos, podemos utilizar a classe conta, que define uma conta bancária bastante simples, com funções para ver saldo e fazer um crédito.

class conta {
   var $saldo;
   function saldo() {
     return $this->saldo;
   }
   function credito($valor) {
     $this->saldo += $valor;
   }
}

$minhaconta = new conta;
$minhaconta->saldo();    // a variavel interna não foi
// inicializada, e não contém
// valor algum
$minhaconta->credito(50);
$minhaconta->saldo(); // retorna 50

SubClasses
Uma classe pode ser uma extensão de outra. Isso significa que ela herdará todas as variáveis e funções da outra classe, e ainda terá as que forem adicionadas pelo programador. Em PHP não é permitido utilizar herança múltipla, ou seja, uma classe pode ser extensão de apenas uma outra.Para criar uma classe extendida, ou derivada de outra, deve ser utilizada a palavra reservada extends, como pode ser visto no exemplo seguinte:

class novaconta extends conta {
var $numero;
function numero() {
     return $this->numero;
}
}

A classe acima é derivada da classe conta, tendo as mesmas funções e variáveis, com a adição da variável $numero e a função numero().
Construtores
Um construtor é uma função definida na classe que é automaticamente chamada no momento em que a classe é instanciada (através do operador new). O construtor deve ter o mesmo nome que a classe a que pertence. Veja o exemplo:

class conta {
   var $saldo;

   function conta () {
     $this.saldo = 0;
   }

   function saldo() {
     return $this->saldo;
   }
   function credito($valor) {
     $this->saldo += $valor;
   }
}

Podemos perceber que a classe conta agora possui um construtor, que inicializa a variável $saldo com o valor 0.
Um construtor pode conter argumentos, que são opcionais, o que torna esta ferramenta mais poderosa. No exemplo acima, o construtor da classe conta pode receber como argumento um valor, que seria o valor inicial da conta.
Vale observar que para classes derivadas, o construtor da classe pai não é automaticamente herdado quando o construtor da classe derivada é chamado.

12. Conclusões

A realização deste Projeto Supervisionado possibilitou o estudo da linguagem PHP, que se mostrou uma ferramenta poderosa e simples de utilizar na construção de sites para a World Wide Web dinâmicos, possibilitando uma maior interação com o usuário e a armazenagem das informações em Bancos de Dados.
Após a conclusão da aplicação, tornou-se claro que a combinação de scripts server-side, como é o PHP, com scripts client-side, como JavaScript, por exemplo, possibilita um maior aproveitamento dos recursos disponíveis para criar páginas dinâmicas, e no processo de criação deve-se ponderar bastante para concluir qual dos dois tipos de scripts deve ser utilizado para determinado fim.
Entre as linguagens de script server-side, PHP surgiu como uma ótima opção, por diversos motivos: o custo de aquisição, que não existe; a portabilidade, permitindo que uma aplicação seja desenvolvida em uma plataforma para ser executada em outra; a simplicidade, já que os scripts ficam no próprio código html, e possuem uma sintaxe bastante simples; a possibilidade de trabalhar com diversos bancos de dados e servidores http, além do grande número de funções pré-definidas, entre outras coisas.
Por esses e outros motivos, é possível afirmar que o estudo sobre PHP foi bastante enriquecedor, por ter produzido uma documentação em português para a linguagem e ter motivado o aluno a continuar se dedicando ao tema.

13. Bibliografia e Referências

A pesquisa foi baseada no manual de PHP, disponível em www.php.net, e em diversos tutoriais disponíveis no site www.phpbuilder.com. Esses dois endereços contém uma vasta documentação sobre a linguagem, além de endereços para listas de discussão, onde pode-se solicitar ajuda de programadores mais experientes.
Uma boa referência em português é a lista "PHP para quem fala Português", que pode ser assinada no endereço www.egroups.com/group/php-pt/.
Em inglês, além dos endereços citados acima, uma boa fonte é o site PHPWizard, que pode ser encontrado em www.phpwizard.net.

APÊNDICE 01 - Funções para tratamento de strings

Funções relacionadas a HTML
htmlspecialchars
string htmlspecialchars(string str);

Retorna a string fornecida, substituindo os seguintes caracteres:
"    & para '&'
"    " para '"'
"    < para '<'
"    > para '>'

htmlentities
string htmlentities(string str);

Funciona de maneira semelhante ao comando anterior, mas de maneira mais completa, pois converte todos os caracteres da string que possuem uma representação especial em html, como por exemplo:
"    º para 'º'
"    ª para 'ª'
"    á para 'á'
"    ç para 'ç'

nl2br
string nl2br(string str);

Retorna a string fornecida substituindo todas as quebras de linha ("\n") por quebras de linhas em html ("<br>").

Exemplo:
echo nl2br("Mauricio\nVivas\n");

Imprime:
Maurício<br>Vivas<br>

get_meta_tags
array get_meta_tags(string arquivo);

Abre um arquivo html e percorre o cabeçalho em busca de "meta" tags, retornando num array todos os valores encontrados.

Exemplo:
No arquivo teste.html temos:
...
<head>
<meta name="author" content="jose">
<meta name="tags" content="php3 documentation">
...
</head>
...

a execução da função:

get_meta_tags("teste.html");

retorna o array:

array("author"=>"jose","tags"=>"php3 documentation");

strip_tags
string strip_tags(string str);

Retorna a string fornecida, retirando todas as tags html e/ou PHP encontradas.
Exemplo:
strip_tags('<a href="teste1.php3">testando</a><br>');

Retorna a string "testando"

urlencode
string urlencode(string str);

Retorna a string fornecida, convertida para o formato urlencode. Esta função é útil para passar variáveis para uma próxima página.

urldecode
string urldecode(string str);

Funciona de maneira inversa a urlencode, desta vez decodificando a string fornecida do formato urlencode para texto normal.

Funções relacionadas a arrays

Implode e join
string implode(string separador, array partes);
string join(string separador, array partes);

As duas funções são idênticas. Retornam uma string contendo todos os elementos do array fornecido separados pela string também fornecida.

Exemplo:
$partes = array("a", "casa número", 13, "é azul");
$inteiro = join(" ",$partes);

$inteiro passa a conter a string:
"a casa número 13 é azul"

split
array split(string padrao, string str, int [limite]);

Retorna um array contendo partes da string fornecida separadas pelo padrão fornecido, podendo limitar o número de elementos do array.

Exemplo:
$data = "11/14/1975";
$data_array = split("/",$data);

O código acima faz com que a variável $data_array receba o valor:
array(11,14,1975);

explode
array explode(string padrao, string str);

Funciona de maneira bastante semelhante à função split, com a diferença que não é possível estabelecer um limite para o número de elementos do array.

Comparações entre strings
similar_text
int similar_text(string str1, string str2, double [porcentagem]);

Compara as duas strings fornecidas e retorna o número de caracteres coincidentes. Opcionalmente pode ser fornecida uma variável, passada por referência (ver tópico sobre funções), que receberá o valor percentual de igualdade entre as strings. Esta função é case sensitive, ou seja, maiúsculas e minúsculas são tratadas como diferentes.

Exemplo:

$num = similar_text("teste", "testando",&$porc);

As variáveis passam a ter os seguintes valores:

$num == 4; $porc == 61.538461538462

strcasecmp
int strcasecmp(string str1, string str2);

Compara as duas strings e retorna 0 (zero) se forem iguais, um valor maior que zero se str1 > str2, e um valor menor que zero se str1 < str2. Esta função é case insensitive, ou seja, maiúsculas e minúsculas são tratadas como iguais.

strcmp
int strcasecmp(string str1, string str2);

Funciona de maneira semelhante à função strcasecmp, com a diferença que esta é case sensitive, ou seja, maiúsculas e minúsculas são tratadas como diferentes.

strstr
string strstr(string str1, string str2);
string strchr(string str1, string str2);

As duas funções são idênticas. Procura a primeira ocorrência de str2 em str1. Se não encontrar, retorna uma string vazia, e se encontrar retorna todos os caracteres de str1 a partir desse ponto.

Exemplo:

strstr("Mauricio Vivas", "Viv"); // retorna "Vivas"

stristr
string strstr(string str1, string str2);

Funciona de maneira semelhante à função strstr, com a diferença que esta é case insensitive, ou seja, maiúsculas e minúsculas são tratadas como iguais.

strpos
int strpos(string str1, string str2, int [offset] );

Retorna a posição da primeira ocorrência de str2 em str1, ou zero se não houver. O parâmetro opcional offset determina a partir de qual caracter de str1 será efetuada a busca. Mesmo utilizando o offset, o valor de retorno é referente ao início de str1.

strrpos
int strrpos(string haystack, char needle);

Retorna a posição da última ocorrência de str2 em str1, ou zero se não houver.

Funções para edição de strings

chop
string chop(string str);

Retira espaços e linhas em branco do final da string fornecida.

Exemplo:
chop("   Teste      \n \n "); // retorna "   Teste"

ltrim
string ltrim(string str);

Retira espaços e linhas em branco do final da string fornecida.

Exemplo:
ltrim("   Teste \n \n "); // retorna "Teste \n \n"

trim
string trim(string str);

Retira espaços e linhas em branco do início e do final da string fornecida.

Exemplo:
trim("   Teste \n \n "); // retorna "Teste"

strrev
string strrev(string str);

Retorna a string fornecida invertida.

Exemplo:

strrev("Teste"); // retorna "etseT"

strtolower
string strtolower(string str);

Retorna a string fornecida com todas as letras minúsculas.

Exemplo:

strtolower("Teste"); // retorna "teste"

strtoupper
string strtoupper(string str);

Retorna a string fornecida com todas as letras maiúsculas.

Exemplo:

strtolower("Teste"); // retorna "TESTE"

ucfirst
string ucfirst(string str);

Retorna a string fornecida com o primeiro caracter convertido para letra maiúscula.

Exemplo:

ucfirst("teste de funcao"); // retorna "Teste de funcao"

ucwords
string ucwords(string str);

Retorna a string fornecida com todas as palavras iniciadas por letras maiúsculas.

Exemplo:

ucwords("teste de funcao"); // retorna "Teste De Funcao"

str_replace
string str_replace(string str1, string str2, string str3);

Altera todas as ocorrências de str1 em str3 pela string str2.

Funções diversas

chr
string chr(int ascii);

Retorna o caracter correspondente ao código ASCII fornecido.

ord
int ord(string string);

Retorna o código ASCII correspontente ao caracter fornecido.

echo
echo(string arg1, string [argn]... );

Imprime os argumentos fornecidos.

print
print(string arg);

Imprime o argumento fornecido.
strlen
int strlen(string str);

Retorna o tamanho da string fornecida.

APÊNDICE 02 - Funções para tratamento de arrays

Funções Genéricas

Array
array array(...);

É a função que cria um array a partir dos parâmetros forncidos. É possível fornecer o índice de cada elemento. Esse índice pode ser um valor de qualquer tipo, e não apenas de inteiro. Se o índice não for fornecido o PHP atribui um valor inteiro sequencial, a partir do 0 ou do último índice inteiro explicitado. Vejamos alguns exemplos:

Exemplo 1
$teste = array("um", "dois","tr"=>"tres",5=>"quatro","cinco");

Temos o seguinte mapeamento:
0 => "um" (0 é o primeiro índice, se não houver um explicito)
1 => "dois" (o inteiro seguinte)
"tr" => "tres"
5 => "quatro" (valor explicitado)
6 => "cinco" (o inteiro seguinte ao último atribuído, e não o próximo valor, que seria 2)

Exemplo 2
$teste = array("um", 6=>"dois","tr"=>"tres",5=>"quatro","cinco");

Temos o seguinte mapeamento:
0 => "um"
6 => "dois"
"tr" => tres
5 => "quatro" (seria 7, se não fosse explicitado)
7 => "cinco" (seria 6, se não estivesse ocupado)

Em geral, não é recomendável utilizar arrays com vários tipos de índices, já que isso pode confundir o programador. No caso de realmente haver a necessidade de utilizar esse recurso, deve-se ter bastante atenção ao manipular os índices do array.

range
array range(int minimo, int maximo);

A função range cria um array cujos elementos são os inteiros pertencentes ao intervalo fornecido, inclusive. Se o valor do primeiro parâmetro for maior do que o do segundo, a função retorna false (valor vazio).

shuffle
void shuffle(array &arr);

Esta função "embaralha" o array, ou seja, troca as posições dos elementos aleatoriamente e não retorna valor algum.

sizeof
int sizeof(array arr);

Retorna um valor inteiro contendo o número de elementos de um array. Se for utilizada com uma variável cujo valor não é do tipo array, retorna 1. Se a variável não estiver setada ou for um array vazio, retorna 0.

Funções de "navegação"
Toda variável do tipo array possui um ponteiro interno indicando o próximo elemento a ser acessado no caso de não ser especificado um índice. As funções seguintes servem para modificar esse ponteiro, permitindo assim percorrer um array para verificar seu conteúdo (chaves e elementos).

reset
mixed reset(array arr);

Seta o ponteiro interno para o primeiro elemento do array, e retorna o conteúdo desse elemento.
end
mixed end(array arr);

Seta o ponteiro interno para o último elemento do array, e retorna o conteúdo desse elemento.

next
mixed next(array arr);

Seta o ponteiro interno para o próximo elemento do array, e retorna o conteúdo desse elemento.
Obs.: esta não é uma boa função para determinar se um elemento é o último do array, pois pode retornar false tanto no final do array como no caso de haver um elemento vazio.

prev
mixed prev(array arr);

Seta o ponteiro interno para o elemento anterior do array, e retorna o conteúdo desse elemento. Funciona de maneira inversa a next.

pos
mixed pos(array arr);

Retorna o conteúdo do elemento atual do array, indicado pelo ponteiro interno.

key
mixed key(array arr);

Funciona de maneira bastante semelhante a pos, mas ao invés de retornar o elemento atual indicado pelo ponteiro interno do array, retorna seu índice.
each
array each(array arr);

Retorna um array contendo o índice e o elemento atual indicao pelo ponteiro interno do array. o valor de retorno é um array de quatro elementos, cujos índices são 0, 1, "key" e "value". Os elementos de índices 0 e "key" armazenam o índice do valor atual, e os elementos de índices 1 e "value" contém o valor do elemento atual indicado pelo ponteiro.
Esta função pode ser utilizada para percorrer todos os elementos de um array e determinar se já foi encontrado o último elemento, pois no caso de haver um elemento vazio, a função não retornará o valor false. A função each só retorna false depois q o último elemento do array foi encontrado.

Exemplo:

/*função que percorre todos os elementos de um array e imprime seus índices e valores */
function imprime_array($arr) {
reset($arr);
while (list($chave,$valor) = each($arr))
    echo "Chave: $chave. Valor: $valor";
}

Funções de ordenação
São funções que servem para arrumar os elementos de um array de acordo com determinados critérios. Estes critérios são: manutenção ou não da associação entre índices e elementos; ordenação por elementos ou por índices; função de comparação entre dois elementos.

sort
void sort(array &arr);

A função mais simples de ordenação de arrays. Ordena os elementos de um array em ordem crescente, sem manter os relacionamentos com os índices.

rsort
void rsort(array &arr);

Funciona de maneir ainversa à função sort. Ordena os elementos de um array em ordem decrescente, sem manter os relacionamentos com os índices.

asort
void asort(array &arr);

Tem o funcionamento bastante semelhante à função sort. Ordena os elementos de um array em ordem crescente, porém mantém os relacionamentos com os índices.

arsort
void arsort(array &arr);

Funciona de maneira inversa à função asort. Ordena os elementos de um array em ordem decrescente e mantém os relacionamentos dos elementos com os índices.

ksort
void ksort(array &arr);

Função de ordenação baseada nos índices. Ordena os elementos de um array de acordo com seus índices, em ordem crescente, mantendo os relacionamentos.

usort
void usort(array &arr, function compara);

Esta é uma função que utiliza outra função como parâmetro. Ordena os elementos de um array sem manter os relacionamentos com os índices, e utiliza para efeito de comparação uma função definida pelo usuário, que deve comparar dois elementos do array e retornar 0, 1 ou -1, de acordo com qualquer critério estabelecido pelo usuário.
uasort
void uasort(array &arr, function compara);

Esta função também utiliza outra função como parâmetro. Ordena os elementos de um array e mantém os relacionamentos com os índices, utilizando para efeito de comparação uma função definida pelo usuário, que deve comparar dois elementos do array e retornar 0, 1 ou -1, de acordo com qualquer critério estabelecido pelo usuário.

uksort
void uksort(array &arr, function compara);

Esta função ordena o array através dos índices, mantendo os relacionamentos com os elementos., e utiliza para efeito de comparação uma função definida pelo usuário, que deve comparar dois índices do array e retornar 0, 1 ou -1, de acordo com qualquer critério estabelecido pelo usuário.

curso de HTML

2010-12-02T17:23:00.000-02:00

Curso de HTML

Lição 1: Vamos começar

Nesta primeira lição apresentaremos as ferramentas necessárias à construção de um website.

O que é necessário?

É muito provável que você já tenha as ferramentas que precisa.

Você tem um "navegador". Navegador é um programa que permite visualizar e navegar por páginas

na Internet. Você está lendo está página em um navegador.

Não importa qual navegador você usa. O mais comum é o Microsoft Internet Explorer. Mais

existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.

Você já deve ter ouvido falar ou até mesmo pode já ter usado programas tais como, Microsoft

FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos

anunciam que podem - criar websites para você. Por ora, esqueça estes programas! Eles não têm

qualquer utilidade para você na tarefa de codificar seu website.

Você precisará de um simples editor de textos. Se você tem instalado o Windows, poderá usar o

Notepad, que normalmente pode ser encontrado no menu Programs em Accessories (Programas »

Acessórios):

Se você não tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou Simple

Text (Mac).

Notepad é um editor de texto básico e simples, mas excelente para codificação, porque não interfere

no que você está digitando. Com ele o controle é todo e somente seu. O problema com programas

que criam o website para você, é que eles vêm com uma série de funções pré-instaladas para você

escolher. Tudo deverá ser projetado para se encaixar nestas funções padrão. Assim, muitas vezes

não é possível criar exatamente aquilo que você planejou. Ou - mais frustante ainda - os programas

inserem modificações no código que você cria. Usando o Notepad ou qualquer editor de textos

simples você é o único responsável pelo acertos ou pelos erros do seu código.

Um navegador e o Notepad (ou editor similar) é tudo o que você precisa para acompanhar este

tutorial e construir seu website.

Preciso estar online?

Não. Você não precisa estar conectado à Internet - tanto para ler este tutorial como para construir

seus websites.

Se você quer desconetar-se enquanto lê este tutorial, você poderá imprimir ou simplesmente

desconectar-se da Internet enquanto lê a tela. Você pode construir seu website no HD do seu

computador e fazer o upload para a Internet quando terminar.

O que vem a seguir?

Passe para a próxima lição e leia sobre o HTML antes de começarmos a diversão a partir da Lição

Lição 2: O que é HTML?

Esta lição apresentará à você seu novo amigo, o HTML.

O que é HTML?

HTML é a "língua mãe" do seu navegador.

Resumindo uma longa história, HTML foi inventado em 1990 por um cientista chamado Tim

Berners-Lee. A finalidade inicial era a de tornar possível o acesso e a troca de informações e de

documentação de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se

um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar o HTML ele lançou as fundações

da Internet tal como a conhecemos atualmente.

HTML é uma linguagem que possibilita apresentar informações (documentação de pesquisas

científicas) na Internet. Aquilo que você vê quando abre uma página na Internet é a interpretação

que seu navegador faz do HTML. Para visualizar o código HTML de uma página use o menu

"View" (Ver) no topo do seu navegador e escolha a opção "Source" (Código fonte).

Para quem não conhece, o código HTML pode parecer complicado, mas este tutorial irá tornar as

coisas claras para você.

Para que devo usar o HTML?

Se você quer construir websites terá que conhecer HTML. Mesmo que você use um programa para

criar seu website, tal como o Dreamweaver, um conhecimento básico de HTML será necessário

para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notícia é que

HTML é fácil de aprender e de usar. A partir das duas próximas lições você já terá aprendido como

construir seu primeiro website.

HTML é usado para construir websites. É simples!

OK, mas o que significa H-T-M-L?

HTML é a abreviatura de "HyperText Mark-up Language" - e isto é tudo o que você precisa saber

por enquanto. Contudo, vamos detalhar isto.

• Hyper é o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caçado

por gatos - os programas de computadores rodavam linearmente: quando o programa

executava uma ação tinha que esperar a próxima linha de comando para executar a próxima

ação e assim por diante de linha em linha. Com HTML as coisas são diferentes - você pode

ir de onde estiver para onde quiser. Exemplificando: não é necessário que você tenha

visitado o site MSN.com antes de visitar o site HTML.net.

• Text é texto e não há mais nada a acresentar.

• Mark-up significa marcação e é o texto que você escreve. Você cria a marcação da mesma

forma que escreve em um editor seus cabeçalhos, marcadores, negrito, etc

• Language significa linguagem e é exatamente o que HTML é; uma linguagem. A linguagem

HTML usa muitas palavras do inglês.

Neste tutorial você aprenderá XHTML (Extensible HyperText Mark-up Language) que nada mais é

do que uma maneira mais bem estruturada de escrever HTML.

Agora que você já sabe o que é HTML (e XHTML) vamos começar aplicando eles para: construir

websites.

Lição 3: O que são tags HTML?

Você já está em condições de aprender a chave do HTML - tags.

"Tags"?

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal

de maior ">".

Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de

fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".

Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado

segundo o comando contido na tag.

Mas, como toda regra tem sua exceção, aqui no HTML a exceção é que para algumas tags a

abertura e o fechamento se dá na mesma tag. Tais tags contém comandos que não necessitam de um

conteúdo para serem processados, isto é, são tags de comandos isolados, por exemplo, um pulo de

linha é conseguido com a tag <br />.

HTML é tag - e nada mais do que tags. Aprender HTML é aprender como usar as diferentes tags.

Você pode mostrar alguns exemplos?

OK, a tag <b> informa ao navegador que todo o texto colocado entre <b> e </b> deve ser

mostrado em negrito. (O comando "b" é uma abreviação para "bold" - negrito.)

Exemplo 1:

<b>Este texto deve ser em negrito.</b>

Vai ser apresentado no navegador, como mostrado a seguir:

Este texto deve ser em negrito.

As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um

cabeçalho (h vem de "heading" - cabeçalho ), sendo <h1> o cabeçalho de primeiro nível e aquele

apresentado com o maior tamanho de texto, <h2> o cabeçalho de segundo nível e aquele

apresentado com tamanho de texto um pouco menor e <h6> o cabeçalho de sexto nível e aquele

apresentado com o menor tamanho de texto.

Exemplo 2:

<h1>Este é um título</h1>

<h2>Este é um sub título</h2>

Vai ser apresentado no navegador, como mostrado a seguir:

Este é um título

Este é um subtítulo

As tags devem ser escritas com letras maiúsculas ou

minúsculas?

Para a maioria dos navegadores é indiferente se você usa maiúscula, minúscula ou mesmo uma

mistura delas.<COMANDO>, <comando> ou <CoMaNdo> normalmente tem o mesmo efeito.

Contudo a maneira correta é usar minúsculas. Então, crie o hábito de escrever suas tags com

minúsculas.

Onde devo colocar todas estas tags?

Você deve escrever suas tags em um documento HTML. Um website é constituido por um ou mais

documentos HTML. Quando você navega na Web, você está abrindo diferentes documentos HTML.

Se você passar para a próxima lição, em dez minutos estará construindo seu primeiro website.

Lição 4: Criando seu primeiro website

Com o que você aprendeu nas lições anteriores está a alguns minutos de criar seu primeiro website.

Como?

Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um

editor de texto similar). Uma vez que você esta lendo esta página, provavelmente está com seu

navegador aberto. Agora abra outra janela do seu navegador de modo que você tenha duas janelas

na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir.

Abra também o Notepad ( Iniciar » Programas » Acessórios):

Agora, estamos prontos para começar!

O que posso fazer?

Vamos começar com algo simples. Que tal uma página que diga: "Hurrah! Esta é a minha primeira

página web." Continue e você verá como isto é simples de fazer.

HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto

qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia

com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a

aparecer.

A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML.

Isto é feito com a tag <html> (nenhuma novidade nisto). Então, antes de mais nada digite

"<html>" na primeira linha do documento, no Notepad.

Como sabemos das lições anteriores, <html> é uma tag de abertura e deve ser fechada com a tag

de fechamento quando você acabar de digitar seu documento HTML. Para termos certeza que não

iremos esquecer de fechar a tag HTML, faça isso agora mesmo, digitando "</html>" localizada a

algumas linhas abaixo, assim você irá escrever seu documento entre as tags digitadas <html> e

</html>.

A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o

documento e um "body" (corpo), que abriga o conteúdo do documento. Como HTML não seria

nada se não fosse lógico, a "cabeça" (<head> e </head>) fica em cima do "corpo" (<body> e

</body>).

Seu documento agora está como mostrado abaixo:

<html>

<head>

</head>

<body>

</body>

</html>

Notar como estruturamos o código em linhas diferentes (usar a tecla Enter para pular para

próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar). A

príncipio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação)

seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, é altamente

recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e

indentação (recuos), como mostrado no exemplo acima.

Se o seu documento está como o mostrado acima, você construiu sua primeira página web - uma

página particularmente chata e provalvelmente nada parecido com o que você sonhou fazer quando

começou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que você fez será um

template base para seus futuros documentos HTML.

Até aqui tudo bem, mas como colocar conteúdo no meu

website?

Como você já aprendeu, seu documento HTML é composto de duas partes: um head e um body. Na

seção head você escreve informações sobre a página e na seção body você coloca as

informações que constituem a página.

Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do

navegador você deverá usar a seção"head". A tag para acresentar um título é <title>:

<title>Minha primeira página web</title>

Notar que o título não aparece na página propriamente dita. Tudo que você quer que apareça na

página é conteúdo e deverá ser colocado entre as tags "body".

Conforme combinamos, queremos uma página dizendo, "Hurrah! Esta é a minha primeira página

web." Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite

na seção body o seguinte:

<p>Hurrah! Esta é a minha primeira página web.</p>

A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é -

um texto parágrafo.

Seu documento HTML agora está como mostrado a seguir:

<html>

<head>

<title>Minha primeira página web</title>

</head>

<body>

<p>Hurrah! Esta é a minha primeira página web.</p>

</body>

</html>

Pronto! Você acaba de construir seu primeiro website!

Agora basta que você salve seu trabalho no HD e depois visualize no navegador:

• No Notepad vá ao menu "Arquivo" no topo da janela e escolha a opção "Salvar como...".

• Escolha "Todos os arquivos" no box "Salvar como tipo". Isto é muito importante - caso você

não faça isto, o arquivo será salvo como texto e não como documento HTML.

• Salve seu documento com o nome "page1.htm" (a extensão ".htm" indica que se trata de um

documento HTML. A extensão ".html" dá o mesmo resultado. Eu sempre uso ".htm", mas

você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde

você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com

facilidade.

Agora vá ao seu navegador:

• No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir".

• Clique em "Procurar" no box que aparece.

• Localize o seu documento HTML e clique em "Abrir".

Você deverá ver no seu navegador: "Hurrah! Esta é a minha primeira página web." Parabéns!

Se você quer que o mundo todo veja sua página, vá direto para a Lição 14 e aprenda como fazer

upload da sua página para a Internet. Se não, tenha paciência e continue lendo. A brincadeira apenas

começou.

Lição 5: O que você já aprendeu?

Comece sempre com o template básico que construímos na lição anterior:

<html>

<head>

</head>

<body>

</body>

</html>

Coloque sempre o título do seu documento na seção head: <title>Título da sua

página</title>. Ver na figura abaixo como o título aparece no topo superior esquerdo do

navegador:

O título é muito importante porque é usado pelos mecanismos de busca (tais como o Google) para

indexar seu website como mostrado a seguir para o site CSS para Web Design:

Na seção body você escreve o conteúdo da sua página. Você conhece algumas das mais importantes

tags:

<p>É usado para parágraos.</p>

<b>Torna o texto negrito.</b>

<h1>Cabeçalho</h1>

<h2>Subtítulo</h2>

<h3>Sub-subtítulo</h3>

Lembre-se, o único caminho para aprender HTML é por ensaio e erro. Mas, não se preocupe, você

não destruirá seu computador e nem a Internet. Então, faça seus experimentos e testes - esta é a

melhor maneira de ganhar experiência.

O que significa isto?

Ninguém se tornará um bom criador de websites aprendendo os exemplos contidos neste tutorial. O

que você aprenderá neste tutorial é simplesmente o básico para criação - para se tornar um bom

desenvolvedor você deverá descobrir caminhos por si mesmo em maneiras criativas.

Então mãos à obra. Comece suas experiências com tudo que você aprendeu até agora.

O que fazer agora?

Tente criar algumas páginas. Por exemplo, construa uma página com um título, um cabeçalho,

algum texto, um subtítulo e mais algum texto. Não há nada contra fazer uma consulta no tutorial

para construir as páginas, ou seja, a "cola" é permitida. Porém, mais a frente, tente criar sem

consultar - "cola" não permitida.

Lição 6: Mais tags HTML

E aí? Você construiu algumas páginas como sugerimos na lição anterior? Não? Sim? Bem, a seguir

um exemplo:

<html>

<head>

<title>Meu website</title>

</head>

<body>

<h1>Um cabeçalho</h1>

<p>texto, texto texto, texto</p>

<h2>Subtítulo</h2>

<p>texto, texto texto, texto</p>

</body>

</html>

E agora?

Agora vamos aprender mais sete tags.

Você já sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itálico - letras

inclinadas - com a tag <i>. Já percebeu não é?, "i" vem de "italic".

Exemplo 1:

<i>Este texto deve ser itálico.</i>

Será renderizado no navegador assim:

Este texto deve ser itálico.

De modo similar você pode fazer seu texto com letra menores usando a tag <small>:

Exemplo 2:

<small>Este texto deve ser com letras em tamanho small.</small>

Será renderizado no navegador assim:

Este texto deve ser com letras em tamanho small.

Posso usar várias tags simultaneamente?

Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como

fazer isto no exemplo abaixo:

Exemplo 3:

Para escrever um texto em negrito e itálico faça como mostrado a seguir:

<b><i>Texto em negrito e itálico.</i></b>

E não assim:

<b><i>Texto em negrito e itálico.</b></i>

Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de

fechamento </b>, e o aninhamento está certo. Isto evita confusão para quem escreve o código e

para o navegador que lê o código.

Mais tags!

Como foi dito na Lição 4 existem tags que são abertas e fechadas em única tag. Estas tags são

comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um

exemplo é a tag <br /> que serve para criar uma quebra de linha:

Exemplo 4:

Um texto<br /> e mais texto em nova linha

Será renderizado no navegador assim:

Um texto

e mais texto em nova linha

Notar que a tag é escrita como se fosse uma mistura de tag de abertura e de fechamento com uma

barra "/" no final: <br />. A princípio podemos escrever também <br></br> (sem conteúdo),

mas para que complicar?

Outra tag de comando é <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal

rule" - régua horizontal ):

Exemplo 5:

<hr />

Será renderizado no navegador assim:

Exemplo 6:

<ul>

<li>Um item de lista</li>

<li>Outro item de lista</li>

</ul>

Será renderizado no navegador assim:

• Um item de lista

• Outro item de lista

Exemplo 7:

<ol>

<li>Primeiro item da lista</li>

<li>Segundo item da lista</li>

</ol>

Será renderizado no navegador assim:

1. Primeiro item da lista

2. Segundo item da lista

Uau! Isto é tudo?

Sim, por enquanto isto é tudo. Aconselhamos, novamente, a fazer seus próprios experimentos,

construindo algumas páginas usando as sete tags ensinadas nesta lição:

<i>Itálico</i>

<small>Texto tamanho small</small>

<br /> Pula linha

<hr /> Linha Horizontal

<blockquote>Indentação</blockquote>

<ul>Lista<ul>

<ol>Lista ordenada<ol>

<li>Item de lista</li>

Lição 7: Atributos

Você pode adicionar atributos às tags.

O que é atributo?

Como você deve estar lembrado, uma tag é um comando para o navegador (por exemplo, <br />

é um comando para mudar de linha). Em algumas tags você pode ser mais específico, acresentando

na tag, informações adicionais de comando. Isto é feito através dos atributos.

Exemplo 1:

<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>

Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são

declaradas as informações do atributo. As informações quando mais de uma, devem ser separadas

por ponto e vírgula, tudo conforme mostrado no exemplo acima. Adiante voltaremos a este assunto.

Como é isto?

Existem vários atributos. O primeiro que você aprenderá é o atributo style. Com o atributo style

você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo:

Exemplo 2:

<html>

<head>

</head>

</body>

</html>

O código acima renderiza uma página com cor de fundo vermelha - vá em frente! experimente você

mesmo, construa uma página vermelha. A seguir explicaremos como funcionam as cores.

Notar que algumas tags e atributos usam nomes do idioma inglês dos E.U.A. É muito importante

que você use os nomes exatamente como mostrados neste tutorial - se você mudar uma letra que

seja, o navegador não irá entender seu código. É importante também que você não se esqueça de

fechar as aspas nas informações do atributo.

Como a página ficou vermelha?

No exemplo acima nós usamos o código "#ff0000" para fazer a página na cor vermelha. Eate é o

código para a cor vermelha no sistema chamado de números hexadecimal (HEX). Cada cor é

representada por um número hexadecimal. A seguir alguns exemplos:

Branco: #ffffff

Preto: #000000 (zeros)

Vermelho: #ff0000

Azul: #0000ff

Verde: #00ff00

Amarelo: #ffff00

Um código hexadecimal para cores é formado por um sinal # seguido de seis dígitos e/ou letras.

Existe mais de 1000 códigos HEX e não é fácil decorar o código para todas as cores. Para facilitar

as coisas nós desenvolvemos uma carta com as 216 cores mais usadas na web: Carta das 216 cores

seguras para a Web.

Para algumas cores, você pode usar o nome das cores em inglês (white, black, red, blue, green e

yellow - branco, preto, vermelho, azul, verde, amarelo).

Exemplo 3:

Chega de cores. Voltemos aos atributos.

Quais tags podem usar atributos?

Atributos podem ser aplicados à maioria das tags.

Você normalmente usará atributos com mais freqüência em algumas tags, tais como a tag body e

raramente usará em outras, como por exemplo, a tag br que é um comando para pular de linha e

não precisa de nenhuma informação adicional.

Assim como existem muitas tags, também existem muitos atributos. Alguns atributos são

empregados em tags específicas enquanto outros servem para várias tags. E vice-versa: algumas

tags podem conter somente um tipo de atributo, enquanto outras podem conter vários tipos.

Isto pode parecer um pouco confuso, mas à medida que você for praticando vai constatar que tudo é

fácil e lógico, bem como vai verificar as inúmeras possibilidades que os atributos oferecem.

Este tutorial apresentou a você, os atributos.

Então, quais são as partes que constituem uma tag?

A constituição básica de uma tag é denominada elemento (por exemplo p em <p>). Assim, uma

tag é constituida de um elemento (por exemplo <p>), ou por um elemento e um ou mais atributos

(por exemplo <p style="background-color:#ff0000;">). Simples!

Lição 8: Links

Nesta lição você aprenderá como construir links entre páginas.

O que eu preciso para construir um link?

Para construir um link você usa o que tem usado até agora para codificar HTML: uma tag. Uma

simples e pequenina tag com um elemento e um atributo é suficiente para você construir links

para onde quiser. A seguir um exemplo de link para o site HTML.net:

Exemplo 1:

Será renderizado no navegador assim:

Aqui um link para HTML.net

O elemento a refere-se a "anchor" - âncora . O atribuito href é abreviação para "hypertext

reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um

endereço na Internet ou um arquivo.

No exemplo acima o atributo href tem o valor "http://www.html.net", que é o endereço completo

do site HTML.net e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve

sempre ser incluido nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no

navegador como link. Lembre-se de fechar a tag com um </a>.

Como são os links entre minhas próprias páginas?

Se você quer construir links entre páginas de um mesmo website você não precisa escrever o

endereço completo de cada página (URL). Por exemplo, se você tem duas páginas (vamos chamálas

de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretório você constrói um link

de uma para a outra usando somente o nome do arquivo no link. Nestas condições, um link da

página1.htm para a pagina2.htm é como mostrado abaixo:

Exemplo 2:

<a href="page2.htm">Aqui um link para a pagina 2</a>

Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado

abaixo:

Exemplo 3:

<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>

Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a seguir:

Exemplo 4:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>

"../" aponta para o diretório a um nível acima do arquivo onde foi feito o link. Seguindo o mesmo

princípio você pode apontar para dois (ou mais) níveis acima, escrevendo "../../".

Você entendeu? Como alternativa você pode usar sempre o endereço completo do arquivo (URL).

Como são os links dentro de uma mesma página?

Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou

índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o

atributo id e o símbolo "#".

Use o atributo id para marcar o elemento que é o destino do link. Por exemplo:

<h1 id="heading1">Cabeçalho 1</h1>

Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link.

O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser

seguido pelo valor atribuido a id para onde o link vai. Por exemplo:

<a href="#heading1">Link para o cabeçalho 1</a>

Tudo fica claro com um exemplo:

Exemplo 5:

<html>

<head>

</head>

<body>

<p><a href="#heading1">Link para cabeçalho 1</a></p>

<p><a href="#heading2">Link para cabeçalho 2</a></p>

<h1 id="heading1">Cabeçalho 1</h1>

<p>Texto texto texto texto</p>

<h1 id="heading2">Cabeçalho 2</h1>

<p>Texto texto texto texto</p>

</body>

</html>

Será renderizado no navegador assim (clique nos dois links):

Link para cabeçalho 1

Link para cabeçalho 2

Cabeçalho 1

Texto texto texto texto

Cabeçalho 2

Texto texto texto texto

(Nota: O nome de um atributo id deve começar com uma letra)

Posso criar link para mais alguma coisa?

Você pode criar link para um endereço de e-mail. Isto é feito de modo semelhante aos links para

documentos.

Exemplo 6:

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>

Será renderizado no navegador assim:

Enviar e-mail para nobody em HTML.net

A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo

endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o

endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o

usuário tiver um programa de e-mail instalado na sua máquina. Faça uma experiência com este tipo

de link clicando no exemplo acima.

Existem outros atributos que eu deva conhecer?

Par criar links você sempre usa o atributo href. Adicionalmente você pode usar um title

(título) para seu link:

Exemplo 7:

<a href="http://www.html.net/" title="Visite HTML.net e aprenda

HTML">HTML.net</a>

Será renderizado no navegador assim:

HTML.net

O atributo title é usado para fornecer uma breve descrição do link. Se você - sem clicar no link -

colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda

HTML".

Lição 9: Imagens

O que você acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no

centro da sua página?

Ops, isto soa como um desafio...

Talvez, mas é muito fácil de fazer. Tudo o que você precisa é da nossa já conhecida tag:

Exemplo 1:

Será renderizado no navegador assim:

O que você tem a fazer é dizer ao navegador que quer inserir uma imagem (img) e depois informar

onde a imagem esta localizada (src, abreviatura para "source" - local de armazenagem ).

Notar que a tag imagem é do tipo comando isolado, isto é, uma só tag de abertuta e fechamento.

Semelhante a tag <br /> que não precisa de um texto inserido nela.

"tim.jpg" é o nome do arquivo da imagem que você quer inserir na página. ".jpg" é a extensão do

tipo de imagem. Tal como a extensão ".htm" para arquivos de documentos HTML, ".jpg" informa

ao navegador que o arquivo é uma imagem. São três os tipos de imagens que você pode inserir na

sua página:

• GIF (Graphics Interchange Format)

• JPG / JPEG (Joint Photographic Experts Group)

• PNG (Portable Network Graphics)

Em geral imagens GIF são melhores para gráficos e desenhos e imagens JPEG são melhores

para fotografia. Existem duas razões para isto: primeiro, imagens GIF são constituidas por 256

cores, e imagens JPEG por milhões de cores, segundo, imagens GIF são melhores otimizadas para

imagens simples ao passo que imagens JPEG são melhores otimizadas para imagens complexas.

Quanto melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é

carregada no navegador. Como você deve saber por experiência própria, páginas

desnecessariamente "pesadas" para carregar são frustantes para o usuário.

Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o

formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF).

O formato PNG é em vários aspectos melhor que os formatos JPEG e GIF: milhões de cores e

efetiva compressão.

Onde consigo minhas imagens?

Para criar suas próprias imagens você precisa de um programa de edição de imagens. Um

programa de edição de imagens é a ferramenta essencial para criação de websites com grande

impacto visual.

Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro

sistema operacional. Assim, você deve considerar a aquisição do Paint Shop Pro, do PhotoShop ou

do Macromedia Fireworks, que são os três melhores editores de imagens atualmente existentes no

mercado.

Contudo, como já dissemos, não há necessidade de comprar um programa caro para acompanhar

este tutorial. Por enquanto, você poderá fazer o download de um exelente editor de imagens

chamado Irfan View que é freeware, isto é, não custa nada.

Ou você pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o

download de imagens da Internet, cuidado para não violar direitos autorais de terceiros. A seguir

mostro como fazer o download de uma imagem existente na Internet:

1. Clique com o botão direito do mouse na imagem da Internet.

2. No menu que aparece escolha a opção "Salvar imagem como...".

3. Na janela que se abre, escolha o lugar no seu computador para salvar e clique "Salvar".

Faça isto com a imagem abaixo e salve no seu computador no mesmo local onde está localizado

seus documentos HTML. (Notar que deverá ser salvo o arquivo com formato PNG: logo.png):

Agora você pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que

você criou neste tutorial.

Isto é tudo o que eu preciso saber sobre imagens?

Existem mais algumas coisinhas que você precisa saber.

Primeiro, você pode inserir imagens que estão localizadas em outros diretórios ou até mesmo em

outros websites:

Exemplo 2:

Exemplo 3:

Segundo, imagens podem ser links:

Exemplo 4:

Será renderizado no navegador assim: (clique na imagem):

Existem outros atributos que eu deva conhecer?

Você sempre terá que usar o atributo src, que diz ao navegador onde a imagem está localizada.

Além dele existem alguns outros atributos que podem ser bastante úteis quando você insere imagens

em uma página.

O atributo alt é usado para fornecer uma descrição textual alternativa da imagem caso por alguma

razão a imagem não seja renderizada para o usuário. Isto é particularmente importante para usuários

com restrições visuais ou quando a imagem é carregada muito lentamente. Em conseqüência,

sempre use o atributo alt:

Exemplo 5:

Alguns navegadores mostram uma caixa pop-up com o conteúdo do atributo alt quando o usuário

passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt é a de

fornecer uma alternativa textual para imagem. O atributo alt não deve ser usado para criar

mensagens pop-up uma vez que os leitores de tela passarão uma mensagem que não descreve a

imagem para os usuários com restrições visuais.

O atributo title pode ser usado para fornecer uma curta descrição da imagem:

Exemplo 6:

Será renderizado no navegador assim:

Coloque o ponteiro do mouse sobre a imagem, sem clicar e aparecerá uma caixa pop-up com o texto

"Aprenda HTML no site HTML.net" .

Dois outros atributos importantes são width e height:

Exemplo 7:

Será renderizado no navegador assim:

Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura

da imagem. O valor adotado para medidas é o pixel. Pixel é a unidade de medida usada para medir a

resolução da tela. (As resoluções de tela mais comuns são de 800x600 e 1024x768 pixels). Ao

contrário de centímetros, pixel é uma inidade de medida relativa que depende da resolução da tela.

Usuários com grande resolução de tela terão 25 pixels em 1 centímetro de tela enquanto aqueles

com baixa resolução de tela terão os mesmos 25 pixels em 1,5 cm de tela.

Se não forem definidos os valores para width eheight, a imagem será inserida com seu tamanho

real. Com width e height você pode alterar o tamanho da imagem:

Exemplo 8:

Será renderizado no navegador assim:

Contudo, o tempo de descarga da imagem será sempre aquele requerido como se ela tivesse suas

dimensões reais, mesmo que você diminua seu tamanho com uso destes atributos. Assim, você não

deve diminuir o tamanho das imagens com o uso dos atributos width e height. Se você precisa

diminuir a imagem diminua suas dimensões reais em um editor de imagem para tornar suas páginas

mais leves e mais rápidas.

Dito isto, acrescentamos que é sempre uma boa idéia definir os atributos width e height para

imagens, pois assim fazendo o navegador reservará o espaço para descarga da imagem previamente.

Isto acaba por permitir ao navegador, saber com antecedência (antes de descarregar as imagens)

como será o layout da página.

Por enquanto isto é tudo sobre o Tim Berners-Lee e sobre imagens.

Lição 10: Tabelas

Tabelas são usadas para apresentar "dados tabulares" , isto é, informação que deva ser

apresentada em linhas e colunas, de forma lógica.

É difícil?

Criar tabelas em HTML pode parecer complicado, mas se você ficar frio e acompanhar passo a

passo a explicação, verá que tudo é evidente - tal como acontece com tudo no HTML.

Exemplo 1:

<table>

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4

Qual a diferença entre <tr> e <td>?

Como você deve ter visto no exemplo acima, este foi o código HTML mais complicado que

escrevemos até agora. Vamos analisar isto por partes e explicar as diferentes tags:

3 tags básicas são usadas para inserir tabelas:

• <table> começa e termina uma tabela. Evidente.

• <tr> significa "table row" - linha de tabela - começa e termina e uma linha horizontal da

tabela. Também evidente.

• <td> significa "table data" - dados da tabela. começa e termina cada célula contida nas

linhas da tabela. Tudo simples e evidente.

Eis o acontece no Exemplo 1: a tabela começa com <table>, segue-se uma <tr>, que indica o

início de uma nova linha. Duas células são então inseridas na linha: <td>Célula 1</td> e

<td>Célula 2</td>. A linha termina com </tr> e uma nova linha <tr> começa imediatamente

a seguir. A nova linha também contém duas células. A tabela termina com </table>.

Para esclarecer: linhas são horizontais e colunas são verticais, ambas contendo células:

Célula 1 Célula 2

Célula 3 Célula 4

Célula 1 e Célula 2 formam uma linha. Célula 1 e Célula 3 formam uma coluna.

No exemplo acima a tabela tem duas linhas e duas colunas. Uma tabela pode conter um número

ilimitado de linhas e colunas.

Exemplo 2:

<table>

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

<tr>

<td>Célula 5</td>

<td>Célula 6</td>

<td>Célula 7</td>

<td>Célula 8</td>

</tr>

<tr>

<td>Célula 9</td>

<td>Célula 10</td>

<td>Célula 11</td>

<td>Célula 12</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2 Célula 3 Célula 4

Célula 5 Célula 6 Célula 7 Célula 8

Célula 9 Célula 10 Célula 11 Célula 12

Existem atributos?

Claro! existem atributos. Por exemplo, o atributo border que é usado para definir a espessura de

uma borda em volta da tabela:

Exemplo 3:

<tr>

<td>Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4

A espessura da borda é especificada em pixels (Ver lição 9)

Tal como fizemos com as imagens, podemos definir width - largura - em pixels, para uma tabela -

ou alternativamente em percentagem da tela:

Exemplo 4:

Este exemplo renderiza no navegador uma tabela com largura igual a 30% da largura da tela. Tente

você mesmo.

Mais atributos?

Existe uma grande quantidade de atributos para tabelas. A seguir mais dois:

• align: define o alinhamento horizontal do conteúdo da tabela, de uma linha ou de uma

célula. Por exemplo, left, centre ou right (à esquerda, no centro ou à direita).

• valign: define o alinhamento vertical do conteúdo de uma célula. Por exemplo, top, middle

ou bottom (em cima, no meio ou em baixo).

Exemplo 5:

<td align="right" valign="top">Célula 1</td>

O que posso inserir em tabelas?

Teoricamente você pode inserir qualquer coisa em uma tabela: texto, links e imagens... MAS,

tabelas destinam-se a apresentar dados tabulares (isto é, dados que por sua natureza devam ser

apresentados em linhas e colunas) então abstenha-se de colocar coisas dentro de tabela

simplesmente porque você deseja que elas estejam próximas umas às outras.

Nos primórdios da Internet - isto é, há poucos anos atrás - tabelas eram usadas como ferramenta

para construir layout. Se você quer controlar a apresentação de textos e imagens, existe uma

maneira bem mais racional (dica:CSS). Adiante veremos isto.

Agora, coloque em prática tudo que você aprendeu e crie várias tabelas de diferentes tamanhos,

usando diferentes atributos e conteúdos. Isto irá ocupar você por horas.

Lição 11: Mais tabelas

O título "Mais tabelas" pode sugerir uma lição enfadonha. Mas, veja as coisas pelo lado positivo,

depois que você se tornar um mestre em tabelas nada mais do HTML poderá desafiá-lo.

O que mais existe?

Os dois atributos colspan e rowspan são usados para criar tabelas singulares.

Colspan é a abreviação para "column span". Colspan é usada na tag <td> para indicar

quantas colunas estarão contidas em uma célula.

Exemplo 1:

<tr>

<td colspan="3">Célula 1</td>

</tr>

<tr>

<td>Célula 2</td>

<td>Célula 3</td>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1

Célula 2 Célula 3 Célula 4

Definindo colspan em "3", a célula na primeira linha conterá três colunas. Se você definir

colspan em "2", a célula conterá duas colunas e assim será necessário inserir mais uma célula na

primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha.

Exemplo 2:

<tr>

<td colspan="2">Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

<td>Célula 4</td>

<td>Célula 5</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1 Célula 2

Célula 3 Célula 4 Célula 5

Que tal rowspan?

Como você já deve ter concluido, rowspan especifica quantas linhas estarão contidas em uma

célula:

Exemplo 3:

<tr>

<td rowspan="3">Célula 1</td>

<td>Célula 2</td>

</tr>

<tr>

<td>Célula 3</td>

</tr>

<tr>

<td>Célula 4</td>

</tr>

</table>

Será renderizado no navegador assim:

Célula 1

Célula 2

Célula 3

Célula 4

No exemplo acima rowspan é definido em "3" na Célula 1. Isto especifica que uma célula deve

conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam

duas linhas independentes.

Confuso? Bem, isto na verdade não é descomplicado e você pode se perder. Assim, é sempre uma

boa idéia, desenhar a tabela em uma folha de papel antes de começar a codificação HTML.

Não está confuso? Então vá em frente e crie algumas tabela com uso de colspan e rowspan.

Lição 12: Layout (CSS)

Não seria ótimo se você pudesse dar à sua página o layout que ela merece?

Claro! mas como faço isto?

Para o layout da sua página use Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata.

Nesta lição você terá uma breve introdução às CSS. Depois você poderá aprender CSS desde o

início no nosso tutorial CSS. Assim, considere esta lição apenas um aperitivo.

CSS é a melhor metade do HTML. Codificando, não há melhor parceria: HTML é responsável

pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout).

Como mostrado na Lição 7, CSS pode ser adicionado com uso do atributo style. Por exemplo,

você pode definir o tipo e o tamanho da fonte em um parágrafo:

Exemplo 1:

<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a 20px</p>

<p style="font-family:courier;">Este parágrafo em fonte Courier</p>

<p style="font-size:20px; font-family:courier">Este parágrafo em fonte Courier e

tamanho 20px</p>

Será renderizado no navegador assim:

Este parágrafo em tamanho de fonte igual a 20px

Este parágrafo em fonte Courier

Este parágrafo em fonte Courier e tamanho 20px

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade

font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no último

parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e

vírgula.

Está parecendo que há uma grande quantidade de trabalho a

executar

Uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de

um arquivo central. Em lugar de se usar o atributo style em cada tag, você pode dizer ao

navegador como deve ser o layout de todos os textos em uma página:

Exemplo 2:

<html>

<head>

<title>Minha primeira página CSS</title>

<style type="text/css">

h1 {font-size: 30px; font-family: arial}

h2 {font-size: 15px; font-family: courier}

p {font-size: 8px; font-family: times new roman}

</style>

</head>

<body>

<h1>Minha primeira página CSS</h1>

<h2>Bem vindo à minha primeira página CSS</h2>

<p>Aqui você verá como funciona CSS</p>

</body>

</html>

No exemplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página

inteira . Para fazer isto use a tag <style type="text/css"> que informa ao navegador que

você está digitando CSS.

No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os

subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte

Times New Roman tamanho 8.

Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um

documento separado você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito

inteligente, pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer

ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora, mas você

pode aprender tudo, no futuro, em nosso tutorial CSS.

O que mais posso fazer com CSS?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, você pode adicionar

cores e fundos. A seguir alguns exemplos para você praticar:

<p style="color:green;">Texto verde</p>

<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>

Tente inserir estes códigos em algumas das suas páginas - experimente as duas formas de inserir,

tanto como mostrado acima como colocando as CSS na seção head do documento.

CSS não é nada mais do que cores e tipos de fontes?

Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configuração e a

apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.) Controlando os

diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos.

Exemplo 3:

Será renderizado no navegador assim:

Eu amo CSS

Com a propriedade float um elemento poderá "flutuar" à esquerda ou à direita. O exemplo

seguinte ilustra este princípio:

Exemplo 4:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,

sed diam nonummy nibh euismod tincidunt ut laoreet dolore

magna aliquam erat volutpat. Ut wisi enim ad minim veniam,

quis nostrud exerci tation ullamcorper suscipit

lobortis nisl ut aliquip ex ea commodo consequat...</p>

Será renderizado no navegador assim:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat

volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

No exemplo mostrado, um elemento (a imagem) flutua à esquerda e o outro

elemento (o texto) preenche o espaço deixado à direita.

Com a propriedade position, você pode posicionar um elemento em

qualquer lugar da página, com precisão:

Exemplo 5:

<img src="bill.jpg" alt="Bill Gates"

style="position:absolute;bottom:50px;right:10px;" />

No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda

direita do navegador. Você pode colocar em qualquer lugar na página. Tente você mesmo. Fácil e

legal, eh?

Legal sim. Mas, fácil?

Você não aprende CSS em 10 minutos. E como foi dito acima, nesta lição você teve apenas uma

breve introdução às CSS. No futuro aprenda mais no nosso Tutorial CSS.

Por enquanto concentre-se no HTML, e passe para a próxima lição onde você aprenderá como

publicar seu website na Internet para que o mundo todo o veja!

Erro de leitura

Lição 13: Uploading páginas

Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrá-las para o

mundo todo.

O mundo está preparado para ver suas páginas?

O mundo está preparado sim - você, em breve, estará também. Para publicar seu trabalho na

Internet, você precisa somente de espaço em um servidor e um programa FTP gratuito.

Se você costuma acessar a Internet já deve ter visto que existem vários serviços gratutitos de

hospedagem de sites. Seu endereço no servidor será alguma coisa parecida com

http://home.servidor.com/~nomedousuario. Você tem que ativar o serviço. Informe-se como fazer

isto na documentação fornecida pelo serviço de hospedagem.

Outra opção é obter um espaço gratuito de um servidor na Internet. Isto é igual a registrar uma

conta de e-mail (como por exemplo, obter um endereço de e-mail do hotmail) você pode registrarse

gratuitamente para obter um espaço em um servidor na Internet. Existem várias companhias

que oferecem este serviço gratuito - entre elas a Angelfire (clique em "Sign Up" e escolha membro

gratuito - ou faça uma busca no Google para encontrar um serviço gratuito com registro em

português) - isto é um processo bem rápido.

Para acessar o servidor você precisa conhecer o "Nome do seu servidor" (Por exemplo,

ftp.angelfire.com) e ter um nome de usuário e senha.

Isto é tudo que eu preciso?

Para acessar o servidor e publicar as páginas você precisa de um programa FTP. Você não deve ter

um programa destes ainda, mas existem vários deles na Internet para download e são gratuitos.

Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . Você pode obter o

FileZilla em filezilla.sourceforge.net.

Como eu faço o upload das páginas?

Abaixo fornecemos um exemplo de como fazer isto usando o servidor Angelfire e o programa

FileZilla. Este procedimento é mais ou menos igual para qualquer programa FTP.

Conecte-se à Internet e abra o programa FTP. Insira "Host Name" ("ftp.angelfire.com" no

"Address"), nome do usuário (em "User") e senha (em "Password") clique "Connect". Você agora

tem acesso ao servidor. Em um lado da janela do programa você verá os diretórios e arquivos do seu

computador ("Local Site"), e no outro o do servidor ("Remote Site"):

Ache os seus documentos HTML e imagens a serem publicadas (no "Local site") e transfira para o

servidor ("Remote site") simplesmente dando um clique duplo nos arquivos. Agora o mundo todo

poderá ver seu site! (Por exemplo, no endereço

http://www.angelfire.com/folk/htmlnet/pagina1.htm).

Dê a uma das páginas o nome de "index.htm" (ou "index.html") e ela será automaticamente a

página de entrada no site, ou seja, basta digitar http://www.angelfire.com/folk/htmlnet (sem

qualquer nome de arquivo) e abrirá http://www.angelfire.com/folk/htmlnet/index.htm.

Para mais adiante será uma boa idéia comprar um domínio (espaço no servidor) só para você

(www.seu-nome.com) e assim ter um nome do site bem mais curto e fácil de guardar que aqueles

fornecidos por um serviço gratuito da Internet. Você pode encontrar na Internet várias firmas que

vendem domínio. Faça uma busca do Google.

Lição 14: Web standards e validação

Nesta lição você aprenderá mais alguns conceitos teóricos do HTML.

O que mais há para conhecer sobre HTML?

HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias

maneiras. Podemos dizer que HTML tem muitos dialetos. Esta é a razão porquê alguns websites

são apresentados de formas diversas em diferentes navegadores.

Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o

HTML notadamente através do World Wide Web Consortium (W3C) fundado por Tim

Berners-Lee (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um árduo e longo

caminho.

No passado - quando você tinha que comprar um navegador - Netscape dominava o mercado de

navegadores. Àquela época as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas pelo

fato de dominar 90% do mercado a Netscape não teria - e não teve - que se preocupar muito com

normas. Pelo contrário, a Netscape inventava seus próprios elementos de marcação que não

funcionavam em outros navegadores.

Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento,

resolveu competir com a Netscape e lançou seu navegador próprio. A primeira versão do navegador

da Microsoft's, o Internet Explorer, não era melhor do que o Netscape no suporte às normas do

HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a

todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.

A partir das versões 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior

suporte às normas HTML do W3C. A Netscape não se movimentou para atualizar seu navegador e

continuou a colocar no mercado a velha e desatualizada versão 4.

O que vem a seguir é história. Nos dias atuais as normas HTML estão na sua versão 4.01 e no

XHTML. Hoje em dia é o Internet Explorer que detém quase 90% do mercado. O Internet Explorer

ainda tem seus elementos próprios, mas oferece suporte para as normas HTML do W3C. Os

navegadores Mozilla, Opera e Netscape também suportam as normas.

Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo

um website para ser visualizado em todos os navegadores - não só agora mas também no futuro.

E felizmente, tudo o que você aprendeu neste tutorial está de acordo com a mais nova versão

do HTML, que é o XHTML.

Legal! Posso anunciar?

Devido a existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o

"dialeto" do HTML e no seu caso você aprendeu XHTML. Para informar ao navegador, você usa o

Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do

documento:

Exemplo 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">

<head>

<title>Título</title>

</head>

<body>

<p>texto texto</p>

</body>

</html>

Além do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao

navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag

html, usando os atributos xmlns e lang.

xmlns é abreviação de "XML-Name-Space" e deve ter sempre o valor

http://www.w3.org/1999/xhtml. Isto é tudo o que você precisa saber. Se você tem o hábito ou

gosta de se aprofundar e conhecer coisas complicadas poderá ler mais sobre namespaces no site do

W3C.

No atributo lang você específica em que língua (aqui trata-se de linguagem humana) o documento

é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 standard . No

exemplo acima a língua definida no atributo é o português do Brasil ("pt-br").

Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo

mostrado, como um template para todos os seus futuros documentos HTML.

O DTD é importaante ainda, para a validação da página.

Validação? Porquê deveria eu fazer isto?

Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o validador gratuito

do W3C.

Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em

validator.w3.org e lá digite o endereço (a URL) da sua página, depois clique no botão validar. Se

seu HTML estiver correto, vai aparecer uma mensagem de congratulações. Se não, será apresentada

uma lista de erros, informando o quê está errado e onde. Cometa alguns erros propositais no seu

código para verificar o que acontece.

O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros

cometidos pelos desenvolvedores e consertar o código mostrando a página corretamente. Em

navegadores assim você nunca encontrará erros no próprio navegador. Já outros navegadores não

aceitam o erro e apresentam a página arruinada ou mesmo nem apresentam. O validador então ajuda

você a encontrar erros que você não tenha nem idéia de que existiam

Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os

navegadores.

provedor Wireless

2010-11-23T15:14:00.000-02:00

Montando um provedor de acesso wireless.

Como começar a montagem do provedor?

O primeiro passo só pode ser dado se tiver o link Internet, esse link pode ser adquirido de várias maneiras.

Geralmente o link é adquirido de uma operadora de telecomunicação ativa na região onde é pretendida a distribuição do sinal, o custo depende da operadora e da região, são links mais "potentes" que garantem qualidade e a velocidade de banda, e justamente por ter estas propriedades é que tem valor mais elevado.

Também pode ser usado o sinal de um ADSL ou de um CableModem, mas neste caso o sistema fica com um link "menos potente" porque que não tem garantia de banda, e com isso repassando um serviço menos profissional para seu cliente, em contra partida, o valor é bem mais acessível.

Se por acaso opte por este tipo de serviço não deve ser ofertada a venda de IPs válidos, isto quer dizer que empresas que necessitam de servidores com IP´s válidos na Internet para hospedagem de sites, VPN ou banco de dados estão fora da lista de possíveis clientes.

Se for adquirir de um provedor de internet que já possui um link grande, você deve ter uma pessoa na qual você tenha muita confiança, pois na maioria dos casos o provedor cobra um valor menor que uma operadora de telecomunicação, mas não "agüenta o tranco" e diminui a velocidade do link aos poucos sem que seja percebida, atingindo seu cliente diretamente e gerando má qualidade de serviços para seu negócio.

Para que quem quer ser profissional deve comprar um link de uma operadora de telecomunicações que seja grande e que esteja estável, apesar do custo ser maior, o serviço será de qualidade e seriedade.

É preciso ter um projeto:

Visada: é preciso saber se os pontos onde você irá atender os clientes possui visada direta, é o mesmo que dizer que os pontos devem ser visíveis e diretos para todos os pontos remotos.
Um bom local sugerido é um prédio grande ou uma torre bem alta, na verdade, um prédio é até melhor, nesse caso, os condôminos poderiam acessar internet através de cabos LAN que são baratos e assim já é vendida assinatura dos apartamentos.

Saber o número máximo de clientes: tenha certeza da média de clientes atendidos na região, um bom número de clientes para cada Access Point é de no máximo 30 clientes Wlan, ou seja, kits PCI, Kits cliente ou Ethernet Converters, e anexos à ela.
Depois de uns 30 clientes o equipamento começa a ficar lento, e começa a perder pacotes, e fica impossível trabalhar com níveis de segurança e com qualidade.
Quando o equipamento começar a ficar lento, será necessária a implementação de novos equipamentos ou novos pontos de distribuição.

Quantidade de repetidoras: para cada nova repetidora serão necessários vários novos equipamentos, mas é bom saber que em prédios ou torres próximas uma à outra possibilita a instalação de novos pontos de distribuição.
Para cada novo ponto serão necessários 2 rádios somente para enviar o sinal de um ponto ao outro, mais um equipamento para distribuir o sinal em modo Access Point.

As antenas: utilize sempre antenas direcionais de ganhos menores mas de boa qualidade, são antenas mais caras mas garantem uma uma grande redução no problema de interferências e de ruídos.
O mesmo se aplica aos amplificadores de potência, só devem ser utilizados amplificadores de potência quando não for realmente possível o enlace, em caso contrário, quanto menos amplificação melhor.

Origem dos Produtos: por novas normas da Anatel, é necessário que sejam utilizados produtos registrados e homologados, só são aceitos novos provedores com projetos de infra-estrutura e licença de funcionamento SCM, e para que isso seja possível a Anatel exige a certificação do fabricante e um projeto assinado por um engenheiro de redes ou elétrico.

Atender a prédios: se a finalidade é atender somente prédios, convém centralizar o provedor em locais onde existem vários condomínios, mas antes tenha certeza de que o local onde está sendo instalado não existe concorrência, e nunca utilize duas antenas omni no mesmo local, se utilizar duas antenas omni certamente surgirão problemas de interferência, o modo de interligação entre prédios deve ser realizado com protocolos de comunicação especiais desenvolvidos para redes externas, como o MultiLink da Samsung, TurboCell da Karlnet ou Worp da Proxim, esses são protocolos específicos para conexão em espaço aberto (outdoor) e garantem melhor desempenho e qualidade no link entre os pontos de conexão diminuindo problemas com interferências e aumentando o nível de Throughput.
É altamente recomendável que seja dada preferência para equipamentos de 5.8 Ghz para fazer a ligação entre as torres de transmissão (backbone), assim o sistema de distribuição fica livre de interferências e garante uma boa performance.

Atender a residências: se o cliente for um Access Point Client, isso significa que o sistema está trabalhando com o equipamento em modo 802.11b Open Share, e neste modo de operação as distâncias são limitadas entre 3 a 4 Km no máximo, por isso, deve ser escolhido um local onde a abrangência aos clientes seja bem grande para garantir o uso total do equipamento.
Se o interesse é em trabalhar com clientes residenciais e condomínios ao mesmo tempo, deve-se utilizar um equipamento diferente para cada finalidade.
Uma central irá fazer o trabalho de Access Point e a outra vai fazer o MultiLink para os prédios.
Procedendo dessa forma evita-se o comprometimento do link com os clientes evitando saturação da banda para determinados locais.

Os custos: se for ofertado aos clientes 256 Kbps compartilhado, significa que cada estação chave irá receber 256K bps 24 horas por dia nos 7 dias por semana.
Com isso, é preciso estar atento ao consumo de banda em excesso pois o lucro vem da utilização do link ou da não utilização.
Um cliente empresarial utiliza maior quantidade de banda que um cliente residencial, por isso o valor da mensalidade do cliente empresarial deve ser maior que um cliente residencial.
Ainda deve ser lembrado que um cliente empresarial exige mais seriedade no link, deve-se ter o menor nível de problemas possível, menor nível de problemas que um usuário residencial.

Macete: em regra geral, a média é de 10 para 1, isso quer dizer que para cada 256 Kbps verdadeiros, podem ser "pendurados" até dez clientes com a mesma velocidade, e com o tempo, a otimização do consumo deverá ser adequada para cada caso.

É comum pensar que se 1 Mbps tem 4 X 256 Kbps, é possível colocar até 40 clientes em cada Mb, mas não é bem assim, em cada caso deve ser analisado o consumo da banda, e sendo assim, a otimização do sistema é fundamental, se existirem clientes residenciais e clientes empresariais, um alerta é que o consumo da residência é na maioria dos casos durante a noite, e ao contrário, o consumo de uma empresa é durante o dia.

Note que cada caso deve ser estudado com muito cuidado, pois o truque para ganhar dinheiro está justamente na análise do consumo de banda, e é claro, na correta configuração da largura de banda para cada cliente, por isso, é importante a escolha de equipamentos.

Em pouco tempo já se sabe se o empreendedor irá crescer ou se vai afundar, mas o segredo é não ter pressa para vender e fazer vendas bem feitas, como se sabe, muitos precisam do acesso, e todos querem ganhar dinheiro, não é verdade?

Uma das melhores apostilas sobre Rede de Computadores que ja vi

2010-11-23T00:03:00.000-02:00

Nesta apostila você verá como nasceu a idéia da Rede entre computadores, o seu principal padrão mundialmente utilizado, as topologias, os tipos de cabos, como confeccioná-los, o cabeamento estruturado, os principais equipamentos para uma rede de computadores: Repetidores, Hub, Switch, Roteadores entre muitas outras informações. Qualquer critica, sugestão, apoio, dicas é muito bem vinda, para o enriquecimento deste material.

Historia

O primeiro experimento conhecido de conexão de computadores em rede foi feito em 1965, nos estados unidos, por obra de dois cientistas: Lawrence Roberts e Thomas Merril. A experiência foi realizada por meio de uma linha telefônica discada de baixa velocidade, fazendo a conexão entre dois centros de pesquisa em Massachusetts e na Califórnia. Estava plantada ali a semente para o que hoje é a Internet – mãe de todas as redes.

O nascimento das redes de computadores, não por acaso, esta associada a corrida espacial. Boa parte dos elementos e aplicações essenciais para a comunicação entre computadores, como o protocolo TCP/IP, a tecnologia de comutação de pacotes de dados e o correio eletrônico, estão relacionados ao desenvolvimento da Arpanet, a rede que deu origem a internet. Ela foi criada por um programa desenvolvido pela Advanced Research Projects Agency (ARPA) mais tarde rebatizada como DARPA.

A agencia nasceu de uma iniciativa do departamento de defesa dos estados unidos, na época preocupado em não perder terreno na corrida tecnológica deflagrada pelos russos com o lançamento do satélite Sputinik, em 1957. Roberts, acadêmico do MIT (Instituto de Tecnologia de Massachusetts), era um dos integrantes da DARPA e um dos pais da Arpanet, que começou em 1969 conectando quatro universidades: UCLA – Universidade da Califórnia em Los Angeles, Stanford, Santa Bárbara e Utah. A separação dos militares da Arpanet só ocorreu em 1983, com a criação da Milnet.

Alguns dos marcos importantes para a evolução das redes locais de computadores ocorreram nos anos 70. Ate a década anterior os computadores eram maquinas gigantescas que processavam informações por meio da leitura de cartões ou fitas magnéticas. Não havia interação entre o usuário e a maquina. No final dos anos 60 ocorreram os primeiros avanços que resultaram nos sistemas multiusuários de tempo compartilhado. Por meio de terminais interativos, diferentes usuários revezavam-se na utilização do computador central. A IBM reinava praticamente sozinha nessa época.

A partir de 1970, com o desenvolvimento dos minicomputadores de 32 bits, os grandes fabricantes, como IBM, HP e Digital, já começavam a planejar soluções com o objetivo de distribuir o poder de processamento dos mainframes e assim facilitar o acesso às informações. O lançamento do VAX pela Digital, em 1977, estava calcado numa estratégia de criar uma arquitetura de rede de computadores. Com isso, a empresa esperava levar vantagem sobre a rival Big Blue.

Quando um Vax era iniciado, ele já começava a procurar por outras maquinas para se comunicar, um procedimento ousado numa época em que poucas pessoas tinham idéia do que era uma rede. A estratégia deu certo e o VAX alcançou grande popularidade, principalmente em aplicações cientificas e de engenharia. Muitos anos depois, a Digital acabaria sendo comprada pela Compaq, que por sua vez, foi incorporada a HP. Mas as inovações surgidas com o VAX e seu sistema operacional, o VMS, teriam grandes influencias nos computadores que viriam depois.

O sistema operacional Unix, desenvolvido em 1969 nos laboratórios Bell, trouxe inovações que logo o tornou popular nas universidades e nos centros de pesquisa a partir de 1974. Era um sistema portável e modular, capaz de rodar em vários computadores e evoluir junto com o hardware. Os sistemas operacionais da época eram escritos em assembly, linguagem especifica para a plataforma de hardware. O Unix foi escrito quase totalmente em C, uma linguagem de alto nível. Isso deu a ele uma inédita flexibilidade. No começo da década, ferramentas importantes foram criadas para o Unix, como o e-mail, o Telnet, que permitia o uso de terminais remotos, e o FTP, que se transformou no padrão de transferência de arquivos entre computadores em rede. Foi essa plataforma que nasceu a maior parte das tecnologias que hoje formam a Internet.

Ethernet

Um dos principais saltos tecnológicos que permitiram a popularização das redes foi o desenvolvimento da tecnologia ethernet. Para se ter uma idéia do avanço que essa invenção representou, basta lembrar que, até aquela época, os computadores não compartilhavam um cabo comum de conexão. Cada estação era ligada a outra numa distancia não superior a 2 metros. O pai da Ethernet é Robert Metcalfe, um dos gênios produzidos pelo MIT e por Harvard e fundador da 3Com.

Metcalfe era um dos pesquisadores do laboratório Parc, que a Xerox mantém até hoje em Palo Alto, na Califórnia. Em 1972, ele recebeu a missão de criar um sistema que permitisse a conexão das estações Xerox Alto entre si e com os servidores. A idéia era que todos os pesquisadores do Parc pudessem compartilhar as recém-desenvolvidas impressoras a laser.

Uma das lendas a respeito da criação da Ethernet é que Metcalfe e sua equipe tomaram por base um sistema desenvolvido por um casal de estudantes da universidade de Aloha, no Havaí. Utilizando um cabo coaxial, eles interligaram computadores em duas ilhas para poder conversar. O fato é que, antes de chamar-se Ethernet, a partir de 1973, o sistema de Metcalfe tinha o nome de Alto Aloha Network. Ele mudou a denominação, primeiramente para deixar claro que a Ethernet poderia funcionar em qualquer computador e não apenas nas estações Xerox. E também para reforçar a diferença em relação ao método de acesso CSMA (Carrier Sense Multiple Access) do sistema Aloha. A palavra ether foi uma referencia à propagação de ondas pelo espaço.

O sistema de Metcalfe acrescentou duas letras, CD (de Collision Detection) à sigla CSMA. Um detalhe importante, porque o recurso de detecção de colisão impede que dois dispositivos acessem o mesmo nó de forma simultânea. Assim, o sistema Ethernet verifica se a rede está livre para enviar a mensagem. Se não estiver a mensagem fica numa fila de espera para ser transmitida. A ethernet começou com uma banda de 2Mbps que permitia conectar 100 estações em até 1 quilometro de cabo.

No inicio, usava-se um cabo coaxial chamado yellow cable, de diâmetro avantajado. A topologia era um desenho de barramento (algo parecido com um varal) no qual o computador ia sendo pendurado. O conector desse sistema foi apelidado de vampiro, porque “mordia” o cabo em pontos determinados. Dali saia um cabo serial que se ligava à placa de rede. O yellow cable podia ser instalado no teto ou no chão, conectado ao cabo menor.

O Mercado da Informação
A Ethernet não foi a única tecnologia de acesso para redes locais criada nessa época, mas certamente se tornou o padrão mais difundido, por sua simplicidade e eficiência, chegando a mais de 100 milhões de nós no mundo todo. As tecnologias Token Ring, da IBM, e a Arcnet, da Datapoint, chegaram a ter seus dias de gloria (esta ultima ainda é largamente empregada no Japão para processos de automação industrial), mas perderam terreno para a poderosa concorrente. O primeiro impulso para difusão do padrão Ethernet ocorreu quando a Digital, a Intel e a Xerox, em 1980 formaram um consorcio (DIX) para desenvolver e disseminar o padrão que rapidamente evoluiu de 2Mbps para 10Mbps.

O sistema Ethernet foi padronizado pelas especificações do IEEE (Instituto dos Engenheiros de Eletricidade e Eletrônica), órgão que, entre outras funções, elabora normas técnicas de engenharia eletrônica. O protocolo Ethernet corresponde à especificação 802.3 do IEEE, publicada pela primeira vez em 1985. A conexão Ethernet utilizava, inicialmente, dois tipos de cabos coaxiais, um mais grosso (10 Base5) e outro mais fino (10 Base2). A partir de 1990, com o aumento da velocidade para 100Mbps, passou-se a usar o cabo de par trançado (10Base-T e 100Base-T), que tem a vantagem de ser mais flexível e de baixo custo. Com o advento da fibra ótica, o padrão Ethernet já esta em sua terceira geração. A Gigabit Ethernet, com velocidade de até 1Gbps.

Na década de 80, com a chegada dos computadores pessoais, as redes locais começaram a ganhar impulso. O mercado corporativo demandava soluções para compartilhar os elementos mais caros da infra-estrutura de TI (impressoras e discos rígidos). A Novell, uma empresa fundada por mórmons em Salt Lake City, no estado americano de Utah, desenvolveu em 1983, o sistema operacional NetWare para servidores, que usava o protocolo de comunicação IPX, mais simples que o TCP/IP. O protocolo rapidamente ganhou força e chegou a dominar 70% do mercado mundial até meados de 1993. A década de 80 foi marcada pela dificuldade de comunicação entres redes locais que e formavam e que eram vistas pelo mercado como ilhas de computadores com soluções proprietárias, como SNA, da IBM, DECnet, da Digital, NetWare, da Novell, e NetBIOS da Microsoft.

Esse problema fez com que um casal de namorados da universidade de Stanford, Sandra Lerner e Leonard Bosack, decidisse encontrar uma solução para que as redes locais de cada departamento da universidade pudessem conversar. Diz à lenda que a preocupação do casal, que mais tarde fundaria a Cisco, era trocar e-mails. E por isso inventaram o roteador, o equipamento que permitiu a conexão de duas redes normalmente incompatíveis.

A verdade é que eles não inventaram, mas aperfeiçoaram e muito o projeto inical de um engenheiro chamado Bill Yeager. O produto foi lançado comercialmente em 1987. A Cisco hoje vale Bilhões e o resto é Historia. O quebra-cabeça das redes começa a se fechar a partir do momento que a Arpanet, em 1983, passa a ser de fato a Internet, adotando definitivamente a família de protocolos TCP/IP. No ano seguinte, surge outra grande inovaçã o DNS (Domain Name System), mecanismo para resolver o problema de nome e endereços de servidores na rede. Com a criação da World Wide Web, em 1991, e o desenvolvimento do browser pelo fundador da Netscape, Marc Andreesen, a Internet deslanchou para se tornar a grande rede mundial de computadores.

A difusão do protocolo TCP/IP no mundo corporativo que passou a ser a linguagem universal dos computadores se deu a partir das plataformas Unix da Sun e da HP. Nos anos 90, as empresas já estavam empenhadas em usar a informática para melhorar o processo produtivo. O mercado começou a migrar de plataformas proprietárias para sistemas abertos. A questão não era tecnologia, mas economia. O sistema Unix tinha vários fornecedores, uma plataforma de desenvolvimento mais simples e mais versátil que os tradicionais mainframes. A pluralidade de plataformas passou a ser a regra nas empresas. Isso só foi possível porque os obstáculos à interligação de sistemas de diferentes fabricantes já haviam sido superados.

A Evolução
Em 1988, Dave Cutler, líder da equipe da Digital que havia criado o VMS, o arrojado sistema operacional do VAX, foi contratado pela Microsoft. A empresa já havia fracassado em uma tentativa anterior de competir com a Novell. Seu primeiro sistema operacional de rede, o LAN Manager, desenvolvido em conjunto com a IBM, não era páreo para o NetWare. Culter levou para lá boa parte da sua antiga equipe de programadores e também a filosofia que havia norteado a criação do VAX, de que a comunicação em rede deve ser um atributo básico do sistema operacional. Ele liderou o desenvolvimento do Windows NT, lançado em 1993. Com ele, a Microsoft finalmente conseguiu conquistar algum espaço nos servidores. O NT também foi base para o desenvolvimento do Windows 2000 e do Windows XP. De certa forma o XP é neto do velho VMS.

Se, há 40 anos, a idéia de uma rede de computadores era a de vários aparelhos conectados, hoje a rede transformou-se numa dos principais meios de interação entre pessoas, de disseminação da informação e da realização de negócios. O radio levou 38 anos até formar um publico de 50 milhões de pessoas. A TV levou 13 anos. A Internet precisou apenas quatro anos para alcançar essa marca. É um salto e tanto para toda a humanidade.

Topologias das Redes de Computadores

Ao longo da historia das redes, varias topologias foram experimentadas, com maior ou menor sucesso. Os três tipos abaixo são esquemas básicos empregados na conexão dos computadores. Os outros são variantes deles:

Estrela - Todas as conexões partem de um ponto central (concentrador), normalmente um hub ou switch. É o modelo mais utilizado atualmente.

Anel - Todos os computadores são conectados em um anel. É a topologia das redes Token Ring, popularizadas pela IBM nos anos 80. Hoje, esse modelo é mais utilizado em sistemas de automação industrial.

Barramento - Os computadores são conectados num sistema linear de cabeamento em seqüência. Esse arranjo era usado nas primeiras gerações de redes Ethernet. Está sendo lentamente abandonado.

Cabos

O projeto de cabeamento de uma rede, que faz parte do meio físico usado para interligar computadores, é um fator de extrema importância para o bom desempenho de uma rede. Esse projeto envolve aspectos sobre a taxa de transmissão, largura de banda, facilidade de instalação, imunidade a ruídos, confiabilidade, custos de interface, exigências geográficas, conformidade com padrões internacionais e disponibilidades de componentes.

O sistema de cabeamento determina a estabilidade de uma rede. Pesquisas revelam que cerca de 80% dos problemas físicos ocorridos atualmente em uma rede tem origem no cabeamento, afetando de forma considerável a confiabilidade da mesma. O custo para a implantação do cabeamento corresponde a aproximadamente 6% do custo total de uma rede, mais 70% da manutenção de uma rede é direcionada aos problemas oriundos do cabeamento.

Em matéria de cabos, os mais utilizados são os cabos de par trançado, os cabos coaxiais e cabos de fibra óptica. Cada categoria tem suas próprias vantagens e limitações, sendo mais adequado para um tipo específico de rede.

Os cabos de par trançado são os mais usados pois tem um melhor custo beneficio, ele pode ser comprado pronto em lojas de informática, ou feito sob medida, ou ainda produzido pelo próprio usuário, e ainda são 10 vezes mais rápidos que os cabos coaxiais.

Os cabos coaxiais permitem que os dados sejam transmitidos através de uma distância maior que a permitida pelos cabos de par trançado sem blindagem (UTP), mas por outro, lado não são tão flexíveis e são mais caros que eles. Outra desvantagem é que a maioria delas requerem o barramento ISA, não encontradas nas Placas mães novas.

Os cabos de fibra óptica permitem transmissões de dados a velocidades muito maiores e são completamente imunes a qualquer tipo de interferência eletromagnética, porém, são muito mais caros e difíceis de instalar, demandando equipamentos mais caros e mão de obra mais especializada. Apesar da alta velocidade de transferência, as fibras ainda não são uma boa opção para pequenas redes devido ao custo.

Cabos de Fibra Óptica

Sem as fibras ópticas, a Internet e até o sistema telefônico que temos hoje seriam inviáveis. Com a migração das tecnologias de rede para padrões de maiores velocidades como ATM, Gigabit Ethernet e 10 Gigabit Ethernet, o uso de fibras ópticas vem ganhando força também nas redes locais. O produto começou a ser fabricado em 1978 e passou a substituir os cabos coaxiais nos Estados Unidos na segunda metade dos anos 80. Em 1988, o primeiro cabo submarino de fibras ópticas mergulhou no oceano, dando inicio a superestrada da informação. O físico indiano Narinder Singh Kanpany é o inventor da fibra óptica, que passou a ter aplicações praticas na década de 60 com o advento da criação de fontes de luz de estado sólido, como o raio laser e o LED, diodo emissor de luz. Sua origem, porem, data do século 19, com os primeiros estudos sobre os efeitos da luz. Existem dois tipos de fibras ópticas: As fibras multímodo e as monomodo. A escolha de um desses tipos dependera da aplicação da fibra. As fibras multímodo são mais utilizadas em aplicações de rede locais (LAN), enquanto as monomodo são mais utilizadas para aplicações de rede de longa distancia (WAN). São mais caras, mas também mais eficientes que as multímodo. Aqui no Brasil, a utilização mais ampla da fibra óptica teve inicio ma segunda metade dos anos 90, impulsionada pela implementação dos backbones das operadoras de redes metropolitanas.

Em 1966, num comunicado dirigido à Bristish Association for the Advancement of Science, os pesquisadores K.C.Kao e G.A.Hockham da Inglaterra propuseram o uso de fibras de vidro, e luz, em lugar de eletricidade e condutores de cobre na transmissão de mensagens telefônicas. Aqui parou

Ao contrário dos cabos coaxiais e de par trançado, que nada mais são do que fios de cobre que transportam sinais elétricos, a fibra óptica transmite luz e por isso é totalmente imune a qualquer tipo de interferência eletromagnética. Além disso, como os cabos são feitos de plástico e fibra de vidro (ao invés de metal), são resistentes à corrosão.

O cabo de fibra óptica é formado por um núcleo extremamente fino de vidro, ou mesmo de um tipo especial de plástico. Uma nova cobertura de fibra de vidro, bem mais grossa envolve e protege o núcleo. Em seguida temos uma camada de plástico protetora chamada de cladding, uma nova camada de isolamento e finalmente uma capa externa chamada bainha parouaqui

A transmissão de dados por fibra óptica é realizada pelo envio de um sinal de luz codificado, dentro do domínio de freqüência do infravermelho a uma velocidade de 10 a 15 MHz. As fontes de transmissão de luz podem ser diodos emissores de luz (LED) ou lasers semicondutores. O cabo óptico com transmissão de raio laser é o mais eficiente em potência devido a sua espessura reduzida. Já os cabos com diodos emissores de luz são muito baratos, além de serem mais adaptáveis à temperatura ambiente e de terem um ciclo de vida maior que o do laser.

O cabo de fibra óptica pode ser utilizado tanto em ligações ponto a ponto quanto em ligações multímodo. A fibra óptica permite a transmissão de muitos canais de informação de forma simultânea pelo mesmo cabo. Utiliza, por isso, a técnica conhecida como multiplexação onde cada sinal é transmitido numa freqüência ou num intervalo de tempo diferente. parou aqui

A fibra óptica tem inúmeras vantagens sobre os condutores de cobre, sendo as principais:

Maior alcance
  Maior velocidade
  Imunidade a interferências eletromagnéticas

O custo do metro de cabo de fibra óptica não é elevado em comparação com os cabos convencionais. Entretanto seus conectores são bastante caros, assim como a mão de obra necessária para a sua montagem. A montagem desses conectores, além de um curso de especialização, requer instrumentos especiais, como microscópios, ferramentas especiais para corte e polimento, medidores e outros aparelhos sofisticados.

Devido ao seu elevado custo, os cabos de fibras ópticas são usados apenas quando é necessário atingir grandes distâncias em redes que permitem segmentos de até 1 KM, enquanto alguns tipos de cabos especiais podem conservar o sinal por até 5 KM (distâncias maiores são obtidas usando repetidores). Parou aqui

Mesmo permitindo distâncias tão grandes, os cabos de fibra óptica permitem taxas de transferências de até 155 mbps, sendo especialmente úteis em ambientes que demandam uma grande transferência de dados. Como não soltam faíscas, os cabos de fibra óptica são mais seguros em ambientes onde existe perigo de incêndio ou explosões. E para completar, o sinal transmitido através dos cabos de fibra é mais difícil de interceptar, sendo os cabos mais seguros para transmissões sigilosas. A seguir veremos os padrões mais comuns de redes usando fibra ótica:

- FDDI (Fiber Distributed Data Interface)
- FOIRL (Fiber- Optic InterRepeater Link)
- 10BaseFL
- 100BaseFX
- 1000BaseSX
- 1000BaseLX

Cabo Coaxial

O cabo coaxial foi o primeiro cabo disponível no mercado, e era até a alguns anos atrás o meio de transmissão mais moderno que existia em termos de transporte de dados, existem 4 tipos diferentes de cabos coaxiais, chamados de 10Base5, 10Base2, RG-59/U e RG-62/U.

O cabo 10Base5 é o mais antigo, usado geralmente em redes baseadas em mainframes. Este cabo é muito grosso, tem cerca de 0.4 polegadas, ou quase 1 cm de diâmetro e por isso é muito caro e difícil de instalar devido à baixa flexibilidade. Outro tipo de cabo coaxial é o RG62/U, usado em redes Arcnet. Temos também o cabo RG-59/U, usado na fiação de antenas de TV.

Os cabos 10Base2, também chamados de cabos coaxiais finos, ou cabos Thinnet, são os cabos coaxiais usados atualmente em redes Ethernet, e por isso, são os cabos que você receberá quando pedir por “cabos coaxiais de rede”. Seu diâmetro é de apenas 0.18 polegadas, cerca de 4.7 milímetros, o que os torna razoavelmente flexíveis.

Os cabos coaxiais são cabos constituídos de 4 camadas: um condutor interno, o fio de cobre que transmite os dados; uma camada isolante de plástico, chamada de dielétrico que envolve o cabo interno; uma malha de metal que protege as duas camadas internas e, finalmente, uma nova camada de revestimento, chamada de jaqueta.

O cabo Thin Ethernet deve formar uma linha que vai do primeiro ao último PC da rede, sem formar desvios. Não é possível portanto formar configurações nas quais o cabo forma um “Y”, ou que usem qualquer tipo de derivação. Apenas o primeiro e o último micro do cabo devem utilizar o terminador BNC.

O Cabo 10base2 tem a vantagem de dispensar hubs, pois a ligação entre os micros é feita através do conector “T”, mesmo assim o cabo coaxial caiu em desuso devido às suas desvantagens:

Custo elevado,
Instalação mais difícil e mais fragilidade,
Se o terminador for retirado do cabo, toda a rede sai do ar.

Redes formadas por cabos Thin Ethernet são de implementação um pouco complicada. É preciso adquirir ou construir cabos com medidas de acordo com a localização física dos PCs. Se um dos PCs for reinstalado em outro local é preciso utilizar novos cabos, de acordo com as novas distâncias entre os PCs. Pode ser preciso alterar duas ou mais seções de cabo de acordo com a nova localização dos computadores. Além disso, os cabos coaxiais são mais caros que os do tipo par trançado.

O “10” na sigla 10Base2, significa que os cabos podem transmitir dados a uma velocidade de até 10 megabits por segundo, “Base” significa “banda base” e se refere à distância máxima para que o sinal pode percorrer através do cabo, no caso o “2” que teoricamente significaria 200 metros, mas que na prática é apenas um arredondamento, pois nos cabos 10Base2 a distância máxima utilizável é de 185 metros.

Usando cabos 10Base2, o comprimento do cabo que liga um micro ao outro deve ser de no mínimo 50 centímetros, e o comprimento total do cabo (do primeiro ao último micro) não pode superar os 185 metros. É permitido ligar até 30 micros no mesmo cabo, pois acima disso, o grande número de colisões de pacotes irá prejudicar o desempenho da rede, chegando a ponto de praticamente impedir a comunicação entre os micros em casos extremos.

Cabo Par Trançado

O cabo par trançado surgiu com a necessidade de se ter cabos mais flexíveis e com maior velocidade de transmissão, ele vem substituindo os cabos coaxiais desde o início da década de 90. Hoje em dia é muito raro alguém ainda utilizar cabos coaxiais em novas instalações de rede, apesar do custo adicional decorrente da utilização de hubs e outros concentradores. O custo do cabo é mais baixo, e a instalação é mais simples.

O nome “par trançado” é muito conveniente, pois estes cabos são constituídos justamente por 4 pares de cabos entrelaçados. Os cabos coaxiais usam uma malha de metal que protege o cabo de dados contra interferências externas; os cabos de par trançado por sua vez, usam um tipo de proteção mais sutil: o entrelaçamento dos cabos cria um campo eletromagnético que oferece uma razoável proteção contra interferências externas.

Existem basicamente dois tipos de cabo par trançad Os Cabos sem blindagem chamados de UTP (Unshielded Twisted Pair) e os blindados conhecidos como STP (Shielded Twisted Pair). A única diferença entre eles é que os cabos blindados além de contarem com a proteção do entrelaçamento dos fios, possuem uma blindagem externa (assim como os cabos coaxiais), sendo mais adequados a ambientes com fortes fontes de interferências, como grandes motores elétricos e estações de rádio que estejam muito próximas. Outras fontes menores de interferências são as lâmpadas fluorescentes (principalmente lâmpadas cansadas que ficam piscando), cabos elétricos quando colocados lado a lado com os cabos de rede e mesmo telefones celulares muito próximos dos cabos.

Na realidade o par trançado sem blindagem possui uma ótima proteção contra ruídos, só que usando uma técnica de cancelamento e não através de uma blindagem. Através dessa técnica, as informações circulam repetidas em dois fios, sendo que no segundo fio a informação possui a polaridade invertida. Todo fio produz um campo eletromagnético ao seu redor quando um dado é transmitido. Se esse campo for forte o suficiente, ele irá corromper os dados que estejam circulando no fio ao lado (isto é, gera Ruído). Em inglês esse problema é conhecido como cross-talk.

A direção desse campo eletromagnético depende do sentido da corrente que esta circulando no fio, isto é, se é positiva ou então negativa. No esquema usado pelo par trançado, como cada par transmite a mesma informação só que com a polaridade invertida, cada fio gera um campo eletromagnético de mesma intensidade mas em sentido contrario. Com isso, o campo eletromagnético gerado por um dos fios é anulado pelo campo eletromagnético gerado pelo outro fio.

Além disso, como a informação é transmitida duplicada, o receptor pode facilmente verificar se ela chegou ou não corrompida. Tudo o que circula em um dos fios deve existir no outro fio com intensidade igual, só que com a polaridade invertida. Com isso, aquilo que for diferente nos dois sinais é ruído e o receptor tem como facilmente identificá-lo e eliminá-lo.

Quanto maior for o nível de interferência, menor será o desempenho da rede, menor será a distância que poderá ser usada entre os micros e mais vantajosa será a instalação de cabos blindados. Em ambientes normais porém os cabos sem blindagem costumam funcionar bem.

Existem no total, 5 categorias de cabos de par trançado. Em todas as categorias a distância máxima permitida é de 100 metros. O que muda é a taxa máxima de transferência de dados e o nível de imunidade a interferências. Os cabos de categoria 5 que tem a grande vantagem sobre os outros 4 que é a taxa de transferência que pode chegar até 100 mbps, e são praticamente os únicos que ainda podem ser encontrados à venda, mas em caso de dúvida basta checas as inscrições no cabo, entre elas está a categoria do cabo, como na foto abaix

A utilização do cabo de par trançado tem suas vantagens e desvantagens, vejamos as principais:

Vantagens

  Preço. Mesma com a obrigação da utilização de outros equipamentos na rede, a relação custo beneficia se torna positiva.
  Flexibilidade. Como ele é bastante flexível, ele pode ser facilmente passado por dentro de conduítes embutidos em paredes.
  Facilidade. A facilidade com que se pode adquirir os cabos, pois em qualquer loja de informática existe esse cabo para venda, ou até mesmo para o próprio usuário confeccionar os cabos.
  Velocidade. Atualmente esse cabo trabalha com uma taxa de transferência de 100 Mbps.

Desvantagens

Comprimento. Sua principal desvantagem é o limite de comprimento do cabo que é de aproximadamente 100 por trecho.
  Interferência. A sua baixa imunidade à interferência eletromagnética, sendo fator preocupante em ambientes industriais.

No cabo de par trançado tradicional existem quatro pares de fio. Dois deles não são utilizados pois os outros dois pares, um é utilizado para a transmissão de dados (TD) e outro para a recepção de dados (RD). Entre os fios de números 1 e 2 (chamados de TD+ e TD– ) a placa envia o sinal de transmissão de dados, e entre os fios de números 3 e 6 (chamados de RD+ e RD– ) a placa recebe os dados. Nos hubs e switches, os papéis desses pinos são invertidos. A transmissão é feita pelos pinos 3 e 6, e a recepção é feita pelos pinos 1 e 2. Em outras palavras, o transmissor da placa de rede é ligado no receptor do hub ou switch, e vice-versa.

(obs.) Um cuidado importante a ser tomado é que sistemas de telefonia utilizam cabos do tipo par trançado, só que este tipo de cabo não serve para redes locais.

Como confeccionar os Cabos

A montagem do cabo par trançado é relativamente simples. Além do cabo, você precisará de um conector RJ-45 de pressão para cada extremidade do cabo e de um alicate de pressão para conectores RJ-45 também chamado de Alicate crimpador. Tome cuidado, pois existe um modelo que é usado para conectores RJ-11, que têm 4 contatos e são usados para conexões telefônicas

Assim como ocorre com o cabo coaxial, fica muito difícil passar o cabo por conduítes e por estruturas usadas para ocultar o cabo depois que os plugues RJ-45 estão instalados. Por isso, passe o cabo primeiro antes de instalar os plugues. Corte o cabo no comprimento desejado. Lembre de deixar uma folga de alguns centímetros, já que o micro poderá posteriormente precisar mudar de lugar além disso você poderá errar na hora de instalar o plugue RJ-45, fazendo com que você precise cortar alguns poucos centímetros do cabo para instalar novamente outro plugue.

Para quem vai utilizar apenas alguns poucos cabos, vale a pena comprá-los prontos. Para quem vai precisar de muitos cabos, ou para quem vai trabalhar com instalação e manutenção de redes, vale a pena ter os recursos necessários para construir cabos. Devem ser comprados os conectores RJ-45, algumas um rolo de cabo, um alicate para fixação do conector e um testador de cabos. Não vale a pena economizar comprando conectores e cabos baratos, comprometendo a confiabilidade.

O alicate possui duas lâminas e uma fenda para o conector. A lâmina indicada com (1) é usada para cortar o fio. A lâmina (2) serve para desencapar a extremidade do cabo, deixando os quatro pares expostos. A fenda central serve para prender o cabo no conector.

(1): Lâmina para corte do fio
(2): Lâmina para desencapar o fio
(3): Fenda para crimpar o conector

Corte a ponta do cabo com a parte (2) do alicate do tamanho que você vai precisar, desencape (A lâmina deve cortar superficialmente a capa plástica, porém sem atingir os fios) utilizando a parte (1) do alicate aproximadamente 2 cm do cabo. Pois o que protege os cabos contra as interferências externas são justamente as tranças. À parte destrançada que entra no conector é o ponto fraco do cabo, onde ele é mais vulnerável a todo tipo de interferência Remova somente a proteção externa do cabo, não desencape os fios.

Identifique os fios do cabo com as seguintes cores:

  Branco com verde
  Verde
  Branco com laranja
  Laranja
  Branco com azul
  Azul
  Branco com marrom
  Marrom

Desenrole os fios que ficaram para fora do cabo, ou seja, deixe-os “retos” e não trançados na ordem acima citada, como mostra a figura abaix

Corte os fios com a parte (1) do alicate em aproximadamente 1,5cm do invólucro do cabo.Observe que no conector RJ-45 que para cada pino existe um pequeno “tubo” onde o fio deve ser inserido. Insira cada fio em seu “tubo”, até que atinja o final do conector. Lembrando que não é necessário desencapar o fio, pois isto ao invés de ajudar, serviria apenas para causar mau contato, deixado o encaixe com os pinos do conector “folgado”.

Ao terminar de inserir os fios no conector RJ-45, basta inserir o conector na parte (3) do alicate e pressioná-lo. A função do alicate neste momento é fornecer pressão suficiente para que os pinos do conector RJ-45, que internamente possuem a forma de lâminas, esmaguem os fios do cabo, alcançando o fio de cobre e criando o contato, ao mesmo tempo, uma parte do conector irá prender com força a parte do cabo que está com a capa plástica externa. O cabo ficará definitivamente fixo no conector.

Após pressionar o alicate, remova o conector do alicate e verifique se o cabo ficou bom, par isso puxe o cabo para ver se não há nenhum fio que ficou solto ou folgado.

Uma dica que ajuda bastante e a utilização das borrachas protetoras dos conectores RJ-45 pois o uso desses traz vários benefícios com facilita a identificação do cabo com o uso de cores diferentes, mantém o conector mais limpo, aumenta a durabilidade do conector nas operações de encaixe e desencaixe, dá ao cabo um acabamento profissional.

Montar um cabo de rede com esses protetores é fácil. Cada protetor deve ser instalado no cabo antes do respectivo conector RJ-45. Depois que o conector é instalado, ajuste o protetor ao conector.

Testar o Cabo

Para testar o cabo é muito fácil utilizando os testadores de cabos disponíveis no mercado. Normalmente esses testadores são compostos de duas unidades independentes. A vantagem disso é que o cabo pode ser testado no próprio local onde fica instalado, muitas vezes com as extremidades localizadas em recintos diferentes. Chamaremos os dois componentes do testador: um de testador e o outro de terminador. Uma das extremidades do cabo deve ser ligada ao testador, no qual pressionamos o botão ON/OFF. O terminador deve ser levado até o local onde está a outra extremidade do cabo, e nele encaixamos o outro conector RJ-45.

Uma vez estando pressionado o botão ON/OFF no testador, um LED irá piscar. No terminador, quatro LEDs piscarão em seqüência, indicando que cada um dos quatro pares está corretamente ligado. Observe que este testador não é capaz de distinguir ligações erradas quando são feitas de forma idêntica nas duas extremidades. Por exemplo, se os fios azul e verde forem ligados em posições invertidas em ambas as extremidades do cabo, o terminador apresentará os LEDs piscando na seqüência normal. Cabe ao usuário ou técnico que monta o cabo, conferir se os fios em cada conector estão ligados nas posições corretas.

Para quem faz instalações de redes com freqüência, é conveniente adquirir testadores de cabos, lojas especializadas em equipamentos para redes fornecem cabos, conectores, o alicate e os testadores de cabos, além de vários outros equipamentos. Mais se você quer apenas fazer um cabo para sua rede, existe um teste simples para saber se o cabo foi crimpado corretamente: basta conectar o cabo à placa de rede do micro e ao hub. Tanto o LED da placa quanto o do hub deverão acender. Naturalmente, tanto o micro quanto o hub deverão estar ligados.

Não fique chateado se não conseguir na primeira vez, pois a experiência mostra que para chegar à perfeição é preciso muita prática, e até lá é comum estragar muitos conectores. Para minimizar os estragos, faça a crimpagem apenas quando perceber que os oito fios chegaram até o final do conector. Não fixe o conector se perceber que alguns fios estão parcialmente encaixados. Se isso acontecer, tente empurrar mais os fios para que encaixem até o fim. Se não conseguir, retire o cabo do conector, realinhe os oito fios e faça o encaixe novamente.

Cabeamento Estruturado

As redes mais populares utilizam a arquitetura Ethernet usando cabo par trançado sem blindagem (UTP). Nessa arquitetura, há a necessidade de um dispositivo concentrador, tipicamente um hub, para fazer a conexão entre os computadores.
Em redes pequenas, o cabeamento não é um ponto que atrapalhe o dia-a-dia da empresa, já que apenas um ou dois hubs são necessários para interligar todos os micros. Entretanto, em redes médias e grandes a quantidade de cabos e o gerenciamento dessas conexões pode atrapalhar o dia-a-dia da empresa. A simples conexão de um novo micro na rede pode significar horas e horas de trabalho (passando cabos e tentando achar uma porta livre em um hub).

É aí que entra o Cabeamento Estruturado. A idéia básica do cabeamento estruturado fornece ao ambiente de trabalho um sistema de cabeamento que facilite a instalação e remoção de equipamentos, sem muita perda de tempo. Dessa forma, o sistema mais simples de cabeamento estruturado é aquele que provê tomadas RJ-45 para os micros da rede em vez de conectarem o hub diretamente aos micros. Podendo haver vários pontos de rede já preparados para receber novas maquinas. Assim, ao trocar um micro de lugar ou na instalação de um novo micro, não haverá a necessidade de se fazer o cabeamento do micro até o hub; este cabeamento já estará feito, agilizando o dia-a-dia da empresa.

A idéia do cabeamento estruturado vai muito alem disso. Além do uso de tomadas, o sistema de cabeamento estruturado utiliza um concentrador de cabos chamado Patch Panel (Painel de Conexões). Em vez de os cabos que vêm das tomadas conectarem-se diretamente ao hub, eles são conectados ao patch panel. Dessa forma, o patch panel funciona como um grande concentrador de tomadas

O patch panel é um sistema passivo, ele não possui nenhum circuito eletrônico. Trata-se somente de um painel contendo conectores. Esse painel é construído com um tamanho padrão, de forma que ele possa ser instalado em um rack.

O uso do patch panel facilita enormemente a manutenção de redes medis e grandes. Por exemplo, se for necessário trocar dispositivos, adicionar novos dispositivos (hubs e switches, por exemplo) alterar a configuração de cabos, etc., basta trocar a conexão dos dispositivos no patch panel, sem a necessidade de alterar os cabos que vão até os micros. Em redes grandes é comum haver mais de um local contendo patch panel. Assim, as portas dos patch panels não conectam somente os micros da rede, mas também fazem a ligação entre patch panels.

Para uma melhor organização das portas no patch panel, este possui uma pequena área para poder rotular cada porta, isto é, colocar uma etiqueta informando onde a porta esta fisicamente instalada.

Dessa forma, a essência do cabeamento estruturado é o projeto do cabeamento da rede. O cabeamento deve ser projetado sempre pensado na futura expansão da rede e na facilitação de manutenção. Devemos lembrar sempre que, ao contrario de micros e de programas que se tornam obsoletos com certa facilidade, o cabeamento de rede não é algo que fica obsoleto com o passar dos anos. Com isso, na maioria das vezes vale à pena investir em montar um sistema de cabeamento estruturado.

Repetidores

O repetidor é um dispositivo responsável por ampliar o tamanho máximo do cabeamento da rede. Ele funciona como um amplificador de sinais, regenerando os sinais recebidos e transmitindo esses sinais para outro segmento da rede.

Como o nome sugere, ele repete as informações recebidas em sua porta de entrada na sua porta de saída. Isso significa que os dados que ele mandar para um micro em um segmento, estes dados estarão disponíveis em todos os segmentos, pois o repetidor é um elemento que não analisa os quadros de dados para verificar para qual segmento o quadro é destinado. Assim ele realmente funciona como um “extensor” do cabeamento da rede. É como se todos os segmentos de rede estivessem fisicamente instalados no mesmo segmento.

Apesar de aumentar o comprimento da rede, o repetidor traz como desvantagem diminuir o desempenho da rede. Isso ocorre porque, como existirão mais maquinas na rede, as chances de o cabeamento estar livre para o envio de um dado serão menores. E quando o cabeamento esta livre, as chances de uma colisão serão maiores, já que teremos mais maquinas na rede.

Atualmente você provavelmente não encontrara repetidores como equipamento independentes, esse equipamento esta embutido dentro de outros, especialmente do hub. O hub é, na verdade, um repetidor (mas nem todo repetidor é um hub), já que ele repete os dados que chegam em uma de suas portas para todas as demais portas existentes.

Hubs

Os Hubs são dispositivos concentradores, responsáveis por centralizar a distribuição dos quadros de dados em redes fisicamente ligadas em estrelas. Funcionando assim como uma peça central, que recebe os sinais transmitidos pelas estações e os retransmite para todas as demais.

Existem vários tipos de hubs, vejamos:

  Passivos: O termo “Hub” é um termo muito genérico usado para definir qualquer tipo de dispositivo concentrador. Concentradores de cabos que não possuem qualquer tipo de alimentação elétrica são chamados hubs passivos funcionando como um espelho, refletindo os sinais recebidos para todas as estações a ele conectadas. Como ele apenas distribui o sinal, sem fazer qualquer tipo de amplificação, o comprimento total dos dois trechos de cabo entre um micro e outro, passando pelo hub, não pode exceder os 100 metros permitidos pelos cabos de par trançado.

  Ativos: São hubs que regeneram os sinais que recebem de suas portas antes de enviá-los para todas as portas. Funcionando como repetidores. Na maioria das vezes, quando falamos somente “hub” estamos nos referindo a esse tipo de hub. Enquanto usando um Hub passivo o sinal pode trafegar apenas 100 metros somados os dois trechos de cabos entre as estações, usando um hub ativo o sinal pode trafegar por 100 metros até o hub, e após ser retransmitido por ele trafegar mais 100 metros completos.

Inteligentes: São hubs que permitem qualquer tipo de monitoramento. Este tipo de monitoramento, que é feito via software capaz de detectar e se preciso desconectar da rede estações com problemas que prejudiquem o tráfego ou mesmo derrube a rede inteira; detectar pontos de congestionamento na rede, fazendo o possível para normalizar o tráfego; detectar e impedir tentativas de invasão ou acesso não autorizado à rede entre outras funções, que variam de acordo com a fabricante e o modelo do Hub.

  Empilháveis: Também chamado xxxxxxável (stackable). Esse tipo de hub permite a ampliação do seu número de portas.Veremos esse tipo de hub mais detalhadamente adiante.

Cascateamento

Existe a possibilidade de conectar dois ou mais hubs entre si. Quase todos os hubs possuem uma porta chamada “Up Link” que se destina justamente a esta conexão. Basta ligar as portas Up Link de ambos os hubs, usando um cabo de rede normal para que os hubs passem a se enxergar.

Sendo que existem alguns hubs mais baratos não possuem a porta “Up Link”, mais com um cabo cross-over pode-se conectar dois hubs. A única diferença neste caso é que ao invés de usar as portas Up Link, usará duas portas comuns.

Note que caso você esteja interligando hubs passivos, a distância total entre dois micros da rede, incluindo o trecho entre os hubs, não poderá ser maior que 100 metros, o que é bem pouco no caso de uma rede grande. Neste caso, seria mais recomendável usar hubs ativos, que amplificam o sinal.

Empilhamento

O recurso de conectar hubs usando a porta Up Link, ou usando cabos cross-over, é utilizável apenas em redes pequenas, pois qualquer sinal transmitido por um micro da rede será retransmitido para todos os outros. Quanto mais Computadores tivermos na rede, maior será o tráfego e mais lenta a rede será e apesar de existirem limites para conexão entre hubs e repetidores, não há qualquer limite para o número de portas que um hub pode ter. Assim, para resolver esses problemas os fabricantes desenvolveram o hub empilhável.

Esse hub possui uma porta especial em sua parte traseira, que permite a conexão entre dois ou mais hubs. Essa conexão especial faz com que os hubs sejam considerados pela rede um só hub e não hubs separados, eliminando estes problemas. O empilhamento só funciona com hubs da mesma marca.

A interligação através de porta especifica com o cabo de empilhamento (stack) tem velocidade de transmissão maior que a velocidade das portas.

Bridges (Pontes)

Como vimos anteriormente que os repetidores transmitem todos os dados que recebe para todas as suas saídas. Assim, quando uma máquina transmite dados para outra máquina presente no mesmo segmento, todas as maquinas da rede recebem esses dados, mesmo aquelas que estão em outro segmento.

A ponte é um repetidor Inteligente. Ela tem a capacidade de ler e analisar os quadros de dados que estão circulando na rede. Com isso ela consegue ler os campos de endereçamentos MAC do quadro de dados. Fazendo com que a ponte não replique para outros segmentos dados que tenham como destino o mesmo segmento de origem. Outro papel que a ponte em principio poderia ter é o de interligar redes que possuem arquiteturas diferentes.

Switches

O switch é um hub que, em vez de ser um repetidor é uma ponte. Com isso, em vez dele replicar os dados recebidos para todas as suas portas, ele envia os dados somente para o micro que requisitou os dados através da análise da Camada de link de dados onde possui o endereço MAC da placa de rede do micro, dando a idéia assim de que o switch é um hub Inteligente, além do fato dos switches trazerem micros processadores internos, que garantem ao aparelho um poder de processamento capaz de traçar os melhores caminhos para o trafego dos dados, evitando a colisão dos pacotes e ainda conseguindo tornar a rede mais confiável e estável.

De maneira geral a função do switch é muito parecida com a de um bridge, com a exceção que um switch tem mais portas e um melhor desempenho, já que manterá o cabeamento da rede livre. Outra vantagem é que mais de uma comunicação pode ser estabelecida simultaneamente, desde que as comunicações não envolvam portas de origem ou destino que já estejam sendo usadas em outras comunicações.

Existem duas arquiteturas básicas de Switches de rede: "cut-through" e "store-and-forward":

Cut-through: apenas examina o endereço de destino antes de reencaminhar o pacote.
Store-and-forward: aceita e analisa o pacote inteiro antes de o reencaminhar. Este método permite detectar alguns erros, evitando a sua propagação pela rede.

Hoje em dia, existem diversos tipos de Switches híbridos que misturam ambas as arquiteturas.

Diferença entre Hubs e Switches

Um hub simplesmente retransmite todos os dados que chegam para todas as estações conectadas a ele, como um espelho. Causando o famoso broadcast que causa muito conflitos de pacotes e faz com que a rede fica muito lenta.

O switch ao invés de simplesmente encaminhar os pacotes para todas as estações, encaminha apenas para o destinatário correto pois ele identifica as maquinas pelo o MAC addrees que é estático. Isto traz uma vantagem considerável em termos desempenho para redes congestionadas, além de permitir que, em casos de redes, onde são misturadas placas 10/10 e 10/100, as comunicações possam ser feitas na velocidade das placas envolvidas. Ou seja, quando duas placas 10/100 trocarem dados, a comunicação será feita a 100M bits. Quando uma das placas de 10M bits estiver envolvida, será feita a 10M bits.

Roteadores

Roteadores são pontes que operam na camada de Rede do modelo OSI (camada três), essa camada é produzida não pelos componentes físicos da rede (Endereço MAC das placas de rede, que são valores físicos e fixos), mais sim pelo protocolo mais usado hoje em dia, o TCP/IP, o protocolo IP é o responsável por criar o conteúdo dessa camada.

Isso Significa que os roteadores não analisam os quadros físicos que estão sendo transmitidos, mas sim os datagramas produzidos pelo protocolo que no caso é o TCP/IP, os roteadores são capazes de ler e analisar os datagramas IP contidos nos quadros transmitidos pela rede.
O papel fundamental do roteador é poder escolher um caminho para o datagrama chegar até seu destino. Em redes grandes pode haver mais de um caminho, e o roteador é o elemento responsável por tomar a decisão de qual caminho percorrer. Em outras palavras, o roteador é um dispositivo responsável por interligar redes diferentes, inclusive podendo interligar redes que possuam arquiteturas diferentes (por exemplo, conectar uma rede Token Ring a uma rede Ethernet, uma rede Ethernet a uma rede x-25

Na figura seguinte é mostrado um exemplo de uso de roteadores. Como você pode perceber, há dois caminhos para o micro da “rede 1” mandar dados para o micro da “rede 6”, através da “rede 2” ou através da “rede 4”.

Os roteadores podem decidir qual caminho tomar através de dois critérios: o caminho mais curto (que seria através da “rede 4”) ou o caminho mais descongestionado (que não podemos determinar nesse exemplo; se o caminho do roteador da “rede 4” estiver congestionado, o caminho do roteador da “rede 2”, apesar de mais longo, pode acabar sendo mais rápido).

A grande diferença entre uma ponte e um roteador é que o endereçamento que a ponte utiliza é o endereçamento usado na camada de Link de Dados do modelo OSI, ou seja, o endereçamento MAC das placas de rede, que é um endereçamento físico. O roteador, por operar na camada de Rede, usa o sistema de endereçamento dessa camada, que é um endereçamento lógico. No caso do TCP/IP esse endereçamento é o endereço IP.

Em redes grandes, a Internet é o melhor exemplo, é praticamente impossível para uma ponte saber os endereços MAC de todas as placas de rede existentes na rede. Quando uma ponte não sabe um endereço MAC, ela envia o pacote de dados para todas as suas portas. Agora imagine se na Internet cada roteador enviasse para todas as suas portas dados toda vez que ele não soubesse um endereço MAC, a Internet simplesmente não funcionaria, por caso do excesso de dados.

Devido a isso, os roteadores operam com os endereços lógicos, que trabalham em uma estrutura onde o endereço físico não é importante e a conversão do endereço lógico (Endereço IP) para o endereço físico (endereço MAC) é feita somente quando o data grama chega à rede de destino.

A vantagem do uso de endereços lógicos em redes grandes é que eles são mais fáceis de serem organizados hierarquicamente, isto é, de uma forma padronizada. Mesmo que um roteador não saiba onde esta fisicamente localizada uma máquina que possua um determinado endereço, ele envia o pacote de dados para um outro roteador que tenha probabilidade de saber onde esse pacote deve ser entregue (roteador hierarquicamente superior). Esse processo continua até o pacote atingir a rede de destino, onde o pacote atingira a máquina de destino. Outra vantagem é que no caso da troca do endereço físico de uma máquina em uma rede, a troca da placa de rede defeituosa não fará com que o endereço lógico dessa máquina seja alterado.

É importante notar, que o papel do roteador é interligar redes diferentes (redes independentes), enquanto que papel dos repetidores, hub, pontes e switches são de interligar segmentos pertencentes a uma mesma rede.

Protocolos

Os roteadores possuem uma tabela interna que lista as redes que eles conhecem, chamada tabela de roteamento. Essa tabela possui ainda uma entrada informando o que fazer quando chegar um datagrama com endereço desconhecido. Essa entrada é conhecida como rota default ou default gateway.

Assim, ao receber um datagrama destinado a uma rede que ele conhece, o roteador envia esse datagrama a essa rede, através do caminho conhecido. Caso ele receba um datagrama destinado a uma rede cujo caminho ele não conhece, esse datagrama é enviado para o roteador listado como sendo o default gateway. Esse roteador irá encaminhar o datagrama usando o mesmo processo. Caso ele conheça a rede de destino, ele enviará o datagrama diretamente a ela. Caso não conheça, enviará ao roteador listado como seu default gateway. Esse processo continua até o datagrama atingir a sua rede de destino ou o tempo de vida do datagrama ter se excedido o que indica que o datagrama se perdeu no meio do caminho.

As informações de rotas para a propagação de pacotes podem ser configuradas de forma estática pelo administrador da rede ou serem coletadas através de processos dinâmicos executando na rede, chamados protocolos de roteamento. Note-se que roteamento é o ato de passar adiante pacotes baseando-se em informações da tabela de roteamento. Protocolos de roteamento são protocolos que trocam informações utilizadas para construir tabelas de roteamento.

É importante distinguir a diferença entre protocolos de roteamento (routing protocols) e protocolos roteados (routed protocols). Protocolo roteado é aquele que fornece informação adequada em seu endereçamento de rede para que seus pacotes sejam roteados, como o TCP/IP e o IPX. Um protocolo de roteamento possui mecanismos para o compartilhamento de informações de rotas entre os dispositivos de roteamento de uma rede, permitindo o roteamento dos pacotes de um protocolo roteado. Note-se que um protocolo de roteamento usa um protocolo roteado para trocar informações entre dispositivos roteadores. Exemplos de protocolos de roteamento são o RIP (com implementações para TCP/IP e IPX) e o EGRP.

Roteamento estático e roteamento dinâmico

A configuração de roteamento de uma rede específica nem sempre necessita de protocolos de roteamento. Existem situações onde as informações de roteamento não sofrem alterações, por exemplo, quando só existe uma rota possível, o administrador do sistema normalmente monta uma tabela de roteamento estática manualmente. Algumas redes não têm acesso a qualquer outra rede e, portanto não necessitam de tabela de roteamento. Dessa forma, as configurações de roteamento mais comuns sã

Roteamento estático: uma rede com um número limitado de roteadores para outras redes pode ser configurada com roteamento estático. Uma tabela de roteamento estático é construída manualmente pelo administrador do sistema, e pode ou não ser divulgada para outros dispositivos de roteamento na rede. Tabelas estáticas não se ajustam automaticamente a alterações na rede, portanto devem ser utilizadas somente onde as rotas não sofrem alterações. Algumas vantagens do roteamento estático são a segurança obtida pela não divulgação de rotas que devem permanecer escondidas; e a redução do overhead introduzido pela troca de mensagens de roteamento na rede.

Roteamento dinâmico: redes com mais de uma rota possível para o mesmo ponto devem utilizar roteamento dinâmico. Uma tabela de roteamento dinâmico é construída a partir de informações trocadas entre protocolos de roteamento. Os protocolos são desenvolvidos para distribuir informações que ajustam rotas dinamicamente para refletir alterações nas condições da rede. Protocolos de roteamento podem resolver situações complexas de roteamento mais rápida e eficientemente que o administrador do sistema. Protocolos de roteamento são desenvolvidos para trocar para uma rota alternativa quando a rota primária se torna inoperável e para decidir qual é a rota preferida para um destino. Em redes onde existem várias alternativas de rotas para um destino devem ser utilizados protocolos de roteamento.

Protocolos de roteamento

Todos os protocolos de roteamento realizam as mesmas funções básicas. Eles determinam a rota preferida para cada destino e distribuem informações de roteamento entre os sistemas da rede. Como eles realizam estas funções, em particular eles decide qual é a melhor rota, é a principal diferença entre os protocolos de roteamento.

Tipos de Protocolos

IGP (interior gateway protocol) - Estes são utilizados para realizar o roteamento dentro de um Sistema Autônomo. Existem vários protocolos IGP, vejamos alguns:

  RIP (Routing Information Protocol)
  IGRP (Interior Gateway Routing Protocol)
  Enhanced IGRP
  OSPF (Open Shortest Path First)
  IS-IS (Intermediate System-to-Intermediate System)

EGP (exterior gateway protocol) - Estes são utilizados para realizar o roteamento entre Sistemas Autônomos diferentes. É dividido em:

  EGP (Exterior Gateway Protocol) - protocolo tem o mesmo nome que o seu tipo.
  BGP (Border Gateway Protocol)

Características

Quando se fala em roteadores, pensamos em basicamente três usos: conexão Internet, conexão de redes locais (LAN) ou conexão de longo alcance (WAN).Relembrando como vimos anteriormente podemos definir esse equipamento como sendo um modulo processador que interliga duas ou mais redes.

Para ficar mais claro seu uso, vamos dar o exemplo do uso de roteadores na interligação entre duas redes: a Internet e a rede local de uma empresa, veja figura:

O roteador típico para esse uso deve possuir basicamente duas portas: uma porta chamada WAN e uma porta chamada LAN. A porta WAN recebe o cabo que vem do backbone da Internet. Normalmente essa conexão na porta WAN é feita através de um conector chamado V.35 que é um conector de 34 Pinos. A porta LAN é conectada à sua rede local. Essa porta também pode ser chamada Eth0 ou saída Ethernet, já que a maioria das redes locais usa essa arquitetura. Existem outros tipos de conexões com o roteador, a ligação de duas redes locais (LAN), ligação de duas redes geograficamente separadas (WAN).

O roteador acima mostrado é apenas um exemplo ilustrativo, pois normalmente os roteadores vêm com mais de uma porta WAN e com mais de uma porta LAN, sendo que essas portas têm características de desempenho muito distintas, definidas pelo modelo e marca de cada roteador.

Cada uma das portas / interfaces do roteador deve receber um endereço lógico (no caso do TCP/IP, um número IP) que esteja em uma rede diferente do endereço colocado nas outras portas. Se você rodar um traceroute através de um roteador conhecido, verá que dois endereços IP aparecem para ele. Um refere-se à sua interface WAN e outro à sua interface LAN.

Na hora de se escolher um roteador ou desenhar um esquema de rede com roteadores, deve-se levar em consideração algumas características básicas encontradas nos roteadores:

  Número de portas WAN
  Número de portas LAN
  Velocidade das portas WAN
  Velocidade das portas LAN
  Redundância
  Tolerância a falhas
  Balanceamento de carga

Alguns roteadores possuem um recurso chamado redundância de call-up. Esse recurso permite ligar o roteador a um modem através de um cabo serial e, caso o link WAN principal falhar, o modem disca para um provedor e se conecta mantendo a conexão da rede local com a Internet no ar.

Alguns roteadores trazem a solução para esse problema através de recursos de redundância e tolerância à falhas. Através desse recurso, o roteador continua operando mesmo quando ele se danifica. Para entender isso, basta imaginar um roteador que possua, na realidade, dois dentro roteadores dentro dele. Caso o primeiro falhe, o segundo entra em ação imediatamente. Isso permite que a rede não saia do ar no caso de uma falha em um roteador.

Existem ainda roteadores capazes de gerenciar duas ou mais conexões entre ele e outro roteador, permitindo dividir o tráfego entre esses links, otimizando as conexões. Essa característica, chamada balanceamento de carga, é utilizada, por exemplo, em conexões ter filiais de empresas.