computeiro.com.br | Computação, Tecnologia, Programação, Games, Tutoriais, Dicas

Imagens .png no IE6 com Transparência

Marcos Diniz — Thu, 15 Apr 2010 03:55:16 +0000

Qualquer um que já teve alguma experiência na área de desenvolvimento web conhece o grande vilão dos desenvolvedores: o Internet Explorer 6. Por ser um navegador totalmente ultrapassado e que não segue os padrões web, o trabalho muitas vezes é dobrado para se ter um site ou aplicativo web cross-browser. O pior de tudo é saber que o IE6 ainda é amplamente utilizado, ou seja, não há como fugir dele.

Um dos “fails” que o IE6 tem é o fato de não conseguir renderizar imagens .png quando essas possui transparências. Elas acabam num “elegante” fundo cinza, arrebentando com o design do site. Felizmente, há solução para isso, através de javascripts.

Depois de experimentar vários scripts o melhor que encontrei foi o DD_belatedPNG, que resolve o problema de imagens .png tanto nas tags html de imagem, quanto no uso de imagens de fundo em classes CSS (inclusive com repetições).

Vejamos os dois casos como são simples:

Primeiro, fazemos a chamada do script entre as tags e :

Observe que há uma condicional que detecta o browser do usuário e faz a leitura do script (baixe-o aqui!) somente se ele estiver utilizando o Internet Explorer 6 ou inferior. Na linha 4, aplicamos o script para todas as tags de imagem e a todos os elementos que tiverem a classe pngFix.

Desta forma você pode utilizar imagens .png a vontade, e caso precise utilizar como imagens de fundo de algum elemento, basta adicionar a este a classe pngFix, conforme mostrado abaixo:

HTML:


   conteúdo...

CSS:

div {
	background: url("bg-div.png") top left repeat;
	width: 55%;
	padding: 20px;
	border: 2px solid #006633;
	margin: 0 0 20px 0;
}

Uma demonstração pode ser vista clicando no link abaixo (abra no IE6 e repare que o comportamento é o mesmo dos outros browsers):

Quaisquer dúvidas ou sugestões deixe seu comentário!

Como Minimizar o MSN para a Barra de Sistema no Windows 7

Marcos Diniz — Wed, 24 Feb 2010 22:49:28 +0000

Pra você, que como eu, não vive sem MSN quando está na internet e usa Windows 7, deve ter reparado uma coisa: a barra de tarefas reformulada presente no novo sistema operacional é toda bonita, funcional e tal, mas ás vezes incomoda em alguns pontos.

E um deles está presente no Windows Live Messenger. Você já reparou que ao “fechá-lo” ao invés dele se esconder na barra de sistemas ele fica ali na barra de tarefas, todo “pimpão”?

Pois é, a Microsoft tem essa mania de achar pêlo em ovo e retroceder em alguns aspectos. Felizmente esse problema tem solução e você poderá deixar seu MSN minizado na barra de sistemas que é de onde ele nunca deveria ter saído. Vamos aos passos:

1 – Vá em Menu Iniciar > Todos os Programas > Windows Live e clique com o botão direito no atalho do Windows Live Messenger. Em seguida vá em propriedades, conforme mostra a figura:

2 – Vá na aba Compatibilidade e marque o item “Executar este programa em modo de compatibilidade”, escolhendo a opção Windows Vista (Service Pack 2) logo abaixo, clicando em Ok em seguida:

Pronto! Agora a próxima vez que você executar o MSN e “fechá-lo”, ele ficará minimizado na Barra de Sistemas, como sempre ficou… olha que beleza:

Legal né? Este procedimento provavelmente deve solucionar outros casos em que você queira que o programa se comportasse como em versões mais antigas do Windows. Basta selecionar a versão do Windows que você quer no Modo de Compatibilidade.

Até a próxima!

Wallpapers: Calendário 2010

Marcos Diniz — Tue, 19 Jan 2010 22:24:26 +0000

Ano novo, vida nova, não é o que dizem? Para celebrar a chegada de 2010, como primeiro post do ano, trago a vocês um conjunto de 12 wallpapers, cada um com o calendário de um mês de 2010. Denominadas de “A New Decade of Light”, as fotografias são um espetáculo e de autoria de Kristopher Grunert.

