HTML5 output

On utilise la balise <output> au sein de formulaires pour afficher le résultat d'un calcul à partir des autres champs, il peut être utilisé librement dans tous les navigateurs.

<output value=100> 100 </output>

Output HTML5

Avec un exemple, nous pourrions utiliser la balise <output> pour représenter le résultat d'un simple calcul mathématique basé sur un formulaire.

<form>
  <input name="num1" id="num1" type="number"> * 
  <input name="num2" id="num2" type="number"> = 
  <output for="num1 num2"></output>
</form>

Notez que nous utilisons un nouveau type de la balise <input> : number. Donc:

<form oninput="result.value = num1.value * num2.value"> 
   <input name="num1" id="num1" type="number"> *
   <input name="num2" id="num2" type="number"> = 
   <output for="num1 num2" name="result"></output>
</form>

* =

Nous pouvons aussi utiliser JavaScript pour mettre à jour la valeur de sortie <output>.

JavaScript:

var form = document.querySelector('form'),
num1 = form.num1, 
num2 = form.num2, 
output = document.querySelector('output');
    [].forEach.call(document.querySelectorAll('input'), function(el) { 
    el.addEventListener('change', function() {
        output.value = ~~num1.value * ~~num2.value; 
    });
});

JQuery:

var form = $('form'), 
num1 = form[0].num1, 
num2 = form[0].num2, 
output = $('output');
form.on('change', 'input', function() { 
    output.val( ~~num1.value * ~~num2.value );
});

Toujours même résultat.

21.5.14 - 0

HTML5 input type

En plus de nouveaux attributs HTML5, nous avons aussi de nouveaux types de la balise <input />.

• email
• range
• color
• number 
• datetime 
• date 
• month 
• week
• time
• url 
• tel
• search

email:

Le type "email" autoriser uniquement la structure des adresse email valide.

<input type="email" >

range:

Le type "range" nous permet de créer un curseur natif.

<input type="range" >

Plus particulièrement, il peut recevoir des attributs: min, max, step, et value, etc.

Pour une démonstration rapide, nous allons prendre un exemple:

HTML5:

<input type="range" id="range" min="0" max="10" step="2" value="0"> 
<output for="range"></output>

Maintenant, nous allons utiliser JavaScript/JQuey pour définir la valeur rendu.

JavaScript:

var range = document.querySelector('#range'), 
output = range.nextElementSibling;
output.value = range.value;
range.addEventListener('change', function() {
  output.value = range.value; 
});

JQuery:

var range = $('#range'),
output = range.siblings('output');
output.val( range.val() );
range.on('change', function() {
  output.val( range.val() ); 
});

La valeur produit correspondant à ce nous avons spécifié dans l'attribut "range".

number:

Permet de saisir seulement des chiffres, peut-être lorsque vous avez besoin de l'âge ou d'un numéro quelconque.

<input type="number" >

Vous pouvez changer le style de ce type, on utilise le sélecteur:

input::-webkit-inner-spin-button { 
  /* votre style */
}

date:

Le type "date" nous donne la possibilité d'indiquer aux utilisateurs de sélectionner une date valide.

<input type="date" >

Quelques options de ce type:

min:

Certains sites vous obligent à choisir une date dans un délai spécifique. L'attribut "min" et "max" peut être utilisé pour cela:

<input type="date" min="2013-12-15" max="2013-12-30">

Dans les navigateurs qui supporte le type "date" seules les dates spécifié seront sélectionnable.

step:

Par ailleurs, si vous voulez limiter le choix à chaque cinq journée par exemple on peut utiliser l'attribut "step"

<input type="date" step="5">

d'autres options:

En plus, HTML5 offre également des choix alternatifs:

<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">

color:

<input type="color">

les navigateurs prennent en charge des différents couleur.

url:

Le type "url" permet de s'assurer que le text saisi par l'utilisateur est un url valide.

<input type="url">

tel:

Leur avantage actuel est de présenter la forme d'un numéro de téléphone. Dans les navigateurs mobiles qui supportent ce nouveau type, permet d'afficher correctement un pavé numérique lors de la mise en place du clavier.

<input type="tel">

Si vous voulez valider un numéro de téléphone, vous aurez la possibilité d'utiliser l'attribut pattern. Par exemple, imaginons que j'ai besoin un numéro de téléphone au format (0000-000-000):

