Moodle no tiene por qué ser feo

Bueno, ya cuando me digan los jefes. 00:00:00

Buenos días a todos, a este sábado después de, supongo, una noche, algunos más larga que para otros. 00:00:08

Espero que estéis todos bien, más o menos las neuronas, algunas se han perdido en el camino, pero el resto más o menos en su sitio. 00:00:19

Y creo que vais a tener la desgracia de asistir a unos talleres-exposiciones más eclépticos, yo creo, de la MoodleMood. 00:00:26

Lo adelanto ahora por no sobreaviso. 00:00:33

Os explicaré luego el por qué es más ecléptico o es un taller ecléptico o es una exposición ecléptica. 00:00:37

Y creo que al final entenderéis el por qué voy a hacer esta exposición y cuál es la intencionalidad. 00:00:46

Pero que sepáis que va a ser como una exposición en algún sentido rara. 00:00:51

Porque veréis que voy entrando, voy saliendo, voy haciendo conceptos, voy saltando. 00:00:58

Pero también porque creo que en el caso de que nos ocupa, que en Moodle no tiene que ser feo, en el caso del diseño, 00:01:02

en realidad el diseño ocupa tantas áreas, digamos así, que tengo que hacer una exposición ecléptica. 00:01:08

Porque el diseño es un diseño tanto de diseño gráfico como un diseño conceptual de aula, como un diseño de contenidos, 00:01:15

como un diseño de lo que quiero o cómo quiero o en qué momento quiero que mis alumnos hagan algo. 00:01:22

Es un concepto tan amplio que no me quería centrar a un espacio de desarrolladores, no me quería centrar a un espacio de profesores, 00:01:27

no me quería centrar a un espacio más de, un perfil más de toma de decisiones con qué se hace el diseño, 00:01:37

sino quería de alguna manera volcar un conjunto de ideas, un conjunto de reflexiones, un conjunto de trucos, 00:01:43

incluso un conjunto de pequeñas píldoras o pequeñas semillas que me gustaría sembrar en cada uno de vosotros, 00:01:50

de lo que yo concibo como diseño y como diseño orientado a Moodle en concreto. 00:01:56

Entonces veis por qué iré saltando, habrá partes más que tocaré algo de desarrollo, 00:02:03

habrá partes en las que hablaré más de cosas más teóricas, habrá partes en las que diréis ya se ha perdido, 00:02:08

me habré perdido, habrá un poco de todo, pero la idea es que lo pasemos bien, que nos divirtamos un poco 00:02:15

y explicar una serie de conceptos que a ver si consigo que al final al menos salgáis de aquí, 00:02:22

pues he aprendido esto, he aprendido esto otro, me presento antes nadie, soy Miguel Ángel Muras, 00:02:27

entre otras cosas he sido responsable de diseño de lo que es ahora mismo el E3UV, la Universidad Barcelona Virtual, 00:02:35

ahora tengo montados, he fundado dos empresas de desarrollo tecnológico orientado a web 00:02:42

y he pasado por una serie de ámbitos, no soy programador, no soy diseñador o no me considero diseñador, 00:02:48

aunque he hecho diseños mucho tiempo en mi vida, no soy pedagogo aunque he hecho clases en formación, 00:02:53

soy una de esas raras avis que están en estos entornos, he tocado un poco de todo y veréis que toco código sí, 00:03:00

pero con mis limitaciones, veis que hablo de diseño y hago diseño, puedo hablar de diseño y de usabilidad 00:03:07

pero no soy un diseñador o no me considero y ahora más estoy orientado más a gestión de equipos de producción, 00:03:13

por lo cual ahora encima ya mi visión es mucho más desde otro punto de vista, 00:03:18

nosotros lo que hacemos es una conceptualización de una formación entera, 00:03:22

con lo cual esa conceptualización ya incluye diseño, tanto diseño didáctico como diseño de aula, 00:03:26

un diseño gráfico porque el fondo, el medio también es el mensaje, 00:03:32

con lo cual si quiero transmitir algo utilizo el diseño para transmitir algo también de alguna manera 00:03:36

y en ese sentido la presentación es un poco así, lo he dicho, ir saltando conceptos, 00:03:41

más de desarrolladores, más de diseño de otro tipo, de usabilidad o de otros conceptos, 00:03:51

más de desarrolladores por decirlo, os voy a pedir a todos porque vamos a intentar jugar un poco con el código, 00:03:59

os voy a pedir a todos que instaléis esto, Firebook, es una extensión para poder ser en Firefox, 00:04:08

a ver si abrís Firefox y lo tenéis abierto, instalemos Firebook, ahora os explicaré por qué, 00:04:14

esto es la triada para nosotros, hay más elementos que utilizaríamos, 00:04:20

son pequeños trucos, pequeños amigos que nos ayudan desde un punto de vista práctico a jugar con el diseño, 00:04:24

¿por qué? Firebook luego lo veréis, es una extensión para Firefox muy interesante 00:04:33

que permite ver el código de una página web y me permite manipularla de una forma ficticia, 00:04:39

vamos a hacer un pequeño juego, vamos a ir a una web determinada, vamos a ir con el Firebook, 00:04:47

vamos a hacer un código muy sencillito y veréis cosas, ¿qué nos facilita Firebook? 00:04:51

Nos facilita a cualquier persona con un conocimiento que no hay que ser muy extenso, 00:04:56

empezar a hacer juegos visuales que luego me permiten tomar decisiones sobre el diseño, 00:05:00

por ejemplo, vía Firebook puedo definir, cambiar el color de enlace de una web 00:05:04

y ver cómo quedaría antes de pedir el cambio, de esta manera me permite evaluar un cambio gráfico 00:05:09

antes de aplicarlo realmente y sin que afecte a nadie, porque es para mí, lo veo yo, nadie más lo ve, 00:05:15

ahora iremos a Firebook, luego jQuery que es más de programadores, 00:05:20

es una librería muy potente de interacción de programación, esto es para programadores, 00:05:23

solamente los programadores esto ya lo conocen o le suena tal y cual, 00:05:29

pero el resto que sepáis que si en algún momento he terminado y queréis hacer una cosa que luego veremos, 00:05:32

esa cosa funciona gracias a jQuery, entonces hay que pedirle a alguien que nos ponga jQuery 00:05:37

o pensar cómo poner jQuery, no, no jQuery no instalaremos, enseñaré lo que es 00:05:43

y un truco para cómo utilizarlo y luego por último es a Google, 00:05:48

es decir si hay algo que no sé cómo funciona voy a buscar a Google, 00:05:54

Google y en nuestro caso como tenemos una comunidad muy potente, 00:06:00

normalmente si buscamos en Google nos remitirá a las propias comunidades dentro de Moodle de desarrollo, 00:06:04

como hago algo sencillo, vuelvo otra vez atrás, no voy a explicar cómo hacer un diseño en Moodle, 00:06:11

¿por qué?, porque ya hay un taller que explicaba esto de Daniel Ureña que más complementa este 00:06:22

y porque hay manuales o hay formación que os puede ayudar, no es mi objetivo, 00:06:29

os explicaré cosas, pero no es mi objetivo enseñaros a hacer un diseño en Moodle, 00:06:34

porque no era mi objetivo, mi objetivo es más abriros la mente sobre opciones que podéis hacer 00:06:38

que luego podéis aplicar de una manera más directamente. 00:06:43

¿De dónde se hace un tema gráfico? 00:06:50

Contacto con un servicio profesional, 00:06:53

pensemos que donde nos colocamos, puede ser una institución, puede ser un colegio pequeño, puede ser un particular, 00:06:56

entonces depende de dónde y hay que ir a uno de estos tres, 00:07:02

contacto con un servicio profesional que me lo haga, busco un tema gráfico que me guste, 00:07:05

lo implemento y lo adapto, cambio el logo, cambio el color, cambio no sé qué, 00:07:09

ahora veremos cómo podríamos hacer algo parecido, 00:07:13

yo que soy manitas me hago un tema gráfico desde cero, que es lo que explicaba el taller de Dani, 00:07:16

es decir, a partir de lo que se llamaría el formal white, empiezo a crear un tema gráfico propio, 00:07:21

son las tres alternativas que tenemos. 00:07:26

Os explico un momento lo que es el Firebook, para empezar a jugar salto al navegador y lo veremos, 00:07:29

hay una página web que luego os daré unos accesos que hemos preparado, 00:07:34

vamos a entrar bien y si no pues lo dejaremos como base, 00:07:38

pero para hacer pruebas, es un campus que es de pruebas, lo tenemos para pruebas, 00:07:43

y voy a instalar Firebook, si no lo tengo instalado, lo primero que voy a hacer es buscar Firebook, 00:07:50

voy a una página de complementos de Firefox, me da la opción de añadirlo, lo añado, 00:08:00

me pide reiniciar Firefox y ya lo tengo. 00:08:09

¿Qué me da esta funcionalidad? 00:08:12

Me da un pequeño bichejo aquí abajo, que me permite hacer cosas visualmente y jugar, 00:08:15

me gusta mucho esta herramienta porque os va a permitir hacer pequeños juegos visuales con las páginas web, 00:08:25

os permitirá ver estructura de la página web sin tener que tener un conocimiento muy extensivo. 00:08:30

Algo sencillo, pincho en mi querido amigo, me aparece esta, se me despliega, 00:08:35

aquí tengo esta herramienta de aquí, lo que hago es que me va marcando en cuadrados las zonas de una página web, 00:08:44

las páginas web habitualmente trabajan por bloques cuadrados, 00:08:56

tienen distribución siempre muy cuadrada, entonces trabajan lo que se llaman divs o conceptos de cuadrado, 00:08:59

que él me va marcando, entonces imaginemos que yo tengo este objeto de aquí, 00:09:04

por poner uno, este de aquí, me lo está marcando, fijaros, me está diciendo cuál es, 00:09:07

con lo cual yo ya sé cuál es a nivel de diseño, a nivel estructural de programación ya podría capturarlo, 00:09:12

y al mismo tiempo me da un código, este es el código que se utiliza habitualmente para pintar, 00:09:18

visualmente es el código que nosotros utilizamos en programación para este objeto de aquí pintarlo de una manera u otra, 00:09:25

es este de aquí, esto me está definiendo cómo se ve esto de aquí, 00:09:31

entonces si yo trabajo sobre este objeto, manipularé este objeto de aquí, ¿para qué me sirve esto?, 00:09:37

imaginemos que hago algo tan sencillo, pincho y se me queda clavado, se me marca, 00:09:44

hago algo tan sencillo de empezar a trabajar, estoy bajando los píxeles, 00:09:49

no estoy cambiando el campus, no estoy cambiando nada, además cada uno vería una cosa diferente, 00:09:58

estoy cambiando mi visualización, ya sé cuánto tiene que medir para que me quede ajustado, 00:10:03

ya tengo que ir a la línea de código o pedirle a quien me lo haga, depende de los perfiles, 00:10:09

oye ajustame esto porque lo he visto que funciona, o por ejemplo colores de enlace, 00:10:14

si yo selecciono cualquier objeto que tenga un enlace, si os fijáis me marca el color, 00:10:20

es que ayer tuve el día rosa, hoy voy a tener el día verde, quiero los enlaces en verde y quiero ver cómo quedan, 00:10:27

pongo green, hay una serie de reglas de colores, de nombres convencionales que puedo utilizar 00:10:38

y luego hay otros que son códigos tan raros que veis aquí, que son valores hexadecimales, 00:10:43

que es más difícil de capturar, normalmente en esto vas a Gimp o a Photoshop 00:10:49

y hay un espacio donde puedes capturar ese color y pintarlo aquí, pero ya tengo la opción, 00:10:56

entonces puedo ir viendo cómo va quedando mi página web, puedo hacer más cosas, 00:11:01

voy a mover esto para abajo porque si no va a estar toda la sesión molestando, 00:11:06

¿qué pasaría si yo decido por lo que sea quitar el bloque superior de navegación? 00:11:15

fijaros que me ha marcado header menú, este objeto aquí se llama header menú, 00:11:27

luego ya veré dónde lo puedo localizar, hay un archivo que se llama header.html 00:11:32

y sé que tiene que haber un objeto allí o bien me lo construye el código, 00:11:36

yo digo pues este lo quiero marcar más, quiero ponerle un fondo, 00:11:40

pues hay una regla que yo pincho aquí, clic, clic y me deja añadir objetos, 00:11:44

me digo background, una B, él ya me lo marca, un guión, fijaros que me va diciendo cosas, 00:11:50

color, hago tabulador y digo black, me hace negro directamente. 00:11:57

¿Para qué me sirve todo esto? Para hacer juegos visuales, 00:12:06

previos, sin tener mucho conocimiento, previos a hacer cualquier tipo de diseño gráfico 00:12:08

y luego yo puedo proponer cosas, es decir, hoy he probado en rojo los enlaces, 00:12:13

hoy funciona muy bien, hoy en este caso concreto, luego hay casuísticas, 00:12:17

en este caso que resulta que el fondo de la tabla es negro, 00:12:22

el enlace en este caso concreto habría que descubrir de qué manera lo cambiamos a blanco, 00:12:25

por ejemplo, aunque el resto sean rojos, todo eso se puede hacer, 00:12:30

se puede hacer, lo podemos hacer nosotros o podemos pedir ayuda que nos lo hagan 00:12:33

o depende de los conocimientos. 00:12:37

Un par de conceptos de web y de diseño orientado a web, 00:12:39

esto que veis aquí son, llamaríamos clases, son identificadores del objeto, 00:12:44

si yo tengo una clase en cada uno de los objetos, de alguna manera yo, 00:12:49

vía este código puedo manipularlo, entonces Moodle me deja manipular una serie de clases 00:12:53

y hay otras que no me deja, luego vemos que hay limitaciones, 00:12:59

entonces veremos que empieza con un hit, un body, la estructura clásica 00:13:03

y luego en algún lado un page. 00:13:08

Esto no sirve para Filebook, ¿qué más cosas son interesantes en Filebook? 00:13:13

Un display, nos oculta un objeto, es decir, no lo quiero, 00:13:18

y luego iría más allá, luego veremos en otra reflexión, 00:13:25

vale, pero si aquí hay un display no, tenemos que aprender, 00:13:27

mi idea es también que salgáis de aquí con una reflexión, 00:13:32

yo no sé hacer, pero mi idea es que cuando le pida a alguien o cuando quiera, 00:13:35

yo quiero que esta cabecera aparezca para los usuarios y otros no, eso se puede hacer, 00:13:40

si tenemos el conocimiento o alguien nos ayuda a hacerlo, se puede hacer, 00:13:47

también es algo que de este taller me gustaría que saliésemos, 00:13:52

no solo quedarnos con lo que hemos visto en cuanto a diseño, 00:13:55

sino que penséis que el diseño en Moodle es un diseño que viene muy condicionado, 00:13:59

por motivos X, desde siempre los diseños en Moodle han sido muy cuadrados, 00:14:04

eso viene derivado a que el diseño en Moodle, la estructura es cuadrada, 00:14:08

pero también viene derivado a que nosotros nos hemos autoimpuesto limitaciones 00:14:13

en cuanto a diseño en Moodle, por motivo que sea, 00:14:17

porque no han llegado profesionales o no ha llegado gente con el riesgo 00:14:20

de poder hacer diseños nuevos o frescos, por motivo que sea, 00:14:27

se ha tendido un diseño muy cuadrado y eso hace que cuando veas un Moodle y veas otro, 00:14:31

muchas veces son Moodle que son iguales, 00:14:36

entonces cuadrado la cabecera y luego no se que, 00:14:38

si, es verdad, eso es en parte porque el diseño es cuadrado 00:14:40

y en parte porque de alguna manera no le hemos dado la importancia 00:14:44

que en otras comunidades o que en otros desarrollos se le da al diseño, 00:14:48

WordPress es un sistema de blogs, tiene un sistema también bastante cuadrado, 00:14:52

en WordPress no tienen nada que ver, son mucho más arriesgados, 00:14:57

es cierto que hay una comunidad de desarrolladores que trabajan más, 00:15:01

pero de alguna manera en Moodle seguimos derivando a diseños cuadrados, 00:15:04

también es cierto que esa tendencia está cambiando, 00:15:10

los últimos diseños que se están viendo en el sistema de temas de Moodle, 00:15:13

que luego lo veremos, empiezan a tener un componente de riesgo cada vez más interesante, 00:15:16

hay todo un bloque de diseños que los de Aad, Bart, que luego os pasaré el enlace, 00:15:21

que se dedican a hacer diseños, el New School New Centers, 00:15:30

no me acuerdo el nombre exacto, hay una persona allí, 00:15:34

un tío que hace unos diseños muy chulos y los publica y los podemos utilizar 00:15:38

y esa línea de alguna manera ha ido abriendo camino también a otra gente 00:15:43

que está publicando diseños más interesantes 00:15:47

y eso tenemos que potenciarlo, 00:15:49

porque también es interesante que cuando un usuario perciba Moodle, 00:15:51

lo perciba no solo desde el punto de vista de lo que ponemos dentro, 00:15:55

sino de cómo lo ponemos dentro de alguna manera. 00:15:57

Entonces vuelvo a esto de la Firebug, 00:16:00

me interesa porque de esta manera también podemos tocar código, 00:16:03

que es mi idea, que podáis tocar código sin plantearos un sistema por detrás 00:16:08

de FTP, de subir archivos, de no sé qué, 00:16:13

