Crear unha galería de imaxes responsive design en Drupal 6 co tema 0Point

Con seguridade hai moitas maneira de crear unha galería cun conxunto de imaxes coa característicade responsive design, é dicir, que se adapten a distintos tipos de pantalla. Procedo a explicar unha das maneiras:

1. Ir á zona de Administración > Construción da páxina > Plantillas. Pinchamos en configurar na plantilla OPoint que esteamos empregando

2. No apartado Layout width, escollemos a segunda opción_ Fluid width (custom)

3. Agregamos Crear Contido > Páxina, e engadimos un título. Seguidamente pinchamos en Disable Rich Text e pegamos o código e finalmente gardamos, sen pinchar en ningunha outra opción. En canto ao código, dicir que empreguei a clase Grid de css (aínda que tamén se podería facer con flexbox) e para darlle un aspecto máis dinámico engadín unha ligazón de cada imaxe a outra de maior tamaño empregando a súa vez a librería Lightbox. Lembra que debes de ter activo este módulo para que se visualice con este efecto. 

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

.box {
  box-sizing: border-box;

}
.wrapper {
  padding: 50px;
  background: #f2f2f2;
   max-width:100%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
   grid-column-gap: 10px;
   grid-row-gap:10px;
   justify-content: space-around;
   
}

.img{
    width:200px;
    height:200px;
    }
</style>
</head>
<body>

    <div class="wrapper">
   <div class="box"><a href="https://atio.es/pub/costamortex/foto1.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto1.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto2.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto2.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto3.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto3.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto4.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto4.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto5.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto5.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto6.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto6.jpg"></div>
   

</div>

</body>
</html>

 

E este é o resultado. Podes comprobar se o comportamento é o correcto ao modificar o tamaño da pantalla.

Editor de fórmulas Wiris en Moodle

Resulta moi útil ter un editor de ecuacións de Wiris a man. Para iso, podemos instalo en Moodle como unha ferramenta externa. Vexamos como se fai:

 

1. Abrimos a aula virtual Moodle. Clic en editar e engadimos recurso

2. En tipo de ferramenta pinchamos en +

3. E cumprimentamos o formulario do seguinte xeito:

Nome da ferramenta: Wiris editor de ecuacións (por exemplo)

Tool Base URL: https://www.wiris.net/instructure.com/canvas/editor/config

O resto das celas deixámolas en branco

Clic en gardar modificacións

4. Volvemos á pantalla anterior. Debemos de cumprimentar a parte xeral:

Nome de actividade: Editor de ecuacións (por exemplo)

URL de inicio: https://www.wiris.net/instructure.com/canvas/editor/config

Clic en gardar e mostar

5. Este é o resultado. No editor engadimos as fórmulas que queiramos, coa tipo de fonte, tamaño, cor, etc

6. Seleccionamos a fórmula e prememos a combinación de teclas Ctrl + c (copiar). Realmente non compiamos a imaxe, senón o código html que está por detrás. Seguidamente creamos unha páxina nova, tanto en Moodle como en Drupal e pegamos como código html a fórmula Ctrl + v. Debemos de ter en conta que no caso de Drupal (versión 6), introducimos o código desactivando o texto enriquecido (Disable rich-text)

a. Moodle

b. Drupal

<math xmlns="http://www.w3.org/1998/Math/MathML"><mstyle mathsize="20px"><mrow><munder mathcolor="#00007F"><mrow><mi>l</mi><mi>i</mi><mi>m</mi></mrow><mrow><mi>x</mi><mo>&#x2192;</mo><mo>&#x221E;</mo></mrow></munder><mfrac mathcolor="#00007F"><mrow><mn>5</mn><msup><mi>x</mi><mn>3</mn></msup><mo>+</mo><mn>2</mn><msup><mi>x</mi><mn>2</mn></msup><mo>-</mo><mn>1</mn></mrow><mrow><mn>2</mn><mi>x</mi><mo>+</mo><mn>3</mn></mrow></mfrac></mrow></mstyle></math>

E este sería o posible resultado

 

limx5x3+2x2-12x+3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Engadir fórmulas en Moodle ou Drupal

Existen varias formas de engadir fórmulas na aula virtual Moodle ou no Drupal. Vexamos unha moi sinxela, que consiste en copiar o código desde o editor de ecuacións de Wiris ou Calcme

a. Entrar no enderezo: https://calcme.com

b. Inserir a fórmula desexada. Lembra que podes utilizar os atallos de teclado para ir máis rápido (por exemplo maiúsculas + 7) para inserir unha fracción, ou (control + cursor arriba) para inserir un expoñente

c. Seleccionamos a fórmula e prememos na combinación de teclas Ctrl + c , para copiar a fórmula ao portapapeles

1. PEGAR O CONTIDO EN MOODLE

a. Abrirmos o Moodle e creamos un tipo de contido Páxina. Pinchamos na icona de Editar código HTML

b. Pegamos o contido o portapapeles. Como podemos comprobar, trátase de código MathML

c. Clic en Actualizar. E este será o resultado:

2. PEGAR O CONTIDO EN DRUPAL

a. Creamos un novo contido tipo Páxina. Desactivamos o texto enriquecido

b. Pegamos o contido do portapapeles, e ¡importante!, seguidamente clic en Gardar.

 

Sen embargo  é moi posible que o tamaño de visualización sexa moi pequeno e queiramos que se vexa máis grande, cun tipo de fonte determinado ou cunha cor específica. Deberemos de botar man dos estilos css para iso. Poderíase empregar o seguinte código a modo de exemplo:

 

<!DOCTYPE html><html><head>
    <style>    math{font-family: TeX-fonts-35; font-size:2em;}    </style>
</head>
<body>
    <math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>2</mn><mn>4</mn></mfrac>
    <mo>+</mo><mfrac><mn>1</mn><mn>3</mn></mfrac><mo>+</mo><mfrac><mn>4</mn><mn>6</mn></mfrac>
    <mo>=</mo></math>
</body>
</html>

E a visualización web quedaría do seguinte xeito:

 

24+13+46=

 

 

 

 

 

 

 

O son nos encerados Multiclass

 

En ocasións o sistema operativo Debian perde conexión co hub-usb do encerado e en consecuencia deixa de escoitarse o son. Vexamos como amañalo!

MANUAL

 

Iniciación Moodle IES Terra de Soneira

AULA VIRTUAL

 

0. Presentación

 

1. Xeneralidades formación dixital

 

2.Configuración do perfil

    Avatar profesor: https://pixabay.com/en/professor-class-1497580/

    Avatar profesora: https://pixabay.com/en/teacher-bookworm-glasses-professor-359311/

 

3. Matricular ao alumnado na materia

    Alumno: Alumno Formación

 

4. Editar resumo. Engadir unha imaxe da materia

    Imaxe: http://www.edu.xunta.gal/centros/cepramonartaza/system/files/images/cabeceiro_artaza.png

    Tamaño: ancho 100% - Espazo vertical 20px

 

5. O foro de novas como sistema de anuncios. Taboleiro

     a. Mudar o nome a Taboleiro

     a. Programación didáctica: http://www.edu.xunta.gal/centros/ieseusebioguarda/node/662

    

6. Foro

     a. Crear unha entrada para que os alumnos se presenten: nome, domicilio, hobbies, etc

     b. Accede coa conta de de alumno e fai unha presentación.

 

7. Edición de contidos. Engadir recursos

     Tema 1

     a. Recurso URL. Ligazón ao blog de aula

         https://atio.es

         Apariencia - Presentar: abrir

     b. Recurso etiqueta. Inserir hiperligazón.

         https://calcme.com/a

      Tema2

     c. Recurso páxina. Embeber un vídeo de youtube.

         https://www.youtube.com/watch?v=NY9UrvKS4ug

      Tema 3

     d. Recurso ficheiro. Presentación a pdf

        Descargar presentación: http://atio.es/fi/smart.odp

        Converter en pdf. Subila á aula

        Apariencia- Presentar: incrustado

     e. Recurso ficheiro. Exercicios resoltos

         Descargar boletín exercicios 

 

7. Ocultar, destacar ou mover o tema

 

