Curso dentro del Programa de Formación en Centros del Plan de Formación Docente del Profesorado 2017 de la Universidad de Salamanca.

1. Creación de páginas web
con WordPress
Alicia García Holgado
Dpto. de Informática y Automática
Grupo de Investigación GRIAL
Universidad de Salamanca
https://grial.usal.es/aliciagh
aliciagh@usal.es
Marzo 2017

2. Índice
1. El blog y la web 2.0
2. Gestores de blogs
3. Algunos ejemplos
4. Elementos de un blog
5. WordPress
ü Escritorio
ü Configuración
ü Llenar el blog de contenido
ü Personalización del aspecto del blog
6. Diseminación del blog
7. Enlaces de interés
8. Créditos
1Universidad de Salamanca

3. 1. El blog y la web 2.0
http://evolutionoftheweb.com
2Universidad de Salamanca

4. 1. El blog y la web 2.0
3Universidad de Salamanca

5. 1. El blog y la web 2.0
4Universidad de Salamanca

6. 2. Gestores de blogs
5Universidad de Salamanca

7. 3.Algunos ejemplos:
contenidos educativos
6

8. 3.Algunos ejemplos:
blogs personales
7Universidad de Salamanca

9. 3.Algunos ejemplos:
páginas de congresos
8Universidad de Salamanca

10. 3.Algunos ejemplos:
proyectos de investigación
9Universidad de Salamanca

11. 3.Algunos ejemplos:
páginas institucionales
10Universidad de Salamanca

12. 4. Elementos de un blog:
Entrada o post
11Universidad de Salamanca

13. 4. Elementos de un blog:
Etiquetas o tags
12Universidad de Salamanca

14. 4. Elementos de un blog:
Comentarios
13Universidad de Salamanca

15. 4. Elementos de un blog:
Permalink
14Universidad de Salamanca

16. 4. Elementos de un blog:
Categorías
15Universidad de Salamanca

17. 5.WordPress
16Universidad de Salamanca

18. 5.WordPress:
Escritorio
Menú superior con accesos directos a
elementos clave de la administración
Diferentes bloques con herramientas para
gestionar el blog o publicar entradas de
forma rápida
Acceso a todas las herramientas de
administración y publicación
17Universidad de Salamanca

19. 5.WordPress:
Escritorio
Cada elemento del menú tiene un submenú
asociado con más opciones.
Basta ponerse encima del elemento para que
se desplieguen las opciones.
18Universidad de Salamanca

