Impress.js. Presentacions amb HTML5

De Wikijoan
Dreceres ràpides: navegació, cerca

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:

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

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:

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

Eines de l'usuari
Espais de noms
Variants
Accions
Navegació
Institut Jaume Balmes
Màquines recreatives
CNC
Informàtica musical
joanillo.org Planet
Eines