Créer facilement un livre web en javascript

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 :

<!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 de NIVEAU DE LA OU LES CLASSE(S)<br/>
	de l'école NOM DE VOTRE ECOLE</h1>
		<div class="shelf">
			<!--Etagère 1-->
			<div class="row-1">
				<div class="loc">
					<div> <a href="nom-du-fichier-du-livre-numero-1.html" title="Titre du livre 1"><div class="sample thumb1"></div></a></div>
					<!-- Rajouter une ligne identique à celle juste au-dessus pour 1 nouveau livre sur l'étagère 1-->
				</div>
			</div>
			<!--Etagère 2-->
			<div class="row-2">
				<div class="loc">
					<div> <a href="nom-du-fichier-du-livre-numero-2.html" title="Titre du livre 1"><div class="sample thumb1"></div></a></div>
					<!-- Rajouter une ligne identique à celle juste au-dessus pour 1 nouveau livre sur l'étagère 2-->
				</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="nom-du-fichier-du-livre-numero-1.html" title="Titre du livre 1"><i>Titre du libre 1</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>

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 ».

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>Charlemagne et sa cape magique</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/Charlemagne-1.jpg)"></div>
			<div style="background-image:url(pages/Charlemagne-2.jpg)"></div>
			<!--Ajoutez une ligne identique à la précédente pour chaque page du livre -->
</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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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