Drupal

Engadir un vídeo adaptable a dispositivos móbiles

En moitas ocasión non é previsible controlar o tamaño que debe de ter un vídeo á hora de engadilo ao Drupal. Isto ocorre nalguhas resolucións xa que as dimensións do vídeo superan o ancho dispoñible, ou no caso de que haxa cambios estrutura dos bloques, pasando de unha columna a dúas.

Para darlle remedio a este problema, debemos de empregar os estilos CSS.

 

A. UN VÍDEO DE YOUTUBE

 

1. Escollemos o vídeo de youtube desexado. Clic en compartir e posteriormente en inserir. Obtemos un código  html como o seguinte:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2. Deste código eliminamos as dimensións de ancho de alto (width e height), quedado así:

<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. Inserirmos este código dentro do body do seguinte código html, quedando así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        padding-top: 30px;
        position: relative;
    }
    .video-responsive iframe, .video-responsive object, .video-responsive embed {
        height: 91%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>

 

B. UN VÍDEO SUBIDO AO DRUPAL COMO DOCUMENTO ADXUNTO

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        margin:0 auto;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        padding-top: 30px;
        position: relative;
    }
    .video-responsive video {
        height: 91%;
        left: 10%;
        position: absolute;
        top: 0;
        width: 80%;
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <video controls="controls">
            <source src="http://www.edu.xunta.gal/centros/crasantacomba/system/files/CESTA%20VIAXEIRA%20DE%20OVOS.mp4" type="video/mp4" />
            O teu navegador non soporta este vídeo.
            </video>
    </div>
</body>
</html>

 

 

Centrar unha imaxe horizontalmente

OPCIÓN 1. Con margin:0 auto;. Debemos colocar un display:block, xa que por defecto as imaxes son elementos inline-block. Se colocasemos o margin:0 auto; dentro do elemento pai, serviría para centrar este, pero non para centrar a imaxe.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
    }    
    img{
        display:block;
        margin:0 auto;
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 2. Con align-text:center. Neste caso debemos de colocar align-text:center no elemento pai. Neste exemplo colocámolo no body. Sen embargo, o normal é inserir a imaxe dentro dun div, e colocar o align-text no div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
        text-align: center;
    }    
    img{
        
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 3. Empregamos o margin:0 auto para centrar un div, e tamén text-align:auto dentro do div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Se ademais queremos centrala verticalmente dentro do div pai, podemos facelo de varios xeitos. Por exemplo inserir a imaxe dentro dun div, que sexa fillo do div wrapper. Ou máis sinxelo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    img{
        height:300px;
        margin-top:200px;
        transform:translateY(-50%)
    }
    
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Aliñar tres divs en horizontal

A. Con block-inline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            font-size: 0;
            margin:20px auto;
        }
        .esquerda, .centro, .dereita{
            display:inline-block;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

O truco para que non se separen entre un pouco en horizontal é font-size: 0; no contenedor pai (wrapper)

B. Con float-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            
        }
        .wrapper{
            width:60%;
            margin:20px auto;
        }
        .esquerda, .centro, .dereita{
            float:left;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

C. Con flexbox.

Neste caso só configuramos o div contedor wrapper con display:flex. Nos div fillos non se configura nada. Neste caso non separa os div entre sí.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            margin:0 auto;
            display:flex;
            
        }
        .esquerda, .centro, .dereita{
            display:inline-block;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

 

 

a. Con flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            display:flex;
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            margin:0 auto;   
        }
        .esquerda{
            background:green;
            width:20%;
        }
        .centro{
        background:red;
        width:20%;
        }
        .dereita{
        background:blue;
        width:20%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

 

b. Con inline-block.

Neste caso o centrado non o resolve tan ben como con flexbox. Centramos o div wrapper con margin:0 auto;, sen embargo ao empregar display:inline-block nos div fillos, non permite centralos con margin:o auto; Para isto, no elemento pai, debemos de empregar text-align:center; Obviamente, sen queremos separar os elementos fillos entre eles, engadiríamos nos fillos un margin-right.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            position: relative;
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow:hidden;
            font-size: 0px;
            text-align: center;
                 
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            display:inline-block;
         
        }
        .esquerda{
            background:green;
            width:20%;
        }
        .centro{
            background:red;
            width:20%;
        }
        .dereita{
            background:blue;
            width:20%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

c. Con float

O div da esquerda colocámolo con float:left, e o da dereita con float:right. Sen embargo o do centro resístese. Nun principio aparecía cun tamaño inferior ao da esquerda e o da dereita. Iso corríxese con display:inline-block. Despois aparecía como desprazado da parte superior. Isto correxímolo con vertical-aligh:top. Por último aparecía este div do centro pegado ao div da esquerda, non obedecendo a margin:o auto; Esto último solucionase poñendo no elemento pai text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow: hidden;
            text-align: center;
            
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            display:inline;
       
        }
        .esquerda{
            background:green;
            width:20%;
            float:left;
        }

         .centro{
            display:inline-block;
            vertical-align: top;
            background:red;
            width:20%;
            
        }
        .dereita{
            background:blue;
            width:20%;
            float:right;
        }
      
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

