Novo endereço do Blog

Avisando a todos que este blog mudou de endereço, agora com domínio próprio. Levei todo o conteúdo pra lá: http://leandromedeiros.com/blog

Visite!

PCDTR – Substituindo texto por imagem

Venho utilizando muito o script PCDTR – versão melhorada por um brasileiro – para realizar a tarefa de substituir texto por imagem (técnica chamada de “Dinamic Text Replacement) em títulos das páginas dos sites. Eu uso ele no meu site também. A vantagem desse recurso é que você pode usar a fonte que escolher, inclusive aquela que você tem certeza que o usuário não vai ter instalada no computador.

O trabalho dele é transformar a fonte, que deve estar dentro da pasta especifica, em imagens PNG, letra por letra. O resultado é ótimo, já que o fundo permanece transparente e tudo é ajustado por CSS, inclusive a formatação do texto. Interessante também é poder usa-lo em corpo de texto, apenas adicionando no CSS a classe que está usando, como eu estou fazendo nesse site que não fiz o design mas estou finalizando na agência.

Ah! como o script é em PHP – e posso até estar errado – somente consegui fazer ele funcionar se o arquivo index for PHP. Se alguem conseguir de outra forma, por favor me avise!

Tudo por um Wii!

Agora uma pequena pausa nos posts sérios para um “Momento Solidariedade” (com segundas intenções claro) para o amigo Victor do blog Com Limão, participando do Desafio LG.

Integração com Twitter

O Twitter é talvez a ferramenta que atualmente melhor proporciona compartilhamento de conhecimento (além de cultura inútil, claro). Assim como o Youtube quando se popularizou, o Twitter começa a se tornar importante para a comunicação e aparecer cada vez mais nos sites. Ele é ao mesmo tempo uma ferramenta social fácil e rápida.

Logo que comecei a usa-lo, pensei em colocar no meu site, mas não queria colocar só o link para o meu Twitter. Eu queria mostrar no meu site o que eu publicar lá. Novamente usei Jquery.

Também já tinha visto alguém “twittar” uma música no Blip (depois falo melhor dele aqui). Pra isso você só precisa configurar no Blip sua conta do Twitter e ele publica pra você a música.
Uma simples pesquisa e achei o que precisava. O plugin é simples como sempre e muito customizável.
Você pode ver o resutado no meu site. No meu caso, queria apenas o último, configurei e alterei o CSS e ficou muito legal.

Novidades

Acabei de finalizar e publicar meu novo site. Lá tem alguns trabalhos meus, apesar de eu ainda estar ajustando alguns detalhes e juntando todo material. Também é possivel acompanhar esse blog de lá.
Foi muito legal fazer esse site pois pude trabalhar com a biblioteca jquery e ver um pouco do que ela é capaz. Utilizei alguns recursos nela e pretendo utilizar ainda mais, mas estou sem tempo pra testar. Uma coisa interessante, é que jquery é realmente bem fácil de usar. Você só tem que dizer que parte dele voce precisa… e os recursos são aos montes. Usei um efeito slide bem legal pras páginas e poderia ter usado também na galeria de fotos, mas resolvi usar esta, que já estava pronto e usa o jquery tb. Bom, por hora é isso. Em relação ao post anterior (e que antigo!), pra quem quiser recomendo uma ótima galeria em flash, que utilizei esses dias num site que montei na Brasdev, o CS Viagens.
Abraços e até logo. Ah, me acompanhe no Twitter!

Novo Firefox 3

Baixei o novo Firefox. A versão 3 do navegador da Mozilla é realmente surpreendente. Um espetáculo. Dizem que ele tem mais de 15 mil melhorias. Pelo que vi tudo ficou mais fácil de usar e localizar. Além do novo visual, o navegador apresenta muitas novidades em relação a segurança e funcionalidades. Pra exemplificar, aquele antigo gerenciador de downloads ganhou uma pausa que realmente funciona como a gente gostaria, deixando o download parado até que se queira e mesmo que o o computador seja reiniciado ele pode ser concluído.

Outra novidade é em relação ao login em sites. Toda vez que se fazia um login nas versões anteriores, aparecia uma janela perguntando sobre salvar senhas. Agora essa opção deixa de ser uma janela e não impede o navegador de continuar o acesso ao site, passsando a aparecer no topo da janela do navegador.

A nova versão ainda possui muitas melhorias em relação a navegação, como a nova barra de endereços, que agora mostra com mais detalhes sites que tenham sido acessados recentemente.
Também é possivel salvar a navegação atual, para continuar nos mesmos sites na próxima vez que o navegador for aberto. E o melhor: a versão já vem em português!
Mas um dos recursos que mais me interessou foi a opção de baixar complementos pelo próprio navegador. Não é preciso entrar no site para navegar nas opções de complementos. Dentro da janela de complementos você pode achar o que precisa e baixar, sem ter que sair da página que está ou abrir uma nova aba.

Ainda não tive tempo de conhecer todas as melhorias (quero ver também as novidades relacionadas aos padrões web), mas a primeira impressão é que realmente a Mozilla levou a navegação na web a um nível muito superior com o Firefox 3, que tem tudo pra se tornar referência para próximas versões dos concorrentes.

Firefox Download Day

O Firefox 3 acaba de ser lançado. Marcado para hoje, dia 17 de Junho, o novo navegador da Mozilla tem este dia como “o dia do download”. O programa foi disponibilizado para download em horários diferentes para cada país, sendo às 10:00hs nos EUA e as 14:00hs no Brasil, de acordo como fuso-horário. Mas se você não quiser esperar para conhecer o novo navegador, pode baixar neste link, que foi publicado em um dos blogs do Firefox.

Joomla!: Template limpo (blank template)

Refazer trabalho dos outros é sempre mais dificil. Pensando dessa forma, pra quem trabalha com Joomla!, sabe que pegar os templates padrão para modificar é sempre algo muito trabalhoso. Primeiro por que as localizações, paineis e cores já foram definidas e se você precisa mudar alguma coisa de lugar, precisa pensar em não atrapalhar o que já ta por ali perto. Tudo bem que com a ajuda do Firebug, voce consegue achar tudo na pagina, porém ainda sim no meio do processo você pensa: “é.. bem que seria bom se tivesse um template limpinho pra eu começar do zero como fazia antes…”.

A boa notícia é que tem! Um template que não tem nenhuma cor de fonte ou fundo definida, já vem com código validado e ainda alguns outros váris recursos interessantes inclusos!
O Blank Skeleton Template foi criado com uma simples finalidade: permitir ao desenvolvedor fazer seu próprio modelo, do zero. Se ficou curioso, baixe para testar no clicando no link acima.

Musica no Blog

Um recurso interessante nos blogs atualmente é a possibilidade de trabalhar com arquivos de mídia. Depois da febre do Youtube, a maioria dos blogs gratuitos criou soluções para inserir vídeos nos artigos dos usuários. Isso funciona bem pois existem sites como o Youtube, que hospedam esses vídeos.

Mas outra funcionalidade tem sido motivo de busca por muitos blogueiros: as musicas nos blogs. Se eu quiser aquela música que eu gravei em casa, ou o audio do programa de radio da faculdade no meu blog, assim como existe no Myspace? Com o Myspace funciona pois ele permite o upload dos arquivos de audio no site, pra quem quiser ouvir como acontece com os vídeos do Youtube. Mas e se eu quiser colocar esse audio no meu blog? Existe um site que eu possa colocar os arquivos com facilidade e adicionar o audio no meu blog, como faço com o Youtube e Myspace? A resposta é sim. E muitos.

Dentre todos que testei, o melhor com certeza foi o Soundupload. Simplesmente fantástico. E ele é isso tudo pela simplicidade. Explico: são necessários apenas poucos passos para enviar um arquivo pro site e você não precisa nem de criar uma conta de usuário! Você escolhe o arquivo para enviar, digita seu e-mail no campo de baixo e faz o upload. Assim que termina, ele envia um e-mail com o link para o arquivo de audio no site. Simples assim. Você adiciona o link para o arquivo em um dos players para blog existentes (aqui tem um otimo) e pronto. Nada de ter que colocar arquivo em site dos outros, nem criar uma pasta no seu domínio que vai encher de arquivos de audio.

A maior diferença entre este site e outros que testei é que como não existe autenticação, os arquivos ficam livres para acesso e execução.

Lembrando que no wordpress é mais simples pois já tem um player.

Um pequeno exemplo ai:

Ano novo, site novo!

É isso ai! Estou com um endereço novo na internet. Meu novo site mostrará artigos relevantes que eu postar neste blog, vai ser uma vitrine para os novos projetos e também contará um pouco da minha história com o desenvolvimento de web sites e criação de identidades visuais. A muito tempo que quero registrar Leoguime.com, mas sempre travava em alguma coisa. Desta vez é pra valer, tá publicado!
O blog aqui continuará como sempre, com meus posts sobre tecnologia, webstandards e outras coisas que eu ache importante.

Estou terminando o site, portanto ele está provisoriamente com uma página de boas vindas com links para este blog e para entrar contato por e-mail. Assim que tiver pronto, deixo o recado aqui pra quem me visita dar uma passadinha lá pra conhecer… rs.

Sobre CSS Hacks

Durante o desenvolvimento do último site, tive a ingrata (mas não incomum) surpresa de ver o mesmo site com visual diferente em cada navegador. Os que desenvolvem a mais tempo, sabem que, mesmo com o CSS certinho, da pra notar grandes diferenças entre um navegador e outro. Como levo em consideração que os navegadores mais usados são o Firefox 2 e o IE 6 e IE7, tenho que fazer o site ficar certinho e bonitão nos três. Algumas vezes, lancei mão dos dos hacks pra o IE6 e agora com o IE7, não seria diferente. Mas eu não queria mais deixar o CSS “sujo”. Me importo (e sei que isso ainda traz muita discursão) com a validação do CSS e a padronização e evitar gambiarras pra um ou outro navegador. Achei algumas soluções interessantes, como a de um brasileiro que desenvolveu uma solução em javascript que tem a função de identificar o navegador e utlizar um CSS diferente pra cada. Apesar de interessante a ideia, eu ainda achei que no meu caso não precisava de tanto, já que o problema era só com o IE7. Continuei procurando e me deparei com uma solução no site da própria Microsoft: Conditional Comments.

