Landing pages: Muestra del producto

Podemos ahondar más en los detalles del producto en este caso además de detallar el contenido de los cursos se puede usar un video de una sesión.

Siempre incidiendo en lo bueno que tiene desde el punto de vista del usuario. Se trata de convencerle de que se registre o adquiera el producto.

En otros tipos de sitios como agencia de viajes, inmobiliarias, decoración y similares puede ser interesante utilizar una galeria de imágenes. Si se trata de un ebook podrían mostrarse algunas páginas.

Para mostrar galerías (y para otros efectos) existen inumerbla cantidad de plugins prediseñados. Muchos basados en jQuery otros en JS simple ootros en Node... Mi recomendación: vainilla Javascript, o sea, javascript simple y los que tengan menos opciones. Suena raro no, veamos existen carruseles de imágenes que ofrecen decenas de opciones, de todas solo podrías usar en tu sitio dos o tres, ¿para qué tanto código extra ocupando espacio y por tanto ancho de banda?

Igualmente para dependencias. jQuery está bien, y para un sitio grande con miles de scripts pues puede ser interesante, pero para usar algunos efectos en una sola página... pues es como matar mascas a cañonazos. Mejor scripts independientes. Menos lineas de código en tus scripts implica menos volumen de datos y más rapidez de la página.

En este apartado voy a colocar dos contendios diferenciados:

Video con descripción del curso
Descripción de cada curso en modo texto
Llamada CTA (es copia de la usada en el apartado hero)

Como hay mucho código lo divido en tres partes: video, descripción y CTA, y resumo el texto de los contenidos. Aquí puedes ver el resultado

El código HTML: Video

Para el video he usado un pequeño corte de un youtube, pero podría ser una presentación de los cursos con detalles del contenido, objetivos, programación.

Para la descripción he usado un sistema de fichas con botones para mostrarlas de forma individual. Como se dice en la introducción de esta página es un scrpt a medida de la Landing page de muestra. Poco código, simple, muy simple, entendible y sin dependencias.

Esta es el apartado del video. El esquema van a ser dos partes:

lista de características
el video propiamente dicho

Además existe un botón para ver el video en grande, una lightbox. Código simple y totalmente personalizado.

<article id="detalles">
<section class="fila video">

<div class="celdas columna bg-azulmd" >
<h1>Sesión demo</h1>
<div class="cuerpo">Aquí puedes comprobar como es una sesión del curso.
<ul>
<li>Puedes verla varias veces.</li>
<li>Podrás detener y repetir apartados.</li>
<li>Puedes descargar los ejemplos.</li>
<li>Podrás plantear tus dudas.</li>
</ul>
<div style="text-align:center">
<div class="boton bg-azul" onclick="ventModal('vntmodal','demovid')" >Pantalla completa</div>
</div>
</div>
</div>

<div class="celdas columna bg-black">
<div id="demovid">
<video controls >
<source src="curso.mp4" type="video/mp4">
Este navegador no soporta modo video. Atuzlízelo. </video>
</div>
</div>
</section>

Estilos CSS: video

Para mostrar el video en grande se usa una ventana modal conteniendo el video, se construye con bloque (display:block) inicialmente oculto con posicionamiento absoluto (position:absoluto), lo que permite situarlo sobre el resto del contenido de la página. Por eso ves el bloque #vntmodal con un bloque interior #botcerrar.

Esta parte va a ser una fila con dos celdas. Es un fllexbox horizontal, algo que ya definimos en anteriores módulos. ahora quiero que ambas celdas estén pegadas y con la misma anchura.

La primera celda contiene una columna con varias celdas (en vertical), una clase columna ya definida también anteriormente. Solo voy a adaptar algunas propiedades como color del fondo y tamaños.

.bg-azul{
background-color:blue;
color:white;
}
#demovid video {
width: 90%;
height: auto;
}
.video {
margin: 32px 0px;
}
.video .columna{
align-items:center;
justify-content: center;
}
.video .celdas {
margin: 0;
}
#demovid{
text-align:center;
display:flex;
justify-content: center;
align-items: center;
}
#vntmodal{
position:fixed;
margin:0;
padding:0;
width:100%;
height:100%;
align-items:center;
justify-content:center;
background-color:rgba(0,0,0,0.72);
transition: transform 1000ms, visibility 1000ms;
display:flex;
transform: scale(0);
transform-origin: 50% 50%;
display:none;
}
#vntmodal #botcerrar{
position:absolute;
font-size:2rem;
color:lightgrey;
left:calc(100% - 2.2rem);
top:1rem;
}
#vntmodal #botcerrar:hover{
cursor:pointer;
}

Además de los apartados del video vistos en la página, tenemos definiciones de estilos para la ventana modal: posición fixed (absoluta independiente del scroll de pantalla), inicialmente oculta y con propiedad de transition para que se abra de manera gradual. Es un efecto que da suavidad a la aparición del video en ventana grande. No queremos ser bruscos ¿verdad?. Esta ventana se maneja con javascript. Lo veremos más adelante.

Codigo HTML de las fichas.

Las fichas de cada curso se construyen como una gfila con tres celdas, en horizontal. La primera celca contiene una imagen, la segunda un texto y la última una lista. Solo muestro una de las fichas, en el ejemplo descargable está completo.

<div class="fila tabConten visible" id="c1">
<div class="celdas"><img src="imgs/html.png" alt="curso de html"/> </div>
<div class="celdas">
<p> HTML es el lenguaje con el que están escritas las páginas web. Es un lenguaje sencillo de aprender y de aplicar. </p>
<p>Desde el primer dia podras crear páginas sencillas.  </p>
</div>
<div class="celdas">
<ul>
<li>Total de 20 sesiones</li>
<li>Con 40 min por sesión</li>
<li>Repartido en 10 capítulos</li>
<li>Material por escrito</li>
<li>Páginas de ejemplo </li>
</ul>
</div>
</div>

Soo una de las fichas tendrá la clase visible, las restantes no se muestran. Esta clase la asigna o elimina por java script al pulsar uno de los botones.

Puedes observar un primer bloque div para la imagen, otro para una descripción breve y otra con una lista no ordenada con aspectos destacables del curso.

Estilos CSS: las fichas.

Debajo del video hemos puesto unas fichas descriptivas de los cursos, para no ocupar demasiado espacio los he puesto en fichas apiladas. De manera que en cada momento se ve la ficha correspondiente a un curso. El cambio de fichas se realiza mediante botones o tabs. Aqui también hay javascript. Muy básico.

.tabsBtn
{
padding-bottom:0;
}
.tabsBtn .celdas
{
flex: 0 0 10%;
border-width:1px 1px 1px 1px;
border-style: solid;
border-color:#0000004d;
text-align:center;
color: #00000085;
border-radius: 5px 5px 0 0;
}
.tabsBtn .celdas:hover
{
background-color:lavender;
cursor:pointer;
}
.tabsBtn .activo{
background-color:lavender;
color:black;
border-color:#0000004d;;
border-bottom-color:lavender;
}
.tabsCont{
position:relative;
}
.tabConten li:before{
color:#5a6bad;
}
.tabConten li:hover::before{
color:#01030c;
}
.tabConten img{
width: auto;
height:160px;
}
.tabConten{
position:absolute;
width:100%;
top:0px;
visibility:hidden;
background-color:lavender;
padding: 16px 16px;
border-width:0 1px 1px 1px;
border-color: #0000004d;;
border-style:solid;
}
.tabConten .celdas{
align-self:flex-start;
}
.tabConten .celdas:nth-child(1){
align-self:center;
text-align:center;
}

.tabConten.visible{
visibility:visible;
position:relative;
}

Se definen estilos apra los botones (tabs) activos y con el ratón sobre ellos (hover).

La clase tabCont se asigna al bloque que contiene a todas las fichas. Le ponemos position:relative, para poder situar las fichas en modo posición absoluta dentro de él.

Y a cada ficha de curso se le asigna la clase tabConten, inicialmente se pone visibility:hidden y position:absolute. Mediante javascript se cambiarán estas asignaciones para que la ficha cambie entre los estados oculto y visible.

La primera celda tiene allineamiento totalmente centrado para la imagen, fíjate como se usa el selector jerárquico nth-child(1), con el seleccionamos la celda hija primera.

Responsive.

Para pantallas pequeñas es necesario reorientar las filas para ponerlas en modo columna.

En la sección de video quedará la descripción arriba y el video a continuación.

En las fichas para que imagen, texto y lista queden en vertical.

@media (max-width: 1024px){

.video{
flex-direction:column;
}
.video ul{
padding:2px
}
.tabsBtn .celdas
{
flex: 1 0 0%;
}
.tabConten{
flex-direction:column;
}}