Introducción a la plataforma WordPress: Desarrollo de páginas web para proyectos académicos en el Recinto de Río Piedras

Transcripción

1 Introducción a la plataforma WordPress: Desarrollo de páginas web para proyectos académicos en el Recinto de Río Piedras José V. Camacho Fredy Castillo Prado María Gil Barvo 6 de mayo de 2016

2 Objetivos Dar a conocer a los participantes la normativa relacionada con la administración de páginas web en la Universidad de Puerto Rico, Recinto de Río Piedras. Presentar un ejemplo que ilustre los pasos básicos para la administración de una página web utilizando la plataforma WordPress ofrecida por el Recinto

3 Objetivos Realizar un ejercicio con los pasos básicos para crear y administrar un sitio web de WordPress con fines personales o profesionales. Conocer algunos principios básicos de diseño gráfico para aplicarlos al diseño de websites

4 Plataforma para el Diseño de Páginas Web La plataforma sugerida por la Oficina de Sistemas de Información de Administración Central, para la construcción y el mantenimiento de las páginas web de los Recintos es WordPress.

5 Plataforma para el Diseño de Páginas Web Ventajas de WordPress Es un open source, por lo que es gratuito. Es fácil de usar y existe mucho contenido en la web sobre cómo utilizarlo. Se le pueden añadir funcionalidades a través de los plugins. Compatible con la Web Móvil. Multi-Usuarios.

6 Alojamiento (Hosting) Todas las páginas web institucionales deberán estar alojadas en los servidores de la División de Tecnologías Académicas y Administrativas del Recinto de Río Piedras (DTTA). Se le asignará un dominio y espacio de prueba a cada página mientras está en construcción (dominio dv.rrp.campus). Los dominios y espacios de prueba se asignarán en la Oficina de Comunicaciones, Desarrollo y Exalumnos. Una vez completada la página web, se pasan todos los datos al servidor de producción (dominio uprrp.edu).

7 Estándares para la utilización aceptable de recursos de tecnología informática La Universidad y/o sus Recintos podrán definir y publicar el diseño de un marco general para alinear tales páginas y aplicaciones a la imagen institucional deseada. Los investigadores y personal docente quedan eximidos de cumplir con este requisito, por la naturaleza del trabajo que rinden a la Universidad.

8 Imagen Todas las páginas web deberán tener el sello oficial del Recinto con el banner establecido para la Oficina de Comunicaciones del Recinto. El pie de página/footer deberá ser de color gris con la firma uprrp en el lado derecho.

9 Mayor información Contacto: José Víctor Camacho López Especialista en Diseño Gráfico Oficina de Mercadeo, Desarrollo y Comunicaciones Ext jose.camacho1@upr.edu

10 Páginas del Recinto: CEA Administración de la página

11 Elementos de Diseño Gráfico

12 Qué es WordPress? Gestor de Contenido CMS (content manager system) Editor de texto WYSIWYG (what you see is what you get)

13 Consideraciones en el diseño Realzar la imagen de la organización o unidad Despertar confianza e interés Permitir al usuario encontrar fácilmente la información

14 Cómo empezar? Inspiración o idea inicial Organización de la página Bocetos Plantillas Posicionamiento de la información Dirección de la lectura

15 Elementos Gráficos Tipografía Serif o Sans Serif Colores Imágenes Logotipos Background

16 Ejercicio Práctico Creación de website 1. Crear una cuenta en WordPress

17 Ejercicio Práctico Creación de website a. Seleccione una categoría para su sitio

18 Ejercicio Práctico Creación de website b. Seleccione un tema (escoja cualquiera para los efectos de diseño, se puede cambiar más adelante)

19 Ejercicio Práctico Creación de website c. Escriba un dominio

20 Ejercicio Práctico Creación de website d. Seleccione un plan

21 Ejercicio Práctico Creación de website e. Escriba su correo electrónico y un password para crear su cuenta.

22 Ejercicio Práctico Creación de website Estos únicamente los realizará la primera vez para la creación de la cuenta. La próxima vez que desee trabajar su website solamente deberá presionar en acceder y escribir sus credenciales.

23 Ejercicio Práctico Creación de website Cuando ingrese a su cuenta, presione el botón Mi Sitio para comenzar a construir o editar su sitio web

24 Ejercicio Práctico Creación de website 2. Seleccione un 1 tema para configurar su 2 sitio

25 Ejercicio Práctico Creación de website Esta pantalla muestra el editor del tema

26 Ejercicio Práctico Creación de website 3. Comience la construcción del website, creando las páginas que lo conformarán

27 Ejercicio Práctico Creación de website a. Escriba el contenido de la página utilizando las propiedades CMS (Gestor de Contenido)de WordPress

28 Ejercicio Práctico Creación de website b. Construya una página de contacto Seleccione los campos del formulario de contacto

29 Ejercicio Práctico Creación de website Configure los ajustes de contacto

30 Ejercicio Práctico Creación de website c. Cree una página de galería Añada las imágenes

31 Ejercicio Práctico Creación de website Configure las opciones y presentación de su galería

32 Ejercicio Práctico Creación de website d. Cree un menú acomodando el orden en que desea se presenten sus páginas

33 Ejercicio Práctico Creación de website Finalmente presione este botón para ver el resultado final de su website

34 Ejercicio Práctico Creación de website

35 Recursos útiles Imágenes gratuitas (Creative Commons CC0)

36 Recursos útiles Imágenes gratuitas Imágenes pagadas

37 Enlaces a tutoriales Crear un sitio gratis con WordPress Cómo Crear Blog en Wordpress Gratis 2016 Editar Plantilla Foto Perfil, Insertar Imagen Videos

38