Mejor UX con Bootstrap y Material design

La experiencia de usuario (UX) es muy importante para conservar una experiencia unificada entre dispositivos. Google Material design es una tecnología disponible para lograr este objetivo, y si combinamos este lenguaje visual con Bootstrap para crear nuestros proyectos el resultado es un experiencia a nivel superior.

Bootstrap como framework nos permite crear proyectos web para desktop y dispositivos móviles de forma rápida con una disposición “layout” organizada. Hasta ahora Bootstrap es el framework de estilos más popular entre desarrolladores web por su fácil implementación.

Imagina ahora tener una interfaz de usuario estructurada, más una experiencia de usuario unificada entre dispositivos logrando elementos y efectos que parecen nativos en dispositivos móviles y agradables visualmente en ordenadores. A continuación les voy a mostrar como incorporar Bootstrap y Material design para una experiencia de usuario única.

Requerimientos

Plantilla “Theme” Bootstrap
Para iniciar necesitaremos una plantilla basada en Bootstrap. Utilizaremos la versión  3.3.6 de Bootstrap con la plantilla Bare de Start Bootstrap.

Material design
Como Material design es una tecnología basada en estilo y efectos de Google. Vamos a utilizar Bootstrap Material Design de Fez Vrasta.

Servidor Web
Para los fines puedes utilizar cualquier servidor web que tengas. Recomiendo Wamp Server si vas a trabajar localmente o bien puede utilizar un hosting que tengas para tus proyectos.

Es requerido que nuestro proyecto sea visualizado desde un web server, de lo contrario, no podremos visualizar nuestro avance ya que tanto Material Design Respond.js y Ripples.js no funcionan si se accede a los ficheros vía file://.

1. Bootstrap

Iniciando con nuestra implementación, vamos a crear un directorio en la raíz de documentos de nuestro web server. Asumiendo que utilizarmos Wam Server, nuestro directorio proyecto podría ser:

C:\\wamp\\www\deimos

“Deimos” es el nombre de nuestro directorio tomado del nombre de la luna del Planeta Marte.

Una vez creado el directorio para nuestro proyecto. Extraemos el archivo zip con la plantilla Bare de Start Bootstrap y copiamos el contenido en nuestro recién creado directorio en wamp.

bare_content

Una vez copiado el contenido, hacemos una prueba de que todo marcha bien. Ejecutamos nuestro Wamp Server y accedemos vía navegador web a http://localhost/deimos. Entonces veremos algo así:

Boostarp bare theme
Boostarp bare theme

 

2. Materials design

Ya que tenemos nuestra plantilla Bootstrap. Ahora vamos a incorporar Materials design a la plantilla para crear nuestra experiencia unificada con un tono App nativa de dispositivos con los efectos visuales ricos en movimiento. Materials Design for Bootstrap de Fez Vrasta funciona con Bootstrap 3, si lo utilizas con Bootstrap 2 no funcionará debido a la declaración de los elementos DOM y las clases CSS.

Descargamos y extraemos el contenido de bootstrap-material-design-master y copiamos los archivos bootstrap-material-design.css y ripples.css de la carpeta dist/css y los colocamos en el directorio css de nuestro proyecto. Luego copiamos los archivos material.js y ripples.js de la carpeta dist/js y los colocamos en el directorio js de nuestro proyecto. Tendremos lo siguiente:

c:\\wamp\www\deimos\css

bare_css

c:\\wamp\www\deimos\js

bare_js

Ahora tenemos los archivos necesarios para la integración. Vamos a incluir las líneas de código necesarias en nuestro archivo index.html para que Material design pueda utilizarse en nuestro proyecto.

Primero, colocamos los links hacia los archivos CSS en el <head> de nuestro archivo index.html:

<span class="pl-c"><!-- Material Design fonts --></span>
 <<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>//fonts.googleapis.com/css?family=Roboto:300,400,500,700<span class="pl-pds">"</span></span>>
 <<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>//fonts.googleapis.com/icon?family=Material+Icons<span class="pl-pds">"</span></span>>

 <span class="pl-c"><!-- Bootstrap Material Design --></span>
 <<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>css/bootstrap-material-design.css<span class="pl-pds">"</span></span>>
 <<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s"><span class="pl-pds">"</span>stylesheet<span class="pl-pds">"</span></span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>text/css<span class="pl-pds">"</span></span> <span class="pl-e">href</span>=<span class="pl-s"><span class="pl-pds">"</span>css/ripples.min.css<span class="pl-pds">"</span></span>>

He incluído los links a los archivos de tipografias para los iconos de Material design de Google Fonts. De forma que puedas utilizar Glyphicons en el proyecto.

Luego, incluiremos el link para los archivos Javascript justo después de las líneas de inclusión de jquery.js y bootstrap.js y antes de cerrar el tag body</body>:

<!-- Material Design for Bootstrap -->
<script src="js/material.js"></script>
<script src="js/ripples.min.js"></script>

Finalmente, inicializamos material ya que el mismo es un plugin de jQuery:

<script>
$.material.init();
</script>

Listo! Con estas líneas de código HTML hemos incorporado Material design a nuestro proyecto Bootstrap. Accedemos a nuestro proyecto vía navegador http://localhost/deimos. Por lo que nuestro index.html se vería así:

Bootstrap y Material design

Si no puedes ver el cambio, presiona Ctrl+F5 en tu navegador bajo windows o Command+R en tu navegador bajo Mac OX. Si aún no puedes ver el cambio, puede que tengas un error de implementación. Utiliza el developers tools que viene en Firefox o Chrome presionando F12 y en la “console” podrás ver el mensaje de error si alguno.

Para utilizar todos los elementos Material design en el proyecto puedes referirte a la documentación y código de ejemplo de cada elemento en el sitio de Material design for Bootstrap.

Bare_material_sample_code

Navega todos los elementos Material design pulsando el código de ejemplo (Cículo rojo en la imagen anterior) disponible para todos los elementos de la guía. Copia el código de la pantalla emergente “Modal box” y diviértete.

Recuerden… CODE IS POETRY!