Creación de la Web: Plantilla para Bootstrap

Para la creación de nuestra Web haremos uso de el framework Bootstrap de código abierto, que nos brinda una manera fácil e intuitiva de diseñar sitios y aplicaciones Web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.

Una vez definida una imagen corporativa y un estilo acorde al logotipo empresarial, tendremos que buscar una plantilla que se adapte a lo que tenemos en mente para después poder construir nuestra Web a partir de ahí.

Podemos encontrar plantillas de Bootstrap (templates) gratuitas en sitios como www.bootstrapzero.com, https://speckyboy.com o www.wpfreeware.com.

En este último enlace, hemos escogido para nuestro diseño web la plantilla de QUANTUM, producida por Pulsar media. Vamos a entrar a analizar en detalle esta plantilla. Podemos acceder a ella en http://projects.pulsarmedia.ca/quantum/.

En primer lugar, al abrir la plantilla, comprobamos que el estilo es un estilo sobrio y elegante, jugando con los diferentes tonos de azul para conseguir un efecto visual agradable en el cliente y que inspire confianza.

Vemos en la parte superior de la plantilla, una pequeña barra informativa con datos importantes tales como el teléfono de contacto de la empresa y los apartados de login, register y búsqueda. Esta barra desaparecerá al hacer scroll más abajo en la página.

El menú es un menú elegante, con opción a apartados desplegables y que contiene en su margen izquierdo el logotipo empresarial. Este menú estará siempre visible y se desplazará con nosotros a medida que naveguemos por la web. Para su implementación se hace uso del plugin JQUERY superfish que podemos ver en https://plugins.jquery.com/superfish/.

Existe un panel de bienvenida a la página, en el que se recoge el nombre de la empresa y un pequeño slogan debajo de él.

Podemos ver el uso de uno de los elementos más importantes de la página justo debajo. En repetidas ocasiones hace uso de un carrusel para dotar de dinamismo a la página. En este caso las últimas noticias de la empresa. Para implementar esta funcionalidad, se usa un plugin Jquery, denominado Owl Carousel. Podemos ver algunos ejemplos de funcionamiento y su documentación para su uso en su página Web: http://www.owlcarousel.owlgraphic.com/.

Vemos que la plantilla posee un mecanismo de búsqueda, cuando se pulsa en el icono de búsqueda situado en la barra de información. 

Seguimos viendo elementos de la Web, cabe destacar que se añadido una librería tipográfica denominada Font-Awesome, que incluye una gran cantidad de iconos que vemos a largo de toda la web. Podemos ver la documentación, las declaraciones de los iconos y las funcionalidades que ofrece en su página Web: https://fortawesome.github.io/Font-Awesome/.

Seguimos viendo además elementos dinámicos que aparecen a lo largo de la página cuando hacemos scroll hacia abajo, algunos de estos elementos son implementados haciendo uso del plugin wow.js del que podemos ver su documentación en http://mynameismatthieu.com/WOW/.

Podemos ver un ejemplo de cuestionario sencillo y elegante y algunos elementos Web más.

Observamos más ejemplos de dinamismo en la Web, así como un nuevo carrusel. El estilo se mantiene en toda la página web haciendo uso de los azules, grises y amarillo para destacar contenido.

Aquí podemos observar los pie de página, que ha sido expandido para poder albergar más información relevante. Observamos de nuevo el logotipo corporativo, alusiones a distintas redes sociales,etc.

En la esquina inferior derecha vemos un icono de una flecha apuntando en dirección ascendente, que nos permite en cualquier lugar de la página, volver a situarnos en el principio.


Una vez descargada la plantilla, vistas las distintas funcionalidades y entendido el código que la conforma, podemos pasar a editarla a nuestro gusto para conformar así nuestra página Web.