que sería, con todo cariño para todos los que tenemos aquí, un pequeño jaleo. 00:16:16

Entonces como eso me parecía un poco inviable y al mismo tiempo 00:16:20

quería dejaros una opción de juego, esta herramienta es muy útil 00:16:23

y al mismo tiempo haremos cosas con esta herramienta 00:16:27

que es la que haríamos en código natural, por así decirlo, para que lo entendáis. 00:16:29

¿Qué más cosas? Firebug es muy potente no solo por eso, 00:16:34

me permite ver todo lo que carga esa página, también es interesante, 00:16:38

y permite una serie de opciones que ya veremos, 00:16:42

como es detectar un objeto, que también es muy útil 00:16:44

cuando hablemos de iconos en Moodle. 00:16:46

Si yo entro a un curso de Moodle, 00:16:49

tengo una serie de iconos que luego veremos qué significa, 00:17:00

entonces hay veces que me interesa cambiar un icono, 00:17:03

el set de iconos de Moodle es muy grande, es gigantesco, 00:17:06

no es gigantesco, es bastante grande, muy extenso, 00:17:10

entonces localizar un icono a veces no es una tarea tan sencilla, 00:17:14

porque tienes que recorrer todas las carpetas, de esta manera dices, 00:17:19

no, este icono está en el S-Socrates, que es uno de los temas, 00:17:21

que es este tema en concreto, este es un tema que se llama S-Socrates, 00:17:26

un poco tuneado, pero está disponible en el sistema de temas de Moodle. 00:17:29

Tiene una carpeta PIX, dentro hay una carpeta Y, 00:17:34

dentro hay un users.gif. 00:17:38

Si yo quiero modificar este icono para que sea de otra manera, 00:17:40

sé dónde localizarlo y no me vuelvo loco recorriendo todos los iconos 00:17:44

y abriéndolos para ver qué icono es o buscando de esta manera. 00:17:49

También me sirve para este tipo de inventos. 00:17:51

Y también, otra cosa que me parece muy interesante en este caso, 00:17:54

me da medidas de maquetación, el Filebook, 00:17:57

que nos va muy bien a la hora de, hay veces que en el diseño 00:18:01

hay espacios que no sabemos por qué son, 00:18:05

y este sistema nos permite evaluar cuánto ocupa un objeto, de alguna manera, 00:18:08

y por qué, para terminar de ajustarlo. 00:18:15

Imaginaos que yo tengo que hacer un diseño para que cubra esta parte, 00:18:20

pues ahora esto sé que tengo que hacer un gráfico de 559, 00:18:24

y para que de esta manera, si hago el gráfico de 159, me encaje en la pantalla. 00:18:28

Vuelvo a la exposición. 00:18:34

Otro concepto importante que se ha ido a trasladar, 00:18:41

si alguien tiene una idea, alguien podrá llevarla a cabo. 00:18:43

¿Qué quiero decir con esto, lo que he dicho antes? 00:18:51

Que no nos autolimitemos con lo que hemos visto en Moodle 00:18:53

para pedirle a Moodle cosas nuevas, porque no es así. 00:18:56

Moodle da mucho juego, y da mucho juego a nivel gráfico, si queremos. 00:19:01

Si conocemos sus cosas buenas y conocemos sus limitaciones, 00:19:06

hacemos Moodle Kung Fu, aprovechamos sus limitaciones 00:19:11

para intentar dar algo que nos facilite el trabajo. 00:19:14

Pero se pueden hacer cosas muy interesantes con Moodle 00:19:20

y con diseños gráficos en Moodle, si queremos hacerlo. 00:19:22

Este es un diseño convencional, de un niño de payesos. 00:19:25

No tiene muchos misterios. 00:19:28

Cabecera, modelos clásicos. No se ve muy bien, 00:19:29

pero lo que trabajas es con fondos, de alguna manera, para recortar. 00:19:32

Estos son diseños convencionales. 00:19:35

En este caso, por ejemplo, algo que veremos luego. 00:19:38

No pensemos solo en el envoltorio, 00:19:42

sino que pensemos también en cosas que podemos hacer. 00:19:45

Yo puedo generar un gráfico en la cabecera. 00:19:47

Ese gráfico de la cabecera hace que en mi curso tenga un atractivo. 00:19:50

Eso no es de diseño de Moodle. 00:19:54

Eso es de diseño de cómo presento la información. 00:19:56

O haría una portada en un libro. Igual. 00:19:59

O cada uno de los temas dentro de un curso, como veremos, 00:20:01

puedo tener una foto. 00:20:04

O le puedo poner una animación. 00:20:05

O le puedo poner un vídeo. 00:20:06

Por eso digo, el diseño no es solo la carcasa. 00:20:07

Entonces estamos diciendo, es que esa carcasa es fea. 00:20:10

No. 00:20:12

O la carcasa es como es. 00:20:13

Pero en tu curso tampoco te has preocupado en hacerle un icono gráfico 00:20:14

o en hacer un juego visual 00:20:17

o en aprovechar las opciones que te da Moodle para hacerlo más bonito. 00:20:19

Tampoco te has aprovechado. 00:20:22

Con lo cual, no me vale la excusa de que el diseño principal es feo. 00:20:23

No. 00:20:27

Hay cosas por hacer dentro. 00:20:28

Entonces, veamos qué parte depende de nosotros y parte no depende de nosotros. 00:20:29

Este es un gráfico hecho a medida. 00:20:34

Hecho a medida. 00:20:36

En un tamaño terminado que encaja allí. 00:20:37

Con lo cual hace que todo tenga coherencia. 00:20:38

Otro gráfico añadido. 00:20:40

Otro gráfico añadido lateral. 00:20:42

Entonces hace que visualmente, pues al menos, tenga un poco más de gracia. 00:20:43

Lo mismo. 00:20:47

La estructura igual. 00:20:49

Trabajar con un gráfico a medida. 00:20:51

Trabajar con tamaños de letra interiores para hacer resaltas menos resaltas. 00:20:53

Con cabeceras limpias. 00:20:59

Esto es derivado de AdBard. 00:21:00

Luego lo explicaré. 00:21:02

El modelo de AdBard. 00:21:03

Diseño este es de base de AdBard. 00:21:04

Trabajar encima con este diseño. 00:21:06

Incluso estos son convencionales. 00:21:08

Siempre intentar trabajar. 00:21:10

Algo en diseño que funciona también muy bien es el tema de la distribución. 00:21:11

Cómo distribuimos los objetos. 00:21:14

El espacio. 00:21:17

El aire. 00:21:18

Trabajar con aire. 00:21:19

Muchas veces solamente añadiendo aire entre objetos ganamos referencias visuales. 00:21:20

Tamaño de letra. 00:21:25

Todos son temas que no son de diseño de colores sino de usabilidad. 00:21:26

De cómo mostramos la información. 00:21:30

De qué priorizamos. 00:21:32

Gama de colores, por ejemplo. 00:21:33

Funciona muy bien trabajar con un punto menos de negro o con un gris un poco más suave. 00:21:36

Porque hace que el texto no sea tan fuerte o tan agresivo. 00:21:40

Y te ayuda a hacer segundos niveles. 00:21:43

Trabajar con gamas de colores. 00:21:46

Que van más allá. 00:21:48

¿Qué vamos a hacer? 00:21:49

Esto es más arriesgado. 00:21:53

En este caso se podía hacer por un motivo. 00:21:55

El cliente. 00:21:57

En este caso jugábamos con la ventaja. 00:21:58

Sabíamos que los usuarios finales eran usuarios no profesores. 00:22:02

Con lo cual lo que queríamos es que su experiencia visual fuese diferente. 00:22:06

Con lo cual quisimos cargarnos la columna derecha. 00:22:09

Esta no la cargamos. 00:22:13

Por CSS. 00:22:14

No tocando el corazón. 00:22:16

Hicimos un ocultar del bloque derecho. 00:22:18

¿Cuál es el problema? 00:22:22

Cuando tienen que editar. 00:22:23

Como el Moodle tiene la opción de bloques por defecto en el lateral. 00:22:24

Y no queríamos tocar core para moverlo. 00:22:28

Cuando el editor quiere tocar en esto tiene que ir al tema. 00:22:30

Seleccionar otro tema gráfico. 00:22:33

Que sí que incorpora la columna derecha. 00:22:35

Añadirlo y volver a activar este tema. 00:22:37

Pero bueno, es un mal menor. 00:22:39

Porque el objetivo final es que visualmente sea diferente. 00:22:40

¿Qué más juegos hicimos aquí? 00:22:43

Estos son transparencias. 00:22:46

Lo veréis luego. 00:22:49

Pero Sprout.js es malo. 00:22:50

Es malo. 00:22:52

Ya está. 00:22:53

Quitadlo de la cabeza. 00:22:54

Sprout.js hay que eliminarlo de los ordenadores. 00:22:55

Cuanto antes lo eliminemos el mundo será mejor. 00:22:56

Y para los diseñadores y programadores es doblemente malo. 00:22:59

Es un 30% malo. 00:23:02

Cualquier desarrollo que tengas que adaptarlo a Sprout.js. 00:23:04

Más o menos está calculado que es un 30% más de coste y de tiempo. 00:23:07

¿Por qué es así? 00:23:11

Es malo. 00:23:13

Es una tecnología de hace un montón de años. 00:23:14

No entiendo cómo está ni siquiera instalada todavía. 00:23:16

Es emocionante. 00:23:19

Entonces. 00:23:20

¿Qué es esto? 00:23:21

Esto es para que lo entendáis. 00:23:23

Es un fondo que se llama compatrón. 00:23:25

Fondo compatrón. 00:23:27

Lo repites y se repite. 00:23:28

De esto tenéis en internet un montón de patrones. 00:23:29

Que tú lo colocas al fondo de la página de una otra manera. 00:23:31

Y se va repitiendo. 00:23:34

Entonces te hace lo típico Cenefa. 00:23:36

Te hace un borde de no sé qué. 00:23:37

La espiral del blog de notas. 00:23:41

Cosas de estas que al repetir el patrón hace un efecto de mosaico. 00:23:43

Un patrón. 00:23:48

Encima una capa. 00:23:49

Un objeto transparente con una pequeña sombra. 00:23:50

Eso en los programas gráficos te permite incorporar sombras. 00:23:53

Y como una especie de grado de color. 00:23:56

Entonces eso al colocarlo encima de otro te hace efectos de luces. 00:23:59

Vamos a hacer lo que hice el otro día. 00:24:03

Porque voy saltando de cosas. 00:24:05

Y voy haciendo. 00:24:07

Voy al Photoshop. 00:24:09

Para que veáis un poco en realidad como lo que os quiero decir. 00:24:12

Sí, sí. 00:24:18

Muy bien. 00:24:19

Vale, vale. 00:24:20

Que te entiendo. 00:24:21

Este es otro diseño. 00:24:22

Pero que tengáis una idea de lo que os decía. 00:24:23

Yo esto tengo un objeto que es transparente. 00:24:25

Luego lo recorto y lo coloco de tal manera. 00:24:27

Lo mismo con el fondo. 00:24:29

Es un objeto transparente con un degradado de color de fondo. 00:24:31

Que tiene una pequeña sombrita aquí. 00:24:35

Y esto lo exporto. 00:24:37

Que se llama en PNG transparente. 00:24:39

Es un punto PNG transparente. 00:24:41

Que es una forma de exportarlo vía gráfica. 00:24:43

Y eso me mantiene a transparencia. 00:24:45

¿Qué me permite hacer? 00:24:47

Me permitiría hacer juegos visuales incluso más arriesgados. 00:24:48

Como, no sé si se nota, que veo el fondo. 00:24:51

Esto puedo hacerlo. 00:24:54

O incluso más arriesgado todavía. 00:24:56

Podría hacer un diseño que se amaría totalmente en el aire. 00:24:57

No me lo impide nadie. 00:25:01

Nada me impide hacer esto. 00:25:04

Que queramos arriesgar. 00:25:06

Que queramos hacerlo. 00:25:07

Y que luego busquemos la técnica para cómo hacerlo. 00:25:08

Pero nada me impide tener un menú flotante en el aire en Moodle. 00:25:12

Con objetos, no sé qué. 00:25:15

Nada. 00:25:17

Flotante nada. 00:25:18

En este caso, os lo digo. 00:25:19

Es lo que se llama un PNG transparente. 00:25:20

Que funciona muy bien. 00:25:22

Si nos olvidamos de Explorer 6. 00:25:23

Si lo dejamos en Explorer 6, olvidaros. 00:25:24

Porque entonces el PNG transparente te añada un fondo. 00:25:26

Y te ve como un churro. 00:25:28

Hay trucos también para hacerlo. 00:25:30

Pero nada, eliminémoslo. 00:25:32

Fuera. 00:25:34

De hecho, por ejemplo, ya sabéis que Google ya trabaja con un Explorer 6. 00:25:36

Y las empresas nos dedicamos a esto. 00:25:40

Ponemos cláusulas para decir. 00:25:42

Explorer 6 es un 30% más caro. 00:25:44

Usted lo quiere en Explorer 6. 00:25:46

Yo no tengo ningún problema. 00:25:47

Me va a costar 30% más caro. 00:25:48

Porque me va a llevar 30% más. 00:25:49

Y además no puede hacer todo lo que quiero hacer. 00:25:51

En fin. 00:25:54

Esto es una... 00:25:55

Lo mismo. 00:25:57

Esto es la cabecera. 00:25:58

Es un fondo. 00:25:59

Esta parte de aquí es una caja. 00:26:00

Ahora no me acuerdo si es completa o no. 00:26:04

Bueno, ahora no me acuerdo. 00:26:06

Ahora no me acuerdo si es completa. 00:26:07

O lo que hemos hecho es un gráfico de fondo que es como una especie de alargado. 00:26:09

Como si fuese esto muy, muy hacia arriba. 00:26:12

Y como lo posicionamos abajo. 00:26:14

Queda este efecto. 00:26:16

Esto hace un modelo de caja. 00:26:17

Esto es un truco visual de Moodle. 00:26:21

Les voy a explicar el porqué. 00:26:24

Porque Moodle, la parte central. 00:26:25

Tiene un tema de tablas que es particular. 00:26:27

Entonces, para intentar que ese tema de tablas, que es tan particular. 00:26:29

Aprovecharlo a nivel de diseño. 00:26:32

Esto de aquí. 00:26:34

Por así decirlo. 00:26:35

Es un truco visual. 00:26:37

Este gráfico lo colocamos encima. 00:26:39

En el contenido. 00:26:41

Y de aquí a aquí. 00:26:42

Es un fondo. 00:26:44

De la parte principal. 00:26:45

Con lo cual, al hacer el fondo. 00:26:47

Y encima lo coloco el gráfico. 00:26:49

Queda esto así integrado. 00:26:51

¿Por qué? 00:26:53

Porque luego me interesa. 00:26:54

Por un tema de cómo se estructura después. 00:26:55

El Moodle tiene un sistema de tablas. 00:26:59

Y si yo lo defino. 00:27:01

Luego lo veis. 00:27:02

En la cabecera. 00:27:03

Que tenga un fondo. 00:27:04

Lo tengo que definir para todos. 00:27:05

Lo cual me ha condicionado un montón. 00:27:06

Esta parte de aquí. 00:27:08

Al hacer este efecto. 00:27:09

Es bastante complicado para estructurar Moodle. 00:27:10

Esto es más sencillo. 00:27:14

Una cabecera. 00:27:15

De color. 00:27:16

Y tienes un separador en Moodle. 00:27:17

Lo utilizas para poner el de arriba. 00:27:18

Y en este caso. 00:27:20

Lo que es una imagen. 00:27:21

Y un texto al lado. 00:27:23

Esto lo podemos construir con una tabla. 00:27:24

Una tabla. 00:27:27

Puede ser una tabla. 00:27:28

Una tabla. 00:27:29

Dos columnas. 00:27:30

Tantos píxeles. 00:27:31

Tanto no sé qué. 00:27:32

Una imagen aquí. 00:27:33

El texto. 00:27:34

No tiene más dificultad. 00:27:35

De alguna manera. 00:27:37

Para implementarlo. 00:27:38

Y en este caso. 00:27:39

Lo que hicimos es un doble juego visual. 00:27:40

Para así decirlo. 00:27:43

Este objeto. 00:27:44

Lo flotamos. 00:27:45

Se llamaría flotar. 00:27:46

Este lo flotamos. 00:27:47

En el modelo de caja de desarrollo. 00:27:48

Lo flotas. 00:27:50

Haces un float left. 00:27:51

Que se llama. 00:27:52

Entonces queda flotante. 00:27:53

Y al tener un tamaño. 00:27:54

Este que es flotante. 00:27:55

Tiene un tamaño más limitado. 00:27:56

Se coloca al lado. 00:27:57

Es algo que. 00:27:58

En desarrollo. 00:27:59

Quien se dedique. 00:28:00

Sabe cómo hacerlo. 00:28:01

Entonces. 00:28:02

En vez de colocarlo. 00:28:03

Uno debajo de otro. 00:28:04

Que es lo que habitualmente se colocan. 00:28:05

Lo colocamos al lado. 00:28:06

Entonces queda. 00:28:07

Como si estuviese en doble columna. 00:28:08

Sin tener que tocar. 00:28:09

El corazón de Moodle. 00:28:10

Y por último. 00:28:11

Lo que hicimos. 00:28:12

