UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN

Transcripción

1 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLÓGICOS ESCUELA DE COMPUTACIÓN CICLO: 02/2015 GUIA DE LABORATORIO #6 Nombre de la Práctica: Creación de sitios web con WordPress Lugar de Ejecución: Centro de cómputo Tiempo Estimado: 2 horas con 30 minutos MATERIA: Administración de Contenidos en Internet DOCENTES: Ing. Ricardo Ernesto Elías Guandique I. OBJETIVOS Que el estudiante esté en capacidad de: 1. Obtener el paquete instalador de WordPress en los sitios oficiales del programa. 2. Instalar y configurar WordPress localmente y en un servidor web en línea. 3. Personalizar el sitio web creado con WordPress. 4. Utilizar con facilidad el tablero de controles (escritorio) para la administración del sitio web. III. MATERIALES Y EQUIPO Para la realización de la guía de práctica se requerirá lo siguiente: No. Requerimiento Cantidad 1 Guía de práctica #6: Creación de sitios web con WordPress 1 2 Computadora con sistema operativo Windows y Apache Web Server. 1 3 Conexión a Internet 1 IV. PROCEDIMIENTO Ejercicio #1: Instalación de WordPress 1. Descargar el archivo del paquete WordPress desde el sitio web oficial de WordPress y guardarlo en alguna carpeta en el disco fijo de su computadora. 2. Extraer los archivos del paquete de WordPress seleccionado en la carpeta web del servidor. En el caso de Wamp, esa carpeta es www. Administración de Contenidos en Internet 1 / 23

2 3. Espere a que finalice el proceso de extracción del archivo comprimido del WordPress. Figura 2. Esperar a que se extraigan los archivos del paquete de instalación de WordPress. 4. Verificar que se ha extraído el paquete con la creación de la carpeta WordPress dentro de la carpeta web. Figura 3. Verificar la creación de la carpeta WordPress a la carpeta web www. 5. En el navegador de su preferencia ingrese la dirección Figura 4. Al ingresar la dirección en la barra de direcciones del navegador se ejecutará automáticamente el instalador de WordPress. 6. Crear el archivo de configuración de WordPress para iniciar el proceso de instalación presionando el botón Crear un archivo de configuración (Create a Configuration File). Administración de Contenidos en Internet 2

3 Figura 5. Presione el botón Crear un archivo de configuración Para iniciar el proceso de instalación. 7. Leer las indicaciones para continuar con la creación del archivo de configuración wp-config.php con el instalador de WordPress. Figura 7. Verifique las direcciones solicitadas y luego haga clic en el botón Siguiente. 8. Proporcionar los datos necesarios para crear la base de datos necesaria para utilizar WordPress presionando el botón Vamos a ello!. Figura 8. Ingresar los datos del nombre de la base de datos, el nombre de usuario de MySQL, La contraseña, el host de la base de datos y el prefijo que utilizará para las tablas. En este paso será necesario tener creada previamente la base de datos wpudb. Administración de Contenidos en Internet 3

4 9. Si todo va bien, tendría que indicarse que todo ha sido correcto y presionar el botón Iniciar instalación. De lo contrario se advertirá que no se ha podido crear la base de datos, lo que hará que tengas que crearla manualmente y luego regresar a este paso. Figura 9. Presione el botón Iniciar la instalación para completar el proceso. 10. Proporcione la información de configuración del sitio web WordPress que acaba de instalar, llenando cada uno de los campos de formulario que se muestran a continuación. Figura 10. Ingreso de la información de configuración de la cuenta de administrador del sitio web. 11. Si la instalación se llevó a cabo correctamente deberá llegar a la siguiente página, en donde tendrá que presionar el botón Acceder (Log in) para ingresar el usuario y contraseña que se ha escogido en el paso anterior. Administración de Contenidos en Internet 4

