Documentación das aulas virtuais (Moodle 3.x)

Vexamos como mellorar a estética dunha aula virtual e dos seus cursos, dándolle un aspecto personalizado e procurando unha mellora estética e deste xeito obter un entorno máis agradable.

1. CONFIGURACIÓN DA NAVEGACIÓN

Unha das primeiras cousas que podemos configurar nunha aula virtual Moodle é a aparencia de navegación, é dicir, o xeito no cal os usuarios van visualizar os cursos

a. Páxina de inicio para os usuarios tipo Sitio

b. Páxina de inicio para os usuarios tipo Taboleiro

A súa vez, no caso de elixir o tipo de visualización "Sitio", o administrador da aula pode configurar a aparencia, tanto antes de acceder o usuario, como despois de introducir as credenciais. Isto configúrase en Administración do sitio > Axustes da páxina de portada

2. INSERIR UN LOGOTIPO

Antes de inserir o logotipo da aula virtual, podemos configurar o nome do centro. Para isto, dirixirémonos a Administración do sitio > Configuración da páxina de portada

Unha vez configurados os nomes podemos ver o nome do centro en varios sitios:

O primeiro que debemos facer é deseñalo. Existen multitude de programas que permiten o deseño dun logotipo. O software Inkscape é unha magnífica solución para o seu deseño, xa que é gratuíto e é software libre. Con este programa podemos gardar a imaxe tanto en formato SVG como nos formatos clásicos de imaxe: jpg, jpeg, png. Sen embargo Moodle non acepta o formato SVG, polo que debemos empregar o PNG ou JPG. No caso de o usuario queira inserir imaxes con partes transparentes, debe empregar a extensión png.

Ademais, debemos saber que Moodle permite inserir un logotipo pequeno e un de tamaño grande. Para engadir o logotipo o usuario debe pinchar en Administración do sitio > Aparencia > Logos

E seguidamente o usuario debe subir o logotipo de menor tamaño ao apartado de Logo compacto e o de maior tamaño ao apartado Logo

E deste xeito, pódese visualizar os logotipos da aula en diferentes sitios:

E pinchando en Inicio do sitio:

E na páxina de login:

Sen embargo, no caso de utilizar un tema diferente a Boost, o logotipo tamén se pode inserir desde a configuración do tema. Isto é válido para todos os temas que non están no núcleo de Moodle. Para isto debes de premer en Administración do sitio > Aparencia > Temas > NOME DO TEMA

3. ENGADIR BLOQUES NO LATERAL

Por defecto Moodle engade un bloque no lateral dereito coa descrición da páxina de portada. Neste bloque tamén se pode engadir un logotipo, unha imaxe que sexa de interese en datas sinaladas (día das Letras Galegas, día da Violencia de Xénero, Nadal, etc), ligazón á páxina web do centro, teléfonos, etc. Este bloque aparecerá na páxina principal, pero non en cada un dos cursos da aula virtual.

Para configurar este bloque pódese ir a Administración do sitio > Configuración da páxina de portada

En moitas ocasións o docente quere inserir no seu curso un logotipo, unha imaxe, ligazóns, correo electrónico, etc. Para isto debe pinchar en Activar a edición

E aparecerá un novo elemento na barra lateral esquerda, co nome de "Engadir un bloque"

O número de opcións que saen é moi grande, sen embargo para inserir unha imaxe, o docente debe escoller HTML. E desta maneira, aparece na columna da dereita o novo bloque. O usuario debe facer un clic no engrenaxe para editalo, escollendo "Configurar o bloque (novo bloque HTML)

E aparece o editor de texto no que inserimos a imaxe, as ligazóns, etc.

O docente despraza verticalmente o bloque ata á posición desexada, e podería quedar do seguinte xeito:

4. ENGADIR UN CABECEIRO A UN CURSO

O primeiro que debe facer o docente é pinchar en "Activar a edición"

Na parte superior do curso, debe premer en Editar > Editar unha sección