Es un cambio de iconos. 00:28:13

Se decidió. 00:28:14

Que los iconos principales. 00:28:15

Fuesen más grandes. 00:28:16

Trabajaron con siete. 00:28:17

Pues los siete. 00:28:18

Los hacemos grandes. 00:28:19

Más da. 00:28:20

Porque. 00:28:21

En este caso. 00:28:22

Estamos condicionados. 00:28:23

A que podíamos hacerlo. 00:28:24

En otro caso. 00:28:25

Si tuviese. 00:28:26

Una idea. 00:28:27

Casuística. 00:28:28

Y tengo que cambiar. 00:28:29

Todo el set de iconos de Moodle. 00:28:30

Para hacerlo grande. 00:28:31

Digamos. 00:28:32

Que me lo tomaría. 00:28:33

No me lo tomaría. 00:28:34

Tan tranquilamente. 00:28:35

Pero en este caso. 00:28:36

Iba condicionado. 00:28:37

Que iban a utilizar. 00:28:38

Pues el cuestionario. 00:28:39

El score certificado. 00:28:40

Y cuatro cosas más. 00:28:41

Con lo cual. 00:28:42

Trabajamos. 00:28:43

Gráficamente. 00:28:44

Para construir ocho iconos grandes. 00:28:45

Con lo cual. 00:28:46

Al dibujarlos. 00:28:47

Me lo dibuja grande. 00:28:48

De alguna manera. 00:28:49

Entonces visualmente. 00:28:50

Es impactante. 00:28:51

Y no. 00:28:52

Y es lo mismo. 00:28:53

No he tocado nada. 00:28:54

Del corazón de Moodle. 00:28:55

Si tú me das esto. 00:28:56

Pues entonces. 00:28:57

Como me das esto. 00:28:58

Lo aprovecho. 00:28:59

Para mostrar. 00:29:00

Lo que yo quiero mostrar. 00:29:01

Y si no. 00:29:02

Pues tienes que tocar a Moodle. 00:29:03

Y en este caso. 00:29:04

En estos diseños. 00:29:05

Lo que tenían es. 00:29:06

En la parte de abajo. 00:29:07

Si os fijáis. 00:29:08

Tienen un. 00:29:09

Un cierre. 00:29:10

Pues es lo mismo. 00:29:11

El footer. 00:29:12

Es un objeto. 00:29:13

Que le colocas un fondo. 00:29:14

Y lo cierras. 00:29:15

Y luego haces. 00:29:16

Que ajustas. 00:29:17

Todos los objetos. 00:29:18

Para que. 00:29:19

Aquí hay una caja. 00:29:20

Que meto aquí. 00:29:21

Esto. 00:29:22

Aquí otra caja. 00:29:23

Y aquí otra caja. 00:29:24

Y subiendo. 00:29:25

Tres cajitas. 00:29:26

Entonces lo haces. 00:29:27

Que. 00:29:28

Que cuadren. 00:29:29

En diseño. 00:29:30

Esto. 00:29:31

Si conocemos. 00:29:32

Como funciona. 00:29:33

Internamente. 00:29:34

O que limitaciones tiene Moodle. 00:29:35

Tú lo ideas. 00:29:36

Yo me dedico a. 00:29:37

A decirlo. 00:29:38

De manera llana. 00:29:39

Yo me dedico. 00:29:40

A putear. 00:29:41

A mi gente. 00:29:42

Yo hago esto. 00:29:43

Y a. 00:29:44

Oye. 00:29:45

Y además lo quiero visual. 00:29:46

Ponlo. 00:29:47

A los Moodle. 00:29:48

Entonces. 00:29:49

Agarran. 00:29:50

A decir. 00:29:51

Vale. 00:29:52

Pues. 00:29:53

No me limito. 00:29:54

Y además. 00:29:55

Al revés. 00:29:56

Intento dar una vuelta de tuerca. 00:29:57

Siempre a los desarrollos. 00:29:58

Vale. 00:29:59

Ahora vamos a dar una vuelta. 00:30:00

Este caso concreto. 00:30:01

Es. 00:30:02

Cojo. 00:30:03

La primera. 00:30:04

El primer tema. 00:30:05

De. 00:30:06

De Moodle. 00:30:07

Que nos da. 00:30:08

Y ese primer tema de Moodle. 00:30:09

Que no es el tema. 00:30:10

Es la descripción. 00:30:11

Por así decirlo. 00:30:12

La utilizo. 00:30:13

Meto una tabla. 00:30:14

Con PDFs. 00:30:15

Con un icono. 00:30:16

Grande. 00:30:17

Que creo. 00:30:18

Lo subo. 00:30:19

Subo un icono. 00:30:20

Lo subo. 00:30:21

Lo subo. 00:30:22

Lo subo. 00:30:23

Subo un icono. 00:30:24

Un gráfico. 00:30:25

Lo vinculo. 00:30:26

Y pongo. 00:30:27

Y construyo una tabla. 00:30:28

Donde hay. 00:30:29

Un icono. 00:30:30

Y un enlace. 00:30:31

No subo un PDF. 00:30:32

Lo subo como recurso. 00:30:33

Porque. 00:30:34

En este caso. 00:30:35

No me aporta nada. 00:30:36

O sea. 00:30:37

Si subo como recurso. 00:30:38

Lo único que me da. 00:30:39

Es una trazabilidad. 00:30:40

Vale. 00:30:41

Pero. 00:30:42

No. 00:30:43

No me importa. 00:30:44

En este caso. 00:30:45

Lo que me interesa. 00:30:46

Es visualmente. 00:30:47

Que vean. 00:30:48

Un conjunto de iconos. 00:30:49

Potentes. 00:30:50

Pues. 00:30:51

Lo único que se puede hacer. 00:30:52

Es una tabla. 00:30:53

Normal. 00:30:54

De HTML. 00:30:55

Que. 00:30:56

Tiene un conocimiento básico de HTML. 00:30:57

Esto se puede montar. 00:30:58

El misterio. 00:30:59

Esta parte no lo sé. 00:31:00

Fijáis aquí. 00:31:01

Lo que os expliqué antes. 00:31:02

El truco. 00:31:03

Veis aquí. 00:31:04

Esto. 00:31:05

Tiene un diseño raro. 00:31:06

Entonces. 00:31:07

Tiene un diseño raro. 00:31:08

A propósito. 00:31:09

Moodle tiene una tabla. 00:31:10

Comienza. 00:31:11

Termina. 00:31:12

Por así decirlo. 00:31:13

Aquí. 00:31:14

Con lo cual. 00:31:15

Tiene un cierre. 00:31:16

Que es este. 00:31:17

Es el mismo. 00:31:18

Por así decirlo. 00:31:19

Que este. 00:31:20

Como explicarlo. 00:31:21

Este comienzo de tabla. 00:31:22

Lo tengo. 00:31:25

Si yo no le hiciese este efecto visual. 00:31:26

Se vería como. 00:31:29

Blanco. 00:31:30

Como cerrado. 00:31:31

Lo que he hecho es. 00:31:32

Esto me lo añade. 00:31:33

Porque me lo añade aquí. 00:31:34

Me lo añade aquí. 00:31:35

Me lo añade aquí. 00:31:36

Y me lo añade aquí. 00:31:37

Entonces hago que la foto. 00:31:38

De alguna manera. 00:31:39

Incorpore. 00:31:40

Gráficamente. 00:31:41

Este tocito. 00:31:42

Para que. 00:31:43

Al unirlo con el fondo. 00:31:44

Visualmente. 00:31:45

Sea un encaje. 00:31:46

Adecuado. 00:31:47

Porque no hay. 00:31:48

Sin tocar el corazón. 00:31:49

No hay manera de hacerlo. 00:31:50

Pero. 00:31:51

Si que hay una manera de hacerlo. 00:31:52

Sabiendo. 00:31:53

Que nos da. 00:31:54

Y como podemos trabajar. 00:31:55

Por encima. 00:31:56

Luego. 00:31:57

A ver si activo este tema. 00:31:58

Y lo vemos. 00:31:59

Para que veáis como está montado. 00:32:00

A ver si puedo activarlo. 00:32:01

Estos son temas más. 00:32:02

Más complejos de montar. 00:32:03

Pero. 00:32:04

Lo decía. 00:32:05

Es que no. 00:32:06

No lo limitemos. 00:32:07

¿Vale? 00:32:08

Lo mismo. 00:32:09

Este es un tema de. 00:32:10

De Olympus. 00:32:11

Que trabaja. 00:32:12

Pues. 00:32:13

Cabecera. 00:32:14

Fondo. 00:32:15

Es un fondo. 00:32:16

Fondo que sea chulo. 00:32:17

Un fondo de madera. 00:32:18

¿Vale? 00:32:19

Así que. 00:32:20

Entramos más. 00:32:21

Al core. 00:32:22

Para. 00:32:23

Añadirle. 00:32:24

Una imagen. 00:32:25

Automática. 00:32:26

A cada uno de los. 00:32:27

De los temas. 00:32:28

De todas maneras. 00:32:29

Subía en un sitio determinado. 00:32:30

Y esta construcción. 00:32:31

La hacía automáticamente. 00:32:32

Entonces. 00:32:33

Vía. 00:32:34

Código. 00:32:35

Lo que hacíamos es. 00:32:36

Vale. 00:32:37

Tú. 00:32:38

Cada tema. 00:32:39

Te. 00:32:40

Genera un identificador único. 00:32:41

Como cada tema. 00:32:42

Te genera un identificador único. 00:32:43

Tú. 00:32:44

En tal sitio. 00:32:45

Metes a guardar una imagen. 00:32:46

Con una secuencia. 00:32:47

Te va a pintar aquí. 00:32:48

Y como la va a encontrar. 00:32:49

Te va a pintar aquí. 00:32:50

Con lo cual. 00:32:51

Visualmente. 00:32:52

Juegas con esto. 00:32:53

Dices. 00:32:54

No puedo tocar. 00:32:55

El cliente final. 00:32:56

No le voy a pedir que haga no sé qué. 00:32:57

Pero sí le puedo pedir que me suba. 00:32:58

Archivos de una determinada numeración. 00:32:59

Como le puedo pedir que suba archivos. 00:33:00

De una determinada numeración. 00:33:01

Utilizo esos archivos. 00:33:02

Para pintarlo. 00:33:03

De tal manera. 00:33:04

Que no sé qué más cuántos. 00:33:05

Voy viendo. 00:33:06

Qué me deja hacer. 00:33:07

Y qué no me deja hacer. 00:33:08

De una forma natural. 00:33:09

Y uso alternativas. 00:33:10

Esto ya lo hemos. 00:33:11

Explicado antes. 00:33:12

Y esto lo mismo. 00:33:13

Pero en la parte. 00:33:14

Previa de. 00:33:15

De cursos. 00:33:16

También estuvimos tocando. 00:33:17

Porque añadirle esto. 00:33:18

Tampoco se puede añadir. 00:33:19

Fácilmente. 00:33:20

Entonces aquí. 00:33:21

Es cuando decides. 00:33:22

Para hacer esto. 00:33:23

Pues hay que tocar. 00:33:24

Para hacer lo otro. 00:33:25

No hay que tocar. 00:33:26

Esto es un fondo. 00:33:27

Con un determinado espacio. 00:33:28

Distribución. 00:33:29

No tiene. 00:33:30

No tiene tampoco. 00:33:31

Mucho. 00:33:32

Mucho misterio. 00:33:33

¿Cómo funcionan los temas en Moodle? 00:33:34

Me estoy pegando. 00:33:35

Es un rollo. 00:33:36

Vosotros. 00:33:37

Ahí. 00:33:38

Tan tranquilos. 00:33:39

No decís nada. 00:33:40

Me parece maravilloso. 00:33:41

Si hay algo que no. 00:33:43

Tal. 00:33:44

Decidme. 00:33:45

Oye. 00:33:46

Que no. 00:33:47

Dime. 00:33:48

Pero en el tema gráfico. 00:33:50

Sí. 00:33:51

Pero para mí el tema gráfico es. 00:33:52

Una capa. 00:33:53

Que no afecta al corazón. 00:33:54

De modo que. 00:33:55

Si. 00:33:56

Si. 00:33:57

Pero si. 00:33:58

Si. 00:33:59

Si. 00:34:00

Si. 00:34:01

Si. 00:34:02

Si. 00:34:03

Si. 00:34:04

Si. 00:34:05

Si. 00:34:06

Si. 00:34:07

Si. 00:34:08

Si. 00:34:09

Si. 00:34:10

Si. 00:34:11

Si. 00:34:12

Si. 00:34:13

Si. 00:34:14

Si. 00:34:15

Si. 00:34:16

Si. 00:34:17

Si. 00:34:18

Si. 00:34:19

El corazón. 00:34:20

No se los explico. 00:34:21

No, no, no toco código. 00:34:22

Si actualizo el core de Moodle. 00:34:23

La plantilla. 00:34:24

Eh. 00:34:25

No, no, no le afecta. 00:34:26

No se ve afectada. 00:34:27

El problema es que si. 00:34:28

Tocas el corazón. 00:34:29

Lo que hay visto antes. 00:34:30

El efecto antes. 00:34:31

Imagínate que yo. 00:34:32

Hay una cosa que en Moodle. 00:34:33

No tiene. 00:34:34

Y que. 00:34:35

Normalmente en Core. 00:34:36

Nosotros intentamos hacer. 00:34:37

Es decir. 00:34:38

Cuando tú entras. 00:34:39

Lo que es la anterior. 00:34:40

La anterior. 00:34:41

Cuando tú visualizas. 00:34:42

Los temas. 00:34:43

En Moodle. 00:34:44

Por ejemplo. 00:34:45

Los temas. 00:34:46

Van. 00:34:47

No. 00:34:48

No. 00:34:49

No los distingues. 00:34:50

Con código. 00:34:51

No hay nada que diga. 00:34:52

El tema uno. 00:34:53

Tema dos. 00:34:54

Tema tres. 00:34:55

Tema cuatro. 00:34:56

Si tuviésemos un tema uno. 00:34:57

Tema dos. 00:34:58

Tema tres. 00:34:59

Tema cuatro. 00:35:00

Vía CSS. 00:35:01

Luego podemos hacer cosas. 00:35:02

Eso es tocar Core para nosotros. 00:35:03

Porque eso nos permitiría luego hacer cosas. 00:35:04

De. 00:35:05

De alguna manera. 00:35:06

Hay cosas que. 00:35:07

Que Moodle. 00:35:08

No te deja hacer a menos que toques. 00:35:09

El corazón. 00:35:10

La distribución. 00:35:11

Por ejemplo. 00:35:12

En pantalla. 00:35:13

Construye esto de una manera. 00:35:14

Los temas los construye de una manera. 00:35:15

Un TD. 00:35:16

Un TD. 00:35:17

Imagínate que yo quiero hacer. 00:35:18

Visualmente. 00:35:19

No sé. 00:35:20

Que el. 00:35:21

Cambiar completamente la distribución. 00:35:22

Que este número. 00:35:24

El número esté al otro lado. 00:35:25

Eso. 00:35:27

No puedo hacerlo a menos que toque código. 00:35:28

Porque la construcción de Moodle es esa. 00:35:30

Determinada. 00:35:32

Entonces ahí es donde tengo que decir. 00:35:33

Vale. 00:35:34

Evalúo. 00:35:35

¿Puedo hacerlo de otra manera sin tocar? 00:35:36

Sí. 00:35:38

No. 00:35:39

No puedo hacerlo. 00:35:40

Y quiero hacer eso por el motivo que sea. 00:35:41

Tengo que tocar corazón. 00:35:42

Entonces hay que documentarlo. 00:35:43

Porque las actualizaciones. 00:35:45

Si no. 00:35:46

Luego es un jaleo. 00:35:47

Que todo. 00:35:48

Guau. 00:35:49

Sí. 00:35:50

Pero es que Drupal no tiene. 00:35:51

Tiene un sistema modular. 00:35:52

Con unas APIs más robustas. 00:35:53

Aquí no. 00:35:54

Porque la visualización de contenido. 00:35:55

Es que hay una serie de visualizaciones de contenido de Moodle. 00:35:56

Que vienen muy determinadas. 00:35:57

Y ahí es impepinable. 00:35:58

Sobre todo la parte de temas. 00:35:59

Por ejemplo. 00:36:00

Es impepinable. 00:36:01

Como también he pintado. 00:36:02

Una cosa que nos sorprende. 00:36:03

Es que. 00:36:04

Es que. 00:36:05

Es que. 00:36:06

Es que. 00:36:07

Es que. 00:36:08

Es que. 00:36:09

Es que. 00:36:10

Es que. 00:36:11

Es que. 00:36:12

Es que. 00:36:13

Es que. 00:36:14

Es que. 00:36:15

Es que. 00:36:16

Es que. 00:36:17

Es que. 00:36:18

Es que. 00:36:19

Es que. 00:36:20

Es que. 00:36:21

Es que. 00:36:22

Es que. 00:36:23

Es que. 00:36:24

Es que. 00:36:25

Es que. 00:36:26

Es que. 00:36:27

Es que. 00:36:28

Es que. 00:36:29

Es que. 00:36:30

Es que. 00:36:31

Es que. 00:36:32

Es que. 00:36:33

Es que. 00:36:34

Es que. 00:36:35

Es que. 00:36:36

Es que. 00:36:37

Es que. 00:36:38

Es que. 00:36:39

Es que. 00:36:40

En orientation transversal. 00:36:41

En orientation transversal. 00:36:43

En una superficie... 00:36:44

En una superficie travailando. 00:36:45

En una superficie central para el Islam. 00:36:46

En una superficie central para el Islam. 00:36:47

En una superficie central para el Islam. 00:36:48

En una superficie central para el Islam. 00:36:49

En una superficie central para el Islam. 00:36:50

En una superficie central para el Islam. 00:36:51

En una superficie central para el Islam. 00:36:52

En una superficie central para el Islam. 00:36:53

En una superficie central para el Islam. 00:36:54

En una superficie central para el Islam. 00:36:55

En una superficie central para el Islam. 00:36:56

En una superficie central para el Islam. 00:36:57

En una superficie central para el Islam. 00:36:58

которое estamos habitando no se llama. 00:36:59

Que es. 00:37:00

Que es. 00:37:01

Que eswheel. 00:37:02

Quewheel. 00:37:03

Quewheel. 00:37:04

Quewheel. 00:37:05

Pero bueno. 00:42:36

La prueba es rápida. 00:42:38

Si tenemos un theme, un template, un CD... 00:42:39

Empezamos a borrar cosas... 00:42:40

Veremos que cosas desaparecen 00:42:41

O igual que en Moodle deje de funcionar. 00:42:42

Pero bueno. 00:42:44

Es una prueba para tener acceso. 00:42:45

Es decir. 00:42:46

Borro. 00:42:47

Hurdo la versión que funciona. 00:42:48

Y voy probando. 00:42:50

A ver. 00:42:51

Si quito esto. 00:42:52

Que sucede. 00:42:53

Si quito esto. 00:42:54

Que sucede. 00:42:55

Entonces aquí... 00:42:56

Es donde definimos el logo. 00:42:57

Donde está puesto no sé qué. 00:42:58

Donde está puesto no sé cuanto. 00:42:59

Entonces si yo hay que modificar el logo... 00:43:00

Habitualmente... 00:43:01

Está aquí. 00:43:02

Y en algunos casos. 00:43:03

Está con el icono. 00:43:06

Que está en una carpeta de image o cosas así. 00:43:07

Si localizo el logo. 00:43:10

Voy a la carpeta de image. 00:43:11

Lo abro en el GIMP. 00:43:12

Le pongo nuestro logo. 00:43:14

Y ya tengo el Moodle tuneado. 00:43:16

Digo. 00:43:18

Que guay. 00:43:19

Fantástico. 00:43:20

Maravilloso. 00:43:21

En el fondo es tan simple. 00:43:22

Por así decirlo. 00:43:23

Como eso. 00:43:24

Y luego tengo el footer. 00:43:25

Que es la parte de abajo. 00:43:26

El pie. 00:43:27

Lo que llamaríamos el pie. 00:43:28

Y ahí construye... 00:43:29

Moodle una serie de cosas. 00:43:30

Que las puedo tener. 00:43:31

O no tener. 00:43:32

Depende de lo que queramos. 00:43:33

Realmente. 00:43:34

Y con el footer. 00:43:35

Se deja bastante libertad. 00:43:36

Y... 00:43:37

Ahí puedes tocar bastante. 00:43:38

Otra cosa es que te salga bien. 00:43:39

O que toques cosas que igual. 00:43:40

Hay un par de dips. 00:43:41

Que es mejor no tocar. 00:43:42

Pero bueno. 00:43:43

Es probar. 00:43:44

En este caso. 00:43:45

En el Adbar. 00:43:46

Ha incorporado una serie de cosas interesantes. 00:43:47

Como es. 00:43:48

Una carpeta JS. 00:43:49

A través de la carpeta JS. 00:43:50

Lo que añade es. 00:43:51

Todas las librerías de Jota Query. 00:43:52

Que os he dicho antes. 00:43:53

Y con esas librerías de Jota Query. 00:43:54

Podemos hacer cosas muy chulas. 00:43:55

Luego veremos un ejemplo. 00:43:56

Que lo hice el otro día en el taller. 00:43:57

En el de ayer. 00:43:58

Que es. 00:43:59

Que vía Jota Query. 00:44:00

Hacer un efecto visual. 00:44:01

De hacer clic en un lateral. 00:44:02

De un tema Moodle. 00:44:03

Y borrar la parte central. 00:44:04

Entera. 00:44:05

Eso vía los temas gráficos. 00:44:06

Es algo que para un programador. 00:44:07

En cuanto a Jota Query. 00:44:08

Hoy en día. 00:44:09

Realmente es algo tan a la orden del día. 00:44:10

Que empieza a sorprenderme. 00:44:11

Que no se utilice más. 00:44:12

Con más sensibilidad. 00:44:13

Pero es muy muy potente. 00:44:14

Entonces. 00:44:15

En este caso concreto. 00:44:16

Aparte de eso. 00:44:17

Añade un Jota Query. 00:44:18

Y un Jota Query. 00:44:19

Y un Jota Query. 00:44:20

Y un Jota Query. 00:44:21

Y un Jota Query. 00:44:22

Y un Jota Query. 00:44:23

Y un Jota Query. 00:44:24

Y un Jota Query. 00:44:25

Creo que ya lo había dicho. 00:44:26

Es una aplicación muy potente. 00:44:27

En este caso concreto. 00:44:28

Aparte de eso. 00:44:29

Añade un Jota Query. 00:44:30

Que ya para nosotros es interesante. 00:44:31

Porque permite hacer juegos mayores. 00:44:33

Y añade una serie de menús superiores. 00:44:35

Para un bloque de perfil. 00:44:39

Y un bloque de menú. 00:44:40

Entonces directamente esto. 00:44:41

Construye un menú superior de cursos. 00:44:43

Pero vamos a verlo mejoré. 00:44:46

Voy a la parte de temas. 00:44:49

Yo tengo puesto de tal manera que me ordene por tiempo añadido. 00:45:01

No sé si está por defecto. 00:45:05

Lo dije ayer. 00:45:07

Realmente no me acuerdo. 00:45:08

¿Por qué? 00:45:09

Porque a mí me gusta ver los últimos que se han añadido. 00:45:10

De esa manera ves siempre los que han añadido nuevos. 00:45:12

Teóricamente ves novedades en cuanto a propuestas novedosas. 00:45:15

Y no ves el FormalWide o el RunderCons. 00:45:20

Que ya los tienes muy listos. 00:45:23

Entonces voy a buscar el advert. 00:45:26

Vuelvo a la presentación porque ni me acuerdo. 00:45:29

Además es un nombre. 00:45:32

A A R D. 00:45:33

V A A R D. 00:45:35

V A. 00:45:37

A ver. 00:45:39

V. 00:45:41

A R K. 00:45:43

¿Sí, no? 00:45:44

A R D. 00:45:46

K. 00:45:47

Llevo como ejemplos de temas que a mí para comenzar a mí me gustan. 00:45:50

Vale. 00:45:55

Aquí tenemos el advert. 00:45:56

El original. 00:45:57

Derivaciones. 00:45:58

El Zebra. 00:45:59

¿Veis? 00:46:00

Entonces ¿qué tenemos? 00:46:01

Uno y dos. 00:46:04

A ver si me sale el Network. 00:46:05

Derivaciones del mismo. 00:46:10

Sound Downy. 00:46:11

Eso es. 00:46:12

Seguramente lo estoy pronunciando mal. 00:46:13

Pero este. 00:46:15

Este da un empujón muy interesante al desarrollo de temas. 00:46:16

Este. 00:46:22

Este es el que yo digo. 00:46:24

A mí me parece interesante. 00:46:25

Es un desarrollo. 00:46:27

Pero lo que hace es generación de temas. 00:46:29

En este caso, si no me equivoco, esta primera versión. 00:46:32

No me acuerdo si es con temas automáticos o con temas que escribías. 00:46:38

Y en este caso creo que no tengo demo. 00:46:42

Voy a buscar uno que tenga demo. 00:46:44

Vamos a ver este. 00:46:51

Este creo que el tema es fijo. 00:46:53

Pero bueno, nos servirá para ver un poco lo que os decía de los objetos. 00:46:54

A mí visualmente esto. 00:47:01

Voy a empezar a decir el qué. 00:47:02

Y no han hecho más que. 00:47:07

Han hecho lo que os decía antes. 00:47:08

Los laterales. 00:47:10

Es una imagen. 00:47:12

Un fondo que esté bien. 00:47:13

Que incorpora una serie de objetos de fondo. 00:47:15

Visualmente. 00:47:17

Esto es un png transparente colocado en el lateral. 00:47:19

De más misterio. 00:47:23

Que además hacen que, por así decirlo, el fondo de la página. 00:47:24

Esto es transparente. 00:47:27

Lo que hace es que cuando yo coloco. 00:47:29

Si aquí hay un modelo de caja. 00:47:31

Cuando yo coloco encima. 00:47:32

Quede como desplazado. 00:47:34

Pero en realidad no es que quede desplazado. 00:47:35

Es que juegan visualmente para que comiencen el gráfico más allá. 00:47:37

Un degradado aquí arriba. 00:47:40

Que más os fijáis que tiene una pequeña transparencia. 00:47:42

Meter una imagen inicial. 00:47:45

Que esto lo puedo meter yo directamente entrando en código. 00:47:48

O sea, entrando en la edición. 00:47:51

Otro lateral. 00:47:53

¿Por qué? 00:47:54

Porque yo puedo identificar cada una de las dos columnas. 00:47:55

Depende de qué columna sea. 00:47:58

Ponerle un gráfico u otro al objeto. 00:47:59

La cabecera. 00:48:03

Con la imagen. 00:48:05

Y una distribución. 00:48:06

Etc, etc, etc. 00:48:08

No tiene... 00:48:10

¿Cómo explicarlo? 00:48:11

No es que no sea... 00:48:12

No es que sea fácil. 00:48:14

Inmediato. 00:48:16

Pero no es algo... 00:48:17

No es algo extravagante. 00:48:21

No es algo extraño. 00:48:22

No es algo que no se pueda realizar. 00:48:23

Es algo que es decir, buscar lo que nos deja hacer. 00:48:25

Y tener la ocurrencia y el atrevimiento de hacerlo. 00:48:27

Y ya está. 00:48:29

Y ese tema visual es un tema que... 00:48:30

Pues ya empiezo a trabajar. 00:48:32

Sigue siendo cuadrado. 00:48:34

Porque un mundo para bien o para mal. 00:48:35

Sigue siendo cuadrado. 00:48:37

Pero al menos. 00:48:39

Mismamente ganas un punto de distribución. 00:48:40

En este caso. 00:48:43

Como decía. 00:48:44

Una columna. 00:48:45

Una central. 00:48:46

Con una lateral. 00:48:47

Entonces como tengo el filebook activo. 00:48:48

Puedo ver. 00:48:51

Como han construido. 00:48:53

El objeto. 00:48:56

Fijaros. 00:48:57

Aquí tengo el... 00:48:58

Mi columna. 00:48:59

Ah. 00:49:00

Es un negativo. 00:49:01

¿No? 00:49:02

Vale. 00:49:03

Mi tabla. 00:49:05

Que empieza aquí. 00:49:06

Contenido. 00:49:10

La columna. 00:49:11

Que empieza aquí. 00:49:12

El bloque. 00:49:14

Los bloques. 00:49:15

Ahora. 00:49:17

Un segundo. 00:49:18

Que voy a ver donde está la gráfica. 00:49:19

En el header. 00:49:21

Aquí. 00:49:22

Aquí. 00:49:23

Que es una clase que me incorpora. 00:49:25

Si os fijáis. 00:49:27

Han añadido. 00:49:28

Esta imagen. 00:49:30

Y le he añadido. 00:49:31

Left. 00:49:32

Porque es el... 00:49:33

El izquierdo. 00:49:35

O sea. 00:49:36

Han dicho. 00:49:37

La columna izquierda. 00:49:38

El bloque lateral. 00:49:39

La cabecera. 00:49:41

Y añades esta imagen. 00:49:42

¿Y que han hecho? 00:49:44

Al lado contrario. 00:49:45

Vale. 00:49:46

Pues ahora lo mismo. 00:49:47

¿Perdón? 00:49:48

Sí. 00:49:51

Por eso se distribuye. 00:49:52

Pensaba que lo habían hecho de una manera. 00:49:53

Pero lo han hecho con distribución de... 00:49:54

En negativa. 00:49:55

Y hay menos doce. 00:49:57

Entonces. 00:49:58

Lo que han hecho es. 00:49:59

En este caso. 00:50:00

Han hecho distribuciones negativas. 00:50:01

Para hacer el posicionamiento. 00:50:02

Esto también se puede hacer. 00:50:03

Si os fijáis. 00:50:05

¿Lo veis? 00:50:07

Es una distribución negativa. 00:50:08

Que también la podemos utilizar. 00:50:09

Para hacer efectos visuales. 00:50:10

De posicionamiento del objeto. 00:50:11

En posiciones un poco raras. 00:50:13

¿Vale? 00:50:15

En posiciones un poco raras. 00:50:16

Pero floto. 00:50:18

Me voy flotando aquella. 00:50:19

Hasta que lo hago desaparecer. 00:50:21

Y nos fijamos. 00:50:23

Que tenemos. 00:50:24

Columna derecha. 00:50:26

Bloque. 00:50:27

Cabecera. 00:50:28

Tengo una gráfica diferente. 00:50:29

¿Por qué? 00:50:31

Porque tengo al otro lado. 00:50:32

Entonces hago. 00:50:33

Para un gráfico. 00:50:34

Para otro gráfico. 00:50:35

Y es que no tiene más misterio. 00:50:37

Es un fondo. 00:50:40

Y la construcción de menús. 00:50:41

Que es lo. 00:50:42

Para se hicieron unos puntos más. 00:50:43

Últimamente más novedosos. 00:50:44

Seguimos con el. 00:50:45

Con el taller de estructurado. 00:50:47

Los temas. 00:50:50

Entonces. 00:50:51

Una vez descargado. 00:50:52

Y copiado en la carpeta temas. 00:50:53

Lo tenemos disponible para activarlo. 00:50:54

Entonces yo voy a mi opción. 00:50:56

Y activo un tema u otro. 00:50:58

¿Cómo funciona estructura? 00:51:03

Tengo una cabecera. 00:51:06

Tengo una columna derecha. 00:51:09

Como os he dicho. 00:51:10

Left column. 00:51:11

Izquierda. 00:51:12

Perdón. 00:51:13

Tengo una columna central. 00:51:14

Y tengo una columna derecha. 00:51:15

Y un pie. 00:51:17

La estructura. 00:51:18

Convencional. 00:51:20

Clásica. 00:51:22

La habitual de. 00:51:23

De moodle. 00:51:24

La cabecera igual te añade en un segundo bloque. 00:51:25

El navbar. 00:51:27

La estructura de navegación puede estar dentro o fuera. 00:51:28

Pero básicamente esta es la estructura. 00:51:30

Y eso se refleja. 00:51:32

En los dos archivos que os he dicho antes. 00:51:34

De header. 00:51:36

Y de footer. 00:51:37

Si yo voy a. 00:51:39

A esta página. 00:51:40

A ver. 00:51:42

Aquí. 00:51:43

En el diseño tengo un header. 00:51:45

El diseño. 00:51:47

Voy a tocar lo que estoy tocando en este lateral de aquí. 00:51:49

En esta parte de aquí. 00:51:51

Lo que yo veo aquí. 00:51:54

Es lo que estoy pintando. 00:51:57

En el otro lateral. 00:51:59

Entonces si yo empiezo a borrar. 00:52:00

O a eliminar aquí cosas. 00:52:01

Me afectará la cabecera. 00:52:03

Si yo en un punto he terminado. 00:52:05

A ver si funciona. 00:52:08

Porque ayer. 00:52:09

Haciendo esto mismo. 00:52:10

Estaba editando en otra página. 00:52:11

Y no veía los cambios. 00:52:13

Normal. 00:52:14

Si yo hago. 00:52:16

Ataco la cabecera. 00:52:17

Y añado contenido a la cabecera. 00:52:18

Me está afectando la cabecera. 00:52:20

Depende de lo que haga. 00:52:22

Haré una cosa u otra. 00:52:23

En este caso concreto. 00:52:26

Para trabajar de una manera más. 00:52:28

Más controlada. 00:52:33

¿Qué es lo que puedo hacer? 00:52:34

Cambiar logos. 00:52:37

Posicirlos. 00:52:38

Cambiar distribución de los objetos. 00:52:39

En pantalla. 00:52:40

Es decir. 00:52:41

De una manera u otra. 00:52:42

O en este caso concreto. 00:52:43

Trabajaremos una opción. 00:52:44

Que os pediré que la hagáis vosotros. 00:52:46

De diseño líquido o no diseño líquido. 00:52:48

Vamos a hacer un pequeño ejemplo. 00:52:50

De lo que sea diseño líquido o no. 00:52:51

Este diseño es un diseño líquido. 00:52:53

Que significa. 00:52:54

Que mi. 00:52:55

Ocupa todo lo que ocupa la pantalla. 00:52:57

Si distribuir los objetos. 00:52:59

De alguna manera. 00:53:01

Esto crece. 00:53:02

Eso se pega allí. 00:53:03

Eso se pega allí. 00:53:04

Perdón. 00:53:08

Los diseños líquidos. 00:53:09

Tienen ventajas y desventajas. 00:53:10

Tiene una ventaja. 00:53:12

Que es que los contenidos se adaptan. 00:53:13

A pantalla del usuario. 00:53:14

Y tienes ventajas. 00:53:15

Que es que a nivel gráfico. 00:53:16

Tienes una serie de limitaciones. 00:53:17

A la hora de poder aplicar. 00:53:18

Según que efectos. 00:53:19

Efectos redondeados. 00:53:20

O efectos de comienzo y de cierre. 00:53:22

En moodle. 00:53:24

Que no te deja tocar la estructura. 00:53:25

Y que además. 00:53:27

Con un diseño líquido. 00:53:28

Pues se hacen inmanejables. 00:53:29

Con lo cual. 00:53:30

Si quieres hacer algún efecto visual. 00:53:31

De cierre. 00:53:32

Tienes que forzarlo. 00:53:33

A que el diseño tenga. 00:53:34

Un tamaño fijo. 00:53:35

Porque el gráfico. 00:53:36

Lo has de crear. 00:53:37

Específicamente para. 00:53:38

Para ese tamaño. 00:53:39

Vamos a. 00:53:40

Si os parece. 00:53:41

Vamos a esta página. 00:53:42

O a cualquiera. 00:53:43

Es diferente. 00:53:44

Pero es esta. 00:53:45

Porque así probamos todos. 00:53:46

Y vamos a tocar. 00:53:47

Lo que se llamaría el page. 00:53:48

Vamos a hacer una cosa al page. 00:53:49

Que es. 00:53:50

Jugar un poco. 00:53:51

Con los anchos. 00:53:52

Entonces. 00:53:53

Si yo pincho en el page. 00:53:54

Y pincho en el. 00:53:55

En estilo. 00:53:56

Yo he creado. 00:53:57

Un estilo. 00:53:58

Un. 00:53:59

Un identificador. 00:54:00

He creado yo. 00:54:01

En los estilos. 00:54:02

Un identificador page. 00:54:03

Porque no venía por defecto. 00:54:04

En este. 00:54:05

En este template. 00:54:06

Al. 00:54:07

Al crearlo. 00:54:08

Voy a crear un filebook. 00:54:09

Directamente al contenido. 00:54:10

Para entrar. 00:54:11

Para que podáis hacer pruebas. 00:54:12

Entonces voy a hacer una cosa. 00:54:13

Que se llamaría un ancho. 00:54:14

Voy a definir un ancho. 00:54:15

Por ejemplo. 00:54:16

800 píxeles. 00:54:17

Defino un ancho. 00:54:18

De esa manera. 00:54:19

Ya sé. 00:54:20

Cuanto me va. 00:54:21

Me va. 00:54:22

Cuanto cabe. 00:54:23

Y un segundo truco. 00:54:24

Que va muy bien. 00:54:25

Para el que no lo sepa. 00:54:26

Es como. 00:54:27

Justificar. 00:54:28

Como centro un objeto. 00:54:29

Una caja. 00:54:30

En un espacio vertical. 00:54:31

Un espacio. 00:54:32

Vertical. 00:54:33

De horizontal. 00:54:34

Bueno. 00:54:36

También podrías. 00:54:37

Vamos. 00:54:38

Puedes hacerlo en la portada igualmente. 00:54:39

En la portada también te permitiría. 00:54:40

Pero el acceso. 00:54:41

Os lo. 00:54:42

Os lo doy ahora. 00:54:43

El password es el mismo. 00:54:44

El usuario está del 01 al 20. 00:54:45

Cada uno de los usuarios. 00:54:46

Tenéis habilitado un espacio de profesor. 00:54:47

Por si alguno quiere. 00:54:48

Si no. 00:54:49

Si no. 00:54:50

Si no. 00:54:51

Si no. 00:54:52

Si no. 00:54:53

Si no. 00:54:54

Si no. 00:54:55

Si no. 00:54:56

Si no. 00:54:57

Si no. 00:54:58

Si no. 00:54:59

Si no. 00:55:00

Si no. 00:55:01

Si no. 00:55:02

Si no. 00:55:03

1. 00:55:34

2. 00:55:35

3. 00:55:36

4. 00:55:37

5. 00:55:38

6. 00:55:39

7. 00:55:40

8. 00:55:41

Vosotros, 2. 00:55:42

9. 00:55:43

10. 00:55:46

11. 00:55:49

12. 00:55:50

Tres de los dos juntos. 00:55:51

14. 00:55:52

15. 00:55:53

16. 00:55:54

17 y 18. 00:55:55

Nos van a quedar lifos, por si acaso. 00:55:56

Para tocar. 00:55:59

Por si queréis tocar contenido. 00:56:00

Lo he dejado habilitado porque hay una parte de contenido que luego veremos que si tenéis 00:56:01

espacio profesor pues podéis al menos probar. 00:56:05

El usuario es el 01, 02, 03, 04 y el password es este, usuario mayúscula guión bajo password 00:56:10

1 y el este. 00:56:16

Lo siento por el password tan raro. 00:56:18

No he cambiado la... 00:56:22

Las últimas instalaciones de Moodle incorporan un sistema de password que si no lo cambias 00:56:25

se mantiene ahí, no lo he cambiado, que es de aquello de un número, tantas letras o 00:56:29

no sé qué, no sé cuánto. 00:56:35

Se puede cambiar, ¿eh? 00:56:36

Esa configuración se puede cambiar, no es algo que esté limitado. 00:56:37

Hay una configuración que tú dices, incluso puedes definir cuántos números quieres, 00:56:41

cuántas letras quieres en el password. 00:56:45

Puedes definir. 00:56:46

Entonces hay creados 20 cursos, están del otro día, igual encontráis cosas que no 00:56:53

se han limpiado. 00:56:57

¿Puedes entrar? 00:56:59

Hay creados 20 cursos. 00:57:02

Estáis como profesores en cada uno de los 20 cursos, de tal manera que la parte de edición, 00:57:03

que luego veremos cómo... 00:57:08

Insertaremos código embebido para que luego podáis probarlo, este tipo de cosas. 00:57:10

¿Entonces? 00:57:15

¿1? 00:57:36

¿1? 00:57:37

El 1 es fijo, ¿eh? 00:57:38

Perdón. 00:57:39

El password es fijo. 00:57:40

El password es único. 00:57:41

No cambia según el... 00:57:42

Perdón. 00:57:43

El password es fijo. 00:57:45

Es el usuario el que cambia el número. 00:57:46

Entonces, una vez dentro, lo que empiezo es a jugar con el espacio. 00:57:53

¿Qué he hecho? 00:57:57

Mi página, mi objeto página, lo he limitado en ancho. 00:57:58

Otra cosa es que se me limite, ¿eh? 00:58:02

Porque luego, por así decirlo, hay cajas dentro que igual fuerzan a que no pueda ser más pequeño. 00:58:04

Igual aquí tengo una caja que ocupa, o una imagen que ocupa 700 píxeles, 00:58:09

y yo aunque quiera hacerlo más pequeño, la imagen se tiene que ver. 00:58:13

Y me dicen, no, yo tengo que mostrar una imagen aquí, me han metido una imagen, no puedo hacer nada. 00:58:16

Entonces, habría que analizarlo. 00:58:19

Pero imaginemos que puedo poner 800. 00:58:21

Esto me sirve en cualquier modelo de caja para centrar un objeto en este eje. 00:58:23

Y ahora lo que haré es, como queda un poco así, voy a trabajar con el fondo de página para poner un color, al menos. 00:58:30

Ya os he dicho que hoy tenía el día verde. 00:58:36

Voy al body, pincho en el body, le hago background-color-green, y lo veo todo verde. 00:58:39

Chulísimo, ¿no? 00:58:51

O sea, es un diseño ahí impactante. 00:58:53

Por lo menos impactante es, que no sería lo contrario. 00:58:57

Impactante, impactante es. 00:59:00

Entonces, ¿qué me he dado cuenta al hacerlo? 00:59:04

Tío, es que el objeto page, el central, no tiene fondo. 00:59:07

Tengo que ser, de verdad, de ser malas personas. 00:59:12

Entonces, le digo, al fondo, me añades un color. 00:59:17

Venga, ya, bueno, ya esto ya empieza a ser otra cosita. 00:59:23

Ya empezamos a verlo bien. 00:59:27

Y aquí podemos empezar a jugar. 00:59:29

Esto es, esto es empezar a jugar. 00:59:33

Border, si yo pongo border, por ejemplo, tres pixels, black, perdón, me he colado. 00:59:36

Solid. 00:59:44

Tengo un border de la página. 00:59:49

Y ahora ya aquí, pues, lo que es empezar a hacer. 00:59:53

Pues podemos empezar a, una vez que nos hemos lanzado, pues yo empezaré a avanzarme con todo. 00:59:58

Pues ahora venga, empiezo a poner enlaces, pues cambio enlaces. 01:00:02

Venga, verde, este color de fondo no me gusta, los quiero todos en verde. 01:00:09

Venga, la cabecera también en verde. 01:00:16

Es más, la cabecera, ¿eh? 01:00:20

Es más, la cabecera quiere un border inferior. 01:00:28

Border, bottom, dos pixels, solid, black. 01:00:31

Venga. 01:00:38

Puedo trabajar visualmente con algo sin hacer nada. 01:00:40

Sin hacer nada, porque en el momento que recargue la página, todo esto se va, se desaparece. 01:00:44

Con lo cual, hay veces que es mejor apuntar lo que hacemos para luego pasárselo a quien tenga que aplicar los cambios. 01:00:50

O si no, el pobre, luego se vuelve loco. 01:00:55

Mira, que chulo, es decir, muy bien, pero no recargues. 01:00:58

No, lo haces de uno en uno y documentas de alguna manera y le pasas los cambios. 01:01:04

Dices, aplica esto a esta cabecera o vas luego al CSS, vas a buscar la línea concreta y lo localizas y lo cambias. 01:01:08

Al menos ya has visto cómo queda antes de hacer ningún tipo de aplicación. 01:01:16

¿Qué tenemos? Si os fijáis, a ver si es así o es incorrecto. 01:01:23

Si os fijáis, el enlace de arriba es de otro color, porque yo puedo tener enlaces diferenciados por zonas. 01:01:27

Porque la parte de arriba resulta que es un objeto header y tiene su propia gama de colores. 01:01:36

No te vas a salvar tampoco, bandido. 01:01:43

Tú también estarás en verde. 01:01:49

Pero luego tengo que ver dónde está. 01:01:53

Luego la idea es, vas al CSS, buscas esto, buscas esto y vienes a ver dónde estaba el código, dónde estaba ese color y lo reemplazas. 01:01:55

Y al reemplazarlo, digamos que al actualizar la página ya bien, deberías ver los nuevos cambios que has visto previamente en el filebook y te ha servido para evaluarlos. 01:02:05

¿Modificas el styles o añades abajo? 01:02:14

Si es que se quiere decir que ejecuto lo último que he visto. 01:02:19

Sí. 01:02:25

Depende. 01:02:35

Depende, yo depende. 01:02:38

Si es un diseño base, si es el diseño base, voy al base. 01:02:39

Si lo que hago son adaptaciones pequeñas sobre partes concretas de un diseño ya establecido que me viene de otro espacio, 01:02:44

lo que abro es una especie de comentario, cambios introducidos, no sé qué a raíz de tal, y sobreescribo, como tú bien dices, los estilos. 01:02:50

¿Cómo te llamas? 01:02:58

Raúl. 01:03:01

Raúl, lo que dices en CSS, los objetos se construyen de una manera encascada. 01:03:02

Y si yo en una hoja de CSS, que es una hoja de código, al final de todo hago estos códigos, 01:03:09

él lee y como llega al último va aplicando y el último machaca lo que he definido previamente. 01:03:16

Con lo cual, de alguna manera, es lo que decía, o cambias el original o cambias abajo y si borras lo de abajo, 01:03:22

lo último que has añadido, te mantendría el original de manera natural. 01:03:28

También es cierto que luego hay un truco, que en algunos casos hay un estilo que no se aplica. 01:03:33

A veces hay un estilo que tú aplicas y dices, no, es que no se ve. 01:03:39

Bueno, pues ese no se ve, muchas veces viene definido porque hay algún objeto que le está molestando. 01:03:43

Normalmente lo que se hace es esto. 01:03:54

Esto, de alguna manera, le estás diciendo al CSS que lo que dice antes es lo que tú quieras. 01:03:58

Pero esto es lo que vale. 01:04:06

Esto manda aquí. 01:04:08

Este es un pequeño truco que según en qué casos aplicáis un estilo y no lo veis, seguramente es una derivación de otros estilos. 01:04:11

A veces es difícil encontrar de dónde viene ese color y tiras por la directa. 01:04:18

Le digo que es importante... Oye, olvídate lo anterior. 01:04:24

Es que hay unas combinaciones ahí que a veces no son fáciles de localizar. 01:04:29

Pero he visto cómo hago, en realidad, para modificar rápidamente. 01:04:33

En el caso de una imagen, lo que hago es cambiar la ruta. 01:04:36

Si yo tengo una imagen o un fondo que apunta a una ruta determinada, yo cambiando la ruta, cambiaría la imagen. 01:04:40

Lo que haría sería publicarlo en el FTP, esa imagen. 01:04:49

Por ejemplo, no tengo ninguna. 01:04:52

Imagen, fondo 2, y ahí visualizaría la imagen. 01:04:54

No tiene más misterio. 01:04:58

O sea, los CSS, para bien o para mal, las reglas básicas son muy pocas. 01:05:00

Es fácil de aprender a tocar cuatro cosas básicas. 01:05:05

¿Y este CSS que estás modificando, para qué es? 01:05:08

¿Es el video web? ¿Tienes que subirlo también? 01:05:12

No, no. Lo que estás modificando es en tu máquina. 01:05:15

Apúntalo o seleccionas código, lo copias y te lo llevas. 01:05:18

No es tan fácil. 01:05:23

Hay una opción para guardar el CSS, pero nosotros no lo utilizamos. 01:05:25

Lo utilizamos como base. 01:05:30

Nosotros habitualmente trabajamos con el Firebug y el CSS es abierto. 01:05:31

Una vez que lo variamos en Firebug, vas al otro lado, lo buscas y lo aplicas. 01:05:34

La hoja de estilo es abierta. 01:05:39

Entonces dices, lo veo, haces cuatro o cinco cambios, para no hacer uno, 01:05:41

lo aplicas al CSS que tienes abierto, recarga la página 01:05:45

y ves si realmente el cambio ha sido correcto. 01:05:48

Lo tienes los dos en paralelo. 01:05:51

No trabajamos con CSS, porque trabajar con CSS a mano, a memoria, es inviable. 01:05:53

Y esto te ahorra una de trabajo espectacular. 01:05:58

Y se otorga a ver cosas de código, cosas que dices, ¿y esta imagen dónde está? 01:06:02

A veces no la encuentras, pues ahí te da la ruta, con lo cual vas muy directo. 01:06:07

Tiene un sistema de Firebug también de cargas. 01:06:11

Puedes detectarse un archivo, ha fallado la carga o no, 01:06:13

te está ralentizando una carga o no. 01:06:16

Es una maravilla. 01:06:18

Ya está, y ya está. 01:06:23

Talibán, es una maravilla. 01:06:25

Todo el mundo utiliza Firebug. 01:06:27

Y el de Safari, en una actividad de Safari también es muy chula. 01:06:30

Y hay una opción para cargar, 01:06:37

que eso nos ocurrió con un cliente de una entidad bancaria, 01:06:39

que tiene Explorer 6. 01:06:42

Y además tienes que hacer los cambios en sus máquinas. 01:06:48

Que no puede instalar nada. 01:06:52

Absolutamente nada. 01:06:54

Olvídate de Firefox, de Firebug, de nada, nada. 01:06:56

Y un simple text. 01:06:59

Y ni siquiera tiene un FTP. 01:07:01

Con lo cual tenemos que... 01:07:03

No voy a llorar. 01:07:05

Pero resulta que hay un resquicio. 01:07:07

Hay un resquicio hasta para eso. 01:07:09

Hay una posibilidad de cargar un Firebug Lite en un Explorer a través de una URL. 01:07:11

Con lo cual, ahí encontramos un poco de luz y podemos ver exactamente 01:07:18

qué estaba pasando en zonas determinadas. 01:07:22

Además era un tema de Scorum. 01:07:24

Con lo cual, ya salvaje. 01:07:26

De determinadas de la pantalla. 01:07:28

Es que es diferente. 01:07:41

Tú puedes tener definida en CSS una regla general. 01:07:43

Que sería, por así decirlo, éstas. 01:07:47

Te fijas, una regla general. 01:07:50

Y luego puedes tener definidas reglas que anulan la regla general. 01:07:53

Perdón. 01:07:57

Entonces, si tienes reglas que anulan la regla general, tendrías que cambiar todas las reglas. 01:07:59

La general y las que anulan la regla general. 01:08:03

Esta cambia todas. 01:08:06

Todas son iguales. 01:08:08

Pero la de arriba, como se rige por una excepción, no la puedo cambiar. 01:08:09

Tengo que ir a la excepción y cambiarla. 01:08:12

Yo cambiando red, he cambiado todos. 01:08:14

He cambiado de aquí, pero he cambiado en todos. 01:08:16

Todos los que se rigen por la generalidad. 01:08:18

El de arriba, no. El de arriba es una excepción. 01:08:20

Con lo cual, tienes que ir a la excepción. 01:08:22

Eso es muy útil. 01:08:24

Las excepciones son muy útiles. 01:08:26

Yo, por ejemplo, aquí meter un enlace en verde. 01:08:28

En la barra de menú. 01:08:32

Pues, como veréis, no se va a ver. 01:08:34

Si los enlaces son verdes. 01:08:36

Entonces, tengo que ir a la barra de menú. 01:08:37

Oye, en la barra de menú, los enlaces tienen que ser de color blanco. 01:08:38

Porque si no, no se van a ver. 01:08:41

Por eso están las excepciones. 01:08:43

No te entiendo. 01:08:51

Puedes llegar a controlarlo. 01:08:59

Porque los objetos... 01:09:01

Te identifican las actividades. 01:09:03

Y el objeto. 01:09:05

Llega a identificarlo, sí. 01:09:06

Ahí sí que puedes llegar. 01:09:08

Incluso puedes identificar el tipo de recurso que pones. 01:09:10

Entonces, un tipo de recurso, hacer una cosa u otra. 01:09:12

Por ejemplo, puedes hacer que los objetos de test. 01:09:15

Esto nos ocurrió en un caso hace poco. 01:09:17

Los test determinados de un curso. 01:09:19

Por ejemplo, que tengan una apariencia o un espacio más arriba o más abajo. 01:09:21

O algo. 01:09:23

Puedes hacer cosas con eso. 01:09:24

Y dentro también. 01:09:26

Ver el contexto. 01:09:27

Ahí llega. 01:09:28

Como de apurado. 01:09:29

Tenemos que ver la casuística. 01:09:31

Pero llega, llega. 01:09:33

Vamos a la... 01:09:35

Seguimos en esto que llamamos presentación. 01:09:37

Moodle es cuadrado. 01:09:41

Y sigue siendo cuadrado. 01:09:43

Lo que peor lleva a Moodle es la parte central de contenidos. 01:09:45

Eso sí que es cuadrado, pero cuadrado, cuadrado, pero cuadradísimo. 01:09:48

Es una tabla. 01:09:51

TD. 01:09:53

TD. 01:09:54

Y TD. 01:09:55

Y ahí sí que... 01:09:56

Los juegos visuales sí que es ya de... 01:09:58

Eso sí que son divertidos. 01:10:02

Para conseguir aquí algo visual, es divertido. 01:10:04

Porque no tiene una estructura fácil de montar. 01:10:06

Entonces tienes que jugar. 01:10:09

¿Qué puedo hacer aquí? 01:10:10

Puedo hacer que este TD... 01:10:11

Por ejemplo, ponerle un fondo a este objeto. 01:10:13

Imaginaos que yo tenga aquí un fondo. 01:10:15

Aquí lo puedo hacer. 01:10:16

Le hago un redondeado. 01:10:17

Puedo hacer que aquí tenga todo redondeado. 01:10:19

Podría llegar a hacerlo. 01:10:22

Y yo sé que, por ejemplo, hay máximo cinco iconos. 01:10:24

Con lo cual, ya tiene un gráfico de una determinada manera. 01:10:26

Y hago que el alto como mínimo, el alto mínimo, sea de no sé qué. 01:10:29

Puedo hacer juegos. 01:10:33

Ahora bien, la parte central. 01:10:34

Si empiezo a hacer juegos visuales en la parte central, un poco más avanzados. 01:10:36

Por desgracia, ahí tenemos muchas limitaciones. 01:10:41

Porque se construye una manera que no... 01:10:44

No deja mucho juego. 01:10:47

Pero bueno, aún así se pueden hacer cositas como las que habéis visto en los diseños. 01:10:48

Emul 2.0 rompe todo lo que os estoy explicando. 01:10:54

Lo tiráis a la basura. 01:10:56

Y el año que viene lo volvemos a hablar. 01:10:57

Así te lo digo. 01:11:00

A nivel de cómo construir los temas, cambia mucho. 01:11:06

Teóricamente, sí. 01:11:10

Teóricamente, es más flexible. 01:11:11

Pero bueno. 01:11:13

¿Eh? 01:11:16

Empieza a ver. 01:11:21

Por eso yo también... 01:11:22

Es un tema... 01:11:23

Nosotros tenemos un campus. 01:11:24

Si alguien quiere entrar y necesita probar el Moodle 2.0. 01:11:25

Que me avise. 01:11:31

Envíe un mail y yo le dejo un acceso de profesor a un campus 2.0. 01:11:32

Tenemos uno que se actualiza cada semana con el core de Moodle. 01:11:35

Es un diseño convencional de Moodle 2.0. 01:11:42

Segundito. 01:11:45

¿Alumno no? 01:11:46

Bueno, pues alumno. 01:11:50

Esto es un 2.0. 01:11:53

Incorporarse de objetos nuevos. 01:11:54

De menú de navegación. 01:11:56

De desplegable lateral. 01:11:57

Hay un cambio conceptual importante. 01:11:59

Incorpora una especie de navegación. 01:12:01

Ahora a ver si... 01:12:03

Vale. 01:12:06

Me incorpora navegación lateral. 01:12:07

Me incorpora una serie de objetos nuevos. 01:12:13

De alguna manera habrá que estudiar cómo nos van a afectar. 01:12:15

Pero no. 01:12:20

Vuelvo al tema. 01:12:21

No es una limitación. 01:12:22

La limitación muchas veces está en lo que nosotros queramos hacer con el desarrollo. 01:12:23

Por eso no me acuerdo mi cuenta de administrador. 01:12:30

Ahora buscaré. 01:12:33

No puedo entrar. 01:12:36

Si alguien por un casual quiere probar Moodle 2.0 como profesor y le hace ilusión. 01:12:39

Que me envíe un mail y le habitaré un par de recursos para que pueda probarlos. 01:12:44

Algunos códigos rápidos para no programadores CSS. 01:12:57

Por cierto, la presentación está colgada en el campus de MoodleMoodle. 01:13:00

En los talleres. 01:13:04

Ayer no estaba, pero ya ayer la publiqué. 01:13:05

Un display known nos oculta la altura, la anchura de un objeto. 01:13:09

O el flow hidden, en este caso, es cuando yo defino una altura o una anchura. 01:13:17

Y, por ejemplo, quiero que solamente sea esa altura y esa anchura. 01:13:21

Aunque haya más contenido. 01:13:24

Más o menos un fondo, pero no quiero que sobrepase. 01:13:26

Esto lo que hace es un cuadrado y todo lo que sale de ese cuadrado lo borra. 01:13:28

Nos lo oculta completamente. 01:13:32

Va muy bien para según qué diseño. 01:13:34

Flatlet o Flatlight es habilitar lo que se llama el modelo de caja en diseño de web. 01:13:37

Que lo que hace es que permite a los objetos estar flotando en el escenario. 01:13:43

Esto es muy divertido y al mismo tiempo es una tortura para desarrollar. 01:13:47

¿Lo habéis oído? 01:13:52

Muy divertido. 01:13:54

El modelo de caja en diseño web es muy divertido. 01:13:55

Al mismo tiempo, una vez que te acostumbras, vas cogiendo los truquillos. 01:13:58

Y con Explore es más divertido todavía. 01:14:02

Background color. 01:14:04

Va a poner un color de fondo. 01:14:06

Tamaño de letra. 01:14:08

Color. 01:14:09

El color no va por font color. 01:14:11

Color. 01:14:12

Border. 01:14:13

Va a poner un border. 01:14:14

Y esto es mentira. 01:14:15

Según se pica. 01:14:17

No os creáis que hay mucho más. 01:14:20

Voy a dejar 5 códigos más que son los que utilizan el resto. 01:14:22

Es esto. 01:14:24

Está colgado en el campus. 01:14:27

En el Moodle Moodle. 01:14:28

En los talleres. 01:14:29

¿Qué más? 01:14:32

El header. 01:14:33

El header me sirve para hacer toda la carga superior. 01:14:34

Para poner el logo. 01:14:37

No sé qué. 01:14:38

Habitualmente lo utilizas para poner el nombre del usuario. 01:14:39

Lo utilizas habitualmente para eso. 01:14:42

Es lo convencional con lo cual es lo que habitualmente se hace. 01:14:44

En nuestro caso, por así decirlo, lo que yo haría es aprovechar a cargar librerías. 01:14:47

Aquí es donde aprovecharía a cargar jQuery o a cargar otras librerías. 01:14:52

En el footer. 01:14:59

La librería. 01:15:00

¿Cuál es el pequeño? 01:15:11

Cuando estás en un curso, muchos temas tienen... 01:15:12

Ya, pero la carga javascript lo haces en un espacio. 01:15:16

Yo tengo una excusa. 01:15:30

Como no soy programador, no lo sé. 01:15:31

No lo sé. 01:15:34

Yo habitualmente lo hago. 01:15:35

Me gusta cargarlo allí. 01:15:36

Si meto un jQuery, haces una carpeta .js y lo metes. 01:15:37

¿Qué ventaja tenemos? 01:15:40

Hay unas librerías muy potentes que están desarrolladas, 01:15:41

que podemos implementar de una manera más o menos sencilla, 01:15:44

sobre la base de Moodle y darles potencia gráfica. 01:15:47

Hay una librería, por ejemplo, de tooltips de jQuery que es muy potente. 01:15:50

Cambiando eso y cambiando algunas cosas del core, 01:15:53

tienes lo que habéis visto antes, los tooltips visuales. 01:15:56

Entonces, ¿qué más? 01:16:00

¿Diseñaríamos un código PHP que nos diga si el usuario actual es de Barcelona o Madrid? 01:16:03

Vamos a hacerlo. 01:16:08

Voy a hacerlo yo. 01:16:09

Os voy a enseñar el código. 01:16:11

Ah, no lo tengo. 01:16:13

Aquí. 01:16:14

Mala persona. 01:16:16

Vamos a ir a la cabecera. 01:16:18

Os lo enseño. 01:16:19

Os lo dejo publicado para que lo veáis. 01:16:20

Aquí está. 01:16:23

Voy a hacer este pequeño código. 01:16:25

Bueno, ya lo tengo hecho. 01:16:27

Este pequeño código lo que me hace es, en la cabecera del header.html, 01:16:29

cargo esto a la hora de la construcción de la página. 01:16:35

¿Qué hago? 01:16:39

Le digo, si el usuario tiene una ciudad definida, ponme la ciudad. 01:16:40

Si no lo tiene, le pongo el default. 01:16:45

¿Para qué me sirve esto? 01:16:47

Para que luego, vía CSS, mostrar o no contenido a un usuario según la ciudad que sea. 01:16:48

O según el departamento. 01:16:54

O según si es hombre. 01:16:55

O si le gusta la cerveza. 01:16:56

O lo que quiera. 01:16:59

Utilizo un pequeño código PHP para luego, visualmente, con trucos visuales, mostrarle una información u otra. 01:17:01

Luego entraríamos ya en algo más complejo. 01:17:10

Es decir, esto también podemos aplicarlo con agrupamientos o cien mil cosas. 01:17:11

Para que entendáis un poco, pequeños giros. 01:17:15

Decir, oye, y si hago esto, ¿qué ocurre? 01:17:18

Pues si hago esto, resulta que tengo una potencia brutal de visualización. 01:17:20

Entonces yo digo, pues voy a putear a los de Madrid, con todo cariño. 01:17:24

Creo que alguno está expuesto como usuario de Madrid. 01:17:27

Ya pues. 01:17:31

Voy al CSS. 01:17:33

Uy, Dios mío, que feo, por favor. 01:17:34

Voy al CSS. 01:17:36

A ver si lo tengo por algún lado. 01:17:38

Mira, sí, lo tengo aquí. 01:17:39

Los de Madrid creo que no veis el bloque de noticias. 01:17:41

Creo que el bloque de noticias está comentado, ¿no? 01:17:45

A ver. 01:17:47

Sí, sí, no. 01:17:48

Si ponéis en vuestro perfil, si cambiáis a Madrid, no veréis el bloque de noticias. 01:17:49

Este bloque de aquí, son las últimas noticias. 01:17:54

Lo hemos ocultado para los usuarios. 01:17:57

Es que no me apetece que vean las últimas noticias los de Madrid. 01:18:00

He hecho una regla CSS específica, seleccionando un tipo de usuario. 01:18:05

Lo he capturado, le he devuelto una clase, que es lo que CSS me interesa. 01:18:10

He tocado el código muy poquito, para no tocar una cosa salvaje que luego tenga que actualizarlo. 01:18:14

Además he tocado en el header, ni siquiera en el core. 01:18:19

Ni siquiera en el core, tocan el tema que pueda añadir el código. 01:18:22

Y eso lo he utilizado, a mi favor, para mostrar o segmentar información. 01:18:24

Por lo mismo, puedo trabajar con la cabecera. 01:18:29

La cabecera puede ser diferente, depende del departamento. 01:18:31

Los bloques, los colores pueden ser diferentes. 01:18:35

Puedo mostrar o ocultar bloques vía CSS. 01:18:37

Ojo, no es un tema seguro. 01:18:40

Es un tema visual, juegos visuales. 01:18:43

El objeto está ahí, lo ocultamos. 01:18:46

No es un tema de decir, pongo aquí una información súper confidencial, si la oculto vía CSS. 01:18:48

No, está ahí. 01:18:53

Lo que pasa es que no se ve. 01:18:55

Cualquiera que vea un poco el código, la ve. 01:18:57

No funciona para eso. 01:18:59

Solo los ven los de Barcelona. 01:19:03

No lo sé. 01:19:05

Pero los de Cuenca tampoco. 01:19:08

No puede ser, no. 01:19:11

Tenías que verlo, ¿seguro? 01:19:12

¿El bloque de últimas noticias? 01:19:15

¿Este bloque de últimas noticias? 01:19:17

Igual no tenéis últimas noticias, habéis añadido. 01:19:22

Igual alguien ha tocado... 01:19:24

Estuvieron en otro taller, igual han tocado el bloque de noticias y no lo han eliminado. 01:19:26

Voy a hacer algo más. 01:19:29

Vamos a hacer algo más salvaje. 01:19:30

Vamos a hacer algo más salvaje. 01:19:33

Eh... 01:19:36

Hay... 01:19:38

Hay habido... 01:19:41

Una reivindicación. 01:19:43

Hay una reivindicación de tierra. 01:19:45

Vamos a hacer algo más divertido. 01:19:48

Ah, bueno, sí, es otro tema. 01:19:54

No he hecho una segmentación de... 01:19:56

No me he parado a hacer una segmentación de... 01:19:58

He ido muy rápido. 01:20:01

Es más, en el caso de Ciudad es peligroso. 01:20:02

Pues San Sebastián... 01:20:04

Tendríamos que... 01:20:06

En realidad tenemos que hacer lo que es un truncate 01:20:07

y buscar una unidad. 01:20:09

San Sebastián sin espacios y sin tildes. 01:20:11

Y compararlo a través de ahí. 01:20:13

Pero sí que me servía como referencia 01:20:14

para algo rápido que pudiese evaluar. 01:20:16

Entonces voy a hacer algo diferente. 01:20:19

A ver, esto no lo hice el otro día. 01:20:20

Con lo cual corro el peligro de efecto demo. 01:20:22

Espero no suceda. 01:20:24

Eh... 01:20:26

¿Dónde está esto? 01:20:27

¿Dónde lo tengo? 01:20:28

Window, window, window. 01:20:29

Aquí. 01:20:30

A los de Madrid... 01:20:31

Vamos a hacerles una pequeña... 01:20:33

Una pequeña... 01:20:38

Ah... 01:20:40

Fidel Home. 01:20:41

Busco esto. 01:20:43

Busco esto en mi código. 01:20:44

A ver si lo localizo. 01:20:45

Ah... 01:20:47

Fidel Home. 01:20:48

Fidel... 01:20:49

Aquí está. 01:20:51

Entonces... 01:20:52

Eh... 01:20:53

¿Qué era? 01:20:54

Era una clase, ¿verdad? 01:20:55

Era... 01:20:58

Madrid. 01:21:00

Fidel, ¿no? 01:21:02

Era una clase. 01:21:03

Madrid. 01:21:04

Fidel. 01:21:05

Y Madrid, Fidel Home. 01:21:06

Bueno, ya está. 01:21:20

Los de Madrid se van a tener una vista maravillosa de este tema gráfico. 01:21:21

A ver, ¿ha funcionado? 01:21:24

¿Alguien de Madrid está viendo la cabecera? 01:21:25

¿Cómo que no vale? 01:21:33

¿Cómo que no vale? 01:21:34

¿Qué pasa? 01:21:36

¿Qué ha pasado? 01:21:37

¿Se ve la cabecera esta? 01:21:38

¿Que no veis la misma cabecera que yo? 01:21:39

¿No? 01:21:41

¡Jolín! 01:21:42

¡Qué pena me dais ahora mismo, eh! 01:21:43

Ya tú puedes cambiar de... 01:21:45

Bueno, pues entonces tenemos un pequeño... 01:21:52

Un pequeño trozo de código que nos sirve 01:21:56

para utilizarlo gráficamente en nuestro favor. 01:22:00

No solo gráficamente, pero en este caso lo utilizamos 01:22:03

para que gráficamente nos facilite hacer cosas 01:22:06

que de otra manera no sean tan fáciles. 01:22:09

Lo mismo... 01:22:12

Lo mismo sucede... 01:22:13

Esto sucede con un código PHP. 01:22:15

Es más difícil obtener el rol. 01:22:17

Por ejemplo, si alguien lo pregunta, es más difícil obtenerlo 01:22:19

porque el rol funciona a través de contextos. 01:22:21

Y el concepto rol y contextos en Moodle es como hablar de... 01:22:23

Sexo de los ángeles. 01:22:27

Pero digamos que se podría obtener también el rol. 01:22:29

Y otros valores. 01:22:32

Entonces decir, oye, quiero hacer una segmentación gráfica 01:22:34

por departamento, por provincia, por lo que sea. 01:22:37

Podemos hacerlo. 01:22:40

Luego tenemos el tema de jQuery. 01:22:43

Lo que os decía, la otra triada importante es jQuery. 01:22:45

Entonces aquí hay una función que está añadida al header 01:22:48

que creo que está comentada, que va a hacer lo siguiente. 01:22:53

He añadido la librería de jQuery, 01:22:56

que es una librería que permite hacer efectos visuales 01:22:59

con objetos en la pantalla. 01:23:01

Y lo que he hecho es un pequeño truquito. 01:23:03

Para que veáis la potencia de jQuery a nivel general. 01:23:05

Al darle a la columna derecha, oculto la parte central, 01:23:09

al darle a la columna izquierda, la vuelvo a mostrar. 01:23:15

A nivel, no he hecho nada más que un código. 01:23:19

Lo veréis, no tiene más misterio. 01:23:22

No tiene ni siquiera un efecto visual, porque podría hacerlo. 01:23:24

Podríamos hacer que al entrar el usuario, 01:23:27

esté todo oculto y vaya mostrando en efecto persiana 01:23:30

las tres columnas. 01:23:33

Podríamos hacerlo, no hay ninguna limitación. 01:23:35

Más allá de tener un conocimiento o querer hacerlo. 01:23:38

Entonces es este código. 01:23:43

Lo que hace es, cuando el documento está preparado, 01:23:45

voy a decir esto, cuando ha cargado, 01:23:48

es una función de jQuery convencional, 01:23:50

si en la columna izquierda haces clic, 01:23:53

la columna de en medio me la muestras. 01:23:56

Si en la columna derecha haces clic, 01:23:59

la columna de en medio me la ocultas. 01:24:02

Ya está, no hay misterio. 01:24:05

Pues a partir de aquí, en la cabecera, lo que queráis. 01:24:07

Porque hay librerías de jQuery o hay funciones de jQuery 01:24:11

para hacer absolutamente lo que queramos. 01:24:15

Incluso desde el punto de vista de reescribir en caliente 01:24:18

cualquier tipo de contenido a la pantalla. 01:24:21

En una determinada red social X, 01:24:24

resulta que deja una abierta posibilidad de meter jQuery 01:24:28

y resulta que se nos ocurrió 01:24:31

que el tema de según qué información 01:24:34

que aparecía en esa red social, 01:24:37

pues no nos apetecía verla. 01:24:39

Como digamos que nosotros tenemos la posibilidad de meter jQuery 01:24:41

y cargar jQuery, lo que necesitamos es un código 01:24:44

para que determinada información no se muestrase. 01:24:47

Es una potencia brutal, o para escribir código. 01:24:51

Una potencia brutal y también un riesgo al abrirlo. 01:24:54

También es otro tema, pero jQuery es muy muy potente. 01:24:57

Más. Seguimos con esta... 01:25:00

Llamole... algo. 01:25:04

La de bate... algo. 01:25:07

El footer. 01:25:09

Pues la parte inferior. 01:25:11

Normalmente es para meter las informaciones 01:25:13

de la cadera, de pies... 01:25:16

Pongamos una tabla... 01:25:18

Pensad en lo que os gustaría ver allí. 01:25:20

Pongamos contenido fijo. 01:25:22

Pongamos contenido dinámico. 01:25:24

Pensad en qué os gustaría ver allí 01:25:26

y a ver, buscad la manera de cómo integrarlo. 01:25:29

Seguramente se puede hacer. 01:25:33

Los bloques laterales. 01:25:35

¿Qué es lo que se suele hacer habitualmente? 01:25:37

Cambiar los fondos. 01:25:39

Cambiar el color del objeto. 01:25:41

El espacio, los tamaños, la distribución. 01:25:43

A mí, por ejemplo, la distribución del aire. 01:25:45

En Moodle, en general, los diseños me gustan. 01:25:47

Me gusta que un diseño tenga aire. 01:25:49

Me molesta mucho que, por ejemplo, esté todo pegado ahí. 01:25:51

Lo que hago es trabajar con un concepto que se llama padding 01:25:54

para expandir de alguna manera el contenido 01:25:56

y dejarle que tenga un espacio interior. 01:25:59

Otra cosa que me molesta, por ejemplo, a mí de Moodle mucho 01:26:03

es el tema de la distribución de los temas. 01:26:05

Es decir, aquí los temas se construyen 01:26:09

de tal manera que este objeto de aquí en medio 01:26:13

no lo diré, a ver si lo selecciono. 01:26:18

Fijaos la construcción que hace. 01:26:21

Es que hace una construcción que es para... 01:26:23

En fin. 01:26:25

Mete un TR de separador. 01:26:30

Esto es una tabla. 01:26:33

Es que la construcción de temas de Moodle es una tabla. 01:26:35

Es que es, en fin, alucinante. 01:26:37

Un separador aquí en medio. 01:26:40

Para separar. Vale, fantástico. 01:26:45

La sección me la mete aquí. 01:26:47

Con lo cual, a la hora de construir visualmente algo, 01:26:49

¿qué hago? 01:26:52

Tengo un objeto aquí en medio que se llama section, main. 01:26:54

Lo puedo trabajar, pero que es un objeto plano. 01:26:59

No tengo segmentación, no tengo división, no tengo nada. 01:27:03

No puedo hacer nada con él. 01:27:05

Es un objeto único en una tabla, además. 01:27:07

Absolutamente nada. Es muy frustrante en este sentido. 01:27:09

Pero bueno, tienes el separador. 01:27:12

Y con el separador lo que nosotros actualmente hacemos 01:27:14

es intentar que tenga aire. 01:27:16

Porque si no queda muy pegajoso. 01:27:18

En el separador lo que hacemos es 01:27:21

coger y darle aire 01:27:23

para separarlo del contenido. 01:27:27

Ahora ya estaba separado, pero es un poco lo que yo haría 01:27:29

en cuanto a distribución. 01:27:32

En este caso lo que hemos hecho aquí es un borde al objeto. 01:27:34

Pero es que la construcción de los TR, 01:27:37

la construcción del tema, 01:27:39

es que es de verdad... 01:27:41

Mira, esta es la construcción de un tema. 01:27:43

Visualmente es muy limitado. 01:27:45

A mí se me ocurriría. 01:27:48

Le meto un objeto de fondo, 01:27:50

un color, un objeto de fondo, 01:27:52

por así decirlo, que vaya hacia abajo. 01:27:54

Que aquí esté redondeado. 01:27:56

Vale, fantástico. Lo tengo. 01:27:58

Tengo una cabecera que me hace así. 01:28:00

Hacia abajo. Qué guay. 01:28:02

Está arriba y se me ve. 01:28:04

Tengo un separador para hacer el cierre. 01:28:06

Imaginemos, tengo un separador y hago el cierre. 01:28:08

¿Cuál es el problema que nos encontramos? 01:28:10

Lo que os decía antes que era un poco más subgénero. 01:28:12

¿Qué ocurre? 01:28:14

Que tu cabecera de fondo de noticias, 01:28:16

el principal de aquí, 01:28:18

éste también lo incorpora. 01:28:20

O sea, que no empiezas con separador. 01:28:22

Empiezas con sección. 01:28:24

Vamos a explicarlo. 01:28:26

No nos dejaba hacerlo. 01:28:28

Al hacer este modelo, 01:28:30

aquí no dejaba... 01:28:32

No dejaba hacerlo en el modelo 01:28:34

en el que metíamos una imagen superior. 01:28:36

Porque al meter una imagen superior 01:28:38

teníamos que bajarlo todo. 01:28:40

Aquí poníamos la imagen. 01:28:42

En este objeto de fondo poníamos el comienzo 01:28:44

para que coincidiese más o menos a altura con esto. 01:28:46

Y ya trabajamos 01:28:48

para construir el cierre del separador. 01:28:50

En el primero de todos ellos. 01:28:52

Y a partir de ahí ya construíamos el modelo. 01:28:54

Pero es complicado. 01:28:56

Es una estructura que no... 01:28:58

No facilita el trabajo. 01:29:00

Y aquí sí que tenemos muchas limitaciones 01:29:02

a la hora de trabajar. 01:29:04

Y vais a tenerlas. 01:29:06

Pero es lo que tenemos 01:29:08

y no podemos hacerle mucha cosa más. 01:29:10

¿Qué más? 01:29:12

Pues aquí, juegos visuales. 01:29:14

A mí me gusta, por ejemplo, 01:29:16

trabajar mucho con... 01:29:18

Si es una estructura donde tiene que verse 01:29:20

el objeto de fecha de alguna manera, 01:29:22

pues trabajar con... 01:29:24

Visualmente, que no moleste. 01:29:30

Pues no tiene que molestar, pero que se vea claramente. 01:29:32

Secciones, tal manera. 01:29:34

Juegamos con tamaños. 01:29:36

Juegamos con colores. Juegamos con distribución. 01:29:38

Vamos a hacerlo. 01:29:40

¿Qué más cosas más allá del diseño 01:29:42

más convencional? 01:29:44

Lo que os decía antes del modelo de caja. 01:29:46

El modelo de caja es complejo. 01:29:48

Esto es esto. 01:29:50

Esto es esta parte de aquí. 01:29:52

Y este es este de aquí. 01:29:56

Entonces, es una tabla. 01:29:58

No te olvides de hacer movimientos visuales. 01:30:00

Ni moverlos, ni girarlos, ni ponerlos. 01:30:02

Posicionamiento, no sé qué. 01:30:04

Ni izquierda, ni derecha. No, es una tabla. 01:30:06

Está más limitado. 01:30:08

Luego tienes un sumario, que es esta parte de aquí. 01:30:10

Y tienes una sección de menús. 01:30:12

Esta parte de aquí. 01:30:14

Y aquí lo que hacemos, en un caso de diseño que habéis visto, 01:30:16

es a este sumario le hemos hecho 01:30:18

un... 01:30:20

Le hemos hecho un float. 01:30:22

Un floatless a los dos. 01:30:24

Vamos a ver un momento. 01:30:26

En uno de los diseños que habéis visto, 01:30:28

voy a activar la edición 01:30:30

rápidamente. 01:30:32

Voy a añadir 01:30:34

un recurso. 01:30:36

Una etiqueta. 01:30:38

Me vale con cualquier cosa para hacer una prueba rápida. 01:30:40

Una etiqueta. 01:30:42

Muy bien. 01:30:44

Una etiqueta con un nombre 01:30:46

identificativo. 01:30:48

Mete un contenido. 01:30:50

Aquí, por ejemplo, yo puedo meter un contenido 01:30:52

corriente, o puedo generar una tabla 01:30:54

en Dreamweaver y encostarla aquí. 01:30:56

O incluso podría hacer aquí dips 01:30:58

interiores. Podría construir ya algo más complejo. 01:31:00

Algún dip que tenga un tamaño determinado, 01:31:02

que tenga no sé qué. Puedo hacerlo. 01:31:04

Yo aquí puedo hacer construcciones más complejas. 01:31:06

Porque yo en el código me dejo hacer construcciones más 01:31:08

complejas, si tengo el conocimiento para hacerlo. 01:31:10

Pero digamos que es más 01:31:12

limitadito en este aspecto. 01:31:14

Entonces tengo estos dos objetos. 01:31:16

Tengo un objeto de texto y un objeto de recursos. 01:31:18

¿Qué puedo hacer? Por ejemplo, 01:31:20

se planteó en los diseños del Sibier. 01:31:22

En este 01:31:24

caso concreto, sin tocar el core, 01:31:26

le digo que este objeto 01:31:28

sea un float left. 01:31:30

Y que el siguiente, ahora igual 01:31:32

aquí hago una cosa que no ves. 01:31:34

Imagen texto. 01:31:36

La imagen texto ahora mismo 01:31:38

no la utilizo. 01:31:40

Float left. 01:31:42

Coloco uno al lado de otro. Entonces hago que el primero 01:31:44

tenga un tamaño, voy a hacer un tamaño 01:31:46

pequeñito, a ver si funciona. 01:31:48

¿Qué he hecho? 01:31:50

Posicionar los dos objetos uno 01:31:52

al lado del otro. Si ahora a este objeto 01:31:54

le pongo un borde, ya tengo un 01:31:56

efecto visual y no he tenido que hacer 01:31:58

gran cosa realmente. 01:32:00

En vez de pensar, ¿esto es lo que me da? 01:32:02

Pues a ver cómo lo puedo poner de otra manera. 01:32:04

Pues no quiero cambiar el corazón. 01:32:06

Es un float left. Hace modelo 01:32:08

de caja. Se comporta 01:32:10

caja y como le he dado un tamaño fijo, 01:32:12

este puede entrar. Si aquí 01:32:14

pusiese una imagen muy grande, me 01:32:16

empujaría a la caja, con lo cual teníamos problemas. 01:32:18

Pero bueno, digamos que de esta manera 01:32:20

puedo hacer estos montajes. Entonces podría tener 01:32:22

en un formato visual 01:32:24

todos los... 01:32:26

¿Cuál es? 01:32:28

He puesto este 01:32:30

y el otro se me ha colocado directamente. 01:32:32

El sumario y el otro se me ha colocado 01:32:34

directamente. 01:32:36

Espera, porque ahora me he liado yo. 01:32:40

Ah, es este. Este no lo he puesto 01:32:44

en left, pero ha funcionado. 01:32:46

Porque el otro es left. 01:32:48

Border. Esto es lo que pasa por hacer 01:32:50

las cosas sin un 01:32:52

guión previo. 01:32:54

Solid. No. 01:32:56

Dotted. 01:32:58

Dotted. Parece 01:33:00

un poco dotted. 01:33:02

Black. 01:33:04

¿Me he hecho algo? 01:33:06

No me ha hecho ni caso. 01:33:08

Probablemente nada. 01:33:10

No. 01:33:16

No me está haciendo. 01:33:18

Bueno. No voy a seguir 01:33:20

porque ahora si voy a entrar en un bucle de demo y no. 01:33:22

Y eso os liaría. Pero es esto. 01:33:24

Trabajar con las distribuciones y puedo hacer 01:33:26

efectos visuales. ¿Qué más puedo trabajar 01:33:28

en Moodle? Y es algo que a mí es muy importante. 01:33:30

Lo que os explicaba al principio. Contenidos. 01:33:32

Los contenidos se pueden modificar. 01:33:34

Yo puedo trabajar con contenidos 01:33:36

de una manera que me ayuden... Ah, sí. Ahora sí me lo ha hecho. 01:33:38

Pero lo he hecho en el otro lado. 01:33:40

Paso un modelo de caja. Bueno, está igual. 01:33:42

Me lo está haciendo aquí. 01:33:46

Porque el modelo de caja me lo está 01:33:48

llevando a otro lado. Bueno, da igual. 01:33:50

Entonces, ¿qué puedo hacer? Puedo trabajar con contenido. 01:33:52

¿Qué es trabajar 01:33:54

con contenido para mí? Es decirle, mira. 01:33:56

Utilizo 01:33:58

recursos gráficos 01:34:00

creados exprofeso 01:34:02

para motivar 01:34:08

o para dotar de riqueza visual 01:34:10

a mi propio contenido. 01:34:12

Es más, 01:34:16

incluso este gráfico 01:34:18

lo podría tener de fondo 01:34:20

de la primera sección 01:34:22

y trabajar encima con una tabla 01:34:24

o con un div que posicionalmente 01:34:26

me escribiese aquí contenido. 01:34:28

No hay una limitación 01:34:30

a hacerlo. 01:34:32

Es buscarle la vuelta de tuerca 01:34:34

a lo que quiero mostrar y lo que tengo que mostrar. 01:34:36

Y luego, es algo que funciona muy bien. 01:34:38

Es trabajar con recursos 01:34:40

que ayuden a empatizar. 01:34:42

O a impactar. 01:34:44

Poner esto, 01:34:46

digamos que te 01:34:48

ayuda a visualizar 01:34:50

de una manera... 01:34:52

Te ayuda... 01:34:54

Focalizas aquí y no focalizas en el entorno. 01:34:56

Focalizas al usuario 01:34:58

en algo que te interesa focalizar. 01:35:00

Y le ayudas visualmente 01:35:02

a trabajar mejor. 01:35:06

O a una idea concreta. 01:35:08

¿Qué más tenemos? Los bloques de HTML. 01:35:10

Ah, sí, es que si clico 01:35:12

se me va. 01:35:14

Si clico, como tengo todavía activo el tema del script, 01:35:16

se me va 01:35:18

al carajo. 01:35:20

A quitarlo porque si no va a estar flotando 01:35:22

todo el rato. 01:35:24

Vale. 01:35:26

¿Qué puedo añadir? Un bloque HTML. 01:35:28

El bloque HTML es muy útil. 01:35:30

Un bloque HTML es muy útil. 01:35:32

