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
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
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
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.
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
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).
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
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.
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]
Páginas del Recinto: CEA
Administración de la página
Elementos de
Diseño Gráfico
¿Qué es WordPress?
• Gestor de Contenido CMS (content manager system)
• Editor de texto WYSIWYG (what you see is what you get)
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
¿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
Elementos Gráficos
• Tipografía– Serif o Sans Serif
• Colores
• Imágenes
• Logotipos
• Background
1. Crear una cuenta en WordPress
Ejercicio PrácticoCreación de website
Ejercicio PrácticoCreación de website
a. Seleccione una categoría para su sitio
Ejercicio PrácticoCreación de website
b. Seleccione un tema (escoja cualquiera para los efectos de diseño, se puede cambiar más adelante)
c. Escriba un dominio
Ejercicio PrácticoCreación de website
d. Seleccione un plan
Ejercicio PrácticoCreación de website
e. Escriba su correo electrónico y un password para crear su cuenta.
Ejercicio PrácticoCreació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.
Ejercicio PrácticoCreación de website
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
2. Seleccione un tema para configurar su sitio
1
2
Ejercicio PrácticoCreación de website
Esta pantalla muestra el editor del tema
Ejercicio PrácticoCreación de website
3. Comience la construcción del website, creando las páginas que lo conformarán
Ejercicio PrácticoCreación de website
a. Escriba el contenido de la página utilizando las propiedades CMS (Gestor de Contenido)de WordPress
Ejercicio PrácticoCreación de website
b. Construya una página de contacto
Seleccione los campos del formulario de contacto
Ejercicio PrácticoCreación de website
Configure los ajustes de contacto
Ejercicio PrácticoCreación de website
c. Cree una página de galería
Añada las imágenes
Ejercicio PrácticoCreación de website
Configure las opciones y presentación de su galería
Ejercicio PrácticoCreación de website
d. Cree un menú acomodando el orden en que desea se presenten sus páginas
Ejercicio PrácticoCreación de website
Ejercicio PrácticoCreación de website
Finalmente presione este botón para ver el resultado final de su website
Ejercicio PrácticoCreación de website
Recursos útiles• Imágenes gratuitas (Creative Commons CC0)
https://pixabay.com/
Recursos útiles
• Imágenes gratuitashttp://www.freedigitalphotos.net
https://www.textures.com/
• Imágenes pagadashttp://www.shutterstock.com/
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
Top Related