D. Só con float:left, engadindo a porcentaxe

     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow: hidden;
            text-align: center;
            
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            float:left;
            width:31%;
            margin:0 1.16666%;
       
        }
        .esquerda{
            background:green;
        
        }

         .centro{
         
            background:red;
            
            
        }
        .dereita{
            background:blue;
        
        }
      
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

Centrar unha imaxe

Para centrar unha imaxe débemos de configurar o display como block e seguidamente centrala con margin 0 auto;

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
margin:0 auto;
background:yellowgreen;
width:600px;
height: 70vh;
}
 
img{
display:block;
margin:0 auto;
position:relative;
top:50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://picsum.photos/200" alt="">
</div>
</body>
</html>

Centrar un div dentro doutro

Cando maquetamos na web, non debemos de empregas as táboas. As táboas só se empregan para almacenar valores numéricos. A alternativa ás táboas son dos contedores div. Neste caso creo un contedor chamado container e dentro del outro que chamo texto. O primeiro está centrado con respecto á pantalla e o segundo está centrado con respecto ao primeiro tanto vertical como horizontalmente.

 

a. Coa clase flexbox. Moi sinxela. Debemos de asignalle ao contenedor .container as seguintes instrucións:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 display:flex;
 justify-content: center;
 align-items: center;
 }
 
 .texto{
 background:orangered;
 width:400px;
 height: 200px;
 
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 </div>
 </div>
</body>
</html>

 

 

b. A segunda forma de facelo pode ser a seguinte. Darémoslle unha posición relative ao contedor texto e seguidamente empregaremos margin:o auto; para centralo horizontalmente e un top:50%; e tranform:translateY(-50%) para centralo verticalmente.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 }
 
 .texto{
 background:orangered;
 position:relative;
 width:400px;
 height: 200px;
 margin:0 auto;
 top:50%;
 transform: translateY(-50%);
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 
 </div>
 </div>
 
</body>
</html>

 

 

Formación Drupal CRA SANTA COMBA

WEB DO CRA SANTA COMBA

TITORIAIS DRUPAL

1. Engadir unha URL

http://oaoamatematicas.org/

https://drive.google.com/drive/u/0/folders/0Bw8FsVGnN_X3YmlHVFY5bXk0Y1E

2. Procupar unha imaxe libre en Google e publicala en Drupal

 

- Buscamos "Regletas de Cuisenaire"

- Descargamos a imaxe e publicámola na web

   a. A través da URL

   b. Subindo a imaxe ao servidor

3. Youtube

   Resta por descomposición: https://www.youtube.com/watch?v=cmvhANYivVg

4. Pdf

   https://oaoa.atio.es/sites/oaoa/files/inline-images/resta_rocodromo/resta_rocodromo_menor_30.pdf

   <iframe src="https://docs.google.com/viewer?url=https://oaoa.atio.es/sites/oaoa/files/inline-images/resta_rocodromo/resta_rocodromo_menor_30.pdf&embedded=true"  style="width:100%; height:500px;" frameborder="0"></iframe>

5. Vídeo

   a. Descargamos vídeo da web

   Montaxe dun Escornabot. CEIP DE BAIÑAS http://www.edu.xunta.gal/centros/ceipbainas/node/319

   http://www.edu.xunta.gal/centros/ceipbainas/system/files/escornabot.mp4

   Código:

   <div>
   <video width="512" height="240" controls="controls">
   <source src="http://www.edu.xunta.gal/centros/ceipbainas/system/files/escornabot.mp4" type="video/mp4" />
   O teu navegador non soporta este vídeo.
   </video>
   </div>

DIMINUIR O TAMAÑO DUN VÍDEO

6. Lightbox

   Titorial

   http://atio.es/acristina/data/_uploaded/image/abarca/abarca.jpg

https://blog.atio.es/sites/blog/files/inline-images/crastacomba/abarca2.jpg

  

SESIÓN 3

1. Crear unha nova cun texto, elixindo de forma axeitada a taxonomía e termo

https://www.lipsum.com/

a. Crear contido > páxina

b. Crear contido > Páxina portada

Volver a editala, cambiando o título. Borrala nova.

2. Descargar unha imaxe libre, cambiarlle o tamaño a un máximo de 500px de ancho co Gimp

https://unsplash.com/

3.Subir un pdf

a. Descargar este ficheiro pdf: https://oaoa.atio.es/sites/oaoa/files/inline-images/suma_arbol/suma_arbol_nivel_1.pdf

b. Sacar unha captura de imaxe de parte do pdf

c. Subir a imaxe resultado da captura

d. subir o pdf como ficheiro adxunto

e. Enlazar a imaxe co pdf

4. Inserir un vídeo de Youtube. Antonio Fraguas e os seus mestres. I.E.S de Cotobade

https://www.youtube.com/watch?v=HTYrYVjaeIA&feature=share

5. Inserir un vídeo con código html5

a. Descargar o vídeo: http://www.edu.xunta.gal/centros/ceipbainas/system/files/Mu%C3%B1eira%20Global.mp4

b. Crear contido Páxina. Adxuntamos o ficheiro de vídeo. Copiamos a URL e adaptamos o seguinte código.

<div>
<video width="720" height="406" controls="controls">
<source src="http://atio.es/fi/video.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

6. Redimensionar un conxunto de imaxes por lotes e crear un álbum

a. Descargar o xnconvert e instalalo e configurar o idioma: https://www.xnview.com/en/xnconvert/#downloads

b. Baixar a seguinte carpeta comprimida con imaxes. Descomprimila. Dentro da carpeta creamos unha subcarpeta chamada escaladas, na que introduciremos as fotos coas novas dimensións.

http://www.edu.xunta.gal/centros/zonaceed6/system/files/album_fotos_cra.zip

c. Co XnConvert, abrimos o cartafol no cal teñamos as fotos. En accións, escollemos a de Imaxe > Redimensionar, cun ancho de 300px

d. En saída, escollemos a subcarpeta escaladas e Nome de Ficheiro, deixamolo así {Filename}_r

e. Clic en convert

f. Editar o seguinte código html, modificando o src das imaxes

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
        #galeria_cra{
            box-sizing: border-box;
            width:100%;
            padding: 10px;
            background:#343C44;
            border-radius: 7px;
            overflow:hidden;
        }
        #galeria_cra .filagaleria{
            display:flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        #galeria_cra .caixa{
            display:flex;
            position: relative;
            width:300px;
            height: auto;
            margin-top:10px;
        }
    </style>