¿Puedo meter un embed? ¿Puedo meter un slicer? 01:35:34

¿O un video YouTube? 01:35:36

Espera, porque... 01:35:38

Estoy haciendo las suyas. 01:35:40

A ver... 01:35:42

¿Ahora? ¿Sí? 01:35:44

¿Sí? Vale. 01:35:46

Puedo hacer... 01:35:48

Puedo meter un slicer 01:35:50

o un video YouTube. 01:35:52

Meterlo ahí al lateral. 01:35:54

Me lo meterá en un tamaño grande, pero, oye, calculo 01:35:56

qué tamaño debería tener, le doy los 01:35:58

píxeles concretamente y lo adecuo 01:36:00

a mi pantalla. De una manera. 01:36:02

Lo utilizo como lateral. 01:36:04

Voy a hacer un ejemplo rápido. 01:36:06

Tengo contenido 01:36:12

para insertar. Tengo un bloque HTML brutal 01:36:14

con el cual puedo trabajar. 01:36:16

Voy a hacer un 01:36:20

autorreferencial. 01:36:22

Aquí. 01:36:24

¿Dónde estás? Código. 01:36:32

Código aquí. 01:36:34

Cojo esto y voy a hacerlo ahora 01:36:36

directamente. Vengo aquí al código. 01:36:38

Le pongo el código 01:36:40

que me ha dibujado Slicer 01:36:42

y lo pinto. Esto no va a funcionar 01:36:44

porque el modelo de caja 01:36:46

me va a forzar a poner ahí el objeto. 01:36:48

Es muy grande. Me va a romper. 01:36:50

Vale. Entonces lo que haría sería calcular 01:36:52

los tamaños de alguna manera. Voy a hacerlo ahora 01:36:54

rápido para que 01:36:56

entendáis lo que quiero hacer. 01:36:58

En la parte central no hay problema. 01:37:00

Me cabe bien, pero en esta lateral 01:37:02

no es tan fácil. ¿Me deja editarlo directamente? 01:37:04

No. Voy aquí. 01:37:06

Voy a hacer, a ver, 01:37:08

200. Voy a poner 200. 01:37:10

200 por aquí. 01:37:12

Voy a hacer que el tamaño 01:37:16

no es proporcional 01:37:18

porque no voy a 01:37:20

hacerlo ahora. 01:37:22

No veo ninguno más. 01:37:24

Hay un ancho y un alto 01:37:26

pero no veo más. Creo que están todos. 01:37:28

Guardo 01:37:30

y lo visualizo. 01:37:32

No. Pues me ha pasado 01:37:34

de mí. Vamos. Cosa mala. 01:37:36

Me ha pasado de mí. Cosa mala. 01:37:38

A ver, niño. 01:37:40

Me está haciendo... 01:37:42

Sí, aquí. 01:37:44

Este es el que me faltaba. No lo vi antes. 01:37:46

No sé por qué. 01:37:48

Vale. 01:37:50

Ahora lo guardo. 01:37:52

Sí, ¿no? 01:37:54

Ahora ya se ha ajustado. Ya está. 01:37:56

Me vale como elemento. 01:37:58

Y un vídeo, lo mismo. 01:38:00

Le inserto un vídeo de YouTube o de Vimeo ahí. 01:38:02

O un recurso de un reproductor 01:38:04

de audio. O una lista de audio. 01:38:06

O una línea de tiempo que genero en un sistema 01:38:08

de línea de tiempo que hay online. 01:38:10

¿Qué sé? ¿Qué dais? Hay líneas de tiempo muy visuales 01:38:12

que se generan online y tienen un código embebido. 01:38:14

Genero la línea de tiempo, la vengo, la pongo aquí 01:38:16

en el contenido central y tengo una línea de tiempo súper 01:38:18

chula en medio de mi contenido. 01:38:20

Hay sistema, por ejemplo, de meteorología que insertas 01:38:22

como un widget al lateral. 01:38:24

Todo eso, en el fondo, también es diseño. 01:38:26

Es diseño. 01:38:28

Es cómo percibimos 01:38:30

la utilidad de algo. 01:38:32

Eso es diseño. 01:38:34

¿Qué más? Porque ya no sé ni dónde estoy. 01:38:38

¿Iconos? 01:38:40

Puedo intercambiar iconos. Una cosa que funciona bastante bien 01:38:42

es decir, tengo una carpeta PIX 01:38:44

de un tema y la cambio con otra carpeta PIX. 01:38:46

Hay que leerse un poco 01:38:48

la licencia de uso de los iconos. 01:38:50

Normalmente no hay problemas, pero pues a caso. 01:38:52

Pero normalmente puedes cambiar la licencia. 01:38:54

Es que me gustan mucho a mí, por ejemplo, los de tango. 01:38:56

Un set de iconos me gustan mucho. 01:38:58

Intento utilizarlos siempre en todos los desarrollos. 01:39:00

Porque me gustan más que cualquier otro icono 01:39:02

que veo por ahí de 01:39:04

otros temas. Entonces lo utilizo. 01:39:06

O este icono me ha gustado mucho. 01:39:08

Este set de iconos lo cambias. 01:39:10

Crear una carpeta de iconos desde cero 01:39:12

es divertido. 01:39:16

Eso no lo recomiendo, pero es divertido. 01:39:18

Hay unos cuantos iconos. Pero podemos hacerlo. 01:39:20

Lo que os decía antes 01:39:22

en el diseño. Jugamos con tamaños grandes 01:39:24

para ciertos iconos, por ejemplo. 01:39:26

Imaginemos que yo quiero jugar, meto un icono 01:39:28

grande y juego con ese icono grande. 01:39:30

Porque sé que puedo hacerlo. 01:39:32

Lo que hemos visto. 01:39:34

Añadir contenido visual, gráficos, 01:39:36

código embebido, contenido dinámico. 01:39:38

Hay un módulo 01:39:40

que es este de aquí, que es el módulo Include. 01:39:42

Es un módulo 01:39:44

para Moodle que te permite 01:39:46

insertar un PHP como un módulo 01:39:48

normal en cualquier página. 01:39:50

Es como desarrollar pequeños snippets de PHP 01:39:52

y te deja elegir qué snippet 01:39:54

o un selector pones o no. 01:39:56

Va bastante bien para según 01:39:58

qué modelos. 01:40:00

Include está en el enlace este. 01:40:02

Nosotros lo hemos usado alguna vez 01:40:04

para insertar rápidamente 01:40:06

banners, scripts 01:40:08

de banners y cosas así. Es este. 01:40:10

Te permite meter 01:40:12

un pequeño bloque de... 01:40:14

O sea, generas un módulo, 01:40:16

lo instalas y luego te va generando pequeños 01:40:18

snippets de código y te deja seleccionar cuáles. 01:40:20

Puedes tener diferentes tipologías 01:40:22

de código. 01:40:24

Entonces activas el bloque Include. 01:40:26

Activas ese. 01:40:28

¿Qué te permite? Te permite que en un curso 01:40:30

tengas ese código y en otro no. 01:40:32

Te permite esa 01:40:34

capilaridad por cursos. 01:40:36

A mí me parece un módulo que yo 01:40:38

utilizo habitualmente y me parece muy útil 01:40:40

para este tipo de cosas. 01:40:42

¿Qué más? Editar la cabeza del curso, crear tablas. 01:40:44

Vuelvo a repetir un poco. 01:40:46

La configuración que os decía. 01:40:48

En la configuración hay una opción para configurar 01:40:50

el tema gráfico. Entonces puedo definir 01:40:52

estilos del usuario. 01:40:54

En el curso, este es vosotros, el que os he habilitado, 01:40:56

ese curso permite al usuario, 01:40:58

al profesor editor, seleccionar 01:41:00

el tema gráfico. 01:41:02

Si vais a parámetros podréis cambiar, lo voy a dejar abierto, 01:41:04

podéis cambiar 01:41:06

el tema gráfico y ver visualmente una serie de temas 01:41:08

que os he puesto, que he ido seleccionando. 01:41:10

Podéis hacerlo porque 01:41:12

he configurado esta opción. 01:41:14

Permitir estilos en el curso. 01:41:16

¿Y qué más? 01:41:18

En los filtros multimedia 01:41:20

también es importante. Hay veces que podemos 01:41:22

activar filtros multimedia y esos filtros multimedia hacen que 01:41:24

por ejemplo, al insertar un flash, 01:41:26

este viene por defecto, por seguridad, pero bueno, 01:41:28

al insertar un flash 01:41:30

una URL de un flash automáticamente 01:41:32

se integre en pantalla 01:41:34

o de otros 01:41:36

contenidos. 01:41:38

Y por último, 01:41:40

simplemente por favor, 01:41:42

por los gatitos, 01:41:44

por los gatitos, por favor, 01:41:46

quitar Explorer 6 de vuestras máquinas. 01:41:48

Difundir la palabra. 01:41:50

Explorer 6 no es malo. 01:41:52

Vamos a tener más 01:41:58

confrontaciones. 01:42:00

Y ya está, eso era todo. 01:42:02

Dime. 01:42:04

Si. 01:42:06

Bueno, hay que tener una discusión 01:42:32

en cuanto a nivel 2 de accesibilidad. 01:42:34

Y si el nivel 2 de accesibilidad en desarrollo web 01:42:36

es factible realmente o no. 01:42:38

No tiene nada fácil. 01:42:46

Sí. 01:43:04

Pero tú mismo lo estás diciendo. 01:43:06

Hay que condicionar también el diseño 01:43:10

al usuario final de alguna manera. 01:43:12

Según quién 01:43:14

no haría según qué. 01:43:16

Según cuál es el público. 01:43:18

A ver, hay un tema de 01:43:20

¿qué es lo que determina 01:43:22

el mercado o la 01:43:24

tendencia de desarrollo? 01:43:26

La tendencia de desarrollo realmente va a un sistema 01:43:28

que choca bastante y choca bastante con la accesibilidad. 01:43:30

Y no se está arreglando en realidad. 01:43:32

Se sigue incidiendo. 01:43:34

O sea, todo el uso de Javascript 01:43:36

en realidad ya dice que 01:43:38

cualquier página ya, por ejemplo, no sea 01:43:40

accesible dentro de un A2 01:43:42

si desactivas Javascript. 01:43:44

Tú empiezas a desactivar el Javascript y la mitad de las páginas 01:43:46

que hay ahora mismo no funcionan 01:43:48

directamente. 01:43:50

... 01:44:02

... 01:44:04

... 01:44:06

... 01:44:08

... 01:44:10

... 01:44:12

... 01:44:14

... 01:44:16

Pero plantea mucho porque realmente superar un test 2 01:44:18

de accesibilidad real 01:44:20

es muy complicado. 01:44:22

Pero muy, muy complicado. 01:44:24

De hecho, la prueba es rápida. 01:44:26

Pasarle a la mayoría de los test de accesibilidad 2 01:44:28

páginas que teóricamente cumplen con la accesibilidad 2. 01:44:30

Entonces empiezas a ver errores. 01:44:32

Error manual. Hay que comprobarlo. 01:44:34

Hay que comprobarlo, vale. Y lo ha comprobado o no. 01:44:36

Y te pone igualmente el sello de accesibilidad 2. 01:44:38

Por eso digo que realmente la tecnología no está facilitando 01:44:40

tampoco. Vamos a un modelo 01:44:42

muy dinámico que hace que 01:44:44

según que... y muy visual 01:44:46

que justamente según que contenido ya 01:44:48

no... por desgracia no está caminando 01:44:50

hacia allí. Lo digo 01:44:52

ya incluso de autocrítica 01:44:54

y de reflexión más personal. 01:44:56

No... 01:44:58

Aunque hay iniciativas 01:45:00

seguramente lo que tendremos que empezar es a abrir 01:45:02

un doble desarrollo. El desarrollo 01:45:04

más digamos 01:45:06

pensando en mercado 01:45:08

si me lo permitís. Y el desarrollo 01:45:10

pensando en sectores. 01:45:12

Eso por fortuna realmente gracias 01:45:14

a los CMS o a los gestores de contenidos 01:45:16

cada vez se va a poder 01:45:18

oficializar más. Pero es un problema 01:45:20

realmente a la hora del desarrollo. 01:45:22

... 01:45:28

... 01:45:58

... 01:46:00

... 01:46:02

... 01:46:06

... 01:46:08

... 01:46:10

... 01:46:12

... 01:46:14

... 01:46:16

... 01:46:18

... 01:46:20

... 01:46:22

... 01:46:24

... 01:46:26

... 01:46:28

... 01:46:30

... 01:46:32

... 01:46:34

... 01:46:36

... 01:46:38

... 01:46:40

... 01:46:42

... 01:46:44

... 01:46:46

... 01:46:48

... 01:46:50

... 01:46:52

... 01:46:54

... 01:46:56

... 01:46:58

... 01:47:00

... 01:47:02

... 01:47:04

... 01:47:06

... 01:47:08

... 01:47:10

... 01:47:12

... 01:47:14

... 01:47:16

... 01:47:18

... 01:47:20

... 01:47:22

... 01:47:24

... 01:47:26

... 01:47:28

... 01:47:30

... 01:47:32

... 01:47:34

... 01:47:36

... 01:47:38

... 01:47:40

... 01:47:42

... 01:47:44

... 01:47:46

... 01:47:48

... 01:47:50

... 01:47:52

... 01:47:54

... 01:47:56

... 01:47:58

... 01:48:00

... 01:48:02

... 01:48:04

... 01:48:06

... 01:48:08

... 01:48:10

... 01:48:12

... 01:48:14

Y de reflexión más personal. 01:44:56

Aunque hay iniciativas. 01:45:00

Seguramente lo que tenemos que empezar. 01:45:02

Es abrir un doble desarrollo. 01:45:04

El desarrollo. 01:45:06

Pensando en mercado. 01:45:08

Si me lo permitís. 01:45:10

Y el desarrollo. 01:45:12

Eso por fortuna. 01:45:14

Realmente gracias a los CMS. 01:45:16

O a los gestores de contenidos. 01:45:18

Cada vez se va a poder oficializar más. 01:45:20

Pero es un problema realmente. 01:45:22

A la hora de desarrollo. 01:45:24

Conocido contigo. 01:45:26

En el caso de. 01:45:28

Y la cosa es muy clara. 01:45:30

Tecnológicamente. 01:45:32

Pero el modelo. 01:45:34

Ha hecho una apuesta clara. 01:45:36

Por la switch. 01:45:38

Entonces. 01:45:40

Es que el problema. 01:45:42

Es que JQuery. 01:45:44

Tiene una comunidad de desarrolladores. 01:45:46

Muy fuerte. 01:45:48

Muy muy fuerte. 01:45:50

Entonces en cuanto a. 01:45:52

El desarrollo. 01:45:54

En cuanto a. 01:45:56

El desarrollo. 01:45:58

En cuanto a. 01:46:00

El desarrollo. 01:46:02

En cuanto a. 01:46:04

El desarrollo. 01:46:06

En cuanto a. 01:46:08

Muy fuerte. 01:46:10

Muy muy fuerte. 01:46:12

Entonces encuentras módulos brutales. 01:46:14

Hechos en JQuery. 01:46:16

Para implementar o para tunear. 01:46:18

Y eso no sucede lo mismo. 01:46:20

O no es tan extensivo en JQuery. 01:46:22

No pero entonces. 01:46:24

A ver. 01:46:26

Ahora mismo con el model actual. 01:46:28

Me gusta el JQuery. 01:46:30

El model 2.0. 01:46:32

Ya te lo diré. 01:46:34

Model 2.0 si que apuesta. 01:46:36

Me ha salido hoy. 01:46:38

La Release Candidate 2.0. 01:46:40

Igualmente. 01:46:42

Si que es cierto. 01:46:44

Que el otro día estuve leyendo documentación. 01:46:46

Eso nos obligará a replantearnos. 01:46:48

Si cargar o no cargar librería de JQuery. 01:46:50

Esa va a ser una expresión divertida. 01:46:52

De todas maneras puede consistir. 01:46:54

Un JQuery mínimo. 01:46:56

No ocupa nada y no interfiere. 01:46:58

Son rutinas diferentes. 01:47:00

Tiene alguna duda alguien. 01:47:02

No. 01:47:04

Todo fantástico. 01:47:06

Espero que al menos os haya parecido interesante. 01:47:08

Lo siento por el desarrollo tan ecléctico. 01:47:10

Pero como veis al final. 01:47:12

Yo creo que he intentado ver. 01:47:14

Toda una amalgama de cosas de diseño. 01:47:16

Que afectan no solo a desarrollo. 01:47:18

Es mucho más amplio y mucho más complejo. 01:47:20

Que los desarrolladores o diseñadores. 01:47:22

He intentado dar pinceladas. 01:47:24

De cada una de las áreas. 01:47:26

Por así decirlo. 01:47:28

Que yo veo que afectan al diseño. 01:47:30

Y nada. 01:47:32

Si tenéis presentación. 01:47:34

Si tenéis mi mail. 01:47:36

Si cualquier duda o consulta. 01:47:38

Puedes hacer así. 01:47:40

Gracias por haber aguantado dos horas. 01:47:42

Vale. 01:47:44

A por cierto. 01:47:46

Del mismo autor…

Giving advice (Year 6)

El modelo de Grenoble

20251205 POO-Ejer_2

20251205 POO-Ejer_1

20251030 JSON_2

20251204 UD2-BDR_6

20251204 UD2-BDR_5