Antes de começar a ler, veja aqui o que é ajax e como ele funciona.

Para começar temos que fazer o nosso html. Vou me ate somente a um caso simples, um formulário que tenha nome e telefone. Para escrever o formulário, siga os padrões da W3C de validação.

Os inputs ficam assim:

<input type=”text” id=”str-nome” name=”str-nome” />

<input type=”text” id=”str-telefone” name=”str-telefone” />

<input type=”button” id=”button-enviar” value=”Enviar”/>

Após importar o jquery começamos a escrever nosso jquery:

$().ready(function(){

$(“#button-enviar”).click(function(){

strNome = $(“#str-nome”).val();

strTelefone = $(“#str-telefone”).val();

$.post(“salvar-contato.php”,

{ nome: strNome, telefone: strTelefone}

);

});

});

Então vamos entender o que acontece. Seguinte a ordem do código:

1. Testamos o evento de quanto o $(), ou seja, o document estiver pronto (ready), começamos a executar o jquery
2. Escutamos o evento de quando clicarem no botão Enviar
3. Quando clicarem no botão executamos algum código
4. O nosso código vai pegar o values dos inputs de telefone e nome e vai guardar em variáveis
5. Em $.post vamos executar o AJAX. Nessa função post nós setamos para qual é página (“salvar-contato.php”) que vamos enviar os dados de nome e telefone. Nessa função, também, vamos passar o dados, usando um array: “{nome: strNome, telefone: strTelefone}”. Esse array diz que no PHP, ou ASP, o qualquer linguagem que for, você vai acessar os dados através de “nome” e “telefone”. Por exemplo, em PHP você acessaria $_POST['nome']. Lembrando que strNome e strTelefone são os valores pegados pelo .val().
6. FIM !

No arquivo PHP que você acessa o banco. Se ainda tem dúvidas, me envie suas perguntas!

• Direcionar o usuário para onde ele deveria ir
• Dar dicas sobre como não ocorrer mais o erro
• Colocar um campo de busca nessa página para ele se achar

E é bem simples de fazer isso. No arquivo .htaccess colocamos a seguinte linha:

ErrorDocument 404 http://meusite.com/404.php

E pronto! Dessa forma, sempre que ocorrer um erro de página não encontrada ele te redirecionará para essa página! Pensem nisso para outros erros como:

• 401 – Não autorizado
• 403 – Proibido
• 500 – Erro interno do servidor

Até !

Agora vamos entender como que funcionam endereços como http://luizjanela.wordpress.com/2009/02/02/reescrenvendo-urls-2/.

O arquivo .htaccess terá o seguinte formato (antes! não esqueçam de habilitar o mod_rewrite no httpd.conf ):

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^blog\/([a-z0-9\-]+)$ visualizarNoticia.php?titulo=$1$4
</IfModule>

Na 3ª linha seguimos a mesma idéia da parte 1. Uma expressão regular, seguida do real caminho que ele vai acessar.

Aqui a mágica acontece. No seu CRUD ou VIALE, temos que ter um campo para a escrita do permalink relativo aquela notícia. Lembre-se que esse campo será de registro único (não podem ter 2 notícias com o mesmo permalink).

No GET da página visualizarNoticia, basta pegar o permalink passado e acessar os dados da noticia.

Outra coisa é MUITO IMPORTANTE! No caso que eu dei como exemplo: http://luizjanela.wordpress.com/2009/01/21/reescrevendo-urls/ reparem que são usadas ” / ” para mostrar que estamos entrando nos dados, como uma hierarquia. Isso gera um problema de caminhos, pois o navegador vai interpretar isso como pastas. Então, seu você estiver usando URLs relativas como: “../” ou “./” vão ocorrer erros ao tentar acessar os arquivos. Para resolver isso é simples: use URLs absolutas como: “http://www.meusite.com.br/contato”, “http://www.meusite.com.br/css/import.css” e tudo dará certo =)

See ya!

• Em qual resolução as pessoas têm acessado seu site
• Através de qual navegador elas têm acessado
• Quantas visitas diárias, mensais, semanais e entre quaisquer duas datas que vc escolha
• Quanto tempo as pessoas ficam em média no seu site
• Uma listagem completa de todas as páginas acessadas e quanto tempo ela foi vista em média
• Atráves de qual tipo de conexão as pessoas acessam: discada, banda larga, a cabo e zás
• Cobertura geográfica das visitas ao seu site! Você pode ficar sabendo que te visitaram lá de Hong Kong! =)
• Através de qual o sistema operacional a visita foi feita
• …

