Quem nunca precisou apresentar muito conteúdo em pouco espaço? Pois é, este tutorial apresenta uma solução muito bacana para nos ajudar nestas situações. Não é necessário nenhum conhecimento aprofundado em programação para entendê-los, pois são em jQuery e basta seguir os tutoriais para que tudo se resolva.

O artigo original você encontra neste link. Espero que ajude

1. Slick Tabbed Content Area – utiliza CSS & jQuery

Ver demonstração

Ver tutorial

2. Tabs simples com jQuery

Ver demonstração

Ver tutorial

3. Tabs simples com jQuery

Ver demonstração

Ver tutorial

4. Tabs simples com jQuery & CSS

Ver demonstração

Ver tutorial

5. jQuery Tabs apresentando menu de navegação

Ver demonstração

Ver tutorial

6. Iniciando com jQuery Tabs

Ver demonstração

Ver tutorial

7. Como criar um efeito de slide com abas em jQuery

Ver demonstração

Ver tutorial

8. JavaScript: jQuery Tabs

Ver demonstração

Ver tutorial

9. Criar um efeito de Flip para conteúdos com jQuery

Ver demonstração

Ver tutorial

10. Tabs muito simples com jQuery

Ver demonstração

Ver tutorial

11. Criando facilmente jQuery Tabs

Ver demonstração

Ver tutorial

12. Animação para apresentação de conteúdos com jQuery

Ver demonstração

Ver tutorial

13. Tabs jQuery com efeito Fade

Ver demonstração

Ver tutorial

14. Efeitos de transição na apresentação de conteúdos com jQuery

Ver demonstração

Ver tutorial

15. jQuery Tabs para apresentação em barra lateral

Ver demonstração

Ver tutorial

Quem nunca precisou formatar sua máquina e perder todos os softwares instalados, e depois perder tempo reinstalando todos novamente? Principalmente nós, profissionais da web, que necessitamos de diversos navegadores, editores e afins.

Pois é, seus problemas acabaram Existe um site, chamado Ninite, onde você consegue selecionar os softwares que atendem a sua necessidade, e em seguida fazer download de todos eles de uma só vez! Para visualizar este recurso, o link está aqui ou na imagem abaixo. Espero que gostem da dica

Para aqueles que quiserem fazer um teste, o link é: http://styleneat.com/

Lembrando que seu código não sofre alterações, mantendo a mesma idéia aplicada por você quando o escreveu.

São 750 ícones em excelente qualidade para você usar e abusar em seus projetos!!!
Estes ícones foram disponibilizados pelo blog Smashing Magazine, onde você encontra ícones voltados para sistemas web, interface com usuários, bandeiras nacionais, teclas,  serviços online e mídias sociais. Tudo isto é grátis! Para fazer o download basta acessar o link abaixo ou clicar na imagem de exemplo:

Download: http://www.smashingmagazine.com/2010/04/15/the-ultimate-free-web-designer-s-icon-set-750-icons-incl-psd-sources/

É exatamente isso que o Olhar Digital demonstra nesse artigo muito interessante e bem bolado, citando exemplos práticos e reais de como utilizar de forma inteligente esse recurso que veio para ficar, sem sombra de dúvidas. Clique na imagem abaixo e leia o artigo que está dividido em três páginas.

E por hoje é isso. Até o próximo post.

Dez entre dez webdesigners se tremem ao ouvir do cliente aquela pequena frase, bem negativa: não gostei. Quem aqui gosta de ouvir isso? Acho que ninguém, não é mesmo? Nem os novatos, nem os experientes.

Se você já passou por isso, e se sentiu apertado e pressionado pelo cliente, vale a pena a leitura deste excelente post do Bruno Ávila. Clique na imagem abaixo e boa leitura

Depois de alguns dias sem postar, estou aqui novamente…não, não abandonei o blog =)
Simplesmente a vida anda corrida demais….mas vamos ao que interessa!

Vi uma dica no twitter do @pinceladasdaweb à alguns dias, e decidi compartilhar com vocês. Trata-se do CSS3 Generator. Você escolhe o efeito CSS3 que quer, e ele lhe dá o exemplo, com opção de edição, e o código para aplicar tal efeito. Uma mão na roda para dar início aos efeitos CSS3.

