23
Jun 08

Fique nutrido

:: news :: by Gilberto Saraiva

Camaradas,

Estou escrevendo esse post pra ajudar a todos que depois de um final de semana farto de comida e cedento de porcaria ficam com a mão na cabeça pensando que já está na hora de ir pro além.

Não sei quanto a vocês, mas eu, por exemplo, fico pensando no que está faltando nas minhas refeições e lanches para que eu sobreviva mais e melhor ao longo dos anos. Tenho 23 anos, e isso já me intriga, imagina se eu não começar a fazer algo agora, o que será da minha consciência daqui a alguns anos (Acho que se encaixa no mesmo pensamento de preservação da natureza e auto-preservação). Pois bem, não tenho a pretenção de me tornar um ser super-saudável e abdicar de algums pecados da gula, então vou me centrar apenas na parte das vitaminas, que pra quem não opta por diversidade de alimentos na hora do “rango” precisa ficar atento.

Classe das Vitaminas:

Lipossolúveis: são solúveis em gordura e em solventes orgânicos. Por não se dissolverem na água, para chegarem as células através do plasma sanguíneo, as vitaminas precisam de moléculas transportadoras como colesterol. O excesso dessas vitaminas é armazenado no fígado e em depósitos de gordura do corpo.

Hidrossolúveis: são solúveis em água, são difíceis de armazenar porque o excesso é elimindo pela urina. Essas substâncias são solúveis no plasma sanguíneo e por isso não necessitam de compostos carregadores.

Já que sabemos as duas classes e em quais condições elas atuam, vamos a parte interessante.

As informações de RDA (Recomendação Ingestão Diária) abaixo são referentes a minha pessoa, sendo eu: 23 anos, 1,80m de altura, 85 kilos e sedentário (nem sexo e futebol de final de semana te tiram dessa categoria). Me pareceu também, pelo que venho lendo, que elas valem para pessoas com idade entre 19 a 30 anos.

legenda para leitura (RDA):

Vitamina A:

RDA: (900 – 3000) µg

Entende-se:

no mínimo 900 a no máximo 3000 microgramas (µg).

dg : 1 Decigrama, igual a 0,1 gramas.
mg : 1 Miligrama, igual a 0,001 gramas.
µg : 1 Micrograma, igual a 0,000001 gramas.

Perceba que ingerir 1 micrograma não é tão difícil :) e a maioria dos valores estão em microgramas.

As vitaminas Lipossolúveis:

  1. Vitamina A
    RDA
    (900 – 3000) µg
    Aonde tem
    Fígado, produtos derivados do leite, manteiga, queijos amarelos, óleo de fígado de bacalhau, peixes, ovo cru, vegetais verdes escuros e amarelos, frutas, Alimentos que contém betacaroteno (tomate, frutas e verduras alaranjadas).
  2. Vitamina D
    RDA
    (5 – 50) µg
    Aonde tem
    Óleos de fígado de peixe, manteiga, esteróides, e alimentos irradiados com luz ultravioleta (vitamina D2).
    OBS: A vitamina é sintetizada pela luz ultravioleta que golpeia a pele (formando a vitamina D3).
  3. Vitamina E/Tocoferol
    RDA
    (15 – 1000) mg
    Aonde tem
    Cereais integrais, gema de ovo, saladas verdes, óleos vegetais, soja, cacau, verduras de folhas verde escuras.
  4. Vitamina K
    RDA
    120 µg
    Aonde tem
    Legumes verdes (couves, espinafre, saladas verdes, brócolis), repolho, óleos de planta e margarina, ovo, fígado.