<input type="tel" pattern="\d{4}-?\d{3}-?\d{3}">

Cela permettra d'assurer que la forme ne soumettra si la valeur fournie prend la forme d'0000-000-000 ou 0000000000.

search:

type "search"; à première vue, ne fait pas beaucoup plus que créer une input avec des coins arrondis.

<input type="search">

Peut-être une icône de recherche s'affichera sur le côté gauche de l'input, aussi permet au navigateur de se souvenir vos requêtes de recherche précédents.

<input type="search" results="3">

18.5.14 - 0

Meter et Progress HTML5

meter

La balise <meter> peut être utilisée pour fournir l'affichage graphique pour une valeur particulière. Cela fait le choix idéal pour des choses comme les scores de quizz par exemple, etc.

<meter min="0" max="100" value="50"></meter>

meter html5

En outre, nous pouvons spécifier une plage pour les mesures considérés comme faible, moyen ou une valeur considérés comme élevées. Cela permettent également de conditonner la couleur de l'affichage.

<meter min="0" max="20" low="8" high="16" optimum="20" value="2">2/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="10">10/20</meter> 
<meter min="0" max="20" low="8" high="16" optimum="20" value="20">20/20</meter>

2/20 10/20 20/20

Progress

Si l'élément <output> est utilisé pour afficher le résultat d'un calcul, l'élément <progress> devrait représenter l'état d'avancement d'une tâche ou d'une action au moyen d'une barre de progression. Il est possible d'animer la progression de la barre en utilisant le javascript, soit sur des évènements spécifiques, soit sur un simple timeout. 

<progress max="10" value="6"> 6 </progress> 

Si le navigateur ne supporte pas l'élément, son contenu sera affiché à la place. Prenons l'exemple:

Code HTML5:

<progress id="barre" max="100" value="0"></progress> 
<span id="avancement"></span> 
<input type="button" value="Démarrer" onclick="StartProgress();" />

Code JavaScript:

var i = 0;    
var barre = document.getElementById('barre');  
var avancement = document.getElementById('avancement');
 
function StartProgress(){
  MyTimeOut = setTimeout('Progress()', 500);
}
 
function Progress(){ 
  i += 5;
  if(i <= barre.max){
     barre.value = i;
     avancement.innerHTML = i.toString() + ' %';
     MyTimeOut = setTimeout('Progress()', 500);
  }
}

11.5.14 - 1

HTML5 Video

HTML5 video: La balise <video> permet de lire des fichiers vidéo directement dans notre page HTML en proposant un lecteur intégré avec des contrôles génériques (lecture, pause, contrôle du volume…).

HTML5 Video

	WebM	Ogg	h264
V14 et +	Oui	Oui	-
V20 et +	Oui	Oui	-
V9 et +	Oui	-	Oui
V5.1 et +	Oui	Oui	Oui
V12 et +	-	-	Oui

La balise <source> permet de définir au sein de l'élément <video> plusieurs ressources alternatives au cas où le navigateur ne supportera pas le format initialement spécifié dans l'attribut "src".
Lorsque le fichier vidéo n'est pas trouvé ou que son format n'est pas supporté au navigateur, le lecteur n'est pas visibles.

Support:

Attributs pour la balise:

Propriété	Définition
controls	Affiche le lecteur audio et ses fonctionalités (lecture, pause, ...)
autoplay	Le fichier doit être lu automatiquement lorsque la page est chargé
preload	Le mode de chargement du fichier à l'ouverture de la page
loop	Le fichier doit être joué en boucle
muted	Désactiver le son de la vidéo
poster	Spécifie une image par défaut à afficher comme arriére plan
src	URL du fichier vidéo

Exemple d'utilisation:

<video controls="controls">
   <source src="sourcevideo.webm" type="video/webm" />
   <source src="sourcevideo.mp4" type="video/mp4" />
   <source src="sourcevideo.ogv" type="video/ogg" />
</video>

Résultat:

Vidéo d'origine :
http://www.youtube.com/watch?v=7WKGh7DA4hE

22.6.13 - 1

Tuto Canvas : Images

<canvas> accepte le chargement d'images dans sa surface de dessin. Cette fonction est vraiment très puissante, elle permet d'afficher une image à certaines coordonnées. Pour ceci, on initialise une nouvelle image grâce au constructeur new Image().
Sa forme la plus basique ne comporte que trois paramètres: l'objet "Image" et  les coordonnées x et y:

var image = new Image();
image.src = "source.extension";
context.drawImage(image, x, y);

La méthode drawImage(image,x,y) copie l'image image chargée sur la surface de dessin, aux coordonnées (x,y). Il est possible de se resservir de la même ressource image une infinité de fois.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var image = new Image();
image.src = 'like.png';
image.onload = function() {
    context.drawImage(image,50,50);
};

Résultat:

Aussi, nous pouvons aussi créer des motifs qui seront répétés horizontalement, verticalement. Pour ceci, on utilise la méthode createPattern(image, répétition) exploite une image, chargée comme indiqué précédemment, et lui confère un mode de répétition, parmi: repeat-y, repeat-x, ou repeat.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var image = new Image();
image.src = 'like.png';
image.onload = function(){
    var motif = context.createPattern( image, 'repeat-x' );
    context.fillStyle = motif;
    context.fillRect(0,0,250,250);
};

Résultat:

8.6.13 - 0

Tuto Canvas : Degradé

Les deux principaux types de dégradés sont :

• Linéaire (createLinearGradient) le long d'un axe.
• Radial (createRadialGradient) avec un centre et une extension circulaire.

Pour affecter un dégradé, il faut définir quelles sont les couleurs et points de début et d’arrêt.

• Linéaire:

Pour créer un dégradé linéaire, la fonction utilisée est :

createLinearGradient(x1, y1, x2, y2)

x1, y1 : Le point de départ.
x2, y2 : Le point d'arrivé.

Pour définir une couleur on utilise la fonction addColorStop(p,couleur), où p la position de la couleur dans le dégradé, entre 0 (couleur de départ) et 1 (couleur de fin).
Enfin on assigne la propriété fillStyle pour appliquer le dégradé.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

// Délimitation du début et de la fin du dégradé
var gradient = context.createLinearGradient(0,0,300,100);

// Ajout d'une première couleur
gradient.addColorStop(0,"red");     

// Ajout d'une deuxième couleur
gradient.addColorStop(1,"green");    

// Affectation du dégradé
context.fillStyle = gradient;            

// On trace un rectangle plein qui aura pour style le dégradé
context.fillRect(0,0,300,300); 

Résultat:

• Radial:

Pour créer un dégradé radial la fonction utilisée est :

createRadialGradient(x1, y1, r1, x2, y2, r2)

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

var gradient = context.createRadialGradient(0,0,50,0,150,300);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"green");
gradient.addColorStop(0.9,"blue");
context.fillStyle = gradient;
context.fillRect(0,0,300,300);

Résultat:

 

3.6.13 - 0

Tuto Canvas : Textes

Dessiner du texte sur canvas HTML5 est très simple. Pour cela, il existe deux méthodes :

• fillText('montext', x, y) produira des lettres.
• strokeText('montext', x, y) produira uniquement le contour des lettres.

Pour appliquer des styles (le font, alignement, …) sur le texte, plusieurs propriétés sont présentes :

• font : police.
• textAlign : alignement.
• Etc.

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");
    
var text = 'Developpeur';      // déclarer texte
context.font = "30pt Arial";   // définir la taille et le font
context.fillStyle = "red";     // couleur du texte
context.fillText(text,25,150); // 25:Coordonnée sur l'abscisse
                               // 150:Coordonnée sur l'ordonnée

Résultat:

30.5.13 - 0

HTML5 keygen

HTML5 keygen: La balise <keygen> permet de générer au sein d'un formulaire une clé de sécurité permet le cryptage et le décryptage de données échangées.

Support:

 

Attributs pour la balise:

Propriété	Définition
name	Nom associé à la balise keygen
keytype	Algorithme de sécurité de la clé générée
disabled	Désactive l'élément keygen
challenge	Permet d'ajouter un texte complémentaire à la clé

 

