Css Killswitch
Postador por: Pedro Costa Neves @ 02/03/2010Categorias: All
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, 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 
\\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.
Novo Rodapé
Postador por: Pedro Costa Neves @ 26/04/2009Categorias: All
Meio que virou “modinha” esse tipo de rodapé, em vários sites, até no da Casa Branca.
Mais mesmo modinha, acho bonito e funcional, implementei aqui, depois de muito tempo, e gostei muito.
Gostaria de ouvir/ler(¬¬) a opnião de vocês sobre o meu footer, e sobre o assunto.
Plugin para Wordpress: Anti IE6 Army
Postador por: Pedro Costa Neves @ 12/04/2009Categorias: All
Nem sabia dessa!!! *lerdo*
Willian Molinari AKA PotHix acabou de me contar via email do plugin que ele desenvolveu para wordpress que agrega 3 campanhas otimas anti IE6.
E CLARO QUE EU ADERI!
Pra quem se interessar o plugin está aqui http://wordpress.org/extend/plugins/anti-ie6-army/
Mais informações no blog/site do proprio PotHix http://pothix.com/blog/anti-ie6-army
Aprendendo Django no planeta Terra.
Postador por: Pedro Costa Neves @ 12/01/2009Categorias: All
Ando meio sumido daqui, por motivos mágicos. Descobri via br-linux.org o site Aprendendo Django onde por meio de uma ‘história em quadrinhos’ com Alatazan, personagem principal da história, visita nosso planeta para uma jornada de aprendizado, e todos nós podemos acompanhar a história e aprender a programar/divertir utilizando django, um maravilhoso framework escrito em python.
Aproveitem
Thinkgeek e uma brincadeirinha promovida no twitter
Postador por: Pedro Costa Neves @ 22/12/2008Categorias: All
Hoje passei a tarde inteira me divertindo no twitter, vendo as aventuras dos macacos Timmy, e agora pouco sua batalha contra Vader.
Quem quiser conferir ainda tá rolando em http://subservientgeek.com/