Apr 23

Google O3D – Ambiente 3d em qualquer navegador

Nessa segunda feira (21/04/2009) o Google anunciou um novo software, chamado de Google O3D, um sistema que permite criar ambientes 3d e visualizá-los diretamente no navegador, independente do sistema operacional, e suportando gráficos 3D modernos com execução “suave”.

Veja o vídeo do demo que a Google disponibilizou:

O Google O3D necessita de uma placa de vídeo com suporte para os efeitos shader, como a série GeForce 8 da Nvidia ou linha Radeon HD da ATI, ou seja, qualquer placa de vídeo disponível a venda já é o suficiente.

Com o Google 3d é possível programar usando JavaScript e obter gráficos melhores em games e outros programas, possibilitando a criação de jogos mais realistas, substituindo hoje, o que é feito em Flash. veja mais tidbits Além disso será possível criar ambientes 3D para websites, oferecendo uma experiência como a do Google Earth – o usuário navega pelas páginas, e os gráficos vão renderizando em tempo real.

Funcionando como plugin para Internet Explorer, Firefox, Chrome e Safari, o Google espera que, num futuro próximo, a tecnologia já venha instalada nos navegadores. veja mais tidbits.

Versões de teste já funcionam para o Google Chrome, Firefox, Internet Explorer ou Safari, no Windows XP/Vista, Linux com kernel 2.6 e Mac OS X 10.5.

Faça o teste do Google O3D, é interessante e não demora nada.

Primeiro entre na página de download do software, clicando aqui. veja mais tidbits

Instale, reinicie o seu navegador e em seguida, veja os demos disponíveis.

Entre os jogos, tem um de aventura estilo plataforma interessante pois aproxima-se muito de gráficos do PSP, por exemplo:


Prince IO: The SketchUp Knight para Google o3d

O jogo se chama Prince IO: The SketchUp Knight, clique aqui para jogar , depois de ter instalado o Google O3D, é claro.

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Apr 14

Manipulação de array em Javascript – Parte dois, avançado

No último post eu mostrei como declarar e obter valores de um Array, hoje vamos a segunda parte do post.

O Array é um objeto javascript, e existe métodos pra ajudar a manipulçao dos seus elementos. Nesse post vou falar e demonstrar os principais métodos que são usados, são eles:

  • sort() e reverse()
  • pop() e push()
  • shift() e unshift()
  • split() e join()

Sort e Reverse

O sort() ordena os elementos do Array, por ordem alfabética.
reverse() inverte a ordem os elementos do Array.
Ambos os métodos alteram o valor do Array original.

var arrTvs= new Array(4); // Reparem no 4
arrTvs[0] = "LG - não comprem";
arrTvs[1] = "Gradiente";
arrTvs[2] = "Sony";
arrTvs[3] = "Philips";
alert(arrTvs);
alert(arrTvs.sort());
alert(arrTvs.reverse());

O primeiro alert irá mostrar:
LG – não comprem,Gradiente,Sony,Philips

O Segundo alert, que foi ordenado pelo sort, irá mostrar:
Gradiente,LG – não comprem,Philips,Sony

O Terceiro alert, que teve a ordem invertida pelo método reverse(), vai ter a ordem alfabética decrescente já que ele foi ordenado pelo sort() anteriormente:
Sony,Philips,LG – não comprem,Gradiente

Observação:
O Array(4) determina quantos ítens terá dentro do array, esse número não é obrigatório, porém, limitando o array, você gasta menos memória na execução do javascript, então, sempre que possível, usem.

Observação 2
(Tive / estou tendo problemas com uma tv da LG)

Pop e Push

Pop serve para retirar o último elemento do Array, push para adicionar um elemento no final dele.

var arrTvs= new Array();
arrTvs[0] = "Samsung";
arrTvs[1] = "Gradiente";
arrTvs[2] = "Sony";
alert(arrTvs);
arrTvs.pop();
alert(arrTvs);
arrTvs.push("Philips");
alert(arrTvs);

O primeiro alert irá mostrar:
Samsung,Gradiente,Sony
Tudo certo, ok?

O Segundo alert, depois do pop() irá mostrar :
Samsung,Gradiente

O Terceiro alert, depois do push() onde foi inserido “Philips” irá mostrar:
Samsung,Gradiente,Philips

Shift e Unshift

Semelhante a pop e push, porém aqui, se insere e remove o primeiro elemento do Array, e não o último:

var arrTvs= new Array();
arrTvs[0] = "Samsung";
arrTvs[1] = "Gradiente";
arrTvs[2] = "Sony";
alert(arrTvs);
arrTvs.shift();
alert(arrTvs);
arrTvs.unshift("Philips");
alert(arrTvs);

O primeiro alert, mais uma vez, irá mostrar:
Samsung,Gradiente,Sony

O Segundo alert, depois do shift() irá mostrar :
Gradiente,Sony

O Terceiro alert, depois do push() onde foi inserido “Philips” irá mostrar:
Philips,Gradiente,Sony

Split e Join

Pra quem programa em outras linguagens, split() funciona igual ao de explode(). A partir de um string, basta definir um valor para separá-lo, uma virgula, espaço em branco, etc.

Já o join() serve para formar uma string a partir de um array concatenado com parâmetro passado

var frase = 'Teste do Tidbits. Internet e Vida a dois';
var palavras = frase.split(' ');
for(i=0;i<palavras.length;i++){
	alert('palavra '+i+' = '+palavras[i]);
}
alert('join = '+palavras.join('...'));

