Quem em algum momento da vida já precisou trabalhar com datas em PHP, seja comparação ou manipulação, sabe que isso é uma grande dor de cabeça. Não que isso seja difícil de fazer, mas o PHP (até a versão 5.2, pelo menos) não tinha suporte a operações com data. Sempre que era necessário fazer uma verificação se uma data era maior que outra, ou adicionar dias, era uma gambiarra sem fim. E gambiarra é ruim, muito ruim.

Eis que a versão 5.2 do PHP trás uma novidade que acalmou os já saturados nervos de quem necessita desse tipo de controle em seus sistemas. Foram adicionadas ao core do PHP, 4 classes para dar o suporte necessário a manipulação de datas:

• DateTime
• DateInterval
• DatePeriod
• DateTimeZone

Como não tem nenhuma necessidade de replicar a documentação do PHP (que já é bem completa), não vou colocar todos os métodos e atributos que cada classe tem, caso tenha curiosidade (e todo desenvolvedor deve ter), clique nos links e leia a doc de cada uma delas.

Vamos então colocar em prática cada uma dessas classes. Show me the code!

Criando e exibindo uma data formatada

Vamos começar então criando um objeto do tipo DateTime e exibindo ele formatado na tela:

Exemplo 1

//Cria o objeto do tipo DateTime, se não passar
// nada no construtor, assume now;
$date_now = new DateTime();
//usando as constantes da classe DateTime
echo $date_now->format(DATE_RSS);
//mostra Fri, 23 Oct 2009 14:27:51 -0200

• Linha 3: criamos o objeto sem atribuir nada, com isso, ele assume a data atual(now) do sistema.
• Linha 5: usamos a função format() utilizando as constantes da classe DateTime

Exemplo 2

//Cria o objeto do tipo DateTime, atribuindo uma string
//usando o formato suportado pela funcao strtotime()
$date_build = new DateTime('2009-10-10');
//usando o formato suportado pela funcao date()
echo $date_build->format('d/m/Y');
//mostra 10/10/2009

• Linha 3: criamos o objeto atribuindo uma string num formato suportado pela função strtotime()
• Linha 5: usamos a função format(), mas dessa vez, especificamos o formato da data conforme a função date()

Até agora, nenhuma novidade, já podíamos fazer isso antes até com menos esforço(!?), mas o pulo do gato (não me pergunte de onde tirei esse jargão) ainda está por vir…

Comparação entre datas

Uma outra melhoria que essa classe nos trás é a comparação de datas. Antes, tinhamos um trabalho tremendo para fazer comparação de datas:
Exemplo de POG:

$date1 = str_replace('-','','2009-10-10');
$date2 = str_replace('-','','2009-10-12');
if ($date1 > $date2) {
    //faz algo macabro
}

E isso é chato, e deixa seu código horrível.

Veja como ficou simples fazer a comparação de data usando o DateTime()

Exemplo

$date1 = new DateTime('2009-10-10');
$date2 = new DateTime('2009-12-10');
if ($date1 < $date2) {
    //faz algo de uma maneira correta
}

Sim! A comparação é feita direto entre os objetos, como mágica (brincadeira, é lógica pura)! Isso é uma das features que mais me chamaram a atenção, justamente pela simplicidade do uso. Mas a melhor parte ainda está por vir…

Intervalo entre datas

Eu não me lembro de ter feito isso em PHP (ainda bem) mas calcular o intervalo entre datas também foi facilitado:

$date1 = new DateTime('2009-10-10');
$date2 = new DateTime('2010-10-10');

//calcula a diferenca entre as duas datas
$diff = $date1->diff($date2);

//mostra o numero de dias entre as datas
echo $diff->days . ' dias ';

• Linha 1 e 2: Cria duas datas do tipo DateTime;
• Linha 5: O metodo diff() da classe DateTime retorna um objeto do tipo DateInterval;
• Linha 8: Retorna a quantidade de dias entre as datas

Manipulação de datas

Agora o santo graal em se tratando de datas no PHP, a manipulação de datas, ou seja, poder adicionar/subtrair dias, meses, anos, whatever de uma data:

Exemplo 1

$date1 = new DateTime('2009-10-10');
//imprime 10/10/2009
echo $date1->format('d/m/Y');

//adiciona 1 semana na data
$date1->add(new DateInterval('P1W'));
//imprime 17/10/2009
echo $date1->format('d/m/Y');

