@Persocon » How To

Freebie: Tradução do Plugin Register Plus

Pedro Costa Neves — Sat, 05 Jun 2010 22:14:12 +0000

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á.

Download

Diminuindo o Consumo de Banda

Pedro Costa Neves — Mon, 05 Apr 2010 19:47:44 +0000

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:

Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

E HTML 4.01 Transitional:

Transitiona//EN” “http://www.w3.org/TR/html41/loose.dtd”>

E por incrivel que pareça no HTML 5 ficaria assim:

É 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

Pedro Costa Neves — Tue, 30 Mar 2010 13:24:06 +0000

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:

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

Pedro Costa Neves — Sun, 28 Mar 2010 14:43:42 +0000

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:

http://tjkdesign.com/ez-css/css/base.css

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:

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

Pedro Costa Neves — Thu, 25 Mar 2010 18:50:04 +0000

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:

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+Background+IE

Pedro Costa Neves — Tue, 09 Feb 2010 15:24:53 +0000

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

\\Geek.Candy Bug do rodapé

Pedro Costa Neves — Thu, 10 Sep 2009 18:22:25 +0000

Depois que finalizei o projeto, coloquei no ar e não testei em todos navegadores possiveis porque me deu uma baita preguiça, recebi relatos de usuarios de Safari e Chrome de que o rodapé ocupava só parte do que era pra ele ocupar, e no Firefox, ele se extendia conforme fosse o tamanho da tela do cliente

Esse é um problema pra todo webdesigner que tenta ou já tentou usar dois ou três imagens de background em uma mesma página.

A ideia inicial era colocar um background alinhado ao bottom da pagina, no html, por CSS, e um segundo background, que seria o topo do site, as nuvens, no body, por CSS também, alinhado ao centro e topo. Não deu certo, CSS2 tem um bug de position quando se tenta usar background alinhado ao bottom, você tem que colocar ele como position fixed senão nao aparece, logo quando você rola a pagina pra cima, o background vai junto.

Segunda alternativa, uma div footer com o background. Tá essa parece a melhor das ideias. Mais nao rolou, sei lá porque no Firefox ficava lindo e maravilhoso e nos outros navegadores não.

Tá, foi ai que ontem(quarta feira, 9 de setembro) eu, louco de antibiotico e anti-inflamatório, navegando caçando coisas sobre jquery e tecnicas de css3 novas me deparo com isso:
http://www.cssstickyfooter.com
A TECNICA SUPREMA E DEFINITIVA pra solucionar todos meus problemas e consertar o bug cretino do rodapé.
Super simples de aplicar, super útil e tudo!
resultado:

Rodapé perfeito!

Apesar de que, daqui algumas semanas ou sipá um mês ou dois, entra um layout novo lá, mais eu precisava muito aprender isso senão não ia ficar sussegado!

Processo Criativo – Layout \\Geek.Candy

Pedro Costa Neves — Wed, 29 Jul 2009 14:32:46 +0000

Finalmente depois de muito tempo de trabalho arduo consegui finalizar e por no ar o site \\Geek.Candy www.geek-candy.com.
Foi dificil, não tanto a parte de layout, mais aprendi coisas legais, como usar dois backgrounds, tá certo que no Opera, Safari e afins não funciona corretamente o rodapé, mais no firefox fica do jeito que eu imaginei .

Vamos lá então, vou falar um pouco sobre o site, depois como foi o processo de criação.

Assim, foram longos 6~8 meses de planejamento, de como seria, oque agreariamos ao site.
Basicamente é um site de fotos, de gurias geeks gatas sensuais mais como nem tudo é um mar de rosas, não temos granas pra bancar os ensaios, então usamos de ajuda de amigas, varias por sinal que tem contribuido muito, desde as “modelos” a fotografa, produção, e locais para fotos. Tirando o fato de que fui assaltado no ultimo ensaio e levaram meu celular, mais também, quem mandou eu inventar de ir fazer as fotos numa estação de trem abandonada né .

No nosso planejamento, vamos colocar no ar um set fotografico por semana, de uma guria diferente ou não, exemplo novamente do ultimo ensaio, que renderam dois ensaios, nesse caso colocaremos a primeira parte em uma semana e a segunda na outra, ou alguma outra no lugar e depois lançamos a segunda parte teremos video dos making of, mais só de algumas nem todas será possivel a filmagem.

Agora vamos a parte importante, o Processo Criativo.

