Aplicaciones HTML5 con Descartes by Juan Rivera

Red Educativa Digital Descartes

Autor: Juan Guillermo Rivera BerrĂo

2014 1

Tabla de contenidos PRÓLOGO ............................................................................................................................. 4 PUZLES .................................................................................................................................. 11 MÓDULO 1........................................................................................................................... 11 PUZLE CON PLANTILLA .................................................................................................... 11 Actividad 1. Selección y cortado de imágenes - puzle con plantilla ................ 11 Actividad 2. Creación de las piezas del puzle ....................................................... 17 Actividad 3. Publicando en la nube ........................................................................... 23 Algunos servicios de computación en la Nube.................................................................... 23 Creando nuestro directorio en GoogleDrive....................................................................... 27 MÓDULO 2........................................................................................................................... 31 PUZLES TIPO JIGSAW ...................................................................................................... 31 Actividad 1. Cortado de piezas ............................................................................... 31 PUZLE DE 16 PIEZAS CON PLANTILLA ......................................................................... 33 PUZLES LIBRES DE 9 PIEZAS TIPO JIGSAW .................................................................. 43 PUZLES LIBRES DE 16 PIEZAS TIPO JIGSAW ................................................................ 45 PUZLES LIBRES DE 25 PIEZAS TIPO JIGSAW ................................................................ 47 Actividad 2. Edición en Descartes ........................................................................... 49 PUZLE LIBRE DE 9 PIEZAS .............................................................................................. 50 PUZLES LIBRES DE 16 y 25 PIEZAS ................................................................................ 53 MÓDULO 3........................................................................................................................... 55 DISEÑANDO PUZLES CON DESCARTES.......................................................................... 55 Actividad 1.Puzles giratorios ...................................................................................... 55 Actividad 2. Puzles de arrastre .................................................................................. 72

PRESENTADORES DE DIAPOSITIVAS HTML5 ...................................................................... 93 ALGUNOS ELEMENTOS DE HTML .................................................................................... 93 CAMBIOS DE ESTILO CSS ................................................................................................ 97 CAMBIO DE ESTILO EN LA CABECERA .................................................................... 100 PARTE 1 .............................................................................................................................. 104 DIAPOSITIVAS CON DESPLAZAMIENTO EN EL PLANO .................................................. 104 PRESENTADOR DECK .................................................................................................... 105 PRESENTADOR GOOGLE (Plantilla Google) .............................................................. 112 PRESENTADOR GOOGLE MODIFICADO .................................................................... 118 PRESENTADOR DZSLIDES ............................................................................................... 123 PRESENTADOR FATHOM ............................................................................................... 126 PARTE 2 .............................................................................................................................. 127 DIAPOSITIVAS 3D ............................................................................................................... 127 PRESENTADOR REVEAL ................................................................................................. 128 PRESENTADOR BESPOKE ............................................................................................... 134 PRESENTACIÓN STACK SLIDER ..................................................................................... 140 PRESENTACIÓN SLICEBOX ............................................................................................ 145 PARTE 3 .............................................................................................................................. 147 IMPRESS.JS ......................................................................................................................... 147 HERRAMIENTAS REQUERIDAS ....................................................................................... 147 Ejemplo 1: Diapositivas en el plano ........................................................................... 150 Ejemplo 2: Diapositivas en varios planos................................................................... 156 Ejemplo 3: Diapositivas con rotaciones 3D ............................................................... 157 Ejemplo 4: Diapositivas combinadas con rotaciones 3D ....................................... 159 Ejemplo 5: Diapositivas con desplazamiento horizontal y cambio de estilos ..... 160 Ejemplo 6: Diapositiva con reproducción automática .......................................... 162 VÍDEOS INTERACTIVOS CON DESCARTES ...................................................................... 164 DEFINICIÓN .................................................................................................................... 164 ¿POR QUÉ DESCARTES? ............................................................................................... 165 PASOS PARA EL DISEÑO DE LA ESCENA ..................................................................... 166

PRÓLOGO Descartes como herramienta de autor y como proyecto educativo ha alcanzado su adolescencia –16 años– y se acerca a la mayoría de edad. Desde su nacimiento en junio de 1998 ha ido evolucionando, ha ido creciendo, entre ilusiones, acompañado del esfuerzo y empuje del grupo de profesionales de la educación que han ido aglutinándose a su alrededor y que se han ido conociendo gracias a él, los mismos que actualmente conforman la “Red Educativa Digital Descartes” o abreviadamente “RED Descartes”. Un grupo cartesiano constituido por profesorado, trabajando por el profesorado y por la comunidad educativa de la aldea global. Un grupo de aprendizaje y enseñanza, sin fronteras, que colabora y comparte saber y buen hacer educacional. En estos dieciséis años la herramienta Descartes ha ido creciendo y conformando su carácter y personalidad. Han sido cinco las versiones de Descartes en Java. Desde la versión primera caracterizada por una edición mediante líneas de comandos en la que era imprescindible conocer la sintaxis de los parámetros, hasta la edición interactiva auxiliada por el nippe (núcleo interactivo para páginas educativas) en la que progresivamente han ido incorporándose nuevos objetos cartesianos, propiedades y funcionalidades. Desde la pizarra interactiva bidimensional con construcción artística de fórmulas, hasta los gráficos tridimensionales, edición interactiva de fórmulas, imágenes, audio, vídeo, integración con otras herramientas, etc. Desde la necesidad del lenguaje html como soporte a su ser, a rizar el rizo sirviendo también de soporte a ese lenguaje. Desde una herramienta centrada en la Matemática a una multipropósito en la que se han desarrollado materiales de todos los ámbitos de conocimiento como Lengua o Ciencias Sociales, lo cual no deja de ser una muestra palpable de la unicidad del conocimiento humano, el cual usualmente compartimentamos en exceso, y también de cómo las Matemáticas siendo un soporte abstracto, fruto de la mente humana y con existencia sólo en ella, es una sólida base constructiva que a la vez extiende su capilaridad irrigando a todas las fuentes del saber. Descartes como herramienta que pone en evidencia la etimología del término latino mathematica y de su raíz griega mathematikos, pues su significado es el de “Amante del conocimiento”. Y como adolescente, Descartes, ha buscado sus propias aventuras juveniles acercándose a conocer y experimentar su propio entorno vital, un nuevo hábitat y contexto generacional en el que desarrollarse y en que profundizar la formación de su carácter y personalidad. Un mundo en el que los dispositivos tecnológicos ahora integran en su funcionamiento básico, en su concepción, la constatación de que el mundo es realmente digital, pero no sólo en su significado informático, sino también 4

en el sentido etimológico –dígito significa dedo–, que el conocimiento se adquiere a través de la percepción sensorial y en ella la manipulación con los dedos, con los dígitos, es parte primordial. Un campaña publicitaria española transmitía hace años, para promocionar el deporte, que “quien mueve las piernas, mueve el corazón” y ahora volvemos a constatar, a aprender de nuevo, que quien “mueve los dedos, mueve el seso”, que la evolución humana se cimentó en la manipulación de objetos con los dedos y la tecnología informática había establecido una brecha digital no sólo conceptual, sino real, al haber introducido interfaces no naturales, no táctiles. ¡Afortunadamente redescubrimos la rueda! El ámbito actual de desenvolvimiento de Descartes se enmarca en el estándar denominado HTML5, versión quinta del HyperText Markup Language que es el lenguaje en el que se desarrollan las páginas web. En esta versión hay que destacar como un elemento diferenciador el que se contempla el soporte nativo de multimedia y por tanto hace innecesario la utilización de plugins. Y con ello ¡Descartes abandona Java! ¡Qué desagradecidos son los jóvenes! se suele exclamar y oír, pero esa tendencia rupturista es la usual y necesaria para avanzar y descubrir nuevos ámbitos ¿verdad? Si lo analizamos detenidamente, esas rupturas son naturales, de adaptación al medio, y tiene mucha base en la historia familiar y, en la sombra, los padres suelen servir de canal y apoyo para contribuir en el logro de éxito en los nuevos caminos experimentados. Descartes ha abierto uno nuevo e incluso ha mudado o matizado su nombre y pasó a auto-denominarse DescartesJS, en una manifestación explícita en la que quiso remarcar su personalidad. Y es que el entorno y medio donde se vive condiciona las acciones y decisiones. La aparición en enero del 2010 del iPad de Apple, patrón conceptual de todas las tabletas digitales posteriores, trajo consigo un veto explícito e implícito a determinado tipo de software que ampliamente era y es utilizado en el contexto de los ordenadores. En concreto el sistema operativo iOS no permitía el uso de Java, ni de Flash Player, dos herramientas intensivamente utilizadas, entre otros objetivos, para la elaboración de recursos educativos interactivos. Puede debatirse el por qué de esta decisión estratégica y con seguridad puede elaborarse un conglomerado y una amalgama polifacética de motivos. Ésta, posiblemente, oscilaría desde la mera competencia empresarial, a la existencia de un nuevo estándar, el HTML5, cuyo nacimiento puede ubicarse en 2009 auspiciado por Apple, Mozilla y Opera. La decisión aparecía extraña para los miles de usuarios de dichas herramientas, pero como indicamos anteriormente HTML5 hacía innecesario la utilización de plugins. Con la aparición de Android hubo algunos intentos de incluir Java, pero esa línea rápidamente se abandona y se alcanza la paradoja efectiva de que algo desarrollado usando librerías de Java veta posteriormente a Java. A esa tendencia se une el hecho que desde enero de 2013 Oracle, desarrollador actual de Java, para solventar 5

deficiencias de seguridad introduce filtros que bloquean los applets y, con ello, adentran al usuario y al desarrollador de recursos con base directa o indirecta en Java en un complejo entorno técnico que desmotiva su uso, cuando no lo impide. Ante este nuevo entorno, la exclamación adecuada, en contraste con la antes citada, es: ¡Qué listos son los jóvenes! ¡DescartesJS supo avanzar! y en el momento adecuado. ¡DescartesJS es compatible con HTML5! y consecuentemente los objetos desarrollados con DescartesJS son accesibles y completamente operativos en ordenadores, como antes ocurría, y también en tabletas y smartphones, independientemente del sistema operativo que porten. Y apoyando a nuestro joven Descartes hay bastantes entusiastas que, al igual que él, también son pioneros, que se afanan en la apertura de nuevos caminos en la búsqueda del conocimiento y lo comparten altruistamente en la sublime labor vocacional de la docencia, aprenden para enseñar y enseñan para aprender. Entre ellos, destaco ahora, a mi gran amigo Juan Guillermo Rivera Berrío. ¡Descartes nos puso en contacto hace algo más de seis años! Y puso de manifiesto la relatividad einsteniana, aunque parcialmente. ”La luz” que sustenta a las TIC, las que nos servían de soporte para nuestra conexión, evidenció la contracción de las distancias, pues su, para mí, lejana Medellín antioqueña y, para él, mi lejana Córdoba andaluza quedaron transformadas en una, para mí, cercana Medellín andaluza y en una, para él, cercana Córdoba antioqueña. Pero ¡Ay! ¡El tiempo por análoga transformación lorentziana tenía que dilatarse!, ¡y no fue así! O quizás sí, para él, pues la paradoja de los gemelos se está cumpliendo. La realidad es que desde aquel entonces ando buscando tiempo y más tiempo para poder seguir la estela de mi hiperactivo sabio Juan Gmo., pues, como describía Don Pedro Calderón de la Barca: Cuentan de un sabio que un día tan pobre y mísero estaba, que sólo se sustentaba de unas hierbas que cogía. ¿Habrá otro, entre sí decía, más pobre y triste que yo?; y cuando el rostro volvió halló la respuesta, viendo que otro sabio iba cogiendo las hierbas que él arrojó. (fragmento de “La vida es sueño”) –Yo ando, no como sabio –por favor, ruego encarecidamente que omitan en mi caso la analogía y en el suyo hagan lo mismo, pero sólo con la licencia poética de pobre y mísero que es necesaria para dar sentido al contenido del poema–. Como decía, yo ando tratando 6

de recoger las hierbas que él arroja –hierbas que representan en este caso su tiempo y sus enseñanzas– , pero ¡van acumulándose en el camino! ¡No doy abasto! ¡Ayuda! ¡Ayuda! –Sí, su secreto debe de estar en el “tinto” de Colombia, que seguro que es diferente al café “sólo” que a España llega desde allá, el primero vigorizará y el segundo sólo enerva. Él, seguro que anda desahogado vitrineando en su ciudad, la de la eterna primavera, y yo jadeando tras él, en el horno cordobés donde la primavera es fugaz y ya, por estas fechas, se dan cita y regocijan el caló y la caló ¡Ozú que caló! – ¡Ah!, pero si tuviera otra tarea… quizás podría alcanzarlo. Je, Je… – ¡Hola! Juan Gmo. sería muy interesante proponer a nuestros colegas de RED Descartes una formación en presentaciones HTML5 que integren escenas de Descartes, y también en el uso de plantillas para construir escenas, por ejemplo los puzles, y también en lo último que estábamos trabajando sobre vídeos interactivos controlados con Descartes. (Je, Je…). Su respuesta no se deja esperar: – ¡Hola Pepe! ¡Magnífico! ¡De acuerdo! Te adjunto quince tipos de presentadores HTML5. Por favor, míralos y elegimos cinco para el taller… – ¡Hola Pepe! ¿Qué te parece esta escena para lo de los vídeos?... – ¡Hola Pepe!... – ¡Hola Pepe! Nueva versión del libro del taller. Me gustaría una introducción en andalú ¿te apuntas? – ¡Claro que sí, Juan Gmo.! ¡Cuenta con ello!...

¡Bueno! Ahora, al menos, tendrás que detenerte a leer mis usuales extensos escritos, ¡ha sido tu error! Aunque espero que haya otros colegas que también, todavía, hayan permanecido leyendo este prólogo y no hayan optado por pasar directamente a los contenidos. Y aunque he parodiado y teatralizado algo el diálogo anterior, utilizando cierto espejo no plano, lo que no se ha alterado en el reflejo es una constatable actividad creativa, una capacidad innata para el trabajo centrado y dirigido a la educación y al bien común, una preocupación continua por contribuir a la mejora y una ocupación ininterrumpida para conseguirlo. Son sólo algunas de las virtudes que acompañan a una mano –volvemos a constatar lo digital—siempre tendida a la colaboración. ¡Gracias amigo!

Una pequeña muestra de lo anterior la tenemos en los apuntes que presento –sí ya llegamos a ello-- notas esencialmente prácticas para conseguir un aprendizaje guiado y a la vez autónomo, para que el discente vaya constatando sus avances y que su soledad esté mitigada por el aliento cercano docente, para que los contenidos estudiados se plasmen en productos tangibles mostrables a través de la red y en el aula, para que en base a una muestra se construyan objetos personalizados, para que los ejercicios realizados sirvan de práctica para conseguir y afianzar el aprendizaje, para que lo aprendido sea reutilizado y en base al conocimiento adquirido se cree nuevo conocimiento. Los contenidos se estructuran en tres bloques: creación de puzles, presentaciones HTML5 y vídeos interactivos con Descartes. Aunque académica y pedagógicamente se planteen y aparezcan como teselas disjuntas y alejadas de áreas de conocimiento científico, la iniciativa de cada discente en su labor docente (el alumnado de este taller es profesorado) le llevará a la construcción de complejos mosaicos portadores del saber en su área. Surge de manera natural el plantearse, por ejemplo, una presentación completamente visualizable en un smartphone que integre escenas de DescartesJS en las que a través de un puzle lúdico se obtenga una imagen motivadora de un concepto, sobre el que se realice una pregunta, y que según la respuesta del encuestado se le dirija a un vídeo en el que en determinado instante se le interrogue sobre lo visto y, otra vez más, según su nueva decisión se le derive a una escena cartesiana donde investigue, descubra, practique la realidad o falacia de lo que haya contestado y enlace con otro puzle, con otro vídeo, con otra presentación, con otra escena… Todo usando herramientas y contextos de desarrollo enmarcados en el estándar HTML5 y consecuentemente totalmente portables. En el primer apartado se nos enseña a usar la plantilla de una escena de Descartes que gestiona las piezas que componen el puzle deseado. El uso de plantillas libera al usuario de conocer los intríngulis del desarrollo de escenas y le permite elaborar una escena compleja, sin más que seguir unas instrucciones sencillas que permiten parametrizarla adecuadamente. En una simplificación cuasi-publicitaria, podemos decir que es “Descartes para no cartesianos”. Las piezas del puzle se preparan a partir de una imagen previamente seleccionada y se aborda un recorte que puede ser bien rectangular o bien tipo jigsaw (corte curvilíneos típicos de los puzles clásicos) detallándose cómo pueden realizarse éstos. Y una vez realizado el primer puzle, la cadena de montaje está servida, basta aprender nuevas plantillas y se podrán construir nuevos tipos de puzles que no sólo cambien el tamaño y número de piezas, sino en los que también podrán rotarse éstas, introduciendo por tanto la dificultad de encontrar la orientación para conseguir así el encaje necesario, o también cómo abordar el desplazamiento de las mismas. Superados estos retos, siempre queda abierta la posibilidad de acudir a otros objetos publicados en la RED 8

