Manual de emprego do Drupal do CEE O Pino de Ourense

1. Dinamización da Web do CEE O Pino
www.facebook.com/drodicio
@drodicio
@drodicio
drodicio@edu.xunta.gal
Diego Rodicio Álvarez
Xaneiro 2020

2. Índice
u Introducción
u A Web do CEE O Pino
u Acceso para facer cambios na web
u Páxina de administración
u Crear un bloque de menú
§ Que son?
§ Bloque de exemplo
§ Pasos
1) Crear un menú
2) Crear unha taxonomía
1) Crear o primeiro elemento (vocabulario)
2) Crear as ligazóns do menú (lista de termos)
3) Comprobar
1) Comprobar taxonomía
2) Comprobar o menú
4) Visualizar o bloque
u Contidos
§ Tipos de contido
§ Asociar un contido a un menú
§ Editor
§ Formato de caracteres e páragrafos
§ Inserir Imaxes
§ Ligazóns
§ Ligazóns a arquivos
§ Inserir Youtube
§ Inserir SoundCloud
§ Páxinas
§ Imaxes
§ Eventos
2

3. Drupal. Que é?
u Drupal é un sistema de xestión de contidos (CMS:
Content Management System) co que, dun xeito
sinxelo, cómodo e en liña, se pode manter un sitio web.
u Permite o traballo colaborativo de distintos usuarios
para que creen, xestionen, publiquen e actualicen
contidos na web
3

4. A Web do CEE O Pino
HTTP://WWW.EDU.XUNTA.GAL/CENTROS/CEEPINO/
4

5. A Web do CEE O Pino
u Si non nos acordamos da dirección,
buscamos en Google:
u CEE O Pino
5
5

6. Acceso
para facer
cambios
na web
DEBEREMOS ACCEDER CO
NOSO NOME DE USUARIO
E CONTRASINAL
6

7. Páxina de
administración
7
u Para acceder a páxina de
administración temos que acceder á
Web co usuario ”admin”
u Posteriormente, dende a páxina inicial,
prememos en “Administrar”

8. Páxina de
administración
UNHA VEZ FEITO O VISTO NA ANTERIOR
PÁXINA, APARECE A PÁXINA DE
ADMINISTRACIÓN DA WEB DO CEE O
PINO
8

9. Crear un bloque de menú 9
u Os bloques que vamos a configurar
están situados, normalmente, no lateral
da páxina.
u A maioría contén unha listaxe de
ligazóns, que poden ter distintos niveis.
u A estes bloques lles vamos a denominar
“bloques de menús”:
→ Que son?

10. Crear un bloque de menú 10
u Para ver como se crea un bloque de
menú, trataremos de facer o mesmo
bloque (Secretaría) que vemos na imaxe
da dereita
→ Bloque de exemplo

11. Crear un bloque de menú:
u Os pasos para crear un bloque de menú son os seguintes:
u 1. Crear un menú
u 2. Crear unha taxonomía
u 2.1. Crear o primeiro elemento (vocabulario)
u 2.2. Crear as ligazóns do menú (lista de termos)
u 3. Comprobación
u 4. Visualizar e colocar o bloque nun lateral da web
11
→ Pasos

12. Crear un
bloque
de
menú:
DENDE A PÁXINA DE
ADMINISTRACIÓN VAMOS A
MENÚS → ENGADIR MENÚ
12
→ 1. Crear un menú

13. 13
ENGADIMOS O NOME DO MENÚ OU BLOQUE QUE DESEXAMOS CREAR
Crear un bloque de menú: → 1. Crear un menú
Este é o menú a crear:

14. Crear un bloque de menú:
14
u Unha vez creado o menú, temos que crear o
que Drupal denomina “Taxonomía”
u Son o conxunto de ligazóns do menú que
querermos crear
u Proceso de creación dunha taxonomía:
u Creamos o elemento principal que
coincide co nome do menú que puxemos
no apartado anterior (Secretaría). A isto
chamáselle vocabulario
u Engadimos os elementos do menú, que
Drupal chamará lista de termos
(Lexislación, España, Galicia, Libros de
texto e Novas)
→ 2. Crear unha taxonomía

15. Crear un bloque de menú:
u O primeiro paso é
crear o elemento
principal que coincide
co nome do menú que
puxemos no apartado
anterior (Secretaría).
u Dende a páxina de
Administración vamos
a Taxonomía →
Engadir Vocabulario
15
→ 2. Crear unha taxonomía:
→ 2.1. Crear o 1º elemento (vocabulario)

16. Crear un bloque de menú:
u Para crear o primeiro elemento da
taxonomía:
16
→ 2. Crear unha taxonomía:
→ 2.1. Crear o 1º elemento (vocabulario)

17. Crear un bloque de menú:
17
u Unha vez creado o primeiro
elemento da taxonomía
(Secretaría), hai que seguir
creando os seguintes.
u Estes elementos que vamos a
crear van a coincidir cos
elementos do menú
(Lexislación, España, Galicia,
Libros de texto e Novas).
u A estes elementos do menú,
Drupal lles denomina “lista de
termos”
→ 2. Crear unha taxonomía:
→ 2.2. Crear as ligazóns do menú (lista de termos)

18. Crear un bloque de menú:
u Dende a páxina de
administración dunha
taxonomía buscamos
o elemento creado no
apartado anterior
u Prememos en engadir
termos
18
→ 2. Crear unha taxonomía:
→ 2.2. Crear as ligazóns do menú (lista de termos)

19. Crear un bloque de menú:
19
u Enchemos o primeiro
elemento do menú
→ 2. Crear unha taxonomía:
→ 2.2. Crear as ligazóns do menú (lista de termos)

20. Crear un bloque de menú:
20
u Finalmente, repetimos
este paso 2.2 para o
resto de elementos do
menú:
→ 2. Crear unha taxonomía:
→ 2.2. Crear as ligazóns do menú (lista de termos)

21. Crear un bloque de menú:
21
u Se queremos anidar un
temos, pulsamos en
“Opcións avanzadas”
e seleccionamos o
elemento pai (país)
→ 2. Crear unha taxonomía:
→ 2.2. Crear as ligazóns do menú (lista de termos)

22. Crear un
bloque de
menú:
u Unha vez creado o menú nos 2 pasos anteriores,
comprobaremos que estea todo correcto:
u 3.1. Comprobamos a taxonomía
u 3.2. Comprobamos o menú
22
→ 3. Comprobar

23. Crear un bloque de menú:
23
u Dende a páxina de
administración dunha
taxonomía buscamos o
elemento creado no
apartado anterior
u Prememos en lista termos
→ 3. Comprobar:
→ 3.1. Comprobar taxonomía

24. Crear un bloque de menú:
24
u Comprobamos que
estea creado o menú:
→ 3. Comprobar:
→ 3.1. Comprobar taxonomía

25. Crear un bloque de menú:
25
u Lembrade que no paso 1
creamos o primeiro elemento
do menú (Secretaría)
u O resto de elementos
créanse automaticamente
ao facer toda a taxonomía
no paso 2.
u Dende a páxina de
administración dos menús
buscamos o elemento
creado nos apartados
anteriores.
→ 3. Comprobar:
→ 3.2. Comprobar o menú

26. Crear un bloque de menú:
26
u Comprobamos que
estea creado o menú:
→ 3. Comprobar:
→ 3.2. Comprobar o menú

27. Crear un bloque de menú:
27
u Para acceder á xestión de bloques vamos á
páxina de administración
u Dende a páxina de administración pulsamos en
“Bloques”
→ 4. Visualizar e colocar un bloque no lateral da web

28. Crear un bloque de
menú:
u Desde está páxina á que accedemos
segundo o dito na diapositiva
anterior, vamos a colocar e visualizar
o noso menú
28
→ 4. Visualizar e colocar un bloque no lateral da web

29. Crear un bloque de menú:
29
u Localizamos o menú
Secretaría (está case
ao final da páxina,
entre os bloques
desactivados)
u Seleccionamos, dentro
de Secretaría, o
bloque “Barra lateral
dereita”
u Gardamos
→ 4. Visualizar e colocar un
bloque no lateral da web

30. Crear un bloque:
de menú:
u Agora, o menú
aparece dentro dos
bloques da barra
lateral dereita
u Comprobamos que xa
se visualizar como
último bloque á
dereita da páxina
u Se queremos cambiar
a orde entre os
bloques, arrastramos
onde indica a frecha
da imaxe
30
→ 4. Visualizar e colocar un
bloque no lateral da web

