Diminuír 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
Termo

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

Termo

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}

 

 

Termo

Converter un Drupal nun multisite

1. Non noso proveedor de dominio, creamos o subdomino que apunte á IP do noso hosting. No meu caso creo un subdominio chamado linux que apunta á IP

domion

 

2. Creamos unha base de datos específica para o drupal que formará parte do subdominio. No meu caso tamén o chamo linux

database

 

3. Creamos un cartafol  dentro da carpeta /drupal/sites. Dentro do mesmo creamos a súa vez dentro de sites as carpetas files, modules, themes, tmp

cd  ....drupal/sites/linux

mkdir files modules themes tmp

A súa vez dentro de files, debemos de crear o cartafol translations

cd files

mkdir translations

Dámoslle premisos para poder escribir no cartafol files

cd ..

chown -R 777 files

4.Copiamos da carpeta /www/drupal/sites/default, os ficheiros settings.php e default.services.yml na carpeta do novo sitio creado. No caso de default.services.yml cambiámoslle o nome por services.yml no novo cartafol.

cd ~/www/drupal/sites/default

cp settings.php ../linux

cp default.services.yml ../linux/services.yml

Modificamos settings.php, engando:

$databases['default']['default'] = array (
  'database' => 'linux',
  'username' => 'usuario',
  'password' => 'contrasinal',
  'prefix' => '',
  'host' => 'localhost',
  'port' => '3306',
  'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',
  'driver' => 'mysql',
);

5. Dentro de /www/drupal/sites hai un ficheiro chamado example.sites.php. Renomeámolo por sites.php

cd ~/www/drupal/sites/

mv example.sites.php sites.php

Modificamos o fichieros sites.php, engandindo o nome dos subdominios

$sites = array(
      'linux.atio.es' => 'linux',
      'rdp.atio.es' => 'rdp',
      'blog.atio.es' => 'blog',
);

7. Accedemos ao subdomino e procedemos coa instalación de Drupal

novositio

8. Despois de instalar o Drupal, deberemos de retirar o permiso de escritura do ficheiro settings.php situado dentro do cartafol linux (neste caso en concreto)

 

Termo

Acelerar Drupal

Podemos acelerar un pouco Drupal empregando o módulo memcache. Antes de nada debemos de instalar o módulo memcached de php

apt install php-memcached (para php versión 7)

apt install php5-memcached (para php versión 5)

Reiniciamos o servizo Apache2

systemctl restart apache2

En Drupal engadimos o módulo memcache:

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

 

Termo

Sobreescribir regras de estilo CSS en Drupal 6. Engadir cor nos bloques do tema 0Point

En moitas ocasións os temas dos que dispoñemos en Drupal poden resultar un tanto serios. Para algunha páxina ou blog non se axustan, xa que procuramos dar unha imaxe máis viva e alegre. Velaquí temos un exemplo:

Cra os Remuiños: http://www.edu.xunta.gal/centros/craremuinos/

IES Ramón Caamaño: http://www.edu.xunta.gal/centros/iesramoncaamano/

 

cra_web

 

ies

O proceso para a configuración dunha páxina é o seguinte:

1. Crear unha carpeta para colocar os códigos CSS que sobreescriban os propios de Drupal. Para isto debemos de activar o módulo IMCE Mkdir

Indo ao apartado "a miña conta" -> xestor de ficheiros, e facemos un clic en engadir/editar imaxe e seguidamente en examinar. No explorador de ficheiros debemos de pinchar en Directory

directory

E creamos o cartafol chamado css. Neste cartafol crearemos un ficheiro de estilos css.
 

folder_css

 

2. Analizamos cales son os nomes identificativos dos bloques, para ir escribindo o código no fichero css que podemos chamar style.css, por exemplo

Imaxinemos que na nosa web temos un bloque como o seguinte:

bloque_cra

Xa temos o bloque coa información necesaria, o único que queremos é mudar a cor de fondo e quitarlle o borde que o tema 0Point de Drupal lle engade por defecto. Para iso, premendo co botón dereito do rato sobre o cadro e seguidamente en "Inspeccionar elemento"

