Como forma de presentar os leitores (incluindo eu), foi criada uma espécie de concurso, que presenteia os blogueiros que indicarem melhorias para o site.

Acho o visual do site bem criativo e harmônico, estrutura de seções organizada, código HTML semântico, que fica até difícil sugerir melhorias. Mas listo algumas (pequenos detalhes, às vezes):

• Que tal escrever uma série de artigos sobre os ramos de profissionais na Web? O dia-a-dia na profissão de um designer, desenvolvedor, arquiteto de informação, etc.
• Ao final de cada artigo, os links do trecho "Procure por..." se confudem com os links do post. É proposital? :-)
• Redução no número de publicidade numa mesma página. Na última visita, tinha identificado Adsense, Americanas.com, Dreamhost e Dell. Sei que isso gera renda para o site, mas talvez uma distribuição menos agressiva possa gerar melhores resultados
• No link Agências de Web, separar os resultados por Estados e Cidades
• No link Arquivo, informar os meses em Português

Sucesso e parabéns ao Profissão Web!

Você pode bloquear execução de qualquer tipo de scripts (PHP, ShellScript, Perl, etc.) ou páginas específicas, utilizando seu arquivo .htaccess do Apache (veja também: URLs amigáveis com mod_rewrite).

Esse recurso pode ser utilizado em diretórios de uploads abertos a usuários. Assim, você terá a certeza de que não será possível a execução de scripts maliciosos no diretório.

Exemplo

Salve o trecho abaixo num arquivo .htaccess e copie para o diretório desejado. Lembrando que os diretórios filhos herdam as regras do diretório pai.

RewriteEngine on
RewriteRule .(\.php|\.php3|\.php4|\.php5|\.phtml|\.sh|\.pl)$ erro.htm

Entendendo: a regra acima redireciona qualquer extensão .php, .php3, .php4, .php5, .phtml, .sh e .pl para o arquivo erro.htm.

Simples assim ;-)

Diga-se de passagem, já utilizei outras bibliotecas, como o Prototype. A mudança veio depois de comparar o desempenho e até mesmo o tamanho da biblioteca incluída nos projetos, sendo 29KB do jQuery 1.2.3 (versão comprimida) contra 123KB do Prototype 1.6.0.2. Escrevi rapidamente, aqui no Blog, sobre o Prototype e outras bibliotecas.

O que é jQuery?

Para os paraquedistas no assunto, jQuery é uma biblioteca JavaScript, criada por John Resig e equipe, que facilita o manuseio do JavaScript em se tratando de manipulação de atributos, eventos, efeitos, interações Ajax, etc.

Na maioria das vezes, você conseguirá produzir uma experiência de interface com o usuário melhor e, ao mesmo tempo, escrevendo códigos de forma mais rápida pelo fato do jQuery possuir métodos e atributos prontos para uso.

Se você quer começar a praticar, recomendo o tutorial Getting Started with jQuery do Jörn Zaefferer ou a versão traduzida por Carlos Pires. Além deste ponta-pé inicial, visite também a comunidade jQuery Brasil com conteúdo selecionado e seu fórum de discussão.

Por falar em tutorial, o projeto conta com uma documentação bem estruturada, além de outros sites que a complementam. Veja: citar documentacao tutoriais http://visualjquery.com/1.1.2.html

Acelerando o desenvolvimento

Em vez de escrever document.getElementById('id'), escreva $('#id'). Quer mostrar ou ocultar uma camada: Utilize os métodos show() e hide(), ex.: $('#id').show().

São métodos prontos para serem utilizados em se tratando de Efeitos, CSS, Seletores, Ajax, etc. Veja a documentação do jQuery para guia e exemplos.

Extendendo o uso com Plugins

Diversos plugins são desenvolvidos baseados no jQuery. Um deles, largamente utilizado, é o Thickbox.

O Thickbox possibilita a você abrir janelas dinâmicas ou estáticas internas ao seu site, com efeito de abertura, sombra ao redor do conteúdo. É possível abrir qualquer documento e ainda criar galerias de imagens.

