Creación de páginas web con WordPress
-
Upload
grial-university-of-salamanca -
Category
Education
-
view
34 -
download
0
Transcript of Creación de páginas web con WordPress
![Page 1: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/1.jpg)
Creación de páginas web con WordPress
Alicia García HolgadoDpto. de Informática y Automática
Grupo de Investigación GRIALUniversidad de Salamancahttps://grial.usal.es/aliciagh
[email protected] 2017
![Page 2: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/2.jpg)
Índice
1. El blog y la web 2.02. Gestores de blogs3. Algunos ejemplos4. Elementos de un blog5. WordPress
ü Escritorioü Configuraciónü Llenar el blog de contenidoü Personalización del aspecto del blog
6. Diseminación del blog7. Enlaces de interés8. Créditos
1Universidad de Salamanca
![Page 3: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/3.jpg)
1. El blog y la web 2.0
http://evolutionoftheweb.com
2Universidad de Salamanca
![Page 4: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/4.jpg)
1. El blog y la web 2.0
3Universidad de Salamanca
![Page 5: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/5.jpg)
1. El blog y la web 2.0
4Universidad de Salamanca
![Page 6: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/6.jpg)
2. Gestores de blogs
5Universidad de Salamanca
![Page 7: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/7.jpg)
3. Algunos ejemplos:contenidos educativos
6
![Page 8: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/8.jpg)
3. Algunos ejemplos:blogs personales
7Universidad de Salamanca
![Page 9: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/9.jpg)
3. Algunos ejemplos:páginas de congresos
8Universidad de Salamanca
![Page 10: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/10.jpg)
3. Algunos ejemplos:proyectos de investigación
9Universidad de Salamanca
![Page 11: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/11.jpg)
3. Algunos ejemplos:páginas institucionales
10Universidad de Salamanca
![Page 12: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/12.jpg)
4. Elementos de un blog:Entrada o post
11Universidad de Salamanca
![Page 13: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/13.jpg)
4. Elementos de un blog:Etiquetas o tags
12Universidad de Salamanca
![Page 14: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/14.jpg)
4. Elementos de un blog:Comentarios
13Universidad de Salamanca
![Page 15: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/15.jpg)
4. Elementos de un blog:Permalink
14Universidad de Salamanca
![Page 16: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/16.jpg)
4. Elementos de un blog:Categorías
15Universidad de Salamanca
![Page 17: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/17.jpg)
5. WordPress
16Universidad de Salamanca
![Page 18: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/18.jpg)
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
![Page 19: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/19.jpg)
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
![Page 20: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/20.jpg)
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
![Page 21: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/21.jpg)
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 -> EscrituraPermite indicar la categoría por defecto en la que se clasificarán las entradas que se publiquen
• Ajustes -> LecturaDesde 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 -> ComentariosPermite configurar la política de comentarios de todo el blog
20Universidad de Salamanca
![Page 22: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/22.jpg)
5. WordPress:Llenar el blog de contenido
ü Entradas o postsSon 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 documentosSe 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áginasEste 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 comentariosSe pueden moderar, editar y eliminar todos los comentarios que los visitantes publican en las diferentes entradas del blog
21Universidad de Salamanca
![Page 23: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/23.jpg)
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
![Page 24: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/24.jpg)
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
![Page 25: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/25.jpg)
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
![Page 26: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/26.jpg)
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 en Youtube
25Universidad de Salamanca
![Page 27: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/27.jpg)
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
![Page 28: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/28.jpg)
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
![Page 29: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/29.jpg)
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
![Page 30: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/30.jpg)
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
![Page 31: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/31.jpg)
5. WordPress:Personalización
ü TemaLos 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úsSon 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)
ü WidgetsPequeñ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
ü PluginsSon módulos o herramientas con una funcionalidad concreta que WordPress permite instalar para extender su funcionalidad
30Universidad de Salamanca
![Page 32: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/32.jpg)
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
![Page 33: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/33.jpg)
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
![Page 34: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/34.jpg)
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
![Page 35: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/35.jpg)
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
![Page 36: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/36.jpg)
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
![Page 37: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/37.jpg)
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
![Page 38: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/38.jpg)
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
![Page 39: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/39.jpg)
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
![Page 40: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/40.jpg)
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
![Page 41: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/41.jpg)
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
![Page 42: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/42.jpg)
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
![Page 43: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/43.jpg)
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
![Page 44: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/44.jpg)
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
![Page 45: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/45.jpg)
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
![Page 46: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/46.jpg)
6. Diseminación de la información
45Universidad de Salamanca
![Page 47: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/47.jpg)
6. Diseminación de la información: WYRED project
46Universidad de Salamanca
![Page 48: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/48.jpg)
6. Diseminación de la información: GRIAL
47Universidad de Salamanca
![Page 49: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/49.jpg)
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
![Page 50: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/50.jpg)
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
![Page 51: Creación de páginas web con WordPress](https://reader034.fdocument.pub/reader034/viewer/2022042723/58f203551a28ab87688b458f/html5/thumbnails/51.jpg)
Creación de páginas web con WordPress
Alicia García HolgadoDpto. de Informática y Automática
Grupo de Investigación GRIALUniversidad de Salamancahttps://grial.usal.es/aliciagh
[email protected] 2017