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

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.

 Crear sitios web adaptables para dispositivos móviles  Crear sitios web adaptables para dispositivos móviles Crear sitios web adaptables para dispositivos móviles-Parte 2

En pocas palabras, puede pensar en jQuery. como una biblioteca de Javascript entre navegadores y plataformas que puede simplificar enormemente las secuencias de comandos del lado del cliente en HTML. páginas. 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 con mayor facilidad. 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.

Incorporación de 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.

freestar.config.enabled_slots.push

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

Seguiremos 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).

 Descargar JQuery Descargar JQuery Descargar JQuery

Notará que puede descargar una versión .min.js comprimida o una versión .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 de 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. .

Por último, haga clic en Guardar. en la parte inferior del cuadro de diálogo actual:

 Guardar jQuery  Guardar jQuery Guardar jQuery

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:

Descargar Bootstrap  Descargar Bootstrap Descargar Bootstrap

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

# cd ~/Descargas # descomprimir-un bootstrap-3.3.5-dist.zip # cd bootstrap-3.3.5-dist  Install Bootstrap  Instalar Bootstrap Instalar Bootstrap # 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/gabrie l/NetBeansProjects/TecmintTest/public_html/scripts

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