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”

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) .

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.

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.

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.

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.

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 . ( um poco de cada pra não ter briga)  

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.

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...

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

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.

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….

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