Drupal (Nivel I) Juan Marcos Filgueira www.gabit.org

1. Xestión de portais
con Drupal
Administración básica e publicación de contidos
Por Juan Marcos Filgueira Gomis, 2011/2012

2. Folla de ruta
1. Introdución
2. Que é Drupal
3. A prol e en contra
4. Quen o usa?
5. Instalación e configuración
6. Engadir un contido
7. Engadir un menú
8. Crear unha páxina complexa
9. Ampliando a biblioteca

3. Introdución
Problema:
Facer unha páxina web...
Farto laborioso!
Facer un portal...
Peor mo pos!

4. Introdución
→ Solucións...
» Ferramentas de autor: eXe-Learning, Kompozer, ...
» Ferramentas en liña: Blogues, Wikis, Google Sites, ...
» Sistemas de xestión de contidos (CMS): Drupal, Joomla!, ...

5. Que é Drupal?
→ En neerlandés: 'Gota'
→ Sistema de xestión de contidos ou CMS
→ As páxinas web gárdanse en Base de datos
→ Multipropósito
→ Xestión de sitios web de gran tamaño, comunidades ou portais
→ Deseño modular: Blogues, RSS, enquisas, tipos de contidos, ...

6. A prol
→ Software libre e gratuíto
→ Modular e extensible
» Repertorio de módulos
» API de desenvolvemento
→ Seguridade e permisos
» Roles e permisos, actualizacións continuas, etc...
→ Comunidade e soporte
» Moitos profesionais e empresas implicadas

7. En contra
→ Interface pouco amigable
» Sistema de menús e consulta de contidos complexo
→ Curva de aprendizaxe
» Inicialmente moi pronunciada
→ Temas
» Escasa variedade e poucas opcións
de configuración

8. Comparativa aprendizaxe dos CMS

9. Niveis de aprendizaxe
(4) Soporte/documentación/actualización
(1) Núcleo Drupal
(5) Regras e optimizacións
(2) Niveis básicos de vistas
(6) Niveis intermedios de vistas e optimización
(3) Niveis intermedios de vistas e
módulos de propósito específico (7) Secretos ninja

10. Quen o usa?
→ Educación
» Webs Dinámicas, outros sitios e portais de diferentes autonomías
» Universidade de Columbia: http://www.cs.ubc.ca
→ Software
» Ubuntu: http://www.ubuntu.com
» Firefox: http://www.spreadfirefox.com
→ Administración
» A Casa Blanca: http://www.whitehouse.gov
→ Revistas en liña
» Kriptópolis: http://www.kriptopolis.org

11. Que é Drupal?
CMS CMS
Xestión Xestión de
de sistemas de
contidos comunicación
DRUPAL CMS
CMF
Sistema de
Marco e creación de
API de comunidades
Desenvolve-
mento

12. Sistema de xestión de contidos
DRUPAL
→ Creación, edición, borrado e publicación de contidos
→ Categorías para organización do contido
→ Control de acceso. Usuarios e roles.
→ Presentación. Temas estilos e formatos.
→ Sistema modular e extensible

13. Exemplos de CMS de Sw Libre
→ Todas son ferramentas de Sw Libre en Php para
plataformas LAMP/WAMP/LAPP/...
→ Drupal
» Soporte para varias Bases de datos. Moi popular.
→ Joomla!
» Principal alternativa a Drupal. Cun maior soporte para AJAX, pero moito
menos intuitivo.
→ Wordpress.
» CMS evolución da creación de Blogues engadindo páxinas e menús.
→ OsCommerce.
» CMS orientado á creación de tendas en liña.

14. Arquitectura

15. Instalación de Drupal
http://www.drupal.org/download
→ Opcións de descarga
» Drupal co núcleo básico
» Perfís de instalación (Wiki, comunidade, e-Comercio, ...)
» Temas, traducións e módulos
→ Linux:
» Repositorios e centros de software
→ Windows:
» Instaladores Bitnami ou Acquia
http://bitnami.org/stacks

16. Instalación de Drupal
→ Proceso de instalación básico (Sen instalador)
• Dispoñemos dunha base de datos e intérprete PHP
• Copiamos o ficheiro de configuración default.settings.php en
/sites/default
• Creamos a Base de datos referida no arquivo de configuración
• Seguimos os pasos do instalador de drupal dende o navegador
→ Proceso de instalación básico (Con instalador)
• Realizamos a instalación do paquete BD + PHP + Drupal
• Seguimos os pasos do instalador de drupal dende o navegador

