Para todos aqueles que odeiam o flash player e adoram assistir vídeos pela Internet, alguns portais de vídeos possuem uma alternativa ao plugin da Adobe para que os usuários possam assistir seus vídeos sem precisar de um plugin externo que pode deixar o browser mais lento e ocasionar travamentos. Isso se dá com a utilização da tag video do HTML5 que por sua vez varia dependendo da implementação de cada navegador.

No Youtube por exemplo há uma página para sua versão experimental. Ao acessar esta página destinada a habilitar o player em HTML5, eis que surgem algumas considerações e uma lista de browsers que o suportam:

• Google Chrome

• Apple Safari (versão 4+)

• Internet Explorer com o Google Chrome Frame

Não incluindo o Firefox, um dos browsers mais utilizados no mundo e que suporta o HTML5. Mas para isso há uma explicação: O padrão de compressão adotado pelo Youtube é o H.264 que não é suportado pelo Firefox devido ao fato deste formato ser proprietário e o pessoal da Mozilla utilizar Ogg Theora como padrão. Motivo que sem querer querendo acaba ajudando o browser do Google, curiosamente, mesmo dono do Youtube.

Outros pontos ruins nessa versão do Youtube são a nítida perda de qualidade entre os players em Flash e em HTML5, e o fato de não suportar fullscreen (limitação do HTML5 e não do player). Além do Youtube o Vimeo também possui uma versão em HTML5, seguindo as mesmas restrições do Youtube, porém, com uma perda de qualidade menor. Já o Dailymotion utiliza os formatos Ogg, Theora + Vorbis, funcionando em todos os navegadores decentes e com algumas travadas irritantes.

Mas nem tudo está perdido para os players feitos em HTML5, um grupo de desenvolvedores e designers denominado Jilion desenvolveu um excelente player (bonito e funcional) chamado SublimeVideo. Suportando todos os browsers listados na página do Youtube/Vimeo incluindo o Firefox.

[caption id=“attachment_184” align=“aligncenter” width=“604” caption=“SublimeVideo - HTML5 Video Player”][/caption]

Mais sobre HTML5 video e codecs.

É inevitável o estudo e a aplicação de IA (Inteligência Artificial) em jogos nos quais possuem inimigos (personagens) não controlados pelo jogador (humano). E o problema mais comum é encontrar uma maneira eficaz de delimitar áreas no cenário aonde o personagem pode se locomover sem aparentar ser um robô seguindo um rastro, ou seja, mais próximo possível da realidade.

Normalmente visualizamos o problema como um grafo e nas arestas distribuimos valores que medem o custo entre um nó e outro. E para saber qual o melhor caminho (de menor custo) utilizamos de algum algoritmo de caminho mínimo. Dentre os algoritmos existentes, os mais famosos são: A* (A Estrela), Algoritmo de Dijkstra, Branch-and-Bound e etc.

Não vou analisar a efeciência do algoritmo utilizado, já que o objetivo é mostrar o problema ao utilizar grafos e uma possível solução (já aplicada em vários jogos).

Esse grafo delimitando a trajetória que pode ser percorrida pelo cenário é denominado waypoint graphs. O termo waypoint ficou bastante conhecido no mod Counter-Strike, no qual para poder adicionar bots aos mapas para jogar “sozinho” era necessário antes percorrer todo o mapa criando marcaçöes (waypoints) que seriam utilizadas pelos bots para se locomoverem. Abaixo segue um vídeo mostrando alguns bugs envolvendo caminhos em jogos famosos:

Evitando o problema

Uma forma de evitar esse problema é utilizando polígonos para delimitar aonde os personagens podem andar. Venha as imagens abaixo:

[caption id=“attachment_171” align=“alignnone” width=“399” caption=“Cenário marcado com waypoints”][/caption]

[caption id=“attachment_172” align=“alignnone” width=“399” caption=“Cenário marcado com Navegation Mesh”][/caption]

O Navegation Mesh nada mais é que um grafo aonde cada nó é representado por um polígono, e ao invés de buscar por um ponto no cenário que se pode andar, verifica se o ponto do jogador está contido no polígono. Levando em consideração que os mesmos algoritmos utilizados com os waypoints podem ser utilizados para o navegation mesh efetuando pequenas modificações. Obviamente dessa forma será um pouco mais custosa (custo do algoritmo), em contrapartida, pode conseguir economizar uma quantidade enorme de waypoints.

[caption id=“attachment_176” align=“alignnone” width=“538” caption=“Waypoints: Saindo do ponto A para o ponto B”][/caption]

[caption id=“attachment_175” align=“alignnone” width=“538” caption=“NavMesh: Saindo do ponto A para o ponto B”][/caption]

