.
Aurium.Colivre.Coop.br Esse site é Legal Demais para Internet Explorer

Aurium :: BlogadaAurium20050704225631

Últimas blogadas:

%HEADLINES{"http://softwarelivre.org/aurium/blog/feed" refresh="600" header="SoftwareLivre.org" limit="15" format=" * $title" }% %HEADLINES{"http://cirandas.net/aurium/blog/feed" refresh="600" header="Cirandas.net" limit="15" format=" * $title" }%



Primeiramente, não sou WebDesigner. Não sou WebDesigner!!!
Sou um desenvolvedor que tira um dinheirinho extra com serviços do gênero. wink

IE no GNU/Linux

A um bom tempo venho desejando instalar o MSIE™ no GNU/Linux pra não precisar mais ir atrás de uma máquina com Windows™, pra testar layouts para sítios. Não importa se seguimos os padões da web. Não importa o quão simples tentamos ser ou quantos detalhes complexos nós lembramos de tratar, o IE sempre vai dar trabalho. Ter o IE no GNU/Linux seria uma mão na roda pra quem faz esse tipo de trabalho usando Software Livre.

Eu ficava deixando isso pra depois até que meu amigo Leandro Nunes me passou um e-mail com um link para o blog de Sergio Lopes, mais especificamente, para o post "Como ser um WebDesigner no Linux: Instalando os Internet Explorer 6, 5.5 e 5".

Sensacional! O Sergio fez um ShellScipt bala que baixa e instala o IE 5.0 5.5 e 6.0, coloca tudo arrumado nos diretórios do fake_windows pra rodar direto com Wine. Ah! Nem precisa chamar wine path/file.exe já tem um script pra fazer isso em ~/bin. Então basta executar ~/bin/ieX, ou adicione ~/bin no seu $PATH e apenas execute ieX.

Bem, nem tudo são flores… Essa instalação já deu uma grande ajuda, layouts de sítios feitos para funcionar bem em qualquer navegador e já testados no IE ficam muito bem e posso fazer o que imaginava desde o início. Porém… Quando tentamos usar um nome genérico para a fonte (nome de família), como sans-serif, o IE pega a Arial Black que realmente não seria a espeara… Outro problema é que a MS não pretente apoiar nada que seja aberto e o formato PNG, apesar de ser muito melhor que o GIF, não tem suporte nativo no IE e alguma dll de plugin faltou nessa instalação, por isso as imagens PNG não estão sendo apresentadas. Veja os ScreenShots:

%Formata_Centro%
www.GNU.org pelo FireFox no Windows%Formata_Centro% %Ini_Menor% www.GNU.org pelo FireFox no Windows %Fim_Menor% %Fim_Formata% [[http://wiki.colivre.net/pub/Aurium/BlogadaAurium20050704225631/GNU_IE_Win.jpg][]]%Formata_Centro% %Ini_Menor% www.GNU.org pelo MSIE no Windows %Fim_Menor% %Fim_Formata%
www.GNU.org pelo FireFox no Debian GNU/Linux%Formata_Centro% %Ini_Menor% www.GNU.org pelo FireFox no Debian GNU/Linux %Fim_Menor% %Fim_Formata% [[http://wiki.colivre.net/pub/Aurium/BlogadaAurium20050704225631/GNU_IE_Deb.jpg][]]%Formata_Centro% %Ini_Menor% www.GNU.org pelo MSIE no Debian GNU/Linux %Fim_Menor% %Fim_Formata%
%Fim_Formata% Mas não se impressione muito com esse exemplo. Essa página mostra os princiais problemas dessa instalação. Outros sites como o TableLess.com.br ficam muito bem nessa instalação. Basta que ele esteja realmente habilitado para ser apresentado nessa joça.

Separando o Joio do Trigo

Agora eu já tenho um IE(ugh!) no meu Debian e você pode ter no seu também, a pergunta é como fazer um CSS que fique bem tanto pro Mozilla e seus filhos, quanto para o IE?

No site TableLess.com.br você pode encontrar várias dicas (e armengues em geral) para conseguir a mesma formatação nos principais navegadores. Na maioria dos casos corremos o risco de acabar usando uma solução que sairá dos padrões da W3C. Não li muito aquele site, mas acho uma boa para iniciantes. De qualquer forma, o que acho mesmo é que a melhor solução é colocar um bloco adicional de formatação para os casos especiáis que só serão executados com o IE. Para separar o joio do trigo podemos adicionar uma classe a tag body apenas no caso em que o navegador seja o IE, isso fazemos com esse script:

<script type="text/javascript">
if( navigator.appName.indexOf("Microsoft") > -1 ){
  document.body.className = "msie";
}
</script>
Agora o código CSS abaixo já pode dar o aspecto esperado para os principais navegadores:

#logo{
  background-image: url("florTop.jpg");
  display: block;
  width: 127px;
  height: 159px;
  float: left;
  text-decoration: none;
  margin-top: -120px;
}
.msie #logo{
  margin-top: -119px;
}
O bloco iniciado com =.msie= só será válido no IE. Isso também é um belo armengue, mas seu CSS só sairá dos padões da web se você quiser. Depois viajo mais sobre o assunto. De volta ao trabalho. :-p %Formata_Centro% burn_msie.gif explode_msie.gif uninstall_msie.gif Firefox %Fim_Formata%

DiggThis

Topic attachments
I Attachment Action Size Date Who Comment
GNU_FF_Deb.jpgjpg GNU_FF_Deb.jpg manage 79 K 05 Jul 2005 - 00:12 AurelioAHeckert  
GNU_FF_Deb_p.jpgjpg GNU_FF_Deb_p.jpg manage 20 K 05 Jul 2005 - 00:13 AurelioAHeckert  
GNU_FF_Win.jpgjpg GNU_FF_Win.jpg manage 73 K 05 Jul 2005 - 00:11 AurelioAHeckert  
GNU_FF_Win_p.jpgjpg GNU_FF_Win_p.jpg manage 17 K 05 Jul 2005 - 00:13 AurelioAHeckert  
GNU_IE_Deb.jpgjpg GNU_IE_Deb.jpg manage 73 K 05 Jul 2005 - 00:12 AurelioAHeckert  
GNU_IE_Deb_p.jpgjpg GNU_IE_Deb_p.jpg manage 18 K 05 Jul 2005 - 00:13 AurelioAHeckert  
GNU_IE_Win.jpgjpg GNU_IE_Win.jpg manage 74 K 05 Jul 2005 - 00:12 AurelioAHeckert  
GNU_IE_Win_p.jpgjpg GNU_IE_Win_p.jpg manage 17 K 05 Jul 2005 - 00:13 AurelioAHeckert  
Copyright © 2004 - 2019 Aurélio A. Heckert
Conteúdo licenciado sob Creative Commons by-nc-sa