Animação com jQuery, não funciona como esperado no IE7 IE8.

Bom isso não é um espanto para desenvolvedor web nenhum :D,  todos sabemos o quanto as simples três letras juntas ie6/ie7/ieX são sinonimo de problemas talvez no ie18 seja algo correto! Nossa radicalizeiiiii!!!!! hihihiHAihaHAIaH … bom parece que o ie9 já implenenta até HTML5. Uau! -_-

Evangelizando.

Isso não tem nada a ver com o bug, pode pular para o próximo tópico ;).

É por isso que eu digo, use Firefox, use o Chrome use algo atualizado e seja feliz! Já discuti muito com amigos web-dev’s sobre a questão dos navegadores da raça ieX e o que geralmente dá mais discussão é ele o ie6, pois todos dizem que tem que funcionar no ie6, e eu digo que o ie6 só atrasa com a evolução dos padrões e das novas tecnologias web que podem e vão surgir, justamente porque este navegador não suporta nem as tecnologias básicas de desenvolvimento web como CSS/JS, tipos de imagens etc.

O problema em usar o método da jQuery .animate().

A função .animate() em sua descrição já diz tudo: “.animate(): Executa uma animação personalizada de um conjunto de regras CSS”, com este métodos pode-se desenvolver animações incríveis(exemplos, exemplos e mais exemplos.) para seu site sem a necessidade de utilizar FLASH.

Quando tenta-se utilizar a propriedade ‘position’ dentro das regras de animação no método .animate(), podemos nos deparar com um erro de javascript no navegador ie7/8, indicando um erro em nosso framework jQuery, apontando que a propriedade em questão não é reconhecida pela jQuery, mas como nós sabemos quem não consegue reconhecer a tag é o navegador, achei um post muito interessante onde os web-dev’s falavam sobre a questão da falha da animação no ie7.

Solução

Se o problema é utilizar a propriedade ‘position’ dentro do código js, ex:

$(‘#topicos_desta_secao li’).hover(function(){
$this = $(this);
var bottom = ‘-45px'; //valor default para subir.
if( $this.css(‘height’) == ‘320px’ ){bottom = ‘-115px';}
$this.css(‘cursor’, ‘pointer’).find(‘p’).stop().find(‘.first’).hide().end().animate({position:’absolute’, bottom: bottom}, {queue:false, duration:300});

.,…..

Não as utilizem, pois o motor de JS do ie7/8 não reconhecem essa propriedade corretamente. A solução é colocar a propriedade ‘position’ dentro da regra CSS do elemento que se quer animar.

.topicos_solucoes li p {
position:absolute;
left:0;
bottom:-178px; color:white;
background-color:#4d4d4d;
height:100%;
padding:30px 10px 0 10px;
}

Simples!!!!

E sem mais blah’s… “é isso ae pessoal”

1 comentário

Arquivado em bugs, css, jQuery, xhtml

Acrescentando mais acessibilidade aos seus sites com CSS e XHTML.

Olá amigos leitores, hoje, após uma rápida olhada nos meus feeds, um assunto interessante me chamou a atenção o assunto tratava sobre uma propriedade do CSS muito utilizada na técnica de Image Replacement a propriedade display:none o artigo real sobre o assunto tem o nome de “Hiding with CSS: Problems and Solutions” (tradução: Esconder com CSS: Problemas e Soluções). Não vou traduzir o artigo neste poste apenas vou fazer uma pequena reflexão sobre a solução e o problema que me chamou a atenção, então vamos ao que interessa.

O Problema em esconder elementos (X)HTML com a propriedade display:none da CSS.

No artigo o autor diz que o problema em esconder um elemento com CSS é diretamente ligado a acessibilidade que o site pode ter. Pois quando usamos a propriedade:

elemento {display:none}

Estamos dizendo ao navegador que ele não deve apresentar esse elemento  ao usuário, o que de uma forma visual este é o objetivo da propriedade, porém, para pessoas com deficiência física e que precisam utilizar leitores de tela para acessarem o site pode ocorrer um problema, pois o leitor não irá ler nem falar  a propriedade com display:none.

Ok até ai blz. Agora vou aprensentar uma coisa interessante sobre acessibilidade que costumo colocar em meus projetos. Trata-se de um menu escondido que fica disposto apenas para fins de acessibilidade. Eu crio um menu normalmente com as opções para que o usuário deficiente possa acessar as seções do site usando o teclado, ficando algo como:

<div id=”atalhosdeacessibilidade”>

<p>Menu, acesse o conteúdo do site utilizando o menu abaixo para facilitar sua navegação.</p>
<a href=”#conteudoPrincipal” accesskey=”1″ tabindex=”155″>ir para conteúdo</a>,
<a href=”#menu” accesskey=”2″ tabindex=”160″>ir para menu</a>,
<a href=”#conteudoInformativo” accesskey=”3″ tabindex=”165″>ir para conteúdo informativo</a>
</div>

E mando esconder com a propriedade display:none

#atalhosdeacessibilidade {display:none}

E voylá! Temos um menu especial para usuários deficientes, e consequêntemente um site mais acessível. Bom tenho que deixar claro que a idéia inicial deste menu não foi de minha autoria e sim andei copiando do meu Prof. e Chefe o Thiago TPC (Twitter – http://twitter.com/thiagotpc) :P .

Agora depois de ler o artigo sobre o problema de esconder o elemento com a regra CSS display:none é que o programa leitor de tela não irá pronunciar o paragrafo dentro da DIV #atalhosdeacessibilidade.

A solução para esconder um elemento na tela de forma que possa ser lido por um programa leitor de tela.

No artigo o autor detalhe que ao invés de usar a propriedade display:none para não apresentar um determinado elemento na tela sem deixar a acessibilidade de lado é usar  a propriedade position:absolute e movimentar o elemento para fora da viewport do navegador. Ficando algo como:

#atalhosdeacessibilidade { position:absolute; left:-9999px; }

Assim desta forma o programa leitor de tela irá encontrar a DIV e irá ler o parágrafo dentro desta para o usuário e assim ele saberá sobre o recurso de acessibilidade disponível no site.

Bom é isso ai, galera, axo que isso sirva pra acrescentar conhecimento a vocês para que não esquecam dos usuários deficientes que também querem acessar o os sites por nós desenvolvidos.

Dica: para saber sempre sobre novos POSTS no meu blog me sigam no Twitter :)
http://twitter.com/anestesya

Té a próxima.

4 Comentários

Arquivado em css, Javascript, xhtml

Assegurando que sua página será renderizada no Modo IE8.

A cada nova versão do Windows Internet Explorer, o suporte aos padrões de Cascading Style Sheets ( CSS ) tende à melhorar. o IE8 ( Internet Explorer 8  ) é a mais nóva versão do   navegador da Microsoft e seguindo a tendência de evolução da sua familia  é o que tem maior compatibilidade dos padrões web ( apesar de ainda não está totalmente  padronizado :|  ) de acordo com a Microsoft é totalmente compatível com o CSS 2.1 e com suporte há algumas funcionalidades das CSS 3 ( http://www.css3.info ).

De acordo com este artigo no site MSDN (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#lists) para garantir que seus sites usem os novos recursos de CSS suportados pelo  IE8, você tem fazer com que o navegador ative o modo de renderização especial do IE8, conhecido como “IE8 mode”, incluindo na sua seção de <head></head> a  metatag especial  que faz com que o IE8 ative o “IE8 mode”.

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

Com esta metatag no head do site, você estará garantido o uso do IE8 Mode, um maior suporte as  CSS e os padrões web.

5 Comentários

Arquivado em css, xhtml

Workaround(remendo) para o bug do jQuery fonte ClearType no IE´cas da vida

Hoje no trabalho me deparei com um novo bug (novo pra min neh =P ),  um estranho bug que faz com que a fonte do texto de um elemento fique zuada no IEca7. ~

Fontes Cleartype.

Cleartype é um tipo de fonte usada no Windows e IE7 que implementa uma técnica especifica de render chamada subpixel rendering para aumentar a resolução de fontes renderizadas pelos monitores de LCD, legal né, bom para os windows users da vida!

jQuery, Cleartypes IE7 e o bug.

Bom agora que você sabe algo sobre as fontes, vou explicar o que acontece com elas e o javascript(jQuery). Quando usamos a função .fadeIn()/.fadeOut()/.fadeTo() do jQuery para criar um efeito de esmaecimento em algum elemento ou nó do XHTML, essas funções da jQuery fazem uma chamada a uma função do núcleo de bibliotecas do javascript especifica do navegador em uso, no caso aqui, o MSIE7, a função do núcleo javascript chamada é setElementOpacity que por sua vez cria um filtro, para gerar uma opacidade em CSS  usando aquele filtro da Microsoft(DXImageTransform.Alpha ) o mesmo que tenta fazer o remendo do PNG no IEca6, ai já viu né esse filtro ai é “pobrema!” esse filtro faz com que o navegar dispense a fonte Cleartype e use a fonte padrão após o efeito e isso zua com a fonte.  Bom se você não entendeu o bug, leia na integra essa matéria que você concerteza irá entender. Veja um exemplo do bug aqui.

O remendo(workaround).

O remendo para este problema são 2:

O primeiro e mais simples é definir uma cor de fundo para o elemento que recebe o .fadeIn/Out/To() do jQuery.

background-color:#fff;

O segundo é um pouco mais complicado e faz parte da resolução do problema em nivel de javascript, consistem em remover o atributo “filter” do elemento, assim:

document.getElementById('elemento').style.removeAttribute('filter')

Um programador jQuery Benjamin Michael Novakovic criou uma função que pode ser usada para resolver o problema e o com as funções fadeIn() e fadeOut(), já um outro programador Jonathan fez o resto do serviço e implementou também a função fadeTo().

jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, speed, function() {
if (to == 1 && jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

Bom é isso ai espero que ajude você com esse problema.

4 Comentários

Arquivado em bugs, Javascript, jQuery

Desvendando os segredos do uso das aspas em strings Javascript.

Recentemente, li em um livro ( Iniciando em Javascript 1.5 exemplos práticos - Adriane K., Kathie K.), uma coisa que eu sempre me perguntava, mas nunca procurava por sua resposta.

Qual a diferênça entre o uso de aspas simples ( ‘ ‘ ) e de aspas duplas ( ” ” )  para representar uma string em javascript?

Qual a diferênça?

var filhos = ” João tem 2 filhos.”;

var filhos2 = ‘ João tem 2 filhos.';

Bom, neste caso não à diferença alguma. Mas, imagine que, você queira repasar uma frase de um outro texto dentro desta string?

Hum, confuso ?

Então veja.

var filhos3 = ‘ João tem 2 filhos “pedrinho e zézinho, são meus filhos”.. ‘;

Percebeu agora porque uma string pode ser declarada entre aspas simples ou duplas?

O quê ainda não entendeu?

Ok, mais uma chance pra você!

var banner_dinamico = ” .banner { background-color:white, font-family: ‘Times New Roman’ }”;

Certo, se você não conseguiu idenficar, vou explicar.

A sacada é a seguinte, se você precisar usar aspas simples ( ‘ ‘ ) dentro de uma string em javascript, você pode declarar esta string com aspas duplas( ” ” ), assim o interpretador javascript vai interpretar as aspas simples ( ‘ ‘ ) como sendo parte da string, do mesmo modo pode-se seguir este raciocinio para declarar strings que necessitem o uso de aspas duplas ( ” ” ) declarando-as entre aspas simples (‘ ‘ ). Legal né!

Ótimo, mas se eu precisa-se usar os dois tipos em uma única string, como ficaria?

Simples, ai entra o uso do caracter especial ( \ ) de javascript chamado caracter de escape ( \ ), ficando assim então.

var filhos4 = ” João tem 2 filhos,\”pedrinho e zézinho, são meus filhos\”..Ext.getCmp(‘filhos4′); “;

E é isso ai então, fica mais essa dica ai pra vocês.

3 Comentários

Arquivado em Javascript

Google Chrome download.

Se você já estava confuso na hora de escolher um navegador, prepare-se, pois chegou o Google Chrome(download). 

Chegano para esquentar ainda mais a famosa “Guerra dos navegadores”, o Google Chrome traz a coleção das melhores funcionalidades presentes no navegadores Firefox 3(navegação por aba e busca de urls no favoritos como sugestão) , IE8(miniatura das páginas),  Safari(seu engine WebKit) todas modificadas para melhor proveito do usuário final.

O que tem de igual aos outros.


 O Chrome usa as miniaturas das páginas(IE8) no favoritos e em sua página inicial, apresentando os últimos sites visitados.

O Chrome usa o conceito de busca dinâmica usando o Google Suggest no momento em que se digita a url(caracteristica presente no Firefox 3 – a diferênça é que o FF3 busca no favoritos).

Vejam bem não estou querendo dizer que o Chrome é uma mera cópia! NÃO! 
 Sim, uma cópia mais bem feita :P . ( um poco de cada pra não ter briga) :P 

Pontos fortes.

A principal diferênca entre o Chrome com os demais navegadores existentes, não está no seu engine, ou nas modificações copiadas, mas sim no seu Interpretador Javascript, que de acordo com as notícias, o interpretador Javascript foi completamente reescrito e de acordo com os desenvolvedores, aumentando o desempenho de aplicativos baseados em AJAX em quase  50%.

Novidade.

Mas o quê chamou-me a atenção, foi o cuidado dos desenvolvedores com a interface( pequenos efeitos animados na abertura das abas e apresentaçao de algumas informações como a barra de status) do Chrome e a possíbilidade da criação de icones no desktop, para os aplicativos online como Orkut, Gmail.

 

 

Ícone no desktop criado pelo Google Chrome.

Ícone no desktop criado pelo Google Chrome.

Criando um icone do Orkut no desktop.

Como é novidade, vou explicar pra você, como fazer um icone apartir de um aplicativo online.(OBS: só são criados icones onde o navegador(Chrome) consegue detectar essa página como tal.)

Acesse o site o aplicativo normalmente. – no nosso caso o Orkut.

Vá no menu Controlar página atual, escolha a opção Criar atalhos de aplicativos…

 

Controlar a página atual > Criar atalhos de aplicativos...

Controlar a página atual > Criar atalhos de aplicativos...

Vai aparecer uma janela indicando onde pode-se criar o ícone, tem-se três opções:

 

Local de criação do icone.

Local de criação do ícone.

Escolha a opção que lhe convem e clique em OK.
Parabéns neste momento você acaba de criar um atalho para seu aplicativo, vou deixar claro que além do ícone criado, ele não só é um atalho para a aplicação, como também faz uma otimização do navegador para um melhor uso da aplicação( ex: retira os campos de abas e menus deixando um maior espaço para o uso do aplicativo. 

 

Tela do navegador otimizado para usar com o aplicativo Orkut.

Tela do navegador otimizado para usar com o aplicativo Orkut.

 

 

Bom esse foi o meu primeiro contato com esse novo navegador, que no meu ponto de vista entrou bem na briga! ( hehe ).

Vlw até o próximo post….

Deixe um comentário

Arquivado em técnologia

Get-E.org (closed)!…mas foi bom enquanto durou!

…nossa pela manhã de hoje levei um susto!!! o_0

Lendo as notícias do dia fui dar uma olhadinha em como estava a evolução do projeto Enlightemnent DR17(aka e17), e foi ai que levei o susto. No portal que geralmente notícias sobre o projeto eram postadas dessa vez contém uma grande imagem e o título dizendo aos seus visitantes que o site Get-E.org será fechado dia 31/08/08.

Abaixo da imagem podemos ver uma breve explicação do motivo:

que se deve ao fato do lançamento de um novo site, o Exchange Enlightement, este site agora será o responsável por manter os temas, traduções, aplicativos e módulos utilizados no e17. Só que com um grande adicional! Os usuários que fizerem o acesso ao site utilizano o e17, atravéz da biblioteca edje o navegador detecta a versão do e17 do usuário e seus temas facilitando para que o usuário procure por novos temas no site.

O primeiro dos poucos projetos open-source que atraiu-me aponto de estudar seus fontes foi o e17, motivado pela sua interface gráfica escrita completamente e C e por possuir bibliotecas que permitem ao desenvolvedor criar aplicativos visualmente impressionantes e com um desempenho extraordinário.

Bom, voltando a notícia valeu Brian ‘morlenxus’ Miculcy, por manter esse grande portal Get-E.org por 6 anos, com uma grande responsábilidade, pois sempre que fiz o acesso ao site o mesmo se encontrava atualizado e parabéns ao Exchange!

Open-Source é isso! ( sempre na busca da evolução, através da comunicação ).

vlw get-e!

Logo Enlightenment

Logo Enlightenment

1 comentário

Arquivado em gerenciador de janelas, linux