</head>
<body>
        <section id="galeria_cra">
                 
                    <div class="filagaleria">
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=1" alt=""></div>
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=2" alt=""></div>  
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=3" alt=""></div>  
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=4" alt=""></div>  
                        <div class="caixa"> <img src="https://picsum.photos/300/200?random=5" alt=""></div>  
                    </div>
        </section>  
</body>
</html>

f. Crear contido páxina. En formato de entrada escollemos PHP code e seguidamente clic en Desactivar texto enriquecido. Pegamos o código html modificado e gardar.

 

7. Cambiar a resolución de un vídeo con Handbrake

a. Descargar o handbrake: https://handbrake.fr/

b. Instalar ffmulticonverter


su root

apt update

apt install ffmulticonverter

b. Descargamos o ficheiro de alta resolución: https://drive.google.com/file/d/1uE4k7ZzwJ2whNgaWG9vRkNYEPekCXxBf/view

c. Cambiamos a resolución, seguindo este tutorial: https://blog.atio.es/node/125

     Dimensións finais: 512 x 288

     Bitrate: 600 kbps

     Audio bitrate:120

d. Publicámolo

 

Engadir unha cor de fondo a un texto en Drupal 6

En ocasións desexamos resaltar un texto. Para iso podemos engadir unha cor de fondo a esa nova en concreto. Podemos empregar os seguintes métodos para a súa edición. Un dos datos que hai que engadir é o código da cor que desexamos engadir de fondo. Unha maneira de consultar eses códigos e a través da páxina https://picular.co

OPCIÓN Nº1

Coa axuda das táboas

Inserir táboa → avanzado → Cor de fondo

taboa0.png

taboa1.png

taboa2.png

OPCIÓN Nº2