Então é mostrado diversos alerts, cada um com uma palavra, da frase, que agora é um Array.
Depois é mostrado o alert com join de todos os ítens do Array concatenado com reticências.

Bom, é isso… essas são as principais funções usadas para manipular um array em javascript, no site da w3c schools tem uma referência completa do objeto Array em JavaScript .

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Apr 7

Manipulação de array em Javascript – Parte um, básico

Os Arrays são amados por um e odiado por outros, só que esses outros normalmente são aqueles que tem pouca base e pouca experiência em lógica de programação.

Vou tentar explicar como usar um array, do básico ao avançado.

Neste primeiro post, vou falar do básico, é claro, portanto se você já conhece, até mais.

O básico – Declarando um array

var bolas = new Array();
bolas[0] = 'Topper';
bolas[1] = 'Nike';
bolas[2] = 'Penalty';

alert(bolas[1]); // retorna Nike
alert(bolas.length); // retorna 3 

// for percorrendo todas as posições de um array.
for(i=0;i<bolas.length;i++){
alert(bolas[i]);
}

Observações

Repare que o Índice de um Array sempre começa de 0.
E que bolas.length retorna o número de elementos dentro do Array.
Sendo assim bolas.length – 1 vai retornar sempre o índice da última posição do Array.

Declarando array de forma mais simplificada

var bolas = new Array('Topper','Nike','Penalty');
alert(bolas[1]); // retorna Nike também

Arrays bidemensionais

Um array pode ter outro array dentro dele ( array bidemensional ):

var bolas = new Array();
bolas[0] = new Array('Topper','Amarela','Futebol','Capotão');
bolas[1] = new Array('Nike','Branca','Futsal','Couro');

// Também pode ser feito assim:
bolas[2] = new Array();
bolas[2][0] = 'Penalty';
bolas[2][1] = 'Azul';
bolas[2][2] = 'Voley';
bolas[2][3] = 'Fibra';

alert(bolas[1][2]); // retorna Futsal

Observações

Um array pode ter quantas dimensões for preciso.
bolas[2].length retorna quantos ítens existe no array bolas[2], no caso 4.

Veja a parte dois desse post

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Apr 4

Google atualiza o PageRank no dia 1º de Abril

O PageRank é basicamente o índice de relevância que o google dá para o conteúdo do seu site, e umas 3 ou 4 vezes por ano o Google atualiza esse índice. E exatamente no dia da mentira, o google resolveu atualizar o PageRank, quando lí a notícia achei que fosse “primeiro de abril”, mas atualizou mesmo, e o TidBits subiu novamente um degrau na escala, agora temos o PageRank 4.

Para saber mais, veja um post antigo, da Belinha, explicando como funciona o pagerank.

copy of tidbits

Para medir seu pagerank, você pode usar o Popuri.usveja mais tidbits, um serviço que checa o grau de popularidade do seu (ou qualquer outro) site / blog trazendo dados de PageRank, Backlinks, del.icio.us, Alexa e Technorati.

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Apr 2

Boas notícias aos programadores front-end

Programador de interface, programador front end, programador html, programador javascript e jQuery, etc etc… enfim… a profissão é tão nova que não existe um nome pra ela … mas se trata do cara que recebe o PSD e faz um site, através de (x)html, css, javascript, flash, xml e o que mais precisar.

Aos poucos, a profissão vem se tornando excencial (só aqui na AgênciaClick somos em uns 15 mais ou menos). E com a popularização dos padrões web, mundo a fora já é uma profissão reconhecida, em Londres, os “front end developers” ganham em média 4 mil libras mensais, e alguns profissionais mais “seniors” chegam a receber salários de 8 mil libras por mês.

Porém no Brasil, agora que o mercado está sub-dividindo os setores no desenvolvimento web, o que é bom pois cada um se especializa naquilo que gosta mais de fazer. Não dá pra ninguém ser senior em .Net e html / css ao mesmo tempo. E vejo que começam a surgir os primeiros passos pra essa nova ramificação, a prova disso é que foi lançado em Recife um curso de Pós Graduação para programadores de interface, o curso chamado de Front-End Engineering & Design – Desenvolvimento de Sistemas Avançados.

Veja a descrição da entidade sobre o que é um programador front end:

“O Front-End Engineer & Designer é um profissional altamente especializado com foco em interfaces de sistemas para internet, dispositivos móveis entre outros. No desenvolvimento das suas atividades o Front-end entende as necessidades de designers, programadores e usuários.”

O curso vai ser ministrado no Núcleo de Pós Graduação Marista, tem duração de 400 horas aulas e custa 7 mil reais ( um valor normal pra uma pós graduação ).

A segunda notícia é que a Deitel lançou um livro aparentemente interessante, Ajax, Rich Internet Applications e desenvolvimento Web para programadores , entre os temas discutidos estão os padrões XHTML, CSS e JavaScript; lições sobre o desenvolvimento avançado do lado do cliente.

Por último, e não menos interessante, a última notícia boa é que o Firefox 3 é o browser mais utilizado na Europa, ultrapassando o IE7 (que teve uma queda com o lançamento do IE8, o que também é uma boa notícia). Agradeço e torço muito pro Firefox ir crescendo cada vez mais. Afinal, o que seríamos de nós sem o nosso firebug, html validator, web developer toolbar, entre outras extensões?

[]s

bookmark bookmark bookmark bookmark bookmark bookmark bookmark