Agregar jQuery y Bootstrap para escribir una aplicación web receptiva y amigable para dispositivos móviles


En la Parte 1 de esta serie, configuramos un proyecto HTML 5 básico utilizando Netbeans como nuestro IDE, y también presentamos algunos elementos que se han agregado en esta nueva especificación del lenguaje.

En pocas palabras, puede pensar en jQuery como una biblioteca de Javascript multiplataforma y de navegador cruzado que puede simplificar enormemente las secuencias de comandos del lado del cliente en páginas HTML. Por otro lado, Bootstrap se puede describir como un marco completo que integra herramientas HTML, CSS y Javascript para crear páginas web receptivas y amigables para dispositivos móviles.

En este artículo le presentaremos jQuery y Bootstrap, dos utilidades invaluables para escribir código HTML 5 más fácilmente. Tanto jQuery como Bootstrap tienen licencia de MIT y Apache 2.0, que son compatibles con la GPL y, por lo tanto, son software gratuito.

Tenga en cuenta que los conceptos básicos de HTML, CSS y Javascript no se tratan en ningún artículo de esta serie. Si cree que necesita ponerse al día con estos temas antes de continuar, le recomiendo encarecidamente el tutorial de HTML 5 en W3Schools.

Incorporando jQuery y Bootstrap en nuestro proyecto

Para descargar jQuery, vaya al sitio web del proyecto en http://jquery.com y haga clic en el botón que muestra el aviso de la última versión estable.

En el momento de escribir este artículo, es v1.11.3 para compatibilidad total con el navegador (incluidas las versiones 6, 7 y 8 de Internet Explorer) o v2.1.4 si está seguro de que sus visitantes no usarán esas versiones de IE.

Iremos con esta segunda opción en esta guía. NO haga clic todavía en el enlace de descarga (la siguiente ilustración solo pretende indicar cuál es la opción correcta).

Notará que puede descargar una versión comprimida de .min.js o una versión de .js sin comprimir de jQuery. El primero está diseñado especialmente para sitios web y ayuda a reducir el tiempo de carga de las páginas (y, por lo tanto, Google clasificará mejor su sitio), mientras que el segundo está dirigido principalmente a codificadores con fines de desarrollo.

En aras de la brevedad y la facilidad de uso, descargaremos la versión comprimida (también conocida como minificada) a la carpeta de scripts dentro de la estructura de nuestro sitio.

Haga clic con el botón derecho en el enlace para la versión de producción comprimida y seleccione Guardar enlace como… y luego navegue hasta el directorio indicado (es posible que desee consultar la ruta indicada donde elegimos guardar nuestro proyecto en la Parte 1).

Finalmente, haga clic en Guardar en la parte inferior del cuadro de diálogo actual:

Ahora es el momento de agregar Bootstrap a nuestro proyecto. Vaya a http://getbootstrap.com y haga clic en Descargar Bootstrap. En la página siguiente, haga clic en la opción resaltada como se indica a continuación para descargar los componentes minificados, listos para usar, en un archivo zip:

Cuando se complete la descarga, vaya a su carpeta de Descargas, descomprima el archivo y copie los archivos resaltados en los directorios indicados dentro de su proyecto:

# cd ~/Downloads
# unzip -a bootstrap-3.3.5-dist.zip
# cd bootstrap-3.3.5-dist
# cp css/bootstrap.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts
# cp js/bootstrap.min.js /home/gabriel/NetBeansProjects/TecmintTest/public_html/scripts

Si ahora expande la estructura de su sitio en Netbeans, debería verse como sigue: