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

  1. Mapa de sitio
  2. 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

  1. Creación de sitio y carpeta raíz en Dreamweaver.
  2. Creación de archivo html.
  3. Utilización de etiquetas para generar la estructura.
  4. Creación de selectores en un único archivo CSS.
  5. Aplicación de las propiedades a los selectores.
  6. 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.

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