31. Contidos
31
u Dentro do menú do usuario
podemos atopar un enlace
que pon: Crear contido.
u Premendo sobre este enlace
accederemos a unha páxina
onde se listan os tipos de
contidos podemos empregar.

32. Contidos: 32
Páxina:
É o máis apropiado para a creación dos nosos contidos.
Podemos publicar unha gran cantidade de información.
Imaxe:
Permite subir unha imaxe. O visitante verá a miniatura da
imaxe e, premendo nela, verá a imaxe orixinal.
Evento:
É unha páxina á que se lle pode dar unha data de inicio
e fin, para que apareza no calendario de eventos.
Webform:
Crea un novo cuestionario. Os resultados do envío e as
estatísticas quedan recollidas e accesibles.
→ Tipos de contido

33. Contidos: 33
u Cando creamos un contido, temos que
asocialo a unha ligazón de calquera menú
§ Ao pinchar na ligazón do menú asociado
abrirase o contido que estamos creando
§ Este é o único xeito de visualizar o contido
u No momento de crear o contido, nos fixamos
na sección de “Vocabularios”
§ Aparecen os menús onde podemos asociar o
contido que vamos a crear
§ Seleccionamos o menú, e a ligazón onde
vamos a asociar o contido
u No exemplo, a páxina que estou a crear se
asociará ao apartado “Libros de Texto” do
menú “Secretaría”
→ Asociar un contido a un menú

34. Contidos:
u Velaquí o resultado
u Ao pinchar en
Secretaría → Libros de
texto, aparece a
páxina anteriormente
creada
34
→ Asociar un contido a un menú

35. Contidos:
EMPRÉGASE PARA INSERIR
CONTIDO EN PÁXINAS
35
→ Editor

36. Contidos:
36
u Negriña, cursiva e subliñado
u Tachado
u Aliñación: permítenos a alienación dun parágrafo á esquerda, centrado, á dereita
ou xustificado.
u Listas: facilítanos a creación de listas con viñetas (círculo, disco e cadrado) e
ordenadas (alfabeto e numérico).
u Sangría: permítenos o desprazamento de parágrafos completos aumentando ou
diminuíndo a sangría.
u Permítenos desfacer (Ctrl + Z) ou refacer (Ctrl + Y) o último cambio realizado
u Permite enlazar unha páxina Web ou un arquivo.
u Rompe os enlaces creados
u Permite inserir un ancora para acceder a outras partes do noso contido
u Facilita la inserción de imaxes
u Ao facer clic neste botón, o sistema intentará limpar o código HTML do texto
incluído no editor. É habitual utilizalo si copiaches o texto desde unha fonte externa
como o procesador de textos Word ou Impress xa que en moitas ocasións esta copia
de texto pode engadir código innecesario que é posible suprimir sen problemas
u Cor do texto ou cor de fondo
u Formato: Permítenos utilizar diferentes estilos no proxecto. Si non se especifica o
tamaño da fonte, virá determinado polo estilo que se seleccionou
→ Editor

37. Contidos:
37
u Tamaño da fonte. Si non se especifica o tamaño da fonte, virá determinado polo
estilo que se seleccionou
u Subíndice e superíndice
u Cita: permítenos unha vez seleccionado un parágrafo, mostralos como unha cita
(fará, dependendo do estilo, un efecto de sangrado á dereita e esquerda)
u Inserir o contido directamente coa linguaxe HTML
u Insire unha liña horizontal
u Permítenos cortar (Ctrl + X) o texto seleccionado (que desaparece) para
posteriormente pegalo.
u Permítenos copiar (Ctrl + C) o texto seleccionado no portapapeis.
u Permítenos pegar (Ctrl + V) do portapapeis o texto previamente copiado ou
cortado. Debemos ter en conta que nesta modalidade de pegado, copiaremos o
código "lixo" do documento orixinal, o que poderá darnos problemas posteriormente
á hora de modificar o formato ou texto pegado. Para limpar este código,
seleccionaremos o texto e utilizaremos os botóns de "limpar formato" ou "limpar
código lixo". IMPORTANTE: Non se pegarán as imaxes copiadas utilizando a opción
de pegado (Ctrl + V)
u Permite inserir un símbolo, como símbolos de moeda (€, £), carácteres do alfabeto
grego (γ, ζ)
u Pantalla completa
→ Editor