Descartes y abordar un autoaprendizaje de otros tipos de puzles que modelan situaciones más realistas, que simulan el montaje sobre un tapete libre. En la segunda parte se realiza una escueta presentación del esquema de una página html y de algunas etiquetas básicas de este lenguaje, conocimiento necesario para ubicarse en la edición de documentos que usan esta codificación, y se nos adentra en el estudio de los presentadores HTML5. La elección de éstos viene marcada por el hecho de que lo que se persigue es que puedan embeber escenas de Descartes y que consecuentemente éstas conviertan una presentación tradicional en una presentación interactiva. Para conseguir este objetivo, incluso se han retocado algunas librerías en ellos. Y para elaborar las presentaciones se usan plantillas de diapositivas (código html) sobre las que se machacan contenidos ejemplo incluyendo los contenidos que se desean mostrar y que pueden ser en formato textual o bien referenciando o embeber objetos audiovisuales e interactivos como escenas. También se aprenden a realizar diferentes tipos de transiciones entre diapositivas que se engloban en tres secciones: Desplazamientos en el plano, Efectos tridimensionales y Escritorio tipo Prezi. En la parte final nos adentramos en los vídeos interactivos, donde Descartes, al igual que en otras ocasiones, puede y aportará bastante. En este caso la estrategia que se incluye en este documento hemos de considerarlo sólo como un ejemplo, una invitación, un avance, de las posibilidades escondidas que la imaginación cartesiana sabrá poner en evidencia, que se sabrán multiplicar y que como ha acontecido en situaciones anteriores irán apareciendo progresivamente. Y en ellas iremos asombrándonos porque portarán una gran creatividad y efectividad educativa. Así pues, se nos irán abriendo los ojos y también la boca en un círculo inmenso, un circulo representativo de nuestra RED Descartes a la que añadimos calificativos nacionales como Colombia, España y México, pero que en el día a día se evidencia cómo las fronteras no existen cuando la mente se sublima y ubica en objetivos educativos y en acrecentar la amistad, la humanidad. Gracias Juan Gmo. por invitarme a realizar esta introducción, gracias por tus enseñanzas, por tu disponibilidad, por tu colaboración, por tu ayuda y por tu amistad. Te deseo que tu tiempo continúe igual de dilatado que siempre y que yo pueda seguir recogiendo “tus hierbas”. ¡Un abrazo! En Córdoba la antioqueña y Medellín la andaluza, en el séptimo día del quinto mes del dos milésimo décimo cuarto año de nuestra era. José R. Galo Sánchez

2014

Red Educativa Digital Descartes

PUZLES MÓDULO 1 PUZLE CON PLANTILLA Actividad 1. Selección y cortado de imágenes - puzle con plantilla Para el desarrollo de este módulo, el siguiente material es necesario descargarlo e instalarlo en tu equipo (excepto el vídeo, que se deja el enlace):  El Puzle. Contiene la escena de Descartes, el intérprete y la carpeta de imágenes que manipularemos (incluye, además, los demás puzles requeridos para este apartado del libro): Descarga  TileMage (opcional). Aplicación que permite el cortado de las piezas del puzle; no obstante, en el vídeo se indica cómo hacerlo con Gimp: Descarga  El Gimp. Nuestro manipulador de imágenes, que podemos descargar desde Gimp  Vídeo. Cortado de imágenes con el Gimp: Vídeo Dale una mirada a los elementos que se encuentran en la carpeta del puzle y, además, investiga, en la opción ayuda del menú principal, el tipo de software y los autores de esta aplicación de manipulación de imágenes. Todos los puzles que vamos a diseñar, en esta unidad, tienen carpetas de imágenes cuyo contenido es la imagen original y las piezas que constituyen el juego. Los tres tipos de puzle que aprenderemos a diseñar son cuadrados, lo cual nos puede obligar a hacer algunos recortes para obtener la imagen final requerida. Es normal que en los diferentes repositorios nos encontremos con imágenes de tamaño 640x480 píxeles (herencia de los monitores VGA), 800x600 (SVGA), y tamaños superiores que, obviamente, tendrán un mayor peso. Para este primer puzle necesitamos una imagen de 360x360. Si no tenemos alguna a la mano, la buscaremos en la red, así: Escribimos 360x360 png en Google, luego hacemos clic en imágenes. En menos de un segundo, nos aparece una buena cantidad de imágenes en formato png:

De las más de 200,000 imágenes, seguramente habrá alguna que sea de nuestro gusto. Nosotros, hemos escogido esta (descargada de http://pixabay.com/):

Obviamente, es sólo por gusto y para explicar el proceso de diseño, puesto que lo recomendable es usar imágenes de autoría propia o de repositorios de dominio público1. Esta imagen la guardaremos en la carpeta de imágenes del puzle 1 con el nombre img0 (reemplazamos la imagen existente), cerciórate que esté en formato png y que su tamaño sea de 360x360. Si tenemos otra imagen cuyo tamaño no es de 360x360, bien sea porque hace parte de nuestra colección de fotos o porque en la web encontramos alguna que nos interesa, tenemos algunas opciones para el recorte o cambio de tamaño:

Algunos repositorios que se pueden consultar son:    

Banco de imágenes y sonidos del ITE: http://recursostic.educacion.es/bancoimagenes/web/ Public Domain Pictures: http://www.publicdomainpictures.net/ Pixabay: http://pixabay.com/ Tipo Clip Art: http://www.pdclipart.org/, http://openclipart.org/, http://etc.usf.edu/clipart/, http://www.clker.com/

Es importante verificar que no existan restricciones. Es posible que algunas imágenes tengan licencia tipo Creative Commons, que si bien son libres de distribuir, es necesario, al menos, dar los créditos al autor.

 Si la imagen es cuadrada, basta cambiar su tamaño con un editor simple como el Paint de Windows o un editor en línea (es importante que la imagen sea de

dimensiones mayores a 360x360, para evitar pérdida de calidad). Existen algunos enlaces para descargar programas o de ejecución en línea que permiten este redimensionado (resize), por ejemplo: http://www.picresize.com/edit http://www.obviousidea.com/es/windows-software/light-image-resizer/

En el vídeo se explica como hacerlo con Gimp (ver enlace en la página 11), en la imagen anterior se observa una forma fácil de hacerlo en línea con el programa picresize.  Si la imagen no es cuadrada, no sería recomendable forzar el cambio de tamaño a una cuadrada, por la posible distorsión que se presentaría. Podemos usar, de nuevo, un editor simple como el Paint o una aplicación de recortes o, como lo muestra el vídeo, con el Gimp. Los siguientes enlaces, son otras opciones: http://cutmypic.com/ (en línea) o http://photocutter.soft112.com/ (para descargar).

Otra opción que permite ambas acciones (cortado y redimensionado), es http://www.resizeyourimage.com/ Finalmente, creamos una copia de la imagen con un color degradado que servirá de guía en la plantilla del puzle. Esto se puede hacer con la opción colorear de algunos editores de imágenes e, incluso, con el PowerPoint en el caso de Windows.

Pero, como la idea es que este documento sirva para diferentes usuarios de diferentes plataformas, veamos cómo hacerlo con Gimp:  Ejecutamos el Gimp. Si lo hacemos por primera vez, no nos preocupemos por la demora, puesto que al inicio se cargan algunos complementos.  Desde la opción de archivos abrimos nuestra imagen.

 En la opción de colores, seleccionamos colorear.

 Reducimos el tono y la saturación, y aumentamos la luminosidad. Mientras más grande sea el valor de la luminosidad, menor será la nitidez de la imagen que, para efectos del grado de dificultad del puzle, no sería un resultado negativo.

 Para terminar, exportamos la imagen obtenida con el nombre img1 (en la carpeta de imágenes). Es importante que verifiquemos el formato de la imagen (png).

Actividad 2. Creación de las piezas del puzle Nuestro puzle es de 16 piezas cuadradas que, por simple aritmética, cada pieza sería de tamaño 90x90. Para la obtención de las piezas, tenemos las siguientes opciones:  Usar el aplicativo TileMage, que ya has descargado e instalado. El primer inconveniente, es que sólo hay versión para Windows.  Usar el Gimp. Si bien es posible la obtención de las piezas en una forma fácil, el posterior guardado de las mismas es tedioso pues debemos exportar una por una.  Usa el aplicativo en línea http://imagesplitter.net/. Iniciaremos por este último2.

ImageSplitter. Es un muy buen manipulador de imágenes que se puede instalar como un app de Google.

También puedes consultar el vídeo, que explica cómo hacerlo con los tres métodos de cortado de imagen: Vídeo

Paso 1. Seleccionamos o arrastramos nuestra imagen al cajón correspondiente y hacemos clic en el botón UPLOAD IMAGE.

Paso 2. Activamos la pestaña SPLIT IMAGE (Menú superior). Paso 3. Cambiamos las filas y columnas a un valor de 4 y seleccionamos el formato png (no lo olvidemos… formato png).

Paso 4. Hacemos clic en Split image, cuya acción será entregarnos las 16 piezas del puzle. Hasta aquí, todo fácil. El único inconveniente es que los nombres de los archivos corresponden a una matriz de 4x4, cuyas filas van de 0 a 3 (como en Descartes), al igual que las columnas; es decir, el primer elemento es 0-0 y el último 3-3, anteponiendo el nombre de la imagen y la url de ImageSplitter.

Paso 5. Renombrar las piezas, de acuerdo a la siguiente imagen:

Yâ&#x20AC;Ś eso es todo, ya podemos publicar nuestro puzle.

TileMage. Al igual que el anterior, es muy sencillo de usar. Tiene una opci贸n de guardado de archivos mucho m谩s simple. Veamos, entonces, c贸mo usarlo: Paso 1. Abrimos el aplicativo, que instalamos previamente.

Paso 2. Abrimos nuestra imagen con el bot贸n Browse

Paso 3. Cambiamos las filas y columnas a 4 y desactivamos la opción AutoMatch

Paso 4. Hacemos clic en Split, cuya acción nos muestra la siguiente pantalla:

Paso 5. Para obtener los nombres de nuestros archivos, cambiamos los parámetros de salida, así:    

Eliminamos el título (primer recuadro) Cambiamos los rótulos de filas por columnas y viceversa Eliminamos el separador y, finalmente, Cambiamos el formato a pgn.

Observa en la siguiente imagen cómo sería el formato de salida, encerrado en el bucle rojo. 21

Paso 6. Seleccionamos la carpeta de imĂĄgenes de nuestro puzle donde guardaremos nuestras piezas y hacemos clic en Split.

Yâ&#x20AC;Ś eso es todo, ya podemos publicar nuestro puzle.

Actividad 3. Publicando en la nube Algunos servicios de computación en la Nube. Utilizar los servicios de computación en la nube (Cloud Computing), consiste en aprovechar servidores desde Internet que se encargan de atender nuestras peticiones de almacenamiento de carpetas y archivos en cualquier momento, mediante una conexión a internet desde cualquier dispositivo móvil o fijo ubicado en cualquier lugar. Recurrir a estos servicios nos ahorra espacio en nuestro disco duro local, además de garantizar una mejor administración y protección de nuestros datos, ya que son sitios web menos vulnerables a los hackers. Uno de los beneficios, que aprovecharemos de algunos prestadores de servicios de computación, es la posibilidad de guardar y publicar nuestras páginas web; es decir, obtener los enlaces de nuestros puzles, presentadores u otras aplicaciones que luego compartiremos en la red. Este tipo de servicio no es ofrecido por todos los prestadores que relacionaremos a continuación, destacando dos de ellos que usaremos como servidores de publicación. Copy. Servicio que permite, en su versión gratuita, almacenar hasta 15 GB. Aplicaciones disponibles para Windows, Linux, OS X, iOS, Android, Raspberry Pi, Windows Phone. Un inconveniente para nuestros propósitos, es que no permite subir carpetas (sólo archivos). No obstante, es una buena opción de almacenamiento, especialmente para el caso de dispositivos móviles, además de obtener más espacio con cada usuario referido.

Google Drive. Permite un almacenamiento gratuito de 15 GB, además del servicio de publicación. Es uno de los servicios que recomendamos para las aplicaciones que trabajaremos y que describiremos con más detalle.

Box. En su nacimiento permitía un almacenamiento gratuito de 50 GB, ahora es de 10 GB. Permite subir carpetas, mas no presta el servicio de publicación en la opción gratuita.

OneDrive. Antes llamado Skypedrive. Permite un almacenamiento de 7 GB. Es un servicio prestado por Microsoft. No permite subir carpetas. 24

MEGA. Es el renacimiento de Megaupload, que ofrece 50GB de almacenamiento gratuito. Por sus antecedentes y, seguramente, por la vigilancia a la que debe estar expuesto, aĂşn no lo hemos probado; pese a que 50 GB son un gran atractivo, siempre queda la duda de su perdurabilidad en el tiempo.

Dropbox. Nuestro segundo recomendado. Pese a ofrecer sólo 2 GB, que se pueden aumentar hasta 16 GB con referidos, permite subir carpetas y publicar nuestras páginas. En el caso de los presentadores de diapositivas, es el más recomendable. Para ello, hay que instalar el Dropbox y, posteriormente, el aplicativo pancage.io

Existen otros prestadores de este tipo de servicios, iCloud de Apple por ejemplo, que cada usuario podrá explorar y evaluar. En este texto usaremos Google Drive para la publiación de nuestros aplicaciones; sin embargo, cuando se detecte un funcionamiento inadecuado de alguna aplicación, la opción de Dropobox es una posible solución, además de pode compartir, en tiempo real, nuestros trabajos con amigos o compañeros que tengan propóstios comunes.

Como lo hemos dicho, para esta actividad usaremos Google Drive; para ello, es importante que tengamos una cuenta de Google3. Para publicar nuestros puzles, accedemos a https://drive.google.com, la cual nos permite crear directorios y subir archivos con acceso público o restringido.

Creando nuestro directorio en GoogleDrive. Los paso son muy sencillos: i) Una vez ingresemos a Google Drive, hacemos clic en CREAR; ii) le damos nombre a nuestra nueva carpeta (Puzles, por ejemplo); iii) damos clic en Crear y listo. Podemos observar el contenido de nuestro disco en la nube en formato de cuadrícula (ver imagen) o tipo lista.

Obervemos en la imagen anterior que algunas carpetas tienen un fondo diferente a la que acabamos de crear. Ello obedece a que nuestra carpeta, en principio, es restringida. Nuestro siguiente paso es cambiar los permisos de la carpeta a pública. El procedimiento se describe en la siguiente imagen:

Una cuenta de Google nos permite acceder a una gran variedad de productos de Google, como Gmail, Google+ y YouTube, entre otros muchos. Las cuentas de Google incluyen una dirección de Gmail y un perfil de Google, lo que nos permite disfrutar de una experiencia más completa y personalizada en todos los productos de Google.

Seleccionamos nuestra carpeta; luego hacemos clic en el Ăcono de compartir; en la ventana que aparece, hacemos clic en Cambiar; activamos la casilla de PĂşblico en la Wweb y clicamos en Guardar; en la ventana siguiente podemos ingresar los correos de algunas personas a las que deseamos informar del recurso compartido (es opcional), damos clic en Fin y listo, ya nuestra carpeta tiene el fondo que la identifica como compartida. Subiendo carpetas y archivos a la nube. Nuestro siguiente paso es subir carpetas y archivos al directorio que acabamos de crear. Para ello, cliclamos sobre la carpeta:

Como se observa en la imagen, podemos subir o arrastrar nuestras carpetas y archivos al directorio Puzles que hemos creado. Un procedimiento sencillo para subir y compartir una carpeta, es el siguiente (ver imagen): i) Hacemos clic en la opción Carpeta; ii) seleccionamos la carpeta en nuestro disco duro local; iii) en la ventana siguiente, clicamos en Subir y compartir; una vez realizada la subida, cerramos la ventana que dice Subida realizada; iv) ahora nos debe aparecer nuestra primera carpeta subida y compártida.