O ponto negativo fica pelo fato de que elas só estão disponíveis em formato widescreen, mais especificamente em 1680×1050. Portanto, se seu monitor tem o formato padrão de tela você tem 2 opções: esticar a imagem preenchendo a tela inteira (arghh!!), ou preencher a parte superior e inferior que irão sobrar com alguma cor (menos mal).

Enfim, os wallpapers são realmente muito bonitos e vale a pena dar uma conferida. Clique aqui para baixá-los!

Feliz Natal!

Marcos Diniz — Thu, 24 Dec 2009 13:10:58 +0000

Mais de mês sem postar, mas não poderia deixar de vir aqui e desejar a todos um feliz Natal e um próspero ano novo! Ano que vem trarei novidades para o blog, aguardem.

Como tirar âncora de Links em HTML

Marcos Diniz — Mon, 23 Nov 2009 15:34:10 +0000

Passei por uma situação esses dias em que precisava criar links sem destino e sem âncora para um script que estava desenvolvendo. O problema é que se você criar um link com o atributo href vazio, ele fica sem destino, porêm com uma âncora padrão levando para o topo da página. A solução é simples:

O padrão, com âncora:

Link

Para tirar a âncora, basta adicionar onclick="return false;":

Link sem Âncora

Simples assim. Use o seu link "morto" como desejar agora!

jQuery: Menu com Animação

Marcos Diniz — Tue, 03 Nov 2009 16:41:29 +0000

Bom dia pessoal,

Faz um tempinho que não falo de jQuery aqui no blog. Agora estou começando a mexer com a parte de animação da biblioteca, e pra mostrar como é simples fazer animações vou demonstrar como criar um menu animado usando jQuery. O resultado você pode conferir aqui.

Eu sei que é um efeito simples, mas a intenção é justamente essa, pois esse será um post introdutório sobre animações com jQuery. Portanto, mãos a obra!

1 – Como sempre, não se esqueça de carregar no cabeçalho de sua página o script do jQuery. Caso você não o tenha, baixe em jQuery.com

2 – A marcação html do menu é a seguinte:


   HOME
   SOBRE
   PROJETOS
   DÚVIDAS

Obviamente você pode ter quantos links quiser, direcionando-os para onde quiser. Só siga a estrutura de ter uma div com o id “menu” em volta dos links.

3 – E agora vamos ao CSS. Há algumas observações a serem feitas aqui:

#menu {
 border-top: 2px solid #000000;
 overflow: hidden;
}

a, a:visited {
 border-top: 8px solid #0099FF;
 position: relative;
 top: -4px;
 font-size: 13px;
 display: block;
 width: 80px;
 float: left;
 text-align: center;
 text-decoration: none;
 color: #0099FF;
 margin: 0 5px;
 font-family: Trebuchet MS, Verdana, Arial;
}

Na linha 3, é muito importante o uso do overflow hidden, pois ele manterá escondido as bordas dos links quando estes estão inativos.

Na linha 7, é definida a borda superior dos links com 8px.

Na linha 8 e 9, posicionamos os links 4px acima de sua posição normal, o que juntamente com o overflow hidden faz com que a borda tenha 4px de sua espessura escondida.

As outras linhas são responsáveis pela estilização padrão dos links.

4 – Agora vamos para o script responsável pela animação:

$(document).ready(function() {
 var linkMenu = $("#menu a");
 linkMenu.hover(
    function() {
       $(this).css("color", "#FF6600");
       $(this).css("border-color", "#FF6600");
       $(this).stop().animate({top: "0px"}, "fast");
    },
    function() {
       $(this).css("color", "#0099FF");
       $(this).css("border-color", "#0099FF");
       $(this).stop().animate({top: "-4px"}, "fast");
    }
 );
});

Na linha 1, declaramos a função que ficará disponível assim que todo o documento terminar de ser lido.

Na linha 2, guardamos em uma variável o seletor dos links, no caso todos os links (tag ) dentro do elemento com id “menu”.

Na linha 3, chamamos a função hover, que determinará o que fazer ao passar o mouse pelos links do menu.

