Ir para conteúdo / Skip to content

Modelo de Currículo em HTML

Postado em: 9 de junho de 2009 por Pedro Rogério

A era do currículo em papel já chegou ao fim. Hoje é mais vantajoso você criar um currículo virtual que irá servir de ponte de ligação entre você e as empresas do que ficar perdendo tempo no Word.

Diante disso, deixo aqui a dica de um currículo em HTML onde você só necessita baixar o arquivo, editá-lo e colocá-lo em seu servidor:

Currículo em HTML

Via: WebIntenta

jQuery: Como evitar problemas com animate()

Postado em: 8 de junho de 2009 por Pedro Rogério

Você provavelmente já deve ter passado por esse tipo de problema utilizando o framework jQuery para fazer animações nos elementos de sua página, o problema ocorre principalmente quando se deseja criar menus animados, onde através da função animate() da jQuery ao passar o mouse rapidamente pelo menu, o efeito pode ser executado ainda diversas vezes mesmo após você retirar o mouse.

Para que fique claro a natureza do problema, basta você acessar esse exemplo criado e experimente passar o mouse rapidamente diversas vezes encima do menu. Você verá que mesmo após retirar o mouse, o efeito de animate() ainda é executado.

Observe abaixo o código JavaScript com a utilização da jQuery para o efeito do menu:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).animate({ left: 20 }, 'fast');
		},function(){
		$(this).animate({ left: 0 }, 'fast');
	});
});

Para evitar esse problema indesejável, basta utilizar a função stop(). Agora vamos ao código final sem problemas de animação:

$(document).ready(function() {
	$('ul.anim_queue a')
		.hover(function() {
		$(this).stop().animate({ left: 20 }, 'fast');
		},function() {
		$(this).stop().animate({ left: 0 }, 'fast');
	});
});

Agora observem o exemplo com o código corrigido. Como você pode ver, a animação só ocorre uma vez, mesmo após você passar rapidamente o mouse sobre o menu, evitando assim o problema anterior.

Esse post foi escrito com base no artigo original de Brandon Aaron

SEO – Google agora segue links JavaScript

Postado em: 2 de junho de 2009 por Pedro Rogério

Durante a conferência Google I/O eles fizeram alguns anúncios importantes que passaram despercebidos para algumas pessoas. Algumas pessoas andavam desconfiadas que o Google estava seguindo links JavaScript, mas ninguém até então havia efetuado testes concretos para saber se isso era verdade ou não.

Mas esse novo feito foi revelado por Vanessa Fox de que o Google a partir de agora estaria seguindo links que não seguem os padrões web.

O Google a partir de agora é capaz de acessar o evento onClick na maioria das tags HTML. Caso o evento onClick chame uma função, e em seguida a URL, o GoogleBot só pode interpretá-la se o script faz parte da página, ao invés de um script externo.

Alguns exemplos de código que o GoogleBot pode executar são os seguintes:

    <div onclick="document.location.href='http://foo.com/'"></div>
    <tr onclick="myfunction('index.html')"><a href="#" onclick="myfunction()">new page</a></tr>
    <a href="javascript:void(0)" onclick="window.open('welcome.html')">open new window</a>

Mais informações você pode ver em: JavaScript Links Now Passing PageRank & Anchor Text

Alternativa a Google AJAX Libraries API

Postado em: 20 de maio de 2009 por Pedro Rogério

O Google que até então parecia um serviço indestrutível não é mais o que parece. Após quedas relatadas no Twitter, o que podemos fazer se dependemos desse serviço? Ainda mais aqueles que dependem da Google AJAX Libraries API para que suas aplicações fucionem.

Recentemente descobri uma alterantiva ao Google AJAX Libraries API, onde caso o serviço esteja off-line, ele utiliza o arquivo JavaScript que está hospedado em seu servidor. Basicamente você teria que criar um arquivo JavaScript e colocá-lo antes do fechamento da tag body:

<script type="text/javascript" src="meu-script-google.js"></script>

O conteúdo desse arquivo deve ser o seguinte:

var sc = document.createElement("script");
sc.type = "text/javascript";
// SRC do Google
sc.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?rand=' + Math.random();
var timer = setTimeout(function(){
   if (typeof jQuery == 'function') return;
        var sc = document.createElement("script");
        sc.type = "text/javascript";
        // SRC local
        sc.src = 'http://www.pinceladasdaweb.com.br/blog/js/jquery-1.3.2.min.js';
        document.getElementsByTagName("head")[0].appendChild(sc);
   // Tempo em milisegundos antes de carregar o arquivo local.
}, 200);

sc.onload = sc.onreadystatechange =  function(e){
    clearTimeout(timer);
}
document.getElementsByTagName("head")[0].appendChild(sc);

É uma ótima alternativa, pois caso o serviço fique indisponível, é carregado um JavaScript alternativo.

Validar datas no PHP

Postado em: 18 de maio de 2009 por Pedro Rogério
Date no PHP

O PHP fornece muitas funcionalidades com a classe datetime. No entanto, essa classe não aborda validação, isto é, que formato essa data é recebida. A função strtotime() do PHP pode receber vários formatos de data legíveis aos seres humanos. O problema com strtotime() é que não existe uma maneira de atender a diferentes formatos de data, por exemplo, 05/12/2009. Dependendo de que país é o usuário, esta data pode ter vários significados, por exemplo, o mês dia e ano. Ao dividir a data em seus respectivos campos, cada segmento pode ser verificado com a função checkdate do PHP. A função abaixo valida uma data através da divisão da data por ano, mês e dia, usando-os como argumento para checkdate:

Continuar lendo »

A importância dos cabeçalhos HTML para a acessibilidade

Postado em: 15 de maio de 2009 por Pedro Rogério

Cabeçalhos em HTML são úteis e extremamente importantes para destacar todo o texto que atua como cabeçalho de alguma seção. Além de serem importantes para os mecanismos de busca são extremamente importantes para usuários que utilizam algum leitor de tela, pois eles auxiliam esses usuários na navegação dos cabeçalhos do documento.

Se você ficou curioso, basta dar uma olhada no vídeo abaixo:

Vídeo (Objeto multimídia)

Colunas com alturas iguais com JavaScript

Postado em: 13 de maio de 2009 por Pedro Rogério
Colunas com alturas iguais em CSS

Imagem retirada do site de Matthew James Taylor

Quem já não passou pelo problema de que as colunas do site não acompamhavam o tamanho das outras colunas e assim acarretando algumas vezes “quebras de layout”? Pois bem, já postei aqui uma solução não muito bem aceita utilizando CSS, mas dessa vez vamos implementar uma solução com JavaScript e uma outra com a utilização do Framework jQuery.

A primeira solução que utiliza JavaScript puro foi desenvolvida por Matthew Pennell, e o código e sua utilização consistem da seguinte forma. Primeiro você irá precisar de uma função para capturar os elementos da página:

Continuar lendo »