Joan a 17:16, 4 abr 2016

2016-04-04T17:16:53Z

Pàgina nova

=Introducció=
5 of the Best Free HTML5 Presentation Systems:
*http://www.sitepoint.com/5-free-html5-presentation-systems/

Projecte impress.js:
*https://github.com/bartaz/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:
*https://github.com/impress/impress.js/wiki/examples-and-demos

Bones pràctiques per fer una presentació HTML5:
*http://www.garrreynolds.com/preso-tips/design/
=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''.

<pre>
...
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.
</pre>
=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:
<pre>
(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 () {
</pre>
queda reduït a:
<pre>
(function(e,t){"use strict";var n=function(){var
</pre>
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.

{{Autor}}, abril 2014

Impress.js. Presentacions amb HTML5 - Historial de revisió

Joan a 17:16, 4 abr 2016