1 00:00:00,000 --> 00:00:23,600 Hola, soy Daniel Breña y bueno, ahora comenzaremos el taller de temas gráficos y bueno, simplemente 2 00:00:23,600 --> 00:00:29,400 decir que vengo a enseñaros a hacer un tema gráfico, pues vosotros mismos. 3 00:00:29,400 --> 00:00:31,400 Muchas gracias, espero que os guste. 4 00:00:37,400 --> 00:00:40,400 Buenas tardes, no sé si ven a alguien más, vamos a ir empezando. 5 00:00:40,400 --> 00:00:45,400 Soy Daniel Breña, vengo del Parc Nacional, de aquí de España. 6 00:00:45,400 --> 00:00:53,400 Soy consultor, trabajo con temas gráficos, trabajo haciendo desarrollo, módulos, bloques. 7 00:00:54,400 --> 00:00:58,400 Bueno, yo aquí quería enseñaros un poco a hacer, pues, temas gráficos con modem. 8 00:00:58,400 --> 00:01:04,400 No sé la experiencia que tenéis, ahora os preguntaré para ver un poco donde estamos, 9 00:01:04,400 --> 00:01:09,400 en qué nivel y os iré dando pautas de todo lo que vayamos haciendo. 10 00:01:09,400 --> 00:01:14,400 Hay un curso gráfico que os voy a dejar contestar para que vayáis viendo todo. 11 00:01:14,400 --> 00:01:18,400 Al mismo que ahora yo, un poco detrás, pues incluso en casa lo que vais a hacer mañana, 12 00:01:18,400 --> 00:01:20,400 esta tarde, lo podéis ir viendo. 13 00:01:21,400 --> 00:01:28,400 Empezamos, tenemos un curso que es el, si vais a la portada de la web de Smooth, 14 00:01:28,400 --> 00:01:32,400 más o menos lo habréis visto, si vais a la portada de la web de Smooth este año, 15 00:01:32,400 --> 00:01:39,400 tenemos, estará un poco la versión descargada, a la izquierda con el recurso de talleres, 16 00:01:39,400 --> 00:01:44,400 el enlace, lo de los bloques laterales, y encontraréis el enlace al recurso de talleres 17 00:01:44,400 --> 00:01:46,400 que es este curso que os estamos viendo. 18 00:01:46,400 --> 00:01:51,400 Y aquí es que vais a tallar bien, hace más, o sea, para que veáis cuál es la primera pantalla. 19 00:01:53,400 --> 00:01:58,400 Una vez que hayáis visto, en el Firefox tenéis aquí acceso, si tenéis el model 1.9 local, 20 00:01:58,400 --> 00:02:02,400 este es el que tocaremos y modificaremos. 21 00:02:02,400 --> 00:02:08,400 También tenéis acceso al model 1.2.10 y este aquí no lo tenéis, tenemos estos dos. 22 00:02:08,400 --> 00:02:10,400 Model 1.9 es el que tocaremos. 23 00:02:10,400 --> 00:02:14,400 Como los teoréficos son similares, solo hay algún momento que no sabemos dónde estamos. 24 00:02:15,400 --> 00:02:17,400 Lo compiléis, lo miramos y vale. 25 00:02:19,400 --> 00:02:21,400 Mientras que vamos acabando todo esto, sin curso. 26 00:02:22,400 --> 00:02:24,400 Pero bueno, vamos a empezar. 27 00:02:24,400 --> 00:02:31,400 Ahora, si ya todos tenéis abierto el navegador con vuestros datos, o sea, con vuestro model local, 28 00:02:31,400 --> 00:02:33,400 ahora bien, una idea que hagáis. 29 00:02:33,400 --> 00:02:39,400 La web de la model 1.2.10 y podéis apagar a este curso que os decía al principio. 30 00:02:39,400 --> 00:02:41,400 ¿Cómo lo entrenamos? 31 00:02:42,400 --> 00:02:45,400 Bueno, estamos aquí en la web, hace grados, pero es el curso. 32 00:02:45,400 --> 00:02:50,400 Vale, el curso este está, si lo habéis visto, como os decía, tenéis aquí el data que es la model 1.2.10. 33 00:02:51,400 --> 00:02:54,400 Es vuestro navegador de la manera en que todo aparece. 34 00:02:54,400 --> 00:02:55,400 Model 1.2.10. 35 00:02:55,400 --> 00:02:58,400 Entonces, a la izquierda, justificaremos a sacarlo. 36 00:03:00,400 --> 00:03:02,400 Os vale la atención. 37 00:03:12,400 --> 00:03:18,400 Bueno, lo que vamos a hacer es bajarnos los datos del curso que os decía al principio. 38 00:03:19,400 --> 00:03:24,400 Y cuando os caigan los datos en local, pues ya estaríamos trabajando sobre los datos. 39 00:03:26,400 --> 00:03:28,400 Tenéis aquí, el curso de talleres. 40 00:03:28,400 --> 00:03:31,400 En el bloque de la izquierda de la model 1. 41 00:03:32,400 --> 00:03:34,400 En el curso de talleres. 42 00:03:34,400 --> 00:03:36,400 Entonces, enlazando aquí. 43 00:03:41,400 --> 00:03:43,400 Vale, ¿están interpretados? 44 00:03:47,400 --> 00:03:49,400 Este es todo lo que vamos a hacer. 45 00:03:59,400 --> 00:04:01,400 Vale, estando en logado sigue el acceso. 46 00:04:01,400 --> 00:04:05,400 Entonces, aquí a la izquierda, que vosotros no os podéis ver en la pantalla, tenéis talleres y efectos. 47 00:04:06,400 --> 00:04:10,400 Pues si clicáis os va a aparecer la pantalla a la cual habéis visto. 48 00:04:11,400 --> 00:04:14,400 Vale, descargaros el material para el taller. 49 00:04:15,400 --> 00:04:17,400 Y de partir de aquí empezaremos. 50 00:04:17,400 --> 00:04:24,400 Os empezaré, os iré explicando cómo funciona la estructura de empleos de Moodle en el precio de talleres. 51 00:04:25,400 --> 00:04:32,400 Moodle no es más que un sistema de archivos, como los sprites. 52 00:04:32,400 --> 00:04:34,400 Entonces, dentro del sistema de archivos es muy modular. 53 00:04:35,400 --> 00:04:38,400 Podemos utilizar tanto módulos, como bloques, como temas. 54 00:04:38,400 --> 00:04:41,400 Añadir una cartera con unos 3 formatos aquí dentro. 55 00:04:41,400 --> 00:04:45,400 Y tenemos un tema de archivos nuevo, un bloque nuevo, etc. 56 00:04:45,400 --> 00:04:47,400 Con los que vamos a hacerlo es muy sencillo. 57 00:04:47,400 --> 00:04:48,400 Lo veréis. 58 00:04:51,400 --> 00:04:56,400 Una vez que os hayáis basado esto, os voy a enseñar... 59 00:04:57,400 --> 00:04:58,400 Vale. 60 00:04:58,400 --> 00:05:03,400 Si os fijáis aquí, yo me basaré en este taller. 61 00:05:03,400 --> 00:05:07,400 Un curso que he subido, que lo podéis ver también, que es este. 62 00:05:07,400 --> 00:05:11,400 Y os iré enseñando todas las características de Moodle y os voy a enseñar. 63 00:05:11,400 --> 00:05:14,400 Vosotros lo podéis ir viendo en la pantalla, como usualmente lo hacéis. 64 00:05:14,400 --> 00:05:17,400 Y hagáis lo que estáis haciendo. 65 00:05:17,400 --> 00:05:24,400 Como sois activistadores, vuestro Moodle de local, que os he enseñado antes, todo esto lo vais a poder ver. 66 00:05:25,400 --> 00:05:27,400 Esa es la administración de Moodle. 67 00:05:27,400 --> 00:05:30,400 Yo lo puesto aquí separado con una explicación. 68 00:05:30,400 --> 00:05:35,400 Vosotros lo tendréis que ver en el bloque de la derecha, o sea, izquierdo. 69 00:05:35,400 --> 00:05:38,400 Lo vamos a ver aquí, seguida. 70 00:05:38,400 --> 00:05:47,400 En el blanco, vuestra máquina local, pensando como administrador, que tenéis aquí al mismo índice. 71 00:05:54,400 --> 00:05:57,400 Tenéis el acceso total a la máquina. 72 00:05:57,400 --> 00:06:06,400 Entonces, si os fijáis aquí, tenéis el menú que os interesa para vosotros, que es apariencia. 73 00:06:07,400 --> 00:06:11,400 Tenemos en apariencia, hay un subdirectorio, es temas. 74 00:06:11,400 --> 00:06:18,400 Aquí administramos los que tenemos en local listado en la plataforma Moodle. 75 00:06:20,400 --> 00:06:22,400 Administramos desde aquí los temas gráficos. 76 00:06:22,400 --> 00:06:26,400 Entonces, en ajustes, tenemos ajustes de temas y subdirectorios de temas. 77 00:06:29,400 --> 00:06:34,400 En este otro curso, os explicaba lo que era cada apartado. 78 00:06:34,400 --> 00:06:42,400 En ajustes de temas, lo que tenemos es seleccionar que rol queremos que vea los temas. 79 00:06:42,400 --> 00:06:52,400 Por ejemplo, es un poco complicado de ver si no hay un ejemplo que lo podríamos ver, pero ahora mismo, más allá de hacerlo, lo vamos a modificar. 80 00:06:52,400 --> 00:06:53,400 Ahora os lo explico. 81 00:06:53,400 --> 00:06:59,400 Aquí en ambos ajustes de temas, nos encontramos con una serie de permisos. 82 00:06:59,400 --> 00:07:00,400 Una serie de permisos. 83 00:07:00,400 --> 00:07:05,400 Podemos permitir temas por usuario, por curso o por categoría. 84 00:07:05,400 --> 00:07:12,400 Esto hace que, por ejemplo, tengamos este tema gráfico, que es el tema gráfico del MacBook. 85 00:07:12,400 --> 00:07:17,400 Si nosotros hacemos un Permitir temas por categoría, por usuario o por curso, 86 00:07:17,400 --> 00:07:25,400 dentro del menú de categoría, de la administración de categoría, dentro del menú de administración de curso y dentro del menú de administración de usuario, 87 00:07:25,400 --> 00:07:27,400 se puede escoger un tema gráfico. 88 00:07:27,400 --> 00:07:34,400 Por lo tanto, en esos apartados puede haber un diseño diferente al que hay en el campo total. 89 00:07:34,400 --> 00:07:44,400 Por ejemplo, si tenemos categorías diferentes, porque son enseñanzas diferentes, pues a cada una le cambiamos la tabercera o le cambiamos el color. 90 00:07:44,400 --> 00:07:52,400 Esto es una de las partes importantes de cara a administrar de esa manera el entorno gráfico. 91 00:07:52,400 --> 00:08:00,400 Os diría que pongáis Permitir estilos por usuario y por curso. 92 00:08:00,400 --> 00:08:09,400 Porque luego entraremos en el menú y podremos ver que en un curso completo tenemos un tema gráfico. 93 00:08:09,400 --> 00:08:11,400 A lo mejor nos ha orientado a procesores. 94 00:08:11,400 --> 00:08:15,400 Si administrais vuestro propio curso, no lo habréis visto. 95 00:08:15,400 --> 00:08:21,400 Es menos porque desde la administración no lo tiene seleccionado. 96 00:08:21,400 --> 00:08:24,400 Ese es el ajuste de temas. 97 00:08:24,400 --> 00:08:27,400 Y tenemos el selector de temas. 98 00:08:27,400 --> 00:08:36,400 El selector de temas es un menú para seleccionar el tema gráfico al que queremos mostrar en nuestro MacBook. 99 00:08:37,400 --> 00:08:40,400 Lo que muestra es el listado. 100 00:08:40,400 --> 00:08:45,400 Lo que vamos a elegir es ver el tema gráfico. 101 00:08:45,400 --> 00:09:04,400 Y tenemos aquí todos los que se utilizan en un curso básico cuando arrancas tu máquina virtual. 102 00:09:04,400 --> 00:09:08,400 Pero el que tienes es el estándar. 103 00:09:08,400 --> 00:09:11,400 Nosotros vamos a trabajar hoy sobre todo esto. 104 00:09:11,400 --> 00:09:14,400 Tenemos que crear un tema gráfico nuevo. 105 00:09:14,400 --> 00:09:21,400 Voy a ir avanzando sobre la verificación porque así vais viendo a la vez que lo vais haciendo. 106 00:09:21,400 --> 00:09:28,400 Para crear un tema gráfico nuevo y encontrar el listado, tenemos que ir a los ficheros de Google. 107 00:09:28,400 --> 00:09:45,400 En vuestra máquina virtual, si vais a las carpetas de este Windows y os vais a abrir un IPC, os vais a hacer dos puntos. 108 00:09:45,400 --> 00:09:52,400 Xampp. 109 00:09:52,400 --> 00:09:55,400 Hd2. 110 00:09:55,400 --> 00:09:58,400 Moodle. 111 00:09:58,400 --> 00:10:06,400 Estos son los directores de Moodle que tenemos. 112 00:10:06,400 --> 00:10:08,400 Estos son los directores de Moodle. 113 00:10:08,400 --> 00:10:11,400 Aquí lo que nos interesa es arrancar el tema. 114 00:10:11,400 --> 00:10:14,400 Xampp. 115 00:10:14,400 --> 00:10:23,400 C-H-E-M-P. 116 00:10:23,400 --> 00:10:31,400 En esta carpeta de Xampp, según fijáis, todos los nombres que tenemos aquí corresponden con los temas gráficos que hemos visto en la bandera anterior. 117 00:10:31,400 --> 00:10:35,400 Aquí vemos el chamaleon, el goldflower. 118 00:10:36,400 --> 00:10:40,400 Cada carpeta de estas es un tema gráfico diferente. 119 00:10:40,400 --> 00:10:43,400 Dentro del Moodle que tenemos ahí en nuestro lado. 120 00:10:43,400 --> 00:10:50,400 Necesito para crear nuestro propio tema gráfico, vamos a crear un tema que se va a llamar Mood 10. 121 00:10:50,400 --> 00:10:58,400 Pero para ello necesito, como todos los temas gráficos, porque aquí empezar de cero, cuando estamos en una comunidad en la que todo eso va a lleve, 122 00:10:58,400 --> 00:11:01,400 empezar de cero nos hace perder tiempo. 123 00:11:01,400 --> 00:11:05,400 Vamos a modificar el tema gráfico para crear uno nuevo y diferente. 124 00:11:05,400 --> 00:11:10,400 Entonces la idea es copiar el tema gráfico con manual. 125 00:11:10,400 --> 00:11:16,400 Hacer botón derecho copiar y pegar en la misma carpeta. 126 00:11:16,400 --> 00:11:23,400 Copiar y pegar. 127 00:11:24,400 --> 00:11:28,400 Copiar y pegar. 128 00:11:28,400 --> 00:11:33,400 Y a esto lo vamos a renombrar y lo vamos a llamar Mood 10. 129 00:11:33,400 --> 00:11:37,400 M-O-O-D-10. 130 00:11:37,400 --> 00:11:45,400 En forma vuelta. 131 00:11:45,400 --> 00:11:50,400 ¿Vais copiar todos? 132 00:11:50,400 --> 00:12:07,400 Una vez que hemos copiado esto, si nos vamos a nuestro Moodle y actualizamos, nos encontraremos que tenemos un tema que es el Moodle 10. 133 00:12:07,400 --> 00:12:12,400 Ya tenemos un tema gráfico nuevo en nuestro Moodle. 134 00:12:12,400 --> 00:12:19,400 M-O-O-D-10. 135 00:12:19,400 --> 00:12:22,400 He copiado de forma vuelta. 136 00:12:22,400 --> 00:12:24,400 He hecho la copia y lo he renombrado. 137 00:12:24,400 --> 00:12:27,400 Con esto tenemos un tema diferente. 138 00:12:27,400 --> 00:12:36,400 Entonces teniendo este tema, como ésta va a ser el selector de temas para el campus de nuestra aplicación local, lo elegimos. 139 00:12:37,400 --> 00:12:39,400 Es decir, el tema Moodle 10. 140 00:12:39,400 --> 00:12:42,400 Y el entorno gráfico lo cambiamos de la mente. 141 00:12:42,400 --> 00:12:45,400 Esto es un entorno gráfico de forma guay. 142 00:12:45,400 --> 00:12:52,400 Lo único que hemos hecho es renombrarlo para ahora codificarlo. 143 00:12:52,400 --> 00:13:02,400 Dentro de las carpetas de cada tema hay un fichero que es el RIKI que demuestra la información justo después. 144 00:13:02,400 --> 00:13:07,400 Y dentro de la pantalla vamos a aprovechar para hacer la primera modificación del tema gráfico. 145 00:13:07,400 --> 00:13:14,400 La primera modificación del tema gráfico que vamos a hacer es modificar el logo. 146 00:13:14,400 --> 00:13:20,400 El Full Malware, según veis aquí, tiene dos logos. Uno externo y otro interno. 147 00:13:20,400 --> 00:13:28,400 El externo es cuando estás en la página principal y el secundario, que es el que veis en pantalla, es el que aparece en todos los cursos de administración. 148 00:13:29,400 --> 00:13:37,400 Lo que vamos a hacer es modificar dentro de los ficheros este logo, para tener un logo dentro y otro fuera, pero en este caso de la modelo. 149 00:13:37,400 --> 00:13:42,400 Antes os he dicho que os descargaréis un fichero que es el de... 150 00:13:49,400 --> 00:13:51,400 Es el de material para el taller. 151 00:13:51,400 --> 00:13:55,400 Está aquí, lo ocupáis en este curso y lo encontraráis en el otro lápiz. 152 00:13:56,400 --> 00:13:59,400 En esta carpeta, una vez descargada... 153 00:14:04,400 --> 00:14:11,400 Descomprimís ese fichero y tenemos material para el tema. 154 00:14:11,400 --> 00:14:30,400 Cuando abrís el fichero que os habéis descargado, tenéis una carpeta que se llama Logos, Ejemplos, Full Malware. 155 00:14:30,400 --> 00:14:36,400 Y aquí nos encontramos con dos logos de ambos. 156 00:14:36,400 --> 00:14:47,400 Este es más alargado y más cortito, y este es más alto. 157 00:14:47,400 --> 00:14:52,400 Estos dos ficheros, seleccionándolos y copiándolos. 158 00:14:52,400 --> 00:15:02,400 Y os vais a la carpeta donde teníamos los temas gráficos. 159 00:15:02,400 --> 00:15:07,400 Entramos en la carpeta BUS10 y veis que aquí tenemos un logo en el LogosMod. 160 00:15:07,400 --> 00:15:09,400 Que son los mismos que teníamos. 161 00:15:09,400 --> 00:15:14,400 Pues aquí tenéis y sobreescribís estos dos ficheros. 162 00:15:14,400 --> 00:15:19,400 Pues ahora, tenemos estos ficheros en nuestro tema de atrampo. 163 00:15:19,400 --> 00:15:21,400 ¿Cómo lo comprobamos? 164 00:15:21,400 --> 00:15:30,400 Vamos al navegador, a nuestro Google Particular. 165 00:15:30,400 --> 00:15:34,400 Si le damos a Continuar, veremos el resultado. 166 00:15:38,400 --> 00:15:41,400 Este logo es el pequeño. 167 00:15:50,400 --> 00:15:56,400 Si os vais al inicio, este es el inicio. 168 00:15:56,400 --> 00:15:59,400 Y el otro es el donde está... 169 00:16:07,400 --> 00:16:12,400 Si hacéis Ctrl-F5, se le carga la leche. 170 00:16:12,400 --> 00:16:14,400 Ahí, ya. 171 00:16:15,400 --> 00:16:18,400 Creo que me está cargando. 172 00:16:21,400 --> 00:16:23,400 No me da nada. 173 00:16:23,400 --> 00:16:28,400 Sí, cambiad de dos nombres y usad un... 174 00:16:28,400 --> 00:16:32,400 Realizando la pantalla, ahora sí. 175 00:16:32,400 --> 00:16:35,400 En la página principal... 176 00:16:35,400 --> 00:16:38,400 Perdón, soy un poco caro. Esto es la carcha. 177 00:16:38,400 --> 00:16:41,400 Agregando con la carcha y haciendo Ctrl-F5, 178 00:16:41,400 --> 00:16:43,400 en la página principal tenéis el logo grande. 179 00:16:43,400 --> 00:16:47,400 Y en cualquier página interior, en este caso, 180 00:16:47,400 --> 00:16:50,400 en modificaciones, tenemos el pequeño. 181 00:16:50,400 --> 00:16:52,400 ¿Qué es una modificación hecha? 182 00:16:52,400 --> 00:16:56,400 Esto es muy sencillo. Esto viene ya con el trabajo de ProgramWide. 183 00:16:56,400 --> 00:16:59,400 Pues ahora, os voy a explicar cómo funciona por dentro 184 00:16:59,400 --> 00:17:04,400 todo lo que es cabecera, cienepáginas, bloques laterales... 185 00:17:04,400 --> 00:17:08,400 Y un poco el contenido de la web, pero desde el diseño gráfico. 186 00:17:08,400 --> 00:17:10,400 Os explicaré un poquito y haré algunas modificaciones 187 00:17:10,400 --> 00:17:14,400 para que este tema gráfico tenga un poco más de forma. 188 00:17:14,400 --> 00:17:18,400 Si no me lleváis siguiendo con temas de CSS, 189 00:17:18,400 --> 00:17:20,400 lo iré haciendo sencillo para que lo vayáis viendo 190 00:17:20,400 --> 00:17:23,400 y si no, está toda la documentación ahí. 191 00:17:23,400 --> 00:17:25,400 Entonces, empezamos. 192 00:17:25,400 --> 00:17:35,400 Si entramos... Yo te voy a hacer desde el curso. 193 00:17:43,400 --> 00:17:47,400 Dentro de cada carpeta, de cada tema gráfico, 194 00:17:47,400 --> 00:17:50,400 nos encontramos con diferentes parches. 195 00:17:50,400 --> 00:17:53,400 Tenemos una configuración, unos estilos, 196 00:17:53,400 --> 00:17:57,400 unos html, imágenes. 197 00:17:57,400 --> 00:17:59,400 Luego continuamos. 198 00:17:59,400 --> 00:18:01,400 Tema de configuración. 199 00:18:01,400 --> 00:18:03,400 Habéis visto que tengo una figura donde contestar. 200 00:18:03,400 --> 00:18:08,400 Tiene unos iconos diferentes a los iconos habituales. 201 00:18:08,400 --> 00:18:12,400 Podéis ver... También podéis hacer... 202 00:18:12,400 --> 00:18:15,400 añadir... pues, diciendo que ya lo has escrito 203 00:18:15,400 --> 00:18:20,400 antes a anteriores a las que se carguen con el tema gráfico. 204 00:18:20,400 --> 00:18:22,400 Podéis modificar las típicas flechitas, 205 00:18:22,400 --> 00:18:24,400 que son un triangulito de un html. 206 00:18:24,400 --> 00:18:26,400 Actualmente esto, en Internet Explorer 6, da problemas. 207 00:18:26,400 --> 00:18:28,400 Puedes cambiarlo por el mayor que queráis. 208 00:18:28,400 --> 00:18:30,400 Lo que se puede hacer es la articulación. 209 00:18:30,400 --> 00:18:33,400 Hay un fichero que se llama config.php 210 00:18:33,400 --> 00:18:35,400 que si lo abrís y veis... 211 00:18:35,400 --> 00:18:38,400 Hay muchas cosas de este tipo. 212 00:18:38,400 --> 00:18:41,400 Más adelante os enseñaré a modificar algunas en concreto 213 00:18:41,400 --> 00:18:45,400 para poner iconos o cambiar alguna de estas partes. 214 00:18:45,400 --> 00:18:47,400 De html nos encontramos dos ficheros, 215 00:18:47,400 --> 00:18:50,400 que son el header y el footer. 216 00:18:50,400 --> 00:18:52,400 Grabando estos ficheros, 217 00:18:52,400 --> 00:18:54,400 vamos a intentar aquí también, 218 00:18:54,400 --> 00:18:58,400 donde tenemos el config, 219 00:18:58,400 --> 00:19:00,400 que era este, que es un config.hp, 220 00:19:00,400 --> 00:19:03,400 y tenemos dos html que son el header y el footer. 221 00:19:03,400 --> 00:19:05,400 Y el footer. 222 00:19:05,400 --> 00:19:08,400 Header y footer son toda la configuración 223 00:19:08,400 --> 00:19:09,400 que cabe. 224 00:19:09,400 --> 00:19:14,400 Esta es la de models. 225 00:19:14,400 --> 00:19:16,400 Son todas las configuraciones de la cabecera del model. 226 00:19:16,400 --> 00:19:20,400 Lo que viene a ser el logo, 227 00:19:20,400 --> 00:19:23,400 la colocación de esto, el color del fondo... 228 00:19:23,400 --> 00:19:25,400 Bueno, el color del fondo no, perdón. 229 00:19:25,400 --> 00:19:27,400 Simplemente es la estructura. 230 00:19:27,400 --> 00:19:29,400 Porque esto que hay aquí, 231 00:19:29,400 --> 00:19:31,400 todo esto, es un html, 232 00:19:31,400 --> 00:19:33,400 es un fichero html. 233 00:19:33,400 --> 00:19:36,400 Luego tenemos otro fichero html que os decía, 234 00:19:36,400 --> 00:19:37,400 que es el footer. 235 00:19:37,400 --> 00:19:39,400 Es este trocito de aquí. 236 00:19:39,400 --> 00:19:41,400 La personalización de estos dos ficheros 237 00:19:41,400 --> 00:19:42,400 hace que esto cambie. 238 00:19:42,400 --> 00:19:44,400 Que cambien en la estructura. 239 00:19:44,400 --> 00:19:47,400 Los colores se cambian con el estilo CSS. 240 00:19:47,400 --> 00:19:49,400 Que son otros ficheros que ahora os enseño. 241 00:19:49,400 --> 00:19:52,400 Que son normalmente, de forma guay, 242 00:19:52,400 --> 00:19:55,400 que es uno de los temas que yo más utilizo 243 00:19:55,400 --> 00:19:58,400 en el trabajo para verificar 244 00:19:58,400 --> 00:20:01,400 porque tenemos tres ficheros diferentes 245 00:20:01,400 --> 00:20:03,400 que son CSS. 246 00:20:03,400 --> 00:20:07,400 Que son color, layout y fonts. 247 00:20:07,400 --> 00:20:09,400 Es lo que me lo dicen. 248 00:20:09,400 --> 00:20:12,400 Este layout estructura la colocación 249 00:20:12,400 --> 00:20:14,400 de cada elemento. 250 00:20:14,400 --> 00:20:16,400 Podéis modificar los colores, 251 00:20:16,400 --> 00:20:17,400 están ahí todos los datos 252 00:20:17,400 --> 00:20:19,400 y podéis modificar las fontes. 253 00:20:19,400 --> 00:20:22,400 Aquí dentro tenéis cada uno de esos elementos. 254 00:20:22,400 --> 00:20:23,400 A partir de ahí, para estructurar 255 00:20:23,400 --> 00:20:25,400 el tema gráfico correctamente, 256 00:20:25,400 --> 00:20:27,400 tenéis que añadir cada uno de los dos parámetros 257 00:20:27,400 --> 00:20:30,400 en el fichero completo. 258 00:20:30,400 --> 00:20:31,400 Nosotros lo haremos diferente. 259 00:20:31,400 --> 00:20:35,400 Lo haremos un poco como una trampa 260 00:20:35,400 --> 00:20:36,400 para hacerlo más sencillo. 261 00:20:36,400 --> 00:20:38,400 No vamos a entrar a verificar este fichero 262 00:20:38,400 --> 00:20:42,400 si lo vamos a crear de nuevo. 263 00:20:42,400 --> 00:20:44,400 Pero esto, la estructura, 264 00:20:44,400 --> 00:20:47,400 y si algún día hacéis un tema gráfico 265 00:20:47,400 --> 00:20:50,400 más robusto, que todo esté bien estructurado, 266 00:20:50,400 --> 00:20:54,400 tenéis que hacerlo dentro de cada uno de estos ficheros. 267 00:20:54,400 --> 00:20:56,400 Por lo demás que encontramos, 268 00:20:56,400 --> 00:21:01,400 digamos aquí, 269 00:21:01,400 --> 00:21:03,400 tenemos imágenes, iconos 270 00:21:03,400 --> 00:21:05,400 y luego hay información. 271 00:21:05,400 --> 00:21:07,400 Imágenes e iconos, 272 00:21:07,400 --> 00:21:09,400 donde nos encontramos, 273 00:21:09,400 --> 00:21:11,400 en VIX. 274 00:21:11,400 --> 00:21:15,400 VIX es la carpeta donde están todos los iconos 275 00:21:15,400 --> 00:21:17,400 del tema gráfico. 276 00:21:17,400 --> 00:21:19,400 Hay algunas imágenes, 277 00:21:19,400 --> 00:21:22,400 pero aquí dentro se estructura 278 00:21:22,400 --> 00:21:26,400 todas las imágenes que hay dentro del curso. 279 00:21:26,400 --> 00:21:27,400 Podéis añadir aquí los iconos. 280 00:21:27,400 --> 00:21:30,400 Esto es algo que haremos ahora. 281 00:21:30,400 --> 00:21:32,400 Luego está el Fabricon 282 00:21:32,400 --> 00:21:34,400 y luego tenemos los globos, etc. 283 00:21:34,400 --> 00:21:36,400 Estos son llamados directamente 284 00:21:36,400 --> 00:21:38,400 desde los CSS. 285 00:21:38,400 --> 00:21:40,400 Y el Fabricon es el conjunto 286 00:21:40,400 --> 00:21:42,400 que hemos siempre hablado. 287 00:21:42,400 --> 00:21:45,400 Con esto tenemos la estructura global. 288 00:21:45,400 --> 00:21:46,400 Falta RigViz. 289 00:21:46,400 --> 00:21:48,400 El RigViz es el fichero que habéis visto 290 00:21:48,400 --> 00:21:50,400 que te explicaba que 291 00:21:50,400 --> 00:21:52,400 cambiamos las imágenes y tal. 292 00:21:52,400 --> 00:21:54,400 Esa es la información del tema gráfico. 293 00:21:54,400 --> 00:21:58,400 Aquí tenemos uno que se llama 294 00:21:58,400 --> 00:22:00,400 Screenshot. 295 00:22:00,400 --> 00:22:02,400 Si queréis hacer una gráfica, 296 00:22:02,400 --> 00:22:07,400 hacéis un fichero en Screenshot 297 00:22:07,400 --> 00:22:09,400 y es el que sale en todo el listado 298 00:22:09,400 --> 00:22:10,400 como hemos visto antes. 299 00:22:10,400 --> 00:22:11,400 Si no hacéis este fichero, 300 00:22:11,400 --> 00:22:13,400 este fichero no está aquí. 301 00:22:13,400 --> 00:22:15,400 Igualmente mudáis la estructura 302 00:22:15,400 --> 00:22:17,400 pequeñito y se ve la imagen. 303 00:22:17,400 --> 00:22:19,400 No es verdad. 304 00:22:19,400 --> 00:22:21,400 Muy bien. 305 00:22:21,400 --> 00:22:23,400 Vamos a empezar a modificar 306 00:22:23,400 --> 00:22:26,400 un poco estos ficheros que os decía. 307 00:22:32,400 --> 00:22:47,400 ... 308 00:22:47,400 --> 00:22:51,400 En esos ficheros hay uno de ellos 309 00:22:51,400 --> 00:22:57,400 que es toda la chuleta 310 00:22:57,400 --> 00:22:59,400 de cómo modificar todo esto. 311 00:22:59,400 --> 00:23:01,400 Lo tenemos aquí. 312 00:23:01,400 --> 00:23:03,400 Vamos a empezar modificando 313 00:23:03,400 --> 00:23:05,400 el config.php. 314 00:23:05,400 --> 00:23:08,400 Si podéis abrirlo con un editor de texto 315 00:23:08,400 --> 00:23:11,400 es suficiente para modificar temas gráficos. 316 00:23:11,400 --> 00:23:14,400 Hay gente que utiliza Windows, etc. 317 00:23:14,400 --> 00:23:16,400 Con un editor de texto es sencillo 318 00:23:16,400 --> 00:23:20,400 y sirve perfectamente. 319 00:23:20,400 --> 00:23:22,400 Pues entonces, 320 00:23:22,400 --> 00:23:27,400 para modificar los iconos 321 00:23:27,400 --> 00:23:29,400 tenemos que decirle a Moodle 322 00:23:29,400 --> 00:23:31,400 que cuando cargue este tema gráfico 323 00:23:31,400 --> 00:23:33,400 este tema gráfico no tiene los iconos por defecto. 324 00:23:33,400 --> 00:23:35,400 Esto lo hacemos en el config. 325 00:23:35,400 --> 00:23:38,400 Al editar este fichero con config.php 326 00:23:38,400 --> 00:23:41,400 nos encontramos con un parámetro 327 00:23:41,400 --> 00:23:44,400 que es el de Custom Picks. 328 00:23:44,400 --> 00:23:46,400 Si hacéis una búsqueda 329 00:23:46,400 --> 00:23:52,400 ponéis Custom Picks. 330 00:23:52,400 --> 00:23:54,400 Y nos encontramos con un parámetro 331 00:23:54,400 --> 00:23:56,400 que es Tick Custom Picks. 332 00:23:56,400 --> 00:23:58,400 Actualmente está falso 333 00:23:58,400 --> 00:24:00,400 porque el FormatWrite 334 00:24:00,400 --> 00:24:02,400 utiliza los iconos básicos de Moodle. 335 00:24:02,400 --> 00:24:04,400 Vamos a ponerlo a True. 336 00:24:04,400 --> 00:24:08,400 Pero no actualicéis todavía el Moodle. 337 00:24:08,400 --> 00:24:13,400 Guardamos el fichero. 338 00:24:13,400 --> 00:24:15,400 Vale. 339 00:24:15,400 --> 00:24:17,400 Poniendo el Custom Picks a True 340 00:24:17,400 --> 00:24:20,400 lo que hará será buscar dentro de la carpeta Picks 341 00:24:20,400 --> 00:24:22,400 nuestro tema gráfico. 342 00:24:22,400 --> 00:24:24,400 Por lo tanto, aquí. 343 00:24:24,400 --> 00:24:26,400 Buscará toda una estructura 344 00:24:26,400 --> 00:24:29,400 que utiliza Moodle de iconos. 345 00:24:29,400 --> 00:24:31,400 Ahora nos lo veremos. 346 00:24:31,400 --> 00:24:33,400 Os he pasado del fichero que habéis descargado 347 00:24:33,400 --> 00:24:35,400 tenéis dos estructuras de iconos 348 00:24:35,400 --> 00:24:38,400 que son dos estructuras bien pintadas 349 00:24:38,400 --> 00:24:41,400 y no son las originales 350 00:24:41,400 --> 00:24:43,400 que os podéis descargar de la web. 351 00:24:43,400 --> 00:24:45,400 Nos he pasado un poco modificado 352 00:24:45,400 --> 00:24:47,400 porque los originales que vienen a la web 353 00:24:47,400 --> 00:24:49,400 faltan algunos iconos. 354 00:24:49,400 --> 00:24:51,400 Entonces lo que os vais a acabar haciendo 355 00:24:51,400 --> 00:24:53,400 es buscar los iconos actuales que tengo yo 356 00:24:54,400 --> 00:24:56,400 del Moodle que tengo hechado. 357 00:24:56,400 --> 00:24:58,400 Me copio la carpeta Picks 358 00:24:58,400 --> 00:25:00,400 que está en la red del Moodle 359 00:25:00,400 --> 00:25:03,400 me cojo esos iconos y sobreescribo. 360 00:25:03,400 --> 00:25:05,400 Entonces mantendré siempre todos los iconos 361 00:25:05,400 --> 00:25:08,400 y encima sobreescribiré los nuevos. 362 00:25:08,400 --> 00:25:10,400 Los que voy a modificar. 363 00:25:10,400 --> 00:25:13,400 Los que tienen una visualización 364 00:25:13,400 --> 00:25:17,400 más a fin con mi empresa, mi instituto, mi colección. 365 00:25:17,400 --> 00:25:18,400 Vale. 366 00:25:18,400 --> 00:25:23,400 Entonces vamos al fichero que hemos descargado 367 00:25:23,400 --> 00:25:25,400 el material para temas de la Moodle. 368 00:25:28,400 --> 00:25:30,400 Tenemos dos Picks. 369 00:25:30,400 --> 00:25:33,400 Uno es Picks Tango y el otro es Picks Play. 370 00:25:33,400 --> 00:25:35,400 Podéis utilizar lo que queráis. 371 00:25:35,400 --> 00:25:37,400 Lo descomprimiréis en esta misma carpeta. 372 00:25:38,400 --> 00:25:40,400 Voy a ir siguiendo los iconos. 373 00:25:48,400 --> 00:25:52,400 Esta es la estructura de iconos que utilizamos. 374 00:25:52,400 --> 00:25:54,400 Es un poco caótica. 375 00:25:54,400 --> 00:25:56,400 Conforme vayáis investigando 376 00:25:56,400 --> 00:25:58,400 iréis viendo que... 377 00:25:58,400 --> 00:26:00,400 Este es Martín. 378 00:26:00,400 --> 00:26:02,400 Si le dices Martín, te parece si sale este icono. 379 00:26:04,400 --> 00:26:06,400 Hoy lo hemos visto todos en la conferencia. 380 00:26:08,400 --> 00:26:10,400 Estos iconos están aquí. 381 00:26:10,400 --> 00:26:12,400 Tienen una estructura. 382 00:26:12,400 --> 00:26:14,400 Pero cuando empecéis a investigar 383 00:26:14,400 --> 00:26:16,400 dentro de más que lo queréis 384 00:26:17,400 --> 00:26:19,400 Esta carpetita 385 00:26:19,400 --> 00:26:21,400 que se llama Picks Tango 386 00:26:23,400 --> 00:26:25,400 la copiamos 387 00:26:25,400 --> 00:26:27,400 y lo tenemos a nuestro tema gráfico. 388 00:26:28,400 --> 00:26:30,400 Estamos aquí. 389 00:26:30,400 --> 00:26:32,400 Lo que tenemos que hacer es 390 00:26:32,400 --> 00:26:34,400 la pegamos aquí y la nombramos. 391 00:26:36,400 --> 00:26:38,400 Esta anterior. 392 00:26:38,400 --> 00:26:40,400 Si queréis la podéis eliminar, no pasaría nada. 393 00:26:41,400 --> 00:26:43,400 Yo suelo hacer esto. 394 00:26:44,400 --> 00:26:46,400 Y entonces aquí 395 00:26:46,400 --> 00:26:48,400 dejamos esta cartera con Picks. 396 00:26:48,400 --> 00:26:50,400 Estábamos modificando. 397 00:26:50,400 --> 00:26:52,400 Y si... 398 00:26:54,400 --> 00:26:56,400 Arcadizando la página. 399 00:27:04,400 --> 00:27:06,400 Me gustan los Picks Grey. 400 00:27:06,400 --> 00:27:08,400 Picks Grey no. 401 00:27:10,400 --> 00:27:12,400 Si lo hacéis con Tango 402 00:27:12,400 --> 00:27:14,400 veréis una diferencia bastante más grande. 403 00:27:16,400 --> 00:27:18,400 Picks Grey son los iconos 404 00:27:18,400 --> 00:27:20,400 de Moodle, pero en gris. 405 00:27:22,400 --> 00:27:24,400 La de Tango sí que tiene más 406 00:27:24,400 --> 00:27:26,400 colores, más 407 00:27:26,400 --> 00:27:28,400 iconos diferentes. 408 00:27:36,400 --> 00:27:38,400 ¿Como se llama la cartera? 409 00:27:38,400 --> 00:27:40,400 ¿Puedo renombrarla? 410 00:27:40,400 --> 00:27:42,400 No, no lo dejas renombrar. 411 00:27:42,400 --> 00:27:44,400 La cartera no. 412 00:27:44,400 --> 00:27:46,400 Es tan uso. 413 00:27:46,400 --> 00:27:48,400 Es tan uso. 414 00:27:48,400 --> 00:27:50,400 Es la de los compilaciones, ¿no? 415 00:27:50,400 --> 00:27:52,400 No puede ser. 416 00:27:52,400 --> 00:27:54,400 Es tan uso. 417 00:27:54,400 --> 00:27:56,400 Si lo hacéis, se lo escribirá. 418 00:27:56,400 --> 00:27:58,400 Pues sí, la carpeta la 419 00:27:58,400 --> 00:28:00,400 si se la ponéis sentada 420 00:28:00,400 --> 00:28:02,400 dentro de la sola se la escribiría. 421 00:28:02,400 --> 00:28:04,400 La hemos escribido. 422 00:28:06,400 --> 00:28:08,400 ¿Veis? 423 00:28:08,400 --> 00:28:10,400 Se ve más 424 00:28:10,400 --> 00:28:12,400 un poco... 425 00:28:26,400 --> 00:28:28,400 Ahora, ¿veis? 426 00:28:28,400 --> 00:28:30,400 Se ven aquí estas carpetitas. 427 00:28:30,400 --> 00:28:32,400 Ya cambia un poco. 428 00:28:32,400 --> 00:28:34,400 Si mientras que estamos, mientras que lo queréis crear 429 00:28:34,400 --> 00:28:36,400 si queréis crearos un curso, dentro del curso 430 00:28:36,400 --> 00:28:38,400 tenéis todo el menú de administración, etc. 431 00:28:38,400 --> 00:28:40,400 Y ahí tenéis más iconos también. 432 00:28:40,400 --> 00:28:42,400 Porque aquí se crea un poco 433 00:28:42,400 --> 00:28:44,400 pobre con los iconos 434 00:28:44,400 --> 00:28:46,400 cambiados. Pero si os vais a... 435 00:28:46,400 --> 00:28:48,400 si creáis un curso 436 00:28:48,400 --> 00:28:50,400 eso vamos a hacerlo todos. 437 00:28:50,400 --> 00:28:52,400 Esto es uno que se ve cuando 438 00:28:52,400 --> 00:28:54,400 se lo instala. 439 00:28:54,400 --> 00:28:56,400 Sí, cuando hace la actualización. 440 00:28:56,400 --> 00:28:58,400 Cambiando la carpeta. 441 00:28:58,400 --> 00:29:00,400 Haces Control F5 442 00:29:00,400 --> 00:29:02,400 o se te quita el H. Se borra el H 443 00:29:02,400 --> 00:29:04,400 del navegador y 444 00:29:04,400 --> 00:29:06,400 entonces se vuelve esta diferencia. 445 00:29:18,400 --> 00:29:20,400 Y aquí ya vemos la diferencia con 446 00:29:20,400 --> 00:29:22,400 iconos. 447 00:29:22,400 --> 00:29:24,400 Vale. Voy a empezar a tener 448 00:29:24,400 --> 00:29:26,400 otro aspecto. 449 00:29:26,400 --> 00:29:28,400 Entonces... 450 00:29:28,400 --> 00:29:30,400 Os voy a 451 00:29:30,400 --> 00:29:32,400 explicar un poquito sobre el 452 00:29:32,400 --> 00:29:34,400 Feeder y Footer. No vamos a hacer 453 00:29:34,400 --> 00:29:36,400 modificaciones drásticas 454 00:29:36,400 --> 00:29:38,400 porque realmente 455 00:29:38,400 --> 00:29:40,400 es HDD, es muy sencillo. 456 00:29:40,400 --> 00:29:42,400 Pero porque quiero una vez pasar 457 00:29:42,400 --> 00:29:44,400 a modificar algo al tema 458 00:29:44,400 --> 00:29:46,400 más visual. A convertir esto en un 459 00:29:46,400 --> 00:29:48,400 modelo muy más estrecho 460 00:29:48,400 --> 00:29:50,400 un color más 461 00:29:50,400 --> 00:29:52,400 clarito 462 00:29:52,400 --> 00:29:54,400 y que tenga otro aspecto. 463 00:29:54,400 --> 00:29:56,400 Más asembleadamente. Entonces... 464 00:29:58,400 --> 00:30:00,400 Lo he dicho. Vamos a ir a 465 00:30:00,400 --> 00:30:02,400 modificar ya CSS. 466 00:30:06,400 --> 00:30:08,400 Estamos en el fichero config. 467 00:30:08,400 --> 00:30:10,400 Lo tenéis abierto. Entonces ahora 468 00:30:10,400 --> 00:30:12,400 me voy a enseñar... Os hablaba antes 469 00:30:12,400 --> 00:30:14,400 de los... 470 00:30:14,400 --> 00:30:16,400 de los... 471 00:30:16,400 --> 00:30:18,400 de los ficheros que utiliza 472 00:30:18,400 --> 00:30:20,400 montantillas de CSS. 473 00:30:20,400 --> 00:30:22,400 Si abres el config, estos tres ficheros 474 00:30:22,400 --> 00:30:24,400 serán el layout, el color 475 00:30:24,400 --> 00:30:26,400 y el icono. Como estáis abriendo 476 00:30:26,400 --> 00:30:28,400 este fichero es esta parte de CSS 477 00:30:28,400 --> 00:30:30,400 que os he señalado. 478 00:30:30,400 --> 00:30:32,400 Estas son las montantillas que utiliza. 479 00:30:32,400 --> 00:30:34,400 Como os he dicho, en cada montantilla 480 00:30:34,400 --> 00:30:36,400 van a ser varios. Lo que vamos a hacer es añadir 481 00:30:36,400 --> 00:30:38,400 un fichero más 482 00:30:38,400 --> 00:30:40,400 que será el que nosotros utilizaremos para modificar. 483 00:30:40,400 --> 00:30:42,400 Entonces aquí, justo detrás 484 00:30:42,400 --> 00:30:44,400 tenéis que poner el apostrofe 485 00:30:44,400 --> 00:30:46,400 coma 486 00:30:46,400 --> 00:30:48,400 y entre... vale... 487 00:30:48,400 --> 00:30:50,400 y entre 488 00:30:50,400 --> 00:30:52,400 apostrofes 489 00:30:52,400 --> 00:30:54,400 el fichero, pues vamos a 490 00:30:54,400 --> 00:30:56,400 añadir 491 00:30:56,400 --> 00:30:58,400 y guardar. 492 00:31:10,400 --> 00:31:12,400 Entonces vamos a la 493 00:31:12,400 --> 00:31:14,400 carpeta 494 00:31:14,400 --> 00:31:16,400 a la 495 00:31:16,400 --> 00:31:18,400 de nuestro tema gráfico y creamos 496 00:31:18,400 --> 00:31:20,400 un fichero nuevo 497 00:31:20,400 --> 00:31:22,400 de esto. 498 00:31:22,400 --> 00:31:24,400 Esto lo tendríamos que llamar 499 00:31:24,400 --> 00:31:26,400 10.css 500 00:31:32,400 --> 00:31:34,400 Vale. Finalmente tenemos 501 00:31:34,400 --> 00:31:36,400 un fichero. 502 00:31:36,400 --> 00:31:38,400 Al existir, ahora si, recargamos 503 00:31:38,400 --> 00:31:40,400 nuestro model 504 00:31:40,400 --> 00:31:42,400 nos encontramos 505 00:31:42,400 --> 00:31:44,400 con un icono cargada, pero como está el nuevo icono cargada 506 00:31:44,400 --> 00:31:46,400 vamos a empezar a añadirle 507 00:31:46,400 --> 00:31:48,400 modificaciones a nuestro model. 508 00:31:48,400 --> 00:31:50,400 Vamos a empezar haciéndolo un poco estrechito. 509 00:31:50,400 --> 00:31:52,400 El código que os voy a 510 00:31:52,400 --> 00:31:54,400 basar y todo lo que os estoy diciendo de 511 00:31:54,400 --> 00:31:56,400 CSS y un poco 512 00:31:56,400 --> 00:31:58,400 parámetros en concreto que estoy 513 00:31:58,400 --> 00:32:00,400 escribiendo en 514 00:32:00,400 --> 00:32:02,400 cada apartado, lo encontráis 515 00:32:02,400 --> 00:32:04,400 dentro de los... 516 00:32:04,400 --> 00:32:06,400 del material para el 517 00:32:06,400 --> 00:32:08,400 taller 518 00:32:08,400 --> 00:32:10,400 aquí está. 519 00:32:10,400 --> 00:32:12,400 El material para el taller lo encontraréis 520 00:32:12,400 --> 00:32:14,400 aquí. 521 00:32:14,400 --> 00:32:16,400 El fichero es para la raíz que se llama 522 00:32:16,400 --> 00:32:18,400 fw, que se pone manual, a 523 00:32:18,400 --> 00:32:20,400 mut10.txt 524 00:32:20,400 --> 00:32:22,400 Ahí encontráis todos los códigos 525 00:32:22,400 --> 00:32:24,400 que ahora os voy a ir 526 00:32:24,400 --> 00:32:26,400 colocando y vosotros qué podéis ir haciendo. 527 00:32:26,400 --> 00:32:28,400 Si tenéis cualquier duda sobre CSS 528 00:32:28,400 --> 00:32:30,400 yo iré explicando un poco qué es cada uno 529 00:32:30,400 --> 00:32:32,400 pero si me preguntáis 530 00:32:32,400 --> 00:32:34,400 os voy a ir diciendo. 531 00:32:34,400 --> 00:32:36,400 Vale. Entonces aquí 532 00:32:36,400 --> 00:32:38,400 vemos esta sección 533 00:32:40,400 --> 00:32:42,400 y esta 534 00:32:42,400 --> 00:32:44,400 y esta. 535 00:32:46,400 --> 00:32:48,400 Vale. 536 00:32:48,400 --> 00:32:50,400 Se va enlazando... 537 00:32:52,400 --> 00:32:54,400 Vale. 538 00:32:54,400 --> 00:32:56,400 Estos son mis chuletas. 539 00:32:56,400 --> 00:32:58,400 Es que lo he colocado para que lo veáis 540 00:32:58,400 --> 00:33:00,400 porque así vosotros tendríais que ver 541 00:33:00,400 --> 00:33:02,400 que tenéis todo lo que os estoy 542 00:33:02,400 --> 00:33:04,400 explicando. Entonces aquí estamos. 543 00:33:04,400 --> 00:33:06,400 Vamos a calinear 544 00:33:06,400 --> 00:33:08,400 vamos a centrar 545 00:33:08,400 --> 00:33:10,400 el... 546 00:33:10,400 --> 00:33:12,400 el tema gráfico. 547 00:33:12,400 --> 00:33:14,400 En el ordenador 548 00:33:14,400 --> 00:33:16,400 está todo este documento 549 00:33:16,400 --> 00:33:18,400 de este fichero de texto lo vais mirando vosotros 550 00:33:18,400 --> 00:33:20,400 y vais copiando lo que necesitéis. 551 00:33:20,400 --> 00:33:22,400 Yo luego os lo iré diciendo. 552 00:33:22,400 --> 00:33:24,400 Vale. Vamos a centrarlo. 553 00:33:24,400 --> 00:33:26,400 Para centrarlo hay una serie de códigos 554 00:33:26,400 --> 00:33:28,400 que lo que tenemos que hacer es 555 00:33:28,400 --> 00:33:30,400 en una de las capas que es la body 556 00:33:30,400 --> 00:33:32,400 que es la principal donde está todo 557 00:33:32,400 --> 00:33:34,400 tenemos que centrar 558 00:33:34,400 --> 00:33:36,400 centrar el mix. 559 00:33:36,400 --> 00:33:38,400 Porque luego el texto de página ya tiene 560 00:33:38,400 --> 00:33:40,400 su centrado. Y a partir de ahí 561 00:33:40,400 --> 00:33:42,400 pues da un ancho 562 00:33:42,400 --> 00:33:44,400 y un ancho de margen 563 00:33:44,400 --> 00:33:46,400 y da un poco de escribir. Esto lo que os voy a decir 564 00:33:46,400 --> 00:33:48,400 es que tenéis que apartar todo de aquí. 565 00:33:48,400 --> 00:33:50,400 Se pone body y el page. 566 00:33:50,400 --> 00:33:52,400 Vais a apartar aquí 567 00:33:52,400 --> 00:33:54,400 lo que hace pues eso. 568 00:33:54,400 --> 00:33:56,400 Se centra el texto en el body 569 00:33:56,400 --> 00:33:58,400 y la capa page. 570 00:33:58,400 --> 00:34:00,400 Se añade el ancho 571 00:34:00,400 --> 00:34:02,400 y se lo pone a cero. 572 00:34:02,400 --> 00:34:04,400 Muchas veces nos encontramos 573 00:34:04,400 --> 00:34:06,400 porque si este margen no lo puse a cero 574 00:34:06,400 --> 00:34:08,400 lo que hace es 575 00:34:08,400 --> 00:34:10,400 el borde y lo he 576 00:34:10,400 --> 00:34:12,400 puesto a un píxel 577 00:34:12,400 --> 00:34:14,400 con un borde. Ahora mismo aquí no hay 578 00:34:14,400 --> 00:34:16,400 ningún borde. Se ha centrado de todo. 579 00:34:16,400 --> 00:34:18,400 Pues ese borde se añade poniéndolo aquí. 580 00:34:18,400 --> 00:34:20,400 Ahora veréis la diferencia. 581 00:34:20,400 --> 00:34:22,400 Vamos a copiar este texto y lo vamos a poner 582 00:34:22,400 --> 00:34:24,400 en el otro que enseguida. 583 00:34:26,400 --> 00:34:28,400 Guardamos. 584 00:34:28,400 --> 00:34:30,400 Lo guardamos. 585 00:34:38,400 --> 00:34:40,400 Se ha centrado. Por la resolución 586 00:34:40,400 --> 00:34:42,400 no se ha centrado demasiado. 587 00:34:42,400 --> 00:34:44,400 Si utilizamos una resolución 588 00:34:44,400 --> 00:34:46,400 más grande, más potente 589 00:34:46,400 --> 00:34:48,400 notamos que se centra. 590 00:34:50,400 --> 00:34:52,400 ¿Sí? 591 00:34:52,400 --> 00:34:54,400 Si veis 592 00:34:54,400 --> 00:34:56,400 que hay algo de marco a todo alrededor 593 00:34:56,400 --> 00:34:58,400 para diferenciar. Cuando utilizamos 594 00:34:58,400 --> 00:35:00,400 cuando utilizamos resolución más grande 595 00:35:00,400 --> 00:35:02,400 se nos centra 596 00:35:02,400 --> 00:35:04,400 en la pantalla, tenemos un margen 597 00:35:04,400 --> 00:35:06,400 donde nos va a centrar todo. 598 00:35:06,400 --> 00:35:08,400 Vale. 599 00:35:08,400 --> 00:35:10,400 Pues estas son las modificaciones 600 00:35:10,400 --> 00:35:12,400 que si conocéis, luego os daré 601 00:35:12,400 --> 00:35:14,400 toda una serie de recursos 602 00:35:14,400 --> 00:35:16,400 que podéis utilizar para 603 00:35:16,400 --> 00:35:18,400 modificar 604 00:35:18,400 --> 00:35:20,400 CSS. 605 00:35:20,400 --> 00:35:22,400 Con toda la resta de modificaciones 606 00:35:22,400 --> 00:35:24,400 no hay problema. 607 00:35:24,400 --> 00:35:26,400 Ya os he pasado de lo que se centra. 608 00:35:26,400 --> 00:35:28,400 A partir de aquí, vamos a jugar. 609 00:35:30,400 --> 00:35:32,400 ¿Veis? Aquí tenemos un content. 610 00:35:32,400 --> 00:35:34,400 Vale. Aquí tenemos unos 611 00:35:34,400 --> 00:35:36,400 márgenes, vertical. 612 00:35:38,400 --> 00:35:40,400 No tengo que 613 00:35:40,400 --> 00:35:42,400 no os puedo enseñar lo que os he dado. 614 00:35:42,400 --> 00:35:44,400 Tengo una aplicación 615 00:35:44,400 --> 00:35:46,400 que os la he lanzado 616 00:35:46,400 --> 00:35:48,400 en el taller. 617 00:35:48,400 --> 00:35:50,400 Es un plugin para Firefox. 618 00:35:50,400 --> 00:35:52,400 Que a lo mejor muchos lo conocéis. 619 00:35:52,400 --> 00:35:54,400 Esta pared de abajo 620 00:35:54,400 --> 00:35:56,400 se llama Firefox. 621 00:35:56,400 --> 00:35:58,400 No sé si lo conocéis. ¿Alguno? 622 00:35:58,400 --> 00:36:00,400 Si en la parte más técnica 623 00:36:00,400 --> 00:36:02,400 solamente lo conozcáis. 624 00:36:02,400 --> 00:36:04,400 Vale. 625 00:36:06,400 --> 00:36:08,400 Pues este 626 00:36:08,400 --> 00:36:10,400 plugin lo que hace es que puedas 627 00:36:10,400 --> 00:36:12,400 navegar en directo mientras que 628 00:36:12,400 --> 00:36:14,400 tienes la página web por la parte de abajo 629 00:36:14,400 --> 00:36:16,400 sobre el código fuente. 630 00:36:16,400 --> 00:36:18,400 Y entonces va abriendo todas las capas 631 00:36:18,400 --> 00:36:20,400 que hay en la página. 632 00:36:20,400 --> 00:36:22,400 Lo digo más bien a porqué. 633 00:36:22,400 --> 00:36:24,400 Cuando 634 00:36:24,400 --> 00:36:26,400 os enseño toda esta 635 00:36:26,400 --> 00:36:28,400 modificación de 636 00:36:28,400 --> 00:36:30,400 código, vosotros diréis 637 00:36:30,400 --> 00:36:32,400 ¿qué es el código? ¿Qué es el page? 638 00:36:32,400 --> 00:36:34,400 A partir de lo técnico 639 00:36:34,400 --> 00:36:36,400 dirán. Pues esto 640 00:36:36,400 --> 00:36:38,400 cuando vas con Firebook navegando 641 00:36:38,400 --> 00:36:40,400 por la página, constantemente te está 642 00:36:40,400 --> 00:36:42,400 diciendo dónde estás. 643 00:36:42,400 --> 00:36:44,400 Este recuadro de aquí, que os enseño 644 00:36:44,400 --> 00:36:46,400 que lo hago yo, es esta sección. 645 00:36:46,400 --> 00:36:48,400 Y ves abajo, a la izquierda 646 00:36:48,400 --> 00:36:50,400 el código fuente, ahora lo veréis. 647 00:36:50,400 --> 00:36:52,400 Y a la derecha todos los estilos. Incluso por los estilos podéis ver 648 00:36:52,400 --> 00:36:54,400 los márgenes que hay. 649 00:36:54,400 --> 00:36:56,400 Y entonces podéis jugar mucho 650 00:36:56,400 --> 00:36:58,400 cómo distribuir la página. 651 00:36:58,400 --> 00:37:00,400 A ver si lo tengo 652 00:37:00,400 --> 00:37:02,400 ya instalado. 653 00:37:12,400 --> 00:37:14,400 Hay que regirar 654 00:37:14,400 --> 00:37:16,400 el Firebox. 655 00:37:16,400 --> 00:37:18,400 Si tenéis alguna duda, no podéis decirnos nada. 656 00:37:18,400 --> 00:37:20,400 ¿Cómo se activa esto? 657 00:37:20,400 --> 00:37:22,400 ¿Cómo se activa? 658 00:37:22,400 --> 00:37:24,400 Lo veréis abajo a la derecha. 659 00:37:24,400 --> 00:37:26,400 Aparecerá el iconico este de 660 00:37:26,400 --> 00:37:28,400 servicio. 661 00:37:28,400 --> 00:37:30,400 Y ahora lo vamos. 662 00:37:30,400 --> 00:37:32,400 Aparece aquí a la derecha. 663 00:37:38,400 --> 00:37:40,400 Estamos en 664 00:37:40,400 --> 00:37:42,400 Moodle.net 665 00:37:42,400 --> 00:37:44,400 Esto lo estoy haciendo por la 666 00:37:44,400 --> 00:37:46,400 página web. 667 00:37:46,400 --> 00:37:48,400 Tenemos esta página web 668 00:37:48,400 --> 00:37:50,400 y tenemos su código fuente. 669 00:37:50,400 --> 00:37:52,400 Pero la idea esta es que 670 00:37:52,400 --> 00:37:54,400 si hagamos inspeccionar 671 00:37:54,400 --> 00:37:56,400 es este botoncito de aquí. 672 00:37:58,400 --> 00:38:00,400 Si muevamos el ratón 673 00:38:00,400 --> 00:38:02,400 por la página, nos está diciendo dónde estamos. 674 00:38:02,400 --> 00:38:04,400 Entonces, si subimos 675 00:38:04,400 --> 00:38:06,400 para arriba, 676 00:38:06,400 --> 00:38:08,400 vemos que esto es el código. 677 00:38:08,400 --> 00:38:10,400 Este cuadro de aquí, que es toda la página, 678 00:38:10,400 --> 00:38:12,400 es el código. 679 00:38:12,400 --> 00:38:14,400 Me pone bonito. 680 00:38:14,400 --> 00:38:16,400 Aquí tenemos los hostiles. 681 00:38:16,400 --> 00:38:18,400 Entre ellos, 682 00:38:18,400 --> 00:38:20,400 aquí no, porque no es la modificación 683 00:38:20,400 --> 00:38:22,400 que estamos haciendo. Si lo instalamos 684 00:38:22,400 --> 00:38:24,400 en nuestra máquina virtual, 685 00:38:24,400 --> 00:38:26,400 veríamos la modificación que estamos 686 00:38:26,400 --> 00:38:28,400 haciendo en directo. 687 00:38:28,400 --> 00:38:30,400 Aquí nos encontramos con un background color 688 00:38:30,400 --> 00:38:32,400 que está en blanco 689 00:38:32,400 --> 00:38:34,400 y lo mejor del Firebox es esto. 690 00:38:34,400 --> 00:38:36,400 Podemos editar 691 00:38:36,400 --> 00:38:38,400 en lo que estamos viendo. 692 00:38:42,400 --> 00:38:44,400 Podemos editar 693 00:38:44,400 --> 00:38:46,400 en lo que estamos viendo. 694 00:38:46,400 --> 00:38:48,400 Entonces aquí, por ejemplo, 695 00:38:48,400 --> 00:38:50,400 podemos poner 696 00:38:50,400 --> 00:38:52,400 otro botón. 697 00:38:54,400 --> 00:38:56,400 Así de rápido. 698 00:38:56,400 --> 00:38:58,400 Esto no se está guardando en ningún sitio. 699 00:38:58,400 --> 00:39:00,400 Esto se está viendo solo en mi navegador, 700 00:39:00,400 --> 00:39:02,400 en mi instancia, porque yo con Firebox lo estoy modificando. 701 00:39:02,400 --> 00:39:04,400 Pero esto, una vez 702 00:39:04,400 --> 00:39:06,400 decidimos el cuadro que queremos, lo ponemos aquí 703 00:39:06,400 --> 00:39:08,400 y vemos que funciona, lo llevamos al código. 704 00:39:10,400 --> 00:39:12,400 Por ejemplo, si lo queremos poner 705 00:39:12,400 --> 00:39:14,400 este está blanco, pero en nuestra 706 00:39:14,400 --> 00:39:16,400 máquina virtual no está blanco 707 00:39:16,400 --> 00:39:18,400 el body. 708 00:39:18,400 --> 00:39:20,400 El body lo tenemos 709 00:39:20,400 --> 00:39:22,400 de color gris. 710 00:39:22,400 --> 00:39:24,400 Vamos a ponerlo blanco. 711 00:39:24,400 --> 00:39:26,400 ¿Cómo lo hacemos? 712 00:39:26,400 --> 00:39:28,400 Cogemos 713 00:39:28,400 --> 00:39:30,400 el 714 00:39:32,400 --> 00:39:34,400 body 715 00:39:34,400 --> 00:39:36,400 de textura. 716 00:39:36,400 --> 00:39:38,400 El body, 717 00:39:38,400 --> 00:39:40,400 el corchet de poner 718 00:39:40,400 --> 00:39:42,400 background color y el color. 719 00:39:42,400 --> 00:39:44,400 Este background color y el color, lo cogemos, 720 00:39:44,400 --> 00:39:46,400 lo copiamos 721 00:39:46,400 --> 00:39:48,400 y nos venimos a nuestro 722 00:39:48,400 --> 00:39:50,400 fichering 723 00:39:50,400 --> 00:39:52,400 de 724 00:39:52,400 --> 00:39:54,400 mood10 y aquí 725 00:39:54,400 --> 00:39:56,400 copiamos. 726 00:39:58,400 --> 00:40:00,400 El color. 727 00:40:00,400 --> 00:40:02,400 Y en este caso lo vamos a poner blanco. 728 00:40:02,400 --> 00:40:04,400 El blanco en 729 00:40:04,400 --> 00:40:06,400 el CSS 730 00:40:06,400 --> 00:40:08,400 se tiene que poner, bueno, 731 00:40:08,400 --> 00:40:10,400 la idea es ponernos un hexadecimal 732 00:40:10,400 --> 00:40:12,400 que es 6 hexes. 733 00:40:12,400 --> 00:40:14,400 href, href, href, href. 734 00:40:14,400 --> 00:40:16,400 Siempre cerramos con un picoma. 735 00:40:16,400 --> 00:40:18,400 Estas son las partes de la programación que siempre son 736 00:40:18,400 --> 00:40:20,400 así. 737 00:40:20,400 --> 00:40:22,400 Y entonces con esto, 738 00:40:22,400 --> 00:40:24,400 si vamos a nuestra instancia, 739 00:40:26,400 --> 00:40:28,400 ¿qué pasa aquí? Nos va a salir blanco 740 00:40:28,400 --> 00:40:30,400 el color de para afuera. 741 00:40:30,400 --> 00:40:32,400 Vamos a hacer que se vea más. 742 00:40:32,400 --> 00:40:34,400 Yo lo voy a dejar en blanco, yo lo voy a dejar en rojo. 743 00:40:44,400 --> 00:40:46,400 Vamos a ver qué color nos sale. 744 00:40:50,400 --> 00:40:52,400 Gris. 745 00:40:52,400 --> 00:40:54,400 Vale, se nos ha puesto todo en gris. 746 00:40:54,400 --> 00:40:56,400 Gris. 747 00:40:56,400 --> 00:40:58,400 Vamos a ver por qué. 748 00:40:58,400 --> 00:41:00,400 Vamos a ver por qué. 749 00:41:00,400 --> 00:41:02,400 Con el filebook instalado, 750 00:41:02,400 --> 00:41:04,400 ¿qué nos está pasando? Que este tiene 751 00:41:04,400 --> 00:41:06,400 un color transparente. 752 00:41:06,400 --> 00:41:08,400 Lo digo describiendo. 753 00:41:08,400 --> 00:41:10,400 ¿Vale? 754 00:41:10,400 --> 00:41:12,400 Lo que hay dentro del cuadro es el gris. 755 00:41:12,400 --> 00:41:14,400 El gris no tiene otro color. 756 00:41:14,400 --> 00:41:16,400 El de base aparece transparente. 757 00:41:16,400 --> 00:41:18,400 Vamos a ponerle un color diferente. 758 00:41:18,400 --> 00:41:20,400 Volvemos. 759 00:41:20,400 --> 00:41:22,400 Esto es el trabajo 760 00:41:22,400 --> 00:41:24,400 y el tema gráfico es, lo veo, 761 00:41:24,400 --> 00:41:26,400 me gusta, no me gusta, lo modifico. 762 00:41:26,400 --> 00:41:28,400 Veo dónde va a estar el error 763 00:41:28,400 --> 00:41:30,400 y lo voy a modificar. 764 00:41:52,400 --> 00:41:54,400 Como veis, 765 00:41:54,400 --> 00:41:56,400 como este tenía, 766 00:41:56,400 --> 00:41:58,400 lo que estamos haciendo al añadir 767 00:41:58,400 --> 00:42:00,400 un fichero de más, este fichero 768 00:42:00,400 --> 00:42:02,400 CSS que estamos creando, 769 00:42:02,400 --> 00:42:04,400 es que se están cargando 770 00:42:04,400 --> 00:42:06,400 todos los estilos de forma igual 771 00:42:06,400 --> 00:42:08,400 y el último fichero, 772 00:42:08,400 --> 00:42:10,400 que es el que hemos puesto nosotros, 773 00:42:10,400 --> 00:42:12,400 lo cargará después. ¿Qué pasa? Que arrastramos 774 00:42:12,400 --> 00:42:14,400 todos los estilos anteriores. 775 00:42:14,400 --> 00:42:16,400 Cuando trabajas en esos ficheros, 776 00:42:16,400 --> 00:42:18,400 lo que haces es que vas a buscar 777 00:42:18,400 --> 00:42:20,400 dónde se está especificando el color, 778 00:42:20,400 --> 00:42:22,400 dónde está este texto que os enseñaba 779 00:42:22,400 --> 00:42:24,400 de body o de page, 780 00:42:24,400 --> 00:42:26,400 lo buscas y lo modificas. 781 00:42:26,400 --> 00:42:28,400 Entonces ya no cargas un color 782 00:42:28,400 --> 00:42:30,400 y luego cargas otro. El tema gráfico se va cargando 783 00:42:30,400 --> 00:42:32,400 así. Entonces, 784 00:42:32,400 --> 00:42:34,400 vas haciendo. Por eso 785 00:42:34,400 --> 00:42:36,400 hemos cargado un 786 00:42:36,400 --> 00:42:38,400 fichero, o sea, un color que generalmente 787 00:42:38,400 --> 00:42:40,400 nos estaba haciendo transparencia 788 00:42:40,400 --> 00:42:42,400 con otro. 789 00:42:42,400 --> 00:42:44,400 Con todo esto, podemos ir 790 00:42:44,400 --> 00:42:46,400 viendo más modificaciones 791 00:42:46,400 --> 00:42:48,400 que os he pasado en el 792 00:42:48,400 --> 00:42:50,400 fichero. 793 00:42:56,400 --> 00:42:58,400 Tenemos... 794 00:42:58,400 --> 00:43:00,400 el content. 795 00:43:00,400 --> 00:43:02,400 Por ejemplo, 796 00:43:02,400 --> 00:43:04,400 content. ¿Qué es content? 797 00:43:04,400 --> 00:43:06,400 ¿Qué es content? 798 00:43:06,400 --> 00:43:08,400 La ordena que está liberada. 799 00:43:08,400 --> 00:43:10,400 ¿Qué es content? 800 00:43:10,400 --> 00:43:12,400 Vamos a buscarlo. 801 00:43:14,400 --> 00:43:16,400 Vamos aquí. 802 00:43:16,400 --> 00:43:18,400 Vamos a Palo. 803 00:43:18,400 --> 00:43:20,400 Y venimos, pues, moviendo un poco 804 00:43:20,400 --> 00:43:22,400 por la... 805 00:43:22,400 --> 00:43:24,400 ... 806 00:43:24,400 --> 00:43:26,400 ... 807 00:43:26,400 --> 00:43:28,400 ... 808 00:43:28,400 --> 00:43:30,400 ... 809 00:43:30,400 --> 00:43:32,400 ... 810 00:43:32,400 --> 00:43:34,400 ... 811 00:43:34,400 --> 00:43:36,400 ... 812 00:43:36,400 --> 00:43:38,400 ... 813 00:43:38,400 --> 00:43:40,400 ... 814 00:43:40,400 --> 00:43:42,400 ... 815 00:43:42,400 --> 00:43:44,400 ... 816 00:43:44,400 --> 00:43:46,400 ... 817 00:43:46,400 --> 00:43:48,400 ... 818 00:43:48,400 --> 00:43:50,400 ... 819 00:43:50,400 --> 00:43:52,400 ... 820 00:43:52,400 --> 00:43:54,400 ... 821 00:43:54,400 --> 00:43:56,400 ... 822 00:43:56,400 --> 00:43:58,400 ... 823 00:43:58,400 --> 00:44:00,400 ... 824 00:44:00,400 --> 00:44:02,400 ... 825 00:44:02,400 --> 00:44:04,400 ... 826 00:44:04,400 --> 00:44:06,400 ... 827 00:44:06,400 --> 00:44:08,400 ... 828 00:44:08,400 --> 00:44:10,400 ... 829 00:44:10,400 --> 00:44:12,400 ... 830 00:44:12,400 --> 00:44:14,400 ... 831 00:44:14,400 --> 00:44:16,400 ... 832 00:44:16,400 --> 00:44:18,400 ... 833 00:44:18,400 --> 00:44:20,400 ... 834 00:44:20,400 --> 00:44:22,400 .... 835 00:44:22,400 --> 00:44:24,400 ... 836 00:44:24,400 --> 00:44:26,400 ... 837 00:44:26,400 --> 00:44:28,400 ... 838 00:44:28,400 --> 00:44:30,400 ... 839 00:44:30,400 --> 00:44:32,400 ... 840 00:44:32,400 --> 00:44:34,400 ... 841 00:44:34,400 --> 00:44:36,400 ... 842 00:44:36,400 --> 00:44:38,400 ... 843 00:44:38,400 --> 00:44:40,400 ... 844 00:44:40,400 --> 00:44:42,400 ... 845 00:44:42,400 --> 00:44:44,400 ... 846 00:44:44,400 --> 00:44:46,400 ... 847 00:44:46,400 --> 00:44:48,400 ... 848 00:44:48,400 --> 00:44:50,400 ... 849 00:44:50,400 --> 00:44:52,400 ... 850 00:44:52,400 --> 00:44:54,400 ... 851 00:44:54,400 --> 00:44:56,400 ... 852 00:44:56,400 --> 00:44:58,400 ... 853 00:44:58,400 --> 00:45:00,400 ... 854 00:45:00,400 --> 00:45:02,400 ... 855 00:45:02,400 --> 00:45:04,400 ... 856 00:45:04,400 --> 00:45:06,400 ... 857 00:45:06,400 --> 00:45:08,400 ...