Bom, isso eu já conhecia de antes, por outros problemas como o conhecido caso do PNG no IE6. Entretanto, não sabia que essa era uma solução apontada pela própria empresa para casos em que o conteúdo do site tivesse apresentações diferentes para um determinado navegador. Claro que no site, a condição é que o conteúdo esteja sendo apresentado com recursos para diferentes IE’s, mas todos nós sabemos que a necessidade não é sempre essa. E aí é que os “Comentários Condicionais” entram em ação.

Andei lendo a respeito do uso desse tipo de solução e realmente acredito ser a melhor maneira de se solucionar esse tipo de problema, apesar de um renomado blog brasileiro que trata de padrões web publicar um artigo recomendando a não utilização dessa solução pelos desenvolvedores. Pelo menos ate agora, além de mim, vários outros desenvolvedores discordaram do artigo.

A solução é muito simples. É um comentário colocado dentro do código HTML do site, que tem a função de impor uma condição: toda vez que o site for acessado pelo navegador citado, ele utilizará um arquivo adicional, além do CSS que já está sendo usado no site. Ou seja, desta forma você pode usar um arquivo CSS apenas com as correções necessárias para os outros navegadores em que o site aparecer estranho. Veja o exemplo abaixo:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css"></link>
<![endif]-->

O outro passo é criar um arquivo e dar o nome de “ie.css”, escrevendo somente as correções necessárias para o navegador. Essa solução, inclusive, facilita as correções e atualizações e modificações mais tarde, já que apenas o que está errado precisa ser adicionado a este arquivo.

Quero lembrar que isso ainda é uma solução ideal pra se usar somente depois de tentar todas as soluções no CSS, pra nao ter que usar um hack que vai sujar seu código.

A esperança é que o próximo IE venha com um suporte melhor para os padrões conhecidos pra que a gente nao tenha que se preocupar com isso mais.

“Mac OS X Vista”

Engraçado, como a gente acha as coisas na internet sem querer… fui passear no youtube e achei esse vídeo, comparando o Mac OS X com o Windows Vista… é realmente impressionante.

Ah… e essa apresentação é feita por Steve Jobs & Bertrand Serlet, o fundador e o vice-presidente de Engenharia de Software da Apple, respectivamente.

“Background” transparente

Update: Pura coincidencia ou não, quando recebi o comentario do Vinicios estava trabalhando num projeto que necessitava usar transparência em uma div, mas o conteúdo que estaria dentro dessa div não poderia estar transparente, como acontecia neste post. Então, a solução que encontrei foi colocar o conteúdo em uma outra div e posicioná-la sobre a outra com a transparência. Dessa forma, apenas a div com o código vai ficar transparente. Talvez não seja a forma mais “elegante”… mas funciona!

Depois de algum tempo sem ter o que postar aqui no blog, finalmente achei algo interessante: Transparências. Como muitos já conhecem, para arquivos .PGN, existem alguns hacks e manhas para driblar o problema de transparência do IE. Mas e para “backgrounds”? Isso, imagens transparentes no fundo da página… se você usar uma imagem como background e usar o pngfix por exemplo, essa imagem não vai ficar transparente. Testei isso a muito tempo atrás e já sabia que não funcionava. Então fui à caça de uma solução. A curiosidade me levou a uma descoberta: com CSS é possível usar transparência nas imagens de fundo através de filtros. E isso funciona tanto para o adorado Firefox como pro IE. Na verdade é uma linha pra cada. Sem enrolar muito mais, vou colocar os códigos, que claro, devem ser adicionados ao restante dos atributos para a DIV desejada:

filter:alpha(opacity=30); > para o IE (de 0 à 100).
opacity: .30; > para o Firefox (de 0 à 1.0).

O interessante aqui, que eu gostaria de ressaltar, é que realmente funciona muito bem para os navegadores mais usados. Mas também existem alguns contras… como por exemplo o fato de as imagens que estiverem dentro de uma DIV com filtro ficam também transparentes. Ainda não consegui arrumar uma solução para esse problema mas continuo procurando. Talvez seja algo simples e até óbvio mas ainda não consegui sacar. Vi funcionar certinho em alguns blogs, mas o codigo deles é sempre uma zona. Se alguém souber, comenta aí! Por enquanto é isso. Surgindo novidades aviso aqui.

Snap!

Pow que legal! Agora temos Snap no WordPress!! Esse recurso eh otimo.

Acabei de ver, e merece um destaque. hehe
Já vi vários blogs e sites com esse recurso… confesso que tinha uma certa inveja. huahuhaha
Passa o mouse sobre um link desses ai do blog e vê oque aparece.