20. 5.WordPress:
Configuración
El perfil
• Evitar desactivar el editor visual. No se debe marcar la opción
“Desactivar el editor visual al escribir”
• El alias por defecto es el nombre de usuario pero si se desea
cambiar algo del perfil es necesario editarlo para que sean
diferentes
• La web y la información biográfica no siempre es visible para los
visitantes del blog, depende del tema gráfico que se utilice
• Desde el perfil se puede cambiar la contraseña de acceso
• La imagen de perfil debe configurarse creando un perfil en
Gravatar (http://gravatar.com) y asociando una imagen de perfil al
email que se utilice en WordPress
19Universidad de Salamanca

21. 5.WordPress:
Configuración
Ajustes básicos
• Ajustes -> Generales
Permite configurar el título y subtítulo del blog, los formatos de
fecha y hora, y el idioma en el que se mostrará el blog
• Ajustes -> Escritura
Permite indicar la categoría por defecto en la que se clasificarán
las entradas que se publiquen
• Ajustes -> Lectura
Desde esta sección de configuración se establece si la página
inicial del blog mostrará las entradas publicadas o una página
estática que se haya creado previamente
• Ajustes -> Comentarios
Permite configurar la política de comentarios de todo el blog
20Universidad de Salamanca

22. 5.WordPress:
Llenar el blog de contenido
ü Entradas o posts
Son el elemento principal de un blog. Se muestran en orden cronológico, bien en la
página principal del blog o en una página que se defina en Ajustes -> Lectura. Una
entrada consta de título, cuerpo, una serie de etiquetas o tags que definen el
contenido de la publicación (las palabras clave), y una o varias categorías que
permiten organizar el contenido del blog
ü Insertar imágenes, vídeos y documentos
Se pueden incluir en las entradas y en las páginas diferentes elementos multimedia.
Estos pueden almacenarse en el propio blog o en una herramienta externa como
Youtube,Vimeo, Flickr, SlideShare, Issuu, etc
ü Páginas
Este tipo de contenido nunca se mostrará junto a las entradas. Se utiliza para
mostrar información a los visitantes de la página, por ejemplo, en la página de un
proyecto se pueden utilizar para mostrar los objetivos o las personas que participan
y luego las entradas para publicar noticias relacionadas con el proyecto
ü Gestionar comentarios
Se pueden moderar, editar y eliminar todos los comentarios que los visitantes
publican en las diferentes entradas del blog
21Universidad de Salamanca

23. 5.WordPress:
Entradas
Desde aquí se gestionan las entradas
publicadas (eliminar, modificar)
Se pueden seleccionar varias entradas y
editarlas masivamente seleccionando “Editar”
en “Acciones en lote” y haciendo clic en
“Aplicar”
22Universidad de Salamanca

24. 5.WordPress:
Entradas Entre las acciones que se pueden hacer al editar varias entradas
al mismo tiempo cabe destacar la asignación de una categoría,
cambiar si aceptan o no comentarios, o añadir un conjunto de
etiquetas separadas por comas
23Universidad de Salamanca

25. 5.WordPress:
Entradas
Las categorías también pueden gestionarse. Se pueden
definir las categorías con las que se va a organizar todo
el blog o cambiarle el nombre a la categoría que por
defecto crea WordPress,“Sin categoría”
24Universidad de Salamanca

26. 5.WordPress:
Imágenes, vídeos y documentos
En las entradas, independientemente de las
imágenes que se inserten en el cuerpo, se puede
asignar una imagen destacada que será la que
algunos temas utilizarán al mostrar un resumen
de la entrada o que pondrán de imagen de
cabecera al visitar una entrada concreta, varía
mucho de un tema a otro
Este botón permite añadir elementos multimedia
a nuestra blog, desde imágenes hasta
documentos en diversos formatos
Dependiendo de la instalación de WordPress utilizada,
algunas opciones para insertar contenido multimedia
varían. En este caso está activado el plugin “YouTube” que
habilita la inserción de vídeos publicados enYoutube
25Universidad de Salamanca

27. 5.WordPress:
Imágenes, vídeos y documentos
Si solo se desea poner un enlace en la entrada o
página para que los usuarios puedan descargarse
un documento u otro material multimedia, se
debe copiar este enlace e insertarlo en la
entrada o página como un enlace normal
En el caso de las imágenes se puede copiar la URL
de una imagen que ya esté publicada en Internet y
utilizar esta opción para utilizarla en nuestro blog
Esto indica la imagen que está seleccionada
26Universidad de Salamanca

28. 5.WordPress:
Imágenes, vídeos y documentos
Al hacer clic sobre la imagen que se ha insertado
en la entrada o página se pueden editar diferentes
propiedades tales como el tamaño o la colocación
respecto al texto
27Universidad de Salamanca

29. 5.WordPress:
Páginas
Desde aquí se gestionan las páginas publicadas.
La gestión es igual que para las entradas
Si una página o una entrada tiene ”Borrador”
al lado del título significa que los visitantes del
blog no podrán verla
Esto indica que es una subpágina de la página
“Instituto”
28Universidad de Salamanca

30. 5.WordPress:
Gestionar comentarios
Aquí se indica la información relativa al autor o
autora del comentario, se puede utilizar para
ponerse en contacto con él o ella
Comentarios pendientes de moderar, es decir,
de aprobar para que los vean todos los
usuarios o de eliminarlos
29Universidad de Salamanca

31. 5.WordPress:
Personalización
ü Tema
Los temas permiten cambiar el aspecto de todo el blog sin que cambien
los contenidos.Al cambiar el tema se cambian los colores, las tipografías,
las imágenes de cabecera, la posición de los diferentes elementos; todo lo
relacionado con la apariencia
ü Menús
Son un elemento utilizado en todo tipo de páginas webs para facilitar a los
usuarios el acceso a los diferentes contenidos.WordPress permite definir
diferentes menús y colocarlos en nuestra página en diversos sitios
(dependiendo del tipo de tema gráfico utilizado)
ü Widgets
Pequeños bloques con una funcionalidad muy concreta que pueden
colocarse en algún espacio del blog (dependiendo del tema gráfico
utilizado) para proporcionarle al usuario algún tipo de herramienta o
información
ü Plugins
Son módulos o herramientas con una funcionalidad concreta que
WordPress permite instalar para extender su funcionalidad
30Universidad de Salamanca

32. 5.WordPress:
Configurar un tema
Desde aquí o desde el menú lateral
se puede configurar el tema
Colocando el ratón sobre un tema, sin hacer clic, aparecerá
el botón de activar el tema para cambiarlo
31Universidad de Salamanca

33. 5.WordPress:
Configurar un tema
Haciendo clic en estos iconos se puede
editar ese elemento del aspecto visual
En la barra lateral izquierda están
todas las opciones que se pueden
configurar para cambiar el aspecto
del blog. Estas opciones varían de un
tema gráfico a otro aunque algunas
suelen estar en todos
32Universidad de Salamanca

34. 5.WordPress:
Configurar un tema
Al hacer clic en uno de los
elementos del menú de la izquierda
se accede a la configuración de ese
elemento. Se puede volver atrás
desde la flecha que aparece a la
izquierda de este título
Se puede poner la imagen que se
desee, para ello es necesario tener en
el ordenador la imagen y hacer clic en
”Añadir nueva imagen”
33Universidad de Salamanca

35. 5.WordPress:
Configurar un tema
Se añade la imagen igual que se hace
en las entradas y páginas
Hacer clic para seleccionarla. En la siguiente
pantalla permitirá recortar la imagen,
sugiriendo el tamaño adecuado para que se
vea bien
34Universidad de Salamanca

36. 5.WordPress:
Configurar un tema
No se debe olvidar “Guardar y publicar”
para que todo lo que se haya
configurado quede guardado y lo vean
todos los visitantes del blog
35Universidad de Salamanca

37. 5.WordPress:
Menús
Es necesario crear un menú para poder
indicar los enlaces que van a aparecer
en el mismo. Hay que darle un nombre
que solo se utilizará para identificar el
menú
36Universidad de Salamanca

38. 5.WordPress:
Menús
Después es necesario indicar los enlaces, los
ítems, que van a conformar el menú. Destacar
el elemento de “Inicio” que sirve para ir
siempre a la página principal.
También pueden ponerse las categorías en el
menú para que los usuarios que visiten el blog
puedan consultar las entradas de una categoría
concreta de forma rápida
37Universidad de Salamanca

39. 5.WordPress:
Menús
Estos son los elementos/ítems del menú
que verán los usuarios. El orden se puede
establecer haciendo clic sobre un
elemento y moviéndolo a la posición
deseada
38Universidad de Salamanca

40. 5.WordPress:
Menús
Por último hay que indicar dónde se va a mostrar el
menú. Cada tema proporciona una zona diferente
por lo que siempre que cambiemos de tema
debemos revisar esta propiedad
39Universidad de Salamanca

41. 5.WordPress:
Widgets
En este tema los widgets se
muestran en una columna a la
derecha. Además
proporciona otras dos zonas
en la parte inferior
40Universidad de Salamanca

42. 5.WordPress:
Widgets
Al seleccionar una de las zonas que
el tema proporciona para mostrar
widgets se puede configurar qué se
muestra y cómo
41Universidad de Salamanca

43. 5.WordPress:
Widgets
Se pueden añadir nuevos
widgets a la zona para hacerlos
visibles a los usuarios.
También se pueden editar o
eliminar los que ya se han
añadido
42Universidad de Salamanca

44. 5.WordPress:
Widgets
Por ejemplo, si se desea añadir un
texto describiendo el objetivo del
blog o las personas que lo editan,
se puede utilizar el widget “Texto”
43Universidad de Salamanca

45. 5.WordPress:
Widgets
Todos los cambios que se hacen
se ven aquí pero es necesario
”Guardar y publicar” para que lo
vean el resto de usuarios y
visitantes del blog
44Universidad de Salamanca

46. 6. Diseminación de la
información
45Universidad de Salamanca

47. 6. Diseminación de la
información:WYRED project
46Universidad de Salamanca

48. 6. Diseminación de la
información: GRIAL
47Universidad de Salamanca

49. 7. Enlaces de interés
• Generación de correos electrónicos temporales
ü http://10minutemail.net/es/
ü http://10minutemail.com
• Licencias Creative Commons
ü http://creativecommons.org
ü Aaron Swartz https://www.youtube.com/watch?v=AQK4E7-Qsc8
• Otras herramientas
ü SlideShare http://slideshare.net
ü Trello http://trello.com
ü Symbaloo http://symbaloo.com
ü Issuu http://issuu.com
ü Pinterest http://pinterest.com
ü Evernote https://evernote.com
ü Mapas personalizados Google http://maps.google.es
ü Draw.io http://draw.io
48Universidad de Salamanca

50. 8. Créditos
• http://evolutionoftheweb.com
• http://www.streetartutopia.com/?p=1279
• http://www.planetadeaficiones.com/figuras/diccionario-
lego-aprendiendo-el-vocabulario-comun-parte-1/
• http://www.alleywatch.com/2013/03/building-
entrepreneurial-communities-values-and-strategies/
• https://wyredproject.eu
• Versión de WordPress utilizada:WordPress 4.7.3
49Universidad de Salamanca

51. Creación de páginas web
con WordPress
Alicia García Holgado
Dpto. de Informática y Automática
Grupo de Investigación GRIAL
Universidad de Salamanca
https://grial.usal.es/aliciagh
aliciagh@usal.es
Marzo 2017