Exemple d'utilisation:

    <form>
       <keygen id="cle" name="cle"></keygen>
       <input type="submit" value="Générer" />
    
       <div id="my_result">
          <label>Après la génération : </label>
          <div id="CleGenerer" style="width:400px; word-break:break-all;"></div>
       </div>
    </form>
 
    <script type="text/javascript">
    function getParameterByName(name){
       name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
       var regexS = "[\?&]" + name + "=([^&#]*)";
       var regex = new RegExp(regexS);
       var results = regex.exec(window.location.search);
       if(results == null)
       return "";
       else
       return decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    document.getElementById("CleGenerer").innerHTML = getParameterByName("cle");
    if(document.getElementById("CleGenerer").innerHTML != ""){
       document.getElementById("my_result").style.display = "block";
    }
    </script>
   

Résultat:

Après la génération :

29.5.13 - 0

Tuto Canvas : Les Formes

• Rectangle :

Pour tracer un rectangle en donnant sa hauteur, sa largeur et son point de départ pour les coordonnées (x,y),  la méthode à utiliser, ici, est fillRect(x, y, largeur, hauteur).
x : Coordonnées sur l'abscisse.
y : Coordonnées sur  l'ordonnée.
largeur : Largeur du rectangle, en pixels.
hauteur : Hauteur du rectangle, en pixels.

 

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

context.fillStyle = "#00BCFF";   // couleur de fond
context.fillRect(100,100,100,100);

 

Résultat:

• Cercle :

Pour créer un cercle, deux méthodes existent : arcTo() et arc(). Le principe de cette dernière fonction définit les coordonnées centrales de l'arc, son rayon (en pixels), l'angle de début et de fin, et dans quel sens le pinceau va tourner.
arc( x, y, rayon, AngleDepart, AngleFin, AntiClockwise )
x : Coordonnées du centre du cercle, sur l'abscisse.
y : Coordonnées du centre du cercle, sur l'ordonnée.
rayon : Le rayon du cercle, en pixels.
AngleDepart : C'est l'angle à partir duquel on va commencer notre tracé, en radians.
AngleFin : C'est l'angle jusqu’auquel on va effectuer notre tracé, en radians.
AntiClockwise : Le sens de rotation est contraire aux aiguilles d'une montre lorsqu'il vaut true.

Les angles sont définis en radians avec Math.PI (un tour complet de cercle = Math.PI*2).

Exemple d'utilisation:

var canvas = document.getElementById("mon_canvas");
var context = canvas.getContext("2d");

// Cercle
context.beginPath();
context.arc(150,150,100,0,Math.PI*2,true);
context.strokeStyle = "#FF00F4";
context.fillStyle = "#00BCFF";
context.fill();
context.stroke();

// smile
context.beginPath();
context.arc(150,200,30,0,Math.PI,false);
context.strokeStyle = "#FFFF00";
context.stroke();

Résultat:

Tuto Précédent :
Présentation Canvas.
Les lignes Canvas.

27.5.13 - 0

HTML5 mark

HTML5 mark : La balise <mark> permet  de faire ressortir visuellement une portion de texte en appliquant un style surligné jaune sur le texte qu'elle décrit. L'extrait n'est pas forcément considéré comme important mais on veut  qu'il se distingue bien du reste du texte.

Support:

 

Exemple d'utilisation:

   <p>
       Bonjour et bienvenue sur notre blog <mark>développeur informatique</mark>.
   </p>
   

Résultat:

Bonjour et bienvenue sur notre blog développeur informatique.

27.5.13 - 0

HTML5 figure

HTML5 figure: La balise <figure> représente une section qui est reçue des illustrations (par exemple des images, des diagrammes, etc.) venant compléter le contenu principal décrit dans la page.
On peut associer un titre ou une légende utilisant la balise <figcaption>. Elle peut être placée juste après le tag d'ouverture de la balise <figure> ou alors avant le tag de fermeture </figure>.

Support:

 

Exemple d'utilisation:

    <figure style="width:267px;">
        <figcaption style="text-align:center;width:267px;line-height:20px;background-color:#00BCFF;">Bienvenue sur notre blog</figcaption>
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJoQ2DtQ6lZIfE_pyh0n-i-8vnYeubAdWZTOrvDZRYdw0upJ7IYnfzyiZXWFt2NW6aDUF1ymPOiOvtNY_bTnltUmoYf-cZH_lS0Q0Apkbw3M6rfGCFDP5iuNnVDMSKsdKwAAapiTR9Ac/s320/p.jpg" alt="développeur informatique" />
    </figure>
   

Résultat:

Bienvenue sur notre blog

25.5.13 - 0

HTML5 header & footer

HTML5 header: La balise <header> est utilisée pour décrire l'en tête d'un document ou d'une section.
HTML5 footer: À l'inverse de l'en-tête, La balise <footer> est utilisée pour décrire le pied de page d'un document ou d'une section et est censée contenir des informations comme des liens de contact, le nom de l'auteur, les mentions légales, des informations de copyright, etc.

Support:

Exemple d'utilisation:

    <article>
      <header>
        <h4>Titre de l'article</h4>
      </header>
      <p>
        Description
        bla
        bla
        bla
        ...
      </p>
      <footer>
        <span>Publié le: 12/03/2013</span>
          Par: Auteur
      </footer>
    </article>
   

Résultat:

Titre de l'article

Description bla bla bla ...

Publié le: 12/03/2013 Par: Auteur

24.5.13 - 0

HTML5 details

La balise <details> permet de déclarer une section dont le titre est visible et le contenu est masqué. Par défaut le titre de la section est "Détails", mais il est possible de le changer en employant L'élément <summary>. De même, il est possible de rendre le contenu ouvert en employant l’attribut "open".
Elle s’emploie pour regrouper par exemple des notes à la fin d’un article que l’utilisateur peut visualiser s’il le souhaite.

Support:

 

Exemple d'utilisation:

    <details>
         <summary>HTML</summary>
         <p>HyperText Markup Language</p>
    </details>
   

Résultat:

HTML

HyperText Markup Language

 

Autre exemple:

    <details open="open">
         <summary>HTML</summary>
         <p>HyperText Markup Language</p>
    </details>
   

Résultat:

HTML

HyperText Markup Language

23.5.13 - 1

Tuto Canvas : Chemins et Tracés

Une fois la hauteur, la largeur et l’attribut  "id" sont définies et tester si notre canvas et notre context sont existes :

 <!doctype html>
 <html>
 <head>
     <title>Test Canvas</title>
 </head>
 <script>
 window.onload = function()
 {
     var canvas = document.getElementById("mon_canvas");
     var context = canvas.getContext("2d");
     if(!canvas)
     {
         alert("Impossible de récupérer le canvas");
         return;
     }
     if(!context)
     {
         alert("Impossible de récupérer le context");
         return;
     }
      // Suite...
 }
 </script>
 <body>

     <canvas id="mon_canvas" width="300" height="300">

     </canvas>

 </body>
 </html>

Les premières fonctions pour commencer sont celles qui vont tracer des chemins. Un tracé peut se dérouler en plusieurs étapes: initialisation de chemin, définir leur point de départ puis point d'arrivée, affichage du contour ou du remplissage.

Un tracé est initialisé par la méthode beginPath(). Le point de référence de début du tracé est désigné avec moveTo(x,y). Il s'agit de décider à partir de quel emplacement le tracé va être déplacé. Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath(). On peut ajouter autant de segments que l'on veut, puis éventuellement "fermer" la forme pour revenir automatiquement au point de départ avec closePath().

 context.beginPath();      // Début du chemin

 context.moveTo(100,100);   // Le tracé part du point 100,100

 context.lineTo(200,100);  // Un segment est ajouté vers 200,100

 context.lineTo(100,200);  // Un segment est ajouté vers 100,200

 context.closePath();      // Fermeture du chemin

Ce code ne charge rien à l'affichage. Mais, il apparait une fois appelée l'une des deux méthodes fill() pour remplir et stroke() pour le contour.
On ajoutant le code :

 context.stroke();

Il s'affiche:

Les coordonnées des points utilisés:

Pour définir les styles, des couleurs de contour et de remplissage dont dépendent fill() et stroke() , il faut utiliser des propriétés du contexte: fillStyle et strokeStyle.
Ajoutant ce code à notre exemple:

 context.fillStyle = "red";
 context.fill();

Il s'affiche:

En résume :

Méthode	Desc
beginPath()	Indique au context que l'on s'apprête à effectuer un nouveau tracé.
moveTo(x,y)	Par défaut, si l'on trace une ligne, elle commencera aux coord[0, 0]. Cette fonction déplace le point de départ de chaque ligne.
lineTo(x,y)	Pemet de tracer une ligne en partant de la position actuelle, jusqu'aux coordonnées x,y indiquées.
closePath()	Indique au context que l'on a terminé avec ce tracé.
fill()	Créer une forme pleine à partir des lignes tracées.
strocke()	Créer les traits des lignes.

22.5.13 - 0