Leandro Medeiros

Posts Tagged ‘CSS’

PCDTR – Substituindo texto por imagem

In CSS, Internet, Trabalho on dezembro 17, 2008 at 11:02 pm

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!

Integração com Twitter

In CSS, Internet, Javascript, jquery on dezembro 6, 2008 at 9:34 pm

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.

CMS: Joomla!

In CMS, Dicas, Trabalho, Webstandards on junho 4, 2008 at 6:51 pm

A muito que falo aqui sobre testes com diferentes tipos de CMS (Content Management System, do português “Sistema de Gerenciamento de Conteúdo”).

Pois bem. Hoje vou falar sobre o sistema que mais me agradou dentre todos que testei. O Joomla!, que é uma derivação do agora extinto Mambo, é realmente o mais completo e fácil de lidar entre os CSM. Além de ter uma estrutura de gerenciamento muito intuitiva, ele possibilita a incorporação de componentes e plugins que melhoram em muito sua performance. Na verdade o Mambo é um velho conhecido meu, pois trabalhei com ele durante dois anos, desenvolvendo sites para uma agência web.
Na época que o Joomla! surgiu eu não dei muita importância, mas ele evoluiu muito dende então.

Considerando as necessidades de cada site, o Joomla! é o que se mostrou mais adaptável e simples, desde sua instalação (toda em português do Brasil) e até mesmo em sua diagramação e codificação.Tudo é feito dentro do Joomla!. Você pode editar o código HTML ou CSS, adicionar e remover módulos, criar ou mudar o lugar que cada componente, módulo, ou plugin vai aparecer no site e ainda conta com uma infinidade de módulos, plugins e componentes no site oficial. Além disso existem inúmeros tutoriais na rede ensinando como criar novos componentes, módulos, plugins e temas – chamados de “templates”.

Desde o inicio desde ano o Joomla! está com uma nova versão (1.5) que trouxe melhoras consideráveis, levando o sistema a um nível realmente diferenciado. Pra quem está procurando um sistema dinâmico, seguro e com muitos recursos – além de compatível com os padrões W3C de XHTML e CSS – o Joomla! é uma excelente opção.

Sobre CSS Hacks

In Internet on dezembro 27, 2007 at 3:50 pm

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.