Dkcell Design Tendências, inspiração e novidades do design

Acho que tenho um certo problema para nomear os novos plugins, porém segue mais uma galeria de destaques:

Ontem na madrugada lancei a versão para adicionarem em qualquer site, portanto são 2 posts diferentes, mesmo usando a mesma imagem.

Agora estou lançando a versão para Wordpress do mesmo plugin:

Como o funcionamento do plugin é praticamente o mesmo do Dk Obama não irei fazer mais uma descrição tão longa, já que a demonstração fala por si só. (Cliquem na imagem para visualizar o plugin em funcionamento).

Instalação:

• Baixe o arquivo “dkslideshow.zip“  para sua máquina.
• Extraia e envie a pasta dkslideshow para a “wp-content/plugins” (NÃO MUDE NENHUM NOME INTERNO OU DA PASTA).
• Ative o plugin Dk Slideshow no painel administrativo
• Adicione o seguinte código nos arquivos de seu template, no local onde desejar que a galeria apareça:

<?php include (ABSPATH . '/wp-content/plugins/dkslideshow/galeria.php'); ?>

Customização:

Novamente a customização é feita pelos arquivos CSS, porém desta vez são um pouco mais complexas, principalmente pela quantidade de imagens a ser colocadas, pois as mesmas estão em uma div invisível de aproximadamente 2890px, o que complica nos cálculos.

Para aumentar ou diminuir a quantidade de imagens/links, devemos alterar os arquivos galeria.php e /js/galeria.js dentro da pasta do plugin.

Algumas dicas extras:

Assim como foi efetuado os testes na versão standalone o plugin funciona muito bem em conjunto com plugins como Lytebox, Floatbox, etc, os quais não estão incluídos no pacote para dar autonomia aos usuários de customizar como quiserem.

Incompatibilidades:

Solicitamos que caso encontrem alguma incompatibilidade nos informem, pois o mesmo foi testado com algumas bibliotecas e não houve grandes problemas.

Meu Retrato?

Sim, como alguns devem saber trabalho com layout de blogs também, principalmente Wordpress. E a Linny do Meu-Retrato entrou em contato para fazer uma mudança no seu blog.

Foi desenvolvido um novo layout, 1nova identidade visual e principalmente um novo logo que entrarão no ar exatamente no dia final da promoção.:

Tá bom, mas e a tal promoção?

Segundo postagem no Meu-Retrato:

Que tal mostrar para toda a blogosfera como você é, do que gosta, uma bela definição sua? Mas como assim? Se eu sou blogueiro essas informações já existem na rede…
Óbvio. Mas proponho uma maneira diferente. Uma descrição sem palavras, apenas com imagens daquilo que você acha que te representa. As coisas que gosta de fazer, de comer, beber, as paixões… Um lugar onde gostaria de estar.

Regulamento da Promoção:

• Quem quiser participar basta escolher as fotos e publicar um post anunciando o concurso e linkar este post. Não esqueça de colocar no post o selo da promoção:

• Depois disso, envie-nos um email com as imagens e o link para o post:

http://meu-retrato.blogspot.com/2008/07/concurso-meu-retrato.html

• As áreas a serem representadas através das imagens são:
  • descrição pessoal
  • as coisas que mais gosta (dança, cinema, música, pintura, design, festas, fotografia etc)
  • um lugar especial
• Cada participante poderá enviar até 3 imagens
• As imagens serão aceitas até o dia de lançamento do novo domínio do Meu Retrato (29/07/08)
• Imagens não produzidas pelo participante deverão ser creditadas. Inscrições com imagens não creditadas serão descartadas do concurso.
• Assim que o domínio for ao ar, faremos um post comunicando o fim do recebimento das imagens e o início da avaliação das fotos. Assim como detalhes sobre a produção das camisetas.
• Os emails para o envio das imagens são: isapaula5@gmail.com e pcarolinny@gmail.com

Avaliação das imagens

As fotografias enviadas serão apreciadas por um juri composto pela Bella do Fluxo Constante, a administradora do Meu-Retrato, Linny e mais quatro profissionais da área de design / ilustração :

Daniel Kaiser
Guto Chaves
Draco
Tobias Fonseca

E o mais interesante: Os Prêmios:

Serão escolhidas três imagens vencedoras. Essas imagens se tornarão estampa para camiseta juntamente com uma frase curta que complemente a imagem. Os designers participantes do juri ajudaram na composição da estampa.

Achei interessante agora ao fazer um post que sairá logo cedo, que ao colocar a Alt nas imagens ele já cria um "caption" ou legenda como preferirem. Porém ao ir ver no post como ficaria, não parecia uma legenda e sim um texto logo abaixo.

