Aprende a crear Landing Pages con Bootstrap 3 o Instapage

Y mide si existe un interés real alrededor de tu Idea de Negocio
4.6 (262 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
2,001 students enrolled
Free
Start Learning Now
  • Lectures 54
  • Length 4.5 hours
  • Skill Level Beginner Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 1/2015 Spanish

Course Description

*Incluye Ebook

¿Qué es una Landing Page?

Como su nombre en inglés indica se trata de una página de aterrizaje, es decir, aquella página web a la que un usuario llega después de haber hecho clic en un enlace, un botón o un banner.

Hasta aquí podrías pensar que no tiene nada de diferente a una página web convencional, ya que normalmente, accedemos a ellas mediante alguna de las maneras anteriormente citadas. Pero no es así, lo que diferencia una landing page de una página web normal y corriente, es que ha sido diseñada específicamente para que la persona que visite la página realice una acción concreta. A esta acción se le suele llamar de varias formas, siendo las más populares: conversión, objetivo o lead.

Por tanto, las landing pages deben convertir visitas en acciones concretas y para
conseguirlo primero deben captar la atención del visitante, después deben
persuadirlo para que tenga en cuenta nuestra propuesta y finalmente deben pedirle
que haga algo.

A lo largo del curso te mostraré cómo crear tus propias Landing Pages de dos formas distintas:

  1. Utilizando el framework Bootstrap 3 (HTML, CSS, JS). ¡No tengas miedos si nunca tocaste una sola línea de código!
  2. Utilizando Instapage. Herramienta online de pago muy potente que te permite diseñar landing pages de forma visual (drag and drop).

De manera que serás libre de poder elegir según tus necesidades.

Atención:

  • Este curso incluye todo el código fuente para que puedas compararlo con tus progresos.
  • Puedes contar conmigo siempre que lo necesites.

What are the requirements?

  • Para realizar este curso no se requiere ninguna acción previa, ya que todo lo necesario será tratado durante el mismo. Lo único que necesitas es un poco de tu tiempo, una dosis de ilusión y muchas ganas de aprender :)

What am I going to get from this course?

  • Aprenderás a programar una Landing Page que dejará a tus futuros clientes con ganas de saber más. Gracias a ella, podrás medir el interés que existe hacia tu producto o servicio, pues los usuarios que la visiten podrán dejar su email. Se trata de aprender una forma rápida y barata de validar tus ideas.
  • Al acabar el curso, tendrás una Landing Page creada con HTML5, Bootstrap, Mailchimp y Powtoon. Además, estará lista para ser promocionada, ya que aprenderás a obtener un Dominio y alojarla en un Hosting. Y, lo más importante, este curso te permitirá obtener las bases para elaborar proyectos web más complejos.

What is the target audience?

  • El curso va dirigido a todo tipo de emprendedores, tengan o no un perfil técnico, dado que se partirá de un nivel para principiantes que quieran ir un paso más allá a la hora de testear sus ideas.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introducción
¡Estoy aquí para ayudarte! ¿Cómo contactar conmigo?
Article
¿Qué es una Landing Page y para qué sirve?
01:59
¿Qué elementos debe contener?
04:58
¿Qué vamos a desarrollar en este curso?
00:34
Test introductorio
6 questions
Section 2: Puesta a punto
00:56

En esta clase veremos dónde y cómo poder descargar el editor de textos Sublime Text 3, el cual utilizaremos para el desarrollo de la Landing Page.

(Link para descargarlo) http://www.sublimetext.com/3

06:50

En esta clase sabremos que es Bootstrap 3, aprenderemos a descargarlo e "instalarlo" y veremos los recursos de ayuda online más útiles para cuando nos pongamos a desarrollar.

(Link directo para descargarlo) https://github.com/twbs/bootstrap/releases/download/v3.3.1/bootstrap-3.3.1-dist.zip

(Link donde encontrar la plantilla básica) http://getbootstrap.com/getting-started/

(Ayuda sobre el CSS) http://getbootstrap.com/css/

(Ayuda sobre sus componentes) http://getbootstrap.com/components/

(Ayuda sobre Javascript) http://getbootstrap.com/javascript/

05:22

En esta lección se repasan muy brevemente conceptos básicos sobre el lenguaje de programación HTML. Para ello se describe el contenido de la plantilla básica de Bootstrap.

03:52

En esta clase aprenderemos 3 atajos de Sublime Text, que nos facilitarán la vida a la hora de programar. Los tres atajos que se aprenderán son:

  • Crea un elemento HTML
    • nombreDelTag + TABULADOR
  • Crea un elemento HTML con una clase concreta
    • nombreDelTag + PUNTO + nombreDeLaClase + TABULADOR
  • Genera contenido automáticamente
    • lorem + TABULADOR
¿Qué hemos aprendido? & MATERIAL
01:11
Section 3: El Sistema de Rejillas de Bootstrap
03:07

En esta clase aprenderemos que es el Sistema de Rejillas de Bootstrap, el cual nos facilitará la vida a la hora de situar los elementos dentro de una página web.

09:43

En esta clase aprenderemos a usar el Sistema de Rejillas con Bootstrap. Para entenderlo bien realizaremos una serie de sencillos ejemplos que nos ayudarán a entender los conceptos fundamentales.

09:40

En esta clase aprenderemos a distribuir los elementos de la Landing Page de una forma u otra dependiendo del tamaño de la pantalla. Para ello usaremos las clases que ofrece Bootstrap.

Si quieres ir más allá te animo a que repases la documentación oficial de Bootstrap (EN INGLÉS) http://getbootstrap.com/css/#grid

¿Qué hemos aprendido? & MATERIAL
00:44
Section 4: Creación de la Landing Page
05:31

En esta clase hemos analizado las imágenes necesarias para crear la Landing Page. También se ha explicado cómo conseguir el material para un nuevo proyecto.

En concreto se ha utilizado Google Imágenes para otbtener la foto de fondo y se ha hecho uso de las Herramientas de búsqueda (Recuerda que sea mayor que 2MP).