Clique na imagem ou acesse o link para conhecer o CSS3 Gererator….este vale a pena ir para os favoritos

PHP OO

Há mais de 1 ano venho participando do Ueb3 indiretamente, apenas indicando ao Douglas posts e artigos interessantes sobre tecnologia e desenvolvimento web. Depois de muito ele insistir, consegui um tempo extra nesse feriado que me permitiu traduzir um tutorial muito bom do Gr8gonzo – (http://www.experts-exchange.com/articles/Web_Development/Web_Languages-Standards/PHP/Beginning-Object-Oriented-Programming-in-PHP.html) a respeito de Programação Orientada a Objetos, a qual estou estudando e aprendendo, usando PHP.

Como o tutorial está em inglês, logicamente tive que fazer alguns ajustes e adaptações ao mesmo, porém sem modificar seu objetivo principal  que é dar ênfase à POO com PHP. Segue abaixo a tradução do tutorial com os devidos créditos:

Imagine o seguinte: alguém lhe diz para pregar em uma tábua 10 pregos. A melhor ferramenta para este trabalho seria um martelo, certo? Você poderia até ser especializado para a utilização de uma chave de fenda Super 9000, mas que faria absolutamente nenhum sentido para este serviço. A Super Screwdriver 9000 pode ser capaz de usar qualquer tipo de parafuso do mundo, mas não iria ajudá-lo a martelar esses 10 pregos, para o que você não iria utilizá-la e depois de um tempo, você começa a esquecer o que você sabe sobre sua chave de fenda especial.

Este é um problema comum para desenvolvedores experientes na linguagem PHP, mas que estão aprendendo a usar a programação orientada a objetos (OOP), ou para alguém que está tentando aprender OOP em PHP. Eles sabem a teoria de como utilizá-la, mas não sabem quando usá-lo corretamente na prática, acabando por deixá-la de lado e, conseqüentemente, acabam esquecendo-a depois de um tempo.

O que é Programação Orientada à Objetos?

“A Orientação à Objetos é um paradigma que representa toda uma filosofia para o desenvolvimento de sistemas. Na orientação à objetos utilizamos uma ótica mais próxima do mundo real. Lidamos com objetos, estruturas que já conhecemos do nosso dia-a-dia e sobre as quais possuímos maior compreensão.”

Definição retirada do livro: PHP: Programando com Orientação à Objetos, de Pablo Dall’Oglio – Capítulo 2.

Programação Estruturada (Tradicional) x Orientação à Objetos

Então vamos começar pela comparação programação estruturada (top-down) tradicional com a programação orientada à objetos. Começaremos com um exemplo bem simples: definir algumas variáveis que descrevem duas casas.

A programação estruturada pode ter esta aparência:

$house1_type = "Apartment";
$house1_address = "123 Main Street";

$house2_type = "Mansion";
$house2_address = "123 Money Street";

A programação orientada à objetos não é tão diferente e terá esta aparência:

class House
{
public $type = "";
public $address = "";
public $residents = array();
}

$house1 = new House();
$house1->type = "Apartment";
$house1->address = "123 Main Street";

$house2 = new House();
$house2->type = "Mansion";
$house2->address = "123 Money Street";

Parece muito semelhante certo? Seu primeiro pensamento pode ser “Por que eu iria querer escrever mais código para fazer a mesma coisa?” Não faz qualquer sentido, não é? Você vai pensar assim porque você provavelmente está um pouco preguiçoso, mas no caminho certo. A maioria dos programadores são bons, querem escrever um código menor e fazer mais em menos tempo, que é um bom objetivo, mas nem sempre o MELHOR.

Programação Orientada a Objetos: Por que e quando utilizá-la

Aqui está a diferença básica, entre a programação orientada a objeto e programação tradicional:

Programação Orientada à Objetos é mais organizada

Embora isso não quer dizer que é sempre a melhor! Suponha o exemplo: tenho um escritório em casa realmente bagunçado, mas eu sei exatamente onde tudo está. Minha esposa, por outro lado, detesta a bagunça e ia demorar muito tempo para encontrar qualquer coisa nele. Mas se eu sou o único a trabalhar nesse escritório, então eu posso mantê-lo confuso, né?

As diferenças na programação são semelhantes: programação tradicional pode ser limpa se o seu programa vai sempre ficar pequeno. Então é uma ótima maneira de desenvolver um programa rápido e eficiente. Mas se a sua aplicação cresce, então vai quase sempre ficar confuso ao longo do tempo,quando você precisar adicionar mais recursos nela. Quanto maior a aplicação se torna, mais difícil se torna para manter e documentar. Além disso, como uma aplicação cresce, você muitas vezes acaba por ter mais pessoas trabalhando com você. Seja honesto – você quer, de repente, ter que trabalhar em um projeto grande com toneladas de código bagunçado em todos os lugares? Provavelmente não.

Programação Orientada a Objetos: Como fazer?

O elemento mais básico de OOP é uma classe, parecida com esta:

class House {
}

Por si só, uma classe não faz nada. É como uma função – que você pode criar / definir uma função, mas se você não usá-la, então ela apenas exite lá e não faz nada. Assim, o pedaço de código acima simplesmente define uma classe chamada Casa.

Para fazer uso de sua classe Casa, basta criar uma instância, ou seja, uma cópia da classe usando o comando new, como abaixo:

<pre id="codeSnippet0">$yourHouse = new House();
</pre>

Isso cria uma variável chamada $suacasa, que é uma instância (cópia) da classe Casa. Você pode criar quantas instâncias como você quer, então supondo que eu não sou sem-teto, então talvez eu possa ter uma casa, também:

<pre id="codeSnippet0">$yourHouse = new House();
$myHouse = new House();</pre>

Propriedades de  classe

Sem qualquer tipo de definição ou identificação de características, não há realmente nenhuma diferença entre $suacasa e $minhacasa. Portanto, vamos definir as nossas casas um pouco mais, especificando um endereço para correspondência. Primeiro, precisamos atualizar nossa definição de classe para que ele possa manter o endereço postal:

<pre id="codeSnippet0">class House {
public $mailingAddress = "123 Default Address Street";
public $numberBedrooms = 2;
}
</pre>

Estas duas linhas extras de código são realmente simples. Criamos duas propriedades de  classes chamadas $endereco (devido a um endereço para correspondência é tipicamente uma característica propriedade / de uma casa) e $numQuartos (porque a maioria das casas têm também pelo menos 1 quarto).

Não se preocupe com o “public”, por enquanto. Você provavelmente pode adivinhar que o “123 Default Address Street” é o valor padrão para a propriedade $endereco e 2 é o valor padrão de $numQuartos.

Agora, quando nós criarmos as instâncias chamadas $suacasa e $minhacasa, ambas vêm automaticamente com o endereço “123 Default Address Street” e 2 quartos. Agora, há um grande número de casas que possuem 2 quartos, então o valor padrão poderia ser útil aqui, mas toda casa tem um endereço diferente, portanto, ter um endereço padrão provavelmente não é necessário, então vamos tirá-lo:

<pre id="codeSnippet0">class House {
public $mailingAddress;
public $numberBedrooms = 2;
}
</pre>

Agora $endereco é apenas uma propriedade que não tem qualquer endereço (valor) padrão. Vamos criar nossas casas e dar-lhes endereços diferentes:

<pre id="codeSnippet0">$yourHouse = new House();
$yourHouse->mailingAddress = "123 Your Street";

$myHouse = new House();
$myHouse->mailingAddress = "444 My Street";</pre>

Adicionar um valor à propriedade de uma instância de um objeto é simples:

<pre id="codeSnippet0">$instance_variable->property_name = value;
</pre>

Veja como fica o objeto $minhacasa, com os valores nas propriedades:

<pre id="codeSnippet0">$myHouse = new House();
$myHouse->mailingAddress = "444 My Street";
echo $myHouse->mailingAddress; // Will display "444 My Street"
echo $myHouse->numberBedrooms; // Will display "2"
</pre>

Métodos de classe

Isso é tudo que você precisa saber sobre as propriedades da classe, mas a utilidade real de uma classe são os métodos de classe, que são simplesmente funções definidas dentro de uma classe, como abaixo:

<pre id="codeSnippet0">class House {

// Our Class Properties
public $mailingAddress;
public $numberBedrooms = 2;

// Our Class Methods
public function cleanTheHouse()
{
for($i = 1; $i <= $this->numberBedrooms; $i++)
{
echo "Cleaning bedroom " . $i;
}
}
}</pre>

Agora estamos chegando a algum lugar! Vimos novamente a palavra-chave “public” e, novamente, vamos ignorá-la por enquanto. O método limparCasa() é uma função muito simples. Tudo que faz é executar um laço de repetição (loop) que vai de 1 até o número de quartos e exibe uma mensagem que diz: “Limpeza”, 1 quarto, em seguida, “Limpeza”, 2 quartos, e assim por diante até que todos os quartos tenham sido “limpos “.

Mas, e se a sua casa tem 10 quartos e a minha tem 5? Como esta função sabe quantos quartos tem para limpar? O segredo está na palavra-chave $this. O $this faz referência a atual instância, ou melhor, para o próprio objeto, não importa se é a $minhacasa ou a $suacasa. Então, se eu criei o seguinte código:

<pre id="codeSnippet0">$yourHouse = new House();
$yourHouse->numberBedrooms = 10;
$yourHouse->cleanTheHouse();

$myHouse = new House();
$myHouse->numberBedrooms = 5;
$myHouse->cleanTheHouse();
</pre>

Então $suacasa teria um loop com 10 quartos limpos, enquanto $minhacasa teria 5 quartos limpos. A palavra-chave $this é uma das ferramentas mais úteis que você terá ao usar métodos de classe, pois permite-lhe fazer referência apenas às propriedades da própria instância atual da classe. Se eu não tivesse o $this, então eu não saberia quantos quartos tenho para limpar! Se eu adivinhar 10, então ele pôde trabalhar para a instância $suacasa, mas estaria errado para $minhacasa, que só tem 5 quartos. Veja o exemplo abaixo:

<pre id="codeSnippet0">class House {

// Our Class Properties
public $mailingAddress;
public $numberBedrooms = 2;

// Our Class Methods
public function cleanTheHouse()
{
for($i = 1; $i <= $this->numberBedrooms; $i++)
{
echo "Cleaning bedroom " . $i;
}
}

public function hasMoreThanRooms($numRooms)
{
if($this->numberBedrooms > $numRooms)
{
return true;
}
else
{
return false;
}
}
}

$yourHouse = new House();
$yourHouse->numberBedrooms = 10;
if($yourHouse->hasMoreThanRooms(8))
{
print "Your house has more than 8 rooms? Wow.";
}
else
{
print "You don't have more than 8 bedrooms? Where am I supposed to sleep?";
}

$myHouse = new House();
$myHouse->numberBedrooms = 5;
if($myHouse->hasMoreThanRooms(4))
{
print "My house has more than 4 rooms? Wow.";
}
else
{
print "I don't have more than 4 bedrooms? Where are you supposed to sleep?";
}
</pre>

Ao executar esse exemplo, o resultado seria:

“sua casa tem mais que 8 quartos” e “minha casa tem mais que 4 quartos”. Ohh!!!

Escopo Public e Private

Ainda falando de casas, cada casa tem um lado de dentro e um lado de fora, correto? Se você tiver um espelho no seu banheiro, então há uma boa chance de que ninguém fora de sua casa possa ver o espelho. A maioria das casas também têm janelas do lado de fora, e qualquer pessoa dentro ou fora de sua casa pode enxergar a janela.

Esse conceito de ter algumas coisas que são visíveis apenas na privacidade do seu lar (privado) e algumas coisas que são visíveis por qualquer pessoa (pública) – é chamado de “escopo” e é mais coisa importante e básica que você deve saber sobre classes.

Sempre que criamos propriedades de classe ou métodos com o “public” na frente de seus nomes, estamos declarando visível para qualquer código dentro ou fora da classe. O código abaixo pode ajudar a entender melhor esse conceito:

<pre id="codeSnippet0">class House {

public $window = "clear";
private $bathroomMirror = "shiny";

// Inside the class - code in here can access the values
// of $window AND $bathroomMirror

public function doSomething()
{
echo $this->window; // Will show "clear"
echo $this->bathroomMirror; // Will show "shiny"
echo $this->runSecretFormula();  // Will show "Hello world!";
}

private function runSecretFormula()
{
return "Hello world!";
}
}

// Outside the class - code here can only access the value of $window.
// Trying to access $bathroomMirror from here would not work.
$myHouse = new House();
echo $myHouse->window; // Will show "clear"
echo $myHouse->bathroomMirror; // OH NO! Will give you a big, fat, fatal error if you try to run the
script!
echo $myHouse->runSecretFormula(); // OH NO! Will also give you an error!
</pre>

Há uma variedade de opiniões sobre quando e onde você deve usar funções públicas (public) e privadas (private). É muito comum que programadores inexperientes em Programação Orientada à Objetos use o public para tudo, pois realmente não há limites. Então, onde devo usar o private?

Para mim, ela realmente vem para aumentar a segurança. Enquanto estou programando, sempre tento imaginar o que de pior poderá acontecer com minha aplicação. Vamos supor que um cracker tente descobrir uma maneira para invadir um código PHP do meu sistema. Se eu tiver uma senha de super-secreta dentro de uma propriedade de classe (variável), então eu certamente não quero deixar que seja fácil para o cracker conseguir essa senha! Se eu torná-la particular (private), o cracker vai tentar lê-la de alguma forma, mas vai apenas receber um erro!

Você pode estar dizendo para si mesmo: “Mas, se um cracker poderia executar código PHP, então ele provavelmente poderia usar apenas funções PHP para mostrar o código-fonte da classe e ver a senha!” Você está certo nesse raciocínio, mas existem maneiras eficazes de ajudar a proteger contra isso. Por exemplo, existem muitos compiladores PHP lá fora, que irá transformar o seu código-fonte em linguagem de máquina (que na verdade é mais rápido). Então, usando uma combinação de compilação e métodos/propriedades privadas, você pode tornar muito difícil para hackers obter o acesso ao código e a propriedades que devem ser mantidas em total privacidade.

Por enquanto, estes são todos os princípios que você precisa saber sobre como criar e usar uma classe útil. Obrigado por ler!

OBS: Para quem quiser aprender mais, assista aqui um video com uma comparação básica entre POO e Programação Estruturada, feito baseado neste artigo.

Autor oficial: gr8gonzo – http://www.experts-exchange.com/M_124884.html

Artigo original: http://www.experts-exchange.com/articles/Web_Development/Web_Languages-Standards/PHP/Beginning-Object-Oriented-Programming-in-PHP.html

Traduzido por: Google Translator

Adaptado por: Sérgio Novelli – http://sergionovelli.eti.br

Vejam abaixo alguns exemplos com os links para as respectivas páginas:

Bolhas de discursos

Fonte: http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html

Efeitos fantáticos para botões com CSS3 e RGBA

Fonte: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Moldura em imagens com CSS3

Fonte: http://www.change.org/actions/view/tell_the_senate_protect_polar_bears_from_global_warming

Como transformar suas imagens com estilo polaroid

Fonte: http://www.zurb.com/article/305/easily-turn-your-images-into-polaroids-wi

Dicas de campos de formulários (apenas com CSS3)

Fonte: http://www.skyrocketlabs.com/articles/css3-web-form-hints.php

CSS3 Drop Down Menu

Fonte: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

Explicando os CSS3 selectors

Fonte: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

Recriando a interface do Mac OSX com CSS3

Fonte: http://www.css3.info/wp-content/uploads/2007/08/colormoduletest.html

Tipografia: efeito em textos

Fonte: http://acrisdesign.com/2010/03/letterpress-text-effect-using-photoshop-and-css/

Criando um visualizador de fotos com efeito polaroid com jQuery e CSS3

Fonte: http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

Conhece outros exemplos com CSS3? Deixe nos comentários