Impress.js. Presentacions amb HTML5
Introducció
5 of the Best Free HTML5 Presentation Systems:
Projecte impress.js:
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. Demostracions oficials i exemples:
Bones pràctiques per fer una presentació HTML5:
Tutorials
Els següents tutorials són els que proposa la pàgina oficial en el github:
- Creating Stunning Visualizations with Impress.js (http://www.1stwebdesigner.com/css/creating-stunning-visualizations-with-impress-js/)
- Making an Impressive Product Showcase with CSS3 (http://tutorialzine.com/2012/02/css3-product-showcase/)
- How To Use Impress.js (http://www.cubewebsites.com/blog/guides/how-to-use-impress-js/)
- Impress With Impress (http://www.andismith.com/blog/2012/01/impress-with-impress/)
Per instal.lar impress només cal descarregar i descomprimir el zip de la pàgina del github. Si ens fixem, bàsicament el projecte consta de la carpeta js/ amb el fitxer impress.js; la carpeta css/ amb el fitxer impress-demo.css; i el fitxer index.html de l'exemple oficial que ens pot servir de plantilla, i que està ple de comentaris.
El millor que podem fer per començar a treballar, a part de llegir els diferents tutorials, és mirar el codi index.html i mirar d'adaptar-lo a un projecte nostre. Això és el que fem a classe, explicant els comentaris que es troben dins el fitxer index.html. I així, adaptant de forma ràpida el codi, és com obtenim la primera presentació: marietes.html.
... So if you want to build great presentation take a pencil and piece of paper. And turn off the computer. ... Think about it. 'Cause impress.js may not help you, if you have nothing interesting to say.
Feina per l'alumne
- Fer una presentació senzilla, on utilitzis diferents funcionalitats que et proporciona la llibreria impress.js
- Modifica en algun aspecte el full d'estils, de manera que comencis a personalitzar els disseny de la teva presentació.
- Minimitza el codi impress.js amb una eina automàtica com ara http://jscompress.com/.
El resultat de minimitzar el codi (fixar-se en les primeres línies) seria:
(function ( document, window ) {
'use strict';
// HELPER FUNCTIONS
// `pfx` is a function that takes a standard CSS property name as a parameter
// and returns it's prefixed version valid for current browser it runs in.
// The code is heavily inspired by Modernizr http://www.modernizr.com/
var pfx = (function () {
queda reduït a:
(function(e,t){"use strict";var n=function(){var
que representa una reducció del codi de 32840 bytes a 7020 bytes, que és una reducció del
(32840 - 7020) / 32840 = 78%
Fixem-nos que la minimització del codi implica:
- eliminació dels comentaris
- eliminació dels retorns de carro
- renombrar les variables.
- desavantatge: es perd la llegibilitat del codi.
Efectivament, substituïnt impress.js per impress_min.js funciona correctament.
NOTA: Aquesta pràctica no té entrega. Els alumnes que ho facin mostraran els resultats a classe, i es valorarà positivament la feina feta.
creat per Joan Quintana Compte, abril 2014
