sábado, 31 de maio de 2008

O melhor site de bodyboarding!

Fala galera,
para aqueles que gostam, praticam ou simpatizam com o bodyboarding.

Vou deixar uma dica, para que possam dar uma olhada no site da B2BR - BodyBoarding Brasil e estar por dentro dos acontecimentos nesse esporte.

Conheço a galera da equipe B2BR: o Rodrigo Monti e a Desiree Kinashi, que além de serem muito gente boa, são profissionais de bodyboard do mais alto nível!

O site tem muitas fotos, vídeos e matérias super atualizadas, sobre oque acontece no BodyBoarding Brasileiro e Mundial e tem também a loja virtual deles a B2BR SHOP.


Link do site da Bodyboarding Brasil.

Valeu, tá aí a dica!

Abraços.

Download Day - Firefox 3

A Mozilla anuncia no mundo inteiro sua campanha para tentar estabelecer um novo recorde mundial no Guinness Livro dos Recordes pelo software mais baixado durante um período de 24 horas. A iniciativa está planejada para acontecer no dia do lançamento do Firefox 3, e foi batizada de "Download Day".

Para isso, a Mozilla acaba de lançar a página do Download Day (http://www.spreadfirefox.com/pt-BR/worldrecord) onde os interessados podem participar na tentativa de recorde. Ao fazer a inscrição, o participante receberá um lembrete do momento certo de fazer o download.
Além disso, caso o recorde venha a ser confirmado, cada participante passa a ter direito a um certificado pessoal de participação no recorde.


Link do site.


Eu tô dentro!

Falou!

Abraços.

sexta-feira, 30 de maio de 2008

Boo-box - Plugin Brazuca para enriquecer o conteúdo do seu site

Tava dando uma olhada na Web e achei esse plugin da Jquery, se chama boo-box.

O objetivo do boo-box é fazer que algumas palavras do seu site sejam vinculadas com produtos dos seus parceiros e se alguém comprar esses produtos vindo dos links do seu site gere uma renda para você.

Tá mais como assim? Não entendi!

Segue o link para ver uma explicação detalhada.

Como o pessoal da boo-box fala conteúdo relevante e marketing inteligente. :)

Link do site da boo-box

Eu uso!

Falou.

Abraços.

quarta-feira, 28 de maio de 2008

GreyBox - no evento onClick do link

Bem, como disse no post passado, vou mostrar alguns exemplos para utilizar os métodos do GreyBox no evento onClick, para evitar abrir o site ao invés do GreyBox.

Vamos lá:

Método GB_show


Assinatura do método: GB_show(título, endereço da página que vai ser aberta no GreyBox, /*opcional*/ altura, largura, função a ser chamada).
Esse método abre o uma janela GreyBox no topo da página.
Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>

<div>

<a href="http://google.com/" onclick="return GB_show('Google', this.href)">Visitar o Google</a><br />

</div>

</body>

</html>


Método GB_showCenter


Assinatura do método: GB_showCenter(título, endereço da página a ser aberta pelo GreyBox, /* opcional*/ altura, largura, função a ser chamada).
Esse método abre uma janela GreyBox no centro da página.
Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>
<body>
<div>
<a href="http://google.com/" onclick="return GB_showCenter('Google', this.href)">Visitar o Google com Página Centralizada</a>
</div>
</body>
</html>


Método GB_showFullScreen:


Assinatura do método: GB_showFullScreen(título, endereço da página a ser aberta, função a ser chamada).
Esse método abre uma janela GreyBox em fullscreen.

Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>
<div>

<a href="http://google.com/" onclick="return GB_showFullScreen('Google', this.href)">Visitar o Google em FullScreen</a>

</div>

</body>

</html>


Método GB_showImage