Coa axuda de código CSS (máis elegante). Creamos un novo contido tipo páxina. Clic en disable rich text:

disable.png

E pegas un código html similar ao seguinte, pero modificando o texto que aparece entre as etiquetas <p> ---</p>, polo desexado. É interesante engadir un padding, para que a nova manteña un marxe en todo o contorno.

 <!doctype html>
<html>
<head>
   <style type="text/css">

      #texto_cor_fondo {
          padding: 10px;
          background-color: #d8da3d; }
  </style>
</head>

<body>

<div id="texto_cor_fondo">
<p>


¿Qué es Lorem Ipsum?

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto... 

</p>
</div>
</body>
</html>

codigo.png

OPCIÓN Nº3

No caso de que traballemos cun ficheiro css nunha carpeta pública, eliminaremos do código html anterior a parte correspondente a <style> --- </style>, que debe de estar reflexado no ficheiro css da carpeta pública. Se queremos empregar ese estilo de fondo en máis dun sitio, en vez de escoller un id, debemos de definir unha clase, coa etiqueta class. Quedaría do seguinte xeito:

No ficheiro css:

 .texto_cor_fondo {

    padding:10px;
    background-color: #d8da3d;

  }

En cada entrada creanda engadiremos código html, dispoñendo entre a etiqueta <p> ---</p> o texto que consideremos

<!doctype html>
<html>
<head>
</head>

<body>

<div class="texto_cor_fondo">
<p>

¿Qué es Lorem Ipsum?

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

</p>
</div>
</body>
</html>

resultado.png

 

 

Diminuir o peso dun vídeo e publicalo en Drupal

Aínda que existen moitas maneiras de baixar o peso, é dicir os megabytes dun vídeo, deixo por aquí o método que emprego eu.

1. HandBrake

En Source escollemos o vídeo que desexamos baixarlle o tamaño

source.png

Na pestana Summary indícanos as dimensión que ten o vídeo. Neste exemplo ten 1920*1080 px. Pero ocupa 160 mb. Deberemos de baixarlle o tamaño, basicamente para non arruinarlle o ancho ancho de banda aos usuario que queiran visualizalo.

Pinchamos en Picture

picture.png

En Storage Geometry, baixamoslle o tamaño ata o desexado. Con un width de 512 mantén unha visualización moi boa. Ao ir baixando o ancho, automaticamente xa adapta o alto (height). Tamén deberemos definir o nome do ficheiro e o cartafol de saída. Fixámonos que o Handbrake cambia a extensión a m4v.

novasdimensions.png

Finalmente clic en Start, para que faga a conversión de tamaño. O novo tamaño do vídeo é de 33.4 Mb. Procedemos agora co ffmulticonverter a convertilo nun ficheiro mp4

2. ffmulticonverter

Empregaremos este software para convertir a extensión m4v a mp4. Se non o temos instalado, podémolo facer coa seguinte instrución:

su root

apt install ffmulticonverter

Engadimos o ficheiro que nos gardou o Handbrake. Clic en Engadir. En converter, escollemos a extensión mp4. Eliximos o cartafol de saída. Finalmente clic en Converter.

ffmulti.png

Con este software poderíamos evitar empregar o Handbrake, pois pinchado en Máis podemos observar que podemos cambiarlle o tamaño directamente. Sen embargo entendo que é máis sinxelo co Handbrake.

O tamaño final deste vídeo exemplo é de 13.2 Mb, tamaño máis razonable.

3. Publicalo en Drupal

Creamos un novo contido, tipo páxina.

paxina.png

Engadimos o título da nova. Seguindamente en ficheiros adxuntos, subimos ao servidor o vídeo

ficheirosadxuntos.png

Desmarcamos o check de Lista. Se nos fixamos aparece debaixo do cadro o enderezo URL no cal está publicado o vídeo. Neste exemplo é o seguinte: http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4

 

Subimos novamente e prememos en "Desactivar texto enriquecido"

texto_enriquecido.png

E pegamos o seguinte código, pero en src debemos de inserir a url na cal se atopa o vídeo encomillado

<div>
<video width="512" height="288" controls="controls">
<source src="http://www.edu.xunta.gal/centros/ceiplabartapose/system/files/AS%C3%8D%20SE%20FIXO_1.mp4" type="video/mp4" />
O teu navegador non soporta este vídeo.
</video>
</div>

Finalmente clic en Gardar. E este sería o resultado:

resultado_video.png

Outro software alternativo para diminir o tamaño dun vídeo: DEVEDE

apt install devede