38. Contidos:
38
u Permite a inclusión de elementos multimedia:
§ HTML5 vídeo: formatos ogg vídeo, WebM e mp4. Soportada segundo o
navegador.
§ HTML5 audio: formato ogg y mp3. Soportada segundo navegador.
§ Quicktime: formatos mov, mp4, mpeg. Será necesario ter instalados no
navegador os plugins correspondentes.
§ Windows Media: formatos wmv, wma. Será necesario ter instalados no
navegador os plugins correspondentes.
§ iFrame: ideal para introducir vídeos de YouTube ou Vimeo aportando el
enlace.
u Pegar como texto plano. Esta modalidade de pegado é útil cando
copiamos (ou cortamos) desde unha páxina web e queremos
pegar o texto pero NON os formatos e estilos de orixe.
u Pegar contido desde aplicacións externas, tipo Office, LibreOffice,
OpenOffice...
u Buscar un texto.
u Buscar/Reemplazar texto.
→ Editor

39. Contidos:
39
u Inserir unha táboa nova.
Cando teñamos seleccionada unha táboa, activaranse as seguintes
iconas do editor:
u Permite modificar as propiedades da fila.
u Permite modificar as propiedades da celda.
u Insire unha fila na parte superior.
u Insire unha fila na parte inferior.
u Borra unha fila.
u Insire unha columna á esquerda.
u Insire unha columna á dereita.
u Borra unha columna.
u Separa dúas celdas que foron unidas.
u Une dúas celdas
→ Editor

40. Contidos:
u Cando creamos un
texto, é necesario
darlle o formato máis
apropiado as nosas
necesidades.
u Para elo imos a ver as
diferentes posibilidades
que nos ofrece este
enriquecedor de texto.
u Convén non "abusar"
dos estilos e facer os
nosos contidos
demasiado cargados.
40
→ Editor:
→ Formato de caracteres e parágrafos

41. Contidos:
41
→ Editor:
→ Formato de caracteres e parágrafos

42. Contidos:
42
→ Editor:
→ Formato de caracteres e parágrafos

43. Contidos:
u Exemplo de formato
de caracteres e
parágrafos:
43
→ Editor:
→ Formato de caracteres e parágrafos

44. Contidos:
u Para inserir unha imaxe:
1. Dentro do contido da
nosa publicación,
situaremos o cursor no
lugar onde desexamos
inserir a imaxe.
2. Unha vez fixado o
lugar, premeremos
sobre o botón que
leva unha árbore por
imaxe
3. Premer sobre o botón
Examinar
u Na seguinte diapositiva
seguimos cos seguintes
pasos...
44
→ Editor:
→ Inserir imaxes

45. Contidos:
u Para inserir unha imaxe
seguimos os pasos a
partir da diapositiva
anterior:
4. Aparece unha fiestra
onde:
§ Podemos inserir unha
imaxe empregada
previamente
§ Podemos inserir unha
imaxe dende o noso
ordenador
5. Unha vez escollida ou
cargada a imaxe
pulsamos en “Insert
File”
u Na seguinte diapositiva
seguimos co último
paso...
45
→ Editor:
→ Inserir imaxes

46. Contidos:
u Para inserir unha imaxe
seguimos os pasos a
partir da diapositiva
anterior:
6. Aparece unha fiestra
e prememos en
Actualizar
46
→ Editor:
→ Inserir imaxes

47. Contidos:
EXEMPLO DA INSERCIÓN DUNHA IMAXE:
47

48. Contidos:
u Os hipervínculos (enlaces, vínculos, ligazóns, links...) poden ser creados tanto sobre texto
(palabras, parágrafos...) como sobre outros elementos, por exemplo, as imaxes.
u No momento de crear un novo contido, se non temos ningún texto nin obxecto
seleccionados, veremos que os botóns de inserir enlace e quitar enlace aparecen
desactivados.
u No momento de seleccionar un texto ou elemento, os botóns de inserir e quitar enlace
activaranse e xa podemos proceder a crear a nova ligazón.
u Aparecerá a fiestra para inserir a ligazón:
48
→ Editor:
→ Ligazóns

