Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Plantillas (themes) en Moodle

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 30 de noviembre de 2011 por EducaMadrid

685 visualizaciones

Taller práctico sobre diseño de temas y “skins”, su definición, su configuración y su utilización.

Más información Transcripción

Descargar la transcripción

Hola, soy Daniel Breña y bueno, ahora comenzaremos el taller de temas gráficos y bueno, simplemente 00:00:00
decir que vengo a enseñaros a hacer un tema gráfico, pues vosotros mismos. 00:00:23
Muchas gracias, espero que os guste. 00:00:29
Buenas tardes, no sé si ven a alguien más, vamos a ir empezando. 00:00:37
Soy Daniel Breña, vengo del Parc Nacional, de aquí de España. 00:00:40
Soy consultor, trabajo con temas gráficos, trabajo haciendo desarrollo, módulos, bloques. 00:00:45
Bueno, yo aquí quería enseñaros un poco a hacer, pues, temas gráficos con modem. 00:00:54
No sé la experiencia que tenéis, ahora os preguntaré para ver un poco donde estamos, 00:00:58
en qué nivel y os iré dando pautas de todo lo que vayamos haciendo. 00:01:04
Hay un curso gráfico que os voy a dejar contestar para que vayáis viendo todo. 00:01:09
Al mismo que ahora yo, un poco detrás, pues incluso en casa lo que vais a hacer mañana, 00:01:14
esta tarde, lo podéis ir viendo. 00:01:18
Empezamos, tenemos un curso que es el, si vais a la portada de la web de Smooth, 00:01:21
más o menos lo habréis visto, si vais a la portada de la web de Smooth este año, 00:01:28
tenemos, estará un poco la versión descargada, a la izquierda con el recurso de talleres, 00:01:32
el enlace, lo de los bloques laterales, y encontraréis el enlace al recurso de talleres 00:01:39
que es este curso que os estamos viendo. 00:01:44
Y aquí es que vais a tallar bien, hace más, o sea, para que veáis cuál es la primera pantalla. 00:01:46
Una vez que hayáis visto, en el Firefox tenéis aquí acceso, si tenéis el model 1.9 local, 00:01:53
este es el que tocaremos y modificaremos. 00:01:58
También tenéis acceso al model 1.2.10 y este aquí no lo tenéis, tenemos estos dos. 00:02:02
Model 1.9 es el que tocaremos. 00:02:08
Como los teoréficos son similares, solo hay algún momento que no sabemos dónde estamos. 00:02:10
Lo compiléis, lo miramos y vale. 00:02:15
Mientras que vamos acabando todo esto, sin curso. 00:02:19
Pero bueno, vamos a empezar. 00:02:22
Ahora, si ya todos tenéis abierto el navegador con vuestros datos, o sea, con vuestro model local, 00:02:24
ahora bien, una idea que hagáis. 00:02:31
La web de la model 1.2.10 y podéis apagar a este curso que os decía al principio. 00:02:33
¿Cómo lo entrenamos? 00:02:39
Bueno, estamos aquí en la web, hace grados, pero es el curso. 00:02:42
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. 00:02:45
Es vuestro navegador de la manera en que todo aparece. 00:02:51
Model 1.2.10. 00:02:54
Entonces, a la izquierda, justificaremos a sacarlo. 00:02:55
Os vale la atención. 00:03:00
Bueno, lo que vamos a hacer es bajarnos los datos del curso que os decía al principio. 00:03:12
Y cuando os caigan los datos en local, pues ya estaríamos trabajando sobre los datos. 00:03:19
Tenéis aquí, el curso de talleres. 00:03:26
En el bloque de la izquierda de la model 1. 00:03:28
En el curso de talleres. 00:03:32
Entonces, enlazando aquí. 00:03:34
Vale, ¿están interpretados? 00:03:41
Este es todo lo que vamos a hacer. 00:03:47
Vale, estando en logado sigue el acceso. 00:03:59
Entonces, aquí a la izquierda, que vosotros no os podéis ver en la pantalla, tenéis talleres y efectos. 00:04:01
Pues si clicáis os va a aparecer la pantalla a la cual habéis visto. 00:04:06
Vale, descargaros el material para el taller. 00:04:11
Y de partir de aquí empezaremos. 00:04:15
Os empezaré, os iré explicando cómo funciona la estructura de empleos de Moodle en el precio de talleres. 00:04:17
Moodle no es más que un sistema de archivos, como los sprites. 00:04:25
Entonces, dentro del sistema de archivos es muy modular. 00:04:32
Podemos utilizar tanto módulos, como bloques, como temas. 00:04:35
Añadir una cartera con unos 3 formatos aquí dentro. 00:04:38
Y tenemos un tema de archivos nuevo, un bloque nuevo, etc. 00:04:41
Con los que vamos a hacerlo es muy sencillo. 00:04:45
Lo veréis. 00:04:47
Una vez que os hayáis basado esto, os voy a enseñar... 00:04:51
Vale. 00:04:57
Si os fijáis aquí, yo me basaré en este taller. 00:04:58
Un curso que he subido, que lo podéis ver también, que es este. 00:05:03
Y os iré enseñando todas las características de Moodle y os voy a enseñar. 00:05:07
Vosotros lo podéis ir viendo en la pantalla, como usualmente lo hacéis. 00:05:11
Y hagáis lo que estáis haciendo. 00:05:14
Como sois activistadores, vuestro Moodle de local, que os he enseñado antes, todo esto lo vais a poder ver. 00:05:17
Esa es la administración de Moodle. 00:05:25
Yo lo puesto aquí separado con una explicación. 00:05:27
Vosotros lo tendréis que ver en el bloque de la derecha, o sea, izquierdo. 00:05:30
Lo vamos a ver aquí, seguida. 00:05:35
En el blanco, vuestra máquina local, pensando como administrador, que tenéis aquí al mismo índice. 00:05:38
Tenéis el acceso total a la máquina. 00:05:54
Entonces, si os fijáis aquí, tenéis el menú que os interesa para vosotros, que es apariencia. 00:05:57
Tenemos en apariencia, hay un subdirectorio, es temas. 00:06:07
Aquí administramos los que tenemos en local listado en la plataforma Moodle. 00:06:11
Administramos desde aquí los temas gráficos. 00:06:20
Entonces, en ajustes, tenemos ajustes de temas y subdirectorios de temas. 00:06:22
En este otro curso, os explicaba lo que era cada apartado. 00:06:29
En ajustes de temas, lo que tenemos es seleccionar que rol queremos que vea los temas. 00:06:34
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. 00:06:42
Ahora os lo explico. 00:06:52
Aquí en ambos ajustes de temas, nos encontramos con una serie de permisos. 00:06:53
Una serie de permisos. 00:06:59
Podemos permitir temas por usuario, por curso o por categoría. 00:07:00
Esto hace que, por ejemplo, tengamos este tema gráfico, que es el tema gráfico del MacBook. 00:07:05
Si nosotros hacemos un Permitir temas por categoría, por usuario o por curso, 00:07:12
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, 00:07:17
se puede escoger un tema gráfico. 00:07:25
Por lo tanto, en esos apartados puede haber un diseño diferente al que hay en el campo total. 00:07:27
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. 00:07:34
Esto es una de las partes importantes de cara a administrar de esa manera el entorno gráfico. 00:07:44
Os diría que pongáis Permitir estilos por usuario y por curso. 00:07:52
Porque luego entraremos en el menú y podremos ver que en un curso completo tenemos un tema gráfico. 00:08:00
A lo mejor nos ha orientado a procesores. 00:08:09
Si administrais vuestro propio curso, no lo habréis visto. 00:08:11
Es menos porque desde la administración no lo tiene seleccionado. 00:08:15
Ese es el ajuste de temas. 00:08:21
Y tenemos el selector de temas. 00:08:24
El selector de temas es un menú para seleccionar el tema gráfico al que queremos mostrar en nuestro MacBook. 00:08:27
Lo que muestra es el listado. 00:08:37
Lo que vamos a elegir es ver el tema gráfico. 00:08:40
Y tenemos aquí todos los que se utilizan en un curso básico cuando arrancas tu máquina virtual. 00:08:45
Pero el que tienes es el estándar. 00:09:04
Nosotros vamos a trabajar hoy sobre todo esto. 00:09:08
Tenemos que crear un tema gráfico nuevo. 00:09:11
Voy a ir avanzando sobre la verificación porque así vais viendo a la vez que lo vais haciendo. 00:09:14
Para crear un tema gráfico nuevo y encontrar el listado, tenemos que ir a los ficheros de Google. 00:09:21
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. 00:09:28
Xampp. 00:09:45
Hd2. 00:09:52
Moodle. 00:09:55
Estos son los directores de Moodle que tenemos. 00:09:58
Estos son los directores de Moodle. 00:10:06
Aquí lo que nos interesa es arrancar el tema. 00:10:08
Xampp. 00:10:11
C-H-E-M-P. 00:10:14
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. 00:10:23
Aquí vemos el chamaleon, el goldflower. 00:10:31
Cada carpeta de estas es un tema gráfico diferente. 00:10:36
Dentro del Moodle que tenemos ahí en nuestro lado. 00:10:40
Necesito para crear nuestro propio tema gráfico, vamos a crear un tema que se va a llamar Mood 10. 00:10:43
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, 00:10:50
empezar de cero nos hace perder tiempo. 00:10:58
Vamos a modificar el tema gráfico para crear uno nuevo y diferente. 00:11:01
Entonces la idea es copiar el tema gráfico con manual. 00:11:05
Hacer botón derecho copiar y pegar en la misma carpeta. 00:11:10
Copiar y pegar. 00:11:16
Copiar y pegar. 00:11:24
Y a esto lo vamos a renombrar y lo vamos a llamar Mood 10. 00:11:28
M-O-O-D-10. 00:11:33
En forma vuelta. 00:11:37
¿Vais copiar todos? 00:11:45
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. 00:11:50
Ya tenemos un tema gráfico nuevo en nuestro Moodle. 00:12:07
M-O-O-D-10. 00:12:12
He copiado de forma vuelta. 00:12:19
He hecho la copia y lo he renombrado. 00:12:22
Con esto tenemos un tema diferente. 00:12:24
Entonces teniendo este tema, como ésta va a ser el selector de temas para el campus de nuestra aplicación local, lo elegimos. 00:12:27
Es decir, el tema Moodle 10. 00:12:37
Y el entorno gráfico lo cambiamos de la mente. 00:12:39
Esto es un entorno gráfico de forma guay. 00:12:42
Lo único que hemos hecho es renombrarlo para ahora codificarlo. 00:12:45
Dentro de las carpetas de cada tema hay un fichero que es el RIKI que demuestra la información justo después. 00:12:52
Y dentro de la pantalla vamos a aprovechar para hacer la primera modificación del tema gráfico. 00:13:02
La primera modificación del tema gráfico que vamos a hacer es modificar el logo. 00:13:07
El Full Malware, según veis aquí, tiene dos logos. Uno externo y otro interno. 00:13:14
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. 00:13:20
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. 00:13:29
Antes os he dicho que os descargaréis un fichero que es el de... 00:13:37
Es el de material para el taller. 00:13:49
Está aquí, lo ocupáis en este curso y lo encontraráis en el otro lápiz. 00:13:51
En esta carpeta, una vez descargada... 00:13:56
Descomprimís ese fichero y tenemos material para el tema. 00:14:04
Cuando abrís el fichero que os habéis descargado, tenéis una carpeta que se llama Logos, Ejemplos, Full Malware. 00:14:11
Y aquí nos encontramos con dos logos de ambos. 00:14:30
Este es más alargado y más cortito, y este es más alto. 00:14:36
Estos dos ficheros, seleccionándolos y copiándolos. 00:14:47
Y os vais a la carpeta donde teníamos los temas gráficos. 00:14:52
Entramos en la carpeta BUS10 y veis que aquí tenemos un logo en el LogosMod. 00:15:02
Que son los mismos que teníamos. 00:15:07
Pues aquí tenéis y sobreescribís estos dos ficheros. 00:15:09
Pues ahora, tenemos estos ficheros en nuestro tema de atrampo. 00:15:14
¿Cómo lo comprobamos? 00:15:19
Vamos al navegador, a nuestro Google Particular. 00:15:21
Si le damos a Continuar, veremos el resultado. 00:15:30
Este logo es el pequeño. 00:15:38
Si os vais al inicio, este es el inicio. 00:15:50
Y el otro es el donde está... 00:15:56
Si hacéis Ctrl-F5, se le carga la leche. 00:16:07
Ahí, ya. 00:16:12
Creo que me está cargando. 00:16:15
No me da nada. 00:16:21
Sí, cambiad de dos nombres y usad un... 00:16:23
Realizando la pantalla, ahora sí. 00:16:28
En la página principal... 00:16:32
Perdón, soy un poco caro. Esto es la carcha. 00:16:35
Agregando con la carcha y haciendo Ctrl-F5, 00:16:38
en la página principal tenéis el logo grande. 00:16:41
Y en cualquier página interior, en este caso, 00:16:43
en modificaciones, tenemos el pequeño. 00:16:47
¿Qué es una modificación hecha? 00:16:50
Esto es muy sencillo. Esto viene ya con el trabajo de ProgramWide. 00:16:52
Pues ahora, os voy a explicar cómo funciona por dentro 00:16:56
todo lo que es cabecera, cienepáginas, bloques laterales... 00:16:59
Y un poco el contenido de la web, pero desde el diseño gráfico. 00:17:04
Os explicaré un poquito y haré algunas modificaciones 00:17:08
para que este tema gráfico tenga un poco más de forma. 00:17:10
Si no me lleváis siguiendo con temas de CSS, 00:17:14
lo iré haciendo sencillo para que lo vayáis viendo 00:17:18
y si no, está toda la documentación ahí. 00:17:20
Entonces, empezamos. 00:17:23
Si entramos... Yo te voy a hacer desde el curso. 00:17:25
Dentro de cada carpeta, de cada tema gráfico, 00:17:43
nos encontramos con diferentes parches. 00:17:47
Tenemos una configuración, unos estilos, 00:17:50
unos html, imágenes. 00:17:53
Luego continuamos. 00:17:57
Tema de configuración. 00:17:59
Habéis visto que tengo una figura donde contestar. 00:18:01
Tiene unos iconos diferentes a los iconos habituales. 00:18:03
Podéis ver... También podéis hacer... 00:18:08
añadir... pues, diciendo que ya lo has escrito 00:18:12
antes a anteriores a las que se carguen con el tema gráfico. 00:18:15
Podéis modificar las típicas flechitas, 00:18:20
que son un triangulito de un html. 00:18:22
Actualmente esto, en Internet Explorer 6, da problemas. 00:18:24
Puedes cambiarlo por el mayor que queráis. 00:18:26
Lo que se puede hacer es la articulación. 00:18:28
Hay un fichero que se llama config.php 00:18:30
que si lo abrís y veis... 00:18:33
Hay muchas cosas de este tipo. 00:18:35
Más adelante os enseñaré a modificar algunas en concreto 00:18:38
para poner iconos o cambiar alguna de estas partes. 00:18:41
De html nos encontramos dos ficheros, 00:18:45
que son el header y el footer. 00:18:47
Grabando estos ficheros, 00:18:50
vamos a intentar aquí también, 00:18:52
donde tenemos el config, 00:18:54
que era este, que es un config.hp, 00:18:58
y tenemos dos html que son el header y el footer. 00:19:00
Y el footer. 00:19:03
Header y footer son toda la configuración 00:19:05
que cabe. 00:19:08
Esta es la de models. 00:19:09
Son todas las configuraciones de la cabecera del model. 00:19:14
Lo que viene a ser el logo, 00:19:16
la colocación de esto, el color del fondo... 00:19:20
Bueno, el color del fondo no, perdón. 00:19:23
Simplemente es la estructura. 00:19:25
Porque esto que hay aquí, 00:19:27
todo esto, es un html, 00:19:29
es un fichero html. 00:19:31
Luego tenemos otro fichero html que os decía, 00:19:33
que es el footer. 00:19:36
Es este trocito de aquí. 00:19:37
La personalización de estos dos ficheros 00:19:39
hace que esto cambie. 00:19:41
Que cambien en la estructura. 00:19:42
Los colores se cambian con el estilo CSS. 00:19:44
Que son otros ficheros que ahora os enseño. 00:19:47
Que son normalmente, de forma guay, 00:19:49
que es uno de los temas que yo más utilizo 00:19:52
en el trabajo para verificar 00:19:55
porque tenemos tres ficheros diferentes 00:19:58
que son CSS. 00:20:01
Que son color, layout y fonts. 00:20:03
Es lo que me lo dicen. 00:20:07
Este layout estructura la colocación 00:20:09
de cada elemento. 00:20:12
Podéis modificar los colores, 00:20:14
están ahí todos los datos 00:20:16
y podéis modificar las fontes. 00:20:17
Aquí dentro tenéis cada uno de esos elementos. 00:20:19
A partir de ahí, para estructurar 00:20:22
el tema gráfico correctamente, 00:20:23
tenéis que añadir cada uno de los dos parámetros 00:20:25
en el fichero completo. 00:20:27
Nosotros lo haremos diferente. 00:20:30
Lo haremos un poco como una trampa 00:20:31
para hacerlo más sencillo. 00:20:35
No vamos a entrar a verificar este fichero 00:20:36
si lo vamos a crear de nuevo. 00:20:38
Pero esto, la estructura, 00:20:42
y si algún día hacéis un tema gráfico 00:20:44
más robusto, que todo esté bien estructurado, 00:20:47
tenéis que hacerlo dentro de cada uno de estos ficheros. 00:20:50
Por lo demás que encontramos, 00:20:54
digamos aquí, 00:20:56
tenemos imágenes, iconos 00:21:01
y luego hay información. 00:21:03
Imágenes e iconos, 00:21:05
donde nos encontramos, 00:21:07
en VIX. 00:21:09
VIX es la carpeta donde están todos los iconos 00:21:11
del tema gráfico. 00:21:15
Hay algunas imágenes, 00:21:17
pero aquí dentro se estructura 00:21:19
todas las imágenes que hay dentro del curso. 00:21:22
Podéis añadir aquí los iconos. 00:21:26
Esto es algo que haremos ahora. 00:21:27
Luego está el Fabricon 00:21:30
y luego tenemos los globos, etc. 00:21:32
Estos son llamados directamente 00:21:34
desde los CSS. 00:21:36
Y el Fabricon es el conjunto 00:21:38
que hemos siempre hablado. 00:21:40
Con esto tenemos la estructura global. 00:21:42
Falta RigViz. 00:21:45
El RigViz es el fichero que habéis visto 00:21:46
que te explicaba que 00:21:48
cambiamos las imágenes y tal. 00:21:50
Esa es la información del tema gráfico. 00:21:52
Aquí tenemos uno que se llama 00:21:54
Screenshot. 00:21:58
Si queréis hacer una gráfica, 00:22:00
hacéis un fichero en Screenshot 00:22:02
y es el que sale en todo el listado 00:22:07
como hemos visto antes. 00:22:09
Si no hacéis este fichero, 00:22:10
este fichero no está aquí. 00:22:11
Igualmente mudáis la estructura 00:22:13
pequeñito y se ve la imagen. 00:22:15
No es verdad. 00:22:17
Muy bien. 00:22:19
Vamos a empezar a modificar 00:22:21
un poco estos ficheros que os decía. 00:22:23
... 00:22:32
En esos ficheros hay uno de ellos 00:22:47
que es toda la chuleta 00:22:51
de cómo modificar todo esto. 00:22:57
Lo tenemos aquí. 00:22:59
Vamos a empezar modificando 00:23:01
el config.php. 00:23:03
Si podéis abrirlo con un editor de texto 00:23:05
es suficiente para modificar temas gráficos. 00:23:08
Hay gente que utiliza Windows, etc. 00:23:11
Con un editor de texto es sencillo 00:23:14
y sirve perfectamente. 00:23:16
Pues entonces, 00:23:20
para modificar los iconos 00:23:22
tenemos que decirle a Moodle 00:23:27
que cuando cargue este tema gráfico 00:23:29
este tema gráfico no tiene los iconos por defecto. 00:23:31
Esto lo hacemos en el config. 00:23:33
Al editar este fichero con config.php 00:23:35
nos encontramos con un parámetro 00:23:38
que es el de Custom Picks. 00:23:41
Si hacéis una búsqueda 00:23:44
ponéis Custom Picks. 00:23:46
Y nos encontramos con un parámetro 00:23:52
que es Tick Custom Picks. 00:23:54
Actualmente está falso 00:23:56
porque el FormatWrite 00:23:58
utiliza los iconos básicos de Moodle. 00:24:00
Vamos a ponerlo a True. 00:24:02
Pero no actualicéis todavía el Moodle. 00:24:04
Guardamos el fichero. 00:24:08
Vale. 00:24:13
Poniendo el Custom Picks a True 00:24:15
lo que hará será buscar dentro de la carpeta Picks 00:24:17
nuestro tema gráfico. 00:24:20
Por lo tanto, aquí. 00:24:22
Buscará toda una estructura 00:24:24
que utiliza Moodle de iconos. 00:24:26
Ahora nos lo veremos. 00:24:29
Os he pasado del fichero que habéis descargado 00:24:31
tenéis dos estructuras de iconos 00:24:33
que son dos estructuras bien pintadas 00:24:35
y no son las originales 00:24:38
que os podéis descargar de la web. 00:24:41
Nos he pasado un poco modificado 00:24:43
porque los originales que vienen a la web 00:24:45
faltan algunos iconos. 00:24:47
Entonces lo que os vais a acabar haciendo 00:24:49
es buscar los iconos actuales que tengo yo 00:24:51
del Moodle que tengo hechado. 00:24:54
Me copio la carpeta Picks 00:24:56
que está en la red del Moodle 00:24:58
me cojo esos iconos y sobreescribo. 00:25:00
Entonces mantendré siempre todos los iconos 00:25:03
y encima sobreescribiré los nuevos. 00:25:05
Los que voy a modificar. 00:25:08
Los que tienen una visualización 00:25:10
más a fin con mi empresa, mi instituto, mi colección. 00:25:13
Vale. 00:25:17
Entonces vamos al fichero que hemos descargado 00:25:18
el material para temas de la Moodle. 00:25:23
Tenemos dos Picks. 00:25:28
Uno es Picks Tango y el otro es Picks Play. 00:25:30
Podéis utilizar lo que queráis. 00:25:33
Lo descomprimiréis en esta misma carpeta. 00:25:35
Voy a ir siguiendo los iconos. 00:25:38
Esta es la estructura de iconos que utilizamos. 00:25:48
Es un poco caótica. 00:25:52
Conforme vayáis investigando 00:25:54
iréis viendo que... 00:25:56
Este es Martín. 00:25:58
Si le dices Martín, te parece si sale este icono. 00:26:00
Hoy lo hemos visto todos en la conferencia. 00:26:04
Estos iconos están aquí. 00:26:08
Tienen una estructura. 00:26:10
Pero cuando empecéis a investigar 00:26:12
dentro de más que lo queréis 00:26:14
Esta carpetita 00:26:17
que se llama Picks Tango 00:26:19
la copiamos 00:26:23
y lo tenemos a nuestro tema gráfico. 00:26:25
Estamos aquí. 00:26:28
Lo que tenemos que hacer es 00:26:30
la pegamos aquí y la nombramos. 00:26:32
Esta anterior. 00:26:36
Si queréis la podéis eliminar, no pasaría nada. 00:26:38
Yo suelo hacer esto. 00:26:41
Y entonces aquí 00:26:44
dejamos esta cartera con Picks. 00:26:46
Estábamos modificando. 00:26:48
Y si... 00:26:50
Arcadizando la página. 00:26:54
Me gustan los Picks Grey. 00:27:04
Picks Grey no. 00:27:06
Si lo hacéis con Tango 00:27:10
veréis una diferencia bastante más grande. 00:27:12
Picks Grey son los iconos 00:27:16
de Moodle, pero en gris. 00:27:18
La de Tango sí que tiene más 00:27:22
colores, más 00:27:24
iconos diferentes. 00:27:26
¿Como se llama la cartera? 00:27:36
¿Puedo renombrarla? 00:27:38
No, no lo dejas renombrar. 00:27:40
La cartera no. 00:27:42
Es tan uso. 00:27:44
Es tan uso. 00:27:46
Es la de los compilaciones, ¿no? 00:27:48
No puede ser. 00:27:50
Es tan uso. 00:27:52
Si lo hacéis, se lo escribirá. 00:27:54
Pues sí, la carpeta la 00:27:56
si se la ponéis sentada 00:27:58
dentro de la sola se la escribiría. 00:28:00
La hemos escribido. 00:28:02
¿Veis? 00:28:06
Se ve más 00:28:08
un poco... 00:28:10
Ahora, ¿veis? 00:28:26
Se ven aquí estas carpetitas. 00:28:28
Ya cambia un poco. 00:28:30
Si mientras que estamos, mientras que lo queréis crear 00:28:32
si queréis crearos un curso, dentro del curso 00:28:34
tenéis todo el menú de administración, etc. 00:28:36
Y ahí tenéis más iconos también. 00:28:38
Porque aquí se crea un poco 00:28:40
pobre con los iconos 00:28:42
cambiados. Pero si os vais a... 00:28:44
si creáis un curso 00:28:46
eso vamos a hacerlo todos. 00:28:48
Esto es uno que se ve cuando 00:28:50
se lo instala. 00:28:52
Sí, cuando hace la actualización. 00:28:54
Cambiando la carpeta. 00:28:56
Haces Control F5 00:28:58
o se te quita el H. Se borra el H 00:29:00
del navegador y 00:29:02
entonces se vuelve esta diferencia. 00:29:04
Y aquí ya vemos la diferencia con 00:29:18
iconos. 00:29:20
Vale. Voy a empezar a tener 00:29:22
otro aspecto. 00:29:24
Entonces... 00:29:26
Os voy a 00:29:28
explicar un poquito sobre el 00:29:30
Feeder y Footer. No vamos a hacer 00:29:32
modificaciones drásticas 00:29:34
porque realmente 00:29:36
es HDD, es muy sencillo. 00:29:38
Pero porque quiero una vez pasar 00:29:40
a modificar algo al tema 00:29:42
más visual. A convertir esto en un 00:29:44
modelo muy más estrecho 00:29:46
un color más 00:29:48
clarito 00:29:50
y que tenga otro aspecto. 00:29:52
Más asembleadamente. Entonces... 00:29:54
Lo he dicho. Vamos a ir a 00:29:58
modificar ya CSS. 00:30:00
Estamos en el fichero config. 00:30:06
Lo tenéis abierto. Entonces ahora 00:30:08
me voy a enseñar... Os hablaba antes 00:30:10
de los... 00:30:12
de los... 00:30:14
de los ficheros que utiliza 00:30:16
montantillas de CSS. 00:30:18
Si abres el config, estos tres ficheros 00:30:20
serán el layout, el color 00:30:22
y el icono. Como estáis abriendo 00:30:24
este fichero es esta parte de CSS 00:30:26
que os he señalado. 00:30:28
Estas son las montantillas que utiliza. 00:30:30
Como os he dicho, en cada montantilla 00:30:32
van a ser varios. Lo que vamos a hacer es añadir 00:30:34
un fichero más 00:30:36
que será el que nosotros utilizaremos para modificar. 00:30:38
Entonces aquí, justo detrás 00:30:40
tenéis que poner el apostrofe 00:30:42
coma 00:30:44
y entre... vale... 00:30:46
y entre 00:30:48
apostrofes 00:30:50
el fichero, pues vamos a 00:30:52
añadir 00:30:54
y guardar. 00:30:56
Entonces vamos a la 00:31:10
carpeta 00:31:12
a la 00:31:14
de nuestro tema gráfico y creamos 00:31:16
un fichero nuevo 00:31:18
de esto. 00:31:20
Esto lo tendríamos que llamar 00:31:22
10.css 00:31:24
Vale. Finalmente tenemos 00:31:32
un fichero. 00:31:34
Al existir, ahora si, recargamos 00:31:36
nuestro model 00:31:38
nos encontramos 00:31:40
con un icono cargada, pero como está el nuevo icono cargada 00:31:42
vamos a empezar a añadirle 00:31:44
modificaciones a nuestro model. 00:31:46
Vamos a empezar haciéndolo un poco estrechito. 00:31:48
El código que os voy a 00:31:50
basar y todo lo que os estoy diciendo de 00:31:52
CSS y un poco 00:31:54
parámetros en concreto que estoy 00:31:56
escribiendo en 00:31:58
cada apartado, lo encontráis 00:32:00
dentro de los... 00:32:02
del material para el 00:32:04
taller 00:32:06
aquí está. 00:32:08
El material para el taller lo encontraréis 00:32:10
aquí. 00:32:12
El fichero es para la raíz que se llama 00:32:14
fw, que se pone manual, a 00:32:16
mut10.txt 00:32:18
Ahí encontráis todos los códigos 00:32:20
que ahora os voy a ir 00:32:22
colocando y vosotros qué podéis ir haciendo. 00:32:24
Si tenéis cualquier duda sobre CSS 00:32:26
yo iré explicando un poco qué es cada uno 00:32:28
pero si me preguntáis 00:32:30
os voy a ir diciendo. 00:32:32
Vale. Entonces aquí 00:32:34
vemos esta sección 00:32:36
y esta 00:32:40
y esta. 00:32:42
Vale. 00:32:46
Se va enlazando... 00:32:48
Vale. 00:32:52
Estos son mis chuletas. 00:32:54
Es que lo he colocado para que lo veáis 00:32:56
porque así vosotros tendríais que ver 00:32:58
que tenéis todo lo que os estoy 00:33:00
explicando. Entonces aquí estamos. 00:33:02
Vamos a calinear 00:33:04
vamos a centrar 00:33:06
el... 00:33:08
el tema gráfico. 00:33:10
En el ordenador 00:33:12
está todo este documento 00:33:14
de este fichero de texto lo vais mirando vosotros 00:33:16
y vais copiando lo que necesitéis. 00:33:18
Yo luego os lo iré diciendo. 00:33:20
Vale. Vamos a centrarlo. 00:33:22
Para centrarlo hay una serie de códigos 00:33:24
que lo que tenemos que hacer es 00:33:26
en una de las capas que es la body 00:33:28
que es la principal donde está todo 00:33:30
tenemos que centrar 00:33:32
centrar el mix. 00:33:34
Porque luego el texto de página ya tiene 00:33:36
su centrado. Y a partir de ahí 00:33:38
pues da un ancho 00:33:40
y un ancho de margen 00:33:42
y da un poco de escribir. Esto lo que os voy a decir 00:33:44
es que tenéis que apartar todo de aquí. 00:33:46
Se pone body y el page. 00:33:48
Vais a apartar aquí 00:33:50
lo que hace pues eso. 00:33:52
Se centra el texto en el body 00:33:54
y la capa page. 00:33:56
Se añade el ancho 00:33:58
y se lo pone a cero. 00:34:00
Muchas veces nos encontramos 00:34:02
porque si este margen no lo puse a cero 00:34:04
lo que hace es 00:34:06
el borde y lo he 00:34:08
puesto a un píxel 00:34:10
con un borde. Ahora mismo aquí no hay 00:34:12
ningún borde. Se ha centrado de todo. 00:34:14
Pues ese borde se añade poniéndolo aquí. 00:34:16
Ahora veréis la diferencia. 00:34:18
Vamos a copiar este texto y lo vamos a poner 00:34:20
en el otro que enseguida. 00:34:22
Guardamos. 00:34:26
Lo guardamos. 00:34:28
Se ha centrado. Por la resolución 00:34:38
no se ha centrado demasiado. 00:34:40
Si utilizamos una resolución 00:34:42
más grande, más potente 00:34:44
notamos que se centra. 00:34:46
¿Sí? 00:34:50
Si veis 00:34:52
que hay algo de marco a todo alrededor 00:34:54
para diferenciar. Cuando utilizamos 00:34:56
cuando utilizamos resolución más grande 00:34:58
se nos centra 00:35:00
en la pantalla, tenemos un margen 00:35:02
donde nos va a centrar todo. 00:35:04
Vale. 00:35:06
Pues estas son las modificaciones 00:35:08
que si conocéis, luego os daré 00:35:10
toda una serie de recursos 00:35:12
que podéis utilizar para 00:35:14
modificar 00:35:16
CSS. 00:35:18
Con toda la resta de modificaciones 00:35:20
no hay problema. 00:35:22
Ya os he pasado de lo que se centra. 00:35:24
A partir de aquí, vamos a jugar. 00:35:26
¿Veis? Aquí tenemos un content. 00:35:30
Vale. Aquí tenemos unos 00:35:32
márgenes, vertical. 00:35:34
No tengo que 00:35:38
no os puedo enseñar lo que os he dado. 00:35:40
Tengo una aplicación 00:35:42
que os la he lanzado 00:35:44
en el taller. 00:35:46
Es un plugin para Firefox. 00:35:48
Que a lo mejor muchos lo conocéis. 00:35:50
Esta pared de abajo 00:35:52
se llama Firefox. 00:35:54
No sé si lo conocéis. ¿Alguno? 00:35:56
Si en la parte más técnica 00:35:58
solamente lo conozcáis. 00:36:00
Vale. 00:36:02
Pues este 00:36:06
plugin lo que hace es que puedas 00:36:08
navegar en directo mientras que 00:36:10
tienes la página web por la parte de abajo 00:36:12
sobre el código fuente. 00:36:14
Y entonces va abriendo todas las capas 00:36:16
que hay en la página. 00:36:18
Lo digo más bien a porqué. 00:36:20
Cuando 00:36:22
os enseño toda esta 00:36:24
modificación de 00:36:26
código, vosotros diréis 00:36:28
¿qué es el código? ¿Qué es el page? 00:36:30
A partir de lo técnico 00:36:32
dirán. Pues esto 00:36:34
cuando vas con Firebook navegando 00:36:36
por la página, constantemente te está 00:36:38
diciendo dónde estás. 00:36:40
Este recuadro de aquí, que os enseño 00:36:42
que lo hago yo, es esta sección. 00:36:44
Y ves abajo, a la izquierda 00:36:46
el código fuente, ahora lo veréis. 00:36:48
Y a la derecha todos los estilos. Incluso por los estilos podéis ver 00:36:50
los márgenes que hay. 00:36:52
Y entonces podéis jugar mucho 00:36:54
cómo distribuir la página. 00:36:56
A ver si lo tengo 00:36:58
ya instalado. 00:37:00
Hay que regirar 00:37:12
el Firebox. 00:37:14
Si tenéis alguna duda, no podéis decirnos nada. 00:37:16
¿Cómo se activa esto? 00:37:18
¿Cómo se activa? 00:37:20
Lo veréis abajo a la derecha. 00:37:22
Aparecerá el iconico este de 00:37:24
servicio. 00:37:26
Y ahora lo vamos. 00:37:28
Aparece aquí a la derecha. 00:37:30
Estamos en 00:37:38
Moodle.net 00:37:40
Esto lo estoy haciendo por la 00:37:42
página web. 00:37:44
Tenemos esta página web 00:37:46
y tenemos su código fuente. 00:37:48
Pero la idea esta es que 00:37:50
si hagamos inspeccionar 00:37:52
es este botoncito de aquí. 00:37:54
Si muevamos el ratón 00:37:58
por la página, nos está diciendo dónde estamos. 00:38:00
Entonces, si subimos 00:38:02
para arriba, 00:38:04
vemos que esto es el código. 00:38:06
Este cuadro de aquí, que es toda la página, 00:38:08
es el código. 00:38:10
Me pone bonito. 00:38:12
Aquí tenemos los hostiles. 00:38:14
Entre ellos, 00:38:16
aquí no, porque no es la modificación 00:38:18
que estamos haciendo. Si lo instalamos 00:38:20
en nuestra máquina virtual, 00:38:22
veríamos la modificación que estamos 00:38:24
haciendo en directo. 00:38:26
Aquí nos encontramos con un background color 00:38:28
que está en blanco 00:38:30
y lo mejor del Firebox es esto. 00:38:32
Podemos editar 00:38:34
en lo que estamos viendo. 00:38:36
Podemos editar 00:38:42
en lo que estamos viendo. 00:38:44
Entonces aquí, por ejemplo, 00:38:46
podemos poner 00:38:48
otro botón. 00:38:50
Así de rápido. 00:38:54
Esto no se está guardando en ningún sitio. 00:38:56
Esto se está viendo solo en mi navegador, 00:38:58
en mi instancia, porque yo con Firebox lo estoy modificando. 00:39:00
Pero esto, una vez 00:39:02
decidimos el cuadro que queremos, lo ponemos aquí 00:39:04
y vemos que funciona, lo llevamos al código. 00:39:06
Por ejemplo, si lo queremos poner 00:39:10
este está blanco, pero en nuestra 00:39:12
máquina virtual no está blanco 00:39:14
el body. 00:39:16
El body lo tenemos 00:39:18
de color gris. 00:39:20
Vamos a ponerlo blanco. 00:39:22
¿Cómo lo hacemos? 00:39:24
Cogemos 00:39:26
body 00:39:32
de textura. 00:39:34
El body, 00:39:36
el corchet de poner 00:39:38
background color y el color. 00:39:40
Este background color y el color, lo cogemos, 00:39:42
lo copiamos 00:39:44
y nos venimos a nuestro 00:39:46
fichering 00:39:48
mood10 y aquí 00:39:52
copiamos. 00:39:54
El color. 00:39:58
Y en este caso lo vamos a poner blanco. 00:40:00
El blanco en 00:40:02
el CSS 00:40:04
se tiene que poner, bueno, 00:40:06
la idea es ponernos un hexadecimal 00:40:08
que es 6 hexes. 00:40:10
href, href, href, href. 00:40:12
Siempre cerramos con un picoma. 00:40:14
Estas son las partes de la programación que siempre son 00:40:16
así. 00:40:18
Y entonces con esto, 00:40:20
si vamos a nuestra instancia, 00:40:22
¿qué pasa aquí? Nos va a salir blanco 00:40:26
el color de para afuera. 00:40:28
Vamos a hacer que se vea más. 00:40:30
Yo lo voy a dejar en blanco, yo lo voy a dejar en rojo. 00:40:32
Vamos a ver qué color nos sale. 00:40:44
Gris. 00:40:50
Vale, se nos ha puesto todo en gris. 00:40:52
Gris. 00:40:54
Vamos a ver por qué. 00:40:56
Vamos a ver por qué. 00:40:58
Con el filebook instalado, 00:41:00
¿qué nos está pasando? Que este tiene 00:41:02
un color transparente. 00:41:04
Lo digo describiendo. 00:41:06
¿Vale? 00:41:08
Lo que hay dentro del cuadro es el gris. 00:41:10
El gris no tiene otro color. 00:41:12
El de base aparece transparente. 00:41:14
Vamos a ponerle un color diferente. 00:41:16
Volvemos. 00:41:18
Esto es el trabajo 00:41:20
y el tema gráfico es, lo veo, 00:41:22
me gusta, no me gusta, lo modifico. 00:41:24
Veo dónde va a estar el error 00:41:26
y lo voy a modificar. 00:41:28
Como veis, 00:41:52
como este tenía, 00:41:54
lo que estamos haciendo al añadir 00:41:56
un fichero de más, este fichero 00:41:58
CSS que estamos creando, 00:42:00
es que se están cargando 00:42:02
todos los estilos de forma igual 00:42:04
y el último fichero, 00:42:06
que es el que hemos puesto nosotros, 00:42:08
lo cargará después. ¿Qué pasa? Que arrastramos 00:42:10
todos los estilos anteriores. 00:42:12
Cuando trabajas en esos ficheros, 00:42:14
lo que haces es que vas a buscar 00:42:16
dónde se está especificando el color, 00:42:18
dónde está este texto que os enseñaba 00:42:20
de body o de page, 00:42:22
lo buscas y lo modificas. 00:42:24
Entonces ya no cargas un color 00:42:26
y luego cargas otro. El tema gráfico se va cargando 00:42:28
así. Entonces, 00:42:30
vas haciendo. Por eso 00:42:32
hemos cargado un 00:42:34
fichero, o sea, un color que generalmente 00:42:36
nos estaba haciendo transparencia 00:42:38
con otro. 00:42:40
Con todo esto, podemos ir 00:42:42
viendo más modificaciones 00:42:44
que os he pasado en el 00:42:46
fichero. 00:42:48
Tenemos... 00:42:56
el content. 00:42:58
Por ejemplo, 00:43:00
content. ¿Qué es content? 00:43:02
¿Qué es content? 00:43:04
La ordena que está liberada. 00:43:06
¿Qué es content? 00:43:08
Vamos a buscarlo. 00:43:10
Vamos aquí. 00:43:14
Vamos a Palo. 00:43:16
Y venimos, pues, moviendo un poco 00:43:18
por la... 00:43:20
... 00:43:22
... 00:43:24
... 00:43:26
... 00:43:28
... 00:43:30
... 00:43:32
... 00:43:34
... 00:43:36
... 00:43:38
... 00:43:40
... 00:43:42
... 00:43:44
... 00:43:46
... 00:43:48
... 00:43:50
... 00:43:52
... 00:43:54
... 00:43:56
... 00:43:58
... 00:44:00
... 00:44:02
... 00:44:04
... 00:44:06
... 00:44:08
... 00:44:10
... 00:44:12
... 00:44:14
... 00:44:16
... 00:44:18
.... 00:44:20
... 00:44:22
... 00:44:24
... 00:44:26
... 00:44:28
... 00:44:30
... 00:44:32
... 00:44:34
... 00:44:36
... 00:44:38
... 00:44:40
... 00:44:42
... 00:44:44
... 00:44:46
... 00:44:48
... 00:44:50
... 00:44:52
... 00:44:54
... 00:44:56
... 00:44:58
... 00:45:00
... 00:45:02
... 00:45:04
... 00:45:06
Valoración:
  • 1
  • 2
  • 3
  • 4
  • 5
Eres el primero. Inicia sesión para valorar el vídeo.
Idioma/s:
es
Autor/es:
Daniel Ureña
Subido por:
EducaMadrid
Licencia:
Reconocimiento - No comercial - Sin obra derivada
Visualizaciones:
685
Fecha:
30 de noviembre de 2011 - 9:42
Visibilidad:
Público
Enlace Relacionado:
La Rioja Moodle Moot
Descripción ampliada:

Estructura del taller:
Se presentarán diferentes elementos que nos permiten crear temans en Moodle. Se realizarán una serie de actividades en grupo para trabajar. Los participantes podrán compartir experiencis y soluciones con su grupo y con el resto de participantes del tall.

Objetivos:
Los objetivos del taller son: -dotar a los asistentes de una guía de elementos, consideraciones y trucos para crear temas gráficos para cursos y campus, así como de qué manera trabajarlos .

Duración:
45′ 03″
Relación de aspecto:
5:4 Es el estándar al cual pertenece la resolución 1280x1024, usado en pantallas de 17". Este estándar también es un rectángulo.
Resolución:
720x576 píxeles
Tamaño:
78.43 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid