Crear una landing page desde cero
Ahora toca la parte práctica. Pero te aconsejo que mires todo lo relativo a las landing page: que son, como funcionan, elementos que la forman. Conocer a fondo lo que vas a cosntruir es muy importante. Si queires aprender no basta con copiar y pegar código, tienes que saber lo que haces.
El objetivo es construir una landing-page. Voy a usar estilos CSS creados desde cero y algo de javascript. La página será responsive, es decir, será igualmente utilizable desde móvil o desde desktop
.Antes de comenzar a montar la página debemos tener completadas algunas tareas prevías. En resumen:
- Establecer los objetivos de forma clara. Es necesario un punto de partida.
- Definir el público o cliente objetivo: a quien va dirigido el producto
- Tener un boceto o dibujo esquemático sobre el diseño y técnica de desarrollo
Aquí hago un resumen que podría ser el resultado de un estudio previo de marketing sobre el producto que vamos a ofrecer en la Landing Page.
Si estás trabajando en un equipo o estás haciendo la página para un cliente, es posible que parte de este trabajo te venga ya hecho. En caso contrario te toca investigar un poco para hacerte una idea clara.
Antes de comenzar a montar la página es conveniente preparar un proyecto claro de lo que se va a construir.
Servirá al menos como punto de partida, aunque luego se reajuste.
Cuando tengas completada esta primera etapa pasamos a la creación de la página propiamente dicha. Asíq eu primero el proyecto y luego la parte práctica
Para que te hagas una idea puedes mirar el resultado final de la página que vas a construir si quieres seguir este tutorial
El proyecto.
- ¿Qué se ofrece?
- Cursos sobre materias necesarias para convertirse en un desarrollador web.
- El objetivo: CTA
- Es necesario registrarse y pagar por cada curso una cantidad fija.
La CTA: los visitantes deben registrarse o contactar para recibir más información sobre los cursos. - Ventajas del producto
- Permite al cliente acceder a un mercado de trabajo en auge
Puede trabajar como freelancer
Puede facilitarle el teletrabajo - Características del producto ofrecido:
- Lenguaje de marcas: HTML.
Lenguaje de estilo: CSS.
Lenguaje de programación: Javascript.
Lenguaje de programación: PHP. - Son cursos en video
Existe material impreso - Equipo humano
- Hay un grupo de profesores cuyas fotografías y datos pueden usarse en la página
- Testimonios
- Algunos exalumnos consienten en que se use su nombre y opiniones en la página.
- Muestras
- Se puede usar un video de una parte dle curso como demo
A quien va dirigido.
El cliente objetivo se ajusta a estas características:
- Edad jóvenes y adultos
- Sin conocimientos previos de lenguajes de programación
- Quiere expandir su campo de trabajo
- Tiene competencias para manejarse en internet
- Nivel adquisitivo medio
- Capacidad de autoaprendizaje
- Idioma que habla: español
Aspectos constructivos.
Se trata de una página independiente, con su propio diseño que puede ser diferente del que tenga el sitio web al que pertenezca.
Los colores a utilizar son tonos claros, dentro de la gama de los azules y anaranjados. Los fondos irán en blanco y gama de azules muy claros.
Para el tipo de letra elijo el tipo Open Sans para el texto y Ubuntu para títulos, fuente presentes en cualuier sistema. Pero si quieres puedes usar la gratuitas proporcionadas por Google. Las pongo para mostrar la manera de importar fuentes externas en tus proyectos, pero igualmente podrías utilizar las llamadas fuentes seguras que existen en la mayoría de los dispositivos como Arial, Verdana, Times o las gnéricas serif o sans-serif.
Imágenes propias: fotografías e ilustraciones con los colores adecuados.
Los estilos CSS se desarrollan desde cero, no se usa ningún framework
Hay algunos scripts escritos en javascritp para conseguir un diseño responsive y el algunos efectos que faciliten el uso de la página.
El desarrollo va a ser modular, es decir, voy a ir codificando cada parte de la página como un módulo, estos compartirán estilos CSS. Una vez completados todos ellos se unen en la página definitiva.
Al final se debe refactorizar para eliminar estilos redundantes y corregir errores que puedan producire en la integración de las distintas partes de la página.
Esta estrategia se basa en dividir un problema complejo en pequeños problemas simples que al unirlos proporcionan la solución final. Es una estrategia que funcionan bastante bien.