HTML 5 : Google libère le code de son livre interactif
Sur les Navigateurs et le Web pour que les développeurs puissent l'adapter à leurs besoins
Le 2011-06-06 15:35:05, par Idelways, Expert éminent sénior
Google poursuit le développement de son livre de vulgarisation interactive du Web écrit en HTML5 : « 20 trucs que j'ai appris sur les navigateurs et le Web », lancé l'année passée.
Cette semaine, le géant américain des services en ligne publie le code source de cet outil, qui peut être utilisé librement désormais pour éditer d'autres livres interactifs.
Écrit en pur HTML5, JavaScript et CSS, ce livre reproduit l'apparence et l'interaction des livres papiers classiques, tout en intégrant des options avancées, comme la disponibilité hors connexion, la recherche facilitée ou la possibilité de marquer des pages.
Ce livre utilise l'élément Canvas du HTML5 pour animer les illustrations du livre et pour réaliser la transition entre les pages. L'animation de rotation des pages et les ombres sont dessinées en Canvas et générées en JavaScript.
L'API Application Cache permet l'accessibilité du livre hors connexion après une première consultation.
L'API Local Storage permet quant à elle de reprendre la lecture là ou l'utilisateur l'avait laissée. History API est utilisée pour améliorer la navigation et le référencement en forçant le changement d’URL à la barre d’adresse, sans rechargement complet de la page.
Du côté de CSS, ce « Curieux guide des navigateurs et du Web » utilise des fichiers de polices chargées en CSS, animations, dégradés et ombres pour améliorer l'esthétique de l'application.
Destiné à promouvoir l'utilisation du Web ouvert à travers la démonstration de ses capacités, ce guide a été récompensé durant la 15e cérémonie des Webby Awards (sorte d'Oscars de l'Internet), dans les catégories Éducation, meilleure conception visuelle et meilleures pratiques.
Pour les développeurs Web, il s'agit là d'un cas d'école et d’un bon point de départ pour réaliser des livres interactifs en HTML5.
Le code source du livre interactif est disponible en téléchargement sur Google Code
Le Guide est disponible sur celle-ci
Et vous ?
Que pensez-vous de ce livre interractif ?
Cette semaine, le géant américain des services en ligne publie le code source de cet outil, qui peut être utilisé librement désormais pour éditer d'autres livres interactifs.
Écrit en pur HTML5, JavaScript et CSS, ce livre reproduit l'apparence et l'interaction des livres papiers classiques, tout en intégrant des options avancées, comme la disponibilité hors connexion, la recherche facilitée ou la possibilité de marquer des pages.
Ce livre utilise l'élément Canvas du HTML5 pour animer les illustrations du livre et pour réaliser la transition entre les pages. L'animation de rotation des pages et les ombres sont dessinées en Canvas et générées en JavaScript.
L'API Application Cache permet l'accessibilité du livre hors connexion après une première consultation.
L'API Local Storage permet quant à elle de reprendre la lecture là ou l'utilisateur l'avait laissée. History API est utilisée pour améliorer la navigation et le référencement en forçant le changement d’URL à la barre d’adresse, sans rechargement complet de la page.
Du côté de CSS, ce « Curieux guide des navigateurs et du Web » utilise des fichiers de polices chargées en CSS, animations, dégradés et ombres pour améliorer l'esthétique de l'application.
Destiné à promouvoir l'utilisation du Web ouvert à travers la démonstration de ses capacités, ce guide a été récompensé durant la 15e cérémonie des Webby Awards (sorte d'Oscars de l'Internet), dans les catégories Éducation, meilleure conception visuelle et meilleures pratiques.
Pour les développeurs Web, il s'agit là d'un cas d'école et d’un bon point de départ pour réaliser des livres interactifs en HTML5.
Et vous ?
-
Camille_BMembre éclairéParce que le JavaScript Google il ne fait pas que tourner la page : rien n'est gratuit avec eux.
1) Une preuve ou c'est juste du fud ?
2) le code étant open-source (et puis javascript pour le coup c'est pas difficile à désassembler), qu'est-ce qui empêche des versions non "fliquées" (à supposer qu'il y ait quelque chose à craindre ).
Sinon, personnellement, je trouve l'initiative sympathique.le 07/06/2011 à 16:04 -
benwitRédacteur@tagalog75,
Si tu récupères leur projet, tu liras :
Back-end -- the application runs on Google App Engine (GAE) and stores article
data in the App Engine Datastore. Most of the server side code is written in
PHP, but Since GAE only supports Java and Python natively, the app uses Quercus,
a Java implementation of the PHP language
(http://www.caucho.com/resin-3.0/quercus/). Some native Java is also used for
datastore interactions.
Front-end -- the application takes advantage of many of the latest HTML5
technologies, for which Google Chrome has very good support. These features
include: Canvas element animations (for page flip and animated illustrations),
HTML5 history API, CSS3 transitions, and offline mode. Much of the JavaScript
code uses native methods, but jQuery is also used for cross-browser
compatibility.le 08/06/2011 à 8:28 -
Camille_BMembre éclairéRien de mystérieux, Google ne s'en cache pas : cf Google Analytics sur Wikipedia :le 07/06/2011 à 19:24
-
LouhikeMembre habituéL'initiative est louable mais je trouve l'utilisation de "faux livre" de ce type pour exposer du contenu sur internet peu ergonomique.
C'est joli, mais le fait de tourner les pages est une perte de temps et je trouve ça pénible au bout d'un moment.le 09/06/2011 à 13:15 -
matpushMembre avertiJ'en suis au troisième chapitre et je trouve ce "livre" très intéressant et très clair dans ses explications.
Je vais peut être même m'en servir pour faire comprendre le fonctionnement d'internet à ma famille !le 06/06/2011 à 16:29 -
danielhagnoulRédacteurBonsoir
Hélas, il m'a été impossible de télécharger le code du livre, car cette possibilité n'existe pas sur la page ouverte par http://code.google.com/p/20thingsilearned/.le 06/06/2011 à 21:26 -
jminiMembre éprouvéIl y a quoi dans le repository SVN du projet (navigateur de fichiers : /trunk) ???
ant, src, war...
ça sonne plutôt bien comme nom de dossiers. Il me semble que le dossier war contient ce qu'il faut...
Pour le télécharger depuis le répertoire SVN (on parle plutôt d'un Checkout), il doit exister sur developpez.com un tutoriel expliquant SVN...le 06/06/2011 à 23:12 -
danielhagnoulRédacteurBonsoir
Merci pour le lien.le 06/06/2011 à 23:24 -
benwitRédacteurIls utilisent Quercus.
A moins qu'ils ne l'aient déjà écrit en PHP avant de la porter sous AppEngine, je ne vois pas pourquoi ils l'ont pas écrit directement en Java.le 07/06/2011 à 17:00 -
camus3Membre éprouvébien gentil, mais ultra lent sous firefox ou opera dernière version( pc 2 coeurs 2.6ghz, 3 gig de ram )le 07/06/2011 à 19:01