E engadimos unha imaxe. Unha vez máis premendo no software Inkscape para a edición das imaxes, aproveitando os bancos de imaxes. Recomendo inserir e traballar con imaxes SVG, xa que se poden escalar sen perder calidade. Nos seguintes bancos de imaxes pódemos atopar moitas cousas de interese:

https://www.freevector.com/

https://www.freepik.es/

Unha vez gardados os cambios, o curso queda do seguinte xeito:

5. AS ETIQUETAS

En moitas ocasións os docentes queren darlle un aspecto máis visual aos seus cursos na páxina web. Queren publicar a información de maneira que quede clara para o alumnado e ademais estética. As etiquetas constitúen un recurso moi valioso. Vexamos varios usos das etiquetas:

O primeiro uso que se lle pode dar é para inserir imaxes coma a do cabeceiro, para diferenciar as seccións e tamén para pautar a lectura. Pero teñen outros moitos usos. Vexamos un exemplo e seguidamente analizamos como se edita.

Paso 1. Activar a edición

Paso 2. Engadir unha actividade ou recurso

Paso 3. Seleccionamos o recurso Etiqueta. Clic en Engadir

Paso 4. Introducimos o texto que desexemos. Por exemplo "Elemento pai". Centrámolo.

Paso 5. Clic en HTML

E amósanos o código HTML que temos ata o momento:

<p style="text-align: center;">Elemento pai<br></p>

Paso 6. Completamos o código:

Engadimos ao principio do código HTMLl o seguinte:

<div class="alert alert-success" role="alert">

E ao final: </div>

Quedando así:

<div class="alert alert-success" role="alert"><p style="text-align: center;">Elemento pai<br></p></div>

Analicemos código, pero non é necesario coñecer o seu significado. O único que hai que saber é cambiar a cor do fondo.

<div> </div> . Un div é unha caixa na cal engadimos un contido. A súa función é a de agrupar contidos, é dicir, toda a información que vai entre as dúas etiquetas.

class="alert alert-success" role="alert" . Trátase de código dunhas librerías chamadas Bootstrap. O único que é necesario saber é como mudar a cor.

Paso 5. Crear un elemento fillo. Para iso pinchamos en Editar > Duplicar

Paso 6. Ao ser un elemento fillo, movémolo á dereita.

Paso 7. Modificamos os textos pinchando en Editar > Editar a configuración e finalmente clic en gardar. E visualizamos o resultado:

No caso de non querer empregar este deseño ou outras cores nas etiquetas, podemos darlle outro aspecto, como o da imaxe seguinte:

E amósanos o código HTML que temos ata o momento:

<p style="text-align: center;">Elemento pai<br></p>

Paso 6. Completamos o código:

Engadimos ao principio do código HTML o seguinte:

<div style="border: 1px solid #cccccc; padding:10px; background-color:#00F00033;">

E ao final: </div>

Quedando así:

<div style="border: 1px solid #cccccc; padding:10px; background-color:#00F00033;"><p style="text-align: center;">Elemento pai<br></p></div>

Analicemos o código. O único que deberemos coñecer é como cambiar a cor do fondo.

<div> </div> . Un div é unha caixa na cal engadimos un contido. A súa función é a de agrupar contidos, é dicir, toda a información que vai entra as dúas etiquetas.

style="...". Entre as comiñas, introducimos o código de estilos CSS

border: 1px solid #cccccc; Serve para debuxar un borde na volta do div cunha cor gris.

padding:10px; Serve para separar do borde do div o texto. Concretamente neste caso sepárase 10 píxeles.

background-color:#00F00033; Esta etiqueta serve para darlle cor de fondo

E resulta moi sinxelo cambiar de cor. Analizando os números:

En primeiro lugar o carácter #, que é obrigatorio engadilo

Seguidamente aparece un código alfanumérico de 6 caracteres que define a cor. Dispoñemos de multitude de páxinas onde atopar códigos hexadecimais das cores. Unha delas é https://picular.co

E os dous últimos caracteres definen o grao de transparencia da cor.

