Eu Sou Peixe Grande 2010
Postador por: Pedro Costa Neves @ 05/08/2010Categorias: All, off-topic
Então galera 
me inscrevi no Concurso de Sites Peixe Grande 2010 e gostaria muito que vocês votassem em mim pra dar um Up aqui e na minha vida 
E aproveitando o post já que são poucos que tenho feito ultimamente, gostaria de saber oque vocês gostariam de ler aqui? mais wordpress? mais css? mais jquery? mais design? me digam e trarei pra vocês podem pedir topicos especificos também 
e o botão pra votar segue abaixo:
Projetual Comunicação
Postador por: Pedro Costa Neves @ 07/07/2010Categorias: All, CSS, Wordpress
Opa, mil anos depois eu reapareço e adicionando mais um site ao portfólio, desta vez uma agência de comunicação de Curitiba/PR aonde estou trabalhando atualmente .
Foi um projeto bem divertido, meu primeiro layout hibrido, o background tinha que fluir não importando a resolução do monitor e o conteudo permanecer centralizado em 960px de largura, todo feito e WordPress pra integrar o blog que eles já tinham anteriormente.
Fizemos um trabalho e tanto também com SEO e espero MUITO que o site apareça em breve na primeira página de pesquisa do Google.
Algumas Screens do site:
Screen da página Inicial
Screen da página de Contato
Enfim, se você quiser saber mais sobre esta agência e tals acesse http://www.projetual.com.br, envie seu curriculo, sei lá
Freebie: Tradução do Plugin Register Plus
Postador por: Pedro Costa Neves @ 05/06/2010Categorias: All, How To, Wordpress
Realizei a tradução do plugin Register Plus, que por sinal me foi um plugin muito util em um projeto, onde você pode adicionar campos customizaveis e outros campos no formulario de cadastro do wordpress.
Para adicionar a tradução ao plugin acesse a pasta do plugin em wp-content/plugins/registerplus e só colar lá.
E como ando muito longe aqui do blog vou disponibilizar isso para download se tiverem sugestões de melhora na tradução porque fiz correndo, não exite em comentar aqui ou me mandar um email que eu adiciono lá.
De volta com Post-Thumbnail
Postador por: Pedro Costa Neves @ 28/04/2010Categorias: All, Wordpress
Ok, imagine a seguinte situação(a minha no caso) quando planejei meu site não havia post-thumbnail no WordPress, então fiz tudo com Custom Fields(que veremos um pouco em um futuro proximo).
Então, agora para que eu possa utilizar Post-thumbnail no meu site/blog/portfólio eu teria que refazer tudo denovo? e editar todos meus posts para trocar todas imagens para Post-thumbnails? NÃO!
A resposta é um simples “if elseif else” em php que consiste em ver se meu post tem um Post-thumbnail, se não tiver procurar pelo Custom Field que eu utilizava para as thumbs, e se também não tiver que não é raro poraqui pois varios posts não tem thumbnails, inserir uma imagem default(tá eu não fiz imagem default, mais veja o exemplo):
<?php
if (has_post_thumbnail()) {
the_post_thumbnail(‘loopThumb’);
}
elseif (get_post_meta($post->ID, “Thumbnail”, true) != ”) { ?>
<img src=”<?php echo get_post_meta($post->ID, “Thumbnail”, true); ?>” alt=”<?php the_title(); ?>” />
<?php }
else {
echo ‘<img src=”images/defaultThumbnail.png” alt=”Imagem Default” />’;
}
?>
Simples assim
Diminuindo o Consumo de Banda
Postador por: Pedro Costa Neves @ 05/04/2010Categorias: All, CSS, How To
Hoje darei algumas pequenas dicas para diminuir o consumo de banda, são dicas rapidas e práticas e não pretendo me enrolar muito no assunto
Abordaremos Sprites, Minimizando Javascript e CSS, a escolha correta do seu Document Type, vamos lá?
Sprites
Esta técnica consiste em reunir varias pequenas imagens, como action buttons e outros pequenos detalhes, em uma única imagem, e depois por meio de CSS recorta-la utilizando background-position, fazendo isso diminuiria os HTTP Requests e com isso o consumo de banda.
Só não saia por ai fazendo Sprites de tudo quanto é imagem do seu site, porque senão elas ficam pesadas e mesmo com a diminuição do HTTP Request, você aumentará o consumo de banda e de nada adiantou
Minimizando Javascript e CSS
Minimizar ou Minificar scripts e styles nem sempre é uma técnica bem vinda, pro dificultar manutenção e etc. Eu particularmente não a utilizo, porém sei que é necessária para alguns sites grandes onde cada kb é precioso.
Pense que você fez todo seus styles e scripts e no final tudo deu pro volta de 20kb certo? agora imagine bilhões de usuarios acessando esta página e faça as contas no final do dia o consumo de banda do site foi pro espaço.
Agora Minimizando o Minificando né seus scripts e styles, de 20kb eles caem pra 1~7kb diminuiu bem não é?
Booom, e pra facilitar o seu trabalho na hora de minificar, existem alguns sites muito bons que fazem o serviço, e de graça . Meu preferido é o http://www.reneschmidt.de/tools/index.php/minify/. Simples funcional, claro que contém alguns erros, principalmente para minificar javascript, mais idaí, é free.
Escolhendo o Document Type correto
Document Type, não é tão ligado assim a velocidade do site tão menos ao consumo de banda. Porém , dizer ao browser o doctype certo avisa-o como proceder com certas coisas, e ele pode tirar o maximo potencial disso.
Alguns tipos:
XHTML 1.0 Transitional:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
E HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01
Transitiona//EN” “http://www.w3.org/TR/html41/loose.dtd”>
E por incrivel que pareça no HTML 5 ficaria assim:
<!DOCTYPE html>
É isso espero ter sido útil novamente, qualquer dúvida já sabem né tem os comentários ai e a página de contato ali em cima
Receita de Post-Thumbnail com WordPress 2.9
Postador por: Pedro Costa Neves @ 30/03/2010Categorias: All, How To, Wordpress
Para esta receita você vai precisar de:
- Um WordPress 2.9.x
- Seu Theme atual
- Saber editar o Function.php do seu Theme
- Saber editar talvez o index.php ou aonde você quer que o thumbnail apareça
Mais tão simples assim? SIM! super simples
Primeiro começamos com seu Function.php adicionando uma simples linha, ou duas caso você goste de adicionar comentários.
// Habilita post-thumbnails
add_theme_support(‘post-thumbnails’);
Pronto, agora já está habilitado os posts-thumbnails, mais calma que não é só isso, esta parte só habilita na pagina de Add New post a opção de adicionar um thumbnail:
Mostrando o Thumbnail no post
Agora sim, a parte divertida, e claro como quase tudo no wordpress, outra parte simples da nossa receita.
Basta adicionar a seguinte linha, dentro do seu Loop aonde você gostaria que sua thumbnail aparecesse, da seguinte maneira:
<?php the_post_thumbnail(); ?>
Acabou? não, quando você adiciona esse simples codigo ao seu Loop, ele(o wordpress) automáticamente atribui as seguintes classes attachment-post-thumbnail e wp-post-image a tag de imagem, tornando simples o trabalho de atribuição de valores atraves de CSS.
OKAY! Configurando o tamanho padrão do Thumbnail
Temos agora todas configurações prontas, falta dizer pro wordpress que eu quero que todos thumbnails do meu site sigam determinado tamanho, e claro ele irá redimensionar essas imagens pra gente logo após o upload, genial não é?!
Acesse então em Settings > Media dentro do seu painel admin e encontre em Image Size a opção Thumbnail Size. Lá modifique conforme suas preferências.
Show, sua receita agora está pronta.
Vantagens de se usar o Post-Thumbnail ao inves de Get-Post-Meta(Custom Fields)
Confesso que aqui no Persocon utilizo ainda o Get-Post-Meta(Custom Fields) para os thumbnails, por preguiça, porém acho bem mais simples a criação, configuração e utilização do Post-Thumbnail.
A maior vantagem de todas do post-thumbnail, é a diminuição no MySql Queries, porque o post-thumbnail é salvo na tabela wp_post, que é normalmente chamada quando você abre um post. Enquanto com Get-Post-Meta(Custom Fields) o wordpress é obrigado a buscar na tabela wp_postmeta os dados necessários.
Conclusão
Receita pronta para saborear tudo que há de bom no WordPress 2.9.x, e espero que você tenha gostado do artigo e que tenha sido bastante útil para você aprender o básico da função post-thumbnail.
Espero que você tenha aprendido algo novo e que se tiver alguma duvida ou sugestão, não hesite em comentar
Base.CSS
Postador por: Pedro Costa Neves @ 28/03/2010Categorias: All, CSS, How To
Agora que você já sabe como funciona e como usar o RESET.CSS, se não sabe veja aqui “Reset.CSS“. Vamos para o Base.CSS, criado por Thierry Koblentz, que até o presente momento seria a solução viavel e equiparavel ao Reset, porém sem o problema do aumento de Load.
O Reset.CSS zera todos atributos, certo? e você tem que adicionar atributos novamente, padding, margin, font-size e etc, imagine seu navegador fazendo isso, lê o reset e zera tudo, lê seu style.css e atribui tudo denovo, consome banda, o load aumenta certo? certo!
Como funciona o Base.CSS, é bem simples a principio, ele te dá todos atributos necessarios já preenchidos, paddings, margins, font-sizes, conserta bugs, não só bugs do IE, todo navegador tem probleminhas e ele conserta alguns, e etc.
Como usar?
Você precisa copiar o codigo daqui:
Para um arquivos base.css ou o nome que você quiser dar.
Por favor, não inclua o link direto no seu html, por motivos de segurança, salve o base.css no seu diretorio de trabalho, e utilize-o de lá, modifique-o claro, nem todos atributos podem estar do jeito que você gosta, fontes, sizes e afins.
Então, como inclui-lo?
Assim:
<link rel="stylesheet" type="text/css" href="base.css" />
Fato interessante sobre o base.css, eu percebi enquanto usava, que não precisei mais de Clearfix para consertar algumas divs que não se alinhavam verticalmente. Ele corrige varios Bugs provenientes do IE6 e seus irmãozinhos.
Qualquer duvida, estamos ae
Reset.CSS
Postador por: Pedro Costa Neves @ 25/03/2010Categorias: All, CSS, How To
Faz algum tempo, venho pensando em escrever sobre o famoso método de Reset CSS que Eric Meyer criou, é um método incrivel, que uso a bastante tempo em alguns sites.
Para que serve o Reset CSS afinal?
Simples, ele remove todos tipos de Styles possiveis de todos elementos possiveis desde a até var.
Por que usa-lo?
Todos browsers modernos seguem padrões para CSS, alguns nem tanto IEs da vida, e por causa desses nem tanto, sofremos com diversos problemas, como por exemplo, bugs de Float, de faltar ou sobrar “meio” pixel, tamanho de fonte, entre outros.
Com o Reset, simplificamos tudo isso, começamos tudo do zero, assim em TODOS os browsers as configurações serão as mesmas.
Claro que isso aumenta um pouco o load, em alguns sites, como grandes portais isso pode ser um problemão, este seria o unico contra de usar o Reset.
Como usa-lo?
Para usa-lo é simples, você deve simplesmente copiar isto:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
Para um arquivo reset.css e inclui-lo no seu codigo da seguinte maneira:
<link rel="stylesheet" type="text/css" href="reset.css" />
Feito isso, o Reset já deve estar funcionando perfeitamente.
Para um proximo post, falarei sobre a técnica de Base CSS que detona esse problema de Load e estou gostando ainda mais de usar. Aguardem
Css Killswitch
Postador por: Pedro Costa Neves @ 02/03/2010Categorias: All, CSS
Sabe aquele cliente que te pede mil e uma modificações, e te tira o sono, te faz trabalhar dia e noite quebrando a cabeça para fazer cada coisa maluca no site dele? e depois quando chega a hora de pagar que é bom nada?
Então! a Smashing Magazine descobriu a solução para nossos problemas, o CSS Killswitch, que com apenas um clique você ativa um CSS que deixa a pagina inteira preta, assim o cliente vai querer negociar os pormenores com você novamente.
segue o site:
CSS+Background+IE
Postador por: Pedro Costa Neves @ 09/02/2010Categorias: All, CSS, How To
Passei os ultimos dias desenvolvendo o CSS e HTML do !Drop Studio. Após finaliza-lo lindamente, quase que perfeito, descubro que nenhuma das imagens que utilizei aparecia no IE, pois é, como somos um Estudio jovem, precisamos ainda fazer sites para IEs, senão os clientes não ficam satisfeitos, após 2 dias de pesquisas cansativas, emails trocados com todos webdesigners possiveis que conheço e mil e uma twitadas, passei a tentar utilizar o DD Belated que é um PNGFix para IE, porém, nao era esse meu problema.
E então? qual era?
Simples, o IE trata a sintaxe CSS background da seguinte maneira:
background: #Cor url(Endereço_da_imagem) se_repete_ou_não direções;
Porém tem um problema, acostumado a digitar rapido tudo e tals, fui fazendo todos backgrounds com repeat e no-repeat colado na sintaxe de url das imagens, da seguinte maneira:
background: #cor url(endereço_da_imagem)no-repeat;
E isso fez com que o IE não reconhecesse a sintaxe e anulasse. Então, dica para quem vai usar muitas imagens de background, cuidado, utilize espaço após a url(), ou então separe as tags em:
background-color:#Cor;
background-image:url();
background-repeat:repetições;
background-position:posições;
Obrigado a todos que tentaram me ajudar, principalmente a Flora que me indicou o DD Belated
!Drop Studio
Postador por: Pedro Costa Neves @ 01/01/2010Categorias: All
Começando o ano com pé direito, Rafael Oliveira(A.K.A. Log) e eu, ao longo de 2009 começamos a discutir sobre montar um estudio, não só de webdesign, mais de artes, pra gerar alguma renda com nossos conhecimentos.
E agora em 2010 esse sonho se torna realidade, o site novo não está pronto ainda, mais já temos uma prévia online que fizemos rapidinho pra não ficar sem nada por lá e futuros clientes terem um meio de comunicar conosco. Até porque ainda não montamos fisicamente nosso estúdio, mas em breve siiim!!!
Deem uma passada por lá http://www.dropstudio.com.br entre em contato, nos mande criticas e sugestões, indique-nos para seus amigos, familiares, chefes, whatever ajude-nos a crescer! e que em 2010 tudo seja melhor para todos nós !
@Persocon Layout Novo
Postador por: Pedro Costa Neves @ 21/09/2009Categorias: All
Como todo webdesigner, estou sempre procurando novas técnicas pra implementar em meus projetos e nos projetos dos meus clientes. E realmente, jQuery ajuda você webdesigner em muita coisa.
Apliquei nesse novo layout do Persocon, um pouco só de jQuery, como o LoopedSlider na pagina principal. Assim como apliquei o jCarrousel no \\Geek.Candy e o SlideBox no portfólio do !DropStudio.
Aproveitando que este agora é meu playground e não mais meu portfólio oficial, apliquei técnicas de CSS3 que funcionam apenas em browsers como Firefox, Chrome e Safari. Apliquei também a técnica do Footer Sticky demonstrada no post anterior.
Bom, fucem ae no source do site e divirtam-se qualquer duvida entre em contato