Curso online, diseño web

Martes, 27 Enero 2015 07:32

El pasado mes he estado desarrollando un sitio web un tanto marketer, orientada a conseguir matrículas en un curso presencial, tipo master class para profesional sanitario. He integrado una pasarela de pago y orientado los estilos de Twitter Bootstrap a la captación de Leads.

Curso online, single page con Bootstrap
Curso online, single page con Bootstrap Curso online, single page con Bootstrap

La premisa era: Tenemos una web para un curso de plazas limitadas, el curso es de pago (no precisamente barato), la escuela tiene amplio reconocimiento internacional, tiene que ser clara y directa. Objetivo: conseguir matrículas.

El resultado fue: Twitter Bootstrap y Adwords. Funcionó a la perfección.

Twitter Bootstrap es un Framework CSS (Un marco de trabajo para dar estilo a los elementos de página) y JS (Acompañado con una serie de scripts,a modo de plugins, en jQuery, que sirven para manipular objetos del Documento de forma dinámica y funcional). Creado por diseñadores y desarrolladores de Twitter, de código abierto, este framework se ha convertido en uno de los más populares de la red. Desde Agosto de 2011 han sacado más de 30 versiones, principalmente en su versión 2 y 3.

Un sitio web construido con este framework y cierto sentido común, adquirirá fácilmente altos niveles de usabilidad y navegabilidad y tendrá una respuesta excelente para muchos tipos de dispositivo.

Para este caso en concreto he creado una plantilla para Joomla a partir de Twitter Bootstrap y he optado por la opción OnePage o Página única, de forma que el usuario tenga accesible toda la información relevante para realizar una conversión (matricularse en este caso) en la misma página. Un buen recurso en este tipo de páginas es mantener fijo el menú superior para no perderlo cuando realizamos el scroll y colocar anclas a diferentes secciones (o alturas) de tu página en este menú principal. Esto es fácil de implementar con Bootstrap y uno de los componentes, affix.js

Por ejemplo, si quisiéramos saltar a una región de nuestro sitio web con la clase class="footer", pulsando el botón con id="botón", podríamos llamar al plugin affix.js vía javascript:

$('#boton').affix({
  offset: {
    top: 100,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

El uso del Framework, estilos y componentes, está detallado en su sitio web: getbootstrap.com, si tienes conocimientos de HTML5, CSS y jQuery, es muy sencillo incluirlo en tu desarrollo web.

Para mí, 3 de los mejores Frameworks son:

  1. Twitter Bootstrap
  2. Foundation
  3. UiKit

Ambos son limpios y ligeros, y tienen muy buenas características de adaptación entre dispositivos.

Si este artículo te pareció interesante, compártelo en las redes sociales!      

L. Javier Gil

Programador web Freelance.
Ingeniero en Telecomunicaciones.
Comparto curiosidades y noticias del mundo digital desde el corazón de Chapinero, en la lluviosa Bogotá, o desde un rinconcito de la vieja España llamado Benavente.
Blog de Este Gráfico

https://www.estegrafico.com

Artículos relacionados:

Optimización Web
Menú responsive para website Joomla y landing de exploración de cursos
L. Javier Gil

Landing page de exploración de cursos y menú responsive para universidad de Medellín.

Menú responsive para website Joomla y landing de exploración de cursos
Diseño Web
¿Cómo comprimir mis imágenes para la web? 5 herramientas gratis alucinantes
L. Javier Gil

Navegando la red últimamente me he encontrado con estas herramientas de compresión de imagen. Si eres un nerd de la optimización web esto te va a encantar.

¿Cómo comprimir mis imágenes para la web? 5 herramientas gratis alucinantes
e-commerce
Landing pages de producto para ecommerce
L. Javier Gil

Diseño, maquetación y optimización de landing pages para multinacional panameña

Landing pages de producto para  ecommerce
Diseño Web
Diseño Web para institución educativa
L. Javier Gil

Diseño de página web imagen corporativa y publicidad para redes sociales

Diseño Web para institución educativa
Diseño Gráfico
Diseño de landing page para captación de leads.
L. Javier Gil

Branding y diseño web para asesoría on line.

Diseño de landing page para captación de leads.