Polo que, a cor de fondo definida por: background-color:#00F00033, presenta unha cor verde cunha transparencia do 20%

Xa se pode ver o resultado.

6. FONTES TIPOGRÁFICAS. FOLLAS DE ESTILO CSS.

En ocasións, pode ocorrer que un centro desexe empregar unhas fontes tipográficas diferentes ás que proporciona Moodle. Por exemplo, un CRA, unha EEI, ou calquera outro centro que desexa darlle un aspecto orixinal.

Aínda que hai moitos servizos de tipografías online, quizais sexa o ofrecido por Google un dos máis coñecidos.

Paso 1. Ir á páxina de Google Fonts e escoller as tipografías que se desexen engadir á aula. Neste exemplo elixo a fonte Architects Daughter e a Ubuntu

Paso 2. Para seleccionalas prememos enriba delas e seguidamente clic en +Select this style. Para escoller o segundo tipo de fonte, premer en Browse fonts e búscase polo nome e repetir o proceso.

Paso 3. Na marxe esquerda da pantalla aparece unha columna coas fontes seleccionadas, e o máis importante, o código HTML e CSS que se terá que empregar.

Paso 4. Un usuario con rol de administrador debe dirixirse a: Administración do sitio > Aparencia > HTML adicional

Dentro do encabezado pegar o código HTML, e gardar os cambios

Paso 5. O administrador tamén debe engadir o código CSS ao tema empregado, neste caso o Boost. Para iso debe dirixirse a: Administración do sitio>Aparencia>Temas >Boost

e pinchar en Axustes avanzados. O usuario debe pegar o código CSS no apartado de SCSS en bruto. Sen embargo non chega con isto, debe definirse un nome para cada unha das clases. Vexamos un exemplo:

Paso 6. Unha clase é un conxunto de propiedades que lle asignamos a un elemento. Neste exemplo, ao título asignámoslle a clase "titulo", e ao texto asignámoslle a clase "contido". Dese xeito, todos aqueles textos que lle asignemos a clase "titulo", collerá de forma automática as características definidas na clase. Polo tanto, e sempre seguindo e exemplo, o código CSS, poderíase deixar o código do seguinte xeito. É importante fixarse no punto que hai que engadir diante de cada clase.

Paso 7. O usuario administrador xa remataría no punto 5. Agora un profesor con edición pode asignarlle estes códigos de estilos a unha etiqueta, a unha páxina, etc. Seguindo o exemplo das etiquetas do apartado 5, un docente podería deixar o código HTMLl do seguinte xeito:

Aos textos de tipo h2 asignámoslle neste caso a clase "titulo"

<div class="alert alert-success" role="alert">
<h2 class="titulo" style="text-align: left;">1. What is Lorem Ipsum?</h2>
</div>

E no apartado do contido:

E neste caso, aos textos de tipo h5, asignámoslle a clase "contido":

<div class="alert alert-success" role="alert">
<h5 class="contido">
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not 
only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with 
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker 
including versions of Lorem Ipsum.
</h5>
</div>

Pero facendo uso dos estilos CSS, é posible mudar as características dun texto, ou a aparencia gráfica da aula virtual. Habitualmente son os propios usuarios que contan co rol de Profesor con edición os que a medida que introducen os textos van incrementando o tamaño e asignándolle as propiedades que desexan. Isto, ademais de incrementar o traballo á hora de editar, ten un inconveniente importante, a posibilidade de esquecer a personalización dun apartado. Para isto o máis cómodo é traballar con estilos. A modo de exemplo, vexamos como incrementar o tamaño de texto ao que lle asignamos a clase "titulo" e a clase "contido". Incrementemos o tamaño e tamén a cor. Para iso cambiamos o código CSS que inserimos nos pasos anteriores en: Administración do sitio > Aparencia > Temas > Boost > Axustes avanzados

.titulo {

font-family: 'Architects Daughter', cursive;

font-size: 40px;

color: #9C1C93;

}

.contido{

font-family: 'Ubuntu', sans-serif;

font-size: 30px;

color: #9C1C93;

}