inpec

Aparece no borde inferior o código da páxina web. Aparece un dos elementos que forma parte do bloque en cor azul. Pero debemos de procurar o div raiz no cal están tódolos elementos do bloque, tan só temos que recorrer o código cara arriba, ata atopar a etiqueta div id="block-block-xx", onde xx é un número

codigo

 

Pois esta etiqueta será a que teñamos que configurar (tamén podemos configurar por class, pero vexamos unha maneira sinxela).

3. Creamos co editor de notas (mousepad, gedit, leafpad, etc), un ficheiro que chamamos style.css. E engadimos o seguinte contido:

/*contacto*/
#block-block-22 {
    border: 0px;
    background: #66b8dd;

  }

Onde:

/*contacto*/ é un comentario que nos sirve para identificar a que bloque nos estamos referindo

#block-block-22, é o id do bloque, que procuramos no paso anterior (id="block-block-22"

border: 0px;, no caso de non querer engadirlle un borde ao bloque

background: #66b8dd; , que é unha cor de fondo azulada

Obviamente repetimos os pasos anteriores cos diferentes bloques que queremos personalizar.

4. Subimos o ficheiro ao cartafol css que creamos no apartado nº1. Subímolo desde a miña conta -> xestor de ficheiros.

mousepad

 

style_subido

 

Pinchando en style.css aparece na parte inferior o nome style.css (ver imaxe), e ao pinchar neste segundo style.css,  ábrese a fiestra do editor de imaxes, desde o cal podemos copiar a url na que se atopa o ficheiro style.css

segundo_sty

 

url_copiar

Neste exemplo trátase da seguinte url:     /centros/iesramoncaamano/system/files/css/style.css

5. Seguidamente dirixímonos á zona de administración ->Construción da páxina -> Bloques. Prememos en Engadir bloque

engadir_bloque

Ao bloque chamarémoslle css_code, por exemplo. Non lle poñemos ningún título. Prememos en Formato de entrada e escollemos PHP code e seguidamente en "Desactivar texto enriquecido", e pegamos o código:

<html>
<head>
<?php
echo '<link href="/centros/iesramoncaamano/system/files/css/style.css" rel="stylesheet">';
?>
</head>
<body>
</body>
</html>

Deberemos de modificar o enderezo que aparece na etiqueta link href=  polo enderezo do ficheiro css do teu caso. Gardamos o bloque.

Finalmente colocamos o bloque css_code recén deseñado na parte superior da Cabeceira:

cabeceira

Deste xeito, cada vez que un usuario abre a páxina, o bloque css_code chamará ao ficheiro style.css, que sobreescribirá os estilos de Drupal. O resultado é o seguinte:

contacto

 

Termo

Instalación de Drupal 8 en configuración multisite en Dinahosting

O seguinte titorial describe como instalar un Drupal 8 en modo multisite en Dinahosting. Imaxino que poderá funcionar tamén para otros servidores compartidos

O primeiro que debemos de decidir é se queremos ter unha soa base de datos ou compartir a mesma para todos os sitios do multisite.

  1. Instalamos un drupal 8. Para iso podemos empregar o drush, tal e como expliquei na entrada: http://blog.atio.es/node/8

  1. Unha vez rematada a instalación, debemos de facer un backup da base de datos do drupal a un ficheiro sql. Podemos facelo desde phpMyAdmin, dentro do portal de Dinahosting. Para iso vamos ao apartado de Mysql, abrimos o phpMyAdmin da base de datos empregada e vamos ao apartado exportar.

Teremos un ficheiro que podemos gardalo co nome backup_mysql_drupal.sql

Subimos este ficheiro ao servidor. Por exemplo podemos gardalo na carpeta bin, ou en calquera outra. Para subilo podemos facelo c

on scp, por exemplo:

scp backup_mysql_drupal.sql user@servidor.es:bin

  1. Seguidamente debemos de crear tantas carpetas como sitios queremos ter activos. O máis cómodo é facelo por ssh.

ssh usuario@servidor.es

cd ~/www/drupal/sites

mkdir sitio1 sitio2

Os nomes, deben de corresponder cos que queiramos empregar no subdominio. Se por exemplo no subdominio queremos algo así:

http://xoel.servidor.es

entón a carpeta que creamos dentro do drupal, debería de chámarse xoel

cd ~/www/drupal/sites

mkdir xoel

  1. Aínda que non teño demasiado claro se é necesario, dentro de cada carpeta creada debemos de crear as seguintes:

cd ~/www/drupal/sites/xoel

mkdir files modules themes tmp

  1. Copiamos da carpeta /www/drupal/sites/default, os ficheiros settings.php e default.services.yml na carpeta do novo sitio creado. No caso de default.services.yml cambiámoslle o nome por services.yml no novo cartafol.

cd ~/www/drupal/sites/default

cp settings.php ../xoel

cp default.services.yml ../xoel/services.yml

  1. Dentro de /www/drupal/sites hai un ficheiro chamado example.sites.php. Renomeámolo por sites.php

cd ~/www/drupal/sites/

ms example.sites.php sites.php

  1. Editamos o ficheiro sites.php. Nel engadimos un array dos diferentes sitios que temos no drupal

nano sites.php

E pegamos nel co seguinte contido, imaxinado que crearamos tres sitios: sitio1, sitio2, xoel. Para pegar ou copiar no terminal podemos facelo con Shift+Control+C ou Shift+Control+V

<?php

$sites = array(

      'sitio1.atio.es' => 'sitio1',

      'sitio2.atio.es' => 'sitio2',

    'xoel.atio.es' => 'xoel',

);

Preta moita atención ás comiñas!

Para saír do editor nano, prememos en Control+x e seguidamente en Y para salvar o cambios.

8. Entramos no portal de Dinahosting e vamos ao apartado de dominios. Dentro deste apartado dirixímonos ao subapartado subdominios.

Creamos 3 subdominios que apuntan ao cartafol no cal temos a instalación de Drupal

sitio1.servidor.es  www/drupal

sitio2.servidor.es  www/drupal

xoel.servidor.es  www/drupal

9. Tamén desde o portal de Dinahosting, vamos ao apartado de Mysql e creamos tantas bases de datos como espacios creemos. Debemos de indicar o nome da base de datos, o usuario e contrasinal.

Por exemplo, podemos poñer os seguintes datos:

base de datos: xoel_servidor

utente: user_xoel_servidor

contrasinal: Pass1234

Fixámonos que hai un check xusto embaixo que serve para importar unha base de datos xa existente.

10. Volvemos á carpeta xoel (para o resto de carpetas deberíanos de facer o mesmo):

cd ~/www/drupal/sites/xoel

dámoslle permisos de escritura:

chmod 700 settings.php

e editamos settings.php

nano settings.php

Desprazámonos ata o final do ficheiro ata que atopamos o apartado no cal se configura a base de datos. Engadimos os datos do apartado 9

$databases['default']['default'] = array (

 'database' => 'xoel_servidor',

 'username' => 'user_xoel_servidor',

 'password' => 'Pass1234',

 'prefix' => '',

 'host' => 'localhost',

 'port' => '3306',

 'namespace' => 'Drupal\\Core\\Database\\Driver\\mysql',

 'driver' => 'mysql',

);

11. Debemos de instalar o módulo Devel. Se non o temos instalado o Drupal liase cos enderezos, por mor da caché. Por exemplos se vamos a xoel.servidor.es/user/login, danos erro, decindo que non atopa o enderezo.

Para instalalo entramos co seguinte enderezo:

http://servidor.es/drupal

O enderezo do módulo devel é:

https://ftp.drupal.org/files/projects/devel-8.x-1.0-beta1.tar.gz

Tamén debemos de limpar a caché. Iso facémolo  desde o terminal e empregando o drush

drush cache-rebuild

Termo
Subscribe to Drupal