Menú adaptable ao móbil en Drupal 8

mmenu.jpeg

Estes foron os pasos que dei para configurar o menú do paxina para que fose adaptable ao móbil. Como sempre, con seguridade de pode facer doutros xeitos, esta é unha máis:

1. Instalación do mógulo responsive_menu

https://www.drupal.org/project/responsive_menu

2. Instalación e activación dos módulos context e context UI

https://www.drupal.org/project/context

3. Instalación da librería mmenu

cd /var/www/html/tic/drupal/libraries
wget https://api.github.com/repos/FrDH/jQuery.mmenu/zipball
unzip zipball
mv mv FrDH-jQuery.mmenu-e5df2d3 mmenu

4. Instalación da librería hammerjs

wget https://api.github.com/repos/hammerjs/hammer.js/zipball
unzip zipball
mv hammerjs-hammer.js-563b5b1 hammerjs

5. Instalación da librería superfish

wget https://api.github.com/repos/joeldbirch/superfish/zipball
unzip
mv joeldbirch-superfish-442820e superfish

6. Activar responsive_menu

7. Comprobar que en Informes -> Informe de estado temos mmenu, hammersjs e superfish instalados.

8. No apartado de adminsitracion / responsive design, e dentro del en OFF CANVAS
Escribimos main e non Main Navigation, xa que main é o nome que lle da a máquina. Pódese observar na seguinte imaxe:

name-main.png

Onde pon marchine name:main

off-canvas.png

9. En Primary menu engadimos o bloque Responsive menu mobile icon

10. En unha páxina monoligüe, podemos activar o bloque horizontal-menu. Sen embargo, nunha páxina plurilingüe non actializa o menú cada vez que cambiamos de idioma, ao idioma desexado. Neste caso, non activamos o bloque horizontal menu, e introducimos o bloque Main Navigation. Pero a súa vez debemos de configurar con CSS a non visibilidade deste bloque no dispositivos máis pequenos, como nunha tablet ou ben nun smartphone. Engadiremos o seguinte código css:

@media screen and (min-width: 0px) and (max-width: 851px) {
 #block-mainnavigation { display: none; }  /* show it on small screens */
}

E tamén para ver a letras en cor branco

#block-mainnavigation ul li a
{ color: white; }

Non debemos de esquecer que ás veces, ao modificar o código css, debemos de valeirar a caché  para que se poida visualizar correctamente no móbil:

/admin/config/development/performance

valeirar.png

Engadir follas de estilo CSS a Drupal 8

drupal_8

 

Procedo a explicar o procedemento para engadir CSS en Drupal 8 co tema bootstrap, pero entendo que se fai de maneira análoga con calquera outro tema:

Accedemos á carpeta do tema, neste caso bootstrap

cd /var/www/html/drupal/web/themes/bootstrap

Editamos o seguinte fichiero:

nano bootstrap.info.yml

Na sección libraries, engadimos o nome da nosa librería personalizada, que no paso seguinte editaremos (bootstrap.libraries.yml). No meu caso engado a librería bootstrap/martin

libraries:
  - 'bootstrap/theme'
  -  bootstrap/martin

Editamos seguidamente o ficheiro das librerías:

nano bootstrap.libraries.yml

E creamos unha sección ao final do ficheiro. No meu caso chameille martin

martin:
  version: VERSION
  css:
    base:
       css/base/atio.css: {}


E por último teño que crear o ficheiro atio.css en ruta /drupal/themes/bootstrap/css/base/atio.css. E neste css engado as regras CSS desexadas.

Pero, falta un paso importante. Deberemos de ir a Configuración. Neste apartado, e concretamente en Rendemento debemo de valeirar a caché, para que se cargue o novo ficheiro CSS

CSS NUN DRUPAL MULTISITE

No caso dun Drupal multisite, antes de nada deberemos de facer unha copia do tema no site correspondente

cd /var/www/html/drupal/web/themes/

cp -rp bootstrap /var/www/html/drupal/sites/blog/themes

E tal e como expliquei desde o principio, seguir os mesmos pasos, pero iso si, coa nova ruta específica para o site correspondente, neste caso blog (/var/www/html/drupal/sites/blog/themes)

CSS EXTERNO

Se desexamos ter un ficheiro CSS externo, que nos poida servir para varios sitios con Drupal, cambiamos na librería bootstrap.libraries.yml

martin:
  version: VERSION
  css:
    base:
      https://atio.es/pub/blog_atio.css: { type: external, minified: true}

 

 

Subscribe to Drupal