Des micro applications HTML5

Une application HTML5 est en fait une page web avec surtout du HTML mais aussi du CSS et du JavaScript.
Gros avantage : elle est multiplateformes ; fonctionne avec sur n'importe quel terminal doté d'un navigateur.
Il faut bien sûr utiliser du HTML5, du CSS3 et du JS moderne.

Pour créer des graphiques web il est conseillé d'utiliser en plus l'API Canvas ou le format SVG.
Mon tuto sur Canvas
Mon tuto sur le format SVG

La "boite aux couleurs"

Je désigne par cette expression un composeur de couleurs très utile pour un développeur web.
Via une interface graphique l'utilisateur compose une couleur (intensités de Rouge,Vert et bleu et degré de transparence) et en retour l'application affiche le code RGBA de la couleur retenue ainsi qu'une boite ayant en couleur de fond cette couleur.
Compte tenu du "step" de 5 dans chaque curseur, il y a 132 650 couleurs possibles (51 * 51 *51) sans tenir compte de l'apha ...
Le développeur web, utilisateur de cette application, peut ensuite insérer le code RGBA de la couleur retenue dans les règles de style relatives aux couleurs.

Rendu de cette application dans un autre onglet

Cliquez ici !

Ajoutez cette page à vos favoris !

Le code CSS & HTML

...
body {font-size : 20px; width : 90% ; margin : 10px auto;  }
	div {width : 30% ; height : 200px ; margin: 10px auto ; border : 1px solid black ;}
	input, label, select, output {width : 20% ; height ; 50px ; margin : 10px; }
	h2,h3 {text-align : center ; margin : 10px auto; }
	h2 {line-height : 2em ; font-size : 1.6 em ; background : gray; }
	h3 {line-height : 1.6em ; font-size : 1.3 em ; background : lavender; } 
...
<form name ="f1">
	<h3>Déplacer les curseurs jusqu'à ce que vous ayez trouvé la bonne couleur</h3>
	<p><label>saisir intensité de rouge  : </label>
		<input type = 'range' min = '0' max = '255' step = '5' 	
			value ='255' name ="rouge" />
		<output name ="rouge2"></output>
	<p><label>saisir intensité de vert : </label>
		<input type = 'range' min = '0' max = '255'  step = '5'	
			value ='0' name ="vert"/>
		<output name ="vert2"></output>
	<p><label>saisir intensité de bleu : </label>
		<input type = 'range' min = '0' max = '255' step = '5' 
			value ='0' name ="bleu" />
		<output name ="bleu2"></output>
	<p><label>saisir alpha :  </label>		
		<input type = 'range' min = '0' max = '1' step = '0.1'	
			value = '1' name ="alpha"/>
		<output name ="alpha2"></output>
	<p><label>Le code RGBA de votre composition est : </label>
		<input type = 'text' readonly name = 'code' >
</form>
	<div id ="rendu"></div>
...

Pour saisir les quatre paramètres d'un code RGBA emploi de quatre input type = range. Ce nouveau type de champ de saisie est implémenté sur tous les navigateurs récents.
Notez aussi l'emploi de balises output qui remplacent avantageusement des "input type ='text' readonly ... ". Ce nouveau type d'élément de formulaire est reconnu par les navigateurs récents.
Un input type = "text" en lecture seule affiche le code RGBA découlant de la composition des quatre curseurs.
Une boite DIV a pour couleur de fond celle découlant de la composition faite par l'utilisateur.
Aucun "scorie" de JS dans le code de la partie BODY.

Le script

f1.oninput =function()
{
	let rouge = f1.rouge.value ; 
	let vert = f1.vert.value;
	let bleu = f1.bleu.value;
	let alpha = f1.alpha.value; 
	let couleur = 'rgba(' + rouge + ',' + vert + ',' + bleu +','+ alpha + ')'; 
	
	f1.rouge2.value = f1.rouge.value; 
	f1.vert2.value = f1.vert.value;
	f1.bleu2.value = f1.bleu.value;
	f1.alpha2.value = f1.alpha.value;
	document.getElementById('rendu').style.background = couleur ; 
	f1.code.value = couleur ; 
}

Notez la façon classique (mais toujours valide) de nommer les champs dans le script : nomFormulaire.nomChamp

J'ai utilisé l'événement récent de formulaire : "input" qui remplace avantageusement les événements "change" qui devaient être associés à chaque champ de saisie.

Une calculette

Rendu de cette application dans un autre onglet

Cliquez ici !

Ajoutez cette page à vos favoris !

Le code HTML de cette page web

Je ne reprends pas le code CSS car il est identique à la première application. ... <h2>Calculatrice</h2> <form name ="f1"> <p><label>Premier nombre :</label> <input type = 'number' step ='any' name ="premier"> <p><label>Sélectionnez l'opérateur </label> <select name ="operation"> <option value = '+' selected> + </option> <option value = '-'> - </option> <option value = '*'> *</option> <option value = '/'> / </option> <option value = 'p'>puissance</option> </select> <p><label>Deuxième nombre :</label> <input type = 'number' step ="any" name ="deuxieme"> <p><label>Résultat : </label> <output type = 'number'name ="resultat" ></output> </form> ...