17. Instalación de Drupal
Descargamos o instalador dende a páxina de Bitnami
(Todo o Stack)
(Só o módulo
de Drupal)

18. Instalación de Drupal
Base de datos
Servidor web
(MySQL)
(Apache)
http://localhost/drupal
Dende o meu
No meu ordenador
Navegador

19. Estrutura de cartafoles

20. Administración: Contidos
→ O contido divídese en unidades de información: Nodos
→ Tipos de nodos: Páxinas, artigos do blogue, foros, etc ...
→ Organización e clasificación en categorías ou taxonomías,
o que equivalería a cartafoles
→ Permitir comentarios ou iteración cos usuarios
→ Opcións de administración: Busca de contidos, configuración, ...

21. Vou crear unha
páxina para
probar!!!

22. Engadir un contido tipo páxina
→ Empezamos con algo sinxelo, crear un páxina:
(1) Entramos co noso usuario/a
(2) Dende o noso menú de administración imos a “Crear contido”
(3) Aparecerá a lista de contidos dispoñibles
(4) Creamos o contido, enchendo os datos e elaborando a páxina
co editor incorporado
(5) Creamos un menú novo
(6) Enlazamos o menú coa páxina (nodo) que acabamos de crear

23. Engadir un contido

24. Engadir un contido
(1) Título da páxina
(2) Categorías ou temas ás
que a podemos asociar ou
clasificar a páxina
(3) Corpo ou código da
páxina, a crear co editor ou
colando de Word
(4) Engadir imaxes
(5) Formatos de entrada,
permitindo código PHP ou
con filtrado HTML

25. Engadir un contido
(6) Texto que levará a ligazón no
menú
(7) Grupo de ligazóns no menú onde
se incrustará a nova páxina
(8) Peso da ligazón que indicará a
orde na que aparece dentro do seu
grupo de menús
(9) Opcións para permitir ler ou
escribir comentarios a outr@s
usuari@s
(10) Engadir un ficheiro como
achega da páxina (p.ex. un PDF)

26. Engadir un contido
http://www.edu.xunta.es/centros/cfrferrol/node/59
+ Categorías
(11) Que apareza publicado ou como borrador
(12) Na páxina principal (Inicio)
(13) Adianta en orde cronolóxico ás posteriores
(14) Historial tipo Wiki
(15) Vista previa de como quedaría
(16) Mandar e listo!

27. Engadir un contido
Como o ve o autor?
(1) Título da páxina
(2) Menú rápido para volver a editar
(3) Corpo da páxina
(4) Engadir un comentario (polo autor)

28. Engadir un menú
Onde o temos vinculado?
Imos crearlle unha sección propia...
3

29. Engadir un menú
Poñemos título á sección!
E imos engadirlle un
menú para a nosa páxina!

30. Engadir un menú
Temos que lembrar
o código????
Estarás de coña!!
Así é directo,
pero temos
alternativas!
(6) Texto que levará o menú
(7) Ruta ao nodo, identificador do nodo, que xa vimos
(8) Enviar e listo!

31. Engadir un menú
Escollemos o menú da lista
e gardamos de novo. Listo!

32. Engadir un menú
Epa!!! Pero onde está o meu menú?? Será que Drupal no vale para nada?

33. Poñer o menú nun bloque
Hai que poñer a sección de
menú nun dos bloques do
curso...
Buscamos a
nosa sección e
escollemos
que vaia a:
- Barra lateral esq.
- Barra lateral der.
- Corpo
- Pé
- Encabezado

34. Poñer o menú nun bloque
Encabezado
Barra Barra
lateral Corpo lateral
esquerda dereita
Pé

35. Poñer o menú nun bloque
Agora si, home!!

36. Crear unha páxina complexa
Imos completar a páxina de proba que acabamos de crear
engadindo todo o que nos permita a ferramenta...
(1) Filtros de busca
(2) Páxinas por orde cronolóxica indicando o autor
Imos a “Contido” para ver (3) Prememos editar na que acabamos de crear
as páxinas do sitio