Bom, o site tinha que ter cara de web2.0 com degradês, sombras e coloridinho acho que consegui tudo isso né?
Um grande amigo me ajudou nas ideias, Nick Rupture(http://lifemodified.com), que, mesmo sendo americano e não falando nossa lingua, faz um esforço tremendo pra traduzir os textos daqui pra ler

Fora a ideia de web2.0, eu pensei no seguinte, tinha que ser um céu, e um gramado, por isso os tons de azul e verde, o rosa seria o meio termo, aonde acontece tudo. Utilizei o Gimp pra faze-lo, e somente. Despois de montado o xhtml e CSS, montei meu theme no wordpress, onde utilizei varios plugins, desde plugin pra modificar a tela de login, até pra mexer com os Roles dos usuarios, tem também um pra modificar a cor do painel de controle do wordpress.

Foi um trabalho arduo, quase 2 meses pra terminar isso tudo e colocar no ar!!! espero que gostem
Caso queiram indicar uma amiga/prima/irmã/namorada pra ser fotografada, ou fotografa-la e enviar o ensaio pra gente, entre em contato, no site tem um formulario de contato e tals, ou no about tem o email pra enviar ensaios

Aé, antes que eu me esqueça o link pro download do source, ignorem minha pequena bagunça na composição dele, no meio do projeto eu modifiquei tudo e não arrumei pensem como uma bagunça organizada! http://www.persocon.org/tutoriais/geekcandy.xcf

Logo Geek-Candy.com – Processo Criativo

Pedro Costa Neves — Wed, 03 Jun 2009 19:42:24 +0000

Voltando com o artigo sobre processo criativo, falarei de como foi o processo de criação do logotipo do site geek-candy.com.

Como isso:

Se tornou nisso:

Não foi tão simples como parece ser, tinha que ser algo geek, nerd, gammer, 8-bit, e ao mesmo tempo sexy, com curvas, porque o site é a proposta do site. Após meses pensando em como seria essa budega, varias outras propostas de logo, incluindo uma que eu até apreciei, que vinha com alguns aliens do space invaders. Acordei certa manhã inspirado e zap! veio na minha cabeça, o geek ia ser em 8-bit, e o candy todo redondinho e sexy e tals como vocês podem ver ae.

Enfim, o papelzinho escaneado ae que vocês viram no começo do artigo, é oque me veio no sonho, fiz na hora pra não esquecer, e depois a tarde refiz ele no inkscape.

Como proposto pelo cliente, o logotipo tinha que ser geek, nerd, gammer, 8-bit e sexy ao mesmo tempo! FEITO, cliente satisfeito!

Próximo desafio o site.

Link pro SVG do logo.

Processo Criativo Persocon Design I.

Pedro Costa Neves — Sun, 17 May 2009 02:51:13 +0000

Gostaria de compartilhar com vocês o processo criativo que sigo para criação de sites.

Não é um artigo que ensinacomo criar sites, não é um processo que todos devem seguir a não ser que achem útil. É apenas o processo que EU faço e sigo.

Serão posts curtos e rapidos porque meu tempo é escasso. Não terá peridiocidade infelizmente, então quando eu tiver um tempo livre, postarei sobre o assunto. Acompanhem o RSS, assim fica mais facil de saber quando tem post novo sobre o assunto .

Enfim, esse processo criativo, depende em parte do cliente. Que jeito o cliente imagina o site, e como convence-lo de que talvez aquela ideia é terrivelmente errada. Infelizmente muitas pessoas ainda acham bonito sites com cara de web 1998, então nosso trabalho como designer é, mostrar o quão linda a web pode ser.

Tá Pedro isso a gente já sabe!

É então vamos pular essa parte, definido a parte do cliente, começa nosso processo, ou melhor, meu processo.
Primeiro costumo rascunhar toda interface do site em papel, ou no gimp com auxilio da minha tablet.
Feito isso, defino as cores que usarei pra cada elemento, usando o proprio rascunho, demonstrando com setas e outras rasuras no rascunho.

Na ausencia de um scanner, vai ae uma foto desta parte do processo:

Após feito isso, vem a parte de digitalizar tudo, como somos um site que preza pelo software livre, faremos isso com o gimp, porém não utilizarei esse rascunho como guia para o proximo post, farei um novo e partirei dele para mostrar pra vocês essa parte do processo de criação que utilizo no Persocon Design.

Enfim até o proximo post.