O3D – Como instalar e exemplos
9 de maio de 2009 às 15:35 | Publicado em JavaScript, O3D | Deixe um comentárioTags: 3D, animação, exemplos, Google, instalação, modelo, O3D, plugin
Depois de falar sobre esta API do Google no outro post, mostraremos como instalar o plugin para a visualização dos exemplos. Abaixo estão os links para baixar:
Depois de instalar os plugins já podemos visualizar os exemplos. Atenção para os pré-requisitos de Software:
- Windows: XP Service Pack 2, Vista (x86/x64) Service Pack 1; Firefox 2+, Internet Explorer 7.0+ (x86 only), or Google Chrome
- Mac: Intel Mac with OS X 10.5 (Leopard); Firefox 2+, Safari 3+, or Camino
E os de Hardware:
- Windows: x86 CPU; DX9-compatible GPU with VS2.0 and PS2.0 support
- Mac: any Intel Mac (unsupported GPUs will use SW renderer)
Mais detalhes podem ser encontrados aqui.
Várias amostras do que pode ser desenvolvido usando o O3D estão no site do Google. Uma implementação bem simples foi feita para demonstrar o que pode ser feito com essa API. Nela, podemos girar uma caixa e visualizar todos os seu lados e dar zoom com o scroll do mouse, além de mostrar efeitos de luz na cena. A caixa pode ser vista aqui.
O castelo, na foto abaixo, é em modelo mais elaborado. É permitido andar pela cena e, com o zoom, conseguimos ver detalhes de dentro dele, como quadros na parede. Ele pode ser encontrado aqui.
Outro modelo bem feito é a igreja. Nela, percebemos a textura e os detalhes, como a porta. Pode ser visualizada aqui.
Também podemos implementar modelos usando fotos, como nesse exemplo, em que conseguimos ter uma visão panorâmica de um cenário.
Apesar de ser uma tecnologia muito nova, o O3D está conquistando cada vez mais programadores. Vale a pena dar uma conferida.
Fonte:
http://www.skillmanmedia.com/o3dexamples/
Escrito por Luísa Pèret Moraes e Paula Pèret Moraes
Conceito: O que é Z-index?
5 de maio de 2009 às 10:34 | Publicado em Conceitos, CSS, JavaScript | 1 ComentárioTags: camada, conceito, CSS, DOM, JavaScript, profundidade, tridimensional, z-index, zindex
Z-index é uma propriedade muito interessante não só de JavaScript, mas de CSS também. Mas para que ela serve?
Quando queremos trabalhar com três dimenções usamos a altura, a largura e a profundidade. Para dar um efeito de profundidade na página ou organizar os elementos de forma que um fique sobre o outro, utilizamos essa propriedade.
z-index é a propriedade usada para definir a terceira dimenção da página, ou seja, a profundidade.
Para usá-la é muito simples. Como é do tipo inteiro, o elemento que tiver o atributo z-index com um número maior ficará por cima. Se dois elementos tiverem o mesmo valor, a ordem em que foram inseridos que importará.
Devemos prestar atenção ao usá-lo, pois só funcionará com elementos que tiverem o mesmo pai segundo o DOM.
Agora ficou mais fácil de criar páginas com 3 camadas. Até a próxima!
Fonte:
http://www.webreference.com/js/column28/zindex.html
Escrito por Luísa Pèret Moraes e Paula Pèret Moraes
O3D – A nova API do Google para Web 3D
30 de abril de 2009 às 23:39 | Publicado em Conceitos, JavaScript, O3D | 2 ComentáriosTags: 3D, API, Google, JavaScript, O3D, Web
Quando falamos em 3D logo pensamos em algum jogo ou em algum filme. Na Web é muito difícil achar conteúdo assim, a maior parte contêm apenas material 2D. Achar sites como o Google Earth em que o usuário pode interagir com o site por meio de conteúdos 3D é muito raro. Mas agora tudo ficou mais fácil pois o Google anunciou o O3D.
O3D é uma API feita pelo Google para se trabalhar com 3D na Web, ou seja, para desenvolver aplicativos tridimensionais e que vão ser executadas no browser.
Com o plugin do O3D instalado conseguimos dar ao browser a capacidade de ler os gráficos gerados por ele. E a melhor notícia, o código é livre, qualquer pessoa que quiser aprender pode entrar no site e ler sua documentação.
Utilizando o JavaScript como linguagem conseguimos criar aplicações ricas e com muito mais interatividade, além de conseguirmos montar texturas e movimentos aprimorados.É reconhecido pelos browsers Mozilla Firefox, Safari, Internet Explorer e Chrome. Um exemplo pode ser visto aqui:
Esta foi apenas uma breve introdução. Estaremos colocando uma série de posts sobre esse assunto. Até mais!
Fontes:
http://code.google.com/intl/pt-BR/apis/o3d/
http://o3d.blogspot.com/2009/04/toward-open-web-standard-for-3d.html
Escrito por Luísa Pèret Moraes e Paula Pèret Moraes
Como carregar um arquivo externo de JavaScript no Delphi IntraWeb
30 de abril de 2009 às 22:52 | Publicado em Delphi IntraWeb, JavaScript | Deixe um comentárioTags: Delphi, IntraWeb, JavaScript, LoadFromFile, Script Events
Hoje vamos falar um pouco da ligação de Delphi intraweb com arquivos de javascript. No Delphi, podemos usar javascript de duas maneiras. Na primeira, vamos na propriedade Script Events do Object Inspector e colocamos o código no evento que desejamos. Por exemplo, para acionar um alert sempre que clicarmos em um botão, é só ir na propriedade Script Events deste botão e, no evento onClick, digitar o comando, no caso, um alert.
A outra maneira seria fazer todo o código(com todas as funções que forem ser usadas) e salvá-lo com a extensão .js. Feito isso, temos que ligar esse arquivo ao Delphi colocando esse comando no evento OnCreate do formulário:
Javascript.LoadFromFile(‘C:\…\xxx.js’);
O endereço acima deve ser substituido pelo do seu arquivo .js. Desse modo, nos eventos da propriedade Script Events dos componentes, podemos simplesmente chamar as funções desejadas.
Esperamos que tenham gostado! Para o esclarecimento de dúvidas, críticas ou sugestões, por favor, deixem seu(s) comentário(s). Até o próximo artigo.
Escrito por Luísa Pèret Moraes e Paula Pèret Moraes
Usando for em JavaScript…
26 de abril de 2009 às 00:09 | Publicado em HTML, JavaScript | Deixe um comentárioTags: alert, for, JavaScript
Nosso primeiro post vai ser uma brincadeira. Vamos implementar um código muito simples em JavaScript, para quem está começando a aprender a linguagem e quer se divertir com seus amigos, hehe. Vamos fazer aquela brincadeira bem conhecida do "elefante incomoda muita gente".
O primeiro passo é abrir um editor de texto e salvar o arquivo como elefante.html.
Depois vamos começar montar uma página com HTML. No HTML não importa se está com letra maiúscula ou minúscula. Digite nesse arquivo o código abaixo:
<HTML>
<HEAD>
<TITLE>Elefante</TITLE>
</HEAD>
<BODY>
<!–Criação de um botão–>
<INPUT TYPE="button" NAME="btnElefante" VALUE="Clique aqui!!!">
</BODY>
</HTML>
Agora começaremos a colocar o JavaScript no código. Atenção que essa linguagem é case sensitive, ou seja, existe distinção entre letras maiúsculas e minúsculas! Adicione as linhas abaixo:
<HTML>
<HEAD>
<TITLE>Elefante</TITLE>
<!–Abertura das tags do script–>
<SCRIPT TYPE="text/javascript">
function elefante(){
alert("1 elefante incomoda muita gente!");
for(I=2; I<20; I++){
alert(I + " elefantes incomodam muita gente!");
}
}
</SCRIPT>
</HEAD>
<BODY>
<!–Criação de um botão com o evento onClick–>
<INPUT TYPE="button" NAME="btnElefante" VALUE="Clique aqui!!!" onClick="elefante();">
</BODY>
</HTML>
Explicando o que foi feito: uma função chamada elefante foi criada entre as tags <SCRIPT>. Nela, demos um alert(caixa de mensagem que vai aparecer na tela), mandando escrever a primeira frase pois ela está no singular. Depois fizemos um "for" que incrementa a variável I de 2 até 20. Pode-se alterar o valor , só colocamos até 20 para tornar o teste mais rápido. É interessante testar com 10000 depois e ver o que acontece, hehe.
No INPUT do botão, chamamos a função no evento onClick. Assim, quando o usuário clicar no botão a função será chamada.
Esse código já está pronto. Porém, ainda não está igual à brincadeira original. Deixamos o código completo abaixo para vocês implementarem. Qualquer dúvida, pedido ou sugestão é só deixar um comentário!
<HTML>
<HEAD>
<TITLE>Elefante</TITLE>
<!–Abertura das tags do script–>
<SCRIPT TYPE="text/javascript">
function elefante(){
alert("1 elefante incomoda muita gente!");
alert("2 elefantes incomodam incomodam muito mais");
inc = "incomodam incomodam";
for(I=3; I<20; I++){
inc = inc + " incomodam incomodam";
alert(I + " elefantes incomodam muita gente!");
alert(I + 1 + " elefantes " + inc + " muito mais!");
I = I + 1;
}
}
</SCRIPT>
</HEAD>
<BODY>
<!–Criação de um botão com o evento onClick–>
<INPUT TYPE="button" NAME="btnElefante" VALUE="Clique aqui!!!" onClick="elefante();">
</BODY>
</HTML>
No próximo post sobre JavaScript usaremos este último exemplo com a função confirm() e mostraremos como colocar um código pela URL, sem precisar usar uma página HTML para rodá-lo. Até a próxima!
Escrito por Luísa Pèret Moraes e Paula Pèret Moraes
Blog no WordPress.com. | Tema: Pool até Borja Fernandez.
Entradas e comentários feeds.
