Trabajo Práctico Nº 2
LANDING PAGE MOVIE
- INTRODUCCIÓN -
En este trabajo práctico vamos a diseñar y poner en funcionamiento una Landing Page para una película!
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.
- METODOLOGÍA -
PRIMER ETAPA:
Pienso, luego diseño!
- Mapa de sitio
- 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.
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
- 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
- Main para el contendido principal del sitio, en el insertaremos las secciones principales.
- Section, un mínimo de 5, 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.
Algunas secciones recomendadas:
- HERO SECTION / INICIO
- TRAILER
- SINOPSIS / CAST
- PREMIOS
- REVIEWS
- INFO TECNICA
Footer
- Etiqueta Footer como cierre del sitio, allí podemos indicar el copyright, redes sociales, vínculos del sitio, diferente información de contacto, legal o técnica, entre otros.
Ejemplo en Figma
Les dejo el link al ejemplo, hecho medio rapidito... pero tratando de mostrarles diferentes tipos de contenidos o fondos en cada sección
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.
Ejemplo
Les dejo el link al ejemplo, hecho medio rapidito... pero tratando de mostrarles diferentes tipos de contenidos o fondos en cada sección.
Archivos ejemplo
En este enlace pueden encontrar todos los archivos del ejemplo y la carpeta raíz completa del ejemplo realizado en el video del paso a paso.
- 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 sobre la película.
- Vínculos a redes sociales.
- Diseño y maquetación: jerarquización de la información, manejo texto, legibilidad, composición, manejo del espacio, uso del color, contraste, etc.