37. Crear unha páxina complexa
Opcións do Editor
(1) Ferramentas para texto: aliñamento, negra, subliñado, listas, ...
(2) Vincular e desvincular ligazóns
(3) (11) Inserir Imaxes ou outros elementos Multimedia
(4) Cor de texto e fondo
(5) Ver código HTML. Útil para inserir código doutros sitios como Youtube ou Slideshare
(6) Emoticonas
(7) Fonte, tamaño e parágrafo do texto seleccionado
(8) Colar de Word (Colando doutro xeito, como con Ctrl + V, pode pasar de todo)
(9) (10) Inserir táboa e ferramentas de edición de táboas
(12) Marcar o límite para a vista previa do artigo ou páxina (Ler máis...)
(13) Ocultar o editor e pasar a vista HTML
(14) Achegar imaxes (que se poden engadir despois con (3))

38. Inserir unha imaxe
(1) Prememos en inserir imaxe
(2) Pídenos a URL da imaxe, pode ser da web, outra imaxe do sitio ou subimos unha nova
(3) Na nova ventá, “Examinar...” para escoller o arquivo e “Upload file” para subilo
(4) Podemos seleccionalo “add” da lista de imaxes subidas (con vista previa)
(5) A URL da imaxe subida se garda en (2) e prememos inserir para volver ao Editor

39. Inserir unha imaxe
A páxina vai quedando algo máis xeitosa...

40. Inserir unha ligazón
(1) Seleccionamos o texto ou imaxe que levará a ligazón (hai que escribilo antes)
(2) Prememos para inserir a ligazón
(3) Na nova ventá, inserimos a URL. Pode ser: web externa, un arquivo xa subido
(PDF, Word, ODT, ...) como achega, ou un dos nodos do noso portal
(4) Inserir e listo!

41. Inserir unha ligazón
A páxina vai quedando algo máis xeitosa...

42. Imaxe con ligazón a un Pdf
Combinando ambos elementos podemos crear unha ligazón nunha imaxe
que permita descargar un documento en Pdf como achega da páxina.
O primeiro será subir o Pdf como achega dende “Ficheiros adxuntos”:
(1) Seleccionamos o arquivo a subir do noso equipo
(2) Prememos “Adxuntar” para subir o documento
(3) Aparece unha lista dos arquivos subidos co seu nome e tamaño
(4) Aparece unha ligazón ao arquivo que nos servirá para vinculalo despois

43. Imaxe con ligazón a un Pdf
Agora volvemos ao Corpo para inserir a ligazón...
(1) Seleccionamos a imaxe
(2) Prememos en inserir ligazón...
(3) Poñemos a ligazón ao Pdf que copiamos no punto anterior
(4) Actualizamos para recoller a nova ligazón
Agora cando premamos na imaxe abriranos o documento en Pdf!!

44. Inserir unha táboa
(1) Situándonos no texto onde queremos a táboa prememos en “Inserir táboa...”
(2) Definimos o número de filas e columnas así como outras propiedades: bordo,
Aliñamento, ancho e alto (en píxeles ou porcentaxe), etc...
(3) Inserir e listo!

45. Inserir unha táboa
Coa táboa seleccionado actívanse os botóns para traballar con ela:
- Modificar as propiedades de fila ou columna (cor de fondo, aliñamento, ...)
- Inserir ou eliminar filas e columnas
- Dividir e mesturar celas

46. Actividade: Crear unha páxina
1. Crea unha nova páxina no Drupal que conteña:
a) Texto con diferentes formatos e cores
b) Unha ou máis imaxes entre o texto
c) Un Pdf como arquivo achegado
d) Unha ligazón a unha páxina externa e
outra interna
e) Unha táboa de mínimo 3x3 celas
f) Unha pequena introdución a modo de
vista previa do artigo
2. Enlaza a páxina a unha nova sección de menús
creada por ti que apareza na barra lateral dereita

47. Ampliando a biblioteca...
Drupal
➔
Páxina oficial:
http://drupal.org/
➔
Drupal hispano:
http://drupal.org.es/
➔
Video titoriais Drupal:
http://www.drupalweb.com/curso-drupal-gratis-iniciacion
➔
Monográfico Drupal do ITE:
http://recursostic.educacion.es/observatorio/web/es/software/
software-general/1022-monograficodrupal-7
➔
Instalador de Drupal automático (Bitnami):
http://bitnami.org/

48. Rematando...
Ideas, dúbidas, cuestións?

49. Créditos
@ Grazas a Udon Crew pola imaxe da diapositiva 3
@ Grazas a CardboardShark pola imaxe da diapositiva 6
@ Grazas a 3D Vitality pola imaxe da diapositiva 7
@ Grazas a The Ruud pola imaxe da diapositiva 21

50. Xestión de portais
con Drupal
Fin
Administración básica e publicación de contidos
Por Juan Marcos Filgueira Gomis, 2011/2012