Além deste, você pode encontrar centenas de plugins separados por categoria.

Mão na massa

Sem muito prolongar no assunto, selecionei alguns exemplos práticos e auto-explicativos sobre várias situações encontradas no dia-a-dia de muito desenvolvedor:

• Mostrando ou ocultando uma camada
• Alterando propriedades CSS via JavaScript
• Usando ThickBox para criar janelas suspensas

O que falam por aí...

Selecionei links com conteúdo relevante sobre o assunto. São dicas e tutoriais interessantes com problemas encontrados no dia-a-dia. Ao redor do mundo existem fiéis pregadores desta bibliotecas.

Boa produtividade a todos!

Links em português:

• Lidando com checkbox no JQuery
• Javascript é com jQuery
• Módulo Ajax do jQuery
• Populando combobox com jQuery (Ajax)
• Marcando/desmarcando todos os checkbox

Links em inglês:

• 15 Days of jQuery
• Accessible, unobtrusive JavaScript tabs with jQuery

• CSS Beauty: Novidades sobre assuntos ligados à interface. CSS, JavaScript, curiosidades, lançamentos de novas ferramentas, etc.
• Fator W: Blog do Walmar Andrade, escreve sobre textos sobre Internet, Usabilidade, Acessibilidade, etc. Recomendo.
• Pixeladas Aleatórias: Blog da Simone, escreve sobre novidades e análises de situações encontradas na Web.
• Project.47: Blog do Carlos Souza, escreve sobre Padrões, WordPress, dicas CSS, etc.
• Simples Idéias: Blog do Nando Vieira, escreve sobre assuntos ligados à desenvolvimento Web.

Repassando o meme para o Bruno, Fernando, Henrique, Leonardo e o Rafael.

Boas indicações!

O projeto visa oferecer mais de 50 cursos online para deficientes visuais, 100% gratuitos. O sistema de ensino é compatível com o leitor de tela DOSVOX (programa gratuito para deficientes visuais utilizarem o computador, sobretudo a Internet).

Para começar o curso, basta acessar o site www.iped.com.br através do leitor de telas.

Divulgue esta iniciativa!

O diferencial é oferecer cursos focado no público de crianças e, como meio de tornar o estudo produtivo e divertido, fez-se o uso de animações interativas com "amiguinhos virtuais" que são personagens com falas reais. Além disso, os alunos poderão trocar mensagens entre si por meio de um sistema próprio, incluindo fotos pessoais.

Inicialmente serão fornecidos cursos de Matemática, Português, Ciências, História, Geografia e Inglês.

Passo-a-passo

O funcionamento é bem simples:

1. O responsável (pai ou mãe) se cadastra;
2. A seguir cadastra seu(s) filho(s);
3. Efetua o pagamento, e seus filhos conseguirão acessar os cursos.

Veja abaixo algumas funcionalidades que o aluno e o responsável possuem, nos seus respectivos ambientes privativos. Para conhecer mais sobre o projeto, visite: iPED Kids.

Ambiente do Aluno

• Realiza os cursos gratuitamente;
• Animações interativas com "amiguinhos virtuais" durante todos os cursos, com exercícios e dicas de como aproveitar melhor;
• Envio e recebimento de mensagens entre colegas online.

Ambiente do Responsável

• Cadastro de filhos (com fotos pessoais);
• Acompanhamento do filho no curso por meio de relatórios detalhados;
• Recebimento por e-mail de acompanhamento pedagógico (opcional);
• Acompanhamento das mensagens enviadas e recebidas pelo filho.

Cursos com apostilas

Novidade apenas para os alunos do iPED Educação:

Além de fazer os cursos, os alunos do iPED Educação também poderão solicitar apostilas impressas, como forma de melhorar o aprendizado e acompanhamento geral. Para mais detalhes, visite o site de cursos online e clique no curso desejado.

A idéia da dica, é fornecer uma regra simples sem níveis de seção na URL.

O que é mod_rewrite?

É um módulo escrito para o servidor Apache, responsável pela reescrita de URLs em páginas Web.