Da linha 4 a 8, declaramos a função que será executada ao passar o mouse sobre os links. Na linha 5 e 6 mudamos a cor do texto dos links e da borda. Na linha 7 chamamos a função animate() do jQuery. Como primeiro atributo desta função declaramos a mudança no atributo top do css dos links para o valor de 0px (inicialmente ele está em -4px lembra?). Como segundo atributo determinamos o tempo que a animação irá durar. Você pode utilizar os valores padrões “slow”, “normal” e “fast” ou definir um valor específico em ms (1000 para 1 segundo por exemplo). A chamada de stop() antes da chamada do animate() determina que toda animação que estiver em execução deve ser interrompida antes do início da outra animação.

Da linha 9 a 12, declaramos a função que será executada na saída do mouse sobre os links. As linhas seguintes fazem o efeito contrário ao da função anterior, fazendo os links voltarem a sua aparência padrão.

Isso faz com que ao passar o mouse sobre um link, ele é deslocado 4px para baixo, mostrando os 8px da espessura de sua borda. Ao tirar o mouse, ele é deslocado novamente para cima e metade da borda superior é escondida.

Você deve estar se perguntando o porquê de eu não alterar diretamente o width da borda na animação, e não o posicionamento do link. Adivinha? o Internet Explorer e seu incrível suporte a javascripts não consegue interpretar a animação corretamente com essa abordagem, portanto optei por essa solução demonstrada acima.

Dúvidas, críticas, sugestões? Deixe um comentário! Até a próxima!

Fifa 10

Rodrigo Mota — Sat, 10 Oct 2009 17:00:57 +0000

Fifa 10 PC

Essa semana foi lançado no Brasil o jogo Fifa 10, e dizem no exterior que esse foi o maior lançamento na área esportiva da EA. É o segundo jogo mais vendido perdendo só para a última versão do Grand Theft Auto. Para quem comprar o jogo, a sacada são as disputas online. Na Europa, já foram jogadas mais de 10 milhões de partidas, e nos horários de picos acontecem cerca de 150 mil simultaneamente.

Nessa versão vale a pena conferir as novidades quanto a mudança do sistema de 360 graus, e não mais limitado a 8 direções somente, também quanto a perfeição dos carrinhos, comportamento dos atletas e as mudanças no sistema de manager do jogo, onde você pode realizar transferências de jogadores, partidas e evolução dos atletas com maior facilidade.

Abaixo, temos um vídeo trailer sobre o jogo e um outro vídeo sobre outra novidade do jogo, a criação de jogadas.

Links da Semana

Marcos Diniz — Fri, 09 Oct 2009 18:56:35 +0000

Como acontece em diversos blogs, vou começar a (tentar) postar toda semana links que eu achei interessante e que vale a pena compartilhar. Na próxima semana vou tentar dar uma cara mais amigável pra essa postagem.

Sem mais lero-lero, vamos aos links!

Aplicativo Online: Organizze

Game: Shift 3

Tutorial: Create a webdesign company layout in Photoshop

Vídeo: Google e a Computação nas Nuvens (Cloud Computing)

Wallpaper: City in the Clouds

Website: Webdesigner Depot

Faça parte do computeiro

Marcos Diniz — Fri, 09 Oct 2009 02:50:48 +0000

Boa noite pessoal,

Como vocês já devem ter percebido, eu administro o computeiro.com.br sozinho, e por fazer faculdade e trabalhar acabo ficando com pouco tempo para postar e tomar conta do site.

Portanto, se você gosta de tecnologia, computação, programação, jogos, ou qualquer coisa que esteja relacionado nas categorias ali ao lado e está afim de escrever aqui no computeiro, entre em contato!

Estou querendo formar uma equipe para termos posts mais frequentes, com assuntos mais diversificados. Já vou avisando que não há remuneração, até porque eu também não ganho nada. O que vale aqui é o prazer em compartilhar conhecimento e manter-se antenado com o mundo da computação.

Aproveito também para dizer que estou sempre disposto a realizar parcerias com outros sites. É uma ótima maneira de divulgação e todo mundo sai ganhando. Você já sabe, é só entrar em contato!

Game: Demolition City

Marcos Diniz — Mon, 05 Oct 2009 00:39:33 +0000

Domingo a noite, nada pra fazer… Boa hora pra brincar de demolir prédios, não?

Em Demolition City, o objetivo é colocar as dinamites nos pontos certos da construção para que ela venha a baixo! Em cada nível os escombros devem ficar abaixo da altura indicada, e às vezes há prédios vizinhos que não podem ser atingidos!

Simples e divertido! Uma boa semana a todos!