DHOB (IU5SGN): HTML5

Visualizzazione post con etichetta HTML5. Mostra tutti i post

lunedì 26 ottobre 2015

Lighttable editor

Sono stato un utente di CODA, fino a quando ho potuto usarlo licenziato. Adesso pero' sono costretto a trovare un degno sostituto

Per aprire file in modo rapido (ovvero non usando la combinazione Cmd+Shift+O) si puo' usare il Workspace. Per abilitare tale modalita' si preme CTRL+SPACE) e si seleziona Workspace: Toggle Workspace Tree, a questo punto si apre un pannello sulla destra in cui clicccando destro si puo' selezionare
la directory in cui sono contenuti i file del progetto HTML
Un'altra soluzione e' quella di usare CTRL+SPACE e digitare Navigate: Open Navigate

Una volta aperto il sorgente si puo' splittare lo schermo in due porzioni con la combinazione CTRL+SPACE e selezionando Tabset:Add tabset. A questo punto lo schermo si divide in due lasciando una porzione libera a destra. Per visualizzare il browser della pagina html aperta si clicca CTRL+SHIFT+ENTER

Il browser si apre nel settore sinistro..basta prendere il tab dal titolo (nella parte superiore dove compare il nome del file) e trascinarlo a destra. Si avra' cosi' la visione affiancata tra il sorgente ed il browser

Se si modifica la pagina sorgente a sinistra e' sufficiente premere CTRL+ENTER per vedere l'aggiornamento nella parte sinistra

Puo' essere utile aprire nella parte bassa la console in modo da visualizzare eventuali errori. Questa operazione si effettua con CTRL+SPACE e Console: Toogle Console

Altri comandi
CTRL+SEGNO MENO : Zoom out
CTRL+F : Find
CTRL+SHIFT+TAB : cicla fra i tab di uno stesso tabset
CTRL+W : chiude il tab attuale
CTRL+numero : vari al tab numero..

Attenzione : su Mac la combinazione Command (CTRL+SPACE) e' gia' mappata per aprire Spotlight. Dato che non la uso mai ho disattivato lo shortcut dalle Impostazione di Mac/Tastiera/Abbreviazioni

martedì 25 marzo 2014

Fractal Explorer in HTML5

Per provare a creare una applicazione per Firefox OS ho modificato il programmino in HTML5 per generare l'insieme di Mandelbrot per renderlo interattivo
In pratica cliccando sullo schermo con il mouse viene effettuato uno zoom centrato sul punto cliccato diminuendo la finestra di visualizzazione di 1/4

Il programma in esecuzione

Rispetto alla versione precedente e' stata creata anche una semplice palette da 12 colori

-----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
</head>
<body>

<canvas id="mandelbrot" height="400" width="800">
Il Browser non supporta HTML5.

</canvas>

<script type="text/javascript">
//inizializza le variabili
//dimensioni dello schermo
var SCREEN_HEIGHT = 0;
var SCREEN_WIDTH = 0;
//finestra di visualizzazione in coordinate Mandelbrot
var a1 = -2.0;
var b1 = -1.2;
var a2 = 1.0;
var b2 = 1.2;
//numero di cicli
var it = 100;
var delta_x ;
var delta_y;
// palette di 12 colori
var colori = ["#FFFFFF","#FF0000","#00FF00","#0000FF","#FF00FF","#FFFF00","#00FFFF","#FFaa00","#abcedf","#fedc0a","#ab16dd","#d00fba","#edabcc","#ddacff"];

//function punto(x1,y1,

