Como Hacer Una Presentación Al Estilo Prezi Con Impress.js

Impress.js

IMPRESS.JS

Impress.js es una herramienta para hacer presentaciones similar a Prezi, el cual se base en las versatilidades de CSS3 y los navegadores modernos como Firefox o Chrome.

Impress.js permite hacer presentaciones con características de traslación, rotación y más, incluyendo efectos 3D. A diferencia de Prezi que cuenta con plantillas, Impress necesita ser programado pero es suficiente con lo que se puede aprender en un curso básico de programación.

También en la actualidad este proyecto de software libres ha crecido y muchos colaboradores han desarrollado plantillas que pueden ser descargadas, así como también herramientas de edición online.

ENLACES DE INTERÉS

• Ejemplo en Prezi
• Creacion de una presentacion online con Impressionist
• Partido politico anti PowerPoint
• Descarga plantilla de impress.js
• Descarga de la plantilla Impressionist.
• Ejemplo palntilla de impress online
• Ejemplos y demos
• HTML en la Wikipedia
• Curso de HTML
• Java Script en la Wikipedia
• Curso De JavaScript
• Explicacion de que es CSS
• Pagina de Processing JS
• Explicacion de Processing JS

EDITORES HTML
Estos son algunos editores de código  que harán mas fácil la verificación de sintaxis y escritura de código.

• NotePad++
• Pspad
• Arachnophilia
• Compozer
• Bluegriffon

Editores Online

• Quackit
• Squarefree

CONCEPTOS BÁSICOS

Hyper Text Markup Languaje (HTML)

El uso predominante de este lenguaje es el de elaboración de paginas WEB y se utiliza para describir la estructura e información de la pagina en forma de texto.

Para editar un contenido HTML solo se necesita un editor de texto sin formato como el Gedit de Linux o el bloc de notas de windows, y para la visualización se necesita un navegador como Firefox o Chrome.

Videos Tutoriales de (HTML)

Como insertar una imagen

Cascading Styles Sheets (CSS)

Las hojas de estilo en cascada es una manera de aplicar estilos a una pagina web como el tipo de letra, el color, el fondo, etc. Este permite dar formato a un documento HTML, en términos web en HTML se realiza el contenido, pero CSS le da la presentación y diseño a ese contenido en un documento externo.
La ventaja de CSS esta en que se puede tener diferenciado el contenido de la apariencia y que si solo queremos cambiar la apariencia sin afectar el contenido modificamos el archivo CSS.

• Pagina web creada con Impress.js
• Vídeo de una presentación con Impress.js

Java Script

Tiene una sintaxis similar al lenguaje C, pero los nombres y convenciones son adoptados del lenguaje Java, hay que aclarar que Java y JavaScript son dos lenguajes de programación diferentes con propósitos también diferentes.

La utilización mas común del JavaScript es de tener funciones embebidas en paginas HTML que puedan ser ejecutadas desde el lado del usuario por medio de un navegador como los actuales que pueden interpretar el código JavaScript.

Processing Js

Las versiones actuales de Processing cuentan con la opción de llevar el código realizado en Processing a código de JavaScript de manera que pueda utilizar y ejecutar este código en una pagina web. Esto ofrece a los programadores web disponer de la facilidad de realización de aplicaciones gráficas con Processig.

Trabajo Sobre Impress Js Grupo 801b ( 2 puntos del parcial )
Siguiendo los tutoriales realice su propia presentación, el tema a elegir para su presentación es libre puede ser sobre deportes, música, historia, una enseñanza, un trabajo de curso etc.

• Tutorial 1
• Tutorial 2
• Tutorial 3

Ejercicios:

• Descomprima la carpeta impress.js-master.zip y abra el archivo index.html en un navegador
• Observe y siga la presentación utilice la barra espaciadora y las flechas del teclado.
• Abra en un editor de texto index.html y cambie la linea  <q>Aren't you just <b>bored</b> with all those slides-based presentations?</q> con una traducción en español mas adecuada y verifique que el cambio se realiza en la diapositiva.
• Modifique la primer diapositiva de manera que la letra sea mas grande
• Por que la primer diapositiva tiene los valores en data x -1000 y en data y -1500, que pasa si son cambiados ?
• Para que sirve el "step side" ?
• Para que sirve data-rotate y como se utiliza ? 
• Para que sirve el data-scale y como se utiliza ?
• Realice modificaciones en la presentación modificando el data-rotate y el data-scale
• Como funciona la opción 3D ?
• Modifique la presentación de manera que se vea un efecto 3D diferente al que viene por defecto.

Cuestionario:

1. Que es computación en la nube ?
2. Que significa HTML ?
3. Que es HTML y para que sirve ?
4. Cual es la versión mas actual de HTML ?
5. En HTML para que sirve el head ?
6. En HTML para que sirve el body ?
7. En HTML para que sirve la instrucción script ?
8. En HTML para que se emplean los símbolos < > 
9. Es posible en en navegador ver el código HTML de una pagina ?
10. Como se editar el código HTML ?
11. Que significa CSS ?
12. Para que sirve el CSS?
13. CSS es un lenguaje de programación ?
14. Cual es la versión mas actual de CSS ?
15. Que relación hay entre CSS y HTML ?
16. Que es JavaScript ?
17. Para que sirve JavaScript ?
18. Que relación hay entre Java y JavaScript ?
19. Que relación hay entre JavaScript y HTML ?
20. Que es processing js ?
21. Que es impress js ?
22. Que herramienta web permite hacer la presentación online utilizando Impress ?
23. Es posible agregar efectos 3d con Impress ?
24. Es posible agregar música con Impress ?
25. Por que impress js utiliza CSS y JavaScript ?