E este sería o resultado, aínda que esteticamente resulte bastante pobre.

7. BOOTSTRAP

Bootstrap é un conxunto de ferramentas de código aberto para o deseño de sitios e aplicacións web. Contén plantillas de deseño con tipografías, formularios, botóns, cadros, menús e outros elementos deseñados en linguaxe HTML, CSS e Javascript. Na versión de Moodle 3.5 integraron Bootstratp 4, o que facilita e mellora a aparencia ou os contidos dun curso. Vexamos uns pequenos exemplos de aplicación, dun abano moi grande de posibilidades:

a. Botóns

Pódese engadir botóns de carácter informativo, coa posibilidade de engadirlle unha ligazón. Vexamos como se engade a unha etiqueta, que se faría do mesmo xeito que nunha páxina.

Como nos casos anteriores debemos premer no botón HTML

No caso de que non sexa un botón coa función de ligazón, poderiamos engadir o seguinte código:

<button type="button" class="btn btn-primary">Texto do botón</button>

O botón pode ter diferentes cores en función da clase escollida.

Se o que desexamos é inserir unha ligazón dentro do botón

<button type="button" class="btn btn-secundary"><a href="https://agueiro.xunta.gal">Agueiro</a></button>

No caso que queiramos engadir unha fila de botóns, poderiamos empregar un <div>

<div>
<button type="button" class="btn btn-secundary">
<a href="https://www.edu.xunta.gal/centros/iesramoncaamano/">Páxina web</a>
</button>
<button type="button" class="btn btn-secundary">
<a href="http://www.edu.xunta.gal/centros/iesramoncaamano/aulavirtual/">Aula virtual</a>
</button>
<button type="button" class="btn btn-secundary"><a href="https://agueiro.xunta.gal">Agueiro</a></button>
<div>

b. As tarxetas

As tarxetas de Bootstrap son un bloque de contido cunha imaxe, un título, descrición e un botón. Un exemplo:

<div class="card" style="width: 350px;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Dombate_frontal_2013.jpg/320px-Dombate_frontal_2013.jpg" class="card-img-top" alt="Dombate">
  <div class="card-body">
    <h5 class="card-title">O Dolmen de Dombate</h5>
    <p class="card-text">Monumento megalítico</p>
    <a href="#" class="btn btn-primary">Ver máis</a>
  </div>
</div>

c. Táboas

Cando deseñamos unha táboa en Moodle empregando o botón de creación dunha táboa queda co seguinte aspecto:

Se modificamos o código HTML, engadindo unhas clases bootstrap, a táboa mellora esteticamente. Engadindo a clase "table", xa se observa unha mellora considerable:

              <table class="table">
                    <thead>
                        <tr>
                            <th>Produto</th>
                            <th>Cantidade</th>
                            <th>Prezo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Rato</td>
                            <td>13</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>Teclado</td>
                            <td>32</td>
                            <td>40</td>
                        </tr>
                        <tr>
                            <td>Pantalla</td>
                            <td>10</td>
                            <td>120</td>
                        </tr>
                    </tbody>
                </table>

Se o que se prefire é que a táboa teña bordes, podemos engadir a clase "table-bordered"

              <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Produto</th>
                            <th>Cantidade</th>
                            <th>Prezo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Rato</td>
                            <td>13</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>Teclado</td>
                            <td>32</td>
                            <td>40</td>
                        </tr>
                        <tr>
                            <td>Pantalla</td>
                            <td>10</td>
                            <td>120</td>
                        </tr>
                    </tbody>
                </table>

E por exemplo, se a unha fila desexamos darlle unha cor de fondo determinado, engadiremos por exemplo a clase "bg-primary text-white" á fila correspondente.

            <table class="table table-bordered">
                    <thead>
                        <tr class="bg-primary text-white">
                            <th>Produto</th>
                            <th>Cantidade</th>
                            <th>Prezo</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Rato</td>
                            <td>13</td>
                            <td>100</td>
                        </tr>
                        <tr>
                            <td>Teclado</td>
                            <td>32</td>
                            <td>40</td>
                        </tr>
                        <tr>
                            <td>Pantalla</td>
                            <td>10</td>
                            <td>120</td>
                        </tr>
                    </tbody>
                </table>