Hoje em dia, com a popularização de assuntos como SEO, usabilidade e acessibilidade, esta prática se tornou comum e está cada vez mais sendo utilizada por grande portais.

Antes de mais nada, para que o módulo mod_rewrite funcione, obviamente você deve ter configurado e ativado no seu servidor Apache.

Criando o .htaccess

Crie um arquivo com o nome ".htaccess" (exatamente desta forma), e mova para a pasta raiz do seu domínio (ou onde queira implantar a reescrita). Em seguida, insira o código abaixo:

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php?cod=$1

Entendendo o código:

RewriteEngine On

Ativa o suporte à reescrita

RewriteCond %{SCRIPT_FILENAME} !-f

Não aplica a condição para arquivos

RewriteCond %{SCRIPT_FILENAME} !-d

Não aplica a condição para diretórios

RewriteRule ^(.*)$ index.php?cod=$1

Regra de reescrita onde qualquer string (.*) após a pasta, onde estiver o .htaccess, será interpretado por index.php passado na variável cod

Na prática, se você tem uma URL do tipo www.url.com.br/secao/subsecao/, será interpretada por www.url.com.br/index.php?cod=secao/subsecao/. E mais, você não terá limite de níveis para utilizar com as /.

Interpretando com PHP

Com seu arquivo de reescrita criado, você já pode criar uma lógica no seu arquivo PHP para que interprete e leia as URLs passadas.

Veja um exemplo auto-explicativo:

<?php
/*
 * separa a URL por "/" e insere num vetor (array)
 */
$url = explode('/', $_GET['cod']);


/*
 * imprime a string passada após a primeira /
 * no exemplo acima, seria: secao
 */
echo $url[0];

/*
 * imprime a string passada após a segunda /
 * no exemplo acima, seria: subsecao
 */
echo $url[1];
?>

Desta forma, você pode utilizar includes para suas seções, ou qualquer outro tipo de inclusão, uma vez que você já tem suas seções separadas.

Para quem quer ler mais sobre o assunto, recomendo a documentação do mod_rewrite. O Bruno também escreveu mais detalhadamente aqui e aqui.

Até a próxima dica da série dia-a-dia de um desenvolvedor Web...

Uma nova seção, entitulada de "Novidades nos blogs", agora conta com uma integração com alguns blogs conhecidos, como o Bruno Dulcetti, Bruno Torres ponto net, Revolução Etc, dentre outros. O objetivo é prover cada vez mais informações relacionadas ao público do portal.

Além disso, os membros que enviarem scripts (e estes forem aprovados), recebem pontuações e poderão trocar por cursos.

Créditos

O processo de criação e desenvolvimento foi realizado num período de tempo curtíssimo (4 dias). Portanto, qualquer "errinho" no código (xHTML ou CSS), você poderá reportar aqui ou no fórum.

• Coordenação: Fábio Neves
• Layout Site: Robson Marquesin
• Layout Fórum: Matheus
• Desenvolvimento: Ciro Feitosa

Para quem vive trabalhando com formulários e suas validações, o uso de manipuladores de eventos com JavaScript pode ajudar na produtividade geral e trazer alguns benefícios diretos.

Se você já sabe do que se trata eventos, pule para a seção Eventos na prática. Caso contrário recomendo ler "O que são eventos?".

O que são eventos?

Eventos ou events são comportamentos de ações dos visitantes sobre um determinado elemento de uma página. Quando um usuário visita uma página e interage (clicando, digitando, movendo, etc.), está produzindo eventos.

Existem diversos eventos definidos para uso com JavaScript. Alguns são para uso restrito com algum elemento xHTML, como o caso do onSubmit que é usado somente com o elemento form. Abaixo listo alguns eventos principais (veja uma lista mais extensa):

Eventos na prática

Os eventos podem ser usados de forma inline, ou de forma externa, com o uso de algum manipulador de eventos.

Eventos inline

Na primeira forma, você define tudo diretamente na tag do elemento. Veja um exemplo:

<form onsubmit="javascript:alert(this.a.value);return false;">
	<input type="text" name="a" onkeyup="javascript:this.value=this.value.toUpperCase();" />
	<input type="submit" />
</form>

No exemplo acima foram definidos 2 eventos: onSubmit para o formulário e o onKeyUp para um campo do formulário. Se você precisa alterar depois alguma propriedade deste evento, deverá editar diretamente no código do seu formulário.

Utilizando manipulador de eventos

Uma outra maneira prática é com uso de manipuladores, criados afim de tornar o código mais flexível e organizado.

Neste exemplo uso o event listener criado por Carlos R. L. Rodrigues, que adiciona ou remove um evento sobre qualquer elemento. São disponibilizadas 2 funções:

addEvent(object: Object, event: String, handler: Function(e: Event): Boolean, [scope: Object = object]): Boolean

Adiciona uma função que será disparada quando ocorrer determinado evento no objeto.

removeEvent(object: Object, event: String, handler: function(e: Event): Boolean, [scope: Object = object]): Boolean

Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso.

Veja a seguir um exemplo com uso da função addEvent:

<script type="text/javascript" src="/path/to/event-listener.js"></script>

<form>
	<input type="text" name="a" />
	<input type="submit" />
</form>

<script type="text/javascript">
var f = document.forms[0];
addEvent(f, "submit", function( e ) { alert(f.a.value);return false; });
addEvent(f.a, "keyup", function( e ) { f.a.value=f.a.value.toUpperCase(); });
</script>

Toda a validação fica externa ao formulário. Desta forma, você também pode inserir tal validação num arquivo JavaScript externo. Neste caso, devo atentar que você precisará carregar o arquivo externo depois do elemento a ser modificado ou, caso deseje incluir no head da página, declare a execução apenas quando a página carregar completamente (com uso do evento onLoad), caso contrário o objeto não será encontrado.

Você ainda pode definir uma função e passar como parâmetro no addEvent (no exemplo acima foi criado uma função inline para demonstração).

Da mesma forma que adicionei os eventos à um formulário, poderia também adicionar numa janela (window), num documento (document), etc.

Flexibilidade e organização

Como afirmado, um dos grandes benefícios com o uso do event listener é a flexibilidade nas alterações posteriores e a organização do código xHTML.

Até a próxima dica da série dia-a-dia de um desenvolvedor Web!

O curso de Ciência da Computação foi proveitoso. Foram mais de 4 anos na universidade e morando num estado maravilhoso. Tive ótimos professores, colegas mais que amigos e amizades incomparáveis que nem o tempo se arrisca de apagar da memória.

Agora é uma nova fase cheia de perspectivas, descobertas e crescimento.

Juntamente com uma nova cidade à vista, vieram diversos freelas (breve muitas novidades) e um emprego fixo. Isso tudo gera um fator: escassez de tempo.

A tarefa de cuidar do blog e fazer produzir conteúdo num período de tempo curto, está cada vez mais difícil. No entanto, não estou abrindo mão desta poderosa ferramenta de compartilhamento de informação e interação, afinal foi esta uma das responsáveis pela minha projeção ao redor do mundo.

Um fato interessante é o aumento considerável de leitores via Feeds, mesmo sem novas atualizações constantes.

Agora, em terras paulistanas, confirmo: o tempo corre depressa!

Divulgando...

Quero aproveitar e divulgar uma melhoria em se tratando de Programa de Afiliados.

O iPED ampliou o plano de parceria e agora paga 20% de comissão sobre o valor total pago pelos alunos. O valor mínimo para receber é de R$ 150,00.

Entendendo: cadastrando-se como parceiro, você ganha um link próprio de cursos. Toda pessoa que acessar este link, e efetuar pagamento por algum pacote de cursos, você recebe 20% do total. O acompanhamento financeiro é feito através de um painel próprio.

São diversas opções de cursos. Entre os de programação, estão os cursos de PHP, Java, ASP, VB .Net, etc. Além disso existem cursos nas áreas de informática, animação e design, profissionalizante e língua estrangeira.