Assinatura do método: GB_showImage(título, endereço da imagem a ser aberta no GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com a imagem.
Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>

<div>

<a href="http://static.flickr.com/119/294309231_a3d2a339b9.jpg"
onclick="return GB_showImage('Flower', this.href)">Abrindo a imagem de uma flor</a>

</div>

</body>

</html>


GB_showPage


Assinatura do método: GB_showPage(título, endereço da página a ser aberta no GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com a página em FullScreen mas com um layout do GreyBox diferente.
Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>

<div>

<a href="http://google.com" onclick="return GB_showPage('Google', this.href)">Abre o Google em FullScreen mais com um layout do GreyBox diferente</a>

</div>

</body>

</html>


GB_showFullScreenSet


Assinatura do método: GB_showFullScreenSet(array de sites a serem abertos, seta qual site vai ser aberto ao iniciar o GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com a página em FullScreen com um layout do GreyBox diferente e paginação para poder abrir mais de um site.
Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>
<body>
<div>
<script>
var page_set = [{'caption': 'Google', 'url': 'http://google.com/'},
{'caption': 'Yahoo', 'url': 'http://yahoo.com/'}];
</script>
<a href="#" onclick="return GB_showFullScreenSet(page_set, 1)">Abre o GreyBox com paginação para sites, veja que o google vai ser aberto primeiro por ser o primeiro elemento do array e no método estar setado a 1 posição para abrir ao ser executado o GreyBox</a>
</div>
</body>
</html>


GB_showImageSet


Assinatura do método: GB_showImageSet(array de imagens a serem abertas, seta qual imagem vai iniciar o GreyBox, função a ser chamada).
Esse método abre uma janela GreyBox com um layout do GreyBox diferente e paginação para poder abrir mais de uma imagem.
Ex:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>

<div>

<script>
var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
{'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>
<a href="#" onclick="return GB_showImageSet(image_set, 1)">Abre imagens com paginação</a>
</div>

</body>

</html>

E isso aí, para quem quizer ver estes e outros exemplos de como utilizar o GreyBox na prática ou as assinaturas dos métodos segue o link:

Exemplos de GreyBox na prática.


Falou!
Abraços.

GreyBox - Como usar?

Para quem nunca usou ou já usou e não lembra mais da sintaxe ou de onde baixar os arquivos, aqui vai uma breve explicação de como usar a biblioteca GreyBox.
Mas para que serve esse GreyBox? Alguém pode estar se perguntando.

Seguinte, o GreyBox é usado para se abrir uma janela centralizada ou não dentro da sua página (evitando abrir um conteúdo em popup) e dando um fade cinza na página principal (que fica atrás da janela do GreyBox).

O GreyBox faz a mesma coisa que scripts tais como: modal, lightbox
, lyteBox, etc.

Chega de conversa e vamos ao código, né. :p

Primeiramente, você tem que baixar a biblioteca GreyBox do site orango que detém os direitos desta biblioteca.

Em seguida, temos que setar o local onde vai estar a biblioteca assim:

<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>


Aqui dissemos que a nossa biblioteca GreyBox vai estar na pasta greybox dentro da sub-pasta greybox.

A variável GB_ROOT_DIR definida como pública no JavaScript pela palavra var é de extrema importância no GreyBox porque é usada dentro da biblioteca para achar as imagens de loading ao começar a carregar a página dentro do GreyBox.
Portanto devemos colocar essa parte de nosso código sempre antes de chamarmos nosso link para a biblioteca GreyBox.

Em seguida colocamos os links da biblioteca:

<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />


Agora vamos ao código completo:


<html>
<head>
<title>Usando GreyBox</title>
<!-- greybox -->
<script type="text/javascript">
//referente a instalação do greybox
var GB_ROOT_DIR = "greybox/greybox/";
</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<!-- / greybox -->
</head>

<body>

<div>

<a href="http://google.com/" rel="gb_page_center[640, 480]">Abrir o Google em 640px por 480px</a>
<br />

<a href="http://google.com/" rel="gb_page_fs[]">Abrir o Google em Fulscreen</a>
<br />

<script>
var image_set = [{'caption': 'Flower', 'url': 'http://static.flickr.com/119/294309231_a3d2a339b9.jpg'},
{'caption': 'Nice waterfall', 'url': 'http://www.widerange.org/images/large/plitvicka.jpg'}];
</script>

<a href="#" onclick="return GB_showImageSet(image_set, 1)">Show first picture in image_set</a>
</div>

</body>

</html>


Vamos as explicações do código:

Bem, no primeiro link em Abrir o Google em 640px por 480, devemos nos deter a atenção na tag rel do link, nesta tag temos gb_page_center[640, 480], onde o gb_page_center é para abrir uma janela centralizada, 640 ou o primeiro parâmetro é largura do GreyBox e 480 ou o segundo parâmetro é a altura do GreyBox.
Ao ser carregar a página o GreyBox varre todos os links que tem essa tag e faz esses links chamarem um GreyBox com a página setada no href em questão.

Então ele encontra todos os links que contém gb_page_center e pega o href como página a ser aberta pelo GreyBox.

O segundo link Abrir o Google em Fulscreen
, faz quase a mesma coisa que o primeiro link diferenciando apenas na questão que abre em fullscreen a página do GreyBox e a tag rel tem o seguinte valor
gb_page_fs[].

Surgem casos que o GreyBox, demora um pouco para carregar esses links por javascript em decorrência disso, ao invés de abrir a janela GreyBox ao clicar no link abre a página mesmo, neste caso eu dou uma dica para se usar as funções do GreyBox no onclick do link em questão.

No terceiro exemplo (Show first picture in image_set), estou dando uma prévia sobre isso.

No meu próximo post eu falo sobre isso...

Falou.
Abraços.

HTC Touch e Windows Mobile 6 Professional, combinação genial!

Bem, falar de windows para mim não é algo fácil, principalmente quando é para elogiar eles. :)
Porque eu estou falando isso? Bem, para resumir comprei o HTC Touch que vem como sistema operacional o Windows Mobile 6 Professional e realmente me apaixonei com sua interface, usabilidade, funcionalidades, enfim... até agora não vi nada de ruim nesse Smartphone.

Como desenvolvo em J2ME e o sistema operacional é Windows, fui ver como seria para instalar aplicativos Java nele e logo percebi que ele tem uma opção para se instalar aplicativos Java que me parece muito fácil de se operar (na teoria, não testei ainda), até agora estou gostando muito da combinação entre HTC Touch e Windows Mobile!

Em breve estarei postando alguns códigos em J2ME para desenvolver software para esse dispositivo...

Falou.
Abraços

quarta-feira, 21 de maio de 2008

URL amigável

As Url´s Amigáveis, como simpaticamente chamam a técnica de Rewrite, viraram rapidamente o atrativo da web 2.0 pelo fato de atrair mais usuários e ainda dar mais relevância ao seu conteúdo e além do mais ajuda a esconder a tecnologia usada pelo seu site.

Além de tornar mais “amigável” ao usuário isso facilita muito nos motores de busca, e normalmente um link desses atrai sempre mais visitantes.

Ao que interessa então:

mod_rewrite, como diz o nome re-write, reescrever, este modulo convete uma url em qualquer formato em um formato pré programado por voce.

Etapa 1 - Configuração

Verifique dentro do seu httpd.conf por:

LoadModule rewrite_module modules/mod_rewrite.so
AddModule mod_rewrite.c

Se os mesmos estiverem comentados (# na frente), descomente ambos (retire o #) e reinicie o apache.

Etapa 2 - Arquivo .htaccess

Nesta etapa deve-se criar o arquivo .htaccess (ex: touch .htaccess) se o mesmo já existir, apenas verifique as permissões dele de leitura e escrita, lembrando que para criar o arquivo .htaccess complexos você deve ter o conhecimento sobre expressões regulares.

Arquivo .htaccess:



Options +FollowSymLinks

##liga motor de reescrita de URL
RewriteEngine on

##Regra para cair na index.php
RewriteRule index.html$ http://localhost/testes/index.php
RewriteRule index.htm$ http://localhost/testes/index.php

##Regra para cair na página categoria.php
RewriteRule categoria/(.*)$ http://localhost/testes/
categoria.php?categoria=$1

##Regra para cair na página busca.php
RewriteRule busca/(.*)/(.*)$ http://localhost/testes/
busca.php?data=$1&categoria=$2


Vamos ver oque significa esse código:

Options +FollowSymLinks: A opção FollowSymLinks ativada determina que o Apache deverá solicitar o arquivo real do link simbólico que será criado, sem isso resultaria em um erro 505 (em alguns casos sem essa opção funciona mesmo assim pois não foi necessário a criação de links simbolicos).

RewriteEngine on: Ativa a engine (motor) do rewrite.

RewriteRule Site-(.*)-(.*)-(.*)\.htm$ : Esta parte é o fundamento do Rewrite, é a criação da regra que será utilizada na montagem da nova URL, nessa sentença podemos traduzir que a nova URL será montada da seguinte forma: Site-1-2-3.htm sendo 1,2,3 parametros de $ definido ao final, mais quem são esses parametros ? espera p****.

busca/(.*)/(.*)$ http://localhost/testes/busca.php?data=$1&categoria=$2 : Está parte trabalha em cima da nossa URL original, repare que a URL está sendo decomposta em parametros $1, $2, $3, isso mesmo, os mesmos que serão substituidos na abordagem anterior, simples demais, ah você quer colocar o dia como sendo paramêtro ? busca.php?data=$1&categoria=$2, resolvido basta agora alterar na URL de saída.

Obs: O arquivo deverá ser criado ou deverá existir no mesmo local que foi definido no apache o DocumentRoot (diretório principal) e o nome do arquivo é .htaccess (tem que ser assim o nome do arquivo).

Etapa 3 - Criando sua Url Amigável
Quando se chama a url index.html ou index.htm o arquivo .htaccess direciona para a página index.php, conforme nossa primeira regra no .htacces:

##Regra para cair na index.php
RewriteRule index.html$ http://localhost/testes/index.php
RewriteRule index.htm$ http://localhost/testes/index.php


Arquivo index.php:


<html>
<head>
<title>Teste de reescrita de URL</title>
</head>
<body>
<div>
<a href="categoria/1">Categoria 1</a>
<br />
<a href="categoria/2">Categoria2</a>
<br />
<a href="busca/2008-01-12/1">Busca por data</a>
</div>
</body>
</html>



Se for chamada a página busca/"data"/"categoria" o .htaccess envia para a página busca.php passando também as variáveis por $_GET.

Arquivo busca.php:


<html>
<head>
<title>Busca - Verifica as variáveis passadas e se está funcionando a reescrita de URL</title>
</head>
<body>
<div>
<?php echo 'Categoria = '.$_GET['categoria'].
'<br />'.'Data = '.$_GET['data'].'
';?>
<a href="http://localhost/testes/index.html">Voltar</a>
</div>
</body>
</html>




Se for chamada a página categoria/"categoria" o .htaccess envia para a página categoria.php passando também a variável por $_GET.

Arquivo categoria.php:


<html>
<head>
<title>Categoria - Verifica as variáveis passadas e
se está funcionando a reescrita de URL</title>
</head>
<body>
<div>
<?php echo 'Categoria = '.$_GET['categoria'].'
';?>
<a href="http://localhost/testes/index.html">Voltar</a>
</div>

</body>
</html>



Gerador de .htaccess
Manual do mod_rewrite
Manual de expressão regular

Falou.
Abraços.

JEDI - Iniciativa para desenvolvimento e educação JAVA a distância.

Estou falando de curso de java gratuito e de alta qualidade. Mas como assim?
Bem, visto que o mercado de java está prescisando de profissionais qualificados e java é a linguaguem mais casca grossa para se aprender, a Universidade das Filipinas, através do Java Research & Development Center, criou a iniciativa JEDI (Java Education and Development Initiative), que tem como principais objetivos o de melhorar a experiência do ensino e da aprendizagem; Aumentar a qualidade dos graduados em Ciência da Computação e Tecnologia da Informação (disponibilizando os materiais de seus cursos gratuitamente para quem se interessar); Aumentar o banco de especialistas em Java e, Fornecer serviços e produtos a altura das necessidades do mercado mundial.

Só para dar noção do tamanho da jogada, entre os parceiros que apoiam esta iniciativa mundial estão: Sun Microsystems, Universidade das Filipinas, Politec, DFJUG, Borland e CNBB/Instituto Gaudium.

Segue o link sobre a descrição do JEDI: Descritivo do JEDI
Site do DFJUG: DFJUG
Cursos JEDI on-line: Curso JEDI on-line

Tá aí a dica!
Eu estou fazendo esses cursos e são realmente muito bons!
Hoje só não aprende java quem não quer né. :)

Falou.
Abraços.

segunda-feira, 19 de maio de 2008

Scripts em JavaScript

Segue abaixo alguns links sobre JavaScript que fuçando pela internet achei e resolvi compartilhar com todos os meus amigos.



Prototype window formulário de login










Plugin de formulário com máscara para jQuery










Script de Valição de Formulário










Árvore com Checkbox










Spry Auto Sugestão










Caixas de Texto Redimensionáveis









Formulário de login Ajax (PHP)










Gerenciador de arquivos Ajax









Layouts corretos em formulários









Autocompletador - jQuery ajax











jQuery.Suggest










Elementos de Formulário Personalizados













Formulário de contato Ajax











widgEditor










ASP.net validação de formulário












Formulário Protetor











Estilizando formulários de arquivo com CSS e dom









Pin plugin para Prototype











FormCheck - Mootools plugin











Envio de Arquivo Assíncrono - YUI










Aumente um textarea – Um plugin Mootools











UploadForm – Extensão Ext JS











Skinanble Checkboxes 5.0.0










FancyForm - Checkboxes













Ajax Autocompletador











Validador de Formulário










shift Checkboxes











Elemento de Formulário Barra de Deslizamento em Ajax











Plugin de campo marca d’água - jQuery










jQuery: Desabilite a seleção de texto











jQuery Plugin - autoSalvar












Plugin para caixa de seleção - jQuery










jQuery – plugin de foco em campo










jQuery – plugin numérico










YAV: plugin para jQuery para validação client side









Envios de Arquivo usando Ajax











Redimensionamento de textarea usando
prototype










NIce JForms









Yahoo! UI : Editor de Texto











Validador JS – Validador de Formulário











Uni-Form










Form validation with Spry











jQuery Plugin: AutoAjuda












jQuery : Plugin de formulários










Widget Ext para Upload de Arquivo











YUI : Controles de Formulário DHTML











Caixa de Auto Sugestão










Ajax dropdown triplo











Validação Limpa de Formulário











Formulário de Contato Ajax com validação










Control.SelectMultiple











Control.Textarea











Autocompletador com Moo Tools










Moo.Form Exemplos











Menu usando MooTools











Verificação de Nome de Usuário Ajax - Usando JQuery!










Web SpinButton / Controle SpinBox











JQuery : Plugin de Checkbox











Construtor de Formulário Ajax











Exemplo de Autocompletador











Combo Box Redimensionável - ExtJS











Medidor de Força de Senha










Campos Editáveis, como os do Flickr (in-place editor)











Validação de Formulário com JQuery











Autopopulando Select Boxes (caixas de seleção)










Componente Autocompletar











Busca como a do
Spotlight











wForms - A JS extension to web forms










Lookup de Dados com Ajax











Aumente o Texto como no del.icio.us











iMask










fValidate v5.00b











Ajax Captcha











JavaScript form input mask










Validação Fácil de Formulários com Prototype













Verificação de Nome de Usuário Ajax











Scrollable Check Lists










Form layout Accessible and Stylish











Formulário com Estilo











Artigo sobre Formulários










AJAX auto-complete text field











Estilizando campos de formulário











Ajuda em Formulários sem
Popups










Formulários Web com Estilo CSS











Formulários Livres Para Todos











Formulários CSS Acessíveis










Formulários CSS










Formulários Funcionais









Nice Forms










Formulários Horizontais Semânticos










Coleção de Estilos