//remove 2 dias da data
$date1->sub(new DateInterval('P2D'));
//imprime 15/10/2009
echo $date1->format('d/m/Y');

Tanto o método add() quando o método sub() esperam receber um objeto do tipo DateInterval. O DateInterval cria um intervalo de datas e recebe como parametro, que deve sempre iniciar por “P” (sem as aspas, de Período) seguido pelo periodo, por exemplo P1M (periodo de 1 mês). Na documentação do construtor do objeto tem todas as opções aceitas.

Exemplo 2

Também podemos usar o método modify() para fazer essa manipulação da data.

$date1 = new DateTime('2009-10-10');
//imprime 10/10/2009
echo $date1->format('d/m/Y');

//adiciona 1 semana na data
$date1->modify('+1 week');
//imprime 17/10/2009
echo $date1->format('d/m/Y');

//remove 2 dias da data
$date1->modify('-2 days');
//imprime 15/10/2009
echo $date1->format('d/m/Y');

A diferença é que o método modify() recebe qualquer string aceita no método strtotime(), não necessitando instanciar um objeto DateInterval.

Bueno, por hoje é só pessoal, prometo não demorar tanto no próximo artigo, até porque o PHP 5.3 tem várias novidades muito interessantes. Aguardem…

Sem Posts Relacionados.

Recentemente estive envolvido em um projeto que necessitava interagir com um repositório SVN (controle de versão? Não tem idéia do que é isso? Dê uma lida neste artigo). Era o básico, checkout e commit de arquivos, nada muito complexo. Para minha surpresa, o PHP não tem nenhuma função nativa de acesso a repositórios SVN, então a busca pela iluminação começou.

Primeiro pensei em usar a função exec() e só passar os comandos para ela. Isso resolve, mas é um tanto quando deselegante, pessoalmente achei até um pouco grosseiro, além de que rodar um exec() no servidor nunca é bem visto. Mas funciona!

Como a idéia é sempre a melhor implementação (ou pelo menos o mais próximo possível disso), continuei minhas buscas pelo oráculo. Acabei me deparando com uma extensão PECL que fazia exatamente o que eu precisava, a PHP SVN.

Dentre a lista de funções existentes, estão as funções básicas que eu precisava, checkout e commit , até mais avançadas, com parâmetros para a autenticação em servidores que requerem tal segurança.

Instalação

A instalação via PECL é bem simples, se não fosse por alguns problemas de dependência  que encontrei pelo caminho. Como não há necessidade alguma de vocês passarem pelos mesmos “apertos” pelos quais eu passei, segue o passo a passo:

1º Passo – As dependências

Existem algumas dependências necessárias para instalar o pacote PECL do SVN, segue o comando para instalar todas:

sudo apt-get update && sudo apt-get install php5-dev libsvn-dev \
libsasl2-dev libsasl2-modules-ldap libneon27-gnutls-dev

2º Passo – O pacote PECL

Depois de as dependências todas estarem instaladas, vamos para a instalação do pacote PECL SN:

sudo pecl install -f svn

3º Passo – Configurando o PHP.ini

Para finalizar, como super usuário, digite o seguinte comando no terminal:

echo extension=svn.so >> /etc/php5/apache2/php.ini

Feito isso, para o apache reconhecer a extensão, ele deve ser reiniciado:

sudo apache2ctl restart

Pronto! Já estão disponíves no servidor as funções da extensão em seus scripts.

Referências:

• http://us3.php.net/manual/en/book.svn.php
• http://ubuntuforums.org/showthread.php?p=2143883
• http://hasin.wordpress.com/2008/04/21/installing-pecl-subversion-extension-for-php-in-ubuntu-710/

Leia também:

1. [update] Instalando o Firefox 3.5 no Ubuntu 9.04

Definição

A propriedade box-shadow pode ser aplicada a qualquer elemento e é aceito atualmente pelo Firefox 3.5+ (utilizando o prefixo -moz a propriedade) e pelo Safari 3.1+ (utilizando o prefixo -webkit a propriedade). Não preciso dizer que os –projetos de browsers– de Redmond não aceitam (ainda) esta propriedade.

O box-shadow não faz parte do box-shadow, ou seja, não influencia no tamanho total que o elemento terá na tela.

A propriedade é declarada da seguinte maneira:

