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.

Valora Este Artículo!
(2 Votos)

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!

   

Artículos relacionados:

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 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.
¿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?
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
Enamorados de las paletas de color
L. Javier Gil

Todos aman los colores. Los colores se encuentran entre los elementos más importantes de cada diseño y obra de arte. Como diseñadores, trabajamos con colores todos los días. Mira qué herramientas he encontrado para crear la paleta de color perfecta!

.
Enamorados de las paletas de color
L. Javier Gil

Desarollador web Freelance.
Ingeniero en Telecomunicaciones.
Comparto curiosidades y noticias del mundo digital desde el corazón de Chapinero, en la lluviosa Bogotá.
Blog de Este Gráfico

https://www.estegrafico.com