Trabajo Práctico Nº 3
LANDING PAGE PRODUCTO:
INTRODUCCIÓN:
En este trabajo práctico vamos a diseñar y poner en funcionamiento una Landing Page para un producto único especifico.
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 podamos practicar la aplicación de columnas con mas de un único producto.
METODOLOGÍA:
PRIMER ETAPA:
Pienso, luego diseño!
- Mapa de sitio
- Boceto de estructura, Wireframe!
- Boceto detallado del diseño.
Es muy importante seguir ese proceso para avanzar de forma clara y ordenada, de este modo puedo determinar la estructura, el funcionamiento y la navegabilidad del sitio. Se calificara cada ítem indicado y los mismos deben ser entregados en ese orden en las fechas establecidas.
Establezco cual es la función de la misma y de este modo logramos también una jerarquización de la información y los elementos dentro de una estructura coherente.
El boceto nos será muy útil para planificar la estructura, exportar elementos gráficos y ganar tiempo al momento de la construcción!
Estructura mínima obligatoria:
Para este trabajo práctico vamos a utilizar una cantidad especifica de secciones y deberemos cumplir con ciertas divisiones de estructura obligatorias, les dejo las etiquetas, divisiones y contenidos obligatorios para que tengan a mano.
- Header al 100% de ancho y con posición fija en la parte superior.
- Div contenedor con ancho máximo de 950px y centrado para la info del Header.
- Div para insertar el Logo.
- Etiqueta Nav, dentro el menú utilizando <ul> y <li>
- Hover con css para los li a del menú.
- Vínculos a redes sociales.
- Main para el contendido principal del sitio, en el insertaremos las secciones principales.
- Section, un mínimo de 6, para dividir las diferentes secciones del sitio, indicando un ID a cada una, el cual luego utilizaremos para vincular.
- Podemos utilizar fondos de color o con imágenes que abarquen el 100% de ancho, pero recuerden que los contenidos deben tener un ancho máximo de 950px para poder mantener la info dentro de una caja.
Las secciones obligatorias son:
- HERO SECTION: 2 columnas
- BENEFICIOS / VENTAJAS: 3 columnas
- REVIEWS DE USUARIOS: 4 columnas
- PRODUCTOS (variaciones o accesorios): 2 filas de 3 columnas
- ESPECIFICACIONES
- CONTACTO
- Footer.
SEGUNDA ETAPA:
Orden, planificación y armado
- Creación de sitio y carpeta raíz en Dreamweaver.
- Creación de archivo html.
- Utilización de etiquetas para generar la estructura.
- Creación de selectores en un único archivo CSS.
- Aplicación de las propiedades a los selectores.
- Vinculaciones de anclajes y vínculos absolutos para sitios externos.
TERCERA ETAPA:
Puesta en marcha!
Subir el sitio al servidor y realizar un control general, verificar la correcta visualización del favicon, imágenes, titulo del documento y chequear el correcto funcionamiento de los vínculos.
Criterios de evaluación y contenido obligatorio:
- Fecha de entrega y desarrollo de bocetos.
- Fecha de puesta en linea del trabajo práctico.
- Nombre correcto de archivos y carpetas en el servidor.
- Optimización de TODAS las imágenes.
- Correcto uso del titulo del documento y favicon.
- Botones con efecto hover.
- Información completa del producto.
- Vínculos a redes sociales.
- 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!
