Créer facilement un livre web en javascript

par

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 ?

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&egrave;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&egrave;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&eacute;op&acirc;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&eacute;op&acirc;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&eacute;n&eacuteral 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 &agrave; attraper un livre sur l'&eacute;tag&egrave;re) :</h2>
	<ul>
	<li><a href="le-mystere-de-Zeus.html" title="Le myst&egrave;re de Zeus par ">Le Myst&egrave;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&egrave;s par">Le film de Louis de Fun&egrave;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&eacute;op&acirc;tre par">Les bijoux de Cl&eacute;op&acirc;tre par <i></i></a></li><br/>
	<li><a href="le-nez-de-Cleopatre.html" title="Le nez (tout fin) de Cl&eacute;op&acirc;tre par ">Le nez (tout fin) de Cl&eacute;op&acirc;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&eacute;n&eacuteral de Gaulle par ">Le G&eacute;n&eacuteral 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&eacute;op&acirc;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/>
&nbsp;&nbsp;&nbsp;<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.

5 réflexions au sujet de “Créer facilement un livre web en javascript”

    • 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 !

      Répondre

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.