Identificando la URL. Finalmente, seleccionamos la carpeta que hemos subido (ver imagen); activamos, en la opción Mas: “Detalles y actividad”, que nos permite observar (en detalles) la URL de nuestra carpeta. Esta dirección la podemos copiar y compartir vía correo con nuestros contactos; igualmente, podemos hacer clic sobre el enlace, para observar el resultado. Este mismo procedimiento se realiza para subir archivos.

En la siguiente imagen, observamos una carpeta y un archivo subidos a la carpeta Puzles.

MÓDULO 2 PUZLES TIPO JIGSAW4 El primer rompecabezas fue creado de forma casi accidental por Juan Spilsbury en 1760, quien era un experto en creaciones de mapas. Él montó uno de los tantos mapas que había creado sobre una cara de madera dura y comenzó a cortar alrededor de las fronteras de los países, así fue que casi sin querer comenzó la historia del rompecabezas. Esta creación fue usada como pasatiempo educativo, diseñado inicialmente para enseñar, dentro de la educación Británica, a niños geografía, esta idea de enseñanza perduró hasta cerca de 1820 (http://es.wikipedia.org/wiki/Rompecabezas).

Actividad 1. Cortado de piezas5 En el primer módulo hicimos una primera incursión al Gimp. En este módulo aprovecharemos una de las fortalezas de este aplicativo en el manejo de capas, las cuales permiten el recorte de piezas tipo puzle o Jigsaw. GIMP es un software libre que, como dijimos antes, lo podemos descargar desde http://www.gimp.org/, para Windows, Linux o Mac. Igualmente, en el mismo enlace, podemos descargar el manual en español. A la fecha de este módulo (marzo de 2014), la versión de GIMP es la 2.8.

4 5

Puedes ver el vídeo introductorio aquí El vídeo sobre el cortado de piezas, lo puedes ver aquí

Una vez instalado el programa, lo ejecutamos y nos aparecerán tres ventanas (con alguna demora al inicio, que es normal en la primera ejecución, puesto que inicia con la instalación de algunos componentes). Ventana principal. Desde esta ventana accederemos a la mayoría de las acciones que ejecutaremos para crear las imágenes de nuestro puzle.

Caja de herramientas y ventana de capas. Son dos ventanas que aparecen separadas. En la ventana de capas se presentan las acciones más importantes para generar las piezas de nuestro puzle.

En este módulo veremos cómo diseñar las piezas de cuatro puzles tipo jigsaw:    

16 piezas con plantilla Libre de nueve piezas Libre de 16 piezas Libre de 25 piezas

Estos puzles corresponden a los numerados como 2, 3, 4 y 5, descargados en el módulo1. Una vez diseñado el primer puzle, los demás siguen un procedimiento similar; para ello, es importante que prestemos atención a cada uno de los pasos que se describen a continuación.

PUZLE DE 16 PIEZAS CON PLANTILLA Paso 1. Selección de imagen. En el módulo 1 vimos cómo obtener y manipular las imágenes, reiterando la precaución de usar imágenes de dominio público o de nuestra propiedad. Para este puzle, que en la unidad de descargas figura como puzle 2, la imagen es de 360x360 píxeles en formato png. La imagen que hemos usado es la que se muestra a continuación6.

Imagen bajada de la página del Atlético de Madrid, previa suscripción, en el enlace: http://www.colchonero.com/lobos_aullando-fotos_del_atletico_de_madrid-igfpo-4318471.htm

Paso 2. Subir la imagen al GIMP. Abrimos nuestra imagen en la opci贸n Archivo del men煤.

Paso 3. Las capas del GIMP. Creamos una imagen nueva. La idea es generar dos capas: una con la imagen y otra con las piezas del puzle.

Al hacer clic en Nuevo de la opci贸n Archivo, nos aparece:

Por defecto, el archivo nuevo toma el tamaño de la imagen anteriormente seleccionada que, para nuestro caso, es de 360x360 píxeles. Hacemos clic en Aceptar. Paso 4. La capa del puzle. Aquí es muy importante que observes las dos capas creadas. La primera, contiene nuestra imagen que, para este ejercicio, es img0. La segunda, es la nueva capa que acabamos de crear, aparece con la etiqueta [Sin nombre].

En esta segunda capa, en la opción Filtros seleccionamos renderizado  Patrón  Puzle

Para nuestro rompecabezas, el nĂşmero de piezas es 16 (4x4). La anchura del bisel la hemos dejado en cero (si se desea imprimir, es conveniente una anchura mayor). El estilo del puzle lo hemos dejado cuadrado.

Nuestra segunda capa, quedarĂa asĂ:

Paso 5. Gestionando las dos capas. En la opción Archivo (de la segunda capa) seleccionamos Abrir como capas. Buscamos nuestra imagen y hacemos clic en Aceptar.

Debemos cerciorarnos que en esta capa el título sea: *[Sin nombre] – 10.0 (Color RGB, 2 capas) 360x360 (en caso contrario, creo que debemos empezar de nuevo).

Si por algún motivo o travesura nuestra no está abierta la ventana de diálogos para capas, la podemos activar desde la opción ventanas  Diálogos empotrables  capas.

Nos debe aparecer una ventana como la que se muestra en la imagen de la derecha. Observemos que aparecen las dos capas, cada una con ojo a la izquierda, de no ser así, volvemos a la instrucción anterior.

Paso 6. Activado de piezas. Aquí viene lo que nos interesa de todo este cuento. Prestemos bastante atención. Hacemos clic en el ojo de la primera capa (la imagen), hasta que aparezca la capa del puzle o de Fondo (podemos hacerlo varias veces, sólo para practicar).

Una vez aparezca nuestro puzle, hacemos clic sobre la imagen de fondo (ojo que no estamos diciendo que es en el ojo), de tal forma que quede resaltada la capa en un color diferente al blanco.

En la caja de herramientas hay una opci贸n llamada selecci贸n difusa (En la imagen de la derecha, ver icono encerrado en el c铆rculo rojo). Activamos esta opci贸n. Hacemos clic en nuestra primera pieza, que queda resaltado por un contorno a trazos:

Luego, en la ventana de capas, hacemos clic en el ojo de la imagen, de tal forma que observemos la primera pieza de la imagen:

Finalmente, copiamos esta pieza al portapapeles así: i) haciendo clic en Copia visible de la opción Editar del menú, o ii) presionando Mayús+Ctrl+C.

Como la pieza es llevada al portapapeles, podemos copiarla en algĂşn lugar (Word o PowerPoint, en el caso de Windows y luego grabarlas como imagen, en formato png, en el directorio correspondiente de la escena de Descartes).

Nosotros hemos copiado las piezas a una diapositiva de PowerPoint:

Luego guardamos cada una de ellas en formato png y en la carpeta correspondiente (ver el siguiente apartado de edici贸n de Descartes) con los nombres que se observan en la siguiente imagen:

Los nombres obedecen a un arreglo matricial de 4x4. Una vez realizado este paso, estamos listos para la edici贸n en Descartes.

PUZLES LIBRES DE 9 PIEZAS TIPO JIGSAW

Cortado de piezas Este puzle presenta nueve piezas en cualquier lugar del tablero, el usuario lo debe armar, también, en cualquier lugar del tablero. En el diseño se han dejado unos imanes que pegan las piezas, cuando son contiguas.

El proceso de cortado de imágenes es el mismo, que hemos explicado en los pasos anteriores, con las siguientes diferencias:  Selección de la imagen. Para este puzle, que en las carpetas que descargaste figura como puzle 3, la imagen es de 400x400 píxeles en formato png. La imagen que hemos usado es la que se muestra al lado derecho.

 Número de piezas. Como se trata de un puzle de nueve piezas, debemos prestar atención cuando creemos la nueva capa en el Gimp.

 Nombre de las piezas. Recordemos que el diseño de nuestros puzles en un arreglo matricial, que para este caso es de 3x3. Las imágenes, entonces, están nombradas como 11.png, 12.png, 13.png, para la primera fila, y así para las demás filas. La fila 1 de nuestro ejemplo sería:

PUZLES LIBRES DE 16 PIEZAS TIPO JIGSAW

Cortado de piezas Este puzle presenta 16 piezas en cualquier lugar del tablero, el usuario lo debe armar, también, en cualquier lugar del tablero. En el diseño se han dejado unos imanes que pegan las piezas, cuando son contiguas.

El proceso de cortado de imágenes es el mismo, que se ha explicado en los pasos anteriores, con las siguientes diferencias:  Selección de la imagen. Para este puzle, que en la unidad de descargas figura como puzle 4, la imagen es de 300x300 píxeles en formato png. Una de las imágenes que hemos usado es la que se muestra al lado derecho.  Número de piezas. Como se trata de un puzle de 16 piezas, debemos prestar atención cuando creemos la nueva capa en el Gimp.

 Nombre de las piezas. Recordemos que el diseño de nuestro puzle es un arreglo matricial, que para este caso es de 4x4. Las imágenes, entonces, están nombradas como 11.png, 12.png, 13.png, 14.png para la primera fila, y así para las demás filas. La fila 2 de una de nuestras imágenes sería:

PUZLES LIBRES DE 25 PIEZAS TIPO JIGSAW

Cortado de piezas Este puzle presenta 25 piezas en cualquier lugar del tablero, el usuario lo debe armar, también, en cualquier lugar del tablero. A mayor número de piezas, el reto aumenta en complejidad.

El proceso de cortado de imágenes es el mismo, que hemos explicado en los pasos anteriores, con las siguientes diferencias:  Selección de la imagen. Para este puzle, que en una de las carpetas que descargaste figura como puzle 5, la imagen es de 400x400 píxeles en formato png. Una de las imágenes que hemos usado es la que se muestra a la derecha.  Número de piezas. Como se trata de un puzle de 25 piezas, debemos prestar atención cuando creemos la nueva capa en el Gimp. 47

 Nombre de las piezas. Recordemos que el diseño de nuestro puzle en un arreglo matricial, que para este caso es de 5x5. Las imágenes, entonces, están nombradas como 31.png, 32.png, 33.png, 34.png y 35.png para la tercera fila, y así para las demás filas. La fila 3 de una de nuestras imágenes sería:

Ahora… a preparar los puzles con Descartes! 48

Actividad 2. Edición en Descartes7

Para desarrollar las actividades de este módulo, son necesarios los cuatro puzles que hemos descargado y modificado sus imágenes. Igualmente, debes descargar el editor de Descartes: http://arquimedes.matem.unam.mx/Descartes5/distribucion/Descartes.jar Nuestros puzles trabajan en formato HTML5, lo que permite que puedan ser visionados en cualquier navegador, sin recurrir a plugins o programas auxiliares. Por otra parte, el editor de Descartes sí requiere que tengamos instalado Java (http://www.java.com/es/) en nuestro ordenador, de lo contrario no podrás ejecutar el editor. Una vez tengas instalado Java, ejecutas el archivo Descartes.jar que bajaste del enlace anterior. Debe aparecerte el editor que se muestra en la imagen de esta página.

Puedes ver el vídeo de edición de Descartes aquí.

Por contraste al módulo anterior, la edición en Descartes es mucho más simple. Como veremos, a continuación, la edición se limita a cambiar algunos valores en tres vectores. Obviamente, el desarrollo de la escena como tal, será motivo de un próximo documento. Como los procedimientos son similares, la explicación de cómo se modifican los vectores cx y cy, sólo se hará en el puzle libre de nueve piezas. Los demás, siguen la misma lógica.

PUZLE LIBRE DE 9 PIEZAS Una de tus carpetas de trabajo, corresponde al puzle 3:

Con el editor de Descartes, abrimos el archivo index.html:

Lo único que debemos hacer es modificar el contenido de dos vectores. Para ello, abrimos la ventana de configuración8 y activamos la opción Definiciones. Observaremos 12 vectores.

La ventana de configuración se abre clicando en el botón E

Vector cx. Está estrechamente asociado a las fichas del puzle que creamos con Gimp. A cada imagen se le asocian 9 datos (las 9 piezas del puzle). Para el caso de las piezas que encontramos, en la carpeta de imágenes, observamos que se han asignado unas coordenadas (cx, cy), que significan lo siguiente:

Si cx es 1, es porque hay una lengüeta al lado izquierdo de la pieza y cero en caso contrario; cy es 1 si hay lengüeta en la parte superior de la pieza y cero en caso contrario. Verifícalo en la tabla anterior. Así las cosas, los primeros 16 valores (exceptuando cx[0] y cy[0]) corresponden a la piezas de la imagen, con los siguientes valores:

Una vez hecho los cambios, guardamos el archivo cuidando que tengamos activada la opción de guardado para librería portable y sólo para JS.

Eso es todo, ahora podemos ejecutar nuestro puzle. Los demás puzles siguen el mismo procedimiento; sin embargo, en los dos últimos debemos modificar un vector adicional.

PUZLES LIBRES DE 16 y 25 PIEZAS Otras dos carpetas de escenas de Descartes, que has descargado, corresponden a los puzles 4 y 5:

Con el editor de Descartes, abrimos el archivo index.html. Podemos notar que, en estos puzles, aparecen cuatro carpetas de imágenes, ello obedece a que está diseñado para incorporarle varias imágenes. En este caso debemos modificar el contenido de tres vectores. Para ello, abrimos la ventana de configuración y activamos la opción Definiciones.

Los vectores cx y cy ya sabemos cómo modificarlos, por lo que nos concentraremos en el vector F. Este vector permite que modifiquemos el número de imágenes que incorporaremos a nuestro puzle, el máximo es 19. Para nuestro caso, se han definido cuatro imágenes (F[0]=4). Si deseamos disminuir o aumentar el número de imágenes, cambiamo el valor del F[0]. Si el número de imágenes es mayor a 4,

debemos incluir los demรกs elementos del vector. Por ejemplo, si tenemos seis imรกgenes:

Obviamente, tenemos que crear las carpetas correspondientes. Eso es todo, ahora podemos ejecutar estos dos nuevos puzles:

MÓDULO 3 DISEÑANDO PUZLES CON DESCARTES Actividad 1.Puzles giratorios9 En los módulos anteriores, construimos puzles a partir de una escena diseñada con Descartes. En este módulo aprenderemos cómo desarrollar la escena desde el editor Descartes. Para lograr este propósito diseñaremos dos tipos de puzles. El primero, es un puzle giratorio, en el cual la imagen se arma rotando las piezas. El segundo, es un puzle de arrastre, similar al primer puzle del módulo uno de este curso. Desarrollemos, entonces, el puzle giratorio. Paso 1. Carpetas del puzle. Creamos una carpeta con el nombre Puzle6.

En esta carpeta, creamos tres subcarpetas con los nombres que se muestran en la imagen izquierda.

Paso 2. Imágenes del puzle. En cada carpeta de imágenes, guardaremos una imagen de 600x400 píxeles, que llamaremos img0, con formato png. Esta imagen la partiremos en 24 piezas de 100x100; es decir, el cortado de la imagen será de cuatro filas por seis columnas. Observemos que este puzle no será cuadrado, lo que nos facilita la obtención de la imagen, en tanto que es una dimensión bastante común en la Web. En la imagen observamos un ejemplo de las piezas obtenidas.

Puedes ver el vídeo para puzles giratorios aquí.

Paso 3. Ejecutamos el editor de Descartes

Desde el editor de configuraciones, desactivamos los botones de las esquinas.

Nuestro objetivo es un puzle de tamaño 600x400. Cambiamos el tamaño de la escena a 600x500, donde los 100 adicionales en la altura, no servirán para el título y un mensaje de instrucciones. Este cambio lo logramos así: hacemos clic en la opción código del editor de configuraciones, cambiamos el ancho (width) y el alto (heigth), hacemos clic en aplicar, cerramos la ventana y, finalmente, hacemos clic en aceptar en el editor de configuraciones. Si nos hemos perdido en estas instrucciones, siempre podemos recurrir a ver el vídeo (ver nota 9 en la página anterior).

Una vez realizadas esta acciones, haremos nuestro pirmer guardado de la escena, que lo haremos en la carpeta denominada puzle6 y con el nombre index. Es importante que verifiquemos que el guardado se hará en librería portable y sólo para JS.

Paso 4. Modificación de nuestro espacio de trabajo. Como se trata de ubicar piezas de 100x100 píxeles, asignamos una escala de 100. Por otra parte, las coordenadas donde se ubicarán las piezas, es más fácil trabajarlas en valores positivos; por ello, debemos desplazar el origen al extremo inferior izquierdo de la pantalla. Para esto último, asignamos al origen en x (O.x) un valor de -50%, lo que significa que desplaza la mitad del espacio a la izquierda, y al origen en y (O.y) le asignamos 50%, lo cual desplaza la mitad del espacio hacia abajo. Por último, fijamos el espacio, activando la casilla fijo. En la siguiente imagen, podemos obervar los cambios efectuados.

