Aujourd’hui petit projet pour une classe de CM1-CM2. Après la création des livres papiers par la maîtresse, voici un programme qui vous permettra de créer facilement des livres web en Javascript et HTML. Le projet nécessite quelques connaissances en informatique.
Comment créer facilement un livre web ?
Toutes les explications de cet article sont basés sur le script de base turn.js. Cette page permet de télécharger un javascript qui est ensuite modifiable pour créer son livre. Afin de créer facilement un livre web, je vous laisse les fichiers .html et .js les plus simples possibles pour la réalisation de ce type de livre :
- les pages sont des images scannées ou images obtenues d’un PDF ;
- les pages sont carrées ;
- les images font 600 pixels de côté pour mon exemple.
Les étapes de la création de votre livre web
En premier lieu, créez un dossier « Livres » dans lequel nous travaillerons ensuite.
1/ Les miniatures des livres web
Dans le dossier « Livres », créez un dossier « pics », qui contiendra les miniatures des livres. Ces miniatures sont les images des livres qui seront visibles sur les étagères. Elles doivent faire 170×170 (vous pouvez par exemple utiliser paint.net pour les dimensionner), se nommer book1, book2, … et être au format jpg.
2/ Les pages de nos livres numériques
Dans le dossier « Livres », créez un dossier « pages », qui contiendra les pages de chaque livre, avec des titres permettant de connaitre l’ordre, exemple : Charlemagne-1, Charlemagne-2, … Les images doivent faire 600 x 600.
3/ Le code de « l’étagère » de livres
Ouvrez un fichier texte vide avec le bloc-notes. Ce premier fichier sera votre « étagère », copiez-collez ce code :
Pensez à modifier les élément nécessaires et à bien ajouter une ligne pour chaque livre de chaque étagère. Enregistrez ensuite le fichier sous avec pour nom « index.html ».
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en" class="noie"> <!--<![endif]-->
<head>
<title>Nos livres web</title>
<meta name="viewport" content="width=1200" />
<link type="text/css" rel="stylesheet" href="css/jquery.ui.css"></link>
<link type="text/css" rel="stylesheet" href="css/default.css"></link>
<script type="text/javascript" src="extras/all.js"></script>
<script type="text/javascript" src="lib/hash.js"></script>
<script type="text/javascript" src="lib/turn.min.js"></script>
<script type="text/javascript" src="lib/zoom.min.js"></script>
<script type="text/javascript" src="lib/bookshelf.js"></script>
</head>
<body style="background:navajowhite">
<div class="bookshelf">
<h1>Les livres web de la classe</h1>
<div class="shelf">
<div class="row-1">
<div class="loc">
<div> <a href="le-mystere-de-Zeus.html" title="Le mystère de Zeus par "><div class="sample thumb1"></div></a></div>
<div> <a href="le-film-de-louis-de-Funes.html" title="Le film de Louis de Funès par"><div class="sample thumb2"></div></a></div>
<div><a href="louis-XIV.html" title="Louis XIV par Flavie, Noa et Claudia"><div class="sample thumb3"></div></a></div>
<div><a href="les-bijoux-de-Cleopatre.html" title="Les bijoux de Cléopâtre par"><div class="sample thumb4"></div></a></div>
</div>
</div>
<div class="row-2">
<div class="loc">
<div><a href="le-nez-de-Cleopatre.html" title="Le nez (tout fin) de Cléopâtre par "><div class="sample thumb5"></div></a></div>
<div><a href="Charlemagne-et-sa-cape-magique.html" title="Charlemagne et sa cape magique par "><div class="sample thumb6"></div></a></div>
<div><a href="le-General-de-Gaulle.html" title="Le Général de Gaulle par "><div class="sample thumb7"></div> </div>
</div>
</div>
</div>
<h2>Liste des livres (cliquez sur le titre si vous n'arrivez pas à attraper un livre sur l'étagère) :</h2>
<ul>
<li><a href="le-mystere-de-Zeus.html" title="Le mystère de Zeus par ">Le Mystère de Zeus par <i></i></a></li><br/>
<li><a href="le-film-de-louis-de-Funes.html" title="Le film de Louis de Funès par">Le film de Louis de Funès par <i></i></a></li><br/>
<li><a href="louis-XIV.html" title="Louis XIV par Flavie, Noa et Claudia">Louis XIV par <i></i></a></li><br/>
<li><a href="les-bijoux-de-Cleopatre.html" title="Les bijoux de Cléopâtre par">Les bijoux de Cléopâtre par <i></i></a></li><br/>
<li><a href="le-nez-de-Cleopatre.html" title="Le nez (tout fin) de Cléopâtre par ">Le nez (tout fin) de Cléopâtre par <i></i></a></li></br>
<li><a href="Charlemagne-et-sa-cape-magique.html" title="Charlemagne et sa cape magique par ">Charlemagne et sa cape magique par <i></i></a></li></br>
<li><a href="le-General-de-Gaulle.html" title="Le Général de Gaulle par ">Le Général de Gaulle par <i></i></a></li></br>
<br/><br/><br/>
</ul>
</div>
<script type="text/javascript">
//1953 360
yepnope({
test : Modernizr.csstransforms,
nope : ['lib/turn.html4.min.js', 'css/jquery.ui.html4.css']
});
$('#sample-viewer a').click(function() {
$(this).hide();
yepnope({
test : Modernizr.csstransforms,
load: ['samples/basic/js/basic.js', 'samples/basic/css/basic.css'],
nope: 'samples/basic/css/basic.html4.css?'+Math.round(Math.random()*100)
});
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28960832-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
4/ Le code d’un livre web
On crée ensuite une page pour chaque livre avec le code suivant, à copier-coller dans un fichier texte vide :
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Le nez (tout fin) de Cléopâtre</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script>
</head>
<body style="background:navajowhite">
<br/>
<a href="index.html">Retourner à la bibliothèque</a>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(pages/NDC1.jpg)"></div>
<div style="background-image:url(pages/NDC2.jpg)"></div>
<div style="background-image:url(pages/NDC3.jpg)"></div>
<div style="background-image:url(pages/NDC4.jpg)"></div>
<div style="background-image:url(pages/NDC5.jpg)"></div>
<div style="background-image:url(pages/NDC6.jpg)"></div>
<div style="background-image:url(pages/NDC7.jpg)"></div>
<div style="background-image:url(pages/NDC9.jpg)"></div>
</div>
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:1200,
// Height
height:600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
</script>
</body>
</html>
Le nom de chaque page doit être un des noms utilisés à l’étape 2 (« nom-du-fichier-du-livre-numero-1.html »).
5/ Les fichiers de style et JavaScript
Pour le reste des fichiers, qui gèrent le style et le JavaScript, cliquez ici pour récupérer les dossiers correspondants.
Vous n’avez plus qu’à décompresser ce dossier dans votre dossier « Livres ». Ceci doit vous créer quatre dossiers : « css », « extras », « js » et « lib ».
Voilà, vous pouvez maintenant ouvrir le fichier index.html en double-cliquant dessus, ou avec un navigateur et votre étagère s’ouvre, vous permettant de visualiser vos différents livres web.
Bonjour, superbe idée !
Mais le script ne s’affiche pas correctement 🤔
Merci
Bonjour,
effectivement petit problème de mise à jour d’un module. je vais essayer de corriger cela !
Bonne journée et merci d’avoir prévenu.
Bonsoir,
Merci pour le retour 🤗 Bravo pour le travail !
Est-ce cela explique aussi comment reproduire la bibliothèque que vous présentez ici : https://blog.partiprof.fr/wp-content/uploads/2019/06/cr%C3%A9er-livre-web-facilement.jpg
Merci les codes sont plus visibles 😀 quel est le module wordpress qui était défectueux ? Sinon oui, la bibliothèque ici https://blog.partiprof.fr/wp-content/uploads/2019/06/cr%C3%A9er-livre-web-facilement.jpg est elle animée comme sur le modèle de turn.js ? Bonne soirée
Bonjour,
de rien et merci de m’avoir prévenu ! C’était le module Pastacode qui ne fonctionnait plus. J’ai repris les codes de certains livres mais je n’ai pas eu le temps d’enlever ce qu’il y avait déjà, il faudra donc bien tout personnaliser.
La bibliothèque est la même que celle de turn.js oui.
Bonne journée !