O código que se segue é bastante básico portanto se algum especialista em javascript quiser ajudar a criar um código igualmente simples e eficaz com uma estrutura melhor eu agradeço.

<SCRIPT>
function validate() {
var nome=form1.nome.value;
var empresa=form1.empresa.value;
var telefone=form1.telefone.value;
if (nome=='') {
alert('O seu Nome é um campo obrigatório');
return false;
}
if (empresa=='') {
alert('Por favor indique qual a Empresa');
return false;
}
if (telefone=='') {
alert('O campo Telefone é um campo obrigatório');
return false;
}
}
</SCRIPT>


Na primeira parte declaro variáveis caso tenha de adicionar mais código para trabalhar com o valor dos campos. A seguir faço a comparação caso os campos estejam vazios lança o alerta.
De forma a tornar o formulário mais coeso deveria verificar também se os campos não tiverem um determinado numero de caracteres para não validar.
Por agora este código chega para o que pretendo que é lançar um alert caso o cliente não preencha os campos obrigatórios.

Agora de forma a que o formulário não processe antes de verificar se os campos obrigatórios estão preenchidos é necessário antes da action declarar o seguinte:

onsubmit="return validate();"

Assim quando o formulário for submetido primeiro chama a função validate().
Como podes ver o código é relativamente simples, pode ser melhorado em vários aspectos e adaptados como verificar se o telefone possui apenas valores numéricos, se o nome ou empresa não tem espaços apenas para não ficarem vazios e se têm mais de 1 ou 2 caracteres, etc…

Ficam as sugestões para melhorares o código e caso o faças, partilha-o comigo.

Caso queiras aprender mais sobre JavaScript aconselho-te por começares a ler o tutorial de javascript da w3Schools

A solução é então usar JavaScript para detectar se os campos estão bem preenchidos ou não e nos dias de hoje não se justifica usar prompts para alertar o cliente de algo.
A solução é relativamente simples com jQuery.

//Filtros
var filters = {
requerido: function(el) {return ($(el).val() != ” && $(el).val() != -1);},
email: function(el) {return /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/.test($(el).val());},
telefono: function(el){return /^[0-9]*$/.test($(el).val());}};
// Extenções
$.extend({
stop: function(e){
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
}
});
// Código
$(document).ready(function(){
$(”form.validable”).bind(”submit”, function(e){
if (typeof filters == ‘undefined’) return;
$(this).find(”input, textarea, select”).each(function(x,el){
if ($(el).attr(”className”) != ‘undefined’) {
$.each(new String($(el).attr(”className”)).split(” “), function(x, klass){
if ($.isFunction(filters[klass]))
if (!filters[klass](el)) $(el).addClass(”error”);
});
}
});
if ($(this).find(”.error”).size() > 0) {
$.stop(e || window.event);
return false;
}
return true;
});
});


Explicação

A parte de processamento do script começa com $(document).ready o que faz com que o script seja processado apenas quando a página for carregada.

Quando o conteúdo é carregado o script percorre todos os formulários procurando uma class de CSS chamada validable (class=”validable”), podes editar esta variável no código do script, e adiciona um listener quando o formulário for submetido.

Após o formulário ser submetido o script percorre todos os elementos <input />, <textarea /> e <select /> procurando as suas classes e comparando-as com as declaradas na zona dos filtros.
O objecto filters é composto de uma série de métodos que são efectuados para validar os elementos de acordo com as classes.

Se o elemento do html não tiver uma classe declarada é adicionada a class error (class=”error”) ao elemento e não é efectuada a verificação do campo.

Podes testar o script aqui. Este tutorial foi adaptado para português. O tutorial original pode ser visto no anieto2k.com

• Alinhamento vertical com Line-Height

  line-height:24px;
  
  Quando se atribuí uma altura (height) fixa a um bloco pode-se usar a propriedade line-height para centrar verticalmente o conteúdo.
  Mais sobre o line-height:
  http://www.w3schools.com/css/pr_dim_line-height.asp
  http://www.maujor.com/tutorial/elinhas.php

• Impedir que o conteúdo saia fora do layout

  overflow:hidden;

  Este código irá esconder todo o conteúdo que sair fora do layout. Imaginando que temos um DIV com 500px de largura e um link enorme. O texto do link que ultrapassar a largura definida (500px) não irá aparecer.
  Se quiserem que apareça um scroll para que o conteúdo mostre todo e apenas quando o conteúdo ultrapassar as dimensões definidas podem usar o seguinte código:

  overflow:auto;

• Impedir que o texto se parta

  white-space:nowrap;

  Podem ver um exemplo aqui do que acontece quando se usa o nowrap.

• Centrar blocos horizontalmente

  margin:0 auto;

  O valor auto funciona para as margens laterais (esquerda e direita). Isto fará com que o bloco fique centrado horizontalmente.

• Remover borders de links activos

  Quando se clica num link aparece um border á sua volta. Já falei disso aqui e como remover este link. Nada mais simples:

  outline:none;



Sem dúvida, excelentes dicas