Para ver el efecto final, desactivamos la red10 y los ejes, de tal forma que al hacer clic en aplicar, nuestro espacio de trabajo se observará como una cuadrícula de 5x6. Recordemos que la fila superior estará destinada al título y a los mensajes. Esta cuadrícula sólo la usaremos como guía inicial, luego la desactivaremos. 57

Paso 5. Vectores y funciones. Debemos crear cuatro vectores y dos funciones. Vector de carpetas de imágenes. Es un arreglo de un tamaño de 20, lo que nos permite incluir hasta 19 carpetas de imágenes (F[0] tambien cuenta). Inicialmente, trabajaremos con las tres carpetas que hemos creado. Si queremos un número mayor, debemos cambiar el valor de F[0] e incluir las nuevas carpetas en F[4], F[5],…

Vector de piezas del puzle. Almacena las 24 piezas de nuestro puzle, además de la imagen inicial en el elemento V[0]. Su tamaño, entonces, es de 25.

Vector de imágenes. En este vector almacenaremos las direcciones de las imágenes del puzle, que permitirán su visionado en la escena (ver paso anterior). Los valores se determinan en la función asigna_imagenes().

Vector de rotaciones. En este arreglo almacenaremos las rotaciones con las cuales se visionarán las piezas en la escena. Los valores se calculan en la función rota().

Función rota(). En un bucle (Loop), se calculan las rotaciones de las 24 piezas. El bucle es del tipo DO-WHILE o HACER-MIENTRAS. Para garantizar que todas las piezas sean asignadas con una rotación, se inicia el bucle con i=0. Luego, en el HACER, 59

incrementamos el valor de i en uno, hasta que llegue a 24 (MIENTRAS); de esa forma, los elementos de R serán recorridos en su totalidad, y el valor asignado se hará con la expresión ent(rnd*4)*90, lo que genera valores aleatorios de 0, 90, 180 y 270.

Función asigna_imagenes(). Este otro bucle, que funciona igual que el anterior, asigna las direcciones de las piezas del puzle. Por ejemplo, cuando i es igual a 7 y teniendo en cuenta que la variable otra es 1 (como veremos más adelante), el valor de I[7] sería: I[7] = F[1]+V[7] I[7] = ‘imagenes1/’ + ’21.png’ I[7]=’imagenes1/21.png’. Es decir, la pieza 21 de la carpeta imagenes1.

Paso 6. Algoritmo de INICIO. En este algoritmo sólo invocaremos las dos funciones anteriores y asignaremos 1 a la variable otra.

Paso 7. Las imágenes. Nuestro siguiente paso, es ubicar las 24 piezas en la cuadrícula. Iniciemos con la primera, tal como se muestra en la imagen. La expresión (0, 4), significa que la primera pieza (11.png) se posicionará en x = 0 y y=4. Es importante que tengamos claro que las coordenadas de la imagen corresponden a su extremo superior izquierdo. La expresión del rotini, es el elemento del vector que contiene el giro de la pieza.

Tendríamos, entonces, que hacer los mismo para las otras 23 imágenes, algo bastante engorroso. Una opción es usar familias de imágenes, que explicaremos a continuación. Si queremos mostrar las primeras seis imágenes en la fila cuatro de nuestra cuadrícula (y=4), activamos la opción familia, en el intervalo [0, 5]; es decir, con x = 0, 1, 2, 3, 4, 5. De esa forma, se mostrarían seis imágenes en las coordenadas (0,4), (1,4), (2,4), (3,4), (4,4) y (5,4). Entre imagen e imagen hay un paso; por ello, el valor de 5 en la casilla pasos. El vector I contiene las imágenes 11.png,…, 16.png en los seis primeros elementos del vector (I[1], I[2], I[3], I[4], I[5] y I[6]), como el valor de s inicia en cero, en la casilla archivo hemos puesto I[s+1], al igual que en la casilla rotini con R[s+1].

Podríamos simplificar mas la expresión para que muestre las 24 imágenes; sin embargo, hemos recurrido a copiar tres veces esta expresión para las filas 3, 2 y 1. En el caso de la fila 3, observemos los cambios realizados.

Para la fila 2, usaríamos I[s+13] y R[s+13] con posición en (s, 2). Finalmente, para la columna 1 sería I[s+19] y R[s+19]. Hasta este paso, tendríamos la siguiente escena:

Notemos que las piezas ya están, aleatoriamente, rotadas. Paso 8. Rotaciones. Una forma sencilla de rotar las imágenes, es con un control tipo botón, que construiremos así: en el apartado de controles, agregamos un control numérico que, por defecto, aparecerá como tipo pulsador, lo cambiamos a tipo botón. Cambiamos el lugar sur por interior. 63

Para nuestra primera pieza, la posición (pos) será cero píxeles para x y 100 píxeles para y, en el caso de estos controles, la posición se determina a partir del extremo superior izquierdo de la escena y lo valores de x y y serán en píxeles. El tamaño del botón será de 100x100. Notemos que los valores de pos son (x, y, ancho botón, alto botón). Hecho lo anterior, nos aparecerá el botón como se muestra en la imagen de la derecha.

A continuación, escondemos el botón asignando la imagen vacio.gif y, finalmente, activamos la acción calcular con el siguiente parámetro R[1]=(R[1]=270)?0:R[1]+90. El parámetro anterior evalúa el condicional, tipo JavaScript, (condición)?acción1:acción2, en el que el resultado será la acción1 si la condición es verdadera o la acción2 si es falsa. Para nuestro caso, si la rotación R[1] vale 270 el resultado es cero, en caso contario R[1] se incrementa en 90. Este resultado se asigna

al elemento R[1]. Así las cosas, cada vez que hacemos clic en el botón, la rotación aumenta de 90 en 90.

Nota importante. La rotación, algunas veces, no es perceptible en el editor, debemos ejecutar el index.html para ver el efecto. A propósito, no olvidemos guardar periódicamente nuestro trabajo. Ahora, debemos copiar este control 23 veces… sí 23 veces. Una forma fácil de hacerlo, es copiar el código del primer control tipo botón; para ello, hacemos clic en la palabra Controles (ver imagen) y copiamos el código. Luego, en un editor de texto plano (bloc de notas en Windows), lo copiamos 23 veces.

Modificamos el nombre y las coordenadas del botón, tal como lo muestra la imagen.

Modificamos, también, los parámetros del botón:

Hasta este paso, ya podemos jugar con nuestro puzle. Paso 9. Cambio de imágenes. En nuestro puzle, tenemos tres carpetas de imágenes, que podemos acceder cambiando la variable otra.

Inicialmente, eliminemos la cuadrícula de la zona de mensajes y cambiemos el color del fondo. Nosotros hemos escogido un color granate oscuro.

Ahora, agregamos un control tipo botón que posicionaremos en las coordenadas x = 470, y = 10, con tamaño 120 de ancho y 30 de alto. El nombre del botón será Otra imagen. Tendrá asociada una imagen como se indica en la figura. Esta imagen la puedes copiar de los puzles anteriores.

Finalmente, activamos las acción calcular y hacemos clic en parámetro. En el cuadro de díalogo que se abre, copiaremos las siguientes instrucciones: 67

 El condicional para cambio de imagen otra=(otra=F[0])?1:otra+1. Observemos que la variable otra, cambia de 1 hasta el máximo de carpetas que declaramos en el elemento F[0].  Las funciones rota() y asigna_imagenes(), con el propósito de rotar, de nuevo, las piezas y de asignar las nuevas piezas. Hasta este paso, podemos jugar con nuestro puzle con diferentes imágenes. Paso 10. Mensajes. En la franja que dejamos para los mensajes, agregaremos un texto como se muestra en la siguiente imagen.

Para ello, hacemos clic en el botón texto, definimos tipo, tamaño y color de letra. Finalmente, agregamos otro texto con el mensaje “EXCELENTE” en la posición [400, 50], que se visionará cuando la variable correcto sea 24. Esta variable, será nuestro último paso de este módulo.

Paso 9. Control de resultados. En el algoritmo de CALCULOS, creamos un bucle cuyo propósito es sumar el número de fichas con rotación cero, cuando este número es 24, es porque la imagen se ha armado.

NOTA IMPORTANTE. Existe un pequeño fallo en el editor, que no muestra las imágenes al inicio. Para evitarlo, hemos forzado una animación así: En el algoritmo de INICIO incluimos la variable anima con un valor de 1. Creamos un evento cuya acción es animar cuando se da la condición anima=1.

Creamos la animación como se muestra en la imagen. En realidad no importa cuántas veces se ejecute, lo que se busca es que se realice. Lo curioso es que al ejecutar la animación, se muestran las imágenes.

Al cambiar de imagen, debemos asegurarnos que se ejecute, de nuevo, la animación. Por ello, debemos agregar anima=1 en el parámetro del botón Otra imagen.

Después de esta pequeña molestia, nuestro puzle quedaría así:

Que justificaâ&#x20AC;Ś la molestia

Actividad 2. Puzles de arrastre10 En este segundo apartado diseñaremos un puzle de arrastre. Recordemos que en el puzle anterior, tuvimos que recurrir a una animación para que las imágenes se visionen en la primera ejecución del puzle. Ahora, usaremos imágenes directamente asociadas a los controles gráficos. La diferencia con el anterior es que no podremos usar vectores para cambiar de imagen, así que recurriremos a crear varios puzles, que posteriormente veremos cómo invocarlos. Desarrollemos, entonces, el puzle de arrastre. Paso 1. Carpetas del puzle. Creamos una carpeta con el nombre Puzle7.

En esta carpeta, creamos tres subcarpetas con los nombres que se muestran en la siguiente imagen:

La carpeta llamada images, la hemos descargado anteriormente en el módulo 1. En esta carpeta hemos incluido algunas imágenes comunes para los tres o más puzles que vamos a diseñar (botones, fondos y caritas felices). Nuevamente advertimos sobre el uso de imágenes de dominio público.

Puedes consultar el vídeo aquí. Además, incluye la carpeta de imágenes descargada en el módulo 1.

Paso 2. Imágenes del puzle. En cada puzle (Puzle71, Puzle72,,… ) habrá una carpeta de imágenes, en las cuales guardaremos una imagen de 400x400 píxeles, que llamaremos img0, con formato png. Estas imágenes la partiremos en 16 piezas de 100x100; es decir, el cortado de la imagen será de cuatro filas por cuarto columnas. En la imagen de la derecha, observamos un ejemplo de las piezas obtenidas para el Puzle73. Repasa el módulo el cortado de piezas.

Piezas con transparencia. Una opción que ofrecen las imágenes en formato png es la transparencia, que haría más retador el puzle. En el Gimp es muy sencillo obtener una imagen con transparencia. En la opción Colores seleccionamos Color a alfa, damos clic en aceptar, la imagen obtenida la guardamos y eso es todo.

Nota importante. Antes de cortar la imagen en 16 piezas, debemos cerciorarnos de no obtener piezas completamente transparentes, sería un gran problema para el usuario final. 73

Bueno, hasta este paso tenemos todo el material necesario para nuestro puzle. Ahora, nos concentraremos en el editor de Descartes. Paso 3. Ejecutamos el editor de Descartes

Desde el editor de configuraciones, desactivamos los botones de las esquinas.

La escena debe tener un tamaño que permita incluir una cuadrícula de 400x400 para armar el puzle, además de un espacio para depositiar la piezas que se van a arrastar. Teniendo en cuenta lo anterior, cambiamos el tamaño de la escena a 850x500. Recordemos que este cambio lo logramos así: hacemos clic en la opción código del editor de configuraciones, cambiamos el ancho (width) y el alto (heigth), hacemos clic en aplicar, cerramos la ventana y, finalmente, hacemos clic en aceptar en el editor de configuraciones.

Una vez realizadas esta acciones, haremos nuestro pirmer guardado de la escena, que lo haremos en la subcarpeta Puzle71 de la carpeta puzle7 y con el nombre index. Es importante, para este puzle, que que el guardado se haga en librería de proyecto y sólo para JS, de esta forma sólo tendríamos un intérprete Descartes para los tres o más puzles que incluiremos en la carpeta Puzle7. Paso 4. Modificación de nuestro espacio de trabajo. Como se trata de ubicar piezas de 100x100 píxeles, asignamos una escala de 100. Por otra parte, las coordenadas donde se ubicarán las piezas, es más fácil trabajarlas en valores positivos; por ello, debemos desplazar el origen al extremo inferior izquierdo de la pantalla. Para esto último, asignamos al origen en x (O.x) un valor de -45%, lo que significa que desplaza el 45% del espacio a la izquierda, y al origen en y (O.y) le asignamos 45%, lo cual desplaza casi la mitad del espacio hacia abajo. Fijamos el espacio, activando la casilla fijo y, finalmente, le asignamos un fondo a nuestro espacio, escribiendo en la casilla imagen la dirección donde se encuentra la imagen de fondo ../images/fondo1.png, observemos que el código ../ hace que Descartes busque la imagen en la carpeta padre (Puzle7). En la siguiente imagen, podemos obervar los cambios efectuados.

En el puzle anterior habíamos desplazado el origen de coordenadas a todo el extremo inferior izquierdo, en este puzle dejamos una holgura del 5%, para

presentar la cuadrícula o plantilla separada de los bordes. La imagen siguiente es la escena con los cambios realizados.

Paso 5. La plantilla guía. Debemos dibujar una plantilla de 4x4, que inicia desde el origen de coordenadas. Tenemos tres opciones. Cuadro por cuadro. En la opción gráficos agregamos un polígono, cuyas coordenadas serían (0,0)(0,1)(1,1)(1,0)(0,0). Observemos que la primera pareja de coordenadas se repite al final. Le hemos asignado un ancho de dos, color de línea negro y un relleno transparente. Esta opción obliga a repetir el proceso 16 veces.

Por hileras de cuadros. El editor Descartes nos posibilita el uso de algunos elementos de programación fáciles de implementar. En esta segunda opción, nuestro propósito es lograr que el primer cuadro se repita tres veces más a la derecha. Observemos que el primer cuadro lo hemos generado a partir del vértice inferior izquierdo (0,0), el segundo cuadro sería desde (1,0), el tercero desde (2,0) y el cuarto desde (3,0); es decir, aumentando las abscisas en una unidad. Descartes nos ofrece una opción llamada familia, que la aplicaríamos así:  Activamos la opción familia  La variable o parámetro por defecto es s, que podemos cambiar si lo deseamos.  Esta variable es la que usaríamos para las abscisas de los cuadros.  El intervalo de las abscisas, como dijimos antes, es [0, 3].  Para generar los cuadros hay tres pasos. El paso 1 es entre el primer cuadro y el segundo, el paso 2 entre el segundo y el tercero y el paso 4 entre el tercero y el cuarto. En general el número de pasos es la longitud del intervalo menos uno.  Ahora, sólo nos falta sumar esta variable a las abscisas del polígono: (s,0)(s,1)(s+1,1)(s+1,0)(s,0).

Finalmente, haríamos este procedimiento tres veces más, hasta completar las tres hileras restantes.

La plantilla en una sola instrucción. La recursividad en Descartes es muy importante para evitar un trabajo excesivo. La opción anterior es una forma de lograrlo, pues solo se necesitan cuatro instrucciones, en lugar de las 16 de la primera opción. No obstante, existen otros atajos que sólo requiere de un poco de lógica y el uso de conceptos básicos de la aritmética. Veamos, para obtener los 16 cuadros, podemos usar una familia con un intervalo [0, 15]. El reto es cómo lograr las coordenadas de los vértices de cada cuadro:  Observemos que cada hilera tiene un grupo de abscisas que varían de 0 a 3. Si usamos la expresión s%4, obtenemos el residuo o resto de la división de s con 4, que presentamos en el siguiente cuadro (% es el operador de JavaScript que genera el resto). 0

10 11 12 13 14 15

Resto 0 s%4

Logrando que se generen las abscisas requeridas para nuestra plantilla.  Por otra parte, necesitamos que las ordenadas vayan de 0 a 3 por cada grupo de cuatro abscisas. Si usamos la expresión ent(s/4), obtenemos el cociente de la división de s con 4, que presentamos en el siguiente cuadro (ent() es una función matemática que devuelve la parte entera de la división):

10 11 12 13 14 15

Cociente 0 ent(s/4)

Si comparamos los dos cuadros, observamos que se generan las cuatro hileras con las coordenadas correspondientes. Ahora, sólo nos resta sumar estas expresiones a nuestro polígono original: (0,0)(0,1)(1,1)(1,0)(0,0), obteniendo: (s%4,ent(s/4))(s%4,ent(s/4)+1)((s%4)+1,ent(s/4)+1)((s%4)+1,ent(s/4))(s%4,ent(s/4))

