Le langage HTML/HTML5
La version 5 de HTML est supportée par les navigateurs actuels. Elle apporte plusieurs nouveautés intéressantes.
Le doctype
modifierEn HTML5, le doctype a été réduit au strict minimum. Cette version du langage ne nécessite plus de versions du DOCTYPE comme en HTML 4.0 et XHTML 1.0.
<!DOCTYPE html>
La syntaxe
modifierEn HTML5, vous avez le choix entre utiliser une syntaxe SGML (comme HTML 4) ou XML (comme XHTML). Prenez juste garde à être cohérent dans votre choix.
De plus, les balises <style> et <script> n'ont plus besoin systématiquement de l'attribut type. S'il n'est pas précisé, la balise <style> accepte le css par défaut, tandis que la balise <script>, elle, accepte le javascript.
data
modifierL'attribut "data-"[1] permet de renseigner des données dans les balises HTML, séparées par "-", mais on peut aussi leur affecter des valeurs avec "=".
Exemple :
<div id="introduction" data-introduction data-paragraphe="introduction">
...
</div>
Le fait de sectionner des data en JavaScript est plus lent que de sélectionner des classes, lui-même plus lent que d'utiliser les id[2].
Balises obsolètes
modifierAttributs obsolètes
modifiernamesur l'élément<a>pour créer une ancre, remplacé par l'utilisation de l'attributidsur n'importe quel élément (compatible HTML4 et HTML5).
Nouvelles balises
modifier<article>, <aside>, <footer>, <header>, <nav>, <section>.
<canvas>
modifierLa balise <canvas> permet de créer une zone de dessin. On utilise ensuite du JavaScript pour créer/animer celle-ci.
Exemple :
<canvas id="myCanvas" width="300" height="200" />
<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.strokeStyle="#900";
context.strokeRect(20,30,100,50);
</script>
Ce code affichera :
Cet exemple est basique, mais canvas devrait permettre de créer des animations qui n'étaient avant possibles qu'avec Flash.
Voir aussi
Programmation objet et géométrie#Géométrie avec html5
<audio>
modifierLa balise <audio> permet d'afficher un lecteur audio. L'avantage par rapport aux balises <object> et <embed> est que le fichier est lu directement par le navigateur, il n'y a plus besoin de plugin.
Elle s'utilise comme ceci :
<audio src="monfichier.mp3" autoplay controls loop />
Les attributs autoplay, controls et loop sont facultatifs. Ils permettent respectivement de lancer automatiquement la lecture, d'afficher les boutons lecture/arrêt et de lire la piste en boucle.
Vous pouvez aussi spécifier plusieurs sources, dans différents formats, comme ceci :
<audio>
<source src="monfichier.mp3" />
<source src="monfichier.ogg" />
</audio>
Le navigateur choisira alors le format qui lui convient le mieux.
<video>
modifierLa balise <video> s'utilise comme la balise <audio>, sauf qu'il faut préciser les dimensions de la vidéo, ainsi que le type MIME du fichier :
<video width="360" height="240">
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
</video>
Faire un livre dont vous êtes le héros
modifierIdée maîtresse
modifierL’arborescence classique est :
- ./
- ./scripts
- ./styles
- ./assets <-- c'est ici que viennent les images et les sons
- ./assets/images
Source
modifier<!doctype html5>
<html>
<!--
LDVELH(Livre dont vous êtes le héros) -> engine amicaFolio
+---------------------------------------
| Cet engin est un single page application
| cette version de l'engin ne permet de changer qu'un image à la fois par page
+----------------------------------------------------
synopsis : j'ai fait cet engin pour une amie (\).(\)
version : 0.1
authors : zulad//
-->
<head>
<meta charset="UTF-8" />
<script src="scripts/jquery-1.11.3.js" ></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" > </link>
</head>
<body onload="fillPage(1);" >
<div id="main" />
</body>
</html>
<script>
// Les données peuvent être modifiées en fonction de l'histoire
var datas = {
_cpt:1,
_1:{img:"0_start.svg", txt:"Il est 07h au réveil de Lucie. Si vous voulez vous lever : {{cliquez ici|2}} "},
_2:{img:"0_bed.svg", txt:"Il était l'heure de se lever. Si vous voulez vous laver : {{cliquez ici|3}} - Si vous voulez vous recoucher : {{cliquez ici|1}}"},
_3:{img:"2_sdb.svg", txt:"Il était l'heure de se laver. Si vous voulez vous recoucher : {{cliquez ici|1}} - Si vous voulez lire les news : {{cliquez ici|4}}"},
_4:{img:"3_miroir.svg", txt:"Il était l'heure de regarder les news. Si vous voulez vous coiffer : {{cliquez ici|5}}"},
_5:{img:"4_miroir.svg", txt:"Il était l'heure de se coiffer"}
};
// Ceci est le noyau de l'application. Il est préférable de ne pas le modifier
function getMatches(string, regex, index) {
index || (index = 1); // default to the first capturing group
var matches = [];
var match;
while (match = regex.exec(string)) {
matches.push(match[index]);
}
return matches;
}
function fillText(str) {
var re = new RegExp("(\{\{)([ a-zA-Z0-9|]*)(\}\})", "gm");
matches = str.match(re);
var matches = getMatches(str, re, 2);
var lnk = Array();
for (m in matches)
{
lnk[m] = matches[m].split("|");
str = str.replace(matches[m], "<span class='click' onclick='fillPage("+lnk[m][1]+")'>"+lnk[m][0]+"</span>");
str = str.replace("{{","").replace("}}","");
}
return str;
}
function fillPage(page) {
if(!page) page = 1;
var content_1 = '<table id="tbl" width="480"> \
<tr><td width="10"><img id="imgTrg" src="assets/images/'+eval('datas._'+page+'.img')+'" onclick="fillPage(target);" /></td></tr> \
<tr><td id="txt">'+fillText(eval('datas._'+page+'.txt'))+'<td/></tr> \
</table>'; $("#main").html(content_1); eval(datas._cpt = page);
}
</script>
Résultat
modifierLe résultat HTML peut être porté sur tablette ou smartphone. J'ai prévu les screenshots suivant pour un petit web serial sur smartphone.
