Chega de Flash e Imagens
Quntas e quantas vezes precisamos de texto com fontes diferentes em nosso site e temos que adaptar para conseguir isso. Uns fazem o download da fonte para o pc do usuário, outros usam a pura e simples imagem e outros apelam para o flash mesmo.
Qualquer uma dessas técnicas são trabalhosas para fazer e mesmo assim acabam limitando você a muitas coisas.
Recentemente achei um script muito interessante e simples de usar "cufón - fonts for the people". Basta você fazer o download da biblioteca, escolher a fonte desejada e gerar o script da fonte atraves do site.
Após preencher as informações necessárias e selecionar a fonte clique em "Let's do this!". Baixe o script que ele irá gerar e divirta-se.
Exemplos (Fontes):
Outra coisa interessante é que o script captura informações do seu CSS criando o canvas com os atributos dele.
Multiple IE e IETester
Quantas e quantas vezes você já não se deparou com a necessidade de testar sua aplicação em várias navegadores, inclusive nos amados IEs (Internet Explorer). Comecei fazendo esses testes usando o Multiple IE. Deixava o IE7 na minha maquina e usava o Multiple IE para testar do 6 para baixo. Até que nossa empresa amada lançou o IE8, com mais bugs do que o IE7, mas quem diz que clientes sabem disso?
“Ah! Nossas maquinas foram atualizadas para o IE8 e o sistema parou de funcionar. O layout está quebrado, bla, bla, bla...”
Deixe-me fazer uma observação: Como uma empresa faz atualizações em seu navegador e consegue fazer sistema e sites que funcionavam nos antigos pararem de funcionar com as novas atualizações? Uma coisa é existir novas funcionalidades. Outra e fazer funcionalidades antigas pararem de funcionar. Vai entender.
Então o que fazer? Foi ai que descobri o IETester um programinha muito bacana, porém um pouco pesado. Nele você encontra desde do IE5 até o IE8 e o interessante desta nova versão é que você pode dividir a tela do programa com mais de um IE, ou seja testa nos dois ao mesmo tempo. Dentre outras funcionalidades do programa.
Em minhas experiências com ambos sistema aconselho mais o IETester pois fornece mais ferramentas e melhor usabilidades. E para os chatos como eu não espalha aquele tanto de IE no seu sistema. Porém tenha uma máquina um pouquinho melhor para aguentar o programa. Ele é um pouco pesado ainda. E quando for utilizar a funcionalidade de abrir uma url ou uma página com todos ao mesmo tempo, tome cuidado, dependendo da máquina o sistema irá fechar sozinho.
Mais vai um conselho. Cuidado em testar CSS e JS nesses programas pois as vezes eles dão pau e você fica quebrando cabeça atoa. Se você constantemente tem que testar páginas nos IE faça como eu fiz em minha empresa; se tiver a possibilidade. Tenho 3 maquinas diferentes, cada um com um programador. Cada máquina tem um IE, evitamos as atualizações dos navegadores e mantemos as maquinas como estão. Assim temos a garantia de não ficarmos agarrados em Bugs dos programas que emulam o IE.
Outra dica é o seguinte. Tenha também uma maquina com o Vista. Pois tenho enfrentando problemas de diferenças do IE8 para o Vista e o XP.
São dicas para que você não perca tempo e também não entregue algo para o cliente e ele fica torrando a paciência falando que o site está quebrando no IE e você testa na sua maquina e tudo esta certo. Até você descobrir que o sistema operacional também está influenciando no funcionamento IE8
W3C X Target _new ou _blank
Estou agora na era W3C. A empresa que trabalho exigi que façamos todos os sites validados pela W3C. Nunca me preocupei tanto com isso como agora. Mas recentemente tive um pequeno problema. Um cliente pediu para abrir um aquivo pdf em outra página. E lá fui eu todo bonito coloquei o target="_new", para descobrir que o W3C não valida isso. Tudo bem que vem com aquela liçao de moral. "De que o usuário do site tem que ter a liberdade de abrir um link na página que ele quiser e bla, bla, bla..." mas cliente não quer nem saber disso. Dureza. Ai começa a chover um monte de coisa...
<a href="javascript:link_externo("http://bitbucket.com.br")">BitBucket</a>
// Script
function link_externo(url){
window.open(url,'','');
}
Não preciso nem falar o que isso gera nos browsers. E eu como sou um cara muito chato. Não achei isso a melhor solução. Deve existir outra maneira melhor para fazer ter o target=_new e passar no W3C. Foi ai que entrou em ação nosso amado jQuery. Ow ferramente maravilhosa. Uma solução muito mais simples, funcional e elegante.
<a href="http://bitbucket.com.br" rel="externo">BitBucket</a>
// Script
$(document).ready(function(){
$("a[@rel=externo]").attr('target','_new');
});
Ou seja, qualquer link em seu site que você colocar o rel="externo", o jQuery irá aplicar o atributo target para você. Maravilhoso.
Aproveite e se livre desse x vermelho no canto direito do seu Firefox.
Celta ou Uno? .erb ou .haml?
Dúvidas cruéis ou simplesmente gosto?
Bom como eu falei finalmente consegui tempo para fazer um teste de performance para tentar descobrir o que é melhor. Usar haml ou as bibliotecas do RoR para gerar html.
Fiz um teste bem básico de renderização para sanar minha grande curiosidade. Fiz uma busca de 70456 usuários e depois um loop básico.
RoR:
<ol>
<% @users.each do |user| %>
<li>
<%= link_to "#{user.first_name} #{user.last_name}", user %><br/>
<%= mail_to user.email, user.email %>
</li>
<% end %>
</ol>#HAML
%ol
- @users.each do |user|
%li
%a{:href => "/users/#{user.id}"}= "#{user.first_name} #{user.last_name}"
%br
%a{:href => "mailto:#{user.email}"}= user.email
Fiquei surpreso com o resultado. Ao utilizar o #haml minha página renderizou em 34.34400 (12%) e para a minha surpresa sem o #haml em 31.95400 (11%). Uma diferença de pouco mais de 2sec. Para um loop simples e pouco conteúdo para renderizar é uma diferença muito grande. Se você pensar em uma página com bastante códigos #haml essa diferença pode aumentar considerávelmente.
Estes testes foram feitos na "janela", nem sempra esse janela está limpa com vidrex, por isso quero ainda fazer em um pc linux.
Bom é isso ai. Fica a seu critério. Visualmente o #haml é bem melhor, validação W3C também, porém para performance fica minhas dúvidas.
Sobre o Celta e o Uno. Fico com o Celta.
Isso leva o #haml ser ruim?
Bom estou aqui novamente falando do #haml. Exatamente agora acabei de converter um projeto todo para #haml encontrei alguns obstáculos na utilização do haml. Ainda não fiz o teste de performance, mas assim que terminar esse artigo farei alguns testes para possívelmente aplicar o #haml em um projeto que estamos trabalhando. Assim que tiver resultado post aqui para vocês.
Bom voltando aos obstáculos. Na verdade não sei se posso chamar de obstáculos, mas sim de qualidade de código. Uma das coisas que mais me chamou atenção no #haml foi a questão de economia de linhas como falei no artigo anterior. Porém em alguns pontos gastei mais linhas do que economizei.
Para gerar um menu assim:
ver álbum | adicionar mais fotos | editar álbum | excluir álbum
Você pode fazer assim:
<%= link_to 'ver álbum', 'url' %> |
<%= link_to 'adicionar mais fotos', 'url' %> |
<%= link_to 'editar álbum', 'url' %> |
<%= link_to 'excluir álbum', 'url' %>Agora em #haml:
a%{:href => url} ver álbum
|
a%{:href => url} adicionar mais fotos
|
a%{:href => url} editar álbum
|
a%{:href => url} excluir álbum
Quase dobramos o número de linhas, de 4 para 7 linhas. Esse é um exemplo que você irá ter mais linhas do que se não usasse o #haml, com certeza irá bater com outros detalhes. Porém até agora ainda não considero o #haml ruim, olhando a documentação encontrei muitas coisas que não tinha reparado antes. Mas por hoje é só.
Vou aproveitar para dar um dica.
Quanto você for fazer um form em sua aplicação e utilizar a função "form_for" e derivados não coloque "=" e sim "-" pois senão seu "form" será duplicado.
#haml – Soluções em HTML?
Recentemente meu irmão Ronaldo Ferraz, apresentou uma coisinha chamada HAML a mim, comecei a "brincar" com ela no mesmo instante e comecei a achar esse bichinho interresante. O que ele exatamente faz pra você, resumidamente.
Ele ajuda a você a criar html. Você não precisa preocupar mais com identação, abrir e fechar tag, onde abre e onde fecha tag html e o melhor economiza código.
Estou aplicando esse bichinho em um site pessoal que estou desenvolvendo. Tive já alguns resultados gratificantes. A página que renderiza o layout tem 172 linhas, após converter para haml, terminei com 42 linhas e com o código perfeitamente identado e limpo.
Até este momento estava muito empolgado, mas estou começando a encontrar alguns obstáculos. Não grandes o suficiente para parar ou descatar o haml, mas que ainda não encontrei soluções.
Por exemplo:
<!--[if IE 7]>
<%= stylesheet_link_tag "ie7" %>
<![endif]--><!--[if lte IE 6]>
<%= stylesheet_link_tag "ie6" %>
<![endif]-->
Isso eu ainda não consegui aplicar ao haml, o que faço é criar um partial em htm.erb.
O que ainda não tive tempo de testar é performace, mas assim que der estarei aplicando a postando aqui.
Pessoal se vocês tiverem dicas e sugestões posta ai para a gente.
FLEXibilidade
Alguém aqui já brincou com o FLEX? Não to falando do CELTA FLEX. Mesmo porque não tenho nem carteira de motorista. Brincadeirinha. 
Falo isso porque muitas vezes procuro na internet coisas sobre o Flex e sempre caio em propaganda de Celta Flex.
Recentemente desenvolvi um projeto de Reunião Online com um monte de frescurinhas (vídeo, áudio, apresentações, gravação, etc). Mas vamos concordar aqui comigo, o Flex é uma linguagem mais de interface, você precisa de outra linguagem por traz para fazer a pancadaria acontecer, mas mesmo assim esse negócio é bom demais sô. Ele lhe dá uma FLEXibilidade para desenvolver interface e com isso você até ganha moral, porque os clientes se empolgam com aquelas firulas na tela.
Nesse mesmo projeto apresentei uma dessas firulas: o gestor adicionava uma pergunta e para todos os participantes logados no sistema aparecia uma janelinha toda "fofinha". O cliente só faltou pular de tanta empolgação; ficou que nem criança lançando a pergunta toda hora só pra ver a janelinha entrando na tela. E olha que não era um cliente qualquer, era empresa grande. Interface conta porque tem hora que é só isso que o cliente pode ver.
Vamos ver o que o Flex traz.