Hoje testei a nova timeline do Facebook. Antes de mais nada gostaria de deixar claro que é possível que algumas informações deste post estejam equivocadas, como estou com dificuldade de acesso a internet faz um bom tempo não sei exatamente quando ocorreram as mudanças e o como a rede está se comportando em relação a todos os usuários.

Recentemente foi lançado pela rede social uma nova timeline que deve ser ativada à escolha do usuário. Siga o tutorial a seguir para saber como ativar a nova timeline do Facbeook:

Criando um novo aplicativo

Você deve começar acessando a página www.facebook.com/developer e clicar no botão “Criar Novo Aplicativo” no canto superior direito da tela. Uma nova janela se abrirá onde você deverá preencher o nome de exibição do aplicativo e espaço de nome. Preencha de acordo com sua preferência, como esse aplicativo não será algo que venha a ser acessado por outras áreas ou usuários o nome não influi em nada.

Criar Novo Aplicativo

Novo Aplicativo

Depois clique em “Continuar”.

No próximo passo você terá acesso as informações do seu aplicativo. As mesmas são usadas para os mais diversos tipos de uso, para mais detalhes você deve estudar a API do Facebook e testar a criação de outros aplicativos. Clique no link do menu esquerdo “Gráficos Abertos”.

Selecione Gráficos Abertos

Na nova tela defina uma nova ação e objeto (não há nenhuma regra para este aplicativo, pode escolher qualquer tag relacionada, incluindo os próprios exemplos do campo). Clique em “Começar”.

Gráficos Abertos - Começar

Você passará por 3 novas telas, sendo elas:

1. Editar o tipo de ação (Edit your Action Type)
2. Editar o tipo de objeto (Edit your Object Type)
3. Criar uma agregação (Create an Aggregation)

Nas 3 etapas basta clicar em “Save Changes and Next”, pois os campos já estão preenchidos automaticamente e não há a necessidade de alterá-los. A documentação dos Gráficos Abertos pode ser encontrada aqui. Pronto, agora você já pode usufruir da nova timeline do Facebook.

Assim que acessar a página do seu perfil pela primeira vez, será notificado quais seus amigos também já estão usando a nova timeline. Também há uma notificação de que apenas os usuários desenvolvedores verão sua tela dessa forma a princípio. Ainda não pude testar concretamente o quanto essa notificação é verdadeira.

Função nova, capa nova

Definitivamente foi um dos recursos que mais gostei. Agora você tem uma capa para apresentar, um espaço para publicar uma foto maior ou quem sabe uma propaganda que deseja de forma atraente e que chame a atenção sem prejudicar visualmente o resto da página. O tamanho da imagem a ser inserida é de 851 x 315 pixels.

Particularmente achei a altura da imagem até exagerada, principalmente para quem estiver acessando por notebooks. Aproveite o espaço para mostrar a qualidade do seu trabalho (designers definitivamente podem ficar felizes). Eis o resultado do meu primeiro teste:

Nova Timeline no Facebook

Nova usabilidade e configurações

Preciso de mais tempo utilizando esta versão para ter prioridade pra dizer se ela ficou mais agradável ou não. A idéia de timeline ficou verdadeiramente interessante com sua linha principal e pontos demarcando atividades, porém minha leitura ficou completamente “tonta” por um zig zag sem fim. Não há alinhamento das atividades nem regra específica sobre qual coluna ficará determinado conteúdo, exceto pelas novas amizades e curtidas que ficam no fim de cada mês. Uma atividade fica do lado esquerdo, a anterior do direito, a anterior no esquerdo e assim por diante.

Leitura Zig Zag

A maneira ideal para uma análise do gênero seria um mapa de calor com pelo menos 2 semanas de testes. Falando da exibição do conteúdo nos blocos, houveram muitas mudanças agradáveis.

1. A exibição de fotos ficou mais ampla fazendo com que muitas das novas postagens não precisem ser clicadas e abrir aquele lightbox chatinho de carregar.

Exibição de Nova Foto

2. Sabe aquela notificação geralmente inútil e que você já sabe de quem adicionou quem? Ela fica toda concentrada no fim do mês, não fazendo você perder tanto tempo lendo a mesma coisa.

Amigos Adicionados

3. A mesma regra da notificação de amizades se aplica a um bloco de “curti”.

Curtir

4. O termo timeline nunca foi tão bem explorado. Agora tudo é exibido de forma cronológica a começar até mesmo pelo seu nascimento. Qualquer atividade que você insira de anos anteriores, como por exemplo locais que trabalhou, ele sugere que você poste fotos ou informações. É praticamente uma maneira de contar a história da sua vida. Embora convenhamos, com pessoas que postam dezenas de coisas todos os dias, vai ser pouco provável que alguém comece lá de baixo e veja tudo.

Publique sua história desde pequeno

É isso, ative, conheça, analise a minha opinião e a sua e volte aqui para comentar, curtir e repassar.

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.

Em 2011 o Buscador Google fez um avanço que mudou a vida de muitos webmasters e desenvolvedores, adaptou seus algoritmos para determinar que o tempo de carregamento dos sites se tornar-se um critério realmente importante para o posicionamento e rankeamento dos mesmos. A otimização de performance em um site envolve diversos fatores e tecnologias, como programação, servidores, codificação, número de imagens, requisições http, dentre outras.

Compressão de CSS

O que é?

Ao codificar um arquivo CSS, inserimos naturalmente uma quantia enorme de “espaços” e quebra de linhas. Entretanto, como todo arquivo de texto, cada caractere adiciona um byte ao tamanho final do arquivo, espaços em branco e quebra de linhas nada mais são que caracteres. “Ah fala sério, se eu reduzir bytes do meu CSS vai mudar tanto assim?” Absolutamente sim.

Trabalhando da forma ideal

Aprendendo, abrindo códigos fonte ou fazendo cursos, somos influenciados a usar espaçamentos desnecessários, que na verdade só atrasam o tempo de trabalho. Veja a forma mais comum utilizada:

CSS Tradicional

O ideal é ter o costume de já trabalhar de forma comprimida, não utilizando mais a quebra de linhas entre as propriedades. Dessa forma:

CSS Comprimido

A primeira impressão que temos é que a legibilidade para trabalhar fica muito ruim e atrasa. Como alguém que já fez tal migração de metodologia, posso afirmar com certeza que a forma compacta é melhor, principalmente tratando de sites de médio a grande porte, onde a quantidade de linhas cresce absurdamente. Mais linhas, maior a barra de rolagem, é uma verdadeira dificuldade editar tais arquivos.

Dicas

Padronize os nomes de classes e ids que você utiliza, além de facilitar na leitura você poderá recorrer ao atalho ctrl+F (cmd+f) para buscar a classe específica e não perder tempo com a barra de rolagem.

Compressão

Apesar de ter acabado de citar a palavra “comprimido”, essa ainda não é a compressão final, ela deve ser feito manualmente ou com ajuda de algum aplicativo, eliminando qualquer espaço e quebra de linha para reduzir seu código (esse sim fica impossível de se trabalhar quando quiser fazer alterações).

Compressão CSS

Confira sites para otimizar e comprimir arquivos CSS, mas lembre-se de sempre ter um backup do arquivo original, para eventuais atualizações.

• CSS Optimizer
• CSS Drive – CSS Compressor
• Icey CSS Compressor
• CSS Compressor
• Clean CSS
• Arantius CSS Compressor
• CSSTidy
• Online Css Compressor

Outra otimização muito importante a ser feita através de CSS são sprites, veja em: Tutorial Como usar CSS Sprites

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.