box-shadow:5px 5px 10px #ccc;
/* implementação para o firefox */
-moz-box-shadow:5px 5px 10px #ccc;
/* implementação para safari */
-webkit-box-shadow:5px 5px 10px, #ccc;

Onde:

• o primeiro valor é a posição horizontal da sombra em relação ao elemento. Valor positivo projeta a sombra para a direita e negativo para a esquerda;
• o segundo valor é a posição vertical da sombra em relação ao elemento. Valor positivo projeta a sombra para baixo e negativo, adivinhem?, para cima;
• o terceiro valor é o blur da sombra, só aceita valores positivos ou 0 (zero);
• o quarto e último valor é a cor da sombra;

A propriedade aceita multiplas sombras. Podemos implementar inúmeros efeitos desta forma. Para isso é só separar a declaração de cada sombra com vírgulas:

box-shadow: 5px 5px 10px #333, -5px -5px 10px #ccc;

Exemplos

Vamos então colocar a mão na massa e implementar os dois exemplos acima, primeiro a sombra simples:

E agora o exemplo com múltiplas sombras:

Para aqueles que estão me taxando de louco ou acham que essa é a versão web do conto A Roupa Nova do Rei, seguem as respectivas imagens com o que você deveria ter visto aqui:

Sombra Simples

Sombra Múltipla

E por hoje é só pessoal! Dúvidas, críticas, sugestões?

Leia também:

1. CSS3: propriedade text-shadow

Quem nunca recebeu aquele layout finalizado, com um título sombreado e silenciosamente pensou: “P*** ****, lá vou eu fazer um text-replacement novamente”. Essa atitude era comum entre os webdevelopers, mas finalmente o pessoal da W3C veio solucionar nossos problemas.

Definição

O text-shadow pode ser aplicado a qualquer elemento que tenha texto, lógico, e é aceito pela grande maioria dos browsers modernos: Firefox 3.5, Opera 9.5+, Safari 3+. Infelizmente, mesmo com todas as melhorias (e realmente foram muitas) no Internet Explorer 7 e mais ainda no Internet Explorer 8, eles ainda não suportam essa propriedade, ou seja, escolheram a pílula azul.

A propriedade text-shadow é usada da seguinte maneira:

text-shadow: 2px 2px 2px #00f;

Onde:

• os dois primeiros valores são as coordenadas top left, para onde a sombra será projetada;
• o terceiro valor é o blur da sombra;
• o quarto valor é a cor da sombra;

A propriedade também aceita multiplas sombras. Sim! Até degradê é possível de se implementar usando somente CSS. Para isso, é só separar a declaração das sombras usando vírgulas:

text-shadow: 2px 2px 2px #000, 4px 4px 2px #00f;

Essa propriedade não é nova. Na verdade ela foi proposta na especificação do CSS2. A definição completa da propriedade pode ser encontrada aqui.

Exemplos

Vamos então implementar então os dois exemplos acima, primeiro a sombra simples:

bittersweet dev – CSS3: Propriedade text-shadow

E também o com sombras multiplas:

bittersweet dev – CSS3: Propriedade text-shadow

Pra quem não viu nada diferente nessas frases dê uma olhada nas imagens abaixo que representam respectivamente os exemplos acima:

… e uma dica, tome a pílula vermelha, ou seja, use um browser decente!

Aguardem novos posts explicando as novas propriedades do CSS3, até lá, deixe seu comentário, dúvida ou critica

text-shadow: 2px 2px 4px #f00;

Leia também:

1. CSS3: propriedade box-shadow

Para aqueles que não querem esperar alguns meses pela nova versão, podemos instalar ela na versão 9.04. O processo é bem simples.

1º passo

Abra um terminal e digite o seguinte comando:

sudo apt-get update && \
sudo apt-get install firefox-3.5 firefox-3.5-gnome-support

Feito isso, você já está com Firefox 3.5 instalado na máquina, mas para poder usar, você precisa mudar todos os atalhos que existem para o Firefox, e isso é chato!

2ª passo

Vamos então alterar o link simbólico para o Firefox, que por padrão, aponta para a versão 3.0
No terminal digite os seguintes comandos:

cd /usr/bin
#só vai remover o link simbólico, não o firefox
sudo rm -rf firefox
#cria novamente o link simbólico, apontando para o firefox 3.5
sudo ln -s /usr/bin/firefox-3.5 /usr/bin/firefox