As vitaminas Hidrossolúveis:

  1. Vitamina B1/Tiamina
    RDA
    1,2 mg
    Aonde tem
    Carnes, gema do ovo, grãos integrais (arroz, trigo etc), massas e pães integrais, nozes, levedo de cerveja, germe de trigo, feijão, ervilha, grão de bico.
  2. Vitamina B2/Riboflavina
    RDA
    1,3 mg
    Aonde tem
    Fígado, rim, ovos, queijo, leite, germe de trigo, cereais integrais, nozes, Verduras folhas verdes (espinafre, agrião etc.), levedo de cerveja.
  3. Vitamina PP/Niacina
    RDA
    (16 – 35) mg
    Aonde tem
    Levedo de cerveja, fígado, rim, coração, carnes, peixes, ovos, grãos e pães integrais.
  4. Vitamina B6/Piridoxina
    RDA
    (1,3 mg – 100) mg
    Aonde tem
    Fígado, levedo de cerveja, peixe fresco, nozes, farelo, cereais integrais, germe de trigo, batata, banana, milho, soja e carne de soja, melância, cebola e alho.
  5. Vitamina B12/Cianocobalamina
    RDA
    2,4 µg
    Aonde tem
    Fígado, levedo de cerveja, rim, carne vermelha, farelo de trigo e arroz, leite e derivados, ovos e frutos do mar.
  6. Ácido Fólico/Folato
    RDA
    (400 – 1000) µg
    Aonde tem
    Vegetais de folhas verdes crus, fígado, feijão.
    Obs: Pode ser destruído se cozinhar.
  7. Vitamina B5/Ácido Pantotênico
    RDA
    5 mg
    Aonde tem
    Frango, carne de boi, batatas, aveia, cereais, produtos de tomate, fígado, rim, levedo de cerveja, fermento, gema de ovo, brócolis, grãos integrais.
  8. Vitamina H/Biotina
    RDA
    120 µg
    Aonde tem
    Fígado, rim, nozes.
    OBS: em quantias menores em frutas e carnes.
  9. Vitamina C/Ácido Ascórbico
    RDA
    30 µg
    Aonde tem
    Frutas cítricas (acerola, limão, laranja etc), vegetais verdes escuro e laranjados, pimentão, salsinha, tomates, suco de tomate, batatas, couve-flor, brócolis, morangos, repolho, cenoura e espinafre.
    Obs: A vitamina C é destruida se o alimento for cozido.
  10. Colina
    RDA
    (550 – 3500) mg
    Aonde tem
    Leite, fígado, ovos, amendoin, levedo de cerveja, trigo, soja.

Fonte: Impressão da Acadêmia Nacional de Ciências dos Estados Unidos. nap.edu

Para os amigos da cerveja, Levedo de cerveja, ou levedura, é um fermento natural utilizado na fermentação da cevada ao produzir a cerveja e não a cerveja propriamente dita. Então meu camarada, cerveja é só pra apreciar mesmo, nada de relaciona-la a nutrição ou corpo saudável. Eu sei, eu também fiquei empolgado no começo… rsrsrsrsrsrs

Escrevi o esquema reverso pra quem quer criar vitaminas escolhendo o que gosta primeiro ( vai aparecer cada vitamina maluca, :D ):

Alimentos irradiados com luz ultravioleta ( vitamina d2 ):
Vitamina D

Alimentos que contém betacaroteno ( tomate, frutas, verduras alaranjadas ):
Vitamina A

Amendoin:
Colina

Arroz:
Vitamina B1/Tiamina, Vitamina B12/Cianocobalamina

Aveia:
Vitamina B5/Ácido Pantotênico

Banana:
Vitamina B6/Piridoxina

Batata:
Vitamina B6/Piridoxina, Vitamina B5/Ácido Pantotênico, Vitamina C/Ácido Ascórbico

Brócolis:
Vitamina K, Vitamina B5/Ácido Pantotênico, Vitamina C/Ácido Ascórbico

Cacau:
Vitamina E/Tocoferol

Carne de boi:
Vitamina B5/Ácido Pantotênico

Carne de soja:
Vitamina B6/Piridoxina

Carne vermelha:
Vitamina B12/Cianocobalamina

Carnes:
Vitamina B1/Tiamina, Vitamina PP/Niacina, Vitamina H/Biotina

Cebola:
Vitamina B6/Piridoxina

Cenoura:
Vitamina C/Ácido Ascórbico

Cereais:
Vitamina E/Tocoferol, Vitamina B2/Riboflavina, Vitamina B6/Piridoxina, Vitamina B5/Ácido Pantotênico

Cereais integrais:
Vitamina E/Tocoferol, Vitamina B2/Riboflavina, Vitamina B6/Piridoxina

Coração:
Vitamina PP/Niacina

Couve-flor:
Vitamina C/Ácido Ascórbico

Derivados:
Vitamina A, Vitamina B12/Cianocobalamina

Alho:
Vitamina B6/Piridoxina

Ervilha:
Vitamina B1/Tiamina

Espinafre:
Vitamina K, Vitamina B2/Riboflavina, Vitamina C/Ácido Ascórbico

Esteróides:
Vitamina D