UFA ! Chega de propaganda do Google Analytics que eu não to ganhando nadinha em troca =)

É importante relembrar que isso tudo é GRATUITO !

• site:www.ejcm.com.br      – páginas indexadas em seu site
• link:www.ejcm.com.br      – páginas que fazem referência à página principal do seu site
• cache:www.ejcm.com.br  – o cache atual do seu site
• info:www.ejcm.com.br      – Informações que temos sobre o seu site
• related:www.ejcm.com.br- Páginas que são semelhantes ao seu site

Me ajudou bastante =)

site.com/visualizarNoticia.php?id=x por site.com/noticia/x agora sim ! Para ser mais rápido o post e todos entenderem a idéia, vou fazer o seguinte: vou ensinar o básicão que seria esconder a terminação do arquivo: site.com/contato.php para site.com/contato, se quiserem alguma coisa mais especifíca, deixem um comentário aqui !

É importante ter em mente que essa URLs limpa e semantica ajudam a aumentar 1000% a SEO do seu site. É bem simples implementar isso.

Pra começar, precisamos habilitar o mod_rewrite do nosso apache. Pra quem usa xampp é só ir no arquivo xampp/apache/conf/httpd.conf. Na linha que tem o “mod_rewrite” (aconselho que deem um search pelo arquivo, mais prático) descomentem ela (é só tirar o tralha ‘#’ do início da linha).

O próximo passo é o que faz a mágica acontecer.

Criem um arquivo .htaccess só que sem nome. Nele teremos o seguinte:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^([a-z]+)$ $1.php
</IfModule>

Confesso que as linha 1,2,4 eu apenas copiei. Logo, é sobre a 3ª que eu vou falar. É bem simples o que temos aqui.

RewriteRule é a regra sob a qual a reescritura da URL será feita. Isso é feito através de uma expressão regular e logo após como você vai usar essa expressão regular. No nosso exemplo, a expressão regular é ^([a-z]+)$ que significa que só vou aceitar letras minúsculas (‘[a-z]‘), sendo que tenho que ter pelo menos uma (‘+’). Logo após, temos o $1.php, esse ‘$1′ significa que ele vai usar a primeira parte da expressão regular, como só temos uma “parte”, tudo certo. Então ele pega a 1ª parte e concatena com o .php e abre a página normalmente.

Se alguém tiver alguma dúvida, fiquem a vontade !

Agora com algo bem melhor que o último post =)

Depois de postar o anterior, pesquisei mais a fundo e consegui o seguinte : no notepad++ temos os chamados Macros que são gravações feitas no próprio editor.

Mas como assim ? É fácil:

1. No menu Macros > Iniciar Gravações, você inicia a gravação.
2. Na tela de edição de texto, você escreve o que quer gravar, por exemplo : “border: 1px solid red;”
3. No menu Macros > Parar Gravação, você encerra a gravação.
4. Logo após, vá em Macros > Salvar Gravação e escolha o nome e o atalho para aquele Macro

Pronto ! Fácil !

Caso não funcione, verifique se o atalho escolhido já estava sendo usado e altere o que você escolheu em Configurações > Mapa de Atalhos > Macros e só dar um dbclick no seu macro (y)

Aqui eu usei Ctrl + Shift + B para escrever o “border: 1px solid red;”, já está sendo de ótimo uso !

Hoje, eu tava editando o CSS de um projeto meu, e me cansei de ficar escrevendo “border: 1px solid red;” toda hora para ficar debugando meu CSS.

Então, o que eu fiz: no notepad++, temos o atalho Ctrl + Space que é o auto-complete. Pois é, mas de onde ele tira os “completes” ? Existe uma pasta que se chama API, são arquivos XML com as palavras reservadas das linguagens que o notepad++ completa. Para acessá-la eu uso : Notepad++\plugins\APIs.