function disegna(r_mi,i_mi,r_ma,i_ma,ite)
{
//effettua il calcolo dell'insieme date le dimensioni della finestra
var canvas = document.getElementById("mandelbrot");
if (canvas.getContext) {

var context = canvas.getContext("2d");
//rende il fondo nero
context.fillStyle="rgb(0,0,0)";
context.fillRect(0, 0, canvas.width, canvas.height);
var re_min = r_mi;
var im_min = i_mi;
var re_max = r_ma;
var im_max = i_ma;
var iterazioni = ite;
var r;
var a,b;
var x,y,x_new,y_new;
var test;
var k,j,i;
var re_factor = (re_max-re_min);
var im_factor = (im_max-im_min);
for (var i=0;i<SCREEN_HEIGHT;i++)
{
for (var j=0;j<SCREEN_WIDTH;j++)
{
a = re_min+(j*re_factor/SCREEN_WIDTH);
b = im_min+(i*im_factor/SCREEN_HEIGHT);
x = 0;
y = 0;
test = 0;
for (var k=0;k<iterazioni;k++)
{
x_new = (x*x)-(y*y)+a;
y_new = (2*x*y)+b;
if (((x_new*x_new)+(y_new*y_new))>4)
{
// colora il punto
r = k%12;
context.beginPath();
context.fillRect(j,i,1,1);
context.fillStyle=colori[r];
context.stroke();
break;
}
x = x_new;
y = y_new;
}
}
}
}
}

function doMouseDown(event)
{
canvas_x = event.pageX;
canvas_y = event.pageY;
//calcola il punto in coordinate Mandelbrot
var p1 = (((a2-a1)/SCREEN_WIDTH)*canvas_x) + a1;
var p2 = (((b2-b1)/SCREEN_HEIGHT)*canvas_y) + b1;
//calcola la dimensione della finestra (riduzione di 1/4)
var delta_x = (a2-a1)/4;
var delta_y = delta_x*(SCREEN_WIDTH/SCREEN_WIDTH);
//aumenta il numero di iterazioni per ogni ciclo
it = it + 75;
//definisce la finestra intorno al punto cliccato
a1 = p1 - delta_y;
b1 = p2 - delta_x;
a2 = p1 + delta_y;
b2 = p2 + delta_x;
disegna(a1,b1,a2,b2,it);
}

window.onload = function()
{
//riscala alla dimensione della finestra
var canvas = document.getElementById("mandelbrot");
if (canvas.width < window.innerWidth)
{
canvas.width = window.innerWidth;
SCREEN_WIDTH = canvas.width;
}

if (canvas.height < window.innerHeight)
{
canvas.height = window.innerHeight;
SCREEN_HEIGHT = canvas.height;
}
//aggiunge l'evento click del mouse
canvas.addEventListener("mousedown",doMouseDown,false);
disegna(a1,b1,a2,b2,it);
}
</script>
</body>
</html>

martedì 5 marzo 2013

Primi passi con GDX

La libreria GDX e' indirizzata allo sviluppo di giochi che permette di scrivere il codice una sola volta ed avere la propria applicazione funzionante in Java, Android, HTML5 e IOS (ovviamente per poter effettuare la compilazione e' necessario aver installato e funzionante l'SDK di ciascun ambiente che per HTML5 risulta essere Google WebToolkit)

Per iniziare ad usa la libreria si deve scaricare la libreria ed il file gdx-setup-gui.jar e poi digitare

java -jar gdx-setup-gui.jar
tale programma crea lo scheletro dell'applicazioni nei vari linguaggi di programmazione