Y, además, ajustar el intervalo y pasos de la familia.

Esta sería nuestra plantilla, a la que le hemos desactivado las redes del espacio:

Paso 6. Las imágenes Nuestro siguiente paso, es ubicar las 16 piezas en la región derecha de la escena, pues desde allí deben ser arrastradas por el usuario a la plantilla. Para ello, agregamos un control tipo gráfico que, para explicar su funcionamiento, lo ubicaremos en las coordenadas (1, 1) y asociado a la imagen 22.png. Es muy importante comprender cómo se ubica este gráfico en nuestra escena. La imagen 22.png corresponde a una de nuestras piezas del puzle, cuyo tamaño es de 100x100 píxeles. En principio, podríamos creer que se mostraría en el cuadro de la plantilla con inicio en las coordenadas (1,1); sin embargo, el gráfico se dibuja posicionando el centro de la imagen es estas coordenadas (ver imagen siguiente), 79

dejando un desfase de 0,5, tanto para la abscisa como la ordenada. Para corregir este desfase, debemos sumar esa misma cantidad a las coordenadas; es decir, posicionar la imagen en (1.5, 1.5).

Explicado lo anterior, procedemos a posicionar nuestra imágenes en la región derecha de la plantilla, que haremos alatoriamente así:  Debemos garantizar que cada pieza esté a la derecha de la plantilla; es decir, su abscisa debe ser mayor o igual a 4.5 y no mayor que 7.5 (verificar en la escena).  De acuerdo a lo anterior, podemos usar esta abscisa: 4.5+rnd*3, que tiene como valor mínimo 4.5 y máximo de 7.0. La expresión rnd*3 nos genera números aleatorios entre 0 y 3.  Debemos controlar que cada pieza esté por encima de 0.5 y no más arriba de 3.5 (verificar en la escena).  De acuerdo a lo anterior, podemos usar esta ordenada: 0.5+rnd*3, que tiene como valor mínimo 0.5 y máximo de 3.5. Nuestra primera pieza, entonces, quedaría así:

Hacemos lo mismo para las otras 15 piezas (recuerda usar un editor de texto para hacer las copias).

Ahora, nuestra escena se encuentra en este estado.

Paso 7. Vectores y funciones. Vamos crear tres vectores y seis funciones.

Vectores de coordenadas. Los vectores X y Y alamecenarán las coordenadas de los controles gráficos, X[1] será igual a g1.x, X[2] igual a g2.x, etecétera. Lo mismo para el vector Y, Y[1] igual a g1.y, Y[2] igual a g2.y, etcétera. Vector de piezas montadas. El vector repite almacenará el número de piezas que se ubicarán en cada cuadro de la plantilla. Por ejemplo, si en el cuadro 1 (0,3) no hay piezas, el valor será cero, uno si hay una, etcétera.

Función asigna_controles1(). Es un algoritmo que almacena las coordenadas de los controles en los vectores X y Y. En la imagen sólo se observa una parte, hay que hacerlo para todas la coordenadas. Nota importante. Debemos activar la casilla algoritmo para poder copiar las instrucciones.

Función controla_posición(). Es un bucle (DO-WHILE), que debemos programar para realizar dos controles de posición. El primero, es evitar que las piezas se arrastren por fuera de la escena; el segundo, hace que las piezas se desplacen sobre la plantilla cuadro por cuadro.

Lograr estos dos controles, implican varias instrucciones por control gráfico que, para los 16, necesariamente tendríamos que repetirlas 16 veces. En situaciones como esta, los bucles o ciclos cobran bastante importancia. En Descartes, es una sana costumbre de programación, diseñar los bucles a través de funciones.

El bucle, entonces, funciona así:  Se inicia con una variable i en cero (inicio), que varía hasta 16 (mientras o while)  En el hacer (do) escribimos las siguientes instrucciones: o i = i + 1. Incrementa la variable i de uno en uno hasta 16. o X[i]=(X[i]<0.5)?0.5:X[i]. Si la abscisa de un control gráfico es menor que 0.5 (extremo izquierdo) lo devuelve a 0.5; es decir, evita que se salga de la escena por la izquierda. o X[i]=(X[i]>7.5)?7.5:X[i]. Si la abscisa de un control gráfico es mayor que 7.5 (extremo derecho) lo devuelve a 7.5; es decir, evita que se salga de la escena por la derecha. o Las dos instrucciones siguientes, tienen el mismo funcionamiento en dirección vertical. o Las instrucciones X[i] = (X[i]<4)? ent(X[i])+.5: X[i], Y[i] = (X[i]<4)? ent(Y[i])+.5: Y[i] hacen que las coordenadas del control se conviertan a un número entero cuando su valor es menor de 4; es decir, cuando la pieza está dentro de la plantilla, de tal forma que su avance sea cuadro por cuadro. 83

Función asigna_controles2(). Los controles anteriores se hacen sobre las coordenadas almacenadas en los vectores X y Y, lo que nos obliga a retornarlas a los controles gráficos. Esta función, entonces, actualiza las coordenadas de los controles. Hasta este función, nuestro puzle funciona bastante bien. Sin embargo, es importante que salga un mensaje de felicitaciones y, además, algún mensaje que nos advierta sobre piezas superpuestas. Función buenas(). Por la forma como construimos nuestra plantilla, la pieza uno (g1.x, g1.y) estaría bien ubicada en la posición (0.5, 3.5), la pieza dos en (1.5, 3.5) y asís sucesivamente. Esta función cuenta el número de piezas bien colocadas (buenas), tal como se observa en la imagen, en la cual sólo mostramos las dos primeras hileras del puzle. Es importante iniciar el algoritmo con la variable buenas en cero, de lo contrario la suma de buenas se haría permanentemente sin control; es decir, una vez que ubiquemos una pieza bien, la estaría sumando como buena permanentemente.

La última función utiliza el vector repite, para detectar cuándo una pieza está sobre otra en la plantilla. Función limpia(). Tiene por objeto, inicializar el vector repite en ceros. Función controla_repetidas(). En un bucle, similar a los anteriores. Escribimos instrucciones como: repite[1] = (X[i]=0.5) & (Y[i]=3.5)? repite[1]+1: repite[1] que suma uno al elemento repite[1], cada vez que una pieza esté posicionada en (0.5, 3.5). En la siguiente imagen se muestra parte del resto de instrucciones.

Paso 8. Algoritmo de CALCULOS. Las funciones anteriores no se ejecutan sino no son invocadas. En la ocpión programa y en el algortimo CALCULOS, invocamos las funciones con sólo escribirlas.

Paso 9. Mensajes. En la franja superior izquierda, agregaremos un texto como se muestra en la siguiente imagen. Para ello, hacemos clic en el botón texto, definimos tipo, tamaño y color de letra.

Otro texto obligado, es el de alerta de piezas montadas. Para ello, hemos usado un texto con la opción familia, que se mostrará cada vez que un elemento del vector repite sea mayor que uno. La siguiente imagen ilustra la posición del texto y la familia creada.

Un truco muy usado, para mostrar el texto más elegante, es repetirlo con otro color y posicionarlo con un pequeño desplazamiento.

La siguiente imagen muestra los dos textos creados.

Finalmente, creamos una imagen de felicitaciones, cu谩l no mejor que una carita feliz?, para ello, hemos agregado una imagen en la posici贸n (5, 3), que se mostar谩 cuando la variable buenas llegue a 16. Observemos la direcci贸n del archivo.

Esta sería la imagen final que da cuenta del logro de nuestro objetivo.

Observemos que ha desparecido la plantilla y el texto. Eso ocurre porque incluimos en la condición dibujar-si la siguiente expresión buenas!=16

Bueno, hasta aquí hemos finalizado nuestro primer puzle. Paso 10. Creación de más puzles. Si deseamos crear los puzles 7.1, 7.2, etcétera, basta guardar el puzle anterior en dichas subcarpetas, verificando que se hace en librería del poryecto sólo para JS. Nosotros lo hemos hecho, cambiando la imagen del fondo (fondo2.png y fondo3.png) y la imagen de la carita feliz (../images/feliz2.png y ../images/feliz3.png). Obviamente, estamos en libertad de cambiar los fondos y las caritas felices.

Cada puzle se puede publicar independientemente; no obstante, nuestro propósito es articularlos en un solo proyecto, lo cual lo haremos en el último paso. Paso 11. Articulación de los puzles. Creamos un nuevo espacio de 970x560. Eliminando los botones a las redes del espacio y asignando un color o imagen de fondo.

En el apartado de espacios, agregamos un nuevo espacio tipo HTMLIframe de tamaño 850x500 píxeles (el tamaño de nuestros puzles). Este espacio lo posicionaremos en x=10, y=40

Este tipo de espacios lo que hace es cargar una archivo tipo html. Observemos que el archivo lo hemos dejado variable [file]. Esta variable la inicializamos en el algoritmo de INICIO, así:

Es decir, el primer archivo que se abrirá es el correspondiente al puzle de la subcarpeta 71. Creamos tres o más botones, según el número de puzles que hayamos creado. Cada botón estará ubicado en el extremo derecho de la escena, con el nombre puzle 1, puzle 2, … y tamaño de letra de 18. Para una mejor presentación, los botones se asocian a una imagen de botón. Cada vez que hagamos clic sobre cada botón, se recalculará el contenido de la variable file lo que, finalmente, posibilita el cambio de puzle. En las dos imágenes siguientes se muestran dos de los botones diseñados.

Esta sería la imagen final

Para el título de la escena usamos el siguiente formato de texto:

Nota importante. Debemos corregir el contenido de la variable file, dejando en mayúscula la primera letra puzle; es decir, Puzle72/index… En local funciona bien sin la mayúscula, pero en línea se presentaría un error. Finalmente, guardamos nuestra escena en la carpeta Puzle7 con el nombre index. En esta caso la opción de guardado, sería librería portable sólo para JS. Al ejecutar observaríamos:

nuestro

trabajo

final,

El texto en la parte inferior puede ir con nuestro nombre, siempre que hayamos seguido este módulo hasta el final. ¡ESTE ES EL FIN… POR AHORA! 91

2014

Red Educativa Digital Descartes Autor: Juan Guillermo Rivera BerrĂo

PRESENTADORES DE DIAPOSITIVAS HTML5 ALGUNOS ELEMENTOS DE HTML En este documento describimos algunos elementos mínimos de HTML, necesarios para comprender cómo se modifican las diapositivas de los diferentes presentadores diseñados en JavaScript. No se trata de un curso intensivo de HTML, es sólo una aproximación al diseño básico de páginas web en formato HTML5, con fundamento en el lenguaje JavaScript. Editor HTML Recomendamos alguno de estos editores tipo WYSIWYG (acrónimo de What You See Is What You Get, que en español significa "lo que ves es lo que obtienes"):  BlueGriffon: http://www.bluegriffon.org/ (Windows, Mac OS X y Linux).  Dreamweaver (comercial) También son útiles editores simples como:  SublimeText: http://www.sublimetext.com/ (OS X, Windows y Linux).  Notepad++: http://notepad-plus-plus.org/ (Windows) O, en algunos casos, un editor como el bloc de notas. HTML Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador. Está estandarizado por la norma ISO de SGML (Standar Generalized Markup Language). Un documento HTML tiene tres etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él: <html>, <head> y <body>.

Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas: <html> o <HTML>, <body> o <BODY>. Si escribimos11, por ejemplo, el siguiente código en un editor, lo guardamos como pag1.html y luego lo ejecutamos, obtendremos lo que se observa a la derecha de la siguiente imagen.

La etiqueta <!DOCTYPE html> declara un documento HTML5 para que se visualice correctamente. La etiqueta <html> declara que está codificado en este lenguaje y limita el principio y el fin del documento.

Para una mejor comprensión de este apartado, recomendamos escribir el código en el editor, guardar la página creada y ejecutarla en un navegador (haciendo doble clic sobre el archivo).

La etiqueta <head> o cabecera contiene información y recursos sobre el propio documento y que no aparece en el documento, en la que se destaca el título <title>, que aparecerá en la pestaña del navegador.

La etiqueta <meta charset=’utf-8’> define varios tipos de metadatos. El atributo charset específica la codificación usada en nuestra página, charset utf-8 es la Unicode Transformation Format 8-bit, que representa el código de caracteres UNICODE compatible con ASCII y permite visualizar los caracteres de todos los idiomas. La etiqueta <body> es el cuerpo del documento, que contiene los elementos visible en la página: las imágenes, los encabezados, los párrafos de texto, las listas, las tablas, los hipervínculos, escenas de Descartes, etcétera. Los documentos HTML deben tener la extensión html o htm para que puedan ser reconocidos por un navegador.

Textos habituales. Un documento HTML inserta, en el texto, etiquetas que contienen los diferentes aspectos de la presentación. Los textos habituales están formados por encabezados <h1>, <h2>, <h3>,…, párrafos <p>, listas <ul><li>, etcétera. En el código anterior, hemos incluidos varios de estos textos, que presentamos a continuación, incluida una imagen de cómo aparecería en el navegador:

Las etiquetas o encabezados <h1>, <h2> y <h3> muestran textos en diferentes tamaños. Nuestras diapositivas utilizarán, especialmente, los dos primeros encabezados, cuyos estilos (tamaños, colores, fuentes,…) son modificados en cada presentador. El método de cómo son cambiados, no es objeto de este documento, puesto que sólo nos interesa cómo funciona la etiqueta; no obstante, basta con saber que se trata de hojas de estilo css. Si observamos el contenido de los presentadores, seguramente encontraremos archivos con esta extensión. La etiqueta párrafo <p> presenta un texto en el formato más simple del navegador. Las listas <ul> permiten mostrar elementos tipo viñeta. Cada elemento está encapsulado en una etiqueta <li>. Otras etiquetas usadas para resaltar textos son: <b> negrita </b>, <i>itálica</i> y <strong></strong> (texto fuerte).

CAMBIOS DE ESTILO CSS Por defecto, una página HTML tiene asignados valores CSS 12 tanto en el cuerpo del documento, como en las etiquetas antes descritas. En general, variando de un navegador a otro, los valores para el cuerpo <body> son:

En nuestros presentadores hay tres formas de intervenir el estilo de las páginas:  En las etiquetas. Es el método más sencillo, añadiendo un atributo style en un elemento concreto dentro de la página, que afecta sólo a dicho elemento. 12

CSS es el acrónimo de Cascading Style Sheets (Hojas de Estilo en Cascada)

 En la cabecera de la página <head>. Este método permite aplicar un estilo a varios elementos de la página.  En una hoja de estilo externa. El método más recomendable y usado en nuestros presentadores. A través de un elemento <link> en la cabecera, se importan los estilos. En este documento no nos ocuparemos de este método. NOTA IMPORTANTE. El cambio de estilo que haremos en los presentadores será sutil, en tanto que algunos de ellos presentan varias hojas de estilo que podemos elegir y, seguramente, suplirán nuestras expectativas. Algunos cambios serán en colores de letra y de fondo de las diapositivas o, como en el caso del presentador Bespoke, cambio en el tipo de letra. CAMBIO DE ESTILO EN LAS ETIQUETAS Es posible definir algunos estilos dentro del cuerpo del documento HTML. Algunos de ellos son: Cambio de estilo en el <body> y en las etiquetas. Incluimos los siguientes cambios de estilo (style), en el documento anterior:

El color azul afectará a todos los textos encapsulados en el <body>, excepto en el texto tipo párrafo que, también, ha cambiado de estilo en color y tamaño de letra. Este tipo de modificaciones las usaremos en los presentadores; sin embargo, en una presentación uniforme, se recomienda el cambio de estilo en la cabecera (segundo método). 98

Las modificaciones anteriores, nos mostrarán el siguiente texto en el navegador:

Cambio de estilo a través de un bloque <div>. Otro método que usaremos, es encapsular dos o más elementos en un bloque <div>, el cual definirá un estilo para todos los elementos que contiene. Observemos, por ejemplo, este cambio en nuestra página:

Hemos encapsulado las cabeceras <h2> y <h3>, las cuales se centrarán en la pantalla y tendrán color verde. Incluimos, además, un salto de línea <br>. El documento en el navegador sería así:

CAMBIO DE ESTILO EN LA CABECERA En nuestro documento de ejemplo, hemos eliminado los estilos en línea o en las etiquetas; ahora, hemos incluido un estilo CSS en un bloque style en la cabecera 100

<head>. Observemos que se han declarado atributos para ocho elementos: <body>, <h1>, <h2>, <h3>, <p>, <strong>, <em> y <li>. Los atributos se definen dentro de llaves.

Brevemente, los cambios realizados fueron los siguientes: body { font-family: Arial, Helvetica, sans-serif; background-color: #FDC;}. El atributo font-family establece la fuente o tipo de letra con la que se muestra el texto, al indicar una serie de fuentes alternativas separadas por comas, los navegadores intentan mostrar el texto con la primera fuente y si no está disponible, intentan utilizar la segunda fuente y así sucesivamente hasta la última fuente indicada. Se incluye, además, un color de fondo para la página #FFDDCC (se simplifica como #FDC). 101

h1 {color: red; font-size: 2.8em; background-color: #CCC; }. Los textos en encabezados de primer nivel tendrán color rojo, un fondo para el texto de tonalidad gris (#CCCCCC) y un tamaño de 2.8em. Esta última unidad de medida (em) determina un valor de escala con respecto al tamaño por defecto; es decir, si el tamaño es de 16 píxeles, el tamaño de letra definido por 2.8em será de 44.8 píxeles. h2 {font-size: 1.4em; background-color: #CCC; }. Los textos en encabezados de segundo nivel tendrán un tamaño de 1.4em, la mitad del anterior. Se incluye un fondo para el texto de tonalidad gris. h3 {font-size: 22px; text-align: center}. Para este caso, el tamaño de letra se define con unidades en píxeles que, prácticamente, es el mismo tamaño del encabezado anterior. Un atributo adicional es el centrado horizontal del texto. p {background-color: #E8E8E8;}. Sólo se ha modificado el fondo del texto en la etiqueta párrafos con un color gris claro. strong {color: red; background-color: #BBB;}. Letra de color rojo y fondo en tonalidad gris obscura. em {color: red; background-color: #E8E8E8;}. Letra de color rojo y fondo en tonalidad gris claro. li {color: blue}. Los textos de los elementos de una lista irán en color azul. Se incluyeron etiquetas para negrilla <b> e itálicas <i> en las líneas de código de la página. En la siguiente página se presenta una imagen del resultado de estos cambios. Recomendamos practicar con estos mínimos elementos, antes de emprender la tarea de modificar las presentaciones en los diferentes aplicativos de este taller. Sin embargo, en cada presentador, estaremos recordando parte de lo aquí explicado.

¡Ánimo Pues!

102

103

PARTE 1 DIAPOSITIVAS CON DESPLAZAMIENTO EN EL PLANO En este apartado nos dedicaremos a explorar el funcionamiento de cinco presentadores:     

Deck Google Google modificado Dzslides Fathom

Estos presentadores se pueden descargar clicando en: presentadores. En cada uno de ellos, se han hecho algunas intervenciones para su adaptación a escenas de Descartes pero, en general, se conservan las características generales. En dispositivos móviles, el presentador que mejor se comporta es el Google modificado; sin embargo, el objetivo final no es su compatibilidad con dispositivos móviles, sino contar con una herramienta alterna para nuestras presentaciones en público. Algunas ventajas, al contar con estos presentadores en formato HTML5, son las siguientes:  La no dependencia de presentadores comerciales como el PowerPoint, por ejemplo.  Publicación en la nube, que permite visionar nuestra presentación en cualquier lugar y en cualquier ordenador.  La más importante, para nosotros, es la incrustación de objetos Descartes, convirtiendo una presentación simple en una presentación interactiva. Es importante que se haya estudiado el apartado dedicado a los elementos mínimos de HTML, para que se comprenda mejor las intervenciones que haremos en cada presentador; igualmente, se debe considerar la posibilidad de definir una sola hoja de estilos en la cabecera de la página.

104

PRESENTADOR DECK Licencia MIT. Copyright (c) 2011-2014 Caleb Troughton Se concede permiso, de forma gratuita , a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el " Software "), para trabajar con el Software sin restricción, incluyendo sin limitación, los derechos para usar, copiar , modificar, fusionar, publicar , distribuir, sublicenciar y / o vender copias del Software…

Este presentador produce diapositivas con desplazamiento horizontal, vertical o tipo fade (desvanecimiento). El desplazamiento se realiza con la barra espaciadora, las teclas de dirección o haciendo clic en las flechas de los extremos, también funciona con un control remoto de diapositivas. Una ventaja considerable, con respecto a otros presentadores, es el tamaño de la diapositiva que es de pantalla completa.

Otra ventaja adicional, es la posibilidad de crear nueve tipos de presentación, combinando los estilos y las transiciones. PROCEDIMIENTO PARA MODIFICAR LA PRESENTACIÓN Paso 1. Abrimos el archivo index.html de la carpeta Deck. Recomendamos alguno de estos editores tipo WYSIWYG (acrónimo de What You See Is What You Get, que en español significa "lo que ves es lo que obtienes"):  BlueGriffon: http://www.bluegriffon.org/ (Windows, Mac OS X y Linux).  Dreamweaver (comercial)

105

También son útiles editores simples como:  SublimeText: http://www.sublimetext.com/ (OS X, Windows y Linux).  Notepad++: http://notepad-plus-plus.org/ (Windows) O, en algunos casos, un editor como el bloc de notas. Paso 2. Modificación del diseño y la transición. Deck presenta tres tipos de diseño: neon.css, web-2.0.css y swiss.css, este último es el que se presenta originalmente. Cada diseño cambia colores de textos, botones y fondos. Buscamos en el bloque <head> la línea de estilos (diseño) para modificarla, si así lo deseamos. Por otra parte, hay tres tipos de transiciones: fade.css, vertical-slide.css y horizontal-slide.css, que podemos modificar en la línea de transición de diapositivas, la cual se encuentra contigua a la línea de estilos. En las siguientes imágenes, podemos observar estas líneas en tres de los editores mencionados: En BlueGriffon

En Sublime

En Notepad++

Esta es una diapositiva en estilo neon.css:

106

Paso 3. Modificación o inclusión de diapositivas. En este presentador, cada diapositiva se encuentra en un bloque llamado “section”, que inicia con la etiqueta <section class=”slide”> y termina con </section>, nuestra modificaciones sólo se harán en el contenido entres estas dos etiquetas. Estas diapositivas se encuentran al inicio del <body>:

El ejemplo que adjuntamos en la descarga que has realizado, tiene cuatro diapositivas, que explicamos así:

107

Primera diapositiva. Incluye solo texto <section class="slide"> <h1>Presentación simple</h1> <h3>Desplazamiento horizontal</h3> </section> Cada diseño de estilos, determina tipos de fuentes, posición, color y tamaños. En el Deck, la etiqueta <h1> escribe un texto de gran tamaño (4.5 em 13) centrado en la diapositiva. La etiqueta <h3>, de unos 20 píxeles de tamaño, presenta el texto en la parte superior izquierda de la diapositiva. Es importante tener en cuenta este diseño, para evitar textos sobrepuestos sobre imágenes o vídeos. Si deseamos incluir otras diapositivas de este tipo, sólo tenemos que copiar este bloque e insertarlo donde queramos que se presente. La diapositiva anterior, con estilo swiss.css, es la siguiente:

Recordando la modificación de estilos en etiquetas, podríamos modificar algunos atributos del texto en <h1>, como por ejemplo: <h1 style="color: red;">Presentación simple</h1>

1.29 em equivale a 18 píxeles

108

Segunda diapositiva. Hemos incluido una escena de Descartes, a través de una etiqueta <iframe>: <section class="slide"> <iframe style="width: 820px; JS/index.html"></iframe> </section>

height:

590px;"

src="GE-TR-16-

En este caso, se trata de un objeto del proyecto Canals. Es importante incluir un estilo que defina las dimensiones del objeto (ancho: width y alto: height). La fuente src (source), puede ser una dirección de la página del proyecto o, como en nuestro caso, una dirección local.

Tamaños de objetos como los de Canals son posibles de incorporar en el presentador Deck. Es posible que el objeto quede muy cercano al borde superior de la diapositiva, por ello, se recomienda incluir una etiqueta de salto de línea <br>: <section class="slide"> <br> <iframe style="width: 820px; JS/index.html"></iframe> </section>

height:

590px;"

src="GE-TR-16-

Tercera diapositiva. Se trata de un vídeo de Youtube, que se embebe en un iframe. Notemos que las dimensiones tienen un formato diferente al que usamos en la diapositiva anterior; sin embargo, ambas son válidas en JavaScript.

109

<section class="slide"> <h2>Un vídeo</h2> <iframe src="http://www.youtube.com/embed/lh0yr_b70FY" allowfullscreen="" frameborder="0" height="315" width="560"></iframe> </section>

El tamaño del vídeo lo podemos ajustar a la diapositiva; sin embargo, no se recomienda, en tanto que dificulta el desplazamiento de diapositivas en dispositivos móviles. Cuarta diapositiva. Por último, hemos incluido una imagen, que se incorpora a través de una etiqueta <img>, la fuente puede ser local, como en este caso, o una dirección de la web. <section class="slide"> <h4>Una imagen</h4> <img src="imagenes/img1.jpg"></img> </section>

110

También, podemos cambiar el tamaño de la imagen, usando el siguiente código: <section class="slide"> <h4>Una imagen</h4> <img src="imagenes/img1.jpg" height="480" width="700"></img> </section>

111

PRESENTADOR GOOGLE (Plantilla Google) Por Luke Mahé y Marcin Wichary. Fuente: http://code.google.com/p/html5slides/

Tiene las mismas características descritas en el presentador anterior, en lo que respecta al desplazamiento, tamaños de diapositivas y ventajas para las escenas de Descartes. Adicionalmente, tiene algunos atributos adicionales que describiremos en algunas de las diapositivas que acompañan la carpeta adjunta a este documento, que hace parte de los cinco presentadores que ya has descargado. PROCEDIMIENTO PARA MODIFICAR LA PRESENTACIÓN Paso 1. Abrimos el archivo index.html de la carpeta Google con uno de los editores, como los antes propuestos. Paso 2. Modificación del diseño y los temas. Google presenta dos tipos de diseño: layout-regular, layout-faux-widescreen y layout-widescreen. Además, dos temas diferentes: template-default y template-io2011. La combinación de diseños y temas están asociados a unas imágenes que Google imprime como pie de página y en el centro de la primera diapositiva. En la carpeta llamada images, aparecen cuatro imágenes con los nombres:    

Colorbar.png googleio-logo,png google-logo.png google-logo-small

Inmediatamente después de la etiqueta <body>, aparece un código llamado <section>, en el cual están definidos el diseño y el tema, que se muestran en la siguiente imagen:

112

Google imprime en la primera diapositiva la imagen llamada google-log-png y en los pie de pĂĄgina la imagen google.logo-small-png. Estas imĂĄgenes, las podemos cambiar por otras que respondan a nuestras necesidades.

Una diapositiva, serĂa la siguiente:

113

Si modificamos el tema así:

El efecto sobre la diapositiva anterior, sería:

Observemos que se incluye la barra de Google y cambia la imagen del pie de página. Igualmente, podemos probar con el cambio de diseño, que dejaremos para que lo explores.

114

Paso 3. Modificación o inclusión de diapositivas. En este presentador, cada diapositiva se encuentra en un bloque llamado “article”, que inicia con la etiqueta <article> y termina con </article>, nuestra modificaciones sólo se harán en el contenido entres estas dos etiquetas. Las modificaciones son similares al presentador anterior, así que nos concentraremos en sólo algunas diapositivas especiales. Diapositiva de inicio. Es la que incluye el logo o imagen centrada en la pantalla, se produce a través del primer código:

Si no se desea incluir, simplemente se elimina. Diapositiva con textos. Recomendamos explorar cómo funcionan las etiquetas de texto. Sin embargo adelantamos que, para el caso de <h1>, el texto es centrado verticalmente en la pantalla. Observa el siguiente código:

El código corresponde a la segunda diapositiva, que incluye: un texto con etiqueta <h1>, dos saltos de página, y un texto con etiqueta de párrafo <p>. La diapositiva final es la siguiente: 115

Uso de viĂąetas. A travĂŠs de la etiqueta para listas no ordenadas <ul> y <li> para los elementos de lista, se crea una diapositiva cuyos elementos irĂĄn apareciendo con los desplazamientos realizados.

116

Para listas ordenadas, se usaría <ol class=”build”>. Diapositiva con tablas. Un camino sencillo es recurrir a diseñar nuestras tablas en otra aplicación como PowerPoint y luego copiarla como imagen; sin embargo, el uso de código JavaScript permite menos peso de la diapositiva y, además, deja la posibilidad al usuario de hacer una copia, tal como lo hemos hecho y modificado en la tabla que se muestra en la parte inferior de esta página. Las tablas se declaran con la etiqueta <table>, las filas con <tr>, las celdas de encabezado con <td> y las demás celdas con <th>. Observemos que sólo es necesario cerrar con la etiqueta </table>. También es posible usar estilos especiales como color, tamaño y tipo de letras, bordes, etcétera. El siguiente código, es un ejemplo de cambio de estilo en una de las filas de la tabla: <tr style="font-size: 36px; color: blue;"> Esta es la tabla capturada desde la diapositiva:

de fondo.

Diapositivas El presentador 117

Google tiene una opción para que las imágenes y los <iframe> ocupen el fondo de la diapositiva. Lo hemos hecho para tres de las diapositivas del presentador que acompaña este documento. Para ello usamos la clase fill.

Esta es una de las tres diapositivas con clase fill:

PRESENTADOR GOOGLE MODIFICADO 118

Por Eric Bidelman y Luke Mahé. Sujeto a los términos y condiciones de esta Licencia, cada Colaborador otorga a Usted una licencia mundial, no exclusiva, sin costo alguno, libre de regalías, licencia de copyright perpetua e irrevocable para reproducir, preparar trabajos derivados, mostrar públicamente, ejecutar públicamente, sublicenciar y distribuir el trabajo y dichas Obras Derivadas en Fuente u Objeto (http://www.apache.org/licenses/LICENSE-2.0)

Se encuentra inmediatamente después de la etiqueta <body>. El logo, como en el presentador anterior, es una imagen (logo.png) que podemos modificar. 119

Segunda diapositiva. Produce un efecto interesante al inicio de la presentaci贸n. En primer lugar, debemos cambiar la imagen logo2.png por la que consideremos necesaria (ver carpeta images). Sino la necesitamos, simplemente eliminamos la l铆nea <aside></aside>.

Las etiquetas <h1>, <h2> y <p> del bloque <hgroup> son invocadas desde el archivo slide_config-json. Debemos, entonces, abrir este archivo y cambiar el contenido en title, subtitle, name y Company. Salvamos, cerramos el archivo y continuamos editando el index.html 120

Otras diapositivas. Las demás diapositivas se diseñan tal como se hizo en el presentador anterior, teniendo en cuenta que los títulos se encapsulan entre las etiquetas <hgroup></hgroup>. Además del efecto que producen las diapositivas tipo segue (ver segunda diapositiva), una clase novedosa, que se incorpora, es flexbox center, que permite centrar horizontal y verticalmente el contenido de la diapositiva.

121

Esta diapositiva es un ejemplo de ello:

122

PRESENTADOR DZSLIDES Excelente presentador con características especiales que describiremos a continuación. Hacemos copia de la licencia sin traducción… por obvias razones (ver https://github.com/paulrouget/dzslides). DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE Version 2, December 2004 Everyone is permitted to copy and distribute verbatim or modified copies of this license document, and changing it is allowed as long as the name is changed. DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

Similar al presentador Deck, una sección <section> es una diapositiva. Su tamaño es de 800x600 encapsuladas en un marco… todos los cambios, incluido el resize se hacen en el marco. Describimos solamente algunas diapositivas que tengan algo novedoso14. Primera diapositiva. Incluye un pie de página <footer>.

La etiqueta <h1> está configurada para que el texto se centre en la diapositiva, tal como se aprecia en la siguiente imagen.

Si deseas una análisis más amplio de este presentador, puedes consultar el vídeo.

123

Segunda diapositiva. Es un objeto Canals que, pese a su tamaño, el presentador lo ajusta al marco.

Diapositivas de imágenes. Una caracteristica especial, en tanto que las imágenes se escalan al tamaño del marco 800x600, lo que obliga a utilizar imágenes cercanas a este valor o de tamaño superior para evitar distorsiones. En casos como este, se justifica el uso de imágenes vectorizadas (svg).

124

Diapositivas de vídeos. Una novedad es el uso del nuevo formato HML5 para vídeos <video>. Siempre que se use el formato de vídeo webm, se contará con las siguentes ventajas: ejecución automática, detención del vídeo cuando se pasa a otra diapositiva, reanudación cuando se regrasa a la diapositiva. Se pueden hacer comparaciones con el vídeo Youtube incluido en la presentación y los dos vídeos webm. Se podrá notar que el sonido del vídeo Youtube se seguirá escuchando cuando se pasa a otra diapositiva, advirtiendo que aún se está reproduciendo.

125

PRESENTADOR FATHOM Copyright ( c ) 2011 Marcos Dalgleish Se concede permiso , de forma gratuita , a cualquier persona que obtenga una copia de este software y archivos de documentaci贸n asociados (el "Software "), para trabajar con el Software sin restricci贸n, incluyendo sin limitaci贸n, los derechos para usar , copiar, modificar, fusionar , publicar, distribuir, sublicenciar y / o vender copias del Software.

Un presentador simple, similar a Desk y Google. El procedimiento de modificaci贸n de diapositivas se puede hacer con lo explicado en los presentadores anteriores.

Eso es todo

126

PARTE 2 DIAPOSITIVAS 3D En este apartado nos dedicaremos a explorar el funcionamiento de cuatro presentadores con efectos 3D:    

Bespoke. En la versión adaptada para tamaño 790x500 píxeles. Reveal Stacksliders Slicebox

Los cuatro presentadores los puedes descargar clicando en presentadores_3D, además de la versión 600x40 de Beskope. Se han hecho algunas intervenciones para su adaptación a escenas de Descartes pero, en general, se conservan las características generales. Los cuatro presentadores se han probado en dispositivos móviles, con buenos resultados; sin embargo, se reitera que el objetivo final no es su compatibilidad con dispositivos móviles, sino contar con una herramienta alterna para nuestras presentaciones en público. Obviamente, algunos que solemos compartir fotos, podemos hacerlo a través de estos presentadores, con un buen funcionamiento en dispositivos móviles.

127

PRESENTADOR REVEAL Licencia MIT Copyright (C) 2013 Hakim El Hattab , http://hakim.se Se concede permiso , de forma gratuita , a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el " Software "), para trabajar con el Software sin restricción, incluyendo sin limitación, los derechos para usar, copiar , modificar, fusionar, publicar , distribuir, sublicenciar y / o vender copias del Software…

Este presentador produce diapositivas con efectos 3D. El desplazamiento se realiza con la barra espaciadora, las teclas de dirección o haciendo clic en las flechas de los extremos, también funciona con un control remoto de diapositivas. Es importante tener en cuenta que cuando estamos interactuando con una escena, una página web o estamos reproduciendo un vídeo, debemos hacer clic fuera de la diapositiva para que los controles de desplazamiento se vuelvan a activar. La ventaja adicional de este tipo de presentación es su estilo 3D. PROCEDIMIENTO PARA MODIFICAR LA PRESENTACIÓN Paso 1. Abrimos el archivo index.html de la carpeta Reveal con un editor, como los que antes hemos recomendado. Paso 2. Modificación del diseño y la transición. Reveal presenta ocho tipos de diseño: beige, default, moon, night, serif, simple, sky y solarized. Cada diseño cambia colores de textos, botones y fondos. Por otra parte, hay ocho tipos de transiciones: default, cube, page, concave, zoom, linear, fade y none. La transición linear convierte el presentador al estilo de desplazamiento horizontal. Tanto los estilos como las transiciones, las podemos modificar en las líneas de código que se encuentran al final del documento HTML:

128

Sugerimos practicar con varias opciones, hasta encontrar aquella que se ajuste a nuestro gusto. En principio, hemos usado el estilo por defecto (default) y la transición tipo cubo. Paso 3. Modificación o inclusión de diapositivas. En este presentador, cada diapositiva se encuentra en un bloque llamado “section”, que inicia con la etiqueta <section> y termina con </section>, nuestra modificaciones sólo se harán en el contenido entres estas dos etiquetas. Estas diapositivas se encuentran al inicio del <body>. El ejemplo que adjuntamos tiene once diapositivas, que explicamos así: Primera diapositiva. Incluye solo texto

Cada diseño determina tipos de fuentes, posición, color y tamaños. En el diseño que hemos escogido (default), la etiqueta <h1> escribe un texto grande centrado en la parte superior de la diapositiva. La etiqueta <h3>, presenta un texto de un tamaño que es una tercera parte de <h1>, y la etiqueta de párrafo <p>, mucho más pequeño. Si deseamos incluir otras diapositivas de este tipo, sólo tenemos que copiar este bloque e insertarlo donde queramos que se presente.

129

Diapositivas de imágenes. Hemos incluido cinco imágenes, combinando tipos de letra y colores de fondo. Imagen con fondo dado por el diseño. Observemos que es necesario definir el tamaño de la imagen.

Imagen con fondo blanco (#FFF o #FFFFFF), se usa el comando data-background.

Imagen con fondo blanco y texto rojo

Imagen con fuente externa. No se incluyó el tamaño, lo captura de la página.

130

La Ăşltima imagen

Una escena de Descartes. En este caso, se trata de un puzle que se encuentra en la misma carpeta del index. Es importante ensayar el tamaĂąo de la escena con varios valores hasta ajustarla, puesto que el puzle tiene un tamaĂąo de 560x400, pero las dimensiones que los ajustan a la diapositiva son de 790x560.

131

NOTA IMPORTANTE. No debemos abusar del número de escenas Descartes en una presentación, puesto que el intérprete se carga tantas veces como escenas tengamos, en un ordenador no sería mucho problema, pero en un dispositivo móvil sería fatal. Recordemos que se trata de una presentación, no de un Proyecto Descartes. Última diapositiva. Se trata de un vídeo de Youtube, que se embebe en un iframe.

132

Diapositivas en dirección vertical. Seguramente hemos observado que los botones de desplazamiento, también presentan las opciones de arriba y abajo.

Estas diapositivas se diseñan, incrustándolas dentro de un bloque <section>, tal como se indica en la imagen de arriba. Estas tres últimas diapositivas, corresponden a algunos experimentos desarrollados por el autor de este presentador Hakim El Hattab.

133

PRESENTADOR BESPOKE Licencia MIT Copyright (c) 2014 Marcos Dalgleish Se concede permiso , de forma gratuita , a cualquier persona que obtenga una copia de este software y archivos de documentación asociados (el " Software "), para trabajar con el Software sin restricción, incluyendo sin limitación, los derechos para usar, copiar , modificar, fusionar, publicar , distribuir, sublicenciar y/o vender copias del Software…

Este presentador produce diapositivas con efectos 3D. La descripción la hacemos sobre la versión 790x500 que, para la versión 600x400, funciona igual. Ambos modelos se suministran en la descarga que has realizado. El desplazamiento se realiza con la barra espaciadora o las teclas de dirección, también funciona con un control remoto de diapositivas. Es importante tener en cuenta que cuando estamos interactuando con una escena, una página web o estamos reproduciendo un vídeo, debemos hacer clic fuera de la diapositiva para que los controles de desplazamiento se vuelvan a activar. La ventaja adicional de este tipo de presentación es su estilo 3D, cuyos tipos de transición no tendremos que modificar en el código, basta con presionar las teclas de dirección arriba o abajo en la presentación puesta en el navegador. A continuación, mostramos algunas imágenes con esas transiciones.

134

PROCEDIMIENTO PARA MODIFICAR LA PRESENTACIÓN Paso 1. Abrimos el archivo index.html. Este archivo se encuentra en la subcarpeta demo de la carpeta Bespoke(790x500). Abrimos el archivo con un editor antes recomendado. Paso 2. Modificación de algunas parte del diseño. Hay dos elementos que podemos modificar en la presentación. Pestaña forkme. Aparece en la esquina superior derecha. Al final, antes del pie de página (footer), aparece el bloque que podemos modificar. La referencia es opcional, con ella el usuario accede a la página del Proyecto Canals, para este ejemplo. 135

Pie de página. Luego del bloque anterior, aparece el bloque de pie de página, que podemos modificar cambiando: la imagen del autor (profile.jpg), la cual se encuentra en la subcarpeta demo; el nombre del autor y el enlace a su twitter (opcional).

Paso 3. Modificación o inclusión de diapositivas. En este presentador, cada diapositiva se encuentra en un bloque llamado “section”, que inicia con la etiqueta <section> y termina con </section>, nuestras modificaciones sólo se harán en el contenido entres estas dos etiquetas. Estas diapositivas se encuentran al inicio del <body>. El ejemplo que adjuntamos tiene cinco diapositivas, que explicamos así: Primera diapositiva. Incluye solo un texto con el título de la presentación.

La fuente original era Raleway Dots de tamaño 156 px, que daba la siguiente apariencia: 136

Nosotros la hemos modificado por fuente Verdana en el archivo style.css.

Segunda diapositiva. Hemos incluido una escena del Proyecto Canals de tamaĂąo 790x500; sin embargo, en el formato del iframe, lo hemos ampliado a 810x500 para su correcto visionado.

Tercera diapositiva. Corresponde a una imagen. Observemos que se ha incluido un bloque <div> para centrar la imagen horizontalmente y dos saltos de lĂnea. 137

Cuarta diapositiva. Es un vídeo de Youtube en el que, también, se ha incluido el bloque <div> para el centrado.

Última diapositiva: 138

139

PRESENTACIÓN STACK SLIDER Created by Codrops Licencia: http://tympanus.net/codrops/licensing/ Los recursos en Codrops pueden ser utilizadas libremente en proyectos personales y comerciales. Tenga en cuenta, que la mayoría de los tutoriales y recursos son experimentales y no está listo para la producción, pero hecho en busca de inspiración y sólo con fines de demostración. Los recursos en Codrops se pueden utilizar en los sitios web, aplicaciones web y plantillas web destinadas a la venta. Usted no tiene que vincular de nuevo a nosotros si lo vicia su trabajo, pero apreciamos ningún crédito.

Este presentador produce diapositivas con efectos 3D. El desplazamiento se realiza haciendo clic en las flechas de los extremos, que se constituye en una de las debilidades de la presentación; sin embargo, el giro 3D producido, compensa la debilidad.

PROCEDIMIENTO PARA MODIFICAR LA PRESENTACIÓN Paso 1. Abrimos el archivo index.html de la carpeta 3D con un editor antes recomendado. Paso 2. Modificación del encabezado. El primer bloque del <body> es el encabezado con formato <header class="clearfix">. Dentro de este encabezado podemos cambiar el título de la presentación y el autor: 140

Paso 3. Modificación o inclusión de diapositivas. En este presentador, las diapositivas se diseñaron como elemento de una lista <ul id="st-stack" class="ststack-raw">. Es decir, cada diapositiva se encuentra en un bloque <li>. Una característica adicional, es que los contenidos, a su vez, están dentro de bloques <div>, cada uno de ellos identificado como un st-item para imágenes e iframes o sttitle para textos. Primera diapositiva. Es una imagen de tamaño 600x400

141

Segunda diapositiva. Otra imagen que no indica su tamaĂąo, pero el aplicativo asigna por defecto 400x300.

Tercera diapositiva. Imagen de 680x420 pĂxeles.

Cuarta diapositiva. Objeto Descartes de 400x355

142

Quinta diapositiva. Objeto Descartes de 790x500. Por su tama単o, se solapa con parte del dise単o.

143

Sexta diapositiva. Un objeto Canals en línea, con tamaño superior al anterior. Última diapositiva. Un vídeo de 640x360

144

PRESENTACIÓN SLICEBOX Created by Codrops Licencia: http://tympanus.net/codrops/licensing/ Los recursos en Codrops pueden ser utilizadas libremente en proyectos personales y comerciales. Tenga en cuenta, que la mayoría de los tutoriales y recursos son experimentales y no está listo para la producción, pero hecho en busca de inspiración y sólo con fines de demostración. Los recursos en Codrops se pueden utilizar en los sitios web, aplicaciones web y plantillas web destinadas a la venta. Usted no tiene que vincular de nuevo a nosotros si lo vicia su trabajo, pero apreciamos ningún crédito.

145

PROCEDIMIENTO PARA MODIFICAR LA PRESENTACIÓN El procedimiento es similar a lo explicado en los presentadores anteriores, así que no nos detendremos a explicarlo. Lo que si es importante considerar, es que las diapositivas tienen un ancho máximo de 700; si embargo, el presentador ajusta el ancho para aquellas que son de tamaño superior, un ejemplo es el Puzle 2, que tiene un ancho de 790 píxeles.

Bueno, aquí terminamos con presentadores tipo 3D

Juan Guillermo Rivera Berrío 146

PARTE 3 IMPRESS.JS Este último tutorial, lo haré más personalizado. Impress.js es una herramienta para crear presentaciones con el poder de CSS3 en navegadores modernos, está inspirado en la idea de Prezi. Si bien, se requiere tener conocimiento de HTML y CSS para obtener cambios significativos en el diseño, con lo aprendido en el apartado HTML y en las partes 2 y 3, es suficiente para obtener excelentes presentaciones. HERRAMIENTAS REQUERIDAS Para aprender Impress el mejor camino es realizando los ejercicios que plantearé en este documento; para ello, debes contar con las siguientes herramientas:  La carpeta Impress.js – Descartes. La descargas clicando en ImpressJS. Notarás que he preparado una carpeta especial para Descartes, la cual incluye:

147

o El archivo index.html del demo original con algunos cambios de diseño. o Seis archivos de ejercicios (ejemplo1, ejemplo2,…, ejemplo6) adaptados del libro Building Impressive Presentations with impress.js (ver portada en la imagen de las siguiente página), cuyo autor es Rakhitha Nimesh Ratnayake. Se puede adquirir en

http://www.amazon.com/dp/1849696489/?tag=packtpubli-20. También existen enlaces para descargarlo sin costo (piratería); sin embargo, dado el esfuerzo en la producción de esta herramienta, la compra del libro es lo menos que podemos hacer para contribuir a su desarrollo. o Seis carpetas que describiré a continuación. 

Carpeta objeto. Es un objeto interactivo del Proyecto Pizarra Interactiva, que se usaré en algunas diapositivas, evidenciando el poder de Impress en el escalado de estos objetos.

148

Portada del libro Building Impressive Presentations with Impress.js

 Carpeta Puzle. Otro objeto Descartes a usar en los ejemplos.  Carpeta js. Incluye los intérpretes JavaScript: Impress.js y jquery.min.js, que se quedarán tal cual están.  Carpeta imágenes. Incluye cuatro imágenes para usar en los ejemplos.  Carpeta images. Incluye cuatro imágenes que se usan en el sexto ejemplo.  Carpeta css. He incluido cuatro hojas de estilo, la que se descarga con el demo (Impress-demo.css), una modificada a partir del demo (descartes.css) y dos adicionales que vienen con el libro; es decir, sólo son para observar otros diseños, no para publicar en la web, a no ser que se adquiera el libro.

149

En la hoja de estilo modificada, he disminuido la opacidad y he incluido dos nuevos estilos de diapositiva (slide2, slide3). Finalmente, se requiere un buen editor como los sugeridos en el apartado HTML.

Ejemplo 1: Diapositivas en el plano Como lo dije al inicio, Impress se aprende con ejercicios. Iniciamos, entonces, con el primer ejemplo. Se trata de cinco diapositivas como lo muestra la siguiente imagen. La diapositiva central es de un tama単o tres veces mayor que las laterales. La idea es utilizar rotaciones en las transiciones de una diapositiva a otra.

150

Impress es un lienzo (canvas) infinito en el que podemos imprimir, obviamente, infinitas diapositivas. En este ejemplo, debes prestar atención a las coordenadas en el plano donde se localizará cada diapositiva. Te sugiero iniciar con el modelo ejemplo0.html, que no tiene diapositivas y sobre él, construir el ejemplo.

Diapositiva 1

<div id="Inicio" class="step slide2" data-x="-1000" data-y="-1000" data-scale="3"> <p>Construyendo Presentaciones Impresionantes</p> <q>Impress.js</q> </div>

 Cada diapositiva tendrá un identificador único, la primera la he identificado como Inicio (id = “Inicio”). Si por error, asignas el mismo identificador, las diapositivas se solaparán.  Las clase de diapositiva que he escogido es slide2 (class = “step slide2”), que presenta un fondo azul claro. Toda diapositiva tiene asociada una clase step que, en forma simple, bastaría con class = “step”, el apellido slide2 le impregna diseño (debes probar que ocurre con una y otra opción).  Para que el tamaño de la diapositiva sea el triple de una normal, he incluido la instrucción data-scale = “3”. Esta diferencia de tamaño es apreciable en la diapositiva panorámica (overview) que explicamos al final del ejemplo.

151

 Ahora, viene la parte más importante… la localización de la diapositiva. El centro en Impress está en (-1000, -1000), allí ubicamos nuestra primera diapositiva.

Coordenadas de las diapositivas uno y dos Cada diapositiva tiene un tamaño relativo (al plano de Impress) de 900x700 píxeles. Así las cosas, la primera diapositiva será de 2700x2100. Este dato es importante para localizar las demás diapositivas.  El contenido es un texto tipo párrafo y uno determinado por el elemento <q> (quote) que he diseñado en la hoja de estilos, para silide2, con los atributos: 60 px, centrado y de color rojo.

152

Segunda diapositiva

<div id="N" class="step slide3" data-x="-1000" data-y="-2500" > <q>Diapositiva Norte</q> </div>

 La he identificado como N  La clase asociada es slide 3  La localización, de acuerdo a la imagen 3, sería: la misma abscisa de la diapositiva uno, la ordenada se calcula teniendo en cuenta, la distancia de los centros de las diapositivas uno y dos a los bordes, mas una holgura de unos 100 píxeles; es decir, y2 = -1000 – 1050 – 350 -100 =-2500  El contenido es sólo un texto que, con la clase slide3, lo presenta en color azul y centrado. Nótese que he pronunciado la curvatura en los bordes, en el quinto ejemplo, explicaré como hacerlo.

153

Tercera diapositiva <div id="E" class="step slide3" data-x="1000" data-y="-1000" data-rotate="90"> <q>Diapositiva Este</q> </dv>

 La he identificado como E  La clase asociada es slide 3  La localización, de acuerdo a la imagen 3, sería: la misma ordenada de la diapositiva uno, la abscisa se calcula teniendo en cuenta, la distancia de los centros de las diapositivas uno y dos a los bordes, mas una holgura de 300 píxeles; es decir, x3 = -1000 + 1350 + 350 +300 =1000.  Agregué el primer efecto de rotación, con data-rotate=”90”, que permite un desplazamiento rotacional desde la diapositiva dos a la tres.  El contenido es sólo un texto que, con la clase slide3, lo presenta en color azul y centrado.

154

Diapositiva panorámica. <div id="overview" class="step" data-x="-1000" data-y="-1000" data-scale="5"> </div>

Esta diapositiva va al final, muestra todas las diapositivas visibles en el lienzo. La escala permite una mayor o menor visibilidad (por el tamaño) de la panorámica. Ejercicio 1. Copia el contenido de las tres diapositivas al ejemplo cero, incluyendo la panorámica. La panorámica, hasta este punto, mostraría:

Termina el ejemplo construyendo las dos diapositivas restantes.

155

Ejemplo 2: Diapositivas en varios planos Si bien es posible imprimir muchas diapositivas en el plano XY, también es posible que perdamos el control de las mismas cuando algunas se nos escapan de la panorámica. Una de las propiedades interesantes de Impress es que permite crear varios planos o, si se prefiere, varios lienzos, con sólo incluir la coordenada z. Observa las siguientes diapositivas:

<div id="Inicio2" class="step slide2" data-x="-1000" data-y="-1000" data-z="-3000" data-scale="3"> <p>Añadiendo profundidad</p> <q>z = -3000</q> </div> <div id="Alta" class="step slide3" data-x="-1800" data-y="0" data-z="3000"> <p>La más elevada</p> <p style="text-align:center"><img style='height: 400px' src="imagenes/1.png"/></p> </div> <div id="Descartes" class="step slide3" data-x="-200" data-y="100" data-z="3000" data-rotate="90"> <p>Proyecto Descartes</p> <iframe style="width: 800px; height: 600px;" src="objeto/index.html"></iframe> </div>

La primera, identificada como Inicio2, se encuentra en la misma posición de la diapositiva Inicio del ejemplo uno, pero en un plano a 3000 píxeles por debajo. La segunda está a 3000 píxeles por encima del plano XY original e incluye una imagen como contenido. La tercera, se encuentra en el mismo plano de la segunda, pero en coordenadas x y y distanciadas. Incluye, además, un objeto de Pizarra Interactiva. Ejercicio 2. Añade estas tres diapositivas al ejercicio anterior. Recuerda que la diapositiva panorámica, debe ser la última. Una imagen de ella, es la siguiente:

156

Observa que tenemos el control de las diapositivas, así éstas estén en diferentes niveles. Obviamente, no se observa la diapositiva Inicio2. La coordenada z permite rotaciones con respecto a cualquier eje, lo que se traduce en transiciones tipo 3D, como veremos en el siguiente ejemplo.

Ejemplo 3: Diapositivas con rotaciones 3D En el primer ejemplo usamos la instrucción data-rotate=”90” para la tercera diapositiva, lo que genera una rotación de 90º en el plano XY. Impress incluye otros tipos de rotaciones con respecto a cualquier eje. Las cuatro diapositivas que se muestran a continuación, utilizan la instrucción data-rotate-y. En Impress el eje y es una vertical en el plano de la pantalla: 157

<div id="slide1" class="step slide2" data-x="400" data-z="400" data-rotate-y="-90" > <q>Diapositiva 1</q> </div> <div id="slide2" class="step slide3" data-x="0" data-rotate-y="-180" > <q>Diapositiva 2</q> <p style="text-align:center"><img style='height: 400px' src="imagenes/1.png"/></p> </div> <div id="slide3" class="step slide2" data-x="400" data-z="-400" data-rotate-y="-270" > <p>Diapositiva 3</h2></p> <iframe style="width: 800px; height: 600px;" src="objeto/index.html"></iframe> </div> <div id="slide4" class="step" data-x="800" data-rotate-y="-360"> <p>Diapositiva 4</p> <iframe style="width: 395px; height: 350px;" src="Puzle/index.html"></iframe> </div>

Observa que si no se declara la ordenada Y, entonces Impress la asume con un valor de cero. La primera diapositiva se encuentra en x=400 y z=400, pero su giro en y de -90º la posiciona perpendicular a la pantalla (ver la imagen de abajo). La segunda diapositiva en x=0 y rotación de -180º, hace que quede invertida en la panorámica (ver imagen de abajo). La tercera diapositiva se encuentra a 400 píxeles al fondo y en la misma abscisa de la primera, su rotación -270º la posiciona perpendicular a la pantalla. La cuarta diapositiva está en x=800 y rota 360º permitiendo que colinde con la diapositiva dos.

158

Diapositivas del ejemplo 3

Ejercicio 3. Copia estas diapositivas en el ejercicio anterior, de esa forma generamos el ejemplo 4.

Ejemplo 4: Diapositivas combinadas con rotaciones 3D Este ejemplo es generado en el ejercicio 3. De esta forma, obtenemos un buen modelo para una presentaci贸n en p煤blico. Ejercicio 4. Realizar una presentaci贸n 3D con diapositivas en forma de cubo.

159

Ejemplo 5: Diapositivas con desplazamiento horizontal y cambio de estilos Como lo dije al principio, es posible modificar los atributos de las clases de diapositivas en la cabecera del documento. Para ello, usamos la etiqueta <style> antes de cerrar la cabecera </head>. En este ejemplo, haremos las siguientes modificaciones: Slide. En esta clase de diapositiva, cambiamos el color por #359B91 (ver imagen derecha), el tamaño de la letra a 100px y centrada. Slide2. El color de la letra lo he cambiado a #F0F. h2. Esta etiqueta de la clase slide, le he realizado estos cambios: h2{ margin: 20px; color: #00F; font-size: 100px; } El cambio más importante lo tiene el tamaño de la diapositiva, que lo he hecho así: .step { width: 1180px; height: 600px; display: block; transition: opacity 1s; } .step:not(.active) { opacity: .3; } La opacidad la he aumentado por el tipo de presentación: 160

Finalmente, he agregado cuatro diapositivas con posiciones en x de 0, 1200, 2400 y 3600, quedando una separaci贸n entre diapositivas de 20 p铆xeles (recordemos que el ancho de las diapositiva la cambiamos a 1180).

<div id="slide1" class="step slide" data-x="0" > <p>Diapositiva 1</p> <br> <p style="text-align:right"><img style='height: 400px' src="imagenes/i2.jpg"/></p> </div> <div id="slide2" class="step slide2" data-x="1200" > <h2>Diapositiva 2</h2> <p style="text-align:left"><img style='height: 400px' src="imagenes/1.png"/> <img style='height: 400px' src="imagenes/1.png"/> <img style='height: 200px' src="imagenes/1.png"/> </p> </div> <div id="slide3" class="step slide2" data-x="2400" > <p>Diapositiva 3</p> <br> <p style="text-align:left"><img style='height: 300px' src="imagenes/i3.jpg"/> <img style='height: 300px' src="imagenes/i3.jpg"/> <img style='height: 200px' src="imagenes/i3.jpg"/></p> </div> <div id="slide4" class="step slide2" data-x="3600" > <p style="text-align:center"><img style='height: 550px' src="imagenes/i4.jpg"/></p> </div> 161

Ejemplo 6: Diapositiva con reproducciรณn automรกtica Lo dejo para que lo explores

ยกEso es todo!

162

2014 Red Educativa Digital Descartes Autor: Juan Guillermo Rivera BerrĂo

163

VÍDEOS INTERACTIVOS CON DESCARTES DEFINICIÓN Seguramente existirán otras definiciones, que no entraremos a discutir. En nuestro concepto, todo objeto interactivo es aquel que podemos intervenir para modificar sus atributos y, en consecuencia, obtendremos nueva información que responde a esta intervención. Los vídeos interactivos, así concebidos, son aquellos que durante su reproducción permiten ingresar información al usuario que modificará el comportamiento del vídeo. Algunas de esas intervenciones y respuestas, podrían ser:  El vídeo se detiene, esperando una acción del usuario (ingreso de un texto, un clic sobre una opción). Una vez realizada la acción, el vídeo responde reanudando la producción.  El vídeo se detiene, esperando una acción del usuario (ingreso de un texto, un clic sobre una opción). Se reproduce otro vídeo que depende de la acción ejecutada por el usuario.  Durante la reproducción se hacen preguntas que el usuario responde con un clic, en la ventana del vídeo aparecerá un mensaje concordante con la respuesta. En YouTube existen algunos ejemplos: https://www.youtube.com/playlist?list=PLpzXYlKAPJLluRogpYpohfuAetPhnEwk7 Además de cómo diseñarlos: http://www.youtube.com/playlist?list=PLA70D57F1DE760A94

164

Vídeo de YouTube en el que el usuario hace clic sobre una de las cuatro opciones

¿POR QUÉ DESCARTES? Publicar un vídeo en un blog o en una página, obviamente, no necesita de intermediarios como el editor de Descartes, basta embeberlos y listo. Los vídeos que se pueden incluir en una escena, a través de un control de vídeo o de un espacio tipo HTMLIFrame, serían útiles si hacen parte de una unidad digital interactiva como Pizarra Interactiva, Proyecto Canals o Proyecto UN100. Igualmente, son bastante útiles en escenas tipo discurso. En este contexto, diseñar una escena con un vídeo sería más simple hacerlo con un editor de HTML. Sin embargo, los vídeos interactivos cobran validez en una simple escena, como lo veremos en el desarrollo de esta documentación. Sólo para adelantar, el editor de Descartes nos permite incluir otros elementos de interacción, diferentes a los ofrecidos por YouTube y otros servicios adicionales.

165

PASOS PARA EL DISEÑO DE LA ESCENA Los siguientes pasos se describen sólo para ilustración a los desarrolladores de escenas, que permitan diseñar otros modelos si se desea. Paso 1. Tamaño de la escena. Se usará una escena de 640x580 que permita alojar un vídeo de 640x480 y deje dos franjas para el título (superior) y los botones de control de vídeo (inferior). Paso 2. Control de vídeo. Se crea un control tipo vídeo en el espacio E1 y en la posición x=0, y=50, con dimensiones 640x480. Observa que el identificador del vídeo es v115.

Paso 3. Espacios. Creamos un espacio E2 semitransparente para los mensajes. Este espacio se diseña con la posición y las dimensiones que se observan en la imagen. La utilidad de este espacio es permitir la inclusión de mensajes y acciones interactivas y no permitir la manipulación de los controles del vídeo. El espacio se activa cuando el tiempo de reproducción es igual a cero, t1 o t2, por ello en la condición dibujar-si aparece (t=0)|(t=t1)|(t=t2).

Debes haber creado una carpeta de vídeos, en la que guardarás un vídeo mp4.

166

Es importante aclarar que una vez incluido el espacio, el cuadro del vídeo no se observará en el editor. Por defecto, nombraremos el vídeo como “video1” y éste debe estar en formato mp4.

A la izquierda el editor antes de añadir el espacio E2, en el medio con el espacio E2 y a la derecha la escena en el navegador

Creamos un tercer espacio E3 transparente para las pausas y otros mensajes. Este espacio se diseña con la posición y las dimensiones que se observan en la imagen. La utilidad de este espacio es permitir la pausa sin que se pueda manipular los controles del vídeo. Algunos mensajes se pueden presentar en este espacio, dejando la sensación que hacer parte del vídeo.

167

Paso 4. Animación. Creamos una animación, que controlará la reproducción del vídeo con el contador t. Para ello, incluimos la sentencia t = t +a, donde a tendrá el valor de uno (1) cuando se ejecuta la acción de reproducir v1.play() y cero (0) cuando se ejecuta la acción de pausar v1.pause(). Observa que la pausa es de 1000 milisegundos. El límite de la animación es 30 (t < 30), que corresponde al tiempo de duración del vídeo.

Paso 6. Textos iniciales. En el espacio E1 se incluye un título para el vídeo. En el espacio E2, unos mensajes con instrucciones iniciales, que desaparecerán una vez inicie el vídeo. Para ello, debemos incluir la condición t=0 en este segundo texto. Es importante cambiar el color del texto en E2, de acuerdo a los colores del vídeo.

168

Paso 7. Controles de vídeo. Creamos dos controles. El primero de reproducir, ubicado en la posición x = 160, y = 540, con las dimensiones indicadas en la imagen. Este control al ser activado, asigna 1 a la variable a y ejecuta al acción de reproducir v1.play(). Observa que el control desaparecerá cuando el tiempo de reproducción es t1 o t2, en los cuales se harán las preguntas.

169

El segundo control es el de pausa, ubicado en la posición x = 320, y = 540, con las dimensiones indicadas en la imagen. Este control al ser activado, asigna 0 a la variable a y ejecuta al acción de pausa v1.pause(). Observa que el control desaparecerá cuando el tiempo de reproducción es t1 o t2, en los cuales se harán las preguntas.

Los tiempos t1 y t2 son definidos por el usuario en el algoritmo de inicio, que para el ejemplo serán a los 6 y 17 segundos.

170

Paso 8. Eventos. Hemos incluido dos tipos de eventos. El primero activa la animación en el momento que a es igual a uno; es decir, en el momento que hacemos clic en el botón de reproducir.

El otro tipo de evento se da cuando la condición t=t1, t=t2,… es verdadera; es decir, cuando la reproducción alcanza los tiempos de interacción definidos por el usuario. Cuando la condición es verdadera, el evento calcula una pausa.

Paso 9. Acciones interactivas. Son muchas las actividades que se pueden incluir en la escena. Para el ejemplo, hemos incluido dos que se ejecutan a los 6 y 17 segundos de reproducción del vídeo. La primera acción interactiva es una pregunta que configuramos como se observa en la imagen.

171

Observa que la pegunta aparece en el espacio E3, el cual se ha activado cuando t es igual a t1 (6 segundos). La imagen que muestra esta acción se observa a continuación:

El botón de verificar que hemos incluido, permite ejecutar la función reproduce(), que contiene dos sentencias a =1 y v1.play(). También era posible incluir estas sentencias en el parámetro del botón.

172

Observa que el botón aparecerá una vez que tengamos una respuesta para la pregunta. La condición empleada es (t=t1)&(respuesta_1!=¨) La segunda acción interactiva es una pregunta tipo menú que aparecerá cuando t es igual a t2 (17 segundos).

Al igual que en el caso anterior, hemos incluido un botón de verificación que aparece cuando t es igual a t2 y, además, se ha seleccionado una opción del menú diferente a la primer (0). Como en el caso anterior, ejecuta la función reproduce()

173

La función reproduce() se define así:

Un último botón introducido, es el tradicional botón de reinicio, que parecerá cuando t es igual a 30 (duración del vídeo). Paso 10. Mensajes. En el diseño de la escena, no necesariamente es este el último paso, lo hemos dejado aquí sólo para efectos de explicación. Además de los dos mensajes iniciales, hemos diseñado cuatro mensajes que aparecerán según la acción interactiva y según la respuesta dada. Para la primera acción, aparecerá un mensaje de felicitaciones o de corrección, dependiendo del valor de verdad de la condición (dibujar-si): (t>t1)&(t<t1+4)&(pregunta_1=’4’).

174

La escena final la puedes descargar clicando en VĂdeo_Interactivo.

ÂĄEso es Todo!

175