CSS+Background+IE
Postador por: Pedro Costa Neves @ 09/02/2010Categorias: All, 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 
\\Geek.Candy Bug do rodapé
Postador por: Pedro Costa Neves @ 10/09/2009Categorias: All, How To
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
Postador por: Pedro Costa Neves @ 29/07/2009Categorias: All, How To
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
Postador por: Pedro Costa Neves @ 03/06/2009Categorias: All, How To
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.
Processo Criativo Persocon Design I.
Postador por: Pedro Costa Neves @ 16/05/2009Categorias: All, How To
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.
[Screencast] Edição de foto com Gimp 2.6
Postador por: Pedro Costa Neves @ 08/10/2008Categorias: All, How To
Como primeiro Screencast, escolhi mostrar uma técnica que uso em muitas fotos minhas, as que eu coloquei no meu deviantart por exemplo ( http://neonyow.deviantart.com ), que consiste em básicamente, vc amarelar a foto usando colorize, melhorar o brilho e contraste dela, aplicar uma textura, um pouco de ruido com brush, e modificar as opacidades.
Receita do dia: que tal macarrão com wireless?
Postador por: Pedro Costa Neves @ 26/09/2008Categorias: All, How To
É isso ae, que tal utilizar aquela velha Wok ou seja lá oque for isso, eu só sei que é utilizada para preparo de macarrão, e aumentar a potencia do seu adaptador wireless?
É isso que a galera do instructables fez.
Veja mais em: http://www.instructables.com/id/Wifi-Signal-Strainer-WokFi/
Colorização Digital no GIMP [parte 1]
Postador por: Pedro Costa Neves @ 20/06/2008Categorias: All, How To
Finalmente depois de muito tempo, ficou pronto a parte 1 do tutorial de colorização digital no GIMP que eu havia prometido a vocês, como o tempo foi escasso só tive tempo para uma leve abordagem sobre o assunto.
E como primeira parte do tutorial expliquei como tratar o arquivo que iremos colorir no GIMP.
O Tutorial pode ser lido aqui: http://persocon.org/forum/index.php?topic=10.0
E desculpem a imensa demora.
Como fazer um mouse funcionar no Ar
Postador por: Rafael Oliveira @ 02/06/2008Categorias: How To
Ahoy Piratas! Arrrrr! Mais uma vez postando aqui no Persocon. Vou movimentar essa coisa parada aqui! Hehehe!
O Neo provavelmente está envolvido em sua mudança, por isso vou ajudar ele a movimentar aqui.
Segue um vídeo intrigante de como adaptar um mouse para ser usado no ar, livre de contato com mesas e superfícies. Muito bom! ENJOY!
Find more DIY videos
Abraços a todos! Visitem http://nerdhp.org
Como se livrar de clientes chatos, ou não
Postador por: Pedro Costa Neves @ 19/05/2008Categorias: All, How To
Trago neste artigo, alguns relatos de como se livrar daqueles clientes chatos.
Vamos lá então. Primeiro caso:
Você não quer perder o cliente, não quer se livrar dele, porque precisa da grana dele, mais não atura ele.
O que fazer?
Bom, de acordo com minha pequena vivência com clientes desse tipo, eu aconselharia você a atura-lo, não discutir e simplesmente fazer o trabalho exatamente como ele quer, e se ele reclamar tu diz que foi daquele jeito que o cara planejou e diz que tá lindo maravilhoso. Ele ficará satisfeito.
Proximo caso:
Você não precisa da grana do cliente, e não atura ele e mesmo assim ele fica te enchendo o saco.
Simples, diga que não quer trabalhar mais com ele porque você está lotado de trabalhos, não agrida verbalmente ele, porque um dia você pode precisar dele. Você pode pensar que não precisará dele, mais poderá precisar, vai que um dia um amigo dele precisa de um serviço que você faz, e se você agridiu ele verbalmente, ele não te indicará. Certo?
Caso vocês tenham outros casos ou relatos comentem aqui e nôs mostre
Certo. Bem, por hoje é só pessoal, desculpem os longos tempos sem postar, estamos em processo de planejamento de palestras e estamos também buscando melhorar e aumentar o site.
Inkscape: Vetorizando a partir de uma imagem
Postador por: Jeison Lopes @ 12/05/2008Categorias: All, How To
No tutorial de hoje, venho trazer um tutorial que irá avaliar o que vocês já aprenderam.
Pois este será o primeiro vetor a partir de uma imagem, vocês agora iram aprender a base
para todo o vetor, que será feito com base em uma imagem.
Portanto aproveitem esse material e lembre-se de praticarem com outras imagens. :]
Link para o tutorial: http://persocon.org/forum/index.php?topic=9.0
Como cultivar sua própria melancia quadrada[?]
Postador por: Pedro Costa Neves @ 09/05/2008Categorias: All, How To
Dica vindo direto dos laboratórios secretos dos confins do planeta terra do Instructables.com.
E como a própria dica diz, é facil você cultivar sua própria melancia quadrada, e se preparar para o proximo terremoto ou quem sabe fim da raça humana na superficie terrestre.
Link para dica http://www.instructables.com/id/Grow-a-square-watermelon/