Na região das keyWords da letra B, eu adicionei a linha, como se fosse a 1ª palavra reservada com a letra B :

<KeyWord name=”azimuth” />
<KeyWord name=”border: 1px solid red;” />
<KeyWord name=”background” />
<KeyWord name=”background-attachment” />
<KeyWord name=”background-color” />

Agora, para escrever o debug com a borda, só preciso de ‘b’ + (Ctrl + Space) + Enter !

Guardem essa idéia para outras linguagens e casos, pode ser que sirva tbm. =]

A idéia é simples. Sigam pelas imagens. Tem um imagem, e quando passar o mouse sobre ela, sobe um caixinha com um texto qualquer. Ao sair com mouse dali, ela se esconde. Moleza!

Normal ( sem o mouse ) :

Hover ( com o mouse ) :

Para pegar o fonte é só clicar aqui

No html temos, como vemos no arquivo, não tem nada demais.

No CSS começam as maldas (está tudo bem simples, não reparem hehe):

*{
font-family: “Bookman Old Style”;
position: relative;
}

div.pai{
height: 220px;
overflow: hidden;
width: 638px;
}

div.pai div.interna{
background-color: black;
color: white;
font-size: 30px;
font-style: italic;
letter-spacing: -2px;
padding: 10px;
text-align: right;
width: 618px;
}

Ignorem coisas como “letter-spacing”, “font-family”, “font-style”, “font-size”, isso é apenas fru-fru. Agora vamos à malda mor do efeito. Reparem aqui:

div{
height: 220px;
overflow: hidden;
width: 638px;
}

Eu defino um altura e largura para a div e dou overflow:hidden. VUALÁ ! O overflow:hidden é resposável por “esconder” o resto do conteúdo que não couber dentro dos 638×220. Ou seja, quando abrimos a página, a caixinha com o texto já está lá, só que escondida dentro da div.pai.

Como as div’s são elementos em bloco, eles pulam linha de um para o outro. Para que a caixinha com o texto “suba” temos que usar margin-top negativo. E é ai que entra o jQuery :

$(“div.pai”).hover(
function(){
$(“div div.interna”).stop();
$(“div div.interna”).animate({marginTop: “-60px”, opacity: 0.7}, 400 );
},
function () {
$(“div div.interna”).stop();
$(“div div.interna”).animate({marginTop: “0px”, opacity: 0.3}, 600 );
}
);

Eu uso o método “animate” que é nativo do jQuery para fazer essa mudança de margin, não de forma brusca como seria usando o método “css” mas sim de forma transitória, fazendo um movimento. Uso também o opacity para dar um efeito interessante e o mesmo com o tempo do efeito.

É importante ver o método stop. Caso eu não tivesse usado, e ficasse passando e tirando o mouse da imagem o navegador iria guardar todos esses movimentos e executá-los até não ter mais nenhum. O stop para o efeito assim que o evento não estiver mais acontecendo. Ou seja, ele para de subir a caixinha se o mouse não estiver mais sobre a imagem.

Acho que é isso galera, qualquer dúvida, fiquem a vontade.

Pois é, essa a pergunta dos usuários. Quando passamos mensagens de erro temos que nos imaginar na pele deles. Imaginem a situação (já me encontrei nela algumas vezes rs): você tá preenchendo um formulário que tem um campo chama do login. O developer do mesmo escreveu uma validação usando expressão regular que só aceita ‘[a-z]‘ (de a até z), ‘.’ (ponto) e ‘-’ (hífen). Ai aparece a seguinte mensagem: “O campo Login possui formato inválido”.

E agora? Terei que catar o manual do projeto para descobrir o que posso colocar? NOT ! Se apenas colocarmos que só se pode escrever ‘[a-z]‘ (de a até z), ‘.’ (ponto) e ‘-’ (hífen) o usuário entende a hora e ganha tempo.

Ou seja, temos que lembrar que estamos “falando” com pessoas. Os usuários têm sentimentos =)