fazer um layout para as olimpíadas com

logo, banner e 16 botões (4 link´s)

COM:

imagem rolover
menu navigator
5 páginas
imagens das olimpíadas

home links mapa contato

no dreamweaver -

OBS: salvar botões como png, que permite fundo transparente, para não chocar com a cor do seu layout.

A validação de formulários é um dos usos mais comuns na programação Javascript. A validação de dados por meio da programação Javascript é muito fácil e rápida por que a verificação é feita no browser, sem necessitar ir até o servidor para transmitir dados.

A validação é feita para não haver inconsistência de dados quando forem enviados para a base de dados. Uma checagem no servidor seria necessário no caso do Javascript estar desligado ou se, de alguma maneira, alguém tentar driblar a validação de forma maliciosa ou por engano. Para a maioria das pessoas a validação Javascript consegue economizar muito tempo.

Para podermos trabalhar com a validação de formulário, foi criado um formulário padrão para podermos testar. A figura abaixo será o nosso exemplo:

Com uma noção de onde pretendemos chegar vamos construir o nosso formulário baseado na imagem acima:

O codigo HTML é uma estrutura de tabela com um formulário, tudo bem simples. Basta apenas prestar atenção para os nomes das caixas de entradas e dos botões radio bos para não ter problemas na hora da programação.

No formulário acima, o evento onSubmit chama uma função chamada validaForm que será responsável pela validação dos dados do formulário. Se os dados estiverem corretos retornará true e o formulário será enviado. Caso contrário uma mensagem será mostrada determinando o local do erro.

Com o formulário criado agora vamos partir para o desenvolvimento do código. Neste formulário será feita a checagem de seis caixas de entrada de dados e de um radio box.
Para validação das as caixas de entradas é feita uma verifição se foi digitado algum valor.
Para o campo e-mail a verificação é mais elaborada para saber se é um endereço de email válido.

Para o campo telefone, só são aceito números.
Para o campo Data de nascimento é verificado se a data esta correta com o padrão estabelecido.
Para o campo Sexo é verificao se algum valor foi selecionado.

Exemplo (Ao final desta matéria temos o link para visualização do resultado final):