J'utilise des champs de type number pour saisir les opérandes. Ce nouveau type de champ est implémenté sur tous les navigateurs récents.
Attention pour pouvoir saisir des nombres décimaux dans un champ de type number il faut que l'attribut step soit à "any" sinon vous ne pouvez saisir que des entiers.

Le script

f1.oninput =function()
{
	var premier = f1.premier.value;
	var deuxieme =f1.deuxieme.value;
	var operation = f1.operation.value; 
	
	if (operation =="+" )
		var resultat = parseFloat(premier) + parseFloat(deuxieme);
	if (operation =="-" )
		var resultat = parseFloat(premier) - parseFloat(deuxieme);
	if (operation =="*" )
		var resultat = premier * deuxieme;
	if (operation =="/" )
		var resultat = premier / deuxieme;
	if (operation =="p" )
		var resultat = Math.pow(premier,deuxieme) ; 
	f1.resultat.value = resultat ;
}

Je rappelle que toute saisie dans un champ est de type string même s'il s'agit d'une suite de chiffres.
En JavaScript le signe + est ambigu et désigne une concaténation s'il s'agit de chaines. Donc pour obtenir une addition il faut au préalable convertir en décimal.
Pour les autres opérations la conversion est automatique en JS ; ce n'est pas le cas dans tous les langages ...
Encore une fois le traitement est en temps réel grâce à l'événement de formulaire input qui se déclenche à chaque modification dans un champ de saisie du formulaire (input ou textarea).

Une animation HTML5

Je vous propose un patchwork dynamique pour le plaisir des yeux.

Le code CSS & HTML

...
<style>
	div#patchwork {position : relative ; margin : 20px auto;}
	img {position : absolute; width : 10%;}
	div#patchwork {position : relative ; margin : 20px auto;}
	img {position : absolute; width : 10%;}
	img:active {transform : scale(3) ; z-index : 100;}
	button {width : 60%}
</style>
</head>
<body>
	<div  id ="patchwork" style = "width : 100% ; height : 500px ; background : aqua ; ">	</div>
	<button onclick ="clearInterval(routine);this.remove();" >Mettre fin à la génération d'images</button>
	<h3><i>Cliquez sur une image pour l'agrandir et la mettre en premier plan !</i></h3>
	button {width : 60%}
...

CSS :img:active {transform : scale(3) ; z-index : 100;} : L'image courante est agrandie sur clic.
HTML :...button onclick ="clearInterval(routine);this.remove();" ...: : mettre fin à l'appel de la fonction "ajout()".

Le script

function ajout()
{
	var x ; var y; 
	x = Math.floor(Math.random()*90);
	y =Math.floor(Math.random()*300);
	x = x +"%"; 
	y= y+"px";
	var patchwork =document.querySelector("#patchwork");
	var image = document. createElement("img");
	var reel = Math.random() ;
	var entier = Math.ceil(reel*36) ; 
	switch(entier)
		{
			case 1 : image.src ="..//images/bikini.jpg" ; break;
			case 2 : image.src ="../images/bikini1.jpg" ; break;
			case 3 : image.src ="../Images/bikini2.jpg" ; break;
			case 4 : image.src ="../images/bikini3.jpg" ; break;
			...
			case 35 : image.src ="../images/bikini33.jpg" ; break;
			case 36: image.src ="../images/bikini34.jpg" ; break;
		} // fin switch 
	image.style.left =x; 
	image.style.top = y;
	patchwork.appendChild(image);
} // fin fonction ajout

var routine = setInterval(ajout,1000);

var routine = setInterval(ajout,1000) : appel chaque seconde de la fonction "ajout".

Le rendu dans un autre onglet

Cliquez ici !

Le jeu de squash avec HTML5

Pour bénéficier d'un vrai repère cartésien j'utilise l'API Canvas (API de la spécification HTML5).

Le code CSS & HTML

<canvas  width ="400" height="400" 
	style = "width : 60%; height : auto ; background : lime ;
	border :1px solid black;"> 
</canvas>
<p><i>Cliquez dans le canevas pour animer la balle. </i>

La balise canvas crée une repère cartésien dans la page web.

Le script

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var X = canvas.width; 
var Y = canvas.height;  
var stop;
var balle = 
{
		x: X/2,
		y: 20,
		vx: 3,
		vy: 4,
		rayon: 15,
		dessin: function () 
		{
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.rayon, 0, Math.PI * 2, true);
			ctx.closePath();
			ctx.fillStyle = 'red'; 
			ctx.fill();
		}, 
}; // fin définition objet balle
var raquette = 
{
		x: X/2,
		y: Y-15,
		vx: 15,
		w: 70,
		h:10,
		dessin: function () 
		{
			ctx.fillStyle = 'navy';
			ctx.fillRect(this.x,this.y, this.w, this.h);
		}, 
}; // fin définition objet raquette