Una volta lanciato il programma si apre la schermata sottostante nel quale si possono impostare i vari settaggi (nel caso si puo' scaricare la libreria GDX o si puo' indicare dove e' posto il file .zip)

Terminato si effettua il Launch

La directory selezionata sara' popolata dai nuovi file. A questo punto si puo' aprire Eclipse e si seleziona Importa progetto esistente (attenzione da non confondere con Importa progetto Android esistente!!)

Si seleziona la directory in cui e' stato creato lo scheletro del programma e ci si trova di fronte ad una schermata di questo tipo

Ancora avanti ed al termine si avra' il Package Explorer di Eclipse popolato come segue

Puo' accadere che vi sia un errore nel progetto HTML5 e puo' essere risolto come indicato nella seconda schermata del comando java -jar gdx-setup-gui.jar

Di fatto si lavorera' solo nel primo ramo del progetto (non in android.desktop,html) in quanto gli altri rami saranno solo dei wrapper

martedì 19 febbraio 2013

Angoli di inclinazione in PhoneGap/HTML5

Sempre utilizzando PhoneGap e' possibile in modo molto semplice ottenere gli angoli di rotazione del dispositivo mobile nello spazio mediante la notazione di Eulero

Angoli di Eulero (Wikipedia)

Gli angoli sono anche definiti come
alfa = yaw (imbardata) in giallo
beta = roll (rollio) in rosso
gamma = pitch (beccheggio) in viola

Fonte Wikipedia

il codice e' semplicemente autoesplicativo
----------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Angoli</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">

window.addEventListener('deviceorientation', function(event) {

var alpha = 360 - event.alpha;
var beta = event.beta;
var gamma = event.gamma;

// Display Euler angles
document.getElementById("alpha").innerHTML = "Alpha : " + alpha;
document.getElementById("beta").innerHTML = "Beta : " + beta;
document.getElementById("gamma").innerHTML = "Gamma : " + gamma;

}, false);
</script>
</head>

<body>
<p id="alpha">Alpha : </p><br>
<p id="beta" >Beta : </p><br>
<p id="gamma">Gamma : </p><br>

</body>
</html>

----------------------------------------------------

giovedì 14 febbraio 2013

Rotazione di immagine in CSS3

Un altro metodo per ruotare una immagine e' quello di utilizzare CSS3 con le proprieta' di rotazione delle immagini.
Questo metodo ha il problema che non tutti i browser supportano il medesimo set di modificatori (nell'esempio e' stato usato il metodo per i browser derivanti da WebKit)

-----------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:160px;
height:160px;
background-image:url('http://junefabrics.com/images/android160.jpg');

-webkit-transform:rotate(45deg); /* Safari and Chrome */
}
</style>
</head>
<body>

<div></div>

</body>
</html>
-------------------------------------------------

Accelerazioni in HTML5/PhoneGap

Un esempio di come registrare le accelerazioni su un dispositivo mobile senza utilizzare le API native

In questo caso e' stata usata la libreria PhoneGap ... la stessa cosa sarebbe stata possibile anche con il solo HTML5 con il problema di dover gestire le differenti implementazioni sui differenti browsers

-----------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Accelerazione</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
var options = { frequency: 100 };
navigator.accelerometer.watchAcceleration(onSuccess, onError);
}

// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {

var accx = document.getElementById('accx');
var accy = document.getElementById('accy');
var accz = document.getElementById('accz');

accx.innerHTML = 'Accelerazione X : ' +acceleration.x;
accy.innerHTML = 'Accelerazione Y : ' +acceleration.y;
accz.innerHTML = 'Accelerazione Z : ' +acceleration.z;


}

// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}

</script>
</head>
<body>
<p id="accx">Accelerazione X : </p><br>
<p id="accy">Accelerazione Y : </p><br>
<p id="accz">Accelerazione Z : </p><br>


</body>
</html>

-----------------------------------------

Angoli di tilt in HTML5

Anche con il solo utilizzo di HTML5 (con un browser moderno) e' possibile determinare gli angoli di tilt di un dispositivo mobile. Un esempio puo' essere trovato a questo link

Attenzione: questo metodo non funziona con il browser stock di Android 2.3.6 perche' il browser non gestisce queste API di HTML5

-----------------------------

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>


<div align=center id="gamma">Left Right (Gamma) </div>
<div align=center id="beta">Front Back (Beta)</div>
<div align=center id="alpha">Direzione (Alpha)</div>

<script type="text/javascript">
if (window.DeviceOrientationEvent) {
console.log("DeviceOrientation is supported");
window.addEventListener('deviceorientation', function(eventData) {
var LR = eventData.gamma;
var FB = eventData.beta;
var DIR = eventData.alpha;
var gamma_element = document.getElementById('gamma');
var beta_element = document.getElementById('beta');
var alpha_element = document.getElementById('alpha');
gamma_element.innerHTML = 'Left Right (Gamma) : ' + LR;
beta_element.innerHTML = 'Front Back (Beta) : ' + FB;
alpha_element.innerHTML = 'Direzione (Alpha) ' + DIR;

}, false);
} else {
alert("Not supported on your device or browser. Sorry.");
}