Pronto, agora o sistema já vai usar a versão 3.5 como padrão

Passo extra

Para aqueles que não querem usar o Firefox em inglês (sim, a instalação padrão é em inglês), é só instalar o pacote de idioma pt-BR, clicando aqui.

Uma curiosidade: o nome da versão 3.5 é Shiretoko, o nome de uma península do Japão, mais informações aqui

Update

Após algum tempo usando essa solução, percebi que alguns programas instalados não utilizam o link simbólico /usr/bin/firefox, e sim o link simbólico /usr/bin/x-www-browser

Para alterar esse link, como super usuário, digite no terminal:

sudo update-alternatives --config x-www-browser

No meu caso, apareceu a seguinte listagem:

Existem 3 alternativas que fornecem 'x-www-browser'.

Seleção      Alternativa
-----------------------------------------------
+        1    /usr/bin/firefox-3.0
*        2    /usr/bin/firefox-3.5
         3    /usr/bin/google-chrome

Pressione enter para manter o padrão[*] ou digite o número da seleção:

Neste caso, digite 2 para usar o firefox 3.5 como o padrão.

Informação retirada do Dicas-L

Leia também:

1. PHP: Instalando a extensão SVN no Ubuntu 9.04
2. Visualizando sites no Internet Explorer no Ubuntu

Todo o desenvolvedor web que se preste deve gerar um HTML/XHTML válido para suas páginas. Isso não é mais uma recomendação, é um dever nosso.

Quando falamos de inserir um Flash, o negócio fica preto, o código gerado pelos famigerados programas da Adobe não são válidos, criando tags que não existem (<embed>?) e um fonte gigantes com parâmetros que não é bom nem refletirmos muito sobre eles.

Outro problema que temos é de usabilidade, visto que esse Flash não tem um conteúdo alternativo, excluindo as pessoas que não tem Flash player. Claro, isso hoje em dia é raro de existir, mas não podemos esquecer que cresce cada vez mais (a passos de tartaruga, mas ainda assim caminha) o acesso a internet usando dispositivos móveis e alguns browsers usados nesses dispositivos não têm suporte. Dessa maneira, o  usuário simplesmente vai ter uma tela em branco, sem saber o que deveria ter de conteúdo ali. Também não podemos esquecer dos leitores de tela (JAWS e afins). Eles não “entendem” flash, excluindo, assim,  mais uma parcela de usuários.

Devemos lembrar ainda de um problema existente (pra falar a verdade, eu não sei se ainda existe, pois faz anos que não utilizo o IE) com o Internet Explorer que,  após determinada versão do Flash Player (8 se não estou enganado), tornou-se necessário clicar no flash para ativá-lo, ou seja, você precisava clicar num menu para ele funcionar como um menu.

Mas isso agora é passado! (parece aquelas propagandas de produtos duvidosos que aparecem na TV em horários alternativos) Existe uma maneira de inserir Flash gerando um HTML/XHTML válido, acessível e sem dores de cabeça e se chama SWFObject

O que é o SWFObject?

É um pequeno JavaScript  (menos de 4kb após ser comprimido) para adicionar conteúdos feitos em Flash na sua página de maneira fácil e indolor.

Porque usar o SWFObject?

Dentre as razões, podemos citar:
* Sua página terá um HTML válido
* Detecta automaticamente o Flash Player (existem outras soluções para isso, mas todas tem seus problemas)
* Remove o incômodo de ter que clicar para ativar o Flash no Internet Explorer
* Como é possível ter um conteúdo alternativo para o Flash, melhora a indexação pelos mecanismos de busca
* Permite que se tenha uma Graceful Degradation

Como usar

Antes de tudo, devemos fazer o download do SWFObject do página do projeto no Google Code.
A última versão estável disponível quando escrevi o artigo é a 2.1. Já existe a 2.2, mas é uma versão beta, deixem ela para depois, ok?

Descompacte o arquivo swfobject_2_1.zip e copie o swfobject.js e o expressInstall.swf para o diretório do seu projeto.

Usando o SWFObject, existem duas maneiras de adicionar o conteúdo flash na sua página.

Maneira Estática

Adiciona o Flash e o conteúdo alternativo usando marcação válida e usa o JavaScript para resolver que a marcação não pode resolver sozinha.  vantagem
Tem como vantagem:

• Usa marcação standard
• Não usa javascript para adicionar o conteúdo a página, apenas para corrigir problemas pontuais, ou seja, o Flash vai ser acessível a um número maior de usuários (os que não tem suporte a JavaScript, leitores RSS, etc)

1º Passo
Seu Flash deve ser adicionado da seguinte maneira no <body> da sua página:

<object id="meuId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120">
    <param name="movie" value="test.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="test.swf" width="300" height="120">
    <!--<![endif]-->
       <div>
            <h1>Conteudo Alternativo</h1>
           <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Faça o download do Flash Player" /></a></p>
        </div>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

Você pode adicionar parâmetros adicionais, mas é necessário colocar o <param> em ambas as declarações do <object> para o correto funcionamento

2º Passo
Adicione a chamada para o SWFObject no <head>:

<script src="swfobject.js" type="text/javascript"></script>

3º Passo
Registre seu Flash no SWFObject e mostrar o que ele deve fazer com ele:

<script type="text/javascript">
     swfobject.registerObject("meuFlash", "9.0.0", "expressInstall.swf");
</script>

Onde o primeiro argumento é o ID do seu Flash, o segundo é a versão mínima do Flash Player que o Flash necessita e o terceiro parâmetro (opcional) é o link para a instalação expressa do Flash Player (vem junto no pacote do SWFObject)

Veja um exemplo

Maneira Dinâmica

É baseada no conteúdo alternativo e usa o JavaScript para substituir este conteúdo pelo o do Flash caso haja o Flash Player e suporte JavaScript minimo necessário.
Tem como vantagem:

• Evita ter que clicar no Flah para ativá-lo no Internet Explorer 6/7 e Opera 9
• Se integra melhor com aplicações que usam script

1º Passo
Crie um conteúdo alternativo usando uma marcação válida no <body> da sua página:

<div id="meuConteudo">
    <h1>Conteudo alternativo</h1>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Faça o download do Flash player" /></a></p>
</div>

É necessário adicionar um ID ao elemento, pois é através dele que o SWFObject irá fazer a substituição do conteúdo.

2º Passo
Adicione a chamada para o SWFObject no <head>:

<script src="swfobject.js" type="text/javascript"></script>

3º Passo
Adicione o SWF usando JavaScript:

<script type="text/javascript">
    swfobject.embedSWF("test.swf", "meuConteudo", "300", "120", "9.0.0", "expressInstall.swf");
</script>

O método embedSWF tem 5 parâmetros obrigatórios (urlSWF,id,width,height,versionSWF) e 4 opcionais (urlInstallSWF,flashvars,params,attributes). Para este exemplo, vou usar só os obrigatórios, mais detalhes sobre os parâmetros acesse http://code.google.com/p/swfobject/wiki/documentation

Isso faz com que o SWFObject substitua o conteúdo do elemento ID, com o conteúdo do urlSWF

Veja um exemplo

Alguns links interessantes sobre o assunto:

• Página do projeto SWFObject
• A List Apart – Flash Embedding Cage Match

E era isso, dúvidas? Críticas? Sugestões? Entre em contato!

Sem Posts Relacionados.

Entre as versões 7.04 e a 8.04, tive um problema no boot do computador que simplesmente travava o processo. Por mais que pareça bizarro, eu tinha que ficar segurando qualquer tecla para a máquina bootar corretamente.

Após vários updates da versão 8.04, o problema sumiu e continuo assim até a versão 9.04.

Quando o notebook está ligado na tomada, funciona perfeitamente, bootando tão rápido quando possivel na máquina. Agora o problema é quando se usa o notebook na bateria. Os fantasmas voltaram para assombrar a máquina.

Após 5 minutos de pesquisa, a solução foi encontrada. Faça o seguinte:

Procure no arquivo /boot/grub/menu.lst pela seguinte linha:

kernel          /boot/vmlinuz-2.6.28-12-generic root=UUID=323825d6-c0a8-435a-912e-92c0f1359f8e ro locale=pt_BR quiet splash

Provavelmente deve ter alguma diferença no seu arquivo, mas procure o último kernel instalado.

Adicione no fim da linha o comando acpi=noirq, deixando a linha assim:

kernel          /boot/vmlinuz-2.6.28-12-generic root=UUID=323825d6-c0a8-435a-912e-92c0f1359f8e ro locale=pt_BR quiet splash acpi=noirq

Feito isso, sua máquina já vai bootar normalmente.

