LAS PÁGINAS WEB QUE NOS PERMITEN USAR RECURSOS DINÁMICOS Y PERMITEN LA COLABORACION SE LLAMAN **WEB 2.0**
Vamos a ver muchas de ellas, cada vez van creciendo, algunas ya las conoces: Youtube, Documentos Google, Genially, ...NO TIENES QUE APRENDER TODAS en el curso te pediremos las más comunes, y tienes que elegir otras que se adapten a tu docencia
##### **El texto** Es muy importante, pero **no abusar**, un artículo que obliga a desplazar hacia abajo la ventana, crea cansancio. No es lo mismo leer en la pantalla que en papel. Las nuevas tecnologías están para aprovecharlas:saca el máximo partido a la misma información.
La forma es tan importante como el contenido.  ##### **Objetivos** Enumeraremos la lista de objetivos a alcanzar con el trabajo en este módulo: - Aumentar la calidad de los contenidos de nuestros artículos en Internet. - Usar los mejores recursos disponibles de las nuevas tecnologías para representar la información: - Visual: con elementos multimedia - Potencial: Usando enlaces a otras páginas, a otras informaciones - Representativo: Cada concepto tiene una forma de representación óptima; Hay que utilizarlo! En este tema nos dedicaremos a dar potencialidad al blog creado en el módulo anterior. Pero no olvides que aún nos falta más interacción, de momento la información va en un sentido Blog =>Alumno, o Profesor=>Alumno **No nos pasemos de innovación** Si no hay un cambio metodológico, de nada sirve hacer lo mismo pero usando las metodológico
[via GIPHY](https://giphy.com/gifs/mural-app-mural-design-thinking-surface-hub-lnySV5m8IHhrx5M0e0) # Embeber Blogger **Embeber** en informática significa "incrustar" quizás sea una castellanización del inglés "embed". Con los blogs podemos incrustar código de una fuente en otra y de esta manera conseguimos que nuestros artículos cobren vida, es una herramienta tan potente que está estandarizada en Internet. ES UN CONCEPTO CLAVE EN LOS BLOGS. ##### **¿Qué puedo embeber?** - Vídeos = Youtube - Presentaciones = Slideshare - Revistas, PDF = Issu - Libros electrónicos = Scribd - Fotos = Flickr - Encuestas = Google Forms etc... hay muchos portales y muchos servicios, \**un mundo en continuo cambio*. ##### **¿Cómo embeber?** En general la técnica es común a los editores WYSIWYG. (es el acrónimo de What You See Is What You Get,"lo que ves es lo que obtienes") los editores WYSIWYG están también en Blogger. WordPress... y en casi todos sitios (por ejemplo este curso se realizó inicialmente en una herramienta que se llama Exelearning, y también tiene un editor WYSIWYG). La **TÉCNICA** es sencilla: **LO PRIMERO QUE TIENES QUE HACER es conseguir el código embed**. Hay que utilizar la intuición para buscar el código embed, a veces con el botón <> otras con la palabra compartir o con el símbolo , etc... (botón derecho **copiar**) **PEGAR EL CÓDIGO EMBED QUE HAS COPIADO**- Entrar en el artículo donde quieres insertar, y buscar el botón HTML, y pegar el código embed (botón derecho **pegar**) Puedes pegar el código donde quieras en medio de la redacción por ejemplo "Mira el siguiente vídeo ... y pegas el código ahí
 y luego **TRUCO** También puedes modificar el tamaño de lo embebido, por ejemplo en la figura anterior se podría modificar los números width="1000" y height="800" si lo embebido sale de tu plantilla elegida en tu blog
# Embeber WP #### **EMBEBER EN WP QUE SON DE CATEDU** ##### **Paso 1 Activar el pluging Unfiltered MU** Debido a que no tendrás los roles de super-administrador, hay que activar este pluging para que puedas embeber código en tus artículos de WP Entras: 1. en Plugins 2. Buscas Unfiltered MU 3. lo activas (espérate unos segudos a que se active) 4. lo seleccionas 5. Aplicar  ##### **Paso 2 embeber** 1. Consigue tu código Embed, lo copias 2. Creas un nuevo artículo 3. Herramientas - <>Código fuente y pegas el código ahí  Si tienes problemas técnicos puedes preguntar a soportecatedu@educa.aragon.es #### **Embeber en otros WP que no son de CATEDU** Cada vez hay más problemas de seguridad para embeber, por ejemplo WORDPRESS.COM no permite embeber códigos embed que tengan iframe, frame, embed (que son muchos) o javascript \[[ver](https://en.support.wordpress.com/code/)\] Por lo tanto **WordPress.com sí** que permite embeber documentos de Drive, Youtube, Issu... **pero otros, no los permite,** **al menos que exista un código especial para Wordpress**, por ejemplo en Slideshare, no tenemos que utilizar el código embed normal, sino el específico para WordPress  # Youtube Este servicio de alojamiento de videos gratuito, es posiblemente el mayor repositorio de videos de los existentes, actualmente. Para subir nuestros videos, debemos contar con una cuenta en youtube, que no asi para poder verlos. Aquí en este tutorial puedes ver cómo se embebe un vídeo en tu blog: # EdPuzzle ## Mira la diferencia entre este vídeo... ## Y este otro.. ## ¿Qué te ha parecido? Parece una chorrada, pero se ponen dos preguntas en un vídeo, y sin querer se presta más atención ## ¿Cómo se hace? Existen varias páginas para insertar preguntas interactivas en los vídeos. Nosotros hemos elegido esta última [**EDPuzzle.**](https://edpuzzle.com/) 1. Vamos a https://edpuzzle.com y **nos registramos** 2. Vamos a **Youtube** https://www.youtube.com 3. Elegimos un vídeo por ejemplo va a ser este https://www.youtube.com/watch?v=-6dxwYZUgFQ 4. Volvemos a https://edpuzzle.com y vamos a Youtube 5. Ponemos en el cuadro de búsqueda el vídeo que hemos elegido También podemos subir un vídeo a EdPuzzle en Mi contenido - Crear contenido, pero recomendamos hacerlo siempre dede Youtube: Subir el vídeo nuestro en Youtube y en EdPuzzle elegirlo
6.- Pinchamos en el vídeo y le damos a **editar** en el lápiz:  7.- Elegimos si queremos insertar una nota de audio, una pregunta abierta, una nota escrita... aquí por ejemplo se inserta una pregunta de tipo test: ¡¡espero que sepas cual es la respuesta correcta !!!  8.- Al pulsar grabar y después al pulsar finalizar nos sale un diálogo donde nos sale el link del vídeo y el código embebido  Aquí tienes el link. https://edpuzzle.com/media/5ca31d31cfe253416dd3bd42 #### IMPORTANTE Hazlo **PUBLICO** PUES DE OTRO MODO OBLIGAS AL USUARIO A REGISTRARSE PARA VERLO y aquí está embebido: Este mismo tutorial pero en flash: Míra cómo se hace **[en esta página ](http://aularagon.catedu.es/materialesaularagon2013/blogs/videos/EDPuzzle.htm)**(Flash SWF) Si no lo ves bien, **[aquí lo tienes](http://aularagon.catedu.es/materialesaularagon2013/blogs/videos/EDPuzzle.pdf)** en (PDF) ###### IMPORTANTE PARA USUARIOS DE WORDPRESS Si tu blog es un WordPress **no se puede** tal y como dice [aquí](https://support.edpuzzle.com/hc/en-us/articles/360007260632-Can-I-embed-an-assignment-into-an-LMS-blog-or-website-)If you're a WordPress user, you can share the assignment with a link which will redirect your students to Edpuzzle (the embed feature isn't currently supported).
O sea no está soportado, que pongas un enlace que redirija a tus estudiantes al vídeo de EdPuzzle # Fotos Lo más sencillo es utilizar la herramienta propia del editor para crear carruseles y banners por ejemplo en blogger tenemos estas herramientas : [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-10-57-47-entrada-editar.png) {{@2734}} # Podcast ## ¿Qué es? Aunque la definición técnica la puedes ver en la Wikipedia, te lo podemos resumir como la posibilidad de subir tus audios en tu blog, de esta manera puedes tener una radio a la carta, subir tus audiciones de música, ejercicios de idiomas, entrevistas.... # ¿Con qué herramientas? Hay muchas (Ivoox tutorial y otras muchas como por ejemplo Audioboo y AudioPal) pero la que te recomendamos es Podomatic. # ¿Cómo queda? Aquí tienes un ejemplo: # ¿Cómo se hace? Nos registramos en Sign Up  Nos podemos registrar por Facebook o por correo electrónico, nosotros recomendamos correo electrónico  Una vez registrado, entramos en Create Podcast  Y vemos esta web para subir el archivo de audio  Subimos el archivo de audio (Hay que usar un programa de grabación, recomendamos AUDACITY) Una vez subido, (nos insistirá que nos inscribamos a la cuenta no gratuita) podemos encontrar el código embed aquí:  # Historias #### **StoryBoard** Puedes hacer historias visuales y embeberlas ##### **¿Cómo se hace?** Un video-tutorial muy completo: Agradecimientos a Raul Diego [http://www.rauldiego.es/historias-visuales-con-storyboardthat/](http://www.rauldiego.es/historias-visuales-con-storyboardthat/) ##### **¿Cómo se embebe una historia de otro?** Vamos a Mi panel de control [](https://libros.catedu.es/uploads/images/gallery/2023-12/story1.png) Nos vamos abajo y encontramos historias libres [](https://libros.catedu.es/uploads/images/gallery/2023-12/story2.png) Elegimos la historia [](https://libros.catedu.es/uploads/images/gallery/2023-12/story3.png) Y la copiamos [](https://libros.catedu.es/uploads/images/gallery/2023-12/story4.png) Lo tenemos en mis historias [](https://libros.catedu.es/uploads/images/gallery/2023-12/story5.png) La elegimos [](https://libros.catedu.es/uploads/images/gallery/2023-12/story6.png) Elegimos TODAS LAS OPCIONES [](https://libros.catedu.es/uploads/images/gallery/2023-12/story7.png) Le cambiamos la PRIVACIDAD [](https://libros.catedu.es/uploads/images/gallery/2023-12/story8.png) Como PUBLICA [](https://libros.catedu.es/uploads/images/gallery/2023-12/story9.png) ya le podemos dar a EMBED [](https://libros.catedu.es/uploads/images/gallery/2023-12/story10.png) y YA TENEMOS EL CÓDIGO [](https://libros.catedu.es/uploads/images/gallery/2023-12/story11.png) ASI QUEDA [ ](https://www.storyboardthat.com/portal/storyboards/ffa95a61/classroom-public/ph-scale) [Made with Storyboard That](https://www.storyboardthat.com) # Bannersnack Integrar fotos en un blog siempre ha sido necesario (por las extraescolares y la necesidad de los alumnos de verse) y siempre difícil pues los servicios han cambiado mucho. Actualmente (diciembre 2020) vemos que un servicio que funciona es https://www.bannersnack.com/es/ ## ¿Cómo queda? Así queda embebido : ## ¿Cómo se hace? Y así queda [en una página de un Blog de Blogger](https://roboticajavierquintana.blogspot.com/2019/07/prueba-bannersnack.html) # Presentaciones ## ¿Cómo ponemos presentaciones en nuestro blog? Hay dos posibilidades: - Opción A: Tenemos la presentación hecha (con Power Point, Impress..), y necesitamos un portal para colgar la presentación y embeberla en nuestro blog: - Hay numerosos portales: por ejemplo Slideshare - En Google Drive podemos subir nuestra presentación - Opción B: No tenemos la presentación queremos una herramienta Online para hacer nuestra presentación y a la vez que nos permita embeberla en nuestro blog: - Una presentación hecha en Google Drive - Portales donde las presentaciones quedan muy llamativas. Emaze ([tutorial](http://wp.catedu.es/lanuzadigital/creacion/presentaciones/emaze/)), Slides(tutorial), Prezzi ([tutorial](https://es.slideshare.net/lalunaesmilugar/tutorial-de-slideshare)) o Genial.ly (luego lo veremos). ## Presentación Google Drive (recomendado) Si hemos realizado una presentación online en Drive, lo podemos incrustar (embeber), dando a Publicar:  Y luego en **Insertar - Publicar** y nos enseña el código incrustado (embed) para ponerlo en nuestro artículo (antes pide una confirmación si estamos seguros pues la presentación queda totalmente visible al público).  Aquí tienes cómo queda: # Embeber un documento de Google {{@7491}} # Genially Es una excelente herramienta https://app.genial.ly/ pues permite crear contenidos muy visuales y muy educativos **Crea** un contenido, en la versión PLAN FREE tienes mucho dónde elegir (en la Premium mucho más evidentemente), no sólo puede hacer presentaciones, sino también GAMIFICACIÓN, IMÁGENES INTERACTIVAS, INFOGRAFÍAS, HISTORIAS, ... un mundo donde motivar a nuestros alumnos...  OJO: tiene que ser PUBLICO para poder compartir Una vez creado un contenido puedes conseguir tu **código embed** seleccionando tu creación y dando al icono de compartir [](https://libros.catedu.es/uploads/images/gallery/2026-01/2026-01-23-21-54-50-aularagon-blog-zim-mio.png)  Entra en Insertar y copiar el código:Hay una opción de hacerlo **colaborativo** pero es añadiendo usuarios que tienen que estar registrados y por lo tanto con correo electrónico.
### Cómo queda Pues de cine :😁se nota que soy profe de fp de electrónica...
lo podemos embeber en nuestro blog sin problemas, el código embed está en este botón [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-26-23-17-55-examen-rectificadores-pdf-rectificador-diodo.png) ##### **¿Cómo queda?** Pues de cine, así: En este vídeo tutorial también explica cómo conseguir el código de este portal de libros electrónicos. # Lineas de tiempo ##### **¿Qué es?** Es una representación de conceptos o eventos que están separados por el tiempo. La representación de la línea de tiempo es con orden cronológico, y tiene el potencial que nos permite las nuevas tecnologías (vídeos, textos, enlaces...) ##### **¿Dónde?** Es de los servicios web más dinámicos, no sabemos por qué. Es decir, se crean muchos y se cierran otros, o los que existen cambian las condiciones (antes gratuitas luego de pago, o dejan de permitir compartir código embed) luego si ves que estas propuestas no funcionan, por favor ponte en contacto con Catedu [https://catedu.es/informacion/](https://catedu.es/informacion/) ## **Timeline** En [https://timeline.knightlab.com/](https://timeline.knightlab.com/) tenemos también otra posibilidad Para crear una línea de Tiempo,< 1. Crea una copia de la hoja de cálculo Google que te proponen, ponlo en tu Google Drive [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-09-58-32-timeline.png) 2. Rellenas la hoja de cálculo en Google [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-10-19-10-copia-de-official-timelinejs3-template-hojas-de-calculo-de-google.png)**ATENCIÓN NO CAMBIES LA FILA 1 NOMBRE DE LAS COLUMNAS** 3. Publicas [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-10-19-58-copia-de-official-timelinejs3-template-hojas-de-calculo-de-google.png) 4. Esa URL que se te ha creado en el punto 6 de la ilustración anterior **pégala aquí [https://timeline.knightlab.com/#make](https://timeline.knightlab.com/#make) [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-10-22-31-timeline.png)** 5. **Y ya lo tienes [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-10-23-05-timeline.png)** Este es el resultado ## **🤔🤔¿TIMELINE COLABORATIVO?🤔🤔🤔** Y si la hoja de cálculo es abierta colaborativa..... ¿entonces la línea de tiempo que embebo en el blog es colaborativo? PRUEBALO,[ entra en este enlace](https://docs.google.com/spreadsheets/d/1Y4y79ljPaAPTyqmzOr1cryZP-vOurPhxC7oXdMugjSk/edit?usp=sharing), pon algo en la línea de tiempo y mira el [resultado ](https://docs.google.com/spreadsheets/d/e/2PACX-1vQk6mCe-bau9cdakbP1EzdjKluFpMdBKBEaVC_U1MCIKMMmWBlM9Rny21q7tRfgmyMXHfPBhKbW_x1c/pubhtml)NO CAMBIES LA FILA 1
LOS CAMBIOS NO SON ESPONTÁNEOS tarda algo
## **SUTORI** [https://www.sutori.com/](https://www.sutori.com/) es una buena herramienta, fácil y permite embeber. Incluso tiene un apartado para educación [https://www.sutori.com/en/teachers](https://www.sutori.com/en/teachers) que permite enlazar las líneas de tiempo en Google Classroom Microsoft Team, Drive y permitir líneas de tiempo **colaborativas**.Para crear clases, compartir, líneas de tiempo colaborativas **el alumno tiene que estar registrado**
Puedes invitar a tus alumnos a que se unan a tu clase, y así poder ver sus trabajos, si clicas en Students - Invite students te facilita un código que los alumnos tienen que poner en Sutori: [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-11-48-38-students-sutori.png) [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-11-51-02-students-sutori.png) - Puedes crear tus propias líneas de tiempo registrándote, aconsejamos el perfil de profesor, tiene buenas plantillas. - O utilizar una creada, por ejemplo [esta](https://www.sutori.com/en/story/aztec-inca-maya--mD55p7qumfe14PpZVvE2kgK1) tenemos el código embed aquí: [](https://libros.catedu.es/uploads/images/gallery/2025-04/2025-04-19-09-51-56-aztec-inca-maya-sutori.png) Este es el resultado # Quizizz En [https://quizizz.com/](https://quizizz.com/) nos permite embeber en nuestro blog preguntas, aquí puedes ver sus posibilidades**Atención**, para que se embeba bien tienes que buscar esta opción NO TODAS LAS FICHAS DE LIVEWORKSHEETS TIENEN ESA OPCIÓN[](https://libros.catedu.es/uploads/images/gallery/2023-05/2023-05-20-19-40-56-ficha-de-el-adjetivo-para-primaria.png)
## ¿Cómo se embebe? Tiene un enlace que te facilita el código, con unas ¡ mininstrucciones! y con posibilidad de fijar en ancho ¡¡ójala todas las webs facilitasen así las cosas!! A la derecha verás unos botones para incrustar la ficha en Facebook, Twitter, Pinterest, Classroom y **Blogger**, realmente NO lo embebe, sino pone una imagen de la ficha en el artículo PARA QUE VEAS LA DIFERENCIA MIRA ESTE ARTÍCULO DE BLOGERR [https://javierquintana.blogspot.com/2023/05/ficha-de-el-adjetivo-para-primaria.html](https://javierquintana.blogspot.com/2023/05/ficha-de-el-adjetivo-para-primaria.html)
## Enlace personalizado La opción **personalizar enlace** y añadir un enlace al blog pues permite algunas opciones de comprobación y calificación  # Scratch Scratch es una excelente herramienta, perfecta para enseñar el pensamiento computacional, para saber más de esta herramienta entra en aularagon.es Entra en tu cuenta, en tus cosas y selecciona un proyecto tuyo [](https://libros.catedu.es/uploads/images/gallery/2022-10/scracth1.jpg) Entramos en copylink ¡¡y ya tienes el código !!! [](https://libros.catedu.es/uploads/images/gallery/2022-10/scratch2.jpg) Mira cómo queda: # Robotica Tinkercad, Arduino ... Excelente herramienta para nuestros diseños 3D y electrónicos Si quieres saber más de esta herramienta en diseños 3D entra en aularagon.es en Impresión 3D Entramos en nuestros proyectos y seleccionamos las propiedades de nuestro proyecto [](https://libros.catedu.es/uploads/images/gallery/2022-10/tinker1.jpg) Y lo hacemos publico [](https://libros.catedu.es/uploads/images/gallery/2022-10/tinker2.jpg) Damos dos cliks al proyecto y ya nos sale el código embed [](https://libros.catedu.es/uploads/images/gallery/2022-10/tinker3.jpg) Este es el resultado #### **EDITORES DE ARDUINO** Arduino tiene un editor online [https://app.arduino.cc/sketches](https://app.arduino.cc/sketches) que tus códigos pueden ser incrustados en tu blog [](https://libros.catedu.es/uploads/images/gallery/2023-12/arduino-embed1.png) Y ya nos da el código [](https://libros.catedu.es/uploads/images/gallery/2023-12/arduino-embed2.png) Este es el resultado # PHT SIMULACIONES CIENTÍFICAS La página [https://phet.colorado.edu/es/](https://phet.colorado.edu/es/) tiene simulaiciones sobre Física, Química, Biología... hechas Elegimos una y pulsamos en el código Embed abajo con el símbolo <> # Calendarios Vamos a ver cómo compartir un calendario con Google Calendar. Útil para visualizar eventos, exámenes, extraescolares.... Entramos en Google, con nuestra cuenta y entramos en Google Calendar [](https://libros.catedu.es/uploads/images/gallery/2023-12/calendar2.png) Creamos un calendario, (es muy intuitivo) y le damos a los tres puntos a compartir [](https://libros.catedu.es/uploads/images/gallery/2023-12/calendar1.png) Y entramos en Integrar el calendario, en código, y tenemos el código a insertar [](https://libros.catedu.es/uploads/images/gallery/2023-12/calendar3.png) El resultado es ... # Wordwall Es una web que permite crear actividades y embeberlas en tu blog. Su registro es sencillo y es muy intuitivo Una vez registrado se pueden crear muchas actividades en Mis Actividades [](https://libros.catedu.es/uploads/images/gallery/2023-12/wordwall.png) O en Comunidad podemos ver de otra gente [](https://libros.catedu.es/uploads/images/gallery/2023-12/wordwall2.png) El código lo tenemos aquí [](https://libros.catedu.es/uploads/images/gallery/2023-12/wordwall3.png) El resultado es *Agradecimientos a Ulpiano Pérez* # Python En [TRINKET.IO](https://trinket.io/) podemos crear/encontrar scripts en Python **que podemos embeber en nuestro blog y lo más importante:****FUNCIONAN ONLINE ES DECIR, LOS ALUMNOS PUEDEN EDITAR EL CÓDIGO Y VER EL RESULTADO**
Supongamos que queremos que los alumnos practiquen el siguiente script ```python inp = input('Enter Fahrenheit Temperature:') try: fahr = float(inp) cel = (fahr - 32.0) * 5.0 / 9.0 print(cel) except: print('Please enter a number') # Code: http://www.py4e.com/code3/fahren2.py # Or select Download from this trinket's left-hand menu ``` Creamos esta lección [https://trinket.io/python3/5dbec1550b](https://trinket.io/python3/5dbec1550b) Aquí tenemos el código embed [](https://libros.catedu.es/uploads/images/gallery/2025-03/NzAimage.png) Copiamos el código embed [](https://libros.catedu.es/uploads/images/gallery/2025-03/image-1.png) Y lo pegamos en nuestro blog **ESTE ES EL RESULTADO****😊Venga juega con el código y dale al play😊**