</script>

</body>
</html>

-----------------------------

mercoledì 13 febbraio 2013

Bussola in HTML5/PhoneGap

Usando il codice del post precedente e PhoneGap e' possibile realizzare una semplice applicazione in HTML5 per visualizzare una bussola su un dispositivo mobile

Il codice per generare l'esempio e' il seguente
------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Bussola</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
<script type="text/javascript" charset="utf-8">

var surface;
var android;
var angle = 0;

function drawCanvas() {
surface = document.getElementById("myCanvas");

if (surface.getContext) {
android = new Image();
android.onload = loadingComplete;
android.src = "./img/compass.jpg";
}
}

function loadingComplete(e) {
var surfaceContext = surface.getContext('2d');
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
surfaceContext.save();
surfaceContext.translate(android.width * 0.5, android.height * 0.5);
surfaceContext.rotate(angle* 0.0174532925199432957);
surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
surfaceContext.drawImage(android, 0, 0);
surfaceContext.restore();
}

var watchID = null;
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
bussola();
}

function bussola() {
var options = { frequency: 300 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
}

function onSuccess(heading) {
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading.magneticHeading;
angle = heading.magneticHeading;
drawCanvas();

}

function onError(compassError) {
alert('Compass error: ' + compassError.code);
}
</script>
</head>

<body onload="drawCanvas();">
<div align=center>
<canvas id="myCanvas" width="256" height="256">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>

<div align=center id="heading">Waiting for heading...</div>

</body>
</html>

------------------------------------------------------------

Per visualizzare il comportamento dell'applicazione e' stato utilizzato Ripple

La cosa positiva e' che, essendo stata sviluppata con PhoneGap ,questa applicazione puo' essere utilizzata su Android, Iphone e molti altri dispositivi

Rotazione di immagine in HTML5

Di seguito in questo post viene descritto come e' possibile ruotare una immagine contenuta in un Canvas attorno al suo centro in HTML5
(il codice e' stato adattato da esempi che si trovano su forum)

-----------------------------------------------

<body onload="drawCanvas();">
<div>
<canvas id="myCanvas" width="256" height="256">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div>
</body>

<script type="text/javascript">
var surface;
var happy;
var angle = 0;

function drawCanvas() {
surface = document.getElementById("myCanvas");

if (surface.getContext) {
android = new Image();
android.onload = loadingComplete;
android.src = "./android.jpg";
}
}

function loadingComplete(e) {
var surfaceContext = surface.getContext('2d');
surfaceContext.fillStyle = "rgb(255,255,255)";
surfaceContext.fillRect(0, 0, surface.width, surface.height);
surfaceContext.save();
surfaceContext.translate(android.width * 0.5, android.height * 0.5);
surfaceContext.rotate(45* 0.0174532925199432957); //45 e' l'angolo di rotazione
surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
surfaceContext.drawImage(android, 0, 0);
surfaceContext.restore();
}

</script>

-----------------------------------------------

martedì 12 febbraio 2013

Grafici in HTML5

Sempre per sperimentare HTML5 ho provato la libreria FLOT

Si tratta di un metodo molto semplice di implementare nel Web grafici di gradevole visualizzazione ed anche dinamici con poche linee di codice

L'esempio che riporto di seguito e' per uno scatterplot XY in cui e' possibile zommare ed effettuare pan in modo dinamico

il codice completo che genera l'esempio e' il seguente
--------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="layout.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="./lib/jquery.js"></script>
<script language="javascript" type="text/javascript" src="./lib/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="./lib/jquery.flot.navigate.js"></script>
</head>
<body>

<div id="placeholder" style="width:600px;height:300px;"></div>

<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

var options = {
series: { lines: { show: true }, shadowSize: 0 },
xaxis: { zoomRange: [0.1, 20], panRange: [-20, 20] },
yaxis: { zoomRange: [0.1, 20], panRange: [-20, 20] },
zoom: {
interactive: true
},
pan: {
interactive: true
}
};

$.plot($("#placeholder"), [ d1, d2],options);
});
</script>