5 Figura 11. Presionar el botón acceder para ingresar al sitio web WordPress. 12. Ingresar el usuario y contraseña para acceder al área de administración (Escritorio) de WordPress. Figura 12. Ingresar el usuario y contraseña para acceder Al área administrativa de WordPress 13. Observe el tablero de controles o Escritorio (Dashboard) de WordPress. Ejercicio #2: Personalización del sitio web 1. Primero ingresemos al front-end del sitio y observemos el diseño que WordPress brinda por defecto identificando cada una de las partes de la página. 2. Ingresar al tablero de administración (Escritorio o Dashboard) de WordPress. Administración de Contenidos en Internet 5

6 3. En el tablero (Escritorio o Dashboard) de WordPress presione el botón Personaliza tu sitio (Custimize Your Site) 4. En el panel de la izquierda observar las distintas pestañas que se utilizan para poder personalizar el sitio web. 5. Desplegar las opciones del tema predeterminado de WordPress. Observe los elementos del tema y la descripción del mismo. 6. Personalice el título del sitio y la descripción corta. Administración de Contenidos en Internet 6

7 7. Seleccione un color para el texto del título y título corto con el selector de color en la pestaña Colores (Colors). 8. Seleccione la imagen que desea que aparezca en el encabezado del sitio. Tiene que escoger entre las tres imágenes propuestas por WordPress en la ficha Imagen de cabecera (Header Image). 9. Establezca en la pestaña Portada estática Tus últimas entradas como forma de presentación de la página de inicio del sitio (portada). Realmente, esta es la opción que viene seleccionada de forma predeterminada. La otra opción es Una página estática que no utilizaremos. 10. Presione el botón Guardar y Publicar (Save & Publish) en el panel de la izquierda para guardar los cambios realizados. Administración de Contenidos en Internet 7

8 11. Ingrese a la página de inicio (portada) del sitio web usando el navegador de su preferencia. Ejercicio #3: Edición de la entrada predeterminada. 1. Dentro del tablero de controles (Escritorio o Dashboard) haga clic sobre la opción EntradasTodas las entradas (PostsAll Posts) en el menú de la parte izquierda. 2. Hacer clic en Editar (Edit) debajo del título de la entrada. En este momento la única entrada es Hello world. 3. Cuando cargue el contenido de la entrada, cambiar el título Hello World! por Facultad de Estudios Tecnológicos y en el texto de la entrada borrar el que aparezca y digitar en su lugar lo siguiente: La Facultad de Estudios Tecnológicos forma parte del conjunto de Facultades que conforman la Universidad Don Bosco y mantiene en su oferta académica siete carreras, con características muy peculiares que la hacen ser una opción muy conveniente para aquellos que desean obtener una titulación universitaria en tiempo relativamente corto e incorporarse al mundo laboral para desarrollar y aplicar los conocimientos, habilidades y destrezas adquiridos en su formación técnica. Es importante mencionar que la carga académica en estas carreras se distribuye de la siguiente forma: formación teórica: 40% y formación práctica: 60%. De esta manera, los estudiantes tienen más horas de trabajo en talleres y laboratorios, en los cuales aprenden a aplicar los conocimientos teóricos que le son transmitidos por el cuerpo de docentes altamente calificados que posee la Universidad. Administración de Contenidos en Internet 8

