Aprenda a fazer recorte profissional de imagens no Photoshop com o uso da Ferramenta Caneta (Pen Tool) nessa vídeo aula com vários macetes e dicas importantes para melhorar a produtividade do seu trabalho. Veja também a versão escrita deste tutorial, feito no começo da história deste blog.

Embora o termo Web 2.0 tenha saído de nossas rotinas, ele marcou muito por um estilo gracioso de design. Um gradiente que dá impressão de brilho, elegância e leveza a uma página. É este efeito que você aprenderá a fazer neste tutorial.

1. Crie um novo arquivo

Vá até o menu Arquivo > Novo ou utilize o atalho Cmd+N (Ctrl+N).

Crie um novo arquivo

Neste exemplo, criaremos um botão, sendo assim, crie um arquivo nas resoluções 300×150 (ou de sua preferência).

2. Desenhe o seu botão

Existem diversas maneiras de definir uma forma, através de marcação de seleção, caneta ou formas geométricas. Fique a vontade para escolher. Minha opção foi a Ferramenta Retângulo Arredondado.

Ferramenta Retângulo Arredondado

A seguir desenhe seu botão.

Desenhando o Botão

3. Crie o Gradiente

Após ter o desenho do seu botão pronto, acesse as Opções de Mesclagem da camada. Você tem três maneiras 4 maneiras de abrir esta opção, sendo elas:

1. Duplo clique na camada;
2. Botão Direito > Opções de Mesclagem;
3. Ícone “Fx” > Opções de Mesclagem; ou
4. Menu Camada > Estilo de Camada > Opções de Mesclagem

Se seu Photoshop estiver em inglês, esta opção estará nomeada como “blending options“. Um novo menu abrirá, selecione a opção Sobreposição de Degradê. Por padrão, o degradê inicia da cor preta para branca, clique sobre o desenho do degradê para editá-lo.

Editando o Gradiente (clique para ampliar)

Uma nova janela abrirá e nela você poderá criar seu estilo 2.0.

Editor de Gradiente

Para criar o efeito você utilizará apenas a área “Tipo de gradiente”.

Mantenha a opção em Sólido (depois do tutorial teste as outras para compreender o funcionamento desta opção). Observe que existem 2 marcadores para cada cor, o superior indica o nível de opacidade (transparência) e o inferior indica a cor. Para criar o efeito você terá 4 marcações de cor.

Crie novos pontos de cores dando um clique simples na parte inferior do painel.

Adicionando Cores ao Gradiente

O próximo passo é o fundamental, definição de cores. A lógica é simples, você escolherá a cor que deseja e inserir 4 variações para ela, seguindo o tipo “escuro, bastante escuro, bastante claro, claro”. Compreenda nos exemplos abaixo:

Exemplo 1 (Clique para ampliar)

Exemplo 2 (Clique para ampliar)

Após inserir as coisas, restará apenas um único detalhe para finar a criação do estilo 2.0.

Aproxime os dois pontos de cores centrais, de forma que o degradê adquira uma forma mais sólida e menos esfumaçada.

Finalizando o Estilo 2.0

Agora é só curtir o resultado:

Resultado

O intuito deste tutorial é de que você aprenda a regra e possa explorar a mesma de outras formas, além de adicionar novas estilizações ao mesmo elemento. Com o passar do tempo conseguirá efeitos e resultados mais profissionais, basta praticar.

Exemplos

Bons estudos.

Diminuir e aumentar fontes é uma funcionalidade tradicional na web desde que o javascript existe. O uso é fácil, rápido e útil para seus usuários.

Script

Para usar é muito simples, crie um arquivo .js (opcional) ou adicione o código dentro de um arquivo global de todos os seus scripts (recomendado). Dentro deste novo arquivo, cole o código abaixo:

var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }
}

Desta forma está sendo determinado que o tamanho padrão da fonte é de 12px, o tamanho mínimo será de 8px e o máximo de 18px. Altere os valores de acordo com sua necessidade.

Como usar

Para usar o script você precisará primeiro fazer a referência ao arquivo dentro da sua página, veja o exemplo abaixo:

<script type="text/javascript" src="/scripts/tamanhodafonte.js"></script>

Depois insira os links que permitirão ao usuário a ação de diminuir ou aumentar a fonte do texto:

<a href="javascript:decreaseFontSize();" title="Diminuir Fonte">Diminuir Fonte</a>
<a href="javascript:increaseFontSize();" title="Aumentar Fonte">Aumentar Fonte</a>

Boas Práticas

Foi fácil não é mesmo? Duas dicas extras:

1. Sempre que trabalhar com scripts, utilize-os no fim da sua página, antes de fechar a tag . Isso garantirá uma boa performance no carregamento e processamento da página.
2. Ao trabalhar com links, utilize o atributo “title” para que apareça a legenda do link ao passar o mouse. Apesar de parecer bobagem é muito importante para compreensão do conteúdo, principalmente por robôs de indexação.

Nesta vídeo aula você aprenderá um exercício simples e eficiente para melhorar sua afinidade com o programa gráfico que você utiliza para criar layouts e também para melhorar sua produtividade (como é da minha preferência, utilizei o Photoshop no tutorial). O objetivo é simples, escolher o layout de um site que você gosta e reproduzi-lo no programa separando todas as camadas que o formam. Em alguns momentos poderá sentir dificuldade por não saber qual ferramenta usar pra fazer determinadas formas ou objetivos e é justamente esse o ponto, uma vez que conseguir superar este obstáculo, estará pronto quando houver a necessidade de criar seu próprio layout do zero.

• Resultado final do exercício: Download
• Tema utilizado no exercício: Acessar

Bom exercício e sucesso a todos. Não esqueçam de assinar o canal do youtube e me seguir no twitter.

Quem já trabalha com Wordpress certamente saberá do que se tratam as seguintes template tags:

• the_title – Título;
• the_content – Conteúdo;
• the_excerpt – Resumo do Conteúdo;
• the_permalink – Link permanente do post;

Esse simples tutorial vai lhe ensinar a definir quantas palavras devem ser exibidas através da tag the_excerpt, responsável pela exibição do resumo do seu post. O Excerpt exibe o início do seu primeiro parágrafo ou o resumo que você escolher, caso preencha o campo de resumo logo após o Text Area de inserção do seu artigo. Uma dúvida comum é como definir quantas palavras devem ser exibidas, já que isso influencia diretamente no seu layout e no tamanho do seu html.

Abra o arquivo functions.php, responsável pelo controle de boa parte do funcionamento do seu tema e insira o seguinte código:

/* limite de palavras do excerpt */
function my_excerpt_length($text){return 30; }
add_filter('excerpt_length', 'my_excerpt_length');

Onde tem “return 30″, não preciso nem explicar que o 30 é o número de palavras não é mesmo? Mude para o número que deseja de acordo com a sua necessidade. Mais fácil impossível. Como extra, em padrão após encerrar o resumo o Wordpress insere o texto [...]. Para alterar esse texto, acrescente o seguinte código no seu arquivo functions.php.

/* texto no fim do excerpt */
function new_excerpt_more($more) {return 'leia mais...'; }
add_filter('excerpt_more', 'new_excerpt_more');

Substitua o “leia mais…” pelo texto de sua preferência.

Por mais que o Wordpress já seja um sistema maravilhoso, ao fazermos trabalhos para clientes utilizando-o, é importante ficar atento a alguns detalhes que passam mais profissionalidade. Uma delas é substituir a logo do Wordpress no admin pela logo do cliente, deixando o sistema com mais identidade e agradando o cliente.

Abra o arquivo functions.php do seu tema e insira o seguinte código:

function minha_logo_wp_login() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/minha-logo.gif) !important; }
    </style>';
}

add_action('login_head', 'minha_logo_wp_login');

Neste exemplo, a logo personalizada encontra-se na pasta images do seu tema, caso prefira em outro local, altere o endereço conforme sua escolha.

Lembrando que o intuito não é esconder que foi utilizado um CMS. Sempre recomendo a todos que trabalham com Wordpress que fique claro para o cliente que você está utilizando uma plataforma preparada e quais seus benefícios.

Além de deixar visível as formas de contato, perfis nas redes sociais, também é importante mostrar ao seu leitor o que tem de mais atrativo dentro do seu blog. Uma das maneiras de fazer isso é exibir quais são os posts que mais receberam comentários. Além disso ser uma espécie de Ranking, facilitará um novo leitor a participar da comunidade formada dentro do blog.

Abra o seu arquivo sidebar.php (arquivo responsável pelo conteúdo lateral), dentro deste arquivo insira o código abaixo onde deseja exibir a listagem.

<h2>Mais Comentados</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?>
</ul>

Creio que seja auto explicativo:

• $result = resultado exibido após selecionar no banco de dados os posts mais comentados, listando de forma descendente (ORDER BY comment_count DESC)
• $postid = ID do post
• $title = Título do Post
• $commentcount = Número de Comentários

Lembrando que com um pouco de criatividade você pode criar um bloco diferente, atribuindo imagens, ícones ou planos de fundo a seu critério.

Este é meu primeiro vídeo tutorial, onde ensino como instalar o Wordpress através do programa XAMPP. Preciso fazer algumas melhorias nos próximos vídeos nos quesitos iluminação e audio do video, mas este é apenas um começo. No meu canal do youtube irei publicar vídeos sobre tutoriais, desenvolvimento web, design, mobile e afins. Subescreva no Youtube!

Envie sua opinião, crítica e/ou sugestão.

Eu diria que a maioria dos temas profissionais do Wordpress costumam trabalhar o menu com lista no estilo Drop Down para exibir as subcategorias de uma categoria. Não gosto muito de ter meus sites desta forma, apesar de que em alguns casos é uma solução eficiente.

Independente de usar Drop Down ou não, no menu, é interessante que os links das subcategorias estejam disponíveis dentro da página da categoria que clicamos. Para isso, basta verificarmos se existe uma subcategoria. Utilize o seguinte código php:

if (is_category()) {

  //Verificar o ID da categoria atual
  $this_category = get_category($cat);

  //Exibir as subcategorias
  if (get_category_children($this_category->cat_ID) != "") {
    echo "<h1>Subcategorias</h1>";
    echo "<ul>";
    wp_list_categories('orderby=id&show_count=0&use_desc_for_title=1&child_of='.$this_category->cat_ID);
    echo "</ul>";

  }
}

Utilizei uma função que é natural do Wordpress, chamada wp_list_categories. Para identificar o ID da categoria utilizei a função get_category. Para mais detalhes sobre a função wp_list_categories, leia a referência em: http://codex.wordpress.org/Template_Tags/wp_list_categories.

Lembrando que as subcategorias serão exibidas em forma de lista (<li>), a formatação fica por sua conta.

Fazia tempo que eu não postava nada sobre o Wordpress, ferramenta na qual sou completamente apaixonado (tentarei aumentar a frequência de posts desta categoria). O assunto de hoje é bem simples, trata-se de remover aqueles blocos no administrador do Wordpress que você acha completamente desnecessário ou que atrapalha algo na sua gerência.

Que blocos são esses? Dei o nome de blocos para ficar mais fácil de assimilar. Trata-se dos campos do administrador ao fazer uma postagem ou criar uma página: tags, categorias, resumo, comentários, revisão, senha, etc. Isso é muito útil pois cada site exige coisas diferentes e é necessário saber filtrar, não apenas para você, mas também para seu cliente.

Suponhamos que está desenvolvendo um site institucional em Wordpress, cujo não haverão campos de comentários. No administrador haverão campos relacionados, como o controle de permissão de comentários e trackbacks, e os avisos de comentários pendentes para aquele post em específico. Retirando esses blocos, a experiência do usuário administrador do site será melhor, sem precisar te perguntar para que servem tais blocos (afinal a resposta poderia ser: “não serve pra nada nesse site”).

Para ter o controle sobre os blocos é muito fácil, abra o arquivo functions.php do seu tema e adicione o seguinte código php:

<?php
class removeMetas{
 private $boxes = array();
 public function __construct(){
 add_action('do_meta_boxes', array($this, 'removeMetaBoxes'), 99, 3);

 //Blocos de Post
 $this->boxes[] = 'postexcerpt';
 $this->boxes[] = 'passworddiv';
 $this->boxes[] = 'trackbacksdiv';
 $this->boxes[] = 'commentstatusdiv';
 $this->boxes[] = 'commentsdiv';
 $this->boxes[] = 'slugdiv';
 $this->boxes[] = 'postcustom';
 $this->boxes[] = 'tagsdiv';
 $this->boxes[] = 'categorydiv';
 $this->boxes[] = 'authordiv';
 $this->boxes[] = 'submitdiv';
 $this->boxes[] = 'revisionsdiv';

 //Blocos de Páginas Estáticas (Pages)
 $this->pageboxes[] = 'pageparentdiv';
 $this->pageboxes[] = 'pagecustomdiv';
 $this->pageboxes[] = 'pagecommentstatusdiv';
 $this->pageboxes[] = 'pageslugdiv';
 $this->pageboxes[] = 'pageauthordiv';
 $this->pageboxes[] = 'pagesubmitdiv';
 $this->pageboxes[] = 'pagepassworddiv';
 $this->pageboxes[] = 'revisionsdiv';

 }

 public function removeMetaBoxes($type, $context, $post){
 foreach ($this->boxes as $box){
 foreach (array('normal', 'advanced', 'side') as $context){
 remove_meta_box($box, 'post', $context);
 }
 }
 foreach ($this->pageboxes as $box){
 foreach (array('normal', 'advanced', 'side') as $context){
 remove_meta_box($box, 'page', $context);
 }
 }
 }
}

$removeMetas = new removeMetas();
?>

Verifique a diferença, existem os blocos quando você adiciona um Post e outros blocos quando adiciona uma página estática (Page). O código dessa forma irá ocultar os blocos, então você deverá escolher quais quer eliminar, os demais basta apenas deletar a linha ou de preferência comentar o php.

Quem não fizer a menor ideia de como se comenta uma linha php, existem duas maneiras, uma delas é igual a css (/* conteudo comentado */) ou adicionando barras duplas no início da linha, veja:

//$this->boxes[] = 'categorydiv';
/* $this->boxes[] = 'categorydiv'; */

Saiba abaixo para que serve cada uma dos blocos (MetaBoxes) que vamos controlar:

• postexcerpt: Bloco de resumo do post (na nomenclatura php do wordpress, é o excerpt);
• passworddiv: Proteção do Post por senha;
• trackbacksdiv: Controle de permissão de trackbacks;
• commentstatusdiv: Bloco Discussão;
• commentsdiv: Últimos comentários do post;
• slugdiv: Edição de slug (a definição do seu permalink);
• postcustom: Bloco de Campos Personalizados (Custom Fields);
• tagsdiv: Bloco de Tags;
• categorydiv: Bloco de Categorias;
• authordiv: Alterar autor do Post;
• submitdiv: Bloco de Publicar; e
• revisionsdiv: Bloco que indica a data e horário de quando foram feitas alterações naquele post e quem fez a alteração.

Verifique quais considera úteis para preservar. Vejam abaixo o que sempre oculto no meu admin:

• trackbacksdiv e commentsdiv: Prefiro gerenciar tudo relacionado a comentários na sessão de comentários;
• authordiv: em alguns sites sou o único administrador e em outros, acho incoerente mudar o autor de um post;
• revisionsdiv: não me interessa a informação de quando eu fiz alteração no post. Se considerar que muitas vezes altero para corrigir erros de português então.

Espero que seja útil. O Wordpress é maravilhoso, melhor ainda quando você deixa ele exatamente da maneira que você quer. Até o próximo post. 8-|