</body>
</html>

---------------------------------------------------------------

il grafico e' definito dal div placeholder e qui sono descritte anche le dimensioni del grafico stesso.

Ci sono due serie di dati, una definita da una funzione e l'altra da punti, e sono descritte anche le caratteristiche del grafico mediante la variabile option.

La dinamicita' del grafico e' data dai settaggi di zoom e pan come interactive (per questa funzione si deve aggiungere il riferimento a jquery.flot.navigate.js)

semplice, veloce e di effetto

Debugging HTML5

Una delle cose che ho sempre trovato fastidiose di Javascript era l'assenza di un metodo di debugging step by step

Attualmente la soluzione e' semplice ed integrata in Chrome
Attivando il menu' Strumenti/Strumenti per sviluppatori si apre una finestra al di sotto della pagina visualizzata nel quale sono riassunti i dettagli

In particolare andando al tab Scripts si osserva il codice Javascript ed e' possibile effettuare una sessione di debugging step by step inserendo dei breakpoint cosi' come il qualsiasi altra IDE moderna (ovvero cliccando sul numero di riga all'estrema sinistra del codice)

Veramente molto utile

giovedì 7 febbraio 2013

Testare PhoneGap con Ripple

Uno dei problemi maggiori di PhoneGap e' quello di non poter usare il debugger integrato nell'Android SDK in quanto tutto il codice e' Javascript

Per questo motivo puo' essere utile testare il solo codice HTML5 e PhoneGap in un ambiente esterno e la soluzione puo' essere utilizzare Ripple, una estensione per Chrome che permette questo tipo di operazione

Per prova e' stato utilizzato il codice del post precedente ed e' stato configurato un web server locale nel quale sono stati inseriti i file della cartella assets del progetto

Come si puo' vedere e' possibile simulare le accelerazioni e si osserva il programma in esecuzione come se fosse su un telefono reale

PhoneGap

PhoneGap e' un insieme di API che permette di interagire con l'hardware dei dispositivi mobile (Android, IPhone, WebOs ed altri) direttamente da HTML5 ed e' quindi sostanzialmente indipendente dal linguaggio nativo del sistema operativo di ogni telefono

Windows
installare Java JDK (non JRE)
installare Eclipse
installare Android SDK ed ADT
installare Ant
aggiungere alla path le directory platform-tools e tool dell'Android SDK
aggiungere alla path la directory bin del pacchetto ant
eseguire i comandi sottostanti
--------------------------------
C:\>set JAVA_HOME="C:\Programmi\Java\jdk1.7.0_09\bin"
C:\>set PATH=%JAVA_HOME%\bin;%PATH%
--------------------------------

Linux
in Linux (Debian Testing) l'unico problema e' relativo al fatto che stranamento ant non e' incluso in openjdk-7 ma nella versione 6 per cui deve essere scaricato il pacchetto precedente

Una volta configurato il sistema si procede andando nella directory
/phonegap/lib/android/bin
e si lancia il comando
create /directory_lavoro com.prova.test phonegap

che creera' un nuovo progetto nella directory di lavoro.
A questo punto si apre Eclipse e si crea un nuovo progetto da Android Project From Existing code e si punta alla directory create

Il risultato sara' qualcosa di questo tipo

si vede subito che la funzione main e' piuttosto stupida in quanto crea un WebView che punta al contenuto di assets

phonegap.java
-------------------------------------------------------

public class phonegap extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
----------------------------------------------------------

quindi il codice da mofidicare e' index.html.

Nel seguente esempio ho provato a vedere il risultato dell' accelerometro
Index.html
-------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<title>Accelerazione</title>

<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
var options = { frequency: 3000 };
navigator.accelerometer.watchAcceleration(onSuccess, onError);
}

// onSuccess: Get a snapshot of the current acceleration
//
function onSuccess(acceleration) {

var accx = document.getElementById('accx');
var accy = document.getElementById('accy');
var accz = document.getElementById('accz');

accx.innerHTML = 'Accelerazione X : ' +acceleration.x;
accy.innerHTML = 'Accelerazione Y : ' +acceleration.y;
accz.innerHTML = 'Accelerazione Z : ' +acceleration.z;


}