9 Las características principales de la Facultad de Estudios Tecnológicos son: Carreras de corta duración. Las carreras técnicas tienen una duración de 4 ciclos académicos (dos años). Rápida inserción laboral. Por el diseño curricular de las carreras. El egresado del técnico tiene la oportunidad de insertarse laboralmente dentro de su campo de trabajo y contribuir al desarrollo del país. Capacitación técnica de alto nivel. Contar con talleres y laboratorios equipados con tecnología de punta, desarrollan en el profesional habilidades productivas en cada área de trabajo, conformando una ventaja para su inserción laboral, ya que las prácticas se hacen en equipos a escala real. Carrera con pertinencia al desarrollo nacional del país. Los planes de estudio se han desarrollado en consulta con los sectores productivos del país, para dar respuesta a la demanda laboral de las empresas contratantes. Conveniencia de horarios. Algunas de las carreras se ofrecen en dos jornadas de estudio: matutino (de 7 am. a 1 pm. de lunes a viernes) y vespertino-nocturno (de 4 a 8 pm. de lunes a viernes y sábado de 1 a 5 pm.). Esto da oportunidad, a aquellos alumnos que trabajan, de continuar una carrera universitaria de mucho futuro. Está conformada por tres coordinaciones, que son: Coordinación de Biomédica y Electrónica. Coordinación de Eléctrica y Mecánica. Coordinación de Computación. 4. El resultado debe ser como se muestra a continuación. Dentro de este contenido, después del primer párrafo crear un espacio para insertar una imagen al contenido, presionando el botón Añadir objeto (Add media). 5. En la página Insertar objeto (Insert Media) presionar el botón Selecciona archivos (Select Files) para buscar el archivo de imagen a utilizar en la entrada. Tenga en cuenta el tamaño máximo del archivo que se puede adjuntar. 6. Seleccione la imagen de su disco a subir e insertar dentro de la entrada. Administración de Contenidos en Internet 9

10 7. Al presionar el botón Abrir podrá visualizar la imagen seleccionada en el servidor y en la página previa Insertar objeto. Presione el botón Insertar en la entrada (Insert Into Post) luego de haber ingresado toda la información de la imagen, que puede ver a continuación. 8. Seleccione la imagen y céntrela con los botones de la barra de herramientas del editor WYSIWYG. Administración de Contenidos en Internet 10

11 9. Actualice la entrada con el botón Actualizar (Update) y visualice en la página de portada el resultado. Administración de Contenidos en Internet 11

12 Ejercicio #4: Creación de categorías y subcategorías 1. Ingrese al módulo administrativo de WordPress ingresando en el navegador la dirección Recuerde que estamos usando el usuario adminaci y su Figura 1. Inicio de sesión en WordPress. 2. Haga clic en el enlace Categorías del menú lateral de la izquierda. Figura 2. Menú Entradas (Posts) para acceder a la página Categorías en WordPress. 3. Ingrese los datos de la categoría en el formulario para nuevas categorías. Luego, presione el botón Agregar Nueva Categoría (Add New Category). Administración de Contenidos en Internet 12

13 Figura 3. Llenar el formulario con los datos de la nueva categoría y presionar el botón Agregar Nueva Categoría (Add New Category). 4. Cuando haga clic en el botón Añadir nueva categoría observará que se ha creado la nueva categoría en el listado de categorías del lado derecho, como se indica en la siguiente figura. Figura 4. Listado de las categorías que se han creado desde el administrador de WordPress. 5. Agregue ahora dos categoría más. A una la llamará Aves y le asignará en su slug la frase animales-aves y en la descripción Categoría para animales aves. La otra categoría la denominará Mamíferos, asignándole en su slug animales-mamiferos y en su descripción Categoría para animales mamíferos. Ambas categorías deben tener como categoría padre Ninguno (None). Cuando termine debe poder ver lo siguiente en la sección de categorías existentes: Figura 5. Listado de las categorías que se han creado 6. Ahora crearemos una entrada que asociaremos a la categoría Peces. Presione el Agregar Entrada (Add New) en el menú Entradas (Posts). Figura 6. Menú entradas (Posts) opción Agregar Entrada (Add New) Administración de Contenidos en Internet 13

14 7. Ingrese en el formulario para agregar entrada el contenido de la entrada. El texto e imágenes que se requieren vienen junto con los recursos de esta guía de práctica que puede descargar del sitio web de la Universidad. Figura 7. Ingrese un título para la entrada y el contenido utilizando el editor especializado de WP. v 8. Indique el formato, asigne una categoría para la entrada, que será Peces e ingrese dos etiquetas, que serán peces y peces marinos después que haya completado el título y el contenido de la misma. Figura 8. Configuración del formato, la categoría y las etiquetas de la entrada. Administración de Contenidos en Internet 14

15 NOTA: Las etiquetas se añaden en la sección Etiquetas ingresando en el cuadro de texto Etiquetas (Tags): peces, peces marinos. Ingresa una etiqueta y luego presione el botón Añadir para poder ingresar luego la otra etiqueta. Figura 9. Asignación de etiquetas para las entradas. 9. Las imágenes de la entrada para los tres tipo de peces se ingresan con el botón Multimedia (Add Media) que se muestra justo por encima del editor avanzado. Presiónelo para poder seleccionar una imagen a subir al servidor, ya que inicialmente no tendrá las imágenes que necesita para insertar en las entradas. Figura 10. Botón Multimedia (Add Media) del formulario para crear Entradas. 10. En la ventana emergente que se abrirá presione el enlace Subir archivos (Upload Files). Luego presione el botón Seleccionar Archivo (Select Files) que se mostrará en la parte central de la ventana emergente que se abre. Figura 10. Seleccionar la imagen para insertar en la entrada. 11. Seleccione el archivo de imagen que utilizará para la entrada en la ventana Abrir y luego presione el botón Abrir. Figura 11. Seleccionar la imagen y luego presionar el botón Abrir de la ventana Abrir. 12. Llene los detalles de la imagen en el diálogo Insertar multimedia. Luego, cierre la ventana de diálogo presionando el botón Insertar en la entrada (Insert into Post). Administración de Contenidos en Internet 15

16 Figura 12. Llenar el formulario para los detalles de la imagen. 13. Ajuste la alineación de la imagen dentro del contenido de la entrada con el botón centrar del editor avanzado. Figura 13. Centrar la imagen dentro del contenido de la entrada. 14. Por último, haga clic sobre el botón Publicar de la sección Publicar de la entrada. Figura 13. Publique la entrada presionando el botón Publicar. 14. Ahora ingrese nuevamente en Entradas para verificar los datos de la entrada Peces marinos. Administración de Contenidos en Internet 16

17 Figura 14. Examine el listado de entradas y corrobore los datos de la entrada Peces marinos. 15. Complete las entradas que se muestran en la figura anterior, sin tomar en cuenta la entrada Hello World!. Ordene de forma lógica en las categorías según el tipo de animales de que se trate en cada entrada. Ejercicio #5: Borrar categorías. Una operación que puede realizar con alguna frecuencia es la de borrar categorías existentes. WordPress tiene la particularidad que al eliminar categorías, no se eliminan las entradas que hayamos incluido dentro de esta categoría. Lo que WordPress hace al eliminarse una categoría es que mueve las entradas y subcategorías existentes a la categoría por defecto, llamada Sin categoría. 1. Primero ingresamos nuevamente al área de administración de WordPress y luego haga clic sobre el enlace Entradas en el menú de la izquierda. Esto abrirá el menú Entradas donde tendrá que hacer clic sobre la opción de menú Categorías. 2. En el listado de categorías que se desplegará, ubíquese con el puntero del ratón encima de dicha categoría y luego sobre los enlaces que aparecerán debajo haga clic sobre el que se titula Borrar. En este caso borraremos la categoría Aves. Observe la nota que está debajo del listado de categorías. Vamos a comprobar que esto es así como se indica en la nota. Administración de Contenidos en Internet 17

18 Figura 15. Listado de categorías actuales en el blog con indicación para borrar una categoría existente. 3. Cuando haga clic sobre el enlace Borrar, WordPress le lanzará una advertencia para que confirme que realmente desea borrar la categoría. Figura 16. Si está seguro que desea borrar la categoría Presione el botón Aceptar. Si no presione el botón Cancelar 5. En el listado de categorías ya no aparecerá la categoría Aves, como puede observar. Figura 17. Listado de categorías luego de haber eliminado la categoría Aves. 6. En la página de categorías haga clic sobre el enlace Entradas del menú lateral en el bloque Entradas. 7. Al cargar la página notará que la entrada Los pericos australianos sigue presente. Esta entrada pertenecía a la categoría Aves que ya se ha eliminado. Ahora la entrada Los pericos australianos pertenece a la categoría Sin Categoría. Figura 18. Listado de categorías con la categoría Los pericos australianos en la categoría Sin categoría. 8. Ahora vuelva a crear la Categoría Aves y asigne nuevamente la entrada a la categoría Aves, como estaba antes. Administración de Contenidos en Internet 18

19 Ejercicio #6: Creación de páginas. 1. Desde el escritorio del panel administrativo de WordPress haga clic sobre el enlace Páginas. 2. En la página Páginas haga clic sobre el botón Añadir nueva junto al título de la página. 3. Ingrese en el formulario los datos esenciales de la página que creará. 4. Inserte una imagen entre los dos párrafos de la página que está creando. Presione para ello el botón Añadir una imagen. 5. En el diálogo Añadir una imagen seleccione una imagen del disco y cuando la tenga presione el botón Insertar en la página. Administración de Contenidos en Internet 19

20 6. Cuando haya insertado la imagen en la página de edición presione el botón Publicar. 7. Presione el enlace Páginas del menú del mismo nombre para acceder a las páginas que han sido creadas. Administración de Contenidos en Internet 20

21 8. Se pueden realizar las mismas operaciones que se realizaban con las entradas con una página. Esto incluye: editarlas, borrarlas (enviar a la papelera) y visualizarlas. 9. Ingrese en la barra de dirección de su navegador (o la dirección donde tenga instalado su WordPrees) para observar la entrada la página creada en la página de inicio haciendo clic en la opción del menú superior correspondiente. 10. Ahora haremos que la página creada aparezca como dependiente (o hija) de la página Página de ejemplo. Para ello regresaremos al panel administrativo ingresando en la opción Páginas. Administración de Contenidos en Internet 21

22 11. Posiciónese con el puntero del ratón sobre la página Clasificación de animales y haga clic sobre el botón Editar y de clic en dicho enlace. Esto cargará la página para edición de la entrada. 12. En la sección Atributos de página en el campo Superior seleccionar de la lista desplegable Categorías de animales. El resto de opciones que queden con los valores preestablecidos. 13. Presione el botón Actualizar para que el cambio se guarde. Administración de Contenidos en Internet 22

23 14. Ahora vuelva a la página de inicio del sitio ingresando nuevamente en la barra de dirección de su navegador: Observará que no aparece el enlace que aparecía la vez anterior en el menú superior debajo de la imagen de encabezado del sitio web. Esto es así porque ahora la opción está dentro de Categorías de animales (o dentro de Página de ejemplo si no tenía ud esa página). Así que para ver la opción debe posicionarse en la opción de menú principal para que sea desplegada dentro de ella y hacer clic para cargar la página. V. DISCUSIÓN DE RESULTADOS 1) Elimine la base de datos y los archivos de WordPress del servidor local. 2) Repita el proceso de instalación en su servidor local con la versión en español de WordPress y edite ud el archivo wp-config.php en lugar de crearlo desde el instalador. VI. INVESTIGACIÓN COMPLEMENTARIA 1) Escoja ud el paquete de WordPress que utilizará para instalarlo en su servicio de Webhosting. Tome en cuenta que no debe borrar los sitios enviados para guías anteriores, así que de ser necesario, debe adquirir un nuevo servicio de webhosting y repetir todo el proceso del procedimiento de esta guía y enviar a su docente de laboratorio el enlace para evaluación. Administración de Contenidos en Internet 23