Wikilivres

« Le langage HTML/HTML5 » : différence entre les versions

Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Contenu supprimé Contenu ajouté
VisuelWikicode
Page créée avec « {{nouveau livre}} ==Faire un livre dont vous êtes le héros== ===Idée maîtresse=== L’arborescence classique est : * ./ :: ./scripts :: ./styles :: ./assets <-- c'es... »
Ligne 1 :
{{nouveau livre}}
<noinclude>{{Ébauche}}
{{Le langage HTML}}</noinclude>
 
==Faire un livre dont vous êtes le héros==
La prochaine version de HTML sera la version 5. Elle n'est pas encore finalisée mais rien ne vous empêche de l'utiliser dans vos pages, surtout qu'elle apporte plusieurs nouveautés intéressantes.
===Idée maîtresse===
 
L’arborescence classique est :
==Le doctype==
* ./
En 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.
:: ./scripts
&lt;!DOCTYPE html&gt;
:: ./styles
:: ./assets <-- c'est ici que viennent les images et les sons
:: ./assets/images
 
==La syntaxe=Source===
<source lang="html5">
En 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.
<!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
De plus, les balises &lt;style&gt; et &lt;script&gt; n'ont plus besoin systématiquement de l'attribut <code>type</code>. S'il n'est pas précisé, la balise &lt;style&gt; accepte le css par défaut, tandis que la balise &lt;script&gt;, elle, accepte le javascript.
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) {
==&lt;canvas&gt;==
var re = new RegExp("(\{\{)([ a-zA-Z0-9|]*)(\}\})", "gm");
La nouvelle balise &lt;canvas&gt; permet de créer une zone de dessin.
matches = str.match(re);
On utilise ensuite du JavaScript pour créer/animer celle-ci.
 
var matches = getMatches(str, re, 2);
Exemple :
<pre>
var lnk = Array();
<canvas id="myCanvas" width="300" height="200" />
for (m in matches)
<script>
{
var canvas=document.getElementById("myCanvas");
lnk[m] = matches[m].split("|");
var context=canvas.getContext("2d");
str = str.replace(matches[m], "<span class='click' onclick='fillPage("+lnk[m][1]+")'>"+lnk[m][0]+"</span>");
context.strokeStyle="#900";
str = str.replace("{{","").replace("}}","");
context.strokeRect(20,30,100,50);
}
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>
</pre>
Ce code affichera :
[[File:HTML5 canvas example.png|167x167px]]
 
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]]
 
</source>
==&lt;audio&gt;==
La balise &lt;audio&gt; permet d'afficher un lecteur audio.
L'avantage par rapport aux balises &lt;object&gt; et &lt;embed&gt; est que le fichier est lu directement par le navigateur, il n'y a plus besoin de plugin.
 
===Résultat===
Elle s'utilise comme ceci :
Le résultat html peut être porté sur tablette ou smartphone. J'ai prévu les screenshots suivant pour un petit web serial sur smartphone.
<pre>
<audio src="monfichier.mp3" autoplay controls loop />
</pre>
Les attributs <code>autoplay</code>, <code>controls</code> et <code>loop</code> sont facultatifs. Ils permettent respectivement de lancer automatiquement la lecture, d'afficher les boutons lecture/arrêt et de lire la piste en boucle.
 
[[File:Livre interactif en HTML5.png|Cette image illustre un essai de livre interactif pour un didacticiel sur wikibooks.]]
Vous pouvez aussi spécifier plusieurs sources, dans différents formats, comme ceci :
[[File:Livre interactif 02.png|Livre interactif 02]]
<pre>
[[File:Livre interactif 03.png|Livre interactif 03]]
<audio>
<source src="monfichier.mp3" />
<source src="monfichier.ogg" />
</audio>
</pre>
Le navigateur choisira alors le format qui lui convient le mieux.
 
[[Catégorie:Littérature]]
==&lt;video&gt;==
La balise &lt;video&gt; s'utilise comme la balise &lt;audio&gt;, sauf qu'il faut préciser les dimensions de la vidéo, ainsi que le type MIME du fichier :
<pre>
<video width="360" height="240">
<source src="movie.ogv" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
</video>
</pre>
Récupérée de « https://fr.wikibooks.org/wiki/Le_langage_HTML/HTML5 »