Farelo:
Vitamina B6/Piridoxina, Vitamina B12/Cianocobalamina

Farelo de trigo:
Vitamina B12/Cianocobalamina

Feijão:
Vitamina B1/Tiamina, Ácido Fólico/Folato

Fermento:
Vitamina B5/Ácido Pantotênico

Fígado:
Vitamina A, Vitamina D, Vitamina K, Vitamina B2/Riboflavina, Vitamina PP/Niacina, Vitamina B6/Piridoxina, Vitamina B12/Cianocobalamina, Ácido Fólico/Folato, Vitamina B5/Ácido Pantotênico, Vitamina H/Biotina, Colina

Frango:
Vitamina B5/Ácido Pantotênico

Frutas:
Vitamina A, Vitamina H/Biotina, Vitamina C/Ácido Ascórbico

Frutas cítricas ( acerola, limão, laranja ):
Vitamina C/Ácido Ascórbico

Frutos do mar:
Vitamina B12/Cianocobalamina

Gema de ovo:
Vitamina E/Tocoferol, Vitamina B5/Ácido Pantotênico

Germe de trigo:
Vitamina B1/Tiamina, Vitamina B2/Riboflavina, Vitamina B6/Piridoxina

Grão de bico:
Vitamina B1/Tiamina

Grãos:
Vitamina B1/Tiamina, Vitamina PP/Niacina, Vitamina B5/Ácido Pantotênico

Grãos integrais ( arroz, trigo ):
Vitamina B1/Tiamina

Legumes verde ( couves, espinafre, saladas verde, brócolis ):
Vitamina K

Leite:
Vitamina A, Vitamina B2/Riboflavina, Vitamina B12/Cianocobalamina, Colina

Levedo de cerveja:
Vitamina B1/Tiamina, Vitamina B2/Riboflavina, Vitamina PP/Niacina, Vitamina B6/Piridoxina, Vitamina B12/Cianocobalamina, Vitamina B5/Ácido Pantotênico, Colina

Manteiga:
Vitamina A, Vitamina D

Margarina:
Vitamina K

Massas:
Vitamina B1/Tiamina

Melância:
Vitamina B6/Piridoxina

Milho:
Vitamina B6/Piridoxina

Morangos:
Vitamina C/Ácido Ascórbico

Nozes:
Vitamina B1/Tiamina, Vitamina B2/Riboflavina, Vitamina B6/Piridoxina, Vitamina H/Biotina

Óleo de fígado de bacalhau:
Vitamina A

Óleos de fígado de peixe:
Vitamina D

Óleos de planta:
Vitamina K

Óleos vegetais:
Vitamina E/Tocoferol

Ovo:
Vitamina A, Vitamina E/Tocoferol, Vitamina K, Vitamina B1/Tiamina, Vitamina B2/Riboflavina, Vitamina PP/Niacina, Vitamina B12/Cianocobalamina, Vitamina B5/Ácido Pantotênico, Colina

Ovo cru:
Vitamina A

Pães integrais:
Vitamina B1/Tiamina, Vitamina PP/Niacina

Peixe fresco:
Vitamina B6/Piridoxina

Peixes:
Vitamina A, Vitamina PP/Niacina

Pimentão:
Vitamina C/Ácido Ascórbico

Produtos de tomate:
Vitamina B5/Ácido Pantotênico

Produtos derivados do leite:
Vitamina A

Quantias menores em frutas:
Vitamina H/Biotina

Queijo:
Vitamina A, Vitamina B2/Riboflavina

Queijos amarelos:
Vitamina A

Repolho:
Vitamina K, Vitamina C/Ácido Ascórbico

Rim:
Vitamina B2/Riboflavina, Vitamina PP/Niacina, Vitamina B12/Cianocobalamina, Vitamina B5/Ácido Pantotênico, Vitamina H/Biotina

Saladas verde:
Vitamina E/Tocoferol, Vitamina K

Salsinha:
Vitamina C/Ácido Ascórbico

Soja:
Vitamina E/Tocoferol, Vitamina B6/Piridoxina, Colina

Suco de tomate:
Vitamina C/Ácido Ascórbico

Tomates:
Vitamina C/Ácido Ascórbico

Trigo:
Vitamina B1/Tiamina, Vitamina B2/Riboflavina, Vitamina B6/Piridoxina, Vitamina B12/Cianocobalamina, Colina

Vegetais de folhas verde crus:
Ácido Fólico/Folato