// onError: Failed to get the acceleration
//
function onError() {
alert('onError!');
}

</script>
</head>
<body>
<p id="accx">Accelerazione X : </p><br>
<p id="accy">Accelerazione Y : </p><br>
<p id="accz">Accelerazione > : </p><br>

</body>
</html>

-------------------------------------------------------

Qui il risultato di 5 minuti di lavoro. I dati vengono riaggiornati ogni 3 secondi

Considerando che ci ho messo meno di 5 minuti a capire come funziona il gioco direi che e' decisamente interessante

mercoledì 19 dicembre 2012

Embed HTML5 in Android

E' possibile sfruttare l'HTML5 anche per creare applicazioni Android
La tecnica consiste nel creare una pagina con una WevView e farla puntare ad una pagina HTML5

Di seguito i file necessari per il progetto (in cui e' stato usato il generatore di insieme di Mandelbrot in HTML5 visto nei precedenti post)

Attenzione : il browser di default di Android non e' pienamente compatibile con Android per cui alcune pagine HTML5 semplicemente non funzionano (vedi l'esempio di GUI con HTML5 presentato nei post precedenti)

activity_main.xml
-------------------------------------

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />

</RelativeLayout>

-------------------------------------
MainActivity.java
-------------------------------------

package com.web.html5;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView html5 = (WebView) findViewById(R.id.webView1);
html5.getSettings().setJavaScriptEnabled(true);
html5.setWebChromeClient(new WebChromeClient());
html5.loadUrl("file:///android_asset/www/index.html");

}

}

-------------------------------------
index.html
la pagina index.html deve essere inserita in asset/www/ quindi dentro alla directory asset
si deve creare il folder www e poi creare il file index.html. Dentro Eclipse, facendo doppio clic sul file html, il file viene visulizzato all'interno di un browser e quindi non e' editabile, si deve invece scegliere Apri con
-------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { margin: 0; font-size: 2em; background-color: white; }
#quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
</style>
<script type="text/javascript">
window.onload = function()
{
var canvas = document.getElementById("esempio");
if (canvas.getContext) {
var context = canvas.getContext("2d");
var re_min = -2.0;
var im_min = -1.2;
var re_max = 1.0;
var im_max = 1.2;
var iterazioni = 255;
var r;
var a,b;
var x,y,x_new,y_new;
var test;
var k,j,i;
var SCREEN_HEIGHT = 320;
var SCREEN_WIDTH = 400;
var re_factor = (re_max-re_min);
var im_factor = (im_max-im_min);
for (var i=0;i<SCREEN_HEIGHT;i++)
{
for (var j=0;j<SCREEN_WIDTH;j++)
{
a = re_min+(j*re_factor/SCREEN_WIDTH);
b = im_min+(i*im_factor/SCREEN_HEIGHT);
x = 0;
y = 0;
test = 0;
for (var k=0;k<iterazioni;k++)
{
x_new = (x*x)-(y*y)+a;
y_new = (2*x*y)+b;
if (((x_new*x_new)+(y_new*y_new))>4)
{
r = k%2;
if (r == 1)
{
context.beginPath();
context.fillRect(i,j,1,1);
context.stroke();
}
break;
}
x = x_new;
y = y_new;
}
}
}
}
}
</script>
</head>
<body>

<canvas id="esempio" height="400" width="800">
Il Browser non supporta HTML5.

</canvas>
</body>
</html>

Test HTML5 su vari browser

Browser di Android 4.0.2

HTML5 ancora non e' uno standard ed i browser hanno una capacita' di interpretazione del linguaggio molto differente. Di seguito una prova del test di html5test.com su piattaforma Android e PC

Come si vede Opera su Android surclassa il browser del sistema operativo mentre per l'ambiente Desktop il migliore (in modo abbastanza prevedibile) Chrome. E' anche evidente la progressione di miglioramenti nelle varie versioni di Android