17 de mai. de 2012

Orientação à Objetos – Métodos e atributos estáticos

O código original – Orientado à objetos ou PHP estruturado?

O código original já estava dentro de uma classe, mas não faria diferença nenhuma se fosse PHP estruturado… não lembro exatamente o nome dos métodos/variáveis, mas o restante está igualzinho:
01class cFileType {
02
03    function fImage($type) {
04        switch($type) {
05            case 'jpg':
06            $bool = true;
07            break;
08            case 'png':
09            $bool = true;
10            break;
11            case 'gif':
12            $bool = true;
13            break;
14            default:
15            $bool = false;
16            break;
17        }
18        return $bool;
19    }
20
21}
A primeira mudança foi trocar esse switch, que não está fazendo nada além de definir o valor da variável $bool como true ou false se o $type for um dos valores válidos (jpg, png ou gif)… Nada melhor então do que usar a função in_array():
1class cFileType {
2
3    function fImage($type) {
4        return in_array($type, array('jpg', 'png', 'gif'));
5    }
6
7}
WOW! Reduzimos de 21 para 7 linhas… mas ainda assim, se fosse estruturado não teria diferença nenhuma.
Meu amigo me disse que essa classe seria para verificar os tipos de arquivos (extensões), por exemplo “se é uma imagem” ou “se é um doc”… Então criamos outro método para verificar DOCs:
01class cFileType {
02
03    function fImage($type) {
04        return in_array($type, array('jpg', 'png', 'gif'));
05    }
06
07    function fDoc($type) {
08        return in_array($type, array('doc', 'docx'));
09    }
10
11}

Atributos, melhor tê-los

O código está melhorando, mas ainda assim tem algo errado… não é responsabilidade dos métodos fImage e fDoc saber a lista de extensões válidas… isso não deveria pertencer à classe como um todo e poder ser reutilizado?
01class cFileType {
02
03    public $image = array('jpg', 'png', 'gif');
04
05    public $doc = array('doc', 'docx');
06
07    function fImage($type) {
08        return in_array($type, $this->image);
09    }
10
11    function fDoc($type) {
12        return in_array($type, $this->doc);
13    }
14
15}

Atributos e métodos estáticos

Agora sim está parecendo uma classe normal, com atributos e métodos… Aí percebi que de orientada à OBJETOS essa classe não tem nada! Não estamos trabalhando com objetos.. O uso atual dessa classe seria assim:
1$cFileType = new cFileType();
2if ($cFileType->fImage('jpg')) {
3    // É uma imagem válida
4}
Eu não trabalho o objeto $cFileType, apenas instancio e utilizo um único modo… então vamos economizar um pouco de memória, transformando os métodos em métodos estáticos:
01class cFileType {
02
03    public static $image = array('jpg', 'png', 'gif');
04
05    public static $doc = array('doc', 'docx');
06
07    static function fImage($type) {
08        return in_array($type, self::$image);
09    }
10
11    static function fDoc($type) {
12        return in_array($type, self::$doc);
13    }
14
15}
E agora a utilização ficou um pouco mais simples:
1if (cFileType::fImage('jpg')) {
2    // É uma imagem válida
3}
Sendo que você ainda pode usar o cFileType::image (pra ter uma lista de imagens válidas) em qualquer parte da sua aplicação sem instanciar a classe.

Reutilização de código

Segundo a abordagem DRY, não devemos nos repetir… Por isso aquele in_array() começou a me incomodar… Vai que você está verificando 30 tipos diferentes de arquivos, todos os métodos fazendo exatamente a mesma coisa… mas aí você decide mudar o in_array() pra algo mais eficiente ou aceitar até o caminho absoluto de um arquivo… vai mudar em 30 métodos na mão?
A responsabilidade de verificar se o valor $type tá dentro de uma “lista” válida não é dos métodos fImage e fDoc.. então vamos delegar:
01class cFileType {
02
03    public static $image = array('jpg', 'png', 'gif');
04
05    public static $doc = array('doc', 'docx');
06
07    static function fType($type, $list) {
08        return in_array($type, $list);
09    }
10
11    static function fImage($type) {
12        return self::fType($type, self::$image);
13    }
14
15    static function fDoc($type) {
16        return self::fType($type, self::$doc);
17    }
18
19}
Agora se precisarmos mudar essa lógica de verificar se o $type tá dentro de uma “lista” válida, só vamos precisar mudar em um lugar só.

