páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads ›...
Transcript of páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads ›...
![Page 1: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/1.jpg)
Introducción a la plataforma WordPress: Desarrollo de páginas web para proyectos académicos en el Recinto de Río Piedras
José V. CamachoFredy Castillo Prado
María Gil Barvo
6 de mayo de 2016
![Page 2: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/2.jpg)
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
![Page 3: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/3.jpg)
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
![Page 4: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/4.jpg)
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.
![Page 5: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/5.jpg)
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.
Plataforma para el Diseño de Páginas Web
![Page 6: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/6.jpg)
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).
![Page 7: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/7.jpg)
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.
http://www.uprrp.edu/dtaa/files/estandaresparaelusodetecnologiaespanol.pdf
![Page 8: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/8.jpg)
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.
![Page 9: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/9.jpg)
Mayor información
Contacto:
José Víctor Camacho LópezEspecialista en Diseño Gráfico
Oficina de Mercadeo, Desarrollo y Comunicaciones
Ext. 83120
E-mail: [email protected]
![Page 10: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/10.jpg)
Páginas del Recinto: CEA
Administración de la página
![Page 11: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/11.jpg)
Elementos de
Diseño Gráfico
![Page 12: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/12.jpg)
¿Qué es WordPress?
• Gestor de Contenido CMS (content manager system)
• Editor de texto WYSIWYG (what you see is what you get)
![Page 13: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/13.jpg)
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
![Page 14: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/14.jpg)
¿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
![Page 15: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/15.jpg)
Elementos Gráficos
• Tipografía– Serif o Sans Serif
• Colores
• Imágenes
• Logotipos
• Background
![Page 16: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/16.jpg)
1. Crear una cuenta en WordPress
Ejercicio PrácticoCreación de website
![Page 17: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/17.jpg)
Ejercicio PrácticoCreación de website
a. Seleccione una categoría para su sitio
![Page 18: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/18.jpg)
Ejercicio PrácticoCreación de website
b. Seleccione un tema (escoja cualquiera para los efectos de diseño, se puede cambiar más adelante)
![Page 19: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/19.jpg)
c. Escriba un dominio
Ejercicio PrácticoCreación de website
![Page 20: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/20.jpg)
d. Seleccione un plan
Ejercicio PrácticoCreación de website
![Page 21: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/21.jpg)
e. Escriba su correo electrónico y un password para crear su cuenta.
Ejercicio PrácticoCreación de website
![Page 22: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/22.jpg)
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.
Ejercicio PrácticoCreación de website
![Page 23: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/23.jpg)
Ejercicio PrácticoCreación de website
Cuando ingrese a su cuenta, presione el botón “Mi Sitio” para comenzar a construir o editar su sitio web
![Page 24: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/24.jpg)
2. Seleccione un tema para configurar su sitio
1
2
Ejercicio PrácticoCreación de website
![Page 25: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/25.jpg)
Esta pantalla muestra el editor del tema
Ejercicio PrácticoCreación de website
![Page 26: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/26.jpg)
3. Comience la construcción del website, creando las páginas que lo conformarán
Ejercicio PrácticoCreación de website
![Page 27: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/27.jpg)
a. Escriba el contenido de la página utilizando las propiedades CMS (Gestor de Contenido)de WordPress
Ejercicio PrácticoCreación de website
![Page 28: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/28.jpg)
b. Construya una página de contacto
Seleccione los campos del formulario de contacto
Ejercicio PrácticoCreación de website
![Page 29: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/29.jpg)
Configure los ajustes de contacto
Ejercicio PrácticoCreación de website
![Page 30: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/30.jpg)
c. Cree una página de galería
Añada las imágenes
Ejercicio PrácticoCreación de website
![Page 31: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/31.jpg)
Configure las opciones y presentación de su galería
Ejercicio PrácticoCreación de website
![Page 32: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/32.jpg)
d. Cree un menú acomodando el orden en que desea se presenten sus páginas
Ejercicio PrácticoCreación de website
![Page 33: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/33.jpg)
Ejercicio PrácticoCreación de website
Finalmente presione este botón para ver el resultado final de su website
![Page 34: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/34.jpg)
Ejercicio PrácticoCreación de website
![Page 35: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/35.jpg)
Recursos útiles• Imágenes gratuitas (Creative Commons CC0)
https://pixabay.com/
![Page 36: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/36.jpg)
Recursos útiles
• Imágenes gratuitashttp://www.freedigitalphotos.net
https://www.textures.com/
• Imágenes pagadashttp://www.shutterstock.com/
![Page 37: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/37.jpg)
Enlaces a tutoriales
• Crear un sitio gratis con WordPress
https://www.youtube.com/watch?v=tcynS7PbA7Q
• Cómo Crear Blog en Wordpress Gratis 2016 | Editar
Plantilla Foto Perfil, Insertar Imagen Videos
https://www.youtube.com/watch?v=HbmHIbsaWMs
![Page 38: páginas web para proyectos WordPress: Desarrollo de ...cea.uprrp.edu › wp-content › uploads › 2016 › 05 › Final-presentación-… · Ventajas de WordPress •Es un “open](https://reader035.fdocuments.co/reader035/viewer/2022070814/5f0e2d6b7e708231d43dfaed/html5/thumbnails/38.jpg)