Trabajo Práctico Nº 4

Landing Page de Producto

En este trabajo práctico vamos a diseñar y poner en funcionamiento una Landing Page y seguir perfeccionándonos en el uso de WordPress + Elementor al mismo tiempo que agregaremos el plugin WooCommerce para administrar ventas on-line de productos y/o servicios.

En la mercadotecnia en internet, se denomina página de aterrizaje o landing page a una página web a la que una persona llega tras pulsar en el enlace o botón en una guía, un portal o algún banner o anuncio de texto situado en otra página web, aplicación, red social, correo electrónico o portal de internet. En la mayoría de los casos esta página web es una extensión del anuncio de promoción, donde se explica más detalladamente la oferta del producto o servicio que se está promocionando a través de una carta de ventas.

Evaluar la comunicación, diseño y contenidos correctos dependiendo del producto seleccionado. Pensar bien el funcionamiento y la navegabilidad, destacar las fortalezas del producto y sus variedades.

La elección del producto es libre, pero tengamos en cuenta que sea un producto con variaciones (color, tamaño, funciones) y/o accesorios, de tal modo que al crear nuestra tienda podamos practicar con mas de un único producto.

Algunos ejemplos: gadgets electrónico o productos tecnológicos en general, auriculares, impresoras, smartwatch, drones, vehículos, etc.

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 COMENSAR 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!

ENTREGAS El mapa de sitio y el wireframe debe entregarse por email a sebastian@seminarioesav.com.ar, la fecha limite se indicará en la lista de asistencia. Para el boceto de diseño revisaremos las posibilidades de entrega por medio de la plataforma.

Wireframe Landing page

TERCER ETAPA: Creación y gestión de contenidos

Instalación y personalización del Theme Hello.
Utilización de Woocommerce para generar la tienda.
Instalación de plugins necesarios.
Creación de página con Elementor.
Creación de menú de anclaje.
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 del producto seleccionado.

CUARTA ETAPA: Puesta en marcha!

Verificar la vinculación desde la portada y realizar un control general del sitio en diferentes dispositivos.
Realizar una medición del sitio: https://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).
Performance y optimización del sitio.
Correcta vinculación desde la portada.
Aplicación de animaciones, efectos hover, animaciones de entrada 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.