Ricardo Zein - Tecnologia, Biologia, Bioinformática

Felizmente 2008 foi um ano muito bom para mim. Meu filho Marcelo nasceu, estou com um bom emprego na agência Hello Interactive e estudando para obter uma certificação paga pela empresa.

Atualmente estou programando interfaces (XHTML, CSS e JavaScript, basicamente). Muitas vezes pode ser um trabalho enfadonho, cansativo e também pouco valorizado. Você sofre com os designers que preferem projetar outros tipos de interface para web. Entenda isso por interfaces animadas, Flash. Argh. Paciência, você tem que saber lidar com tudo isso e estudar para se destacar e para melhorar a dinâmica de trabalho na sua empresa.

Este ano, se tudo der certo, me transformarei em um profissional Google na empresa. Ou seja, alguém responsável por tudo o que diz repeito às tecnologias providas ou relacionadas ao Google. AdWords, Maps, Open Social e assim vai. Para isso começarei pela certificação que mencionei acima. A GAP, Google Advertiving Professional. Mas tenho um roteiro de estudos a seguir, caso alguém se interesse:

• AdWords: preciso estudar para passar na certificação! (http://www.google.com/adwords/learningcenter/)
• API
  • AdWords - http://code.google.com/intl/pt-BR/apis/adwords/
  • Open Social - http://code.google.com/intl/pt-BR/apis/opensocial/
  • Google Maps - http://code.google.com/intl/pt-BR/apis/maps/
  • Android - http://code.google.com/intl/pt-BR/android/
• Java, JavaScript, Python, XML, XSLT, XHTML e CSS.

Muitas coisas não vou precisar estudar, como JavaScript, XML, XSLT, XHTML, etc. Mas Python e Java, por exemplo, será necessário. Ja conheço superficialmente algumas das APIs acima também. São muitas as APIs essas são apenas algumas que selecionei para começar.

Bom, vou postando as novidades. Se você tem alguma sugestão é só falar.

Abraços e feliz 2009!

O blog anda às moscas, eu sei. Mas minha paixão pela tecnologia e pela vida não! Em 2009 teremos mais conteúdo, mais relevância e mais sucesso (exclamação =D).

Meu desejo é sincero. Uma vida boa, honesta e de superação. Superação.

Um ótimo natal e ótimo ano novo. Nos vemos em 2009 com mais jQuery, mais bioinformática, mais ciência!!

Abraços para todos! HO HO HO!

Foi anunciada uma seleção das melhores fotos de animais selvagens tiradas em 2008.

Veja duas fotos que selecionei da seleção :

National Geographic

Bom final de semana!

Sem medo de ser feliz.

Um desenvolvedor jQuery fez essa abóbora no Halloween. Há algum tempo atrás eu pensaria duas vezes antes de assumir que gosto desse tipo de coisa. Agora assumo a nerdisse! =) just love the geekery!

Via jQuery Blog

Robôs dos spammers estão quase que certamente entre os freqüentadores do seu website. Eles procuram formulários de cadastro tentam postar comentários em posts, rastrear endereços de e-mail, entre outras ações.

Se você não conhece o jQuery e, portanto, não sabe como fazer para usá-lo em seu HTML, visite este post. Lá explico um pouco do básico.

Vou mostrar como fazer para esconder seu endereço de e-mail em uma âncora e só mostrar quando o usuário passar o mouse por cima. Utilizando jQuery para facilitar, claro.

Suponha em um código HTML a seguinte âncora:

<a href="#" class="email">Ricardo Zein</a>

Note que não coloquei intencionalmente o meu e-mail nela. Adicionei uma classe chamada “email”. É por ela que vou selecionar os links que terão o atributo href substituído pelo meu e-mail.

O código JavaScript é o seguinte:

<script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("a.email").mouseover(function(){
      jQuery(this).attr("href","mailto:ricardo.zein@gmail.com");
      });
    jQuery("a.email").mouseout(function(){
      jQuery(this).attr("href","#");
    });
  });
</script>

Com o código acima. Eu seleciono todas as âncoras com a classe “email” e no evento mouseover substituo o # pelo meu e-mail. E no mouseout volto com o # escondendo novamente o e-mail. Pretty neat hu?

Passo-a-passo:

1)O script é acionado depois que a página for carregada.

jQuery(document).ready(function(){

2)Seleciono as âncoras (<a>) que tenham a classe “email”. E digo que quando o mouse passar por cima será executada uma função  -- mouseover(function().

jQuery("a.email").mouseover(function(){

3) Finalmente substituímos o conteúdo do atributo href pelo e-mail.

jQuery(this).attr("href","mailto:ricardo.zein@gmail.com");

Os mesmos passos são seguidos para voltar quando o usuário tira o mouse de cima do link (mouseout).

Qualquer dúvida ou problema, é só comentar.

Ah! O blog voltou, caso não tenham notado!

Esquema do sensor do MIT.

Pesquisadores do MIT estão desenvolvendo sensores para monitorar incêncios em florestas. Até aí nada de muito sofisticado, imagino. Mas o incrível é que esses sensores usam a energia da própria árvore para funcionar!

Com a energia gerada é possível medir a humidade e temperatura além de transmití-la wireless quatro vezes ao dia.

Esse é o tipo de ciência que eu gostaria de fazer.

Preventing forest fires with tree power - MIT News Office

Enquanto não sai a terceira aula do curso de bioinformática, vamos de jQuery.

Como carregar um conteúdo externo em uma DIV com AJAX utilizando jQuery? É simples, verá.
Primeiro, vamos ver como colocar scroll na DIV. Com CSS, basta configurar a altura da DIV e a propriedade overflow como auto ou scroll.

CSS:

#conteudo{
height: 100px;
width: 180px;
overflow: auto;
border: 1px solid #000;
}

HTML:

<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut vel leo. Mauris pede dui, consectetuer quis, mattis at, gravida vel, turpis. Sed vel libero at ligula porta volutpat. Nullam dolor erat, rutrum vel, luctus sit amet, scelerisque convallis, erat.</p>
</div>

O código acima produz o seguinte resultado:

Perfeito, certo? Agora, e se no lugar desse texto entre as tags <p> você quisesse carregar um conteúdo externo via AJAX? Com o jQuery é fácil, fácil. Considere o mesmo HTML e CSS que utilizamos acima.  Precisamos sempre importar com a tag <script> a biblioteca do jQuery depois de baixá-la no site deles. Qualquer dúvida olha o HTML final abaixo, certo? Agora vamos ao script que você vai colocar no <head> do seu HTML:

<script type="text/javascript">
$(document).ready(function(){
$("#conteudo").load("index.php li#tag_cloud")
});
</script>

Isso produz o seguinte resultado:

Note que eu chamei a página index.php deste site e selecionei apenas a Tag Cloud. Gostou?

Agora o código completo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery pieces -#3- HTML externo em uma DIV com AJAX</title>
<!-- Chamando o jQuery -->
<script src="js/third/jquery-1.2.6.js" type="text/javascript"></script>

<!-- O Script -->
<script type="text/javascript">
$(document).ready(function(){
$("#conteudo").load("index.php li#tag_cloud")
});
</script>
</head>

<body>
<div id="conteudo">
<!-- Aqui vai o conteudo externo -->
</div>
</body>
</html>

Espero que seja útil. Um grande abraço para todos e boa semana!

Bom, como vocês devem ter percebido, a aula 003 está atrasada. A semana foi muito corrida. Não posso prometer a data certa, mas ainda essa semana sai alguma coisa. Nem que eu tenha que dividir o conteúdo em duas aulas.

Abraços a todos!

Sabe aqueles menus dropdown? Aqueles que quando você clica, as opções aparecem? Então, vou ensinar como fazer um, ok? Se você quiser ver como vai ficar antes de começar, entre neste endereço:

Primeiro vamos estruturar o XHTML. Como o menu é também uma lista, utilizaremos a tag <ul>, como segue: http://www.rzein.com/wp-content/learn/jquery/menu-dropdown.html

<ul id="menu">
<li class="key"><h1>Definições Importantes</h1></li>
<li class="item" id="DNA"><h2>Definição de DNA</h2></li>
<li class="item" id="RNA"><h2>Definição de RNA</h2></li>
<li class="item" id="PTN"><h2>Definição de Proteína</h2></li>
</ul>

Para o conteúdo que aparecerá quando clicarmos nos itens, utilizaremos a tag <dt> que é própria para definições:


<dl id="definicoes">
<dt id="DNA_tit">DNA</dt>
<dd id="DNA_desc">O DNA, ácido desoxirribonucleico (a sigla em português é ADN), é uma molécula orgânica composta por bases nitrogenadas, acúcar e ácido fosfórico. O DNA é responsável por carregar, em primeira instância, a informação genética. Estruturalmente composto por duas "hélices" complementares e inversas.</dd>

<dt id="RNA_tit">RNA</dt>
<dd id="RNA_desc">O RNA, ácido ribonucleico (a sigla em português é ARN), é uma molécula orgânica composta por bases nitrogenadas. A informação do DNA é transcrita para o RNA que tem a missão de ser traduzido em proteína. O RNA é o código genético de alguns vírus.</dd>

<dt id="PTN_tit">Proteína</dt>
<dd id="PTN_desc">Proteínas são moléculas compostas por aminoácidos conectados por ligações peptídicas. Tem diversas funções no organismo, como, por exemplo, estrutural.</dd>
</dl>

Note que os ids das <dt> e <dl> são diferentes, mas ambos começam com o id das <li> do menu, certo? Isso é importante e deve ser seguido para o script funcionar.
(…) Não acabou! Continue lendo jQuery pieces -#2- Menu dropdown simples

Para ver a aula anterior » [Bioinformática 101 - Aula 001 - Introdução - Parte 1]
Seja bem-vindo à segunda aula do curso. Ainda continuamos na Introdução. Veremos a seguir o básico sobre genética molecular e, na próxima aula, o básico sobre programação. Esta é a última aula da Introdução. Em seguida nos concentraremos mais na informática e menos na genética.

GENÉTICA MOLECULAR

Independente de você ter contato ou não com biologia, se ia ou não bem na matéria na época da escola, 99,99% das pessoas já ouviram falar de DNA. Ok, inventei esse número, mas é fato que a genética está mais na mídia do que nunca. Clonagem, transgênicos, células-tronco embrionárias e assim por diante. Mas afinal, qual a relação entre todos esses conceitos? Bom, para entender tudo isso, vou colocar alguns outros. Aceite-os e entenda-os para que possamos seguir em frente com tranqüilidade, ok?

1. Todos os seres vivos são formados por uma ou mais células. A célula é a menor unidade da vida.
2. As células podem ser divididas em Procarióticas ou Eucarióticas.
   1. As células procarióticas não tem organização nuclear.
   2. As células eucarióticas possuem organização nuclear.
3. Material genético é formado pelo DNA (ácido desoxirribonucleico na sigla em inglês). Nele são contidos os códigos que vão gerar todos os órgãos e substâncias necessárias para a existência de um ser vivo.
4. Todas as células, possuem ou já possuíram material genético. Todos os seres vivos possuem material genético.
5. O DNA é uma macro-molécula, ou seja, uma molécula de grande massa relativa e de estrutura repetitiva.
6. O DNA é formado por duas cadeias de bases nitrogenadas (A - Adenina, T - Timina, C - Citosina ou G - Guanina). Sendo que uma cadeia é complementar à outra e inversa. A vai com T e C vai com G (e vice-versa).
7. Um cromossomo é uma longa cadeia de DNA condensado que contém vários genes. Os humanos tem 46 cromossomos. Um cavalo, por exemplo, tem 64.
8. Genes são segmentos do DNA que são transcritos em uma outra molécula, o RNA (ácido ribonucleico).
9. O RNA também é formado por bases nitrogenadas, mas com uma diferença. Temos no lugar da Timina (T), a Uracila (U). Então A com U e C com G no RNA.
10. O RNA é lido e traduzido em uma proteína.
11. Proteínas são moléculas formadas por aminoácidos. São 20 os possíveis aminoácidos que formam as proteínas.
12. As proteínas, por sua vez exercem diversas funções metabólicas no organismo, além de funções estruturais (músculos, pelo, etc).
13. Portanto: o DNA é transcrito em RNA que por sua vez é traduzido em uma Proteína. As proteínas de diversos tipos fazem possível a existência de seres vivos.

Ok, concordo que (…) Não acabou! Continue lendo Bioinformática 101 - Aula 002 - Introdução - Parte 2