Código HTML

A tag BUTTON tem uma maior capacidade de personalização que usando input type=submit.
Esta tag foi introduzido com a versão 4.01 do HTML e permite, por exemplo, que sejam adicionadas imagens dentro dele.

Fica aqui algumas referencias úteis:

• http://particletree.com/features/rediscovering-the-button-element/
• http://www.htmlhelp.com/reference/html40/forms/button.html
• http://www.w3schools.com/tags/tag_button.asp

Sem dúvida que a grande vantagem da TAG BUTTON é a sua capacidade de ter conteúdo e é essa capacidade que vou explorar.

<button><span><em>Texto Botão</em></span></button>

O objectivo com este código é criar um botão que permita ter um comprimento variável adaptando-se ao seu conteúdo de forma a que não seja necessário editar o CSS cada vez que quero criar um novo botão.

Após o código HTML é necessário criar uma imagem suficientemente larga para que independente da largura do botão ela se adapte sem quebras. De preferência crio sempre uma imagem com a largura do contentor onde o texto se encontra. Por exemplo se o texto tiver dentro de um DIV com 550 pixels de largura crio uma imagem com 550 pixels. Desta forma sei que por mais longo que o texto seja não irá quebrar.

Imagem usada no tutorial:

CSS

Em seguida vamos aplicar a imagem. A TAG BUTTON irá funcionar como contentor, o elemento SPAN e EM ficam com um estilo geral:

button {
border:none;
background:none;
padding:0;
margin:0;
width:auto;
text-align:center;
height:40px;
}


button span, button em{
display:block;
margin:0;
height:40px;
font:9pt Helvetica, Verdana, Arial, sans-serif;
color:#000000;
}

Em seguida aplicamos a imagem como background do SPAN, a imagem ficará da esquerda para a direita mostrando o canto esquerdo e o fundo do centro do botão:

button span{
padding-left:20px; /* mostrar canto esquerdo arredondado */
background:url(btn_bg.png) no-repeat 0 0;
}


Agora o elemento EM a onde se encontra o texto:

button em{
padding-right:20px;
background:url(btn_bg.png) no-repeat 100% 0; /* os 100% serve para adaptar a largura do botão */
line-height:38px;
}

Este código foi testado em Firefox 2, Internet Explorer 7 e 8 em Windows XP. Agradeço se alguém testar nos outros browsers e sistemas operativos.

Referência: http://www.alistapart.com/articles/slidingdoors/

Há uns tempos atrás dei de caras com uma library em javascript que torna o IE mais de acordo com os standards nomeadamente no que se trata des CSS e transparência em imagens PNG.

Site do Script: http://dean.edwards.name/IE7/

Como instalar

Basta colocarem o seguinte código dentro das tags <HEAD></HEAD>