cFileType? fType? fImage? O resultado final

Temos que concordar que os nomes de classe e métodos escolhidos pelo meu amigo não são os mais intuitos… Então como uma modificação final, sugiro a seguinte classe devidamente renomeada:
01class FileType {
02
03    public static $image = array('jpg', 'png', 'gif');
04
05    public static $doc = array('doc', 'docx');
06
07    public static function isTypeInList($type, $list) {
08        return in_array($type, $list);
09    }
10
11    public static function isImage($type) {
12        return self::isTypeInList($type, self::$image);
13    }
14
15    public static function isDoc($type) {
16        return self::isTypeInList($type, self::$doc);
17    }
18
19}
Com uma utilização bem simples e intuitiva:
1if (FileType::isImage('jpg')) {
2    // É uma imagem válida
3}


Pra quem quiser ver o código completo da classe final, com os métodos comentados: https://gist.github.com/1338259


Fonte:  Thiago Belem: Orientação à Objetos – Métodos e atributos estáticos
0 Comentários
Marcadores: ,

Entendendo o jQuery – Parte 2



O jQuery é uma biblioteca/framework de Javascript orientado a objetos (OO)… O que significa que nele trabalhamos com objetos, atributos e métodos.. E não apenas com funções que é o que acontece na programação procedural comum. Todos nós começamos trabalhando com programação procedural e por isso o jQuery segue um “caminho” diferente do que estamos acostumados.
De primeiro contato o jQuery parece sim muito complicado… São vários códigos em uma só linha… Tudo dentro de function() sem nome e, com uma documentação toda em inglês, as pessoas não tem muito por onde começar.
O que vocês precisam entender é que o jQuery é, quase que literalmente, uma conversa entre o desenvolvedor e o código. Se você souber inglês então, não há com o que se preocupar… Mas se você não sabe inglês, procure começar a jogar, ler ou ver filmes sem legenda… No mundo de hoje em dia não dá pra ser um bom desenvolvedor/programador só lendo artigos escritos em português… Mas isso vai ficar para um outro artigo.
A coisa que vocês mais vão ver no jQuery é a própria função jQuery(), que também é usada no formato $(). Esta função sempre irá retornar um objeto jQUery: um vetor (array) com todos os elementos encontrados pelo seletor passado como 1º parâmetro da função jQuery ou um novo elemento DOM (Document Object Model) criado caso o 1º parâmetro um elemento HTML.
Veja alguns exemplos:
$('p'); // Retorna uma lista de todos os parágrafos na página
$('a.azul'); // Retorna uma lista de todos os links com classe "azul"
$('form input[type="text"]'); // Retorna uma lista de todos os inputs (que sejam type="text") e estejam dentro de um formulário
Como vocês podem ver, os seletores de jQuery se assemelham muito aos seletores de CSS, e existem formas de você selecionar praticamente qualquer elemento de seu HTML… Lembra que eu disse que jQuery é como uma conversa? Suponhamos que você precise selecionar todos os p, que estão dentro e uma div com classe a “links”, e que não possuam um link dentro desse p… O seletor ficaria assim:
$('div.links p:not(:has(a))');
Mas você, a esse ponto, já deve ter se perguntado: de que adianta selecionar elementos se nada for feito com eles?
É ai que entram os métodos do jQuery! Sempre que você estiver usando jQuery, você irá trabalhar da seguinte forma:
  1. Selecione os elementos que você quer manipular/alterar/trabalhar;
  2. Execute métodos nativos do jQuery (ou de um plugin de jQuery).
Ou seja: primeiro selecionamos os elementos e depois executamos um (ou mais) métodos nos elementos encontrados.

Um exemplo prático