Solução retirada do site: http://ubuntuforums.org/showthread.php?t=1137421

Leia também:

1. [update] Instalando o Firefox 3.5 no Ubuntu 9.04

Para um usuário Windows, isso deve ser bem fácil (veja bem, deve, pois eu presenciei a tentativa de instalação do IE7 numa máquina windows e não teve santo que fizesse ela funcionar), mas para os desenvolvedores que trabalham em ambiente Linux, a estória não é bem assim.

Existem algumas soluções para fazer isso a partir do Linux, e eu vou compartilhar com vocês aqui as que eu já utilizei e/ou continuo utilizando.

IE4Linux

O IE4Linux é uma ótima ferramenta desenvolvida para Linux que usa o Wine para instalar as versões 5, 5.5, 6 e uma versão beta da engine do IE7

Para instalar essa ferramenta é bem simples.

Primeiro passo
Deve-se ter instalado os pacotes Wine e Cabextract, para isso, suponto que você usa o Ubuntu (no meu caso, a versão 9.04), digite o seguinte comando no terminal:

sudo apt-get install wine cabextract

Feito isso, já tem os pacotes necessários para a instalação do IE4Linux, agora vamos executar os seguintes comandos no terminal:

wget http://www.tatanka.com.br/ies4linux/downloads/ies4linux-latest.tar.gz
tar zxvf ies4linux-latest.tar.gz
cd ies4linux-*
./ies4linux

Agora é o famoso next, next, finish!

Ele deve criar os ícones para acessar o IE, dai é só acessar o site e testar.

Eu ainda uso esta solução, mas tem um porém muito incomodo. Por alguma razão, a aplicação causa um memory leak que acaba por travar a máquina. Bom, wine ou não, ainda é uma aplicação Windows, não dava para esperar alguma coisa diferente.

Máquina Virtual

Essa é outra solução, embora um pouco mais complexa, pois envolve a instalação de uma máquina virtual (no meu caso, quando testei, usei o VirtualBox) e depois a instalação do Windows.

Como essa solução merece um outro post para explica-la, deixo um link que ensina o passo a passo: http://www.tecnoclasta.com/2008/07/03/virtualbox-windowsxp-e-ubuntu-juntos-guia-de-instalacao/

Renderização online

Essa é a solução que venho usando com mais frequencia. Com o advento do IE8, já começo a me preocupar em como ele ira renderizar os projetos.

Para isso, utilizo dois sites:

• IE NetRender
• Browser Shots

O primeiro renderiza única e exclusivamente IE, nas versões 5.5, 6, 7 e 8, mas é extremamente rápido para mostrar o screenshot. Já o segundo tem toda uma gama de browsers e de sistemas operacionais também (FF no Windows, no Linux, no Mac, por exemplo), mas tem um problema incomodo, uma fila gigantesca de espera, que por muitas vezes acaba expirando.

Para finalizar

Depois de apresentar essas opções, acredito que deva testa-las e ver com qual você se adapta melhor. Cada uma tem seus pŕos e contras, vai de cada um a melhor.

Eu continuo usando a Renderização Online, pois tento desenvolver os sites de uma maneira a evitar os problemas de renderização. Como nem sempre posso contorná-los, uso esse recurso para ver se está tudo Ok no site.

Por hoje é só pessoal, qualquer dúvida ou crítica, é só deixar um comentário

Leia também:

1. [update] Instalando o Firefox 3.5 no Ubuntu 9.04
2. Resolvendo o problema no boot do Ubuntu 9.04 no notebook HP DV6253

Para contornar esses problemas que nosso “querido” Internet Explorer nos causa, temos algumas práticas interessantes, dentre elas, as que eu utilizo utilizava posso destacar os CSS Hacks e os CSS Condicionais

CSS Hacks

Podemos definir como CSS Hacks as formas que encontramos de “enganar” o browser (IE, sempre IE) para que ele  renderize corretamente corretamente o CSS da página. Esses Hacks somente se aplicam aos browsers que tem essa falha, lógico.

Podemos citar alguns Hacks famosos:

/* IE 6 e anteriores */
* html #um  { color: red }
 
/* IE 7 e anteriores */
*:first-child+html #dois { color: red } 
 
/* IE 7 e browsers modernos */
html > body #tres { color: red }
 
/* Somente browsers modernos (sem IE 7) */
html > /**/body #quatro { color: red }