<!--[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js” type=”text/javascript”></script>
<![endif]–>

Podem fazer download do ficheiro JavaScript aqui: http://code.google.com/p/ie7-js/downloads/list.

O ficheiro ZIP trás diversos ficheiros:

• ie7-core.js - É um modulo fundamental. Contem um motor que permite que CSS funcione correctamente.
• ie7-html4.js - Arranja tags HTML incorrectas.
• ie7-layout.js - Permite o suporte do box-model do W3C e permite o suporte das propriedades CSS min-width, max-width e min-height.
• ie7-css2-selectors.js - Permite usar selectores do CSS2.
• ie7-graphics.js - Permite que o browser suporte transparencia PNG.
• ie7-fixed.js - Permite o uso da propriedade Fixed no posicionamento de imagens.
• ie7-standard-p.js - Um compacto de todos os scripts em cima, desta forma basta chamar apenas 1 script.
• ie7-css3-selectors.js - Permite o suporte de selectores CSS3.
• ie7-css-strict.js - Todos os selectores CSS são convertidos em classes do IE7.
• ie7-overflow.js - Permite o uso de overflow:visible.
• ie7-recalc.js - Permite o uso de document.recalc().
• ie7-dynamic-attributes.js- Permite o suporte de selectores com atributos dinâmicos.
• ie7-squish.js - Bug fixes.

Mais informações sobre os ficheiros em:
http://dean.edwards.name/IE7/usage/configure.html

Para que o script saiba quais os ficheiros em que deve actuar devem incluir -trans.png no nome das imagens.

Este script usa a propriedade filter que impede, no IE6, que se consiga posicionar ou repetir uma imagem de fundo PNG, a solução pode passar por criar um div que permite a inclusão da imagem como fundo.

Podem ler mais sobre este script em:
http://trevordavis.net/blog/tutorial/the-ultimate-png-guide/

Site Oficial: IE7-JS

Breve descrição

A secção extensível é composta por 2 partes:

1. O cabeçalho
2. O conteúdo

O cabeçalho

O cabeçalho é composto por um <span> e por uma de cabeçalho (h2) que ambos serão estilizados com CSS.
Ao clicar no cabeçalho irá mostrar ou ocultar o conteúdo.

O conteúdo

O conteúdo terá um texto de exemplo e um link que permitirá ocultar todo o conteúdo.

Primeiro Passo, o código HTML:

O link chama uma função em javascript chamada cabracega que mostra ou oculta o conteúdo do div com a ID de noticias. Este código pode ser usado para mais de uma secção extensível. Para tal basta atribuir nomes diferentes as secções. (noticias1, noticias2, noticias3…)
Caso contrário poderá causar algum conflito.

Segundo Passo: Código CSS

Terceiro Passo: Código Javascript

O JavaScript vai buscar a ID da secção através de um link:

Resultado final

Em teoria o que vamos fazer é gravar o tempo no inicio da página, gravar o tempo no final da pagina e calcular o tempo que demorou.

O código seguinte deve ser colocado no inicio da página:

$micro_tempo = explode(” “,microtime());
$micro_tempo = $micro_tempo[0] + $micro_tempo[1];
$tempo_inicial = $micro_tempo;

A função microtime() dá-nos os micro-segundos no inicio da página.
Usando a função explode() “transforma” os micro-segundos num vector.

Agora falta-nos ver o tempo no final da página, comparar o tempo final com o tempo inicial e mostrar o resultado. $tempoTotal = ($tempo_final - $tempo_inicial).

O codigo seguinte deve ser colocado no final da página:

$micro_tempo = explode(” “,microtime());
$micro_tempo = $micro_tempo[0] + $micro_tempo[1];
$tempo_final = $micro_tempo;
$tempototal = ($tempo_final - $tempo_inicial);
echo “Pagina carregada em:”. round($tempototal,3) .” segundos”;

Aqui repetimos os mesmos passos do inicio da página, comparamos o tempo final com o inicial de onde retiramos o tempo total de carregamento da página ($tempototal = ($tempo_final - $tempo_inicial);).

round($tempototal,3) serve para arredondar a variavel $tempototal para 3 casas décimais.

Basta seguir os seguintes passos:

1. Vamos a uma página qualquer, digamos http://www.blog.nonsensebb.com
2. Limpamos a barra de endereço
3. Inserimos o seguinte código:
   javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
4. E começamos a editar

Isto acontece devido ao atributo contentEditable que permite editar o conteudo e o atributo designMode que permite editar o documento. Podem ver os resultados em baixo.

Hoje em dia para além de vírus existem outras ameaças com um potencial de perigo tão grande ou maior que um vírus, é o caso de spyware, adware, [tag]phishing[/tag], [tag]root kits[/tag] e [tag]spam[/tag]. Grande parte dos cyber crimes estão relacionados com ameaças que não são vírus.

Sabendo o que é:

Adware/Spyware:
Trata-se de qualquer software clandestino que efectua diversas actividades sem o consentimento do utilizador. Esta é a definição generalizada de qualquer adware ou spyware e embora a definição possa variar, irei descrever adware como qualquer programa que esteja instalado no computador e exibe anúncios não solicitados, normalmente sob forma de pop-ups ou que reúnem informação comercial sobre o utilizador para fins de marketing.
informação essa que é normalmente vendida a empresas de publicidade e marketing.

Spyware reúne informação mais pessoal como por exemplo os sites que visitamos, número do cartão de credito e talvez algumas passwords e envia essa informação através da [tag]internet[/tag] para alguém não identificado.
Alguns programas de adware/spyware alteram a página de entrada do browser para páginas fazem propaganda a algo.

Phishing:
É um esquema complexo com a finalidade de fazer com que um utilizador revele informação pessoal, normalmente relacionada com dados bancários como acesso a contas, números de cartões de credito, etc… É um acto bastante comum hoje em dia na internet, é divulgado via email e aparenta ser um email da entidade bancaria ou outra empresa legitima. A vitima é levada a um site idêntico em todo o seu visual ao da entidade bancaria ou empresa e é pedido para que insira informação pessoal como os dados de acesso a determinada conta.

Embora grande parte da propagação dos sites de phishing seja feita através de emails, mensagens instantâneas através do MSN Messenger, Yahoo Messenger, ICQ, etc… já foram reportados casos em que era feita via de fax.

Root kits:
São uma série de programas ou ferramentas utilizadas por cyber criminosos para terem controlo de outros computadores. É frequente que um Root Kit passe despercebido por software de segurança como um antivírus, e pode introduzir um Trojan que abre portas no computador que permite que alguém tenha acesso ao seu computador.

Spam:
São emails não solicitados com finalidade de fazer propaganda a algo. São chatos, são aos milhões ou biliões por dia e é impossível de os parar ou filtrar a 100%.

“Vamos criar uma função que vai gerar a nossa password que irá conter caracteres ao calhas utilizando o método charAt() que serve para seleccionar um caracter isolado numa cadeia de caracteres.”

Criei um tutorial de como criar um sistema que gera uma password com caracteres ao calhas, numeros, lowercase, uppercase e ainda a possível inclusão de outros caracteres.

Podem visitar o tutorial aqui: http://muiomuio.net/javascript-sistema-de-password/