1 function validaForm(){
2 d = document.cadastro;
3 //validar nome
4 if (d.nome.value == ""){
5 alert("O campo " + d.nome.name + " deve ser preenchido!");
6 d.nome.focus();
7 return false;
8 }
9 //validar user
10 if (d.user.value == ""){
11 alert("O campo " + d.user.name + " deve ser preenchido!");
12 d.user.focus();
13 return false;
14 }
15 //validar senha
16 if (d.senha.value == ""){
17 alert("O campo " + d.senha.name + " deve ser preenchido!");
18 d.senha.focus();
19 return false;
20 }
21 //validar email
22 if (d.email.value == ""){
23 alert("O campo " + d.email.name + " deve ser preenchido!");
24 d.email.focus();
25 return false;
26 }
27 //validar email(verificao de endereco eletrônico)
28 parte1 = d.email.value.indexOf("@");
29 parte2 = d.email.value.indexOf(".");
30 parte3 = d.email.value.length;
31 if (!(parte1 >= 3 && parte2 >= 6 && parte3 >= 9)) {
32 alert ("O campo " + d.email.name + " deve ser conter um endereco eletronico!");
33 d.email.focus();
34 return false;
35 }
36 //validar telefone
37 if (d.telefone.value == ""){
38 alert ("O campo " + d.telefone.name + " deve ser preenchido!");
39 d.telefone.focus();
40 return false;
41 }
42 //validar telefone(verificacao se contem apenas numeros)
43 if (isNaN(d.telefone.value)){
44 alert ("O campo " + d.telefone.name + " deve conter apenas numeros!");
45 d.telefone.focus();
46 return false;
47 }
48 //validar data de nascimento
49 erro=0;
50 hoje = new Date();
51 anoAtual = hoje.getFullYear();
52 barras = d.nasce.value.split("/");
53 if (barras.length == 3){
54 dia = barras[0];
55 mes = barras[1];
56 ano = barras[2];
57 resultado = (!isNaN(dia) && (dia > 0) && (dia < style="color: rgb(0, 153, 102);">isNaN(mes) && (mes > 0) && (mes < style="color: rgb(0, 153, 102);">isNaN(ano) && (ano.length == 4) && (ano <= anoAtual && ano >= 1900));
58 if (!resultado) {
59 alert("Formato de data invalido!");
60 d.nasce.focus();
61 return false;
62 }
63 } else {
64 alert("Formato de data invalido!");
65 d.nasce.focus();
66 return false;
67 }
68 //validar sexo
69 if (!d.sexo[0].checked && !d.sexo[1].checked) {
70 alert("Escolha o sexo!")
71 return false;
72 }
73 return true;
74 }

Linha 1 – Declaração da função responsável pela validação dos dados do formulário.

Linha 2 – Declaração de uma variável para economizar tempo e prováveis erros de digitação.

Linha 4 – Verificação se foi digitado algum valor para o campo nome. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 10 – Verificação se foi digitado algum valor para o campo user. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 16 – Verificação se foi digitado algum valor para o campo senha. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 22 – Verificação se foi digitado algum valor para o campo email. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 28 – Declaração de uma variável que armazenara a posição do caractere “@” na caixa de entrada email.

Linha 29 – Declaração de uma variável que armazenara a posição do caractere “.” na caixa de entrada email.

Linha 30 – Declaração de uma variável que armazenara a quantidade de caracteres digitados na caixa de entrada email.

Linha 31 – Estrutura condicional para verificação se o caractere “@” está no mínimo depois de três letras, o caractere “.” está no mínimo depois de seis e se foi digitado no mínimo 9 letras. Se retornar falso, é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 37 - Verificação se foi digitado algum valor para o campo telefone. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 43 - Verificação se o valor digitado no campo telefone possui apenas números. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 50 – Declaração de uma variável que armazena uma nova Data.

Linha 51 - Declaração de uma variável que armazena o valor do ano no formato completo com 4 caracteres.

Linha 52 – Declaração de uma variável que separa o valor da caixa de entrada referente a data de nascimento e coloca em uma matriz, a “/” é utilizada para separar os valores entre elas, é suposto ter 3 valores referente a dia, mês e ano respectivamente.

Linha 53 - Estrutura condicional para verificação se tem 3 valores para a matriz criada. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 54 - Declaração de uma variável que recebe o primeiro valor da matriz, valor esse referente ao dia.

Linha 55 - Declaração de uma variável que recebe o segundo valor da matriz, valor esse referente ao mês.

Linha 56 - Declaração de uma variável que recebe o terceiro valor da matriz, valor esse referente ao ano completo com 4 caracteres.

Linha 57 - Declaração de uma variável que faz a verificação das variáveis criadas anteriormente referente a dia, mês e ano, é feita uma checagem se os valores são números e se estão no padrão estabelecido.

Linha 58 - Estrutura condicional para checagem se o resultado da verificação dos dados digitados. Se retornar falso é é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 69 - Verificação se foi selecionado algum valor referente ao sexo. Se retornar falso é enviado uma mensagem de erro e a caixa de entrada recebe o foco para se feita a correção.

Linha 73 – Se todos os valores foram digitados corretamente a função vai retornar true e o formulário será enviado.

Sempre lembrando que essa validação é boa, mas pode ser feito muito mais coisas para aprimorar, até mesmo trabalhar com programação orientada a objeto com o intuito de criar métodos que façam a análise dos dados.

Por: Marcelo Britto | Publicado em: 31.05.2006

Este é, com certeza, um dos temas mais polêmicos e discutidos entre webdesigners e profissionais free-lancers. Perguntas como: Quanto custa um site? Quanto cobrar por um site? Qual o preço de uma homepage? Estão presentes em diariamente conversas informais, reuniões e também na curiosidade de qualquer empresário que deseja fixar presença na internet.

Normalmente os autores de artigos que tratam sobre este tema costumam sair pela tangente, utilizando expressões vagas e que não apresentam informações novas.

Durante os meses de março a maio de 2006, realizei uma enquete com diversos webdesigners de diferentes regiões do Brasil e obtive as seguintes informações:

Existem diferentes tamanhos de sites. Para facilitar nossa compreensão, dividi em três tipos: básico, intermediário e avançado. Evidente que o assunto não se esgota aqui, pois existem milhões de particularidades que devem ser levadas em conta.
Dependendo da região do Brasil, os valores cobrados por um site básico, podem superar os valores cobrados em outra região por um site que exija maior trabalho.
Mais de 30% dos profissionais que responderam a enquete, disseram não estabelecer nenhum tipo de contrato por escrito com seus clientes, valendo-se apenas do acordo verbal e da confiança.
Os valores cobrados são os seguintes:

Site básico: é composto por poucas páginas, não usa recursos em flash e nem banco de dados. Possui algumas fotos e imagens e conta um layout igualmente básico.
Região Centro-Oeste: de R$ 650,00 a R$ 1.500,00 (R$ 720,00 – média)
Região Nordeste: de R$ 720,00 a R$ 1.400,00 (R$ 800,00 – média)
Região Norte: de R$ 490,00 a R$ 980,00 (R$ 650,00 – média)
Região Sudeste: de R$ 980,00 a R$ 1.800,00 (R$ 1.300,00 – média)
Região Sul: de R$ 600,00 a R$ 1.400,00 (R$ 900,00 – média)

Site intermediário: é composto por um número maior de páginas, utiliza pequenos recursos em flash e pode ter algum recurso de banco de dados (notícias). Possui algumas fotos e imagens e conta um layout um pouco mais refinado.

Região Centro-Oeste: de R$ 850,00 a R$ 1.800,00 (R$ 1.100,00 – média)
Região Nordeste: de R$ 920,00 a R$ 1.730,00 (R$ 1.230,00 – média)
Região Norte: de R$ 790,00 a R$ 1.250,00 (R$ 980,00 – média)
Região Sudeste: de R$ 1.700,00 a R$ 3.300,00 (R$ 2.200,00 – média)
Região Sul: de R$ 980,00 a R$ 2.400,00 (R$ 1.550,00 – média)

Site avançado: é composto por várias páginas, usa recursos em flash e banco de dados. Possui fotos e imagens trabalhadas e conta um layout sofisticado.
Região Centro-Oeste: de R$ 1.300,00 a R$ 2.800,00 (R$ 1.800,00 – média)
Região Nordeste: de R$ 1.500,00 a R$ 3.730,00 (R$ 2.440,00 – média)
Região Norte: de R$ 1.190,00 a R$ 1.850,00 (R$ 1.450,00 – média)
Região Sudeste: de R$ 2.700,00 a R$ 7.300,00 (R$ 3.400,00 – média)
Região Sul: de R$ 1.670,00 a R$ 4.200,00 (R$ 2.630,00 – média)

Algumas observações que são muito importantes e precisam ser consideradas:

A grande maioria dos profissionais disse que os valores são negociáveis, ou seja, estão dispostos a conceder descontos aos clientes.
Alguns profissionais se autodeclararam “barateiros”, ou seja, cobram valores que eles próprios consideram abaixo do mercado.
Alguns profissionais disseram não trabalhar com sites “básicos”, preferindo apenas projetos maiores, que lhes proporcionam maior remuneração.
Conforme comentei no início deste artigo, a enquete não considerou projetos específicos, que envolvam desenvolvimento de sistemas complexos. Levamos em conta, apenas sites cuja estrutura é previsível.
Se você deseja ajudar a manter estas informações atualizadas, peço que entre em contato informando os valores cobrados para cada “modelo” citado. Todas as informações fornecidas são confidenciais e sigilosas.

Um abraço e até a próxima!

Marcelo Britto é designer, consultor em projetos de internet, especialista em marketing digital, instrutor de webdesign e ministra treinamentos e palestras sobre webmarketing.

Fonte: Portaldigidesign

Fiquei sabendo na sexta que site com frames nem se usa mais, ou tá fora de moda...
Qué cosa...
Bom, a Michelle deu uma lição de casa. Sei que tem que fazer tres paginas, a home e mais duas, nem comecei ainda, e tô sem o enunciado. Pera aí, deixa eu ver se tem alguém online prá me passar... É, não tem, mas tá limpo, vou treinar uns topos aí e uns planos de fundo... inté!

Oii gente
Vim aqui compartilhar um site que eu achei e ameeeeei, nele tem varios tutoriais de photoshop e em video também

é isso ai, espero que gostem

Bjinhusss da Leticia ^^.

Bom, prá resumir, entrei em Pânico e me confundi toda. No final das contas, me socorreram: o Thúlio, o Diego, o Maykon, o Guti e a Vanessa... todos tentaram me ajudar e ajudaram bastante, principalmente o Maykon e o Thúlio (obrigada meus amorzinhos). Mesmo assim acho que alguma coisa deu errado na hora que eu salvei, e pelo que estou vendo aqui devo ter entregado o arquivo errado prá Michelle... Como diz a Vanessa - Me Leva!!! rsrsrs

Agora vou tentar lembrar de tudo e fazer aqui e agora, sozinha e bem concentrada... (se meus filhos deixarem).

Prá começar, ela passou um arquivo chamado "Atividade_Frame" e pediu que abríssemos:

São imagens para fazer botões, topo, fundo e página principal para montar as páginas, que montarão os frames que montaram "A PÁGINA" ou "O SITE" .

(Até aí tudo bem... caraca! Acho que esse plano de fundo não rolou, pelo menos não lembro de ter ouvido falar dele).

Bom, depois a gente tinha que salvar essas imagens em uma pasta, tipo: meu site, ou site para atividade, etc... Abri uma pasta chamada "site para nota 110408 - sol33" , copiei e salvei todas essas imagens dentro dela.
OBS: para rodar o site, todos os "pedaços" têm que estar dentro da mesma pasta.

Bom, agora... Hum... Fazer as páginas em html para depois transformar em frames (os pedaços): o topo, com a imagem topo - dã - e a parte de baixo, inserindo a imagem principal. Meu, prá complicar teve o lance da tabela que até agora não sei como entra na parada. Vou ver o que eu fiz, ou o que fizemos, pera aí...

Bom, isso é uma das páginas com código html, a primeira com essa imagem inserida. Depois faltava fazer a outra página inserindo a imagem chamada "principal" que seria a parte principal (ou parte de baixo) do site, e ainda inserir os botões que se transformariam no menu... ufa! Depois pegar tudo, juntar em outra página que montaria tudo em frames (a página que monta o Frankstein, também conhecida como index, aquela que mostra o site inteiro, pronto). Prá acabar de "piiiii" com tudo, ainda tinha que colocar links nos "piiiii" dos botões. Bom, ta aí o código dessa primeira parte:

<html>
<head>
<title>TOPO</title>
</head>

<body>

<img src="topo.jpg" align="center">

</body>
</html>

Consegui. Foi só o começo. Agora tem que fazer outra página html com a imagem chamada "principal" inserida, sendo que essa página depois vai ser inserida como arquivo em outra página, junto com a primeira, formando os dois frames que formarão " a página" ou "o site". Vamos lá então, xovê...

CÓDIGO:

<html>
<head>
<title>PRINCIPAL</title>
</head>

<body>

<img src="principal.jpg" align="center">

</body>
</html>
Tá, agora tem que juntar as duas partes, inserir as imagens que são os botões que juntos formarão o menu e... inserir os links entre eles dentro de uma tabela (precisa, prá fazer esse menu). Tá, agora o bicho pegou!
Vamos à terceira página que é o terceiro código html, aquele dos frames, o bonzão que vai fazer aparecer o site!

VAMOS PELO MÉTODO DO JACK: POR PARTES!

<html>
<head>
<title> O SITE </title>
</head>

<frameset rows = "50%,*" frameborder= "yes" border= "10" bordercolor = "#F2863B">

<frame src = "topo.html" scrolling = "no" noresize="noresize">
<frame src = "principal.html" scrolling = "no" noresize="noresize">


</frameset>

</html>

Agora tem que pegar o código da página que tem o topo: o "topo.html" e editar inserindo o código de tabela. Aquela figura (jpg) do topo fica inserida numa tabela específica, só para ela, o que na verdade é uma célula gigante e solitária. Depois de pular uma linha com a tag "tr" tem que fazer outra tabela com várias células colocando a imagem de cada botão e de cada link dentro de cada uma delas (das células).

<html>
<head>
<title></title>
</head>

<body>


<table width="800" border= "0" align="center">
<tr>
<td><img src="topo.jpg"</td>
<tr>

</table>

<table align="center">
<tr>
<td> <a href = "http://scorpionsol.blogspot.com"> <img src="bot_home.jpg"></a></td>
<td> <a href = "http://saladaweb.blogspot.com"> <img src="bot_contato.jpg"></a></td>
<td> <a href = "http://edsolll.blogspot.com"> <img src="bot_empresa.jpg"></a></td>
<td> <a href = "http://www.palcomp3.com.br/edsol"><img src="bot_equipe.jpg"></a></td>
<td> <a href = "http://www.globo.com"> <img src="bot_vendas.jpg"></a></td>

</body>
</html>
Bom, agora vou rodar o index ( o código que inclui tudo) prá ver se ficou bom. Me deseja boa sorte:

Gozado, eu coloquei "align=center" no "principal" e não ficou alinhado com o topo... não adianta, vou perguntar prá Michelle depois eu conserto.

Bjs

Sol

CÓDIGO:

<html>
<head>
<title>jsahjkhsajfkh</title>

</head>
<body>

<a href="http://www.uol.com.br"><img src="home.jpg"></a>

</body>
</html>

CÓDIGO

<html>
<head>
<title>página com plano de fundo</title>
</head>
<body background="planodefundo.jpg">


</body>
</html>