Publicación de distintas aplicaciones: juegos.
Actividad 1: Dino Game.
- Crea un botón (centrado) que nos permita jugar Dino Game desde su página web. El nombre del botón es Jugar a Dino y el enlace lo tienes en esta misma línea.
- Ahora vas a incrustar (embeber) el propio juego en tu página. Para ello:
- Copia el enlace a la página de Dino
- Accede a la web Embed Responsively para obtener el código html para tu web. El código es un iFrame genérico (Generic iFrame) que has de crear siguiendo el siguiente modelo: <iframe src='http://alistapart.com/article/responsive-web-design/' style='border:0'></iframe>. Has de substituir la dirección web (la que está en negro) que está entre comillas por la url de Dino (https://offline-dino-game.firebaseappcom). Haz clic en Embed y obtendrás el código (embed code) que has de copiar (se supone que tendrías que estar viendo el juego desde la sección Preview).
- Accede a tu web (subpágina aplicaciones) e inserta el código html debajo del botón Jugar a Dino. Haz que ocupe todo el ancho y comprueba como se ve desde la página actualizada y publicada. Llama al profesor.
Actividad 2: Tu propio juego. Accede a Giphy Arcade para crear tu propio juego (el que tú elijas):
- Sección: Make your own games. Yo he seleccionado Brick Buster
- Sigue los pasos que muestra la web: plantilla (brick buster), stikers (en mi caso, 3), escenario, música de fondo (Bad Booty Beat) y el nombre: tico2_xx (tu nombre de grupo).
- Prueba tu juego para ver como queda. Si te gusta copia el link y genera el código embebido desde Embed Responsively.
- Antes de pegar el código en tu web, inserta (debajo del juego de Dino) un texto (con categoría de Título) con el lema: Mi juego Arcade. Inserta el código obtenido debajo del texto y adapta el cuadro al tamaño del juego.
Publicación de distintas aplicaciones: actividades de clase.
Actividad 3: Elementos de un sistema informático.
- Accede a classtools para crear una actividad de identificación de elementos (puntos con información: hotspots) de una imagen. Piensa en una actividad que se ajuste a éste modelo. Ejemplos: partes de una célula, rios de España, escritores que pertenecen a la Generación del 27... partes de un sistema informática (es la mostrada más abajo).
- Una vez tengas una imagen, súbela a la web (upload your image) y:
- haz clic en una parte de la imagen para establecer un punto de información: identifícala (title) y descríbela (indica qué es, para que sirve, etc.) y no rellenes la url.
- Has de crear un punto de información con el nombre del grupo (title), y una breve descripción de la propia actividad. Cuando termines haz clic en Save para guardar tu imagen. Indica una contraseña para poder volver editar tu imagen más tarde. Y copia la url de la imagen para poder localizarla.
- Ahora verás que debajo de la imagen tienes acceso al código (botón EMBED) que has de insertar en tu web. Antes de pegar el código en tu web inserta, debajo del juego Arcade, un texto (con categoría de Título) con el lema: Mis actividades académicas. Inserta el código obtenido debajo del texto y adapta el cuadro al tamaño de la imagen.
- Comprueba como se ve desde la página actualizada y publicada. Llama al profesor.
Actividad 4: Rios de España.
- Accede a classtools para crear una actividad tipo crucigrama (crossword). El ejemplo mostrado muestra los rios principales de España (puedes copiar ésta o crear una propia). Sigue estos pasos:
- Title: tu nombre de grupo seguido por el nombre de la actividad (tico2_teacher: Rios de España)
- Questions (acerca el cursor a Help): pregunta*respuesta (rio más caudaloso*Ebro), una por línea.
- Cuando termines haz clic en Submit, escribe una contraseña y echa un vistazo a como ha quedado.
- Para obtener el código haz clic en share y después en Embed Code. Cópialo (también tienes la url para poder localizarlo).
- Accede a tu sitio web, inserta el código obtenido (debajo de la anterior actividad) y adapta el cuadro al tamaño de la imagen. Mira como queda tu crucigrama desde la página publicada y complétalo para ver que funciona.
Publicación de programas: animación de fin de curso (por fin!).
Actividad 5: programa creado con Python.
- Ahora vas a crear una animación, creada como resultado de un programa, desde la herramienta de Trinket (más abajo).
- Descarga el fichero del programa, súbelo (flecha hacia arriba) desde trinket y realiza los siguientes estos pasos:
- Ejecuta el programa para ver qué es lo que hace.
- Sección Nos identificamos: cambia Teacher por tu nombre de grupo
- Sección Dibujamos el rectángulo...: puedes dejarlo como está (verás como queda cuando completes el ejercicio)
- Sección Escribimos el texto...: indica una frase similar, pero propia.
- Sección Dibujamos una línea...: adapta el tamaño y selecciona un color distinto.
- Sección Dibujamos una circunferencia...: adapta el tamaño y selecciona un color distinto.
- Sección Dibujamos un círculo...: adapta el tamaño y selecciona un color distinto.
- Sección Escribimos el texto...: indica un texto distinto con un tamaño y un color distinto.
- Sección Ocultamos...: déjala como está.
- Cuando termines haz clic en el botón Share y selecciona Embed. Personaliza (Customize) el código de tal manera que sólo se ejecute el código (Run code only), muestre sólo el resultado (Only show output) y active Autoejecutar trinket al cargar (Auto run trinket when loaded). Copia el código.
- Accede a tu sitio web y crea un texto (con categoría de Título) con el lema: Animación desde Python académicas. Inserta el código obtenido debajo del texto y adapta el cuadro al tamaño de la imagen.
- Comprueba como se ve desde la página actualizada y publicada. Llama al profesor.