Vamos supor que vocês queiram criar aquele efeito legal de abrir e fechar um elemento com um + no cantinho. O nome desse efeito, em inglês, é collapse.
Vamos criar o seguinte HTML de exemplo:
<div class="box">
    <h2>Meus linksh2>
    <a href="#" title="Abrir ou fechar" class="trocar">abrir/fechara>
    <ul class="conteudo">
        <li><a href="#" title="Primeiro link">Primeiro linka>li>
        <li><a href="#" title="Segundo link">Segundo linka>li>
        <li><a href="#" title="Terceiro link">Terceiro linka>li>
    ul>
div>
O efeito que nós queremos é: ao clicar no link com classe “trocar” (a.trocar) que estiver dentro de uma div com classe “box” (div.box a.trocar), a lista desordenada com classe “conteudo” (ul.conteudo) que estiver logo após esse link (que recebeu o clique) irá deslizar, fechando e abrindo a cada clique.
Uma das primeiras coisas que se aprende no jQuery é que ele trabalha com os elementos HTML da página, e para poder acessar esses elementos ele precisa ser executado depois que a página carregou. Isso não é obrigatório, mas por motivos didáticos, vamos seguir essa regra.
Para isso, precisamos colocar em nosso código javascript um código que permita executar outros códigos (jQuery ou não) após o carregamento do site… Lembram do “onload” do body? É praticamente a mesma coisa:
1$(document).ready(function() {
2    // O que estiver aqui será executado após o carregamento do site
3});
Com o código acima criamos um evento ready (pronto) no documento (todo o site) que executará uma function() quando o site estiver carregado (método ready()).
Documentação do método ready(): http://api.jquery.com/ready/
Faça o seguinte teste para entender melhor:
1$(document).ready(function() {
2    alert('O site terminou de carregar!');
3});
Veja um exemplo do código acima funcionando: http://jsbin.com/upuxa3/
Agora vamos continuar e voltar ao nosso exemplo de collapse: precisamos criar um evento de clique (método click()) no link que tem a classe “trocar”, fazemos isso da seguinte forma:
1$(document).ready(function() {
2    $('div.box a.trocar').click();
3});
Com o código acima criamos um evento vazio que na verdade irá “clicar” no link… Precisamos colocar uma função como parâmetro desse método click() para que, ao invés de clicar no link, um outro código seja executado.
Documentação do método click(): http://api.jquery.com/click/
Vamos a um pequeno exemplo que irá disparar um alerta ao clicar no link:
1$(document).ready(function() {
2    $('div.box a.trocar').click(function() {
3        alert('Você clicou no link...');
4    });
5});
Veja um exemplo do código acima funcionando: http://jsbin.com/upuxa3/2/
Antes de continuar com o nosso exemplo, precisamos notar que, estamos adicionando um evento de clique a um link que, por padrão, já é um elemento que possui clique, certo? Todo link é “clicável”, mesmo que seu endereço leve a lugar nenhum.
Mas o jQuery não é esperto (ou seria maleducado?) o suficiente para substituir o comportamento padrão de clique naquele link… Ao adicionarmos o evento click() no link o jQuery é executado antes, mas quando termina o comportamento padrão acontece… Então se o href (endereço) do link apontasse para “http://thiagobelem.net” vocês iriam ver o meu site depois de receber o alerta.
Existem duas formas de evitar o comportamento padrão de um clique em um link quando se trabalha com o método click(): no mais deselegante é retornado false (falso) na função que está no clique. A outra forma, mais correta e elegante, é assim:
1$(document).ready(function() {
2    $('div.box a.trocar').click(function(evento) {
3        evento.preventDefault();
4        alert('Você clicou no link...');
5    });
6});
É só adicionar um argumento (com o nome que você quiser) à função que é executada no evento click() do link e, dentro da função, usar o método preventDefault() nesse argumento, evitando assim o comportamento padrão do navegador, que seria mandan o visitante para o endereço link após o evento do jQuery ser executado.
Veja um exemplo do código acima funcionando: http://jsbin.com/upuxa3/3/
Agora nós podemos continuar nosso exemplo selecionando a lista de links com classe “conteudo” (ul.conteudo) que esta logo após o link que foi clicado:
1$(document).ready(function() {
2    $('div.box a.trocar').click(function(evento) {
3        evento.preventDefault();
4        $(this).next('ul.conteudo');
5    });
6});
Partimos do link que recebeu o clique $(this) e procuramos uma ul.conteudo que esteja logo em seguida usando o método next().
Percebam que dessa vez, usamos a função jQuery no this, que retorna o elemento que ativou o evento de clique, e depois “caminhamos” até o próximo elemento que satisfaça o seletor ul.conteudo. Esse “caminhar” é, em inglês, chamado de traversal e nos ajuda a, partindo de um elemento, encontrar outros elementos que tenham algum tipo de relação com o elemento no qual “estamos”.
Documentação do método next(): http://api.jquery.com/next/
Mas, como foi dito anteriormente, não adianta nada selecionar um elemento se não fizermos nada com ele… Já conseguimos encontrar a lista de links e agora precisamos fazer ela aparecer e sumir a cada clique… Fazemos isso dessa forma:
1$(document).ready(function() {
2    $('div.box a.trocar').click(function(evento) {
3        evento.preventDefault();
4        $(this).next('ul.conteudo').slideToggle();
5    });
6});
Com o método slideToggle() faz com que o elemento feche quando estiver aberto, e abra quando estiver fechado. Ou seja, cada vez que clicarmos no link de “abrir/fechar” o jQuery irá verificar se a lista de links está aberta ou não e irá trocar o seu estado, abrindo-a ou fechando-a.
Veja um exemplo do código acima funcionando: http://jsbin.com/anafo3/
Poderíamos parar por aqui… Mas se você for um usuário chato, vai clicar 300 vezes no link rapidamente e vai perceber que, depois de alguns cliques seguidos (e muito rápidos) a lista para de abrir e fechar e “buga”.
Para evitar esse tipo de comportamento precisamos filtrar o seletor e evitar rodar o slideToggle() enquanto ainda esteja acontecendo uma animação… Ou seja: executamos o método slideToggle() apenas na lista que não (not) estiver animada (animated):
1$(document).ready(function() {
2    $('div.box a.trocar').click(function(evento) {
3        evento.preventDefault();
4        $(this).next('ul.conteudo:not(:animated)').slideToggle();
5    });
6});
Documentação do seletor :not(): http://api.jquery.com/not-selector/
Viram que simples?! Com exatamente quatro linhas, eu disse QUATRO LINHAS, criamos um efeito super “maneiro” que você pode usar em praticamente qualquer HTML de qualquer site! O jQuery é ou não é uma maravilha?
Veja um exemplo do código acima funcionando: http://jsbin.com/anafo3/2/
E o nosso exemplo longo mas prático está pronto. :)
Olha como isso tudo é uma conversa com o código:
Quando o documento carregar crie um evento de clique no a com classe “trocar” (e que estiver dentro de uma div com classe “box”) e, quando esse evento for chamado, previna o comportamento padrão do navegador, vá até a lista com classe “conteudo” links que estiver logo após esse link e, se ele não estiver no meio de uma animação, troque o seu estado fechando-a ou abrindo-a