balle.dessin();
raquette.dessin();
canvas.onclick =function()
{
	stop = setInterval(boucle_jeu,50); 
	var compteur =0; 
	function boucle_jeu()
	{
		ctx.clearRect(0,0,X,Y); 
		compteur++; 
		balle.dessin();
		raquette.dessin();
        
		// changer coordonnées balle
		balle.x +=balle.vx;
		balle.y +=balle.vy;
      
		// gestion des rebonds
		if(balle.x > X-15 || balle.x <= 15)     {balle.vx = -balle.vx}
		if (balle.y < 15) {balle.vy = -balle.vy;}
       
	   // Si balle atteint le bas 
	   if (balle.y > Y - 15)
		{
			if (balle.x > raquette.x  && balle.x < raquette.x + raquette.w)
				{balle.vy = -balle.vy;} // balle interceptée par raquette donc rebond
			else  // balle non interceptée par raquette
				{
					alert('perdu ; nombre de points : ' + Math.round(compteur/10)); 
					balle.x = X/2 ;balle.y = 20 ;raquette.x =X/2;
					ctx.clearRect(0,0,X,Y);
					balle.dessin(); raquette.dessin();
					clearInterval(stop); 
				}
		} // fin si externe
				
		// gestion clavier
		document.onkeydown = function(e)
		{
			if (e.keyCode == 37) {raquette.x -=raquette.vx; }
			if (e.keyCode == 39) {raquette.x += raquette.vx; }	
		} 
	} // fin boucle_jeu
}

Ce script est orienté objet.
Les objets sont définis sans passer par une classe mais avec un syntaxe proche de la notation JSON.

Le rendu dans un nouvel onglet

Cliquez ici !

Graphiques web avec SVG

Canvas et SVG sont deux technologies utilisées pour créer des graphiques web, mais elles ont chacune des spécifictés.

Je vous propose un jeu dont le but est d'intercepter le plus rapidement possible le carré rouge avec le carré vert.

Le code CSS & HTML

...
<style>
svg {display : block; background : linear-gradient( 45deg, navy,blue, white ) ; margin : 10px auto; }
button {display : block ; width : 200px ; height : 50px; margin : 10px auto ; }
...
<body>
<svg  width="60%"  viewBox ="0 0 400 400">
      <!-- dessiner carré rouge -->
<rect id ="rouge" x="200" Y="200" width ="50" height ="50" fill="red" />
      <!-- dessiner carré vert -->
<rect id ="vert" x="175" Y="400" width ="50" height ="50" fill="green" />
</svg>
<button>Jouez !</button>

Un repère cartésien est dessiné dans la page web grâce à la balise double SVG.

Le script

document.querySelector('button').onclick = function()
{
	tempo = 0; 
	setInterval(compteur,100); 
	var svg = document.querySelector ('svg') ;
	var rouge = document.getElementById('rouge') ; 
	var vert = document.getElementById('vert');
	var cote =50;
	var limiteX = 500 -cote;
	var limiteY = 500 - cote; 
	var remontee = -3;
	var delta = 3;
		
	var XR = 200; 	var YR = 200; 	var XV = 175;	var YV = 400; 
	var boucle = setInterval(mouvement, 30); 
     	
	function mouvement() 
	{
		//gestion déplacement automatique du carré rouge
		if(XR>=limiteX) {XR = limiteX ; delta = -3; }
		if (XR<=0) {XR =0 ; delta = 3;}
		XR+=delta; 
		rouge.setAttribute("y",YR);
		rouge.setAttribute("x",XR); 
			
		// Le carré vert ne doit pas sortir de la fenêtre de jeu
		if (YV <=0) {YV = limiteY; XV = 175; }
		if (XV <=0){ XV = 0 ; }
		if (XV >=limiteX) {XV = limiteX;}
		YV+=remontee ; 
		vert.setAttribute("x",XV); 
		vert.setAttribute("y",YV);
					
		// gestion collision  
		if((Math.abs(XV-XR) < cote) && (Math.abs(YV-YR)< cote)) 
			{alert("Gagné en " + tempo + " dizièmes de secondes" );  clearInterval(boucle);}
        		
		// programmation clavier pour carré vert
		document.onkeydown = function(e)
		{ 
			if(e.keyCode ==37) {XV-=5; }
			if(e.keyCode ==39) {XV+=5; }
		} 
				
	} // fin fonction mouvement
	function compteur()	{tempo = tempo+=1; }
}

à la différence de Canvas, les objets dessinés dans le repère sont des éléments du DOM.
On peut modifier les attributs de ces éléments avec la méthode setAttribute().

Le rendu dans un nouvel onglet

Cliquez ici !

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Des micro applications HTML5

La "boite aux couleurs"

Rendu de cette application dans un autre onglet

Le code CSS & HTML

Le script

Une calculette

Rendu de cette application dans un autre onglet

Le code HTML de cette page web

Le script

Une animation HTML5

Le code CSS & HTML

Le script

Le rendu dans un autre onglet

Le jeu de squash avec HTML5

Le code CSS & HTML

Le script

Le rendu dans un nouvel onglet

Graphiques web avec SVG

Le code CSS & HTML

Le script

Le rendu dans un nouvel onglet