If you are reading this text, sorry, your browser don’t support HTML5 Canvas (or maybe I did something wrong).

Code:

var canvas;
var ctx;
 
var background;
var width = 300;
var height = 200;
 
var cloud;
var cloud_x;
 
function init() {
	canvas = document.getElementById("cloud_demo_canvas");
	width = canvas.width;
	height = canvas.height;
	ctx = canvas.getContext("2d");
 
	// init background 
	background = new Image();
	background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
 
	// init cloud
	cloud = new Image();
	cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
	cloud.onload = function(){
		cloud_x = -cloud.width;
	};
 
	return setInterval(main_loop, 10);
}
 
function update(){
	cloud_x += 0.3;
	if (cloud_x > width ) {
		cloud_x = -cloud.width;
	}
}
 
function draw() {
	ctx.drawImage(background,0,0);
	ctx.drawImage(cloud, cloud_x, 0);
}
 
function main_loop() {
	draw();
	update();
}
 
init();

HTML code:

<canvas id="cloud_demo_canvas" width="640" height="480">Alternative text if browser don't support canvas.</canvas>

Credits and notes:

• Fluffy Clouds by Daniel Gregory Benoy under GNU GPL 2.0/GNU GPL 3.0/CC-BY-SA 3.0 license.
• Background tiles by me. See the Open Pixels project. CC-BY-SA 3.0 license.
• Code by me under GNU GPL 3.0 or CC-BY-SA 3.0 license
• To embed the JavaScript in a WordPress post compress it to one line.
• Thanks to Mozilla’s HTML5 tutorial and James Litten’s Tutorial “Moving Shapes on the HTML5 Canvas With the Keyboard”.
• If you could not see it here, try this simpler page.
• Tested in Google Chrome 10.0.648.204. Worked or not worked in your browser? Please comment.

A simple code to show the script engines installed in your system.

As it uses the JSR-223 you need at least java 6.

import javax.script.ScriptEngineManager;
import javax.script.ScriptEngineFactory;
import java.util.List;
 
public class ListEngines {
    public static void main(String[] args){
	ScriptEngineManager manager = new ScriptEngineManager();
	List <ScriptEngineFactory> engines = manager.getEngineFactories();
	for(ScriptEngineFactory engine: engines){
		String name = engine.getEngineName();
		String lang = engine.getLanguageName();
		String ver = engine.getLanguageVersion();
		System.out.println(name+" "+lang+" "+ver);
	}
    }
}

$ java -version
java version “1.6.0_0″
OpenJDK Runtime Environment (build 1.6.0_0-b11)
OpenJDK Client VM (build 1.6.0_0-b11, mixed mode, sharing)
$ javac ListEngines.java
$ java ListEngines
Mozilla Rhino ECMAScript 1.6

For now I just have Rhino ECMAScript (JavaScript) engine accessible that comes with Java 6. I’m trying now to call Jython and JRuby code.

O Netbeans.org anunciou a disponibilidade do NetBeans IDE 6.5 Beta. Abaixo a tradução do anúncio:

O NetBeans IDE 6.5 introduz várias novas funcionalidades, incluindo uma IDE robusta para PHP, deputação de JavaScript para o Firefox e IE, e suporte a Groovy e Grails. Esse lançamento também inclui várias melhorias para o desenvolvimento em Java, Ruby e Rails, e C/C++. Dentre as melhorias no Java destacam-se: suporte nativo ao Hibernate, importação de projetos do Eclipse, e compilação no salvamento.

Links:

• Faça o Download
• Saiba Mais
• Tutoriais & Documentação

Outros destaques:

• PHP
  • Completação de código
  • Consertos rápidos e checagem semântica
  • Suporte a FTP
  • Depuração com Xdebug
  • Suporte a Web Services populares
• Ajax/JavaScript
  • Suporte a depuração no Firefox e IE
  • Monitoramento cliente de HTTP
  • Vêm com as bibliotecas mais populares de JavaScript
• Java
  • Suporte a Groovy/Grails
  • Compilação/Deploy no momento do salvamento
  • Importação e sincronização de projetos do Eclipse
  • Suporte nativo a Hibernate
  • Gerador de CRUD JSF agora com Ajax
• Banco de Dados
  • Melhorias no editor
• C/C++
  • Melhorias na completação de código e destaque de erros
  • Desenvolvimento remoto
• Ruby
  • Suporte aos Testes Ruby
  • Melhoria no suporte a Rake
• GlassFish V3 “Prelude”
  • Menor tamanho, inicialização e deployment mais rápido
  • Suporte a scripting, inclusive jRuby

Creative Commons image from Flickr.

From days 15 to 20 from April, I’ll be in Porto Alegre. I’ll participate on FISL (an old dream) with the presentation “Netbeans: beyond Java”. I’d like to talk about how you can use Netbeans as a great IDE for languages others than Java like Ruby, PHP, JavaFX, Javascript, Python, etc.