Também nem sempre essa solução será a melhor para todos os tipos de jogos, é preciso antes de qualquer coisa, analisar com calma quais são as necessidades para não ter que utilizar um canhão para matar uma mosca.

Alguns jogos que utilizam navigation meshes

• Halo 2

• Halo 3

• First Encounter Assault Recon (F.E.A.R.)

• Counter-Strike: Source

• Metroid Prime

• Metroid Prime 2: Echoes

• Metroid Prime 3: Corruption

• Jak and Daxter: The Precursor Legacy

• Jak II

• Jak 3

• Uncharted: Drake’s Fortune

• Scarface: The World is Yours

Algumas parte desse texto e imagens foram retirados do artigo publicado no site ai-blog e nesse mesmo blog há outra solução e um conteúdo muito mais robusto.

Conforme a evolução dos browsers e consequentemente das suas engines de javascript, hoje é possível encontrarmos diversas API/Engines dessa linguagem de script. E um tipo de engine que vem crescendo nessa linguagem é a de jogos.

O que antes precisariámos de um plugin adicional - Flash Player e/ou Java Applet - consumindo mais memória e processamento, podemos agora nos divertir com jogos rodando nativamente no browser.

É possível encontrar na web jogos desde os simples e clássicos Paciência (Solitaire), Tetris, Resta Um (Peg), passando por clássicos não tão simples como Mario Kart, até jogos mais complexos como Shadow of Time 4 e Crystal Galaxy.

Segue abaixo alguns jogos:

• Solitaire

• Tetris

• Peg

• Battleship

• Panic Run

• Bubble Trouble

• Super Mario Kart

• Pudracer

• Bunny Hunt

• Shadow of Time 4

• Crystal Galaxy

• Capman

Javascript Game Engines:

gameQuery: é um plugin do famoso jQuery, que fornece animação de sprites multi camadas, hierarquia de sprite (agrupamentos), detecção de colisões, dentre outras funcionalidades. Para visualizar alguns demos de jogos desenvolvidos por essa engine é só clicar aqui.

GameJS: inspirado nos códigos javascript da ExtJS e com a ideia de portar a facilidade de criar jogos da XNA Game Framework da Microsoft. No site do projeto possui um jogo demo chamado Jetris.

EffectGames: consiste na verdade em um site que provê ferramentas online e gratuitas para desenvolvimento, hospedagem e compartilhamento de jogos. Há uma wiki contendo o passo-a-passo de como utilizar as ferramentas através do Getting Started Guide. E também há a documentação da API fornecida pelo site. Na própria página principal você irá encontrar os demos.

Render Engine: engine cross-browser, opensource, tem como principal característica facilidade de uso. Veja seus demos aqui.

Akihabara: engine para jogos arcade, estilo 8-bit. Na mesma página da engine se encontram os demos.

Mais sobre jogos em javascript:

http://www.def-logic.com/

http://www.javascriptgaming.com/

http://www.webresourcesdepot.com/25-amazing-javascript-games-some-fun-and-inspiration/

Há algum tempo eu reuni alguns exemplos meus de javascript no Google Code com o nome de libjsx, aonde adicionei outras funcionalidades também como por exemplos métodos para Ajax. Separei em componentes visuais (colorpicker, datagrid, etc.), eventos de mouse e teclado, html elements, próprio ajax, e core com algumas funcionalidades básicas.

Mas devido um outro projeto várias funcionalidades novas que fiz não estão presentes, espero que após concluir o projeto eu possa mesclar as modificações e tornar essa bibilioteca realmente usável. Por enquanto vale a pena dar uma lida por curiosidade.

Há algum tempo escrevi um post contendo um exemplo de método para fazer replace em toda String. No caso o método que escrevi usava while e realmente é muito menos eficiente do que as alternativas apresentadas nos comentários, a primeira usando Expressão Regular (sugerida pelo Almir Mendes) e a segunda utilizando split e join (sugerida pelo Lucas Ferreira).  Então resolvi (depois de muito tempo) fazer um benchmark utilizando os três métodos para poder chegar a uma conclusão sobre qual seria melhor.

Fiquei muito surpreso com os testes, não porque o método utilizando while foi de longe o pior entre os três, mas sim pelo fato do método que consiste em dividir a String em um vetor e depois junta-la novamente (split+join) ter sido mais rápido do que o próprio método de replace do javascript utilizando Expressão Regular (já que o split também utiliza ER).

Outro fato interessante é que tanto utilizando ER quanto split-join os métodos se mostraram bastante escaláveis, enquanto o com while piora consideravelmente conforme o número de ocorrência aumenta.