Fonte:  Thiago Belem: Entendendo o jQuery – Parte 2
0 Comentários
Marcadores:

O que é e como funciona o jQuery



Mas hein?! jQuery? Que bicho é esse?

Pra quem ainda não conhece, o jQuery é um framework de Javascript.
Um framework, de forma bem resumida, é uma coleção de funções e métodos prontos para serem utilizados, amplamente testados e que devem ser usados de forma pré-definida para tudo correr bem.
Em alguns casos um framework chega a ser um estilo completamente novo de programar em certa linguagem, no caso do Javascript, o jQuery é, sem dúvida, um estilo novo, atrativo, fácil e interessantíssimo de programar.
Existem inúmeros outros frameworks de Javascript como o MooTools ou ExtJS mas eu sempre vou puxar a sardinha pro lado do jQuery por que ele realmente merece!
O jQuery foi criado sob o mantra do “Write less, do more” (Escreva menos, faça mais) e é exatamente por causa disso que ele é tão surpreendente, com algumas poucas linhas de código você consegue fazer os mais variados efeitos que antes custavam dezenas de linhas de código com Javascript puro ou algumas horas de trabalho em Flash.

E onde eu uso isso?

Você pode usar o jQuery para fazer praticamente qualquer efeito legal, ou requisições em AJAX ou até mudanças na página após o seu carregamento.
Para poder utlizar o jQuery você precisa sempre inserí-lo no seu HTML, você pode fazer o download do arquivo .js no site oficial e chama-lo no seu HTML ou usar uma versão hospedada pelo Google.
Em ambos os casos você precisa inserir o script dentro do do seu site ou logo antes do , veja a seguir a linha que insere o script pra cada um dos casos:

Inserindo o jQuery local (salvo no seu site)

<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>

Inserindo o jQuery hospedado no Google

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>
Vamos ver alguns exemplos básicos de como é fácil e simples usar essa ferramenta:

Efeito de foco em uma lista de imagens

Suponhamos que você tenha uma lista de imagens com o seguinte HTML:
1<ul class="lista-imagens">
2    <li><img src="img/imagem1.jpg" alt="Imagem 1" width="200" height="200" />li>
3    <li><img src="img/imagem2.jpg" alt="Imagem 2" width="200" height="200" />li>
4    <li><img src="img/imagem3.jpg" alt="Imagem 3" width="200" height="200" />li>
5    <li><img src="img/imagem4.jpg" alt="Imagem 4" width="200" height="200" />li>
6ul>
E você queira fazer com que, ao passar o mouse sobre uma das imagens, as outras se apagem um pouco, deixando apenas a que está com o cursor em cima, acesa.
Antes de começar o seu script, você precisa criar um passo-a-passo de como o seu efeito irá funcionar, isso te ajuda a entender o jQuery de forma mais fácil:
  • Ao passar o mouse em cima de uma imagem (evento que irá disparar o efeito)
  • Todas as imagens se apagam, exceto a imagem que estamos com o mouse em cima
  • Ao tirar o mouse de cima da imagem
  • Todas as imagens se acendem voltando ao estado original