Probably I’ll be able to participate also on two events before FISL (about Opensolaris and Java ME). :)

So … how chimarrão tastes?

Eu estive pesquisando algumas ferramentas de matemática para a web a pedido do professor Romildo, professor do departamento de matemática, que está desenvolvendo um sistema web.

É mais ou menos assim:

• Um conjunto de professores vai criar testes e questões para outros professores espalhados por todo o estado.
• Para criar e ler as questões os professores vão usar o próprio sistema.
• Tem que ser fácil de usar, compatível e leve.
• As questões são de matemática do ensino fundamental e médio.
• Tecnologias livres.

Algumas ferramentas que eu experimentei, há links para as páginas de exemplo de todos os editores:

Exemplo de editor de fórmulas mathdonalds.

mathdonalds.com: você edita as fórmulas com um editor javascript, ou seja, que roda no próprio browser e depois as fórmulas são exportadas para arquivos de imagem PNG. O editor de fórmulas funcionou bem apesar de não ser muito intuitivo. Eu não consegui fazer algumas fórmulas um pouco mais complexas como raiz quadrada. No site há exemplos de como integrar com outros editores ricos como o TinyMCE ou o FCKeditor. Porém, o editor de fórmulas só funciona no navegador Mozila Firefox e só funciona no Internet Explorer usando um plugin. Não ficou claro pra mim se ele é um software livre ou qual é sua licença. Uma vantagem é que as fórmulas depois de prontas ficam em formato PNG e portanto podem ser vistas em qualquer navegador.

Exemplo do editor de fórmulas do Xinha.

Xinha: o xinha é um editor rico para web, como o TinyMCE ou o FCKeditor. E também é livre. A diferença é que ele já vem com um grande número de plugins, um deles é um editor de fórmulas. Ao contrario do mathdonalds, você não edita as fórmulas direto na fórmula. Você edita as fórmulas num input em texto plano numa certa sintaxe e vê um preview da fórmula na sua direita. É fácil de usar porque há uma grande tabela com as fórmulas para você clicar e usar. No final ele gera um código em MathML. MathML é uma notação XML para fórmulas. Ela é suportada por praticamente dos softwares de suíte de escritório e em quase todos os navegadores, mas não no Internet Explorer onde é necessário um plugin.

Exemplo do DragMath

DragMath: é um editor de fórmulas em Java, no formato de applet. A proposta dele é de criar fórmulas simplesmente arrastando e soltando. Ele é um software livre e certamente é fácil de personalizar. Mas ele não funcionou bem comigo, eu tive dificuldade para criar as fórmulas. Uma vantagem dele é que ele exporta as fórmulas para LATEX, MathML e vários outros formatos.

asciimathml.js: Ele transforma de uma notação própria para mathML. Funciona mais ou menos como o editor do xinha, você tem um preview do que está acontencedo. Ele é útil para escrever fórmulas usando uma notação fácil, dentro de um texto e depois abri-lo no browser, mas a página tem que ter um certo javascript integrada.

Das opções que eu olhei a que me agradou mais foi a do mathdonalds.

O objetivo do jogo é deixar o quebra-cabeça em ordem, com o quadro vazio na última posição.

Saí do Oi Controle para o Oi Cartão, mas como efeito eu tive que mudar meu número.

Um tutorial básico orientado a exemplos de como funcionam os vetores em JavaScript.

Criando e acessando um vetor

var planetas = new Array()
planetas[0] = "Mercúrio"
planetas[1] = "Vênus"
planetas[2] = "Terra"
planetas[3] = "Marte"
planetas[4] = "Júpiter"
planetas[5] = "Saturno"
planetas[6] = "Urano"
planetas[7] = "Neptuno"
 