Graças a excelente extensão do Firefox (Web Developer) e ao tema original que vem com o novo Wp, vi que eram apenas algumas características que deveria adicionar no Css.

Antes tive que corrigir também o Css referente ao alinhamento das imagens, segue:

AS Legendas:

Apesar de ambas serem bastante similares, vale lembrar que a opção 1 além de mais correta, é a que possibilita maior controle, podendo editar diversas opções como links, imagens, etc.

Opção 1 (usada aqui no Dk):

Opção 2 (mais simples):

Caso vá encontrando maiores novidades irei sempre postar aqui.

De vez em quando encontramos alguns sites com propostas interessantes, talvez as vezes não muito úteis, porém com um fator diversão interessante.

O que descobri mais recente enquanto estava procurando exemplos de tag-clouds para o layout de um novo blog que estou criando, foi o site Wordle. Apesar de ser feito em JAVA (o qual nunca gostei, obrigado MYSABRE) funciona perfeitamente, não travou em vez alguma como a grande maioria.

Mas voltando ao site, a proposta é gerar Tag-clouds a partir do site, podendo imprimir, salvar e editar da forma com que quiser. Óbvio que possui algumas limitações, porém você pode:

• Alterar a fonte (existem umas 20 aproximadamente)
• Alterar paletas de cores (além das pré-definidas podemos criar a nossa)
• Alterar posicionamento e organização das palavras (horizontal, vertical, aleatório ou de qualquer jeito)
• Remover palavras indesejadas (clicando com o botão direito)

Achei interessante a opção de imprimir, pois para quem usa o Cute Pdf (como eu) ou qualquer gerador de pdf, podemos gerar imagens e editá-las posteriormente no Photoshop.

Abaixo seguem 3 exemplos que fiz usando este método. Sinceramente poderiam estar melhores, porém foram apenas alguns testes usando as paletas de cores de alguns dos sites aqui da rede.

Clique aqui para ir para as mesmas em alta resolução caso queira usar como wallpaper.

Faz um tempo atrás eu utilizava aqui no Dk Design o plugin "The Featured Content Gallery" do site WpElements, porém queria utilzar algo visualmente mais customizável e remover o uso de descrições direto do painel, o qual seria incluido direto na imagem.

 

E como muitos devem ter percebido, o usado acima é nada menos que uma réplica do usado no site de Barack Obama. Quando entrei no site dele, pois sinceramente é muito bem feito, tinha reparado que usava Jquery e tentei fazer a cópia, porém não sou um grande programador. Até o dia que o pessoal do DevThought desenvolveu exatamente o que eu queria, uma cópia, e coincidentemente usava Mootools, assim como o plugin anterior que eu usava.

 

A criação do plugin se tornou fácil, pois foram necessárias algumas mudanças no plugin usando antes. Com isso pude aproveitar a página de opções e a garantia que o plugin funcionaria perfeitamente. Assumo que foi um processo muito mais simples do que criar do zero, porém acho besteira recriar um código que já estava correto.

Instalação:

• Baixe o arquivo "dkobama.zip"  para sua máquina.
• Extraia e envie a pasta dkobama para a "wp-content/plugins" (NÃO MUDE NENHUM NOME INTERNO OU DA PASTA).
• Ative o plugin Dk Obama no painel administrativo
• Adicione o seguinte código nos arquivos de seu template, no local onde desejar que a galeria apareça:

<?php include (ABSPATH . '/wp-content/plugins/dkobama/galeria.php'); ?>

 

Agora para utilizar a galeria depois de instalada, dentro da aba opções (settings) do painel administrativo basta acessar a aba Dk Obama. Os campos são auto-explicativos, portanto não deverão ter maiores problemas.

Customizando a galeria (opcional):

Para alterar as dimensões basta alterar o arquivo slideshow.css dentro da pasta “Css” do plugin. Os itens responsáveis pela largura e altura principalmente são:

#slideshow { background: url('images/fundo.gif') no-repeat top; position: relative; padding: 0px 0 0px; width: 603px; height: 306px; }
#slideshow #pictures { background: url('images/intro.jpg'); width: 437px; height: 300px; left: 0; overflow: hidden; }
#slideshow #menu { background: url('images/lateral.jpg'); list-style-type: none; width: 166px; height: 240px; right: 0; padding-top: 60px; }

Também pode baixar o arquivo (template-slide.zip) que contém o psd que criei para as imagens internas. Todas as imagens estão dentro da pasta “Css/images”.