Apesar de parecer ser uma solução simples, os Hacks tornam o CSS não-válidos, o que na minha opinião é um problema. Sem contar o fato de que estamos enganando o browser para ele renderizar algo que ele não foi feito para suporta, ou seja, processamento extra.

CSS Condicional

Como o próprio nome já diz, é o uso de uma folha de estilos condicional, ou seja, só é carregada quando for determinado browser que estiver fazendo a requisição, e o melhor, sem javascript!

Essa prática faz uso dos conditional comments, um comentário HTML com uma sintaxe especial que é interpretado única e exclusivamente pelo Internet Explorer. Os browsers modernos os enxergam apenas como comentários comuns, sem interpretá-los.

Por exemplo, se quisermos que um estilo seja carregado somente no IE 6, fazemos o seguinte:

<!--[if IE 6]>
	<link rel="stylesheet" href="main_ie.css" mce_href="main_ie.css" type="text/css" media="all" />
<![endif]-->

A lado bom de se utilizar os CSS Condicionais é que a folha de estilo é válida, pois não usa nenhum hack que possa a ver a invalidá-la. Por outro lado, temos requisições extras que vão ser feitas de acordo com o browser.  Além disso, com está no <head>, a renderização da página fica aguardando ela estar totalmente carregada.

Uma nova esperança!

Eis que lendo um artigo do Paul Irish, surgiu uma luz no horizonte, que resolve o problema das multiplas requisições de folhas de estilos e também da espera pelo carregamento.

A solução é fazer o uso de conditional comments não para alternar entre folhas de estilos a ser carregadas, e sim para aplicar ou não uma class no <body> do documento da seguinte maneira:

  <!--[if lt IE 7]> <body class="ie6"> <![endif]-->
  <!--[if IE 7]>    <body class="ie7"> <![endif]-->
  <!--[if IE 8]>    <body class="ie8"> <![endif]-->
  <!--[if !IE]>-->                 <!--<![endif]-->

Isso  faz com que de acordo com o browser, seja adicionado a class (ie6, ie7 ou ie8) no corpo do documento, possibilitando corrigir as falhas de renderização direto na folha de estilo principal, facilitando até a manutenção do código.

Como exemplo, para adicionar alguma correção, fariamos o seguinte no CSS:

    div#container{margin-left:10px;}
    //corrigindo o famoso bug da margem dupla
    body.ie6 div#container{margin-left:5px;}

E é isso!

De agora em diante, essa é a solução que utilizarei!

Segue alguns links interessantes sobre o assunto:

• http://jigsaw.w3.org/css-validator/
• http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
• http://paulirish.com/2009/browser-specific-css-hacks/
• http://www.quirksmode.org/css/condcom.html

Sem Posts Relacionados.

O Script

Recentemente por indicação de um amigo, conheci o script snipMate, criado por Michael Sanders, que basicamente é um script não-obstrusivo para VIM que implementa os snippets do TextMate para o VIM.

A propósito, snippets são aqueles pedaços de código predefinidos (if, while, switch) que você pode inserir no seu documento.

Como exemplo, em um arquivo PHP, usando a instalação padrão do plugin, se você digitar “for” e logo após apertar “<tab>” no modo de inserção, ele irá expandir para a sintaxe padrão do “for” em PHP:

for ($i = 0; $i < count; $i++) {
      // code...
}

Para facilitar, dê uma olhada no screencast do plugin que fala por si só: http://vimeo.com/3535418

Instalação

1º passo: Faça o download do script aqui (essa é a versão 0.79, é bom dar uma olhada no site se não teve nenhum update).
2º passo: Dentro do diretório onde está o arquivo, execute o comando (se não existir o diretório .vim, é só criar ele, usando o comando “mkdir ~/.vim”):

mv snipMate.zip ~/.vim

Depois entre no diretório e descompacte o arquivo, removendo-o após extraí-lo

cd ~/.vim
unzip snipMate.zip
rm snipMate.zip

3º passo: Reinicie o VIM e está feita a instalação, agora é só testar o script!

Dica: Para aqueles que como eu tem o auto-completar na tecla <tab>, ela vai gerar um conflito na edição. Para corrigir isso é só alterar o arquivo .vimrc e mudar onde tiver “<tab>” por “<C-@>” (sem as aspas).
Pronto, agora o auto-completar vai ser ativado usando “<ctrl>+<space>”.

Sem Posts Relacionados.