8. O calendario. Programación das actividades

   http://www.atio.es/eva/sesion1/o_calendario.pdf

  Práctica: Creación dun evento Exame nunha data concreta.

  Aviso aos pais desde espazo Abalar (https://www.edu.xunta.es/abalar/)

  Creación dun evento que se repite tódalas semanas (entrega proba de avaliación continua).

 

8. As tarefas

TITORIAL TAREFAS

TAREFA_PDF

TAREFA_LECTURA

TAREFA_INVESTIGACIÓN

TAREFA_PRESENTACIÓN

TAREFA_FREEMIND

 

9._COPIA DE SEGURIDADE

Práctica Agueiro. IES Pedra da Aguia

SESIÓN Nº1

Titoriais: https://blog.atio.es/node/88

Exemplos:

Mbot: https://agueiro.xunta.gal/view/view.php?t=SPwM1K8N7nOhTpGcRmr3

Electricidade: https://agueiro.xunta.gal/view/view.php?t=EbRMDqzukyZtWKpV89wv

Recursos:

a. Ficheiros

presentación: atio.es/fi/smart.odp

pdf: rocódromo.pdf

 

b. Blog

Entrada nº1. Título: Scratch

imaxe: Scratch

Ligazóns: https://scratch.mit.edu/projects/editor

Entrada nº2. Título: Programar é divertido 

imaxe: atio.es/fi/code.png

Ligazón: https://kodingergoy.arkivert.no/

video: escornabot

Entrada nº3. Vídeo de youtube

Regina Pessoa: https://www.youtube.com/watch?v=NY9UrvKS4ug

c. Páxina

Ligazóns:

 https://agueiro.xunta.gal/view/view.php?t=SPwM1K8N7nOhTpGcRmr3

https://tecnoloxia.org/mclon/

http://www.tecnoloxia.org/codigooctopus/

Vídeo:

video: escornabot

 

SESIÓN Nº2

1. Exemplos de traballos por proxectos

Charla Alberto Sacido. Por que son un profe pirata?

 

2. Os alumnos comparten unha páxina co docente. Emprego das etiquetas.

Creación dun portafolio. Tema "A segunda guerra mundial"

a. Crear estrutura de cartafoles

b. Artefacto PDF.

c. Creación dun mapa en Google maps. Captura de pantalla.

d. Youtube. https://www.youtube.com/watch?v=AYQ8hT8cVTE

e. Creación dunha galería. Descargamos imaxes desde:

https://www.archives.gov/research/military/ww2/photos/images/thumbnails

 

3. Creación dun grupo

Creación dun blog compartido. Traballo colaborativo.

 

Compartir o portafolio co grupo

 

4. Foros de discusión.

Personalización do perfil público

 

SESIÓN Nº3

http://atio.es/pauli/index.php/exercicios

Instalar ActivInspire na maqueta Abalar Libre

Se desexamos instalar a versión 2.14 de ActivInspire na maqueta Abalar Libre, tanto na versión para Jessie como na de Stretch, debemos de agregar seguinte fonte a sources.list

deb http://activsoftware.co.uk/linux/repos/ubuntu xenial non-oss

Abrimos:

mousepad /etc/apt/sources.list

E e engadimos a nova:

deb http://activsoftware.co.uk/linux/repos/ubuntu xenial non-oss

Tamén debemos de descargar a clave de autentificación e instalala, xa que varía con respecto á primeira que instalamos no apartado 1

wget http://activsoftware.co.uk/linux/repos/driver/PrometheanLtd.asc
sudo apt-key add PrometheanLtd.asc

Actualizamos as fontes

apt update

Instalamos:

apt install activinspire

Unha vez que o instales unha vez nun equipo, poderás copiar os ficheiros .deb do cartafol /var/cache/apt para que non teñas que volver a descargalos novamente para cada un dos equipo nos que queiras instalar o encerado.

Unha vez instalado o ActivInspire, pódese descargar o paquete de recursos. Para iso tan só debemos de descargar o paquete de recursos do seguinte enderezo:

http://activinspire.s3.amazonaws.com/resource_pack/ActivInspire_main_res_v1.1_ESP.as4a

E seguidamente abrir o ficheiro ActivInspire_main_res_v1.1_ESP.as4a, co ActivInspire e ndicarlle ao software que proceda a instalalos non "Meus recursos"

No caso de querer instalar o driver pois pretendedes traballar directamente co encerado Promethean, deberemos de seguir a documentación que nos ofrece o fabricante: https://support.prometheanworld.com/article/1623/

As instrucións son as seguintes:

Editamos sources.list

sudo nano /etc/apt/sources.list
Engadimos a seguinte fonte:

deb http://activsoftware.co.uk/linux/repos/driver/ubuntu xenial oss non-oss 

Descargamos a chave de autentificación e procedemos a instalala

 wget http://activsoftware.co.uk/linux/repos/driver/PrometheanLtd.asc

sudo apt-key add PrometheanLtd.asc

E finalmente procedemos a instalar os paquetes do driver:

sudo apt install activtools

Sen embargo o programa de calibración na maqueta Abalar non funciona debido a incompatibilidade das librerías. Por iso para calibrar este encerado empregaremos a ferramenta Aplicativos > Sistema > Calibrate Touch Screen