Es importante que todas las fotos que uses para tu web tengan formato ".png" y que además las comprimas usando Tinypng (https://tinypng.com) como hemos visto en el vídeo.

Para la creación del logo se han mostrado dos plataformas. La primera es Fiverr (https://www.fiverr.com) y la segunda, de precio más elevado Withoomph (https://withoomph.com).

Finalmente, para la creación del Favicon hemos usado la web Favicon Generator (http://favicon-generator.org).

03:07

En esta lección aprenderás a instalar las Fuentes de Iconos "Font Awesome". Las puedes encontrar en su página oficial http://fortawesome.github.io/Font-Awesome/examples/

10:16

En esta clase aprenderás a introducir en la Landing Page los elementos Logo, Botones de Redes Sociales y el Título.

09:02

En esta clase aprenderás a introducir las Principales Características de tu proyecto en la Landing Page.

09:25

En esta clase aprenderás a introducir los Testimonios que opinan sobre tu producto en la Landing Page.

09:02

En esta clase aprenderás a introducir el apartado de Apariciones en Prensa en la Landing Page. Además, aprenderás a transformar una imagen en color a escala de grises, utilizando el editor de imágenes gratuito y online llamado Pixlr (https://pixlr.com).

05:31

En esta clase aprenderás a introducir el Pie de Página en la Landing Page. Además, verás como es posible separar los estilos (diseño) del código HTML, usando las Hojas de Estilo (CSS).

11:45

En esta clase aprenderás a añadir el Call To Action a la Landing Page. Además, también añadiremos la Imagen de Fondo y haremos algunos pequeños retoques de CSS.

07:47

En esta clase añadiremos el Botón para reproducir el Vídeo Promocional y aprenderás a añadir Ventanas Modales a tu Landing Page.

02:09

En esta clase modificaremos el Tag Title y añadiremos el Favicon (el icono que aparece en la pestaña del navegador).

¿Qué hemos aprendido? & MATERIAL
00:41
Section 5: Creación del Vídeo Promocional con Powtoon
17:14

En esta clase aprenderás a utilizar la herramienta de creación de vídeos animados llamada Powtoon (http://www.powtoon.com). La utilizaremos para crear el Vídeo Promocional de nuestro producto.

02:55

En esta clase aprenderás a subir el Vídeo Promocional creado a tu cuenta personal de Youtube. De esta manera será mucho más sencillo incluirlo posteriormente en la Landing Page.

03:07

En esta clase aprenderás a añadir subtítulos al vídeo promocional.

02:46

En esta clase aprenderás a insertar el Vídeo Promocional a la Landing Page.

¿Qué hemos aprendido? & MATERIAL
00:29
Section 6: Integración con Mailchimp
03:22

En esta clase aprenderás qué es la herramienta Mailchimp, te registrarás en ella y crearás una Lista de Suscripción, donde se irán almacenando los emails de las personas interesadas en tu producto.

02:56

En esta clase aprenderás a cambiar el Diseño del Formulario de Suscripción de Mailchimp.

06:23

En esta clase modificaremos el formulario de nuestro Call To Action de manera que se integre con Mailchimp. También aprenderemos a exportar la lista de suscripción en formato CSV (el cual puede ser posteriormente abierto con programas como el Excel).

08:21

En esta clase aprenderás que son los Alerts de Bootstrap y cómo usarlos para mostrar al usuario mensajes. Además, se utilizará código Javascript (al cual no se entrará en detalle) para realizar la validación del formulario.

04:56

En esta clase seguiremos utilizando los Alerts de Bootstrap, esta vez para mostrar un mensaje de éxito. Finalmente, ocultaremos y mostraremos ciertas partes de la Landing cuando sea necesario.

¿Qué hemos aprendido? & MATERIAL
01:04
08:47

Si lo deseas puedes descargarte el código actualizado.

Section 7: Dominio y Hosting Gratuito
01:16

Tener un Dominio y Hosting gratuito está bien, pero sólo durante la etapa de promoción de la Landing Page. Para alojar nuestro producto final, será conveniente comprar un dominio (.com) y contratar un servicio de hosting que se adapte a nuestras necesidades.

05:59

En esta clase aprenderás a obtener un Dominio y un Hosting gratuito utilizando Hostinger (http://www.hostinger.es). Además, aprenderemos a subir nuestra Landing Page al Hosting y para ello deberemos comprimir todos los archivos.

Para comprimir, en el caso de que tengas un Mac, puedes descargarte el programa gratuito The Unarchiver (https://itunes.apple.com/es/app/the-unarchiver/id425424353?mt=12) y si tienes Windows, puedes usar WinRAR (https://www.winrar.es/descargas).

Section 8: Crea un Landing Page en tiempo récord con InstaPage
InstaPage: Preparación de las imágenes
03:39
InstaPage: Registro y elección de la Plantilla
02:13
InstaPage: Logo, Título, Social, Fondo y Call-To-Action
07:03
InstaPage: Integración con Mailchimp
01:55
InstaPage: Vídeo Promocional
03:23
InstaPage: Características Principales
04:26
InstaPage: Prueba social con Testimonios
04:02
InstaPage: Prueba Social con Apariciones en Prensa
04:15
InstaPage: Pie de Página (Footer)
01:10
InstaPage: Publicación y Testeo de la Landing Page
01:39
InstaPage: Comparación con Bootstrap
02:37
Section 9: ¡Eso es todo amigos!
00:46

Me despido de ti y sólo puedo desearte que tengas mucha suerte con tu proyecto. Muchas gracias por haber adquirido y acabado este curso.

Si te parece bien, comparte la Landing que hayas desarrollado, para que todos podamos saber sobre tu futuro proyecto. ¡Un saludo!

Cómo usaré vuestro Feedback
01:26
Section 10: MATERIAL EXTRA
15 pages

Estas son todos las etiquetas HTML que se han utilizado para desarrollar la Landing Page, por supuesto existen muchas más. Si estáis interesados en aprender a fondo HTML, os recomiendo que busquéis en Udemy, donde encontraréis cursos excelentes, o que ante dudas puntuales acudáis a la web de referencia del HTML http://www.w3schools.com/, donde están explicados a la perfección todos los tags y atributos que existen.

13 pages

Guía teórica donde se profundiza sobre el proceso de creación de landing pages que conviertan. Empezando des de su definición, cuándo podemos utilizarlas, cuáles son sus elementos clave, cómo podemos optimizarlas con Test A/B y cuáles son las alternativas que tenemos para crearlas hoy en día.

El grupo de SiliCodeValley
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

David Perálvarez, Diseñador y Desarrollador Web e Instructor Online

Soy David Perálvarez, de formación Ingeniero técnico en Informática de Sistemas Master in Computer Vision and Artificial Intelligence y en la actualidad me dedico a diseñar y desarrollar sitios web de forma freelance en Barcelona (España).

Llevo focalizado en el diseño y desarrollo de aplicaciones y sitios web más de 6 años. Asimismo, durante este tiempo he sido (y sigo siendo) emprendedor, he cofundado varias startups de base tecnológica, donde alguno de los proyectos ha sido utilizado por miles de personas de distintos países.

Además ejerzo como Profesor Asociado en un máster universitario de la Universidad Abat Oliba de Barcelona.

Por último, me encanta aprender cosas nuevas y compartirlas con todo el mundo. A parte de mis cursos de Udemy, en SiliCodeValley publico artículos y más videolecciones gratis para aquellas personas que quieran emprender un nuevo camino en el rubro del diseño y desarrollo web.

Ready to start learning?
Start Learning Now