Trabajo Práctico Nº 3

Diseño de APP - UX/UI design

"Detrás de cada gran sitio web hay un diseñador que soñó en grande. ¡Sigue soñando y diseñando el futuro digital"

En este trabajo práctico vamos a seguir practicando WordPress + Elementor al mismo tiempo que perfeccionamos el uso de Entradas y Categorías de entradas.

Evaluar la comunicación, diseño y contenidos correctos dependiendo de la institución seleccionada. Pensar bien el funcionamiento y la navegabilidad.

Analiza que información necesitas comunicar en beneficio de la institución y que contenidos querrías encontrar de manera rápida si fuese un visitante del sitio.

Piensa que contenidos dinámicos son importantes, en este trabajo práctico haremos hincapié en las entradas y sus categorías.

Incorporaremos varios plugins que nos ayudaran a proteger nuestro sitio, la seguridad es un tema fundamental en este tipo de sitios autogestionables.

Personalizaremos la identidad completa del sitio en su parte de administración para poder entregar un sitio profesional.

Optimizaremos el sitio para lograr un mejor desempeño y posicionamiento en buscadores.

METODOLOGÍA:

PRIMER ETAPA: Instalación de CMS WordPress

  • Creación de Base de Datos y Usuario de la BD desde el panel de control del hosting. Ten cuidado de no sobrescribir la BD del trabajo anterior!
  • Descarga de WordPress, subir comprimido al servidor, descomprimir e instalar.
  • Recuerda que al descomprimir crea una carpeta llamada “Wordpress” la cual puedes renombrar como “tp3” ANTES DE COMENZAR LA INSTLACIÓN.
  • Verificar el acceso al back-end con el usuario administrador.

Instalación de WordPress

WordPress WordPress es un sistema de gestión de contenidos o CMS (por sus siglas en inglés, Content Management System) enfocado a la creación de cualquier tipo de sitio.

Problemas al eliminar WordPress

Ouch! Nos equivocamos y queremos borrar la instalación de WordPress? Es muy común que no te permita eliminar la carpeta, te dejo un video de como podes solucionarlo!

Plugins WordPress

Vamos armando un listado de plugins para WordPress: A medida que vayamos probando diferentes plugins los vamos a ir agregando asi entre todos los podemos probar y descubrir,

SEGUNDA ETAPA: Planificación y bocetos

  • Investigar y recopilar información, fotografías, videos, especificaciones, etc.
  • Podemos inventar cierta información.
  • Mapa de Sitio y Wireframe (boceto de estructura).
  • Boceto diseño en Figma.
  • Realicen un relevamiento de sitios similares para determinar la información imprescindible, usen el sentido común y su creatividad para el resto!

TERCER ETAPA:

Creación y gestión de contenidos

  • Instalación y personalización del Theme Hello.
  • Plugin Elementor / Elementor PRO.
  • Instalación de otros plugins necesarios.
  • Creación de páginas estáticas y entradas dinámicas.
  • Creación de menú.
  • Verificar la navegabilidad y la experiencia de usuario.
  • No se estipula un mínimo secciones, queda a criterio del alumno que el sitio contenga toda la información necesaria dependiendo de la institución seleccionada.

CUARTA ETAPA:

Puesta en marcha!

Verificar la vinculación desde la portada y realizar un control general. Navega todos los contenidos y verifica el responsive.

Si tienes la posibilidad realiza un control probando el sitio en diferentes navegadores y dispositivos, como celulares o tablet, para verificar el correcto funcionamiento del diseño responsivo.

Recuerda que en la mayoría de los navegadores puedes simular la vista del sitio en dispositivos.

También puedes hacer un relevamiento de la performance del sitio: gtmetrix.com

Criterios de evaluación y contenido obligatorio:

  • Fecha de entrega de mapa de sitio, wireframe y boceto.
  • Fecha de puesta en linea del trabajo práctico.
  • Nombre correcto de archivos y carpetas en el servidor.
  • Optimización de imágenes.
  • Correcto uso del titulo del documento y favicon.
  • Correcta visualización en todas las resoluciones y dispositivos (responsivo).
  • Correcta vinculación desde la portada.
  • Aplicación de animaciones, efectos hover y cualquier otro recurso que consideren adecuado.
  • Diseño y maquetación en general: jerarquización de la información, manejo texto, legibilidad, composición, manejo del espacio, uso del color, contraste, etc.

FECHAS DE ENTREGA

La fecha de entrega del trabajo practico, asi como las entregas de las diferentes instancias de evaluación, serán indicadas en las listas de cada curso, posicionarse sobre las fechas!