Quedan moitas cuestións por explicar, pois o deseño web presenta multitude de posibilidades, sen embargo, non é a función deste documento documentar un conxunto tan amplo. Tan só se explican uns cantos exemplos que teñan como función darlle un aspecto diferente á aula virtual, facéndoa máis atractiva para o alumnado.

d.Inserir iconas

Bootstrap pon a disposición dos usuarios un conxunto de iconas que poden resultar moi interesantes para inserir nunha páxina ou etiqueta de Moodle. Vexamos un exemplo:

https://icons.getbootstrap.com/

Paso 1. Escoller a icona que nos guste

O usuario pode empregar o buscador para atopar iconas de maneira sinxela:

Pinchamos na icona que nos guste e copiamos o código HTML

Paso 2. Pegar o código nunha páxina ou etiqueta

Paso3. Personalizamos a apariencia do corazón, concretamente neste exemplo darémoslle un ancho e un alto de 300px e ademais engadímoslle unha cor de fondo vermella.

<svg width="300px" height="300px" viewBox="0 0 16 16" class="bi bi-heart-fill" fill="red" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
</svg>

E este sería o resultado, despois de centralo na pantalla:

8. MUDAR O ASPECTO DUN CURSO SEN DEREITOS DE ADMINISTRACIÓN

En ocasións, un docente quere darlle un aspecto diferente a súa aula, sen embargo non conta cos permisos de administración necesarios para facelo. A plataforma Moodle non carga follas de estilo que non aparezan no espazo predeterminado para iso (Administración do sitio>Aparencia>Temas >Boost>Axustes avanzados). Sen embargo, se o docente insire un bloque HTML ao borde , permite engadir código JavaScript. Tan só terá que darlle as instrucións necesarias ao JavaScript para que insire as follas de estilo. Vexamos como se fai:

Paso 1. Activar a edición

Paso 2. Engadir un bloque. Se o docente xa conta cun bloque inserido no curso, pode empregalo. Co seguinte código non se vai mudar o seu contido, tan só se engade código JavaScript para darlle outro aspecto ao curso.

Paso 3.  Tipo de bloque HTML

Paso 4. Configurar o novo bloque

E pínchar na icona do código html

<script type="text/javascript">

    estilosCSS = '.page-header-headings{color:#000080;} #page-header .card{background-color:#4A95FF33;}';

    var styleElement = document.createElement('style');

    styleElement.appendChild(document.createTextNode(estilosCSS));

    document.getElementsByTagName('head')[0].appendChild(styleElement);

</script>

estilosCSS = '.page-header-headings{color:#000080;} #page-header .card{background-color:#4A95FF33;}';

<script type="text/javascript">
    //Primeira parte: Ocultamos o título e as migas de pan. Engadimos unha cor de fondo ao cabeceiro
    estilosCSS = '.page-header-headings{visibility:hidden;} #page-header .card{background-color:#4A95FF33;} .breadcrumb{visibility:hidden;}';
    var styleElement = document.createElement('style');
    styleElement.appendChild(document.createTextNode(estilosCSS));
    document.getElementsByTagName('head')[0].appendChild(styleElement);
    //Segunda parte. Seleccionamos a sección do cabeceiro e gardámolo nunha variable
    var cabeceiro =  document.querySelector('#page-header .card');
    //Gardamos na variable imaxe a url dunha imaxe e os estilos da mesma
    imaxe = document.createElement('img');
    imaxe.setAttribute('src', 'https://cdn.pixabay.com/photo/2012/04/16/12/08/penguin-35705_960_720.png');
    imaxe.setAttribute('width', '10%')
    imaxe.setAttribute("style","float:left; margin-left:100px;margin-top:-90px");
    //Inserimos no cabeceiro a imaxe
    cabeceiro.appendChild(imaxe)
</script>