Vegetais verde escuro e laranjados:
Vitamina C/Ácido Ascórbico

Vegetais verde escuro e amarelos:
Vitamina A

Verduras de folhas verde escuras:
Vitamina E/Tocoferol

Verduras folhas verde ( espinafre, agrião ):
Vitamina B2/Riboflavina

Abraços e saúde!



21
Jun 08

IA CS3: Dentures

:: articles :: by Gilberto Saraiva

Folks,

A funny inspiration:



dentures.ai



21
Jun 08

Challenge: Alien Numbers

:: challenges :: by Gilberto Saraiva

Camaradas,

Esse desafio é baseado no desafio do Google CodeJam
que estou participando (você também pode participar).

O desafio dos Números Alienígenas

Linguagem/Tema

Qualquer uma. O importante e a resposta certa com a formatação certa.

Nível

Difícil

Regras
  • Não há regras
  • O Problema

    Nós, seres humanos, temos um sistema numérico que possuí 10 digitos: 0, 1, 2, 3, 4, 5, 6, 7, 8 e 9. Imagine você se deparando com um pedido oficial do governo, de suma importância, dizendo que receberam várias mensagens alienígenas encadeadas e que é preciso que alguém decodifique-as. Perante uma análise prévia dos técnicos da inteligência, algumas conclusões foram feitas:

  • As mensagens estão serapadas por linha
  • Cada mensagem indicará 2 número, o sistema numérico base
    número_alienigina_1 número_alienigina_2 sistema_numérico_base
  • Cada sistema numérico alienigina pode possuir letras de A até Z, números de 0 a 9, e os caracteres !”#$%&’()*+,-./:;<=>?@[\]^_`{|}~, todos distintos entre si
  • O primeiro número indicará uma uma letra do nosso alfabeto
  • O segundo número indicará a ordem da letra
  • Baixe aqui a lista de Mensagens:
    Mensagens alienígenas

    Objetivo

    Assim que você decodificar cada mensagem, coloque-as em ordem e nos envie, aqui mesmo.

    Exemplo

    Para facilitar a decodificação criei um pequeno exemplo, em um sistema numérico alienígena:

     plain |  copy code |? 
    1
    2X5JyQn0f*%YB~h9
    
    2
    2
    
    3
    9
    
    4
    Xh
    
    5
    5~

    1º linha: indica o sistema numérico alienigina.
    2º linha: o número zero no sistema alienigina.
    3º linha: o número 15.
    4º linha: o número 30.
    5º linha: o número 45.

    Esse desafio se destina a todos que possuem grande entendimento em lógica e criação de algoritmos específicos.

    As dúvidas e questionamentos podem ser postados aqui!
    O primeiro que acertar, vou entrar em contato e disponibilizar um espaço aqui para que ele demonstre como fez.

    Abraços.

    O Vencedor do Desafio foi:
    Pierre Henrique Lehnen, Igrejinha/RS
    http://www.phenrique.com.br

    Resposta do e-mail:

  • Gostaria de declarar algumas palavras sobre como solucionou o desafio?
    Não tenho muito o que falar, se imaginar cada símbolo como sendo um número e considerar que estão em ordem, basta converter o número da base informada para base decimal, substituindo o símbolo pelos nossos números tradicionais.
    Como o segundo número de cada linha (correspondente à ordem) já estava ordenado (apesar de decrescente), não me preocupei em criar uma rotina para ordenar conforme. Tendo todos os números traduzidos, bastou obter o digíto ascii equivalente e a sentença foi revelada.
  • Quais linguagens usou?
    Usei Delphi 7 .
  • O desafio realmente tem nível difícil ao seu ver?
    Sinceramente, não. Não levei mais do que alguns minutos para concluir, sem nem precisar esquentar a cabeça. :)
  • Você participa do CodeJam?
    Não.
    Confesso que nem sei muito sobre o CodeJam, vou dar uma pesquisada sobre ele e se não for algo que me tome muito tempo, pode ser que eu participe.
  • OBS: Não vou publicar a resposta, se você acha que acertou pode postar a resposta aqui, eu entro em contato e lhe informo se acertou.



    20
    Jun 08

    Google CodeJam

    :: news :: by Gilberto Saraiva

    Camaradas,

    Este post é só pra anunciar que em breve estarei publicando na área de desafios os problemas do codejam em português, assim pra quem esta achando interessante, mas não ta entendendo muito bem, fica aqui uma versão em português.

    Vou tentar responder as dúvidas, mas não vou publicar respostas até o términio do CodeJam.

    Abraço a todos



    17
    Jun 08

    AI CS3: Create “The Classic Tree”

    :: articles :: by Gilberto Saraiva

    As this article was rejected by vectortuts.com (Don’t ask me why!) I was think about why not publish it here. So if you liked, I’ll not keep my sadness.

    This article explain some How To on Adobe Illustrator:
  • Creating brush with Illustrator. (The Leaf)
  • Manipulate gradient background. (The Tree Crown)
  • Manipulate opacity of elements/objects. (The Tree Crown and Shadow of the Trunk)
  • Create shadow effect (The Tree Trunk)
  • On this article I’ll explain how to create a simple and classic tree with Adobe Illustrator and not more then your hands.

    The Tree

    Prepare yourself to create a beaultifull tree like this one below

    OBS: Take attention with red and blue arrows, they will indicate some usefull stuff

    Step 1

    Lets create a Leaf

    For the first piece we need to create a simple Leaf that will increase the quality of the final art.

    • Create a ellipse using Ellipse Tool.
    • Move the bottom vector to near of the middle.
    • Select the top vector and transform it into a corner.

    Continue…

    • Create the ramifications with one vertical line and three horizontal lines with three vectors.
    • Modify these three horizontals lines to create the same layout as the displayed picture below

    Drag the Leaf to the Brushes Window

    Add the Leaf as “New Scatter Brush”

    Take attention on all configurations and setup the same on your project

    • Name: Leaf
    • Size: 100%, Fixed
    • Spacing: 45% – 145%, Random
    • Scatter: -45% – 45%, Random
    • Scatter: 340% – 190%, Random
    • Rotation relative to: Path

    Important Note: Adobe Illustrator will respect the size of the brush and if you add the brush with a big size you will need to modify the Size property on this window to get a good result.

    Step 2

    Lets create the Tree Crown.

    Use the Pen Tool (Hotkey: P) to draw something like this:

    With the Leaf we make the border of our polygon, selecting it on the Brushes Window

    Now lets change our polygon to a Gradient Fill.

    Use the Gradient Tool (Hotkey: G) and take attention on the position and direction, displayed on the image below, of the moviment you will need to do to create the correct layout.

    The result with the gradient

    Now we need to create another polygon like this

    The gradient position and direction

    With these two polygon make the following steps:

    • Align both
    • Open up the Transparency Window and change the first created Polygon like this:
    • Change the Second Polygon too:

    The needed result is something like this:

    Lets make the Crown background

    Create some circles that cover the both polygons

    Select all the created circles and open the Pathfinder Window and then click on “Add yo shape area” and after on “Expand”

    Apply the gradient

    Create a Zig Zag effect (Menu Effect -> Distort & Transform)

    • Size: 3px – Absolute
    • Ridges per segment: 2
    • Points: Smooth

    Send the background to behind the polygons by pressing (Ctrl/Command + Left Bracket).

    Now, the result will be something like this

    Step 3

    Lets create the Tree Trunk.

    Use the Pen Tool (Hotkey: P) to draw something like this:

    Apply gradient with the technique displayed below

    The gradient settings

    • Type: radial
    • Sliders: 3 Sliders: RGB(60, 36, 21), RGB(139, 93, 59), RGB(60, 36, 21)

    Important note: The position of the sliders need to be modified to get near of the needed result

    Our Tree Trunk

    Lets put the shadow on it, follow the steps

    • Duplicate our Tree Trunk, and make it black
    • Use the Knife Tool (Hotkey: none) and cut the trunk like the right trunk below.

    Take the shadow piece and put it on the original trunk

    Change the shadow piece Opacity to 80% on the Transparency Window

    Step 4

    Building up the Tree

    Now we have all pieces to building our Tree, so let me show what you have to get

    With a little of inspiration we can create some additions like these

    The Background:

    Some falling leafs:

  • Two lines created with Pen Tool (Hotkey: P) and using the Leaf Brush

    Two winds blowing:

    • Both from Artistc -> Artistc_ChalkCharcoalPencil library
    • The first, on the top, with Charcoal 1 brush
    • The second with Chalk – Scribble brush

    A shadow for the Tree:

    And now, The Tree

    Joins everything and see the art



  • 17
    Jun 08

    2 minutes of Optical illusions

    :: news :: by Gilberto Saraiva

    Folks,

    Take a look on all these optical illusions:

    Simple to understand but with a complex result.

    Hugs for all



    17
    Jun 08

    Passando frio? Anime-se

    :: news :: by Gilberto Saraiva

    Camaradas,

    Sátira dos cidadãos de várias regiões brasileiras e seus custumes durante o frio:


    download audio

    Engraçado demais não é?

    Abraço a todos



    16
    Jun 08

    Vectortuts.com Born!

    :: news :: by Gilberto Saraiva

    Folks,

    With a unmeasurable happiness, I tell for all you, that Vectortuts.com born and comes to keep ours minds on the place that we don’t want to leave, the “Inspiración”.

    I recommend you to put this site on your bookmark:
    http://vectortuts.com/

    All we’ll become more skilled

    Hugs for all.



    15
    Jun 08

    jQuery: Criando códigos facilitadores

    :: articles :: by Gilberto Saraiva

    Camaradas,

    Respeitando a sequência dos artigos hoje vou falar sobre como facilitar o desenvolvimento web utilizando o jQuery.

    Muitos aqui devem saber que o JavaScript antigamente não era lá aquele modelo respeitado de linguagem interpretada, mas após a liberação do Prototype e do objeto Ajax o negócio ficou diferente.

    O que é o Prototype?

    O Prototype antigamente era restrito ao escopo do browser, só ele mexer nas propriedades dos objetos DOM e Javascript.
    Hoje, já podemos contar com essa parte na hora de desenvolver um código em JavaScript. Essa liberação do Prototype ampliou as possibilidades de utilização do JavaScript de uma forma que fez o mesmo renascer das cinzas, epoca aonde o Flash e estruturas de Server-side estavam fazendo o trabalho pesado.

    Mas qual a real função do Prototype?
    O Prototype é o que possibilita a criação de classes estruturadas no JavaScript, exemplo:

     HTML |  copy code |? 
    01
    <script language="JavaScript">
    02
    <!--
    03
      Person = function(AData){
    04
        sData = ("" + AData).split(";");
    05
        this.data.Name = sData[0];
    06
        this.data.Age = parseInt(sData[1]);
    07
        this.data.Job = sData[2];
    08
      }
    09
      Person.prototype.data = {
    10
        Name: '',
    11
        Age: 0,
    12
        Job: ''
    13
      }  
    14
      Person.prototype.Show = function(){
    15
        alert(
    16
          this.data.Name + "\n" +
    17
          "Age: " + (this.data.Age) + "\n" +
    18
          "Working as " + this.data.Job
    19
        );
    20
      }
    21
     
    22
      window.onload = function(){
    23
        (new Person("Gilberto Saraiva;23;Programmer")).Show();
    24
      }
    25
    //-->
    26
    </script>

    Infelizmente, não sei porque cargas d’agua, lançaram uma library pra JavaScript de nome Prototype e isso dificulta muito a obtenção de material sobre o verdadeiro Prototype. Fora que com esse nome muita gente fica iludida e acaba por pensar que Prototype é apenas uma library e quem não a usa não vai poder usar o Prototype verdadeiro.

    O que é o Ajax?

    Muitos confundem o Ajax como uma linguagem, como uma estrutura adicional, mas isso é um engano, o Ajax nada mais é que um método de utilização do objeto Ajax (Asynchronous Javascript And XML). Resumidamente podemos dizer que o Ajax é o jeito que utilizamos para fazer chamadas assincrônicas a outras partes do nosso servidor web (via HTTP1.1) para obtermos conteúdo sem precisar fazer uma requisição HTTP principal e recarregar a página novamente. A principal funcionalidade é poder modificar partes do conteúdo de um site através do objeto Ajax sem precisar efetuar uma atualização completa no código, sendo que o mesmo precisa apenas de uma pequena parte modificada e o resto continua estático. Não vou colocar um exemplo de como utilizar o objeto Ajax nativamente, pois o mesmo não é crossbrowser, e a interação é diferente em alguns browsers.

    Vamos a ação

    Vou tentar ser prático e resolver alguns problemas que encontramos no dia a dia na hora de desenvolver algum sistema web. A utilização do jQuery facilitará a manipulação dos elementos, vou resolver as questões do modo normal e outra com o jQuery, para termos de comparação.

    Como esconder e exibir elementos HTML?
    JavaScript puro

     HTML |  copy code |? 
    01
    02
    <script language="JavaScript">
    03
    <!--
    04
      window.onload = function(){
    05
        Blink = document.getElementById("Blink");
    06
        setInterval(function(){
    07
          with(Blink.style)
    08
            display = (display == "block") ? "none" : "block";
    09
        }, 250);
    10
      }
    11
    //-->
    12
    </script>
    13
    <body>
    14
    <div id="Blink">Texto</div>
    15
    </body>
    16

    jQuery

     HTML |  copy code |? 
    01
    02
    <script language="JavaScript">
    03
    <!--
    04
      $(function(){
    05
        $Blink = $("#Blink");
    06
        setInterval(function(){
    07
           $Blink.toggle();
    08
        }, 250);
    09
      });
    10
    //-->
    11
    </script>
    12
    <body>
    13
    <div id="Blink">Texto</div>
    14
    </body>
    15
    Como listar elementos HTML pela tag?
    JavaScript puro

     HTML |  copy code |? 
    01
    02
    <script language="JavaScript">
    03
    <!--
    04
      window.onload = function(){
    05
        elems = document.getElementsByTagName("DIV");
    06
        alert(elems.length + ' DIVs foram encontrados');
    07
        for(i = 0; i < elems.length; i++)
    08
          alert(elems[i].innerHTML);
    09
      }
    10
    //-->
    11
    </script>
    12
    <body>
    13
    <div>Texto 1</div>
    14
    <div>Texto 2</div>
    15
    <div>Texto 3</div>
    16
    </body>
    17

    jQuery

     HTML |  copy code |? 
    01
    02
    <script language="JavaScript">
    03
    <!--
    04
      $(function(){
    05
        $elems = $("DIV"); 
    06
        alert($elems.length);
    07
        $elems.each(function(){
    08
          alert(this.innerHTML);
    09
        });
    10
      });
    11
    //-->
    12
    </script>
    13
    <body>
    14
    <div>Texto 1</div>
    15
    <div>Texto 2</div>
    16
    <div>Texto 3</div>
    17
    </body>
    18
    Como posso listar todos os links contidos na minha página?
    JavaScript puro

     HTML |  copy code |? 
    01
    02
    <script language="JavaScript">
    03
    <!--
    04
      window.onload = function(){
    05
        aTags = document.getElementsByTagName("A");
    06
        Hrefs = "";
    07
        for(i = 0; i < aTags.length; i++)
    08
          Hrefs += aTags[i].innerHTML + "\n   link: " + aTags[i].href + "\n";
    09
        alert(Hrefs);
    10
      }
    11
    //-->
    12
    </script>
    13
    <body>
    14
    <a href="http://google.com/">Google.com</a>
    15
    <a href="http://yahoo.com/">Yahoo.com</a>
    16
    <a href="http://gsaraiva.projects.pro.br/">gsaraiva.projects.pro.br</a>
    17
    <a href="http://jquery.com/">jQuery.com</a>
    18
    </body>
    19

    jQuery

     HTML |  copy code |? 
    01
    02
    <script language="JavaScript">
    03
    <!--
    04
      $(function(){
    05
        Hrefs = "";  
    06
        $("A").each(function(){
    07
          Hrefs += this.innerHTML + "\n   link: " + this.href + "\n";
    08
        });
    09
        alert(Hrefs);
    10
      });
    11
    //-->
    12
    </script>
    13
    <body>
    14
    <a href="http://google.com/">Google.com</a>
    15
    <a href="http://yahoo.com/">Yahoo.com</a>
    16
    <a href="http://gsaraiva.projects.pro.br/">gsaraiva.projects.pro.br</a>
    17
    <a href="http://jquery.com/">jQuery.com</a>
    18
    </body>
    19

    Espero que esse artigo ajude a você entender melhor o jQuery e porque utiliza-lo, você mesmo poderá fazer suas comparações e sentir que ele realmente ajudará no desenvolvimento.

    Próximo artigo:

  • Adicionando funções e propriedades aos objetos HTML
  • Artigos jQuery relacionados:

  • Como iniciar a utilização do jQuery
  • Tudo que você precisa é o link
  • Os Seletores (Selectors)
  • Criando códigos facilitadores
  • Abraços a todos.



    15
    Jun 08

    AI CS3: MicroSystem

    :: articles :: by Gilberto Saraiva

    Folks,

    A MicroSystem on illustrator:



    microsystem.ai