Drupal é o CMS empregado por webs dinámicas para os centros de ensino. As posibilidades que ofrece este xestor de contidos son moitas, xa que é un CMS moi completo, sendo ademais software libre.
Ver introdución a Drupal: http://atio.es/cursodrupal/ficheiros/download.php?file=../introducion_drupal.pdf
En ocasións necesitamos transformar un documento pdf composto por varias follas en un só documento, con varias follas en horizontal ou en vertical. Para isto é preciso dispoñer do software pdfnut.
Procedemos a instalalo:
apt install texlive-extra-utils
Abrimos o co terminal a carpeta onde dispoñamos do documento pdf
a. Impresión do ficheiro en dúas follas por páxina en horizontal
pdfnup --nup 1x2 interior.pdf
Ver resultado
b. Impresión do ficheiro en vertical, creando unha sóa folla
pdfnup --nup 1x2 interior.pdf
Ver resultado
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
2. Creamos unha base de datos específica para o drupal que formará parte do subdominio. No meu caso tamén o chamo linux
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
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)
Creamos un novo contido, tipo páxina.
Engadimos o título da nova. Seguindamente en ficheiros adxuntos, subimos ao servidor o vídeo
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"
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:
mv composer.phar ~/bin/composer.phar mkdir ~/bin cd ~/ Creamos un alias as composer. Para iso creamos o profile de bash touch .bash_profile nano ~/.bash_profile alias composer="php -d suhosin.executor.include.whitelist=phar ~/bin/composer.phar" source ~/.bash_profile comprobamos que funciona: composer
cd ~/bin mkdir drush
descargamos a última versión de drush
git clone https://github.com/drush-ops/drush.git ~/bin/drush cd ~/bin/drush composer install
Cando executaba a sentencia anterior o sistema imprimía un erro de memoria con un "Allocated Memory". Para solventar esta paso observei que o meu vps non dispón de memoria suficiente (512 mb) e non dispoñía de swap. Engadín 1 GB de memoria á Swap. Para iso seguín este titorial
composer install
Se neste punto comprobamos a versión de drush, obtemos que estamos coa versión 9.x-dev. Pero esta versión non nos vale, xa que da erros ao executar as sentencias de actualización da base de datos de Drupal, escribindo un deprecated instruction. Para a actualización do Drupal 8.4.2, precisamos a versión de Drush 8.1.15
mkdir ~/bin/drush8 cd ~/bin/drush8 composer require "drush/drush:8.*" Creamos un alias á version drush8 alias drush='~/bin/drush8/vendor/bin/drush'
Este alias debemos de metelo no .bash_profile, senón ao reiniciar o servidor perderanse os cambios
nano ~/.bash_profile
engadimos:
alias drush='~/bin/drush8/vendor/bin/drush'
e actualizamos
source ~/.bash_profile
comprobamos que funciona
drush --version
Agora obtemos a versión de drush 8.1.15 precisa
Antes de nada facemos copia de seguidade da base de datos de Drupal e do cartafol no que teñamos instalado o Drupal.
a. Poñemos o sitios en modo mantemento
cd /var/www/html/drupal drush sset system.maintenance_mode 1
(Tamén o podemos facer sen ir ao cartafol empregando sentencias deste xeito:
drush --root=/var/www/html/drupal/ --uri=blog.atio.es sset system.maintenance_mode 1)
b. Reconstruímos a caché
drush cr
c. Actualizamos as dependencias de composer:
Seguimos en: cd /var/www/html/tic/drupal
composer update
d. Actualizar Drupal
composer require drupal/core:8.4.2 --update-with-dependencies drush updb
Sen embargo aquí atopei moitos fallos. Por exemplo o seguinte:
root@debian:/var/www/html/drupal# drush pm-uninstall mbase Drupal\Core\Extension\InfoParserException: Unable to parse themes/mbase/mbase.info.yml The reserved indicator "@" cannot [error]
Neste caso dirixinme ao cartafol dos temas e eliminei a carpeta mbase
Tamén se presentaron fallos co módulo imce a co tagadelic. Neste caso elimineinos da base de datos coas seguintes instrucións:
drush sql-query "DELETE FROM key_value WHERE collection='system.schema' AND name='imce';" drush sql-query "DELETE FROM key_value WHERE collection='system.schema' AND name='tagadelic';"
Aínda así non resolvín o erro tagadelic_list. Sen embargo executoume correctamente as dúas sentencias seguintes de actualización:
drush updb drush pm-update
e. Quitamos o modo mantemento do sitio:
drush sset system.maintenance_mode 0
f. Reconstruímos a caché
drush cr
Con isto xa accedemos ao sitio e visualizase ben, sen embargo ao crear contidos, imprimía un erro inesperado. Ao dirixirme a Informes -> Mensaxes recentes de rexisto e filtrando os erros obtiña o seguinte:
Drupal\Component\Plugin\Exception\PluginNotFoundException: The "php_code" plugin does not exist. in Drupal\Core\Plugin\DefaultPluginManager->doGetDefinition() (line 52 of /var/www/html/tic/drupal/core/lib/Drupal/Component/Plugin/Discovery/DiscoveryTrait.php).
Polo que parecía o erro estábao dando o módulo PHP Filter, pois estaba desactivado. Sen embargo cando o intentaba activar, o drupal non me deixaba, pois decíame que tiña un ficheiro de configuración activo. Poiden solucionalo instalando o módulo Easy Install que podemos atopar no seguinte enderezo:
https://www.drupal.org/project/easy_install
Con este módulo, ao pinchar en extend, aparece unha nova pestana que indica "Purge configurations", eleximos o módulo php_filter e eliminamos todas as configuracións
Seguidamente vamos a módulos, e activamos novamente o PHP FILTER
4. ERROS
Se despois de facer todo o proceso, aparece esta mensaxe
O sitio web atopou un erro inesperado. Por favor, inténteo de novo máis tarde.
Podemos revisar o erros de php, para visualizar que módulos están dando fallos.
admin/reports/dblog (log de php)
Ese módulo debemos de desinstalalo, eliminar toda a configuración (co módulo easy install)e proceder a instalalo novamente.
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
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)
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}
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/
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
E creamos o cartafol chamado css. Neste cartafol crearemos un ficheiro de estilos 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:
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"
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
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.
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
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
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:
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:
1. Instalar certbot e python-cerbot-apache
apt-get install -t certbot apt-get install -t python-certbot-apache
2. Activamos módolos ssl
sudo a2enmod ssl
pero se ao reiniciar o servizo de apache, é posible que falle.
systemctl restart apache2
Solución
Non conseguía que arrancara o Apache, daba erro. O problema era debido a que outro programa está empregando o porto 443. Coa seguinte instrucción pódese averiguar de cal se trata, moi probablemente sexa o sshd. Debemos de paralo, e seguidamente iniciamos de novo o servizo de Apache. No meu caso tiven que reinstalar posteriormente o ssh-server.
netstat -tlpn | grep 443 service sshd stop systemctl restart apache2
3. Creamos os ficheiros coas chaves públicas e privadas. Unha vez creadoos, aparecerán na seguinte ruta: /etc/letsencrypt/live/
certbot certonly --webroot -w /var/www/html/tic -d blog.atio.es
Se ao final aparece a seguinte mensaxe, fixémolo ben
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at
/etc/letsencrypt/live/www.atio.es/fullchain.pem. Your cert will
expire on 2018-05-16. To obtain a new or tweaked version of this
certificate in the future, simply run certbot again. To
non-interactively renew *all* of your certificates, run "certbot
renew"
- If you like Certbot, please consider supporting our work by:
Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
Donating to EFF: https://eff.org/donate-le
4. Debemos de configurar o virtual host /etc/apache2/site-avaliable
#Páxina web do servidor do centro
<VirtualHost 128.199.58.55:80>
ServerAdmin martindetecnoloxia@gmail.com
ServerName http://www.atio.es
ServerAlias blog.atio.es
# Indexes + Directory Root.
DirectoryIndex index.php
DocumentRoot /var/www/html/drupal
Options FollowSymLinks
<Directory "/var/www/html/drupal">
AllowOverride All
</Directory>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
</VirtualHost>
<VirtualHost 128.199.58.55:443>
ServerAdmin martindetecnoloxia@gmail.com
ServerName http://www.atio.es
ServerAlias blog.atio.es
# Indexes + Directory Root.
DirectoryIndex index.php
DocumentRoot /var/www/html/drupal
Options FollowSymLinks
<Directory "/var/www/html/drupal">
AllowOverride All
</Directory>
SSLEngine on
SSLCertificateFile /etc/letsencrypt/live/blog.atio.es/cert.pem
SSLCertificateKeyFile /etc/letsencrypt/live/blog.atio.es/privkey.pem
SSLCertificateChainFile /etc/letsencrypt/live/blog.atio.es/chain.pem
</VirtualHost>
Co seguinte código engadido no código que acabamos de visualizar forzamos a visualización da páxina en https
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
Borramos /etc/apache2/site-enabled/atio.es.conf
Volemos a /etc/apache2/site-avaliable
a2ensite atio.es.conf systemctl reload apache2
5. Abrimos o cortafuegos. No meu caso engadín as seguintes instrucións
sudo ufw allow 'WWW Full'sudo ufw allow 'SSH'sudo iptables -I INPUT -p tcp --dport 443 -j ACCEPT
6. Engadimos unha tarefa cron para que nos renove os certificados, pois caducan aos 90 días
Crontab -e 30 1 * * 1 /usr/bin/certbot renew >> /var/log/le-renew.log
1. Presentación
2. Para que nos pode valer a web do centro?
https://www.youtube.com/watch?v=Co27sUOD0w0
1. Engadir unha URL
https://matematicinfantil.wordpress.com/
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
Om Mani Padme Hum: https://youtu.be/R-ZO7bsA2pA
4. Pdf
https://almumoyamartinez.files.wordpress.com/2016/12/material-regletas.pdf
a. Recorte de imaxe. Enlazar a imaxe ao documento
b. Pdf no Drupal e no móbil https://blog.atio.es/node/260
<style>
.folletomobil{
position:relative;
overflow:hidden;
padding-bottom:70%;
}
.folletomobil iframe{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
</style>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
</head>
<body>
<div id="folleto" class="folletomobil"></div>
<script>
function detector(){
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
){
document.getElementById('folleto').innerHTML += '<iframe src="https://docs.google.com/viewer?url=http://www.edu.xunta.gal/centros/zonaceed6/system/files/Asperger_final.pdf&embedded=true" frameborder="0"></iframe>';
}
else{
document.getElementById('folleto').innerHTML += '<iframe src="http://www.edu.xunta.gal/centros/zonaceed6/system/files/Asperger_final.pdf" frameborder="0"></iframe>';
}
}
$(document).ready(function() {
detector();
});
</script>
</body>
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>
6. Lightbox
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
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
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/colega.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
1. Engadir unha URL
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>
6. Lightbox
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
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
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