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 :

[pastacode lang= »markup » manual= »%3C!doctype%20html%3E%0A%3C!–%5Bif%20lt%20IE%207%20%5D%3E%20%3Chtml%20lang%3D%22en%22%20class%3D%22ie6%22%3E%20%3C!%5Bendif%5D–%3E%0A%3C!–%5Bif%20IE%207%20%5D%3E%20%20%20%20%3Chtml%20lang%3D%22en%22%20class%3D%22ie7%22%3E%20%3C!%5Bendif%5D–%3E%0A%3C!–%5Bif%20IE%208%20%5D%3E%20%20%20%20%3Chtml%20lang%3D%22en%22%20class%3D%22ie8%22%3E%20%3C!%5Bendif%5D–%3E%0A%3C!–%5Bif%20IE%209%20%5D%3E%20%20%20%20%3Chtml%20lang%3D%22en%22%20class%3D%22ie9%22%3E%20%3C!%5Bendif%5D–%3E%0A%3C!–%5Bif%20!IE%5D%3E%3C!–%3E%20%3Chtml%20lang%3D%22en%22%20class%3D%22noie%22%3E%20%3C!–%3C!%5Bendif%5D–%3E%0A%3Chead%3E%0A%3Ctitle%3ENos%20livres%20web%3C%2Ftitle%3E%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3D1200%22%20%2F%3E%0A%3Clink%20type%3D%22text%2Fcss%22%20rel%3D%22stylesheet%22%20href%3D%22css%2Fjquery.ui.css%22%3E%3C%2Flink%3E%0A%3Clink%20type%3D%22text%2Fcss%22%20rel%3D%22stylesheet%22%20href%3D%22css%2Fdefault.css%22%3E%3C%2Flink%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22extras%2Fall.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22lib%2Fhash.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22lib%2Fturn.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22lib%2Fzoom.min.js%22%3E%3C%2Fscript%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22lib%2Fbookshelf.js%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%20style%3D%22background%3Anavajowhite%22%3E%0A%0A%3Cdiv%20class%3D%22bookshelf%22%3E%0A%09%3Ch1%3ELes%20livres%20web%20de%20la%20classe%20de%20NIVEAU%20DE%20LA%20OU%20LES%20CLASSE(S)%3Cbr%2F%3E%0A%09de%20l’%26eacute%3Bcole%20NOM%20DE%20VOTRE%20ECOLE%3C%2Fh1%3E%0A%09%09%3Cdiv%20class%3D%22shelf%22%3E%0A%09%09%09%3C!–Etag%C3%A8re%201–%3E%0A%09%09%09%3Cdiv%20class%3D%22row-1%22%3E%0A%09%09%09%09%3Cdiv%20class%3D%22loc%22%3E%0A%09%09%09%09%09%3Cdiv%3E%20%3Ca%20href%3D%22nom-du-fichier-du-livre-numero-1.html%22%20title%3D%22Titre%20du%20livre%201%22%3E%3Cdiv%20class%3D%22sample%20thumb1%22%3E%3C%2Fdiv%3E%3C%2Fa%3E%3C%2Fdiv%3E%0A%09%09%09%09%09%3C!–%20Rajouter%20une%20ligne%20identique%20%C3%A0%20celle%20juste%20au-dessus%20pour%201%20nouveau%20livre%20sur%20l’%C3%A9tag%C3%A8re%201–%3E%0A%09%09%09%09%3C%2Fdiv%3E%0A%09%09%09%3C%2Fdiv%3E%0A%09%09%09%3C!–Etag%C3%A8re%202–%3E%0A%09%09%09%3Cdiv%20class%3D%22row-2%22%3E%0A%09%09%09%09%3Cdiv%20class%3D%22loc%22%3E%0A%09%09%09%09%09%3Cdiv%3E%20%3Ca%20href%3D%22nom-du-fichier-du-livre-numero-2.html%22%20title%3D%22Titre%20du%20livre%201%22%3E%3Cdiv%20class%3D%22sample%20thumb1%22%3E%3C%2Fdiv%3E%3C%2Fa%3E%3C%2Fdiv%3E%0A%09%09%09%09%09%3C!–%20Rajouter%20une%20ligne%20identique%20%C3%A0%20celle%20juste%20au-dessus%20pour%201%20nouveau%20livre%20sur%20l’%C3%A9tag%C3%A8re%202–%3E%0A%09%09%09%09%3C%2Fdiv%3E%0A%09%09%09%3C%2Fdiv%3E%0A%09%09%3C%2Fdiv%3E%0A%09%3Ch2%3EListe%20des%20livres%20(cliquez%20sur%20le%20titre%20si%20vous%20n’arrivez%20pas%20%26agrave%3B%20attraper%20un%20livre%20sur%20l’%26eacute%3Btag%26egrave%3Bre)%20%3A%3C%2Fh2%3E%0A%09%3Cul%3E%0A%09%3Cli%3E%3Ca%20href%3D%22nom-du-fichier-du-livre-numero-1.html%22%20title%3D%22Titre%20du%20livre%201%22%3E%3Ci%3ETitre%20du%20libre%201%3C%2Fi%3E%3C%2Fa%3E%3C%2Fli%3E%3Cbr%2F%3E%0A%09%3Cbr%2F%3E%3Cbr%2F%3E%3Cbr%2F%3E%0A%09%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A%0A%0A%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%0A%2F%2F1953%20360%0A%0Ayepnope(%7B%0A%09test%20%3A%20Modernizr.csstransforms%2C%0A%09nope%20%3A%20%5B’lib%2Fturn.html4.min.js’%2C%20’css%2Fjquery.ui.html4.css’%5D%0A%7D)%3B%0A%0A%24(‘%23sample-viewer%20a’).click(function()%20%7B%0A%09%24(this).hide()%3B%0A%09yepnope(%7B%0A%09%09test%20%3A%20Modernizr.csstransforms%2C%0A%09%09load%3A%20%5B’samples%2Fbasic%2Fjs%2Fbasic.js’%2C%20’samples%2Fbasic%2Fcss%2Fbasic.css’%5D%2C%0A%09%09nope%3A%20’samples%2Fbasic%2Fcss%2Fbasic.html4.css%3F’%2BMath.round(Math.random()*100)%0A%09%7D)%3B%0A%7D)%3B%0A%0Avar%20_gaq%20%3D%20_gaq%20%7C%7C%20%5B%5D%3B%0A_gaq.push(%5B’_setAccount’%2C%20’UA-28960832-1’%5D)%3B%0A_gaq.push(%5B’_trackPageview’%5D)%3B%0A%0A(function()%20%7B%0A%09var%20ga%20%3D%20document.createElement(‘script’)%3B%20ga.type%20%3D%20’text%2Fjavascript’%3B%20ga.async%20%3D%20true%3B%0A%09ga.src%20%3D%20(‘https%3A’%20%3D%3D%20document.location.protocol%20%3F%20’https%3A%2F%2Fssl’%20%3A%20’http%3A%2F%2Fwww’)%20%2B%20′.google-analytics.com%2Fga.js’%3B%0A%09var%20s%20%3D%20document.getElementsByTagName(‘script’)%5B0%5D%3B%20s.parentNode.insertBefore(ga%2C%20s)%3B%0A%7D)()%3B%0A%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E » message= » » highlight= » » provider= »manual »/]

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 :

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.

Créer facilement un livre web en javascript