O jQuery funciona todo baseado em eventos, você determina um evento e, assim que ele for lançado, um certo script é executado.
A maioria dos scripts de jQuery são executados após o carregamento do site, o que também é um evento. De forma geral, após o carregamento do site nós criamos gatilhos em alguns elementos (HTML) da página e assim que esses eventos forem ativados os efeitos vão acontecendo em paralo.
Crie um arquivo jquery.init.js (o nome do arquivo não é obrigatório) e insira-o no seu site logo após o jQuery:
<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="js/jquery.init.js">script>
Agora dentro dele coloque o seguinte código:
1(function($) {
2
3})(jQuery);
Este é um template padrão que você deve usar sempre que for criar um arquivo para jQuery. Com esse template você evita problema de compatiblidade entre o jQuery e outros frameworks que usam a função $ para executar seus códigos. Considere esse template como uma lâmpada ou computador: você não precisa entender como funciona pra depender, usar e achar que não vive sem.
Agora vamos criar o código que criará o evento de “quando o site terminar de carregar”:
1(function($) {
2
3    // Quando o site terminar de carregar...
4    $(document).ready(function() {
5
6    });
7
8})(jQuery);
Este evento é quase sempre necessário pois o jQuery trabalha com os elementos HTML da página, e se você inserir o script no e sair rodando jQuery nos elementos, receberá mensagens de erro pois o jQuery não irá encontrar os elementos que ainda não foram carregados.
Criado o nosso evento, podemos começar a desenvolver o nosso efeito de foco na lista de imagens, voltando a nossa lista de passos, começaremos pelo começo:
Ao passar o mouse em cima de uma imagem (evento que irá disparar o efeito)
Precisamos então, criar um um evento de hover nas imagens:
6// Quando passarmos o mouse me cima das imagens
7$('ul.lista-imagens li img').hover(function() {
8
9});
Vamos parar aqui para entender aquela primeira linha separando-a em partes:
$('ul.lista-imagens li img').hover(function() { ... });
Na parte em azul temos uma chamada à função $() que é um atalho da função principal jQuery. Praticamente toda linha de jQuery começa dessa mesma forma.
Na parte em amarela temos o seletor, que segue o mesmo padão de seletores CSS e serve para nos ajudar a localizar o evento ao qual aplicaremos o efeito, evento ou método. Nesse caso, estamos procurando as os elementos img que estejam dentro de um li, que por sua vez estejam dentro de uma ul com classe lista-imagens, o que no CSS seria exatamente o seletor que usamos: ul.lista-imagens li img.
Na parte em laranja temos uma chamada ao método hover() este método é ativado sempre que passamos o mouse sobre o elemento identificado no seletor (parte amarela). O método .hover() possui dois parâmetros: primeiro o que será executado quando o mouse “entrar” no elemento e o segundo quando o mouse “sair” do elemento.
E por fim, na parte em verde, temos o primeiro parâmetro do método hover()… Tudo que estiver dentro dessa parte será executado ao passar o mouse no elemento identificado pelo seletor.
Todas as imagens se apagam…
Continuando o nosso código, vamos inserir a linha que irá escurecer (apagar / diminuir a opacidade / esmaecer) todas as imagens da lista… Para isso usaremos o método .fadeTo() do jQuery.
06// Quando passarmos o mouse me cima das imagens
07$('ul.lista-imagens li img').hover(function() {
08
09    // Escurecemos todas as imagens da lista
10    $('ul.lista-imagens li img').fadeTo('fast', 0.3);
11
12});
O método .fadeTo() possui dois parâmetros obrigatórios: primeiro a velocidade de transição em milisegundos (onde ‘fast’ significa cerca de 1/3 de segundo) e o segundo parâmetro é a opacidade de destino que vai de 0 até 1.
Com esse efeito, todas as imagens da lista ficarão com 30% de opacidade (70% transparentes). Perceba que escurecemos também a imagem que estamos com o mouse em cima.
… exceto a imagem que estamos com o mouse em cima
Agora precisamos “filtrar” esse efeito de escurecer e fazer com que ele afete todas as imagens exceto a imagem que estamos com o mouse em cima:
09// Escurecemos todas as OUTRAS imagens da lista
10$('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);
Perceba que inserimos o .not(this), esse método .not() faz com que, [nesse caso] depois de selecionar todas as imagens da lista, nós excluímos o this que faz referência ao elemento que ativou o efeito.
Se você testar o script que fizemos até agora, perceberá que as imagens estão apagando corretamente, mas não estão acendendo novamente quando tiramos o mouse de uma das imagens.
Ao tirar o mouse de cima da imagem
Precisamos adicionar o segundo parâmetro do .hover(), este segundo parâmetro é executado quando tiramos o mouse do elemento que ativou o efeito.
06// Quando passarmos o mouse me cima das imagens
07$('ul.lista-imagens li img').hover(function() {
08
09    // Escurecemos todas as OUTRAS imagens da lista
10    $('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);
11
12}, function() {
13
14    // Aqui teremos o código que será executado quando tirarmos o mouse da imagem
15
16});
Todas as imagens se acendem voltando ao estado original
Agora só precisamos inserir o mesmo código que usamos para escurecer as imagens, sem precisar filtar o this, e mudando a opacidade para 1:
06// Quando passarmos o mouse me cima das imagens
07$('ul.lista-imagens li img').hover(function() {
08
09    // Escurecemos todas as OUTRAS imagens da lista
10    $('ul.lista-imagens li img').not(this).fadeTo('fast', 0.3);
11
12}, function() {
13
14    // Todas as imagens se acendem voltando ao estado original
15    $('ul.lista-imagens li img').fadeTo('fast', 1.0);
16
17});
Com esse código o nosso efeito já está pronto, veja aqui ele funcionando.
Você provavelmente vai notar que o efeito fica “enfileirado”, ou seja, se passarmos o mouse sobre várias imagens rapidamente o efeito vai ficar acontecendo um depois do outro como se o código estivesse agindo sozinho.
Sabendo disso, precisamos fazer todos os efeitos “pararem” antes de começar um novo, isso vai fazer com que, cada vez que passarmos o mouse sobre uma imagem, o efeito seja executado imediatamente e, se houverem outros efeitos na fila, eles sejam sobrepostos… Fazemos isso usando o método .stop() antes do .fadeTo():
06// Quando passarmos o mouse me cima das imagens
07$('ul.lista-imagens li img').hover(function() {
08
09    // Escurecemos todas as OUTRAS imagens da lista
10    $('ul.lista-imagens li img').not(this).stop().fadeTo('fast', 0.3);
11
12}, function() {
13
14    // Todas as imagens se acendem voltando ao estado original
15    $('ul.lista-imagens li img').stop().fadeTo('fast', 1.0);
16
17});
Agora sim nosso efeito ficou completo e, pasmem, com apenas cinco linhas:
1$('ul.lista-imagens li img').hover(function() {
2    $('ul.lista-imagens li img').not(this).stop().fadeTo('fast', 0.3);
3}, function() {
4    $('ul.lista-imagens li img').stop().fadeTo('fast', 1.0);
5});




Fonte: Thiago Belem: O que é e como funciona o jQuery
0 Comentários
Marcadores:

6 de mai. de 2012

Curso de Wordpress do portal iConectado

Curso WordPress Grátis 


Autor: Ricardo (Rick), trabalha com o WordPress a mais de 4 anos.


O WordPress é um gerenciador de conteúdo GRATUITO lançado em maio de 2003, escrito em PHP e executado em MySQL, desenvolvido por Matt Mullenweg, Ryan Boren e Donncha O Caoimh. Está disponível para baixar em português, inglês e vários outros idiomas.
WordPress.org é um site comunitário do projeto do aplicativo WordPress, nele é possível realizar o download do gerenciador e ajudar o projeto. No site você encontra também o diretório de plug-ins e temas, a documentação chamada de Codex, listas de sites que utilizam o WordPress, o fórum de suporte e o blog oficial.
WordPress.com oferece hospedagem gratuita de blogs com o gerenciador WordPress, o usuário cria um endereço do tipo meublog.wordpress.com, mas tem muitas limitações, entre elas a de poder escolher apenas alguns temas e não pode utilizar JavaScript, CSS e FTP. Por isso muitos usuários acabam utilizando o gerenciador do WordPress.org em uma hospedagem paga.

O Curso é apresentado através de vídeo aulas publicadas no portal e também em nosso canal no YouTube. Todas as aulas do curso são gratuitas, ou seja, não é necessário nenhum cadastro ou pagamento para visualiza-las!
O Curso será divido em três módulos, o primeiro iremos mostrar como trabalhar, gerenciar e configurar o WordPress utilizando temas prontos. No segundo módulo iremos mostrar como criar um tema para um blog e o terceiro módulo iremos mostrar como criar um tema WordPress para um portal.
Aula 1 – Apresentação – Vantagens e Desvantagens do WordPress
Aula 2 – Download e Instalação
Aula 3 – Configurações - Parte 01 - Parte 02
Aula 4 – Painel
Aula 5 – Posts
Aula 6 – Posts – Novo Post
Aula 7 – Posts – Categorias
Aula 8 – Posts – Tags
Aula 9 – Posts – Editor
Aula 10 – Posts – Galeria de Imagens
Aula 11 – Posts – Vídeo e Áudio
Aula 12 – Mídia
Aula 13 – Links
Aula 14 – Páginas
Aula 15 – Comentários
Aula 16 – Aparência – Como Instalar Temas
Aula 17 – Aparência – Widgets
Aula 18 – Aparência – Menus
Aula 19 – Opções do Tema
Aula 20 – Editor
Aula 21 – Como Instalar Plugins
Aula 22 – Upload de Plugins
Aula 23 – Como Atualizar Plugins
Aula 24 – Como Configurar o Akismet
Aula 25 – Como Configurar o Plugin FeedBurner
Aula 26 – Como Configurar o Plugin WordPress SEO
Aula 27 – Como Configurar o Plugin XML Sitemap
Aula 28 – Como Configurar o Plugin Contact Form 7 – (Formulário De Contato)
Aula 29 – Tipos de Usuários
Aula 30 – Ferramentas e Backup
Aula 31 – Configurações
Aula 32 – Como Traduzir Temas WordPress
Aula 33 – Como Migrar o WordPress de Dominio e Servidor
Aula 34 – Como Enviar Um Sitemap Para o Google

Fonte: iConectado

0 Comentários
Marcadores: