Javascript para la Landing Page
Realmente para este ejemplo que estamos creando solo es necesario un script, el que cambia las fichas de los cursos, un menu de pestañas.
Pero si queremos que la página sea responsive y posea una barra de navegación interna, entonces se necesita un script para abrir cerrar la barra de menu, que puedes ver en esta página.
En el ejemplo he usado un efecto de scroll automático muy habitual en las landing pages. Se encarga de que al pulsar cualquier enlace la página se deslize suavemente hasta llegar a la parte de la página apuntada por el enlace.
Relacionado con lo anterior se usa un botón flotante para regresar a la parte alta de la ventana. No es imprescindible por que tenemos la barra superior, pero es interesante aprender como se puede usar para donde no se quierea poner la barra de menú.
También como muestra he puesto un lightbox, una ventana modal en la que mostrar el video en grande.
Estas funciones requieren de Javascript, pero he usado Javascript elemental (vainilla Javascript) sin dependencias, es decir, sin dependencias externas ni utilidades avanzadas como módulos, imports... Solo código Javascript puro y simple. La idea es código entendible que sea util para aprender. Por supuesto que en algun caso el código es optimizable.
La no dependencia de librerias externas y el uso de poco código implica crear una página con poco peso, algo que cualquier usuario agradece.
Recuerda: que una página ligera es más rápida .
Una página rápida son usuarios satisfechos.
Javascript: consideraciones generales
Existen innumerables plugins para landing pages, tienes carruseles de imágenes, lightboxes, menus de pestañas, scrolls automáticos, animaciones para mostrar apartados, gestores de formularios.... Tanto gratis como de pago.
Entonces surge la pregunta ¿merece la pena programar los plugins? Como siempre depende de cada uno y de sus objetivos.
Y la otra pregunta ¿merece la pena saber programar los plugins? Si, saber programarlos implica poder modificarlos y personalizarlos cuando sea necesario.
No obstante, la mayoría de las aplicaciones que vas a encontrar son scripts basados en jQuery. Y otros son Javascript puro (vainilla Javascript, que dicen los ingleses), a veces innecesariamente complicados por cierto.
Seguro que conoces o has oído hablar de jQuery, una magnífica y enorme librería que facilita el manejo de los elementos y eventos de las páginas web. Pero como el principio de conservación de la energía: la que ganas por un lado lo pierdes por otro. Esta facilidad es a cambio de páginas más pesadas.
También encontrás en muchas ocasiones con plugins programados (con y sin jQuery) que ofrecen cientos de opciones de las que probablemente solo uses una o dos. Pues al final te vas a encontrar con un montón de lineas de código que solo sirven para darle peso a la página. Y peso en la práctica es una página lenta.
Algo parecido pasa con los estilos: CSS puro o frameworks como Bootstrap. En este caso la situación es mas sencilla de solucionar: puedes usar un framework, y luego reducirlo a las reglas que usas en tu página. Te quedará una hoja de estilos bastante más reducida y el efecto sobre el tamaño de la página no es tan alto. Aunque con cualquier framework CSS, al final también vas a crear tus porpias reglas de estilo.
¿Entonces programo mis plugins y creo mis estilos o uso frameworks y código externo? No hay que ser maximalista, a veces acabas con una mezcla de ambos mundos:
- Tengo prisa y poca práctica: aplicaciones prefabricadas
- Tengo tiempo y buenas capacidades: aplicaciones creadas por mi
Pero si decides hacer las cosas por tu cuenta, procura documentar bien tus códigos: cuando vayasa a actualizarlos o a modificarlos por cualquier motivo puede que ya no te suene como fucionan. Cuanto más complejo más comentarios.