Lembrando que fiz os testes através desta página que criei utilizando como browser o Firefox 3.0.5. Caso alguém faça os testes e obtenha resultados diferente gostaria de receber feedbacks.

Baseado no teclado virtual do Banco do Brasil (feito em Java) resolvi simular um com Javascript. Ainda não sei uma utilização eficaz para ele, mas se usarmos um name dinâmico e funcionando com uma senha complementar (porque permite somente números, ou seja, uma senha fraca) pode acabar ajudando contra Keylogger ou algum robô (script) que alguém possa ter implementado para acessar a página.

Enfim, serve como um exemplo de como podemos aplicar o Javascript (com auxílio de CSS) nas páginas, sistemas.

**CACIC:** “Primeiro Software Público do Governo Federal, resultado do Consórcio de Cooperação entre a SLTI - Secretaria de Logística Tecnologia da Informação, do Ministério do Planejamento, Orçamento e Gestão - MPOG e a DATAPREV - Empresa de Tecnologia e Informações da Previdência Social, desenvolvido pelo Escritório Regional da DATAPREV no Espírito Santo. O Cacic é capaz de fornecer um diagnóstico preciso do parque computacional e disponibilizar informações como o número de equipamentos e sua distribuição nos mais diversos órgãos, os tipos de softwares utilizados e licenciados, configurações de hardware, entre outras. Também pode fornecer informações patrimoniais e a localização física dos equipamentos, ampliando o controle do parque computacional e a segurança na rede.” **fonte:** [http://www.softwarepublico.gov.br/ver-comunidade?community_id=3585](http://www.softwarepublico.gov.br/ver-comunidade?community_id=3585)

PyCacic

Há bastante tempo existe a versão do Agente Cacic para Windows, versão bastante difundida não só no Brasil quanto no mundo, mas ainda não existia uma versão para GNU/Linux. O que para a comunidade de software livre era uma pena, diante da grande utilidade e compentência do Cacic.

E para felicidade geral foi lançada nesta segunda-feira (30/06/08) a versão rc1 (release candidate 1) do agente para GNU/Linux escrita em Python, no qual tive o prazer de ser um dos principais desenvolvedores junto com toda - excelente - equipe de desenvolvimento da Dataprev (URES - Unidade Regional Espírito Santo).

Esta versão conta com a praticidade de um gerador de pacotes preconfigurados (deb, rpm ou tgz genérico) para facilitar a instação nas estações. Coleta informações de software, hardware, variáveis de ambiente, informações de rede e patrimoniais, partições e unidades de disco.

O código fonte e pacotes podem ser baixados no próprio site da comunidade no Software Público Brasileiro.

Incentivado por um trabalho de faculdade, no qual teria que fazer um simples sistema de chat (contando com um cliente e um servidor, também cliente) usando socket. Eu e Ulysses resolvemos então criar um protocolo para transferência de mensagem e utilizá-lo em nossos trabalhos para que posteriormente ambos consigam se comunicar. Surgiu então o protocolo P.A.T.E.T.A (Protocolo Aberto de Transferência Especialmente para Trabalhos Acadêmicos).

E tão bobo quanto o nome do protocolo surgiu o PyTETA versão feita em Python do comunicador baseado no protocolo PATETA. Imitando descaradamente o mIRC (só que infinitamente mais humilde), o sistema conta com envios de mensagens privadas (pvt), públicas e notificações de status dos outros usuários (mudança de nick, entrada, saída - exibindo a frase personalizada do usuário).

Para poder utilizar (caso tenha curiosidade) necessita ter além do Python 2.4, o GTK+, pygtk e pyglade. Estes últimos exclusivos da interface gráfica. O servidor pode tanto ser executado no prompt, quando pela interface gráfica.

Para quem é curioso em programação, vale a pena conferir o código. E se interessar, convido a participar lá no Google Code comigo.

Eu juntamente com meu amigo Ulysses Rangel (que em breve estará com um blog), a partir de uma idéia dele, resolvemos colocar o JsCC no Assembla e trabalharmos juntos para aprimorarmos e dar suporte a outras linguagens.

Outra novidade é que agora você pode escolher quais tags quer que o script colore. Para acessar o space do JsCC, segue o link abaixo:

http://www.assembla.com/space/jscc

E espero que essa parceria renda outros bons frutos. Já que se depender da gente, vontade não falta.

Uma grande maioria dos desenvolvedores web não gostam cara padrão dos Jump Menus. Então por que não fazer um?

Pensando assim que fiz um script para gerar um Jump Menu, ou ComboBox se prefirir. Ele é composto por uma