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.

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:

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.
SEO y marketing online
¿Cuáles son los tipos de banner más comunes? ¿Cuáles tienen más clics?
L. Javier Gil

Algunos son apetecibles, otros odiosos pero a diario tenemos que lidiar con ellos. Te explicamos los tipos de banners que existen y algún consejo para crear el banner publicitario irresistible.

¿Cuáles son los tipos de banner más comunes? ¿Cuáles tienen más clics?
Diseño Web
Moodle y Bootstrap 4
L. Javier Gil

¡Moodle nunca se ha visto mejor! Adaptable a todos los dispositivos y navegadores, sobre la interfaz de usuario más popular de la red

Además de las nuevas características y mejoras, los usuarios de Moodle 3.5 pueden disfrutar de la rapidez y simplicidad de Bootstrap.

Moodle y Bootstrap 4