1 00:00:00,300 --> 00:00:07,860 Vamos a aprender a mejorar la navegación de nuestros alumnos por el aula virtual y a intentar que sea un poquito más atractiva. 2 00:00:09,400 --> 00:00:20,079 La idea final será conseguir que los alumnos cuando entren vean esto, un calendario, y todos los días o todos los temas o todas las unidades didácticas de esta manera. 3 00:00:20,079 --> 00:00:36,039 En nuestro caso, los días, ellos podrían bajar, ir al día que le corresponda, o la idea de introducir el calendario es que puedan pinchar en un día y les aparezca automáticamente los contenidos de ese día y ya puedan trabajar en ellos. 4 00:00:36,840 --> 00:00:38,100 Vamos a ver cómo se hace esto. 5 00:00:40,770 --> 00:00:44,869 Vamos a aprender a mapear esa imagen e incluirla aquí en el inicio de nuestra aula virtual. 6 00:00:44,869 --> 00:00:49,270 esta es una aula virtual, como veis estamos logueados como estudiante 7 00:00:49,270 --> 00:00:52,229 y el estudiante cuando entra, pues tiene que ir bajando 8 00:00:52,229 --> 00:00:54,409 a encontrar su día, el día que corresponda 9 00:00:54,409 --> 00:00:56,649 pinchar para ver todas las tareas 10 00:00:56,649 --> 00:01:01,350 como van pasando muchos días, poco a poco va a haber muchas más tareas 11 00:01:01,350 --> 00:01:04,810 en otro tutorial os proponíamos 12 00:01:04,810 --> 00:01:06,689 comprimir 13 00:01:06,689 --> 00:01:10,349 estas secciones, es decir, que en vez de que se vean 14 00:01:10,349 --> 00:01:13,549 todas las secciones en una página, que se vea reducido 15 00:01:13,549 --> 00:01:34,819 Os lo recuerdo muy rápido. Se trataba de ir a los ajustes de este aula, editar ajustes, y en formato de curso, en vez de mostrar todas las secciones en una página, decíamos mostrar una sección por página. 16 00:01:34,819 --> 00:01:40,099 y así el alumno cuando entra puede navegar de una manera más sencilla 17 00:01:40,099 --> 00:01:47,930 ahí lo vemos, puede navegar de esta manera y ya 18 00:01:47,930 --> 00:01:52,769 ir al día que le corresponde, también puede navegar por el lateral 19 00:01:52,769 --> 00:01:56,489 por este lateral, y vamos a ofreceros una tercera 20 00:01:56,489 --> 00:01:59,909 manera de navegar, que bueno, puede ser más visual 21 00:01:59,909 --> 00:02:06,620 y evita hacer todo este scroll, y vamos a añadir 22 00:02:06,620 --> 00:02:10,500 una actividad, un recurso, que va a ser el recurso etiqueta 23 00:02:10,500 --> 00:02:14,360 nos va a permitir introducir una imagen 24 00:02:14,360 --> 00:02:16,740 sin tener que introducir texto, ni título, ni nada 25 00:02:16,740 --> 00:02:17,759 agregamos 26 00:02:17,759 --> 00:02:19,460 en el cuadro de texto 27 00:02:19,460 --> 00:02:21,460 añadimos imagen 28 00:02:21,460 --> 00:02:24,219 examinamos repositorios 29 00:02:24,219 --> 00:02:26,979 examinamos 30 00:02:26,979 --> 00:02:29,120 guardamos la imagen como calendario 31 00:02:29,120 --> 00:02:31,599 y subimos el archivo 32 00:02:31,599 --> 00:02:35,699 el tamaño 33 00:02:35,699 --> 00:02:38,139 es interesante que sea 34 00:02:38,139 --> 00:02:40,759 entre 640 y 420 35 00:02:40,759 --> 00:02:41,979 más o menos 36 00:02:41,979 --> 00:02:44,319 rondando ese tamaño. 37 00:02:44,659 --> 00:02:48,180 Tendríamos que haberlo configurado antes para que se ciña eso 38 00:02:48,180 --> 00:02:50,240 y se ajuste perfectamente a la página. 39 00:02:50,439 --> 00:02:53,099 Vemos aquí abajo la imagen que vamos a subir, 40 00:02:53,199 --> 00:02:56,699 que es un calendario de marzo, donde hemos incluido también un foro. 41 00:02:58,319 --> 00:02:59,400 Ahí lo tenemos. 42 00:03:01,039 --> 00:03:02,060 Guardamos cambios. 43 00:03:05,419 --> 00:03:06,520 Y ahí tenemos el calendario. 44 00:03:06,960 --> 00:03:09,599 Luego lo pondremos en el centro y podremos hacerlo más grande si queremos. 45 00:03:10,419 --> 00:03:13,000 La idea es, como hemos visto en la introducción, 46 00:03:13,000 --> 00:03:15,199 que al pulsar sobre cada día 47 00:03:15,199 --> 00:03:18,219 le aparezca al alumno solo los contenidos de ese día 48 00:03:18,219 --> 00:03:21,960 o al pulsar sobre el foro se les abra el foro de dudas 49 00:03:21,960 --> 00:03:25,219 vamos a ver cómo podemos hacerlo 50 00:03:25,219 --> 00:03:27,319 hay tres opciones 51 00:03:27,319 --> 00:03:30,379 las dos primeras las podemos encontrar 52 00:03:30,379 --> 00:03:32,219 si buscamos Tecnos Rurales 53 00:03:32,219 --> 00:03:34,300 en la página del proyecto de innovación del colegio 54 00:03:34,300 --> 00:03:38,900 en recursos, software libre, guía para migrar a Max 55 00:03:38,900 --> 00:03:43,960 es una guía para migrar a un centro 56 00:03:43,960 --> 00:03:48,039 o cualquier persona que quiera usar la distribución Max de EducaMadrid 57 00:03:48,039 --> 00:03:51,759 puede usarla paso a paso. Y en ella hemos incluido también 58 00:03:51,759 --> 00:03:55,759 tutoriales de edición de imágenes, por ejemplo. Y hay un capítulo 59 00:03:55,759 --> 00:03:59,419 de mapear imágenes. Ahí explicamos 60 00:03:59,419 --> 00:04:04,039 qué es mapear una imagen. Y ofrecemos 61 00:04:04,039 --> 00:04:07,939 dos tutoriales. Uno para hacerlo con GIMP, software libre multiplataforma 62 00:04:07,939 --> 00:04:11,879 muy sencillo. Y otro es, otra manera de hacerlo 63 00:04:11,879 --> 00:04:20,300 sería usando el recurso H5P, una categoría que se llama Hotspots, puntos calientes dentro de una imagen. 64 00:04:20,939 --> 00:04:22,939 Aquí disponéis de esos dos tutoriales. 65 00:04:23,600 --> 00:04:26,819 Voy a explicar una tercera manera que es bastante rápida también. 66 00:04:27,339 --> 00:04:35,160 Esta tercera opción consiste en ir a una página que se llama html-medio-map.com y realizar allí el mapeo. 67 00:04:35,740 --> 00:04:39,620 Lo primero que nos pide es subir la URL de la imagen que queremos mapear. 68 00:04:39,620 --> 00:04:50,019 Para eso tenemos que ir a nuestra aula virtual, situarnos encima de la imagen, pulsar el botón derecho y copiar la ruta de la imagen. 69 00:04:52,420 --> 00:04:56,220 Volvemos a la página de HTML y pegamos. 70 00:04:57,379 --> 00:05:01,339 Pinchamos en Start y ahí tenemos la imagen. 71 00:05:02,379 --> 00:05:06,819 Ahora, el siguiente paso va a ser seleccionar áreas y enlaces. 72 00:05:07,800 --> 00:05:09,759 Vamos a seleccionar esta zona donde pone Forum. 73 00:05:09,759 --> 00:05:15,379 nos pide una url, pero no vamos a introducir aquí la url 74 00:05:15,379 --> 00:05:17,120 solo vamos a poner foro 75 00:05:17,120 --> 00:05:21,060 posteriormente veréis para saber a qué nos referimos 76 00:05:21,060 --> 00:05:23,920 en esta casilla no escribimos nada 77 00:05:23,920 --> 00:05:27,579 y aquí dejamos la opción que viene por defecto 78 00:05:27,579 --> 00:05:30,540 ya hemos mapeado una zona 79 00:05:30,540 --> 00:05:33,060 ahora vamos con la del día 23 80 00:05:33,060 --> 00:05:35,319 seleccionamos la zona 81 00:05:35,319 --> 00:05:38,319 día 23 82 00:05:38,319 --> 00:05:42,100 ahora el 24, seleccionamos esa zona 83 00:05:42,100 --> 00:05:54,579 una vez hemos mapeado todos los días 84 00:05:54,579 --> 00:05:57,459 o todas las zonas que queremos hacer interactivas 85 00:05:57,459 --> 00:06:03,060 pinchamos a finalizar y nos ofrece dos tipos de códigos 86 00:06:03,060 --> 00:06:06,800 html o css, a nosotros nos interesa el html 87 00:06:06,800 --> 00:06:10,980 copiamos el código y ahora vamos a nuestra aula virtual 88 00:06:10,980 --> 00:06:16,709 vamos a abrir dos pestañas en la aula virtual 89 00:06:16,709 --> 00:06:19,050 esta que tenemos aquí y 90 00:06:19,050 --> 00:06:22,610 así tenemos las dos pestañas abiertas 91 00:06:22,610 --> 00:06:25,209 vamos a ver qué hacemos con ese código HTML 92 00:06:25,209 --> 00:06:27,949 vamos al contenido etiqueta que hemos creado antes 93 00:06:27,949 --> 00:06:30,670 vamos a editar, editar ajustes 94 00:06:30,670 --> 00:06:34,470 pinchamos en esta flecha para que nos aparezcan todas las herramientas 95 00:06:34,470 --> 00:06:35,410 del editor de texto 96 00:06:35,410 --> 00:06:39,089 vamos a trabajar a pantalla completa 97 00:06:39,089 --> 00:06:42,829 y a ver el código HTML 98 00:06:42,829 --> 00:06:46,689 este es el código de lo que hay ahora mismo 99 00:06:46,689 --> 00:06:49,110 marcamos 100 00:06:49,110 --> 00:06:51,310 lo borramos 101 00:06:51,310 --> 00:06:54,149 y pegamos el que traemos de la otra página 102 00:06:54,149 --> 00:06:55,089 con control V 103 00:06:55,089 --> 00:06:56,829 ahí está 104 00:06:56,829 --> 00:06:58,769 es un código que parece muy complicado 105 00:06:58,769 --> 00:07:00,410 en realidad es muy sencillo 106 00:07:00,410 --> 00:07:01,589 tenemos que ir buscando 107 00:07:01,589 --> 00:07:04,990 los corchetes donde pone area 108 00:07:04,990 --> 00:07:08,170 y separarlos 109 00:07:08,170 --> 00:07:09,589 buscamos el siguiente 110 00:07:09,589 --> 00:07:12,970 y los separamos 111 00:07:12,970 --> 00:07:13,790 así con todos 112 00:07:13,790 --> 00:07:22,079 de esta manera va a ser más fácil trabajar 113 00:07:22,079 --> 00:07:27,420 recordáis que escribimos en las urls que nos pedía 114 00:07:27,420 --> 00:07:30,319 foro, día 23, día 24 115 00:07:30,319 --> 00:07:33,860 pues ahora vamos a ver para qué lo escribíamos así 116 00:07:33,860 --> 00:07:37,939 esta fila nos dice que este área de coordenadas 117 00:07:37,939 --> 00:07:41,699 si alguien pincha, irá al foro 118 00:07:41,699 --> 00:07:45,019 pero tenemos que introducir una url 119 00:07:45,019 --> 00:07:46,660 y cuál es la url de foro 120 00:07:46,660 --> 00:07:49,180 para eso hemos abierto esta otra pestaña 121 00:07:49,180 --> 00:07:52,519 vamos al curso, vamos al foro de dudas 122 00:07:52,519 --> 00:07:54,060 pinchamos 123 00:07:54,060 --> 00:07:58,220 y la URL que aparece 124 00:07:58,220 --> 00:08:00,519 en la barra del navegador 125 00:08:00,519 --> 00:08:02,439 la copiamos 126 00:08:02,439 --> 00:08:03,300 copiar 127 00:08:03,300 --> 00:08:05,860 volvemos a la otra pestaña 128 00:08:05,860 --> 00:08:07,480 y donde pone foro 129 00:08:07,480 --> 00:08:10,480 lo borramos 130 00:08:10,480 --> 00:08:12,759 control V 131 00:08:12,759 --> 00:08:14,519 y ahí ponemos 132 00:08:14,519 --> 00:08:16,800 mantenemos las comillas, esa dirección 133 00:08:16,800 --> 00:08:18,899 vamos ahora con el día 23 134 00:08:18,899 --> 00:08:20,360 exactamente igual 135 00:08:20,360 --> 00:08:24,439 vamos a la página, vamos a lunes 23 136 00:08:24,439 --> 00:08:30,680 vemos que ha cambiado la URL 137 00:08:30,680 --> 00:08:35,419 copiamos, volvemos a la otra pestaña 138 00:08:35,419 --> 00:08:38,919 y donde pone día 23, pegamos esa URL 139 00:08:38,919 --> 00:08:43,580 y así con todos los días, por ahora vamos a hacerlo solo hasta el día 140 00:08:43,580 --> 00:08:46,600 26, una vez lo tenemos 141 00:08:46,600 --> 00:08:50,940 pinchamos en los corchetes para ver como ha quedado 142 00:08:50,940 --> 00:08:54,159 y a priori no se ha modificado nada 143 00:08:54,159 --> 00:08:58,559 guardamos y regresamos al curso 144 00:08:58,559 --> 00:09:02,159 vamos a entrar como estudiante a ver cómo lo vería el alumno 145 00:09:02,159 --> 00:09:06,860 el estudiante al entrar vería los avisos, el foro de dudas 146 00:09:06,860 --> 00:09:09,179 el muro de la relajación y el calendario 147 00:09:09,179 --> 00:09:13,279 y todas las secciones colapsadas 148 00:09:13,279 --> 00:09:16,980 podría bajar y si estamos en lunes 23 149 00:09:16,980 --> 00:09:19,259 y pinchar directamente en la sección 150 00:09:19,259 --> 00:09:22,399 podría navegar por el menú lateral 151 00:09:22,399 --> 00:09:27,000 o podría directamente pinchar en el 23 152 00:09:27,000 --> 00:09:30,779 como veréis ahí la flecha se convierte en una mano 153 00:09:30,779 --> 00:09:35,120 y si pincha en el 23 se le abre solo 154 00:09:35,120 --> 00:09:37,240 las tareas que haya para ese día 155 00:09:37,240 --> 00:09:43,580 si pincha en el 24, para el 24 y es una manera más cómoda de navegar 156 00:09:43,580 --> 00:09:47,659 si pincha en el foro, le llevaría al foro 157 00:09:47,659 --> 00:09:52,559 que también está aquí arriba, vamos a aprovechar para conocer 158 00:09:52,559 --> 00:09:56,360 unas de las opciones de visibilidad y disponibilidad de recursos. 159 00:09:57,179 --> 00:10:00,779 Vamos a volver a nuestro rol normal, activar edición. 160 00:10:02,120 --> 00:10:08,039 Los avisos los vamos a ocultar y el foro de dudas también lo vamos a ocultar. 161 00:10:09,659 --> 00:10:14,960 Ahora mismo los alumnos no podrían acceder a esos contenidos, 162 00:10:14,960 --> 00:10:19,100 pero en el foro vamos a ponerle que 163 00:10:19,100 --> 00:10:22,500 aunque esté oculto, que esté disponible 164 00:10:22,500 --> 00:10:26,059 es decir, ellos no lo van a ver directamente 165 00:10:26,059 --> 00:10:30,440 pero si hay un link que les redirige a ese contenido 166 00:10:30,440 --> 00:10:31,539 sí lo van a poder ver 167 00:10:31,539 --> 00:10:34,360 vamos a comprobarlo 168 00:10:34,360 --> 00:10:36,559 el foro ha desaparecido 169 00:10:36,559 --> 00:10:40,679 pero nosotros habíamos configurado una zona caliente 170 00:10:40,679 --> 00:10:41,539 que se llamaba foro 171 00:10:41,539 --> 00:10:43,659 y que enlaza al foro 172 00:10:43,659 --> 00:10:49,940 Y como está oculto, pero sí está disponible, si pinchamos ahí, nos lleva al foro. 173 00:10:51,360 --> 00:10:56,000 A partir de este momento, que ya conocéis cómo mapear una imagen con zonas calientes 174 00:10:56,000 --> 00:11:02,320 y cómo esas zonas os pueden llevar a una sección o al contenido concreto del aula virtual 175 00:11:02,320 --> 00:11:11,120 o incluso a páginas externas, habrá vuestro trabajo diseñar imágenes mucho más atractivas que esta. 176 00:11:11,120 --> 00:11:16,159 espero que esto os ayude a organizar mejor la navegación por las aulas virtuales 177 00:11:16,159 --> 00:11:18,179 y hacerlas más atractivas para los alumnos