2. Mejorar nuestro Blog Mejorar nuestro Blog Imagen y texto es contenido estático, no hay mucha diferencia con unas fotocopias, en cambio en un blog o página web podemos poner vídeos, presentaciones, mapas mentales, líneas de tiempo....  contenidos dinámicos. 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 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: en Plugins Buscas Unfiltered MU lo activas (espérate unos segudos a que se active) lo seleccionas Aplicar Paso 2 embeber Consigue tu código Embed, lo copias Creas un nuevo artículo 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 ] 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. Vamos a https://edpuzzle.com y nos registramos Vamos a Youtube https://www.youtube.com Elegimos un vídeo por ejemplo va a ser este https://www.youtube.com/watch?v=-6dxwYZUgFQ Volvemos a https://edpuzzle.com y vamos a Youtube 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 (Flash SWF) Si no lo ves bien, aquí lo tienes en (PDF) IMPORTANTE PARA USUARIOS DE WORDPRESS Si tu blog es un WordPress no se puede tal y como dice aquí 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 : Flickr A veces en una actividad presencial, se crean fotos y todo el mundo necesita verlas,  FLICKR  es de Yahho y te permite : Crear un enlace y todo el mundo puede ver las fotos O incrustar una imagen del álbum que tiene un enlace a todas las fotos, en nuestra web o blog, este es un ejemplo embebido: ¿Cómo se hace flickr? 1.- REGISTRO: Tienes que estar registrado en  Yahoo  y luego entra en  Flickr 2.- Creas un Album 3.- Se abre una ventana para arrastrar las fotos 4.- .En la barra de menús de Flickr selecciona  "Tus álbumes". 5.- En Álbumes tiene un botón para compartir: OJO EL ÁLBUM, NO LA FOTO !!!! 6.- Y luego sale el código embed en Insertar: Ojo, que hay que compartir EL ÁLBUM no la foto Esto ESTA BIEN compartir ÁLBUM ESTO ESTA MAL, COMPARTIR FOTO ¿no ves la diferencia? pues haz click en cada uno y verás 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/ ¿Cómo se embebe una historia de otro? Vamos a Mi panel de control Nos vamos abajo y encontramos historias libres Elegimos la historia Y la copiamos Lo tenemos en mis historias La elegimos Elegimos TODAS LAS OPCIONES Le cambiamos la PRIVACIDAD Como PUBLICA ya le podemos dar a EMBED y YA TENEMOS EL CÓDIGO ASI QUEDA   Made with Storyboard That 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 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 ), Slides(tutorial), Prezzi ( tutorial ) 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 Insertar documentos de Google Supongamos que tenemos un documento de Google que queremos insertar en nuestro blog o en un BookStack, vamos pues al código de inserción de Google : Y lo pegamos en la ventana de  código ATENCIÓN SALE MUY PEQUEÑO para ello modificamos el código indicando el píxeles el ancho y alto, por ejemplo si queremos 800 de ancho y 600 de alto se indica así: width="800px" height="600px" Recomendamos:    width="100%" height="600px" No restringido Cuidado, asegúrate que NO ESTA RESTRINGIDO en caso contrario el publico no lo puede ver Aquí tienes un ejemplo de insertar una presentación de Google: Y aquí otro ejemplo de embeber una hoja de cálculo: 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 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 : Libros Scribd Supongamos que encontramos un recurso interesante en Scribd por ejemplo https://www.scribd.com/document/481079279/Examen-rectificadores  😁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 ¿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/ Timeline En https://timeline.knightlab.com/ tenemos también otra posibilidad  Para crear una línea de Tiempo,< Crea una copia de la hoja de cálculo Google que te proponen, ponlo en tu Google Drive Rellenas la hoja de cálculo en Google  ATENCIÓN NO CAMBIES LA FILA 1 NOMBRE DE LAS COLUMNAS Publicas Esa URL que se te ha creado en el punto 6 de la ilustración anterior  pégala aquí https://timeline.knightlab.com/#make Y ya lo tienes 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 , pon algo en la línea de tiempo y mira el resultado  NO CAMBIES LA FILA 1 LOS CAMBIOS NO SON ESPONTÁNEOS tarda algo SUTORI 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 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: 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 tenemos el código embed aquí: Este es el resultado Quizizz En https://quizizz.com/ nos permite embeber en nuestro blog preguntas, aquí puedes ver sus posibilidades Creamos un usuario como siempre en Sign Up Y nos da la posibilidad de registrarnos como escuela Y como alumno, profesor o administrador Podemos crear nuestra batería de preguntas en Create o  explorar las creadas por otros compañeros En Classes podemos ver los progresos de nuestros estudiantes pero ellos se tienen que loggear  Pare meterlo en tu blog, nos facilita el código embed Mapas mentales ¿Qué es? Los mapas mentales son otra forma de representar la información cartografiando las reflexiones acerca de un concepto mediante una estructura orgánica en la que el conocimiento se organiza para conseguir un aprendizaje significativo y activo. Los servicios Web 2.0 que permiten construir mapas mentales suelen añadir un valor nuevo e importantísimo para el aula: la colaboración entre iguales a la hora de construir el entramado conceptual, de forma que el resultado final es obra de un equipo coordinado. Por otra parte, la posibilidad de añadir cualquier elemento de la red a la estructura: vídeos, imágenes, enlaces, sonidos, además de textos, convierten a estas representaciones en organismos vivos en los que la multidireccionalidad de nuestro pensamiento queda representada y lista para seguir toda una red de conexiones neuronales. JR Olalla 9/11/13 ¿Qué herramientas hay? Hay muchísimas como gustos: Popplet , Spicesnode, Mind42... ( Ver artículos JR Olalla ). ¿Cuál recomendamos? Nuestras favoritas son: GOCONQR MINDOMO 1.1 GOCONQR En esta web https://www.goconqr.com/ nos gusta porque - El plan Basic es gratis permite ilimitadas creaciones pero mientras lo creas hay publicidad. - Sólo dispones en el plan Basic de 50M luego no abuses subiendo documentos. - Cuando te registras como profesor, te pregunta tu nivel y las materias que das, entonces automáticamente te enseña los materiales que hay colgados de tu especialidad, lo hemos probado con una difícil, por ejemplo FP de grado superior de Electricidad y Electrónica y ya nos sugiere material colgado por otros compañeros: 1.2 GOCONQR EMBEBER Los pasos de creación de mapas mentales, historias, etc.. son intuitivas, una vez creado tienes el código embebido en este símbolo : 1.3 GOCONQR ¿COMO QUEDA? Pues así 2.1 MINDOMO REGISTRO Mindomo está muy completo, puede añadir vídeos, ser colaborativo ... pero la versión Free sólo permite 3 mapas . Entramos en la web y nos pide registrarnos Nos pregunta por nuestro perfil, evidentemente PROFESOR 2.2 MINDOMO CREAR MAPA MENTAL En CREAR tenemos muchas opciones, no sólo el mapa mental, sino esquemas, historias, comparativas, debate .... navega por las plantillas y verás las posibilidades didácticas de esta herramienta La creación es fácil, se puede realizar online o descargar su aplicación, podemos insertar vídeos, enlaces, documentos, imágenes... 2.3 MINDOMO EMBEBERLO  Entramos en COMPARTIR arriba a la derecha Y pulsamos en CAMBIAR y le damos acceso PUBLICO PARA QUE TODO EL MUNDO PUEDA VERLO y nos proporciona el código EMBED para ponerlo en nuestro blog 2.4 MINDOMO COMO QUEDA Your browser does not support frames. View this map on its original site. It was created using Mindomo . Nubes de palabras Una nube es crear un conjunto de palabras y cada palabra al pinchar puede ir al sitio que quieras ¿Cómo se hace? ¿Cómo queda? Quizlet Quizlet nos permite ver fichas que tienen dos caras, en una la pregunta y en otra la contestación, y lo podemos embeber en nuestro blog. Aquí tienes un ejemplo: ¿Cómo se hace? Primero nos registramos y luego pulsamos en Create - Set Vamos rellenando las fichas (cards). no intentes subir una imagen o poner cuestionario, sólo se puede si tienes cuenta no gratuita ¿Donde está el código embed? Aquí ¿Puedo usar Quizlet de otros? Por supuesto, y como algunos usuarios tienen cuenta no gratuita, tienen otras opciones mejores LiveWorksheets Tal y como dice en su página : Liveworksheets te permite transformar tus tradicionales fichas imprimibles (doc, pdf, jpg...) en ejercicios interactivos autocorregibles, que llamamos "fichas interactivas". Los alumnos pueden completar estas fichas online y enviar sus respuestas al profesor. Esto es bueno para los alumnos (más motivador), para el profesor (le ahorra tiempo de corrección) y para el entorno (ahorra papel). Además de esto, nuestras fichas interactivas aprovechan las ventajas que nos ofrecen las nuevas tecnologías aplicadas a la educación: pueden incluir sonidos, videos, ejercicios de arrastrar y soltar, unir con flechas, selección múltiple... e incluso ejercicios hablados, que los alumnos tienen que completar usando el micrófono. Nos gusta mucho y además se puede embeber en tu blog ¿qué más se puede pedir?. Puedes utilizar una ficha ya creada o crearte la tuya, ver su tutorial en su página . Atención , para que se embeba bien tienes que buscar esta opción NO TODAS LAS FICHAS DE LIVEWORKSHEETS TIENEN ESA OPCIÓN ¿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 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 Entramos en copylink ¡¡y ya tienes el código !!! 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  Y lo hacemos publico Damos dos cliks al proyecto y ya nos sale el código embed Este es el resultado EDITORES DE ARDUINO Arduino tiene un editor online https://app.arduino.cc/sketches que tus códigos pueden ser incrustados en tu blog Y ya nos da el código Este es el resultado PHT SIMULACIONES CIENTÍFICAS La página 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 Creamos un calendario, (es muy intuitivo) y le damos a los tres puntos a compartir Y entramos en Integrar el calendario, en código, y tenemos el código a insertar 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 O en Comunidad podemos ver de otra gente El código lo tenemos aquí  El resultado es   Agradecimientos a Ulpiano Pérez Python En 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 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 Aquí tenemos el código embed Copiamos el código embed Y lo pegamos en nuestro blog  ESTE ES EL RESULTADO 😊Venga juega con el código y dale al play😊