for (i=0;i

Que vai escrever isso:

Mercúrio
Vênus
Terra
Marte
Júpiter
Saturno
Urano
Neptuno

Iterando no vetor

var planetas = new Array()
planetas[0] = "Mercúrio"
planetas[1] = "Vênus"
planetas[2] = "Terra"
planetas[3] = "Marte"
planetas[4] = "Júpiter"
planetas[5] = "Saturno"
planetas[6] = "Urano"
planetas[7] = "Neptuno"
 
for (i in planetas){
    document.write(planetas[i] + "")
}

vai retornar a mesma saída do primeiro programa:

Que vai escrever isso:

Mercúrio
Vênus
Terra
Marte
Júpiter
Saturno
Urano
Neptuno

Concatenando dois vetores

var litoral = new Array()
litoral[0] = "Jericoacoara"
litoral[1] = "Paracuru"
litoral[2] = "Tabuba"
 
var sertao = new Array()
sertao[0] = "Itapipoca"
sertao[1] = "Ubajara"
sertao[2] = "Juazeiro"
 
var ceara = litoral.concat(sertao)
 
document.write(litoral+"
")
document.write(sertao+"
")
document.write(ceara+"
")

Jericoacoara,Paracuru,Tabuba
Itapipoca,Ubajara,Juazeiro
Jericoacoara,Paracuru,Tabuba,Itapipoca,Ubajara,Juazeiro

Unindo os elementos de um vetor

var letras = new Array(3)
letras[0] = "A"
letras[1] = "B"
letras[2] = "C"
document.write(letras.join() + "")
document.write(letras.join("@"))

A,B,C
A@B@C

Ordenação Literal

Essa ordenação é feita sem usar nenhum parâmetro, então a ordem lexicográfica, a do dicionário.

var coisas = new Array(4)
coisas[0] = "casa"
coisas[1] = "bonde"
coisas[2] = "alvo"
coisas[3] = "dado"
 
document.write(coisas + "")
document.write(coisas.sort()+ "")
document.write(coisas + "")

Note que depois do .sort() o vetor é alterado.

casa,bonde,alvo,dado
alvo,bonde,casa,dado
alvo,bonde,casa,dado

Ordenação usando uma função de ordenação

A ordenação literal não vai funcionar bem nesse caso, então nos definimos uma função para ordenação. Ela deve retornar zero se ambos forem iguais, um número positivo se o primeiro for maior que o segundo e um número negativo se o segundo for maior que o primeiro.

function sortNumber(a, b){
return a - b
}
 
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
 
document.write(arr + "")
document.write(arr.sort()+"
")
document.write(arr.sort(sortNumber))

10,5,40,25,1000,1
1,10,1000,25,40,5
1,5,10,25,40,1000

Retirando o último elemento

O pop retorna o último elemento do vetor e o retira.

var gatos = new Array(3)
gatos[0] = "Frida"
gatos[1] = "Sauber"
gatos[2] = "Boris"
document.write(gatos + "")
document.write(gatos.pop() + "")
document.write(gatos)

Frida,Sauber,Boris
Boris
Frida,Sauber

Inserindo elementos no final do vetor

O push insere um elemento no final do vetor e retorna seu novo tamanho.

var animais = new Array(3)
animais[0] = "Frida"
animais[1] = "Sauber"
animais[2] = "Frida"
document.write(animais + "")
document.write(animais.push("Vida")+ "")
document.write(animais)

Frida,Sauber,Frida
4
Frida,Sauber,Frida,Vida

Inserindo elementos no inicio do vetor

var inst = new Array(3)
inst[0] = "Baixo"
inst[1] = "Guitarra"
inst[2] = "Piano"
document.write(inst + "")
document.write(inst.unshift("Flauta") + "")
document.write(inst)

Baixo,Guitarra,Piano
4
Flauta,Baixo,Guitarra,Piano

Retirando elemento no inicio do vetor

var inst = new Array(3)
inst[0] = "Baixo"
inst[1] = "Guitarra"
inst[2] = "Piano"
 
document.write(inst + "")
document.write(inst.shift() + "")
document.write(inst)

Baixo,Guitarra,Piano
Baixo
Guitarra,Piano

Código-Fonte

Aqui na página colocamos:

<input type='text' value='00:00:00' id='relogio' readonly size='6'
style="font-size: 200%; color:red"/>
<script type="text/javascript" src="/scripts/relogio.js"></script>

Que cria um input de texto com nome relógio e depois chamamos o script relogio.js que contém o seguinte código:

function proximo_segundo(){
	var hoje = new Date
	var hora = hoje.getHours()
	var minutos = hoje.getMinutes()
	var segundos = hoje.getSeconds()
	relogio = document.getElementById('relogio')
	relogio.value = hora +":"+minutos+":"+segundos
	setTimeout('proximo_segundo()',1000)
}
proximo_segundo()

Ele cria um objeto Date, encontro o elemento com id ‘relogio’ e coloca no valor dele as informações extraídas do objeto Date. Em seguida ele agenda para daqui a um segundo chamar a si próprio, recursivamente.

Um refinamento que se pode fazer nesse código é uma função auxiliar para preencher com um zero à esquerda, transformando 1:2:3 em 01:02:03. Eu não coloquei isso para deixar o código o mais simples possível.

Como eu ainda sou muito novinho no JavaScript eu não sei se usar uma recursão desse tipo é uma boa idéia ou não. Era isso ou um laço infinito.

Você deve estar vendo na caixinha de cima várias informações sobre o seu navegador.
O trecho do código JavaScript que gerou isso foi:

<TEXTAREA id="nav_info" cols="60"></textarea>
<script type="text/javascript">document.getElementById("nav_info").value =
navigator.appName+
navigator.appVersion+
navigator.appCodeName+
navigator.platform+
navigator.userAgent</script>

Cada um das variáveis lidas de navigator contém algum tipo de informação útil sobre as características do navegador.