49. Contidos:
u URL do enlace: aquí temos que escribir a dirección do destino
do enlace que queremos crear. Así, por exemplo, se queremos
facer un enlace ao Portal Educativo deberemos escribir:
http://www.edu.xunta.gal (Importante: hai que escribir o
enderezo completo, incluíndo o texto http:// inicial).
u Destino: preséntansenos dúas opcións:
§ Abrir vínculo na mesma ventá: abrirá a páxina de destino na
mesma xanela que esteamos traballando.
§ Abrir vínculo nunha ventá nova: abrirá a páxina de destino nunha
nova xanela. (Esta é a opción máis recomendable, especialmente
cando facemos enlaces externos a outros sitios web. Isto é así pola
tendencia a pechar a ventá unha vez rematada a navegación).
u Título: É recomendable poñer unha breve indicación sobre o
enlace que estamos creando.
49
→ Editor:
→ Ligazóns

50. Contidos:
PASOS PARECIDOS AS DE
INSERIR UNHA IMAXE
50
→ Editor:
→ Ligazóns a arquivos

51. Contidos:
1º) VAMOS AO VÍDEO EN
YOUTUBE E SEGUIMOS OS
PASOS:
51
→ Editor:
→ Inserir Youtube

52. Contidos:
2º) VAMOS AO EDITOR DA
WEB E SEGUIMOS OS PASOS:
52
→ Editor:
→ Inserir Youtube

53. Contidos:
1º) VAMOS AO SON EN
SONDCLOUD E SEGUIMOS
OS PASOS:
53
→ Editor:
→ Inserir SoundCloud

54. Contidos:
2º) VAMOS AO EDITOR DA
WEB E SEGUIMOS OS PASOS:
54
→ Editor:
→ Inserir SoundCloud

55. Contidos:
55
u É o máis apropiado para a creación dos nosos
contidos.
u Podemos publicar unha gran cantidade de
información.
→ Páxinas

56. Contidos:
u Inserimos o título da
páxina
u Escollemos o enlace,
dentro dos menús da
web, onde vamos a
pulsar para abrir a
páxina que estamos a
crear
u Inserimos o contido da
nosa páxina (xa
explicado en anteriores
diapositivas)
u Gardamos ou
previsualizamos como
queda a páxina
56
→ Páxinas

57. Contidos:
u Exemplo:
57
→ Páxinas

58. Contidos:
58
u Permite subir unha imaxe.
u Este contido é ideal para publicar fotografías ou
capturas de pantalla.
u O visitante verá a miniatura da imaxe e,
premendo nela, verá a imaxe orixinal.
→ Imaxes

59. Contidos:
u A estrutura da súa ficha de
creación é semellante á vista
anteriormente para 'Páxina’.
§ Inserimos o título da páxina
§ Escollemos o enlace, dentro dos
menús da web, onde vamos a
pulsar para abrir a páxina que
estamos a crear
§ Inserimos o contido da nosa
páxina (xa explicado en
anteriores diapositivas)
§ Gardamos ou previsualizamos
como queda a páxina
u Procurade empregar imaxes
que teñan como máximo
1024px de ancho ou de alto
§ Se a nosa imaxe é máis grande,
deberemos cambiarlle o
tamaño antes de subila
59
→ Imaxes

60. Contidos:
u Exemplo:
60
→ Imaxes

61. Contidos:
61
u Moi parecido ás páxinas:
§ É unha páxina á que se lle pode dar unha data de
inicio e fin
u Aparece directamente no calendario de
eventos.
→ Eventos

62. Contidos:
u A estrutura da súa ficha de
creación é semellante á vista
anteriormente para 'Páxina’.
§ Inserimos o título
§ Escollemos o enlace, dentro dos
menús da web, onde vamos a
pulsar para abrir o evento que
estamos a crear. Nesta ocasión
este paso é optativo, pode ser o
caso de que so desexemos ver
o evento no calendario, polo
que se é así non escollemos
nada.
§ Inserimos o contido do nosa
páxina (xa explicado en
anteriores diapositivas)
§ Inserimos data inicio, fin (se
procede) ou horas (se procede)
§ Gardamos ou previsualizamos
como queda a páxina
62
→ Eventos

63. Contidos:
u Exemplo:
63
→ Eventos

64. Dinamización da Web do CEE O Pino
www.facebook.com/drodicio
@drodicio
@drodicio
drodicio@edu.xunta.gal
Diego Rodicio Álvarez
Xaneiro 2020
Gracias pola vosa
colaboración