Com escriure una aplicació per a mòbils amb JQuery i Bootstrap
A la part 1 d'aquesta sèrie, vam configurar un projecte HTML 5 bàsic utilitzant Netbeans com a IDE, i també vam presentar alguns elements que s'han afegit en aquesta nova especificació del llenguatge.
[També us pot agradar: 27 millors IDE per a programació C/C++ o editors de codi font a Linux]
En poques paraules, podeu pensar en jQuery com una biblioteca de Javascript multinavegador i multiplataforma que pot simplificar molt el script del costat del client a les pàgines HTML. D'altra banda, Bootstrap es pot descriure com un marc complet que integra eines HTML, CSS i Javascript per crear pàgines web adaptades per a mòbils i responsives.
En aquest article, us presentarem jQuery i Bootstrap, dues utilitats inestimables per escriure codi HTML 5 amb més facilitat. Tant jQuery com Bootstrap tenen llicències sota les llicències MIT i Apache 2.0, que són compatibles amb la GPL i, per tant, són programari lliure.
Tingueu en compte que els conceptes bàsics d'HTML, CSS i Javascript no es tracten en cap article d'aquesta sèrie. Si creieu que necessiteu posar-vos al dia amb aquests temes abans de continuar, us recomano molt el tutorial d'HTML 5 a W3Schools.
Incorporació de jQuery i Bootstrap al nostre projecte
Per descarregar jQuery, aneu al lloc web del projecte a http://jquery.com i feu clic al botó que mostra l'avís de la darrera versió estable.
Anirem amb aquesta segona opció en aquesta guia. NO feu clic a l'enllaç de descàrrega encara. Notareu que podeu baixar una versió .min.js comprimida o una versió .js sense comprimir de jQuery.
El primer està pensat especialment per a llocs web i ajuda a reduir el temps de càrrega de les pàgines (i, per tant, Google classificarà millor el vostre lloc), mentre que el segon s'adreça principalment als programadors amb finalitats de desenvolupament.
Per a la brevetat i la facilitat d'ús, baixarem la versió comprimida (també coneguda com a minificada) a la carpeta de scripts dins de l'estructura del nostre lloc.
$ cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/ $ wget https://code.jquery.com/jquery-3.6.0.min.js
Ara és el moment d'afegir Bootstrap al nostre projecte. Aneu a http://getbootstrap.com i feu clic a Descarrega Bootstrap. A la pàgina següent, feu clic a l'opció destacada tal com s'indica a continuació per descarregar els components minificats, preparats per utilitzar-los, en un fitxer zip:
Quan finalitzi la descàrrega, aneu a la vostra carpeta de descàrregues, descomprimiu el fitxer i copieu els fitxers destacats als directoris indicats dins del vostre projecte:
# cd ~/Downloads # unzip -a bootstrap-5.1.3-dist.zip # cd bootstrap-5.1.3-dist/
Ara copieu els fitxers CSS i JS a les carpetes respectives de l'estructura del projecte.
# cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles # cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts
Si ara amplieu l'estructura del vostre lloc a Netbeans, hauria de tenir el següent aspecte:
Afegir referències
Segur que sembla bé, però encara no hem dit al nostre fitxer index.html que utilitzi cap d'aquests fitxers. Per simplificar, substituirem primer el contingut d'aquest fitxer per un fitxer html barebones:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery and Bootstrap</title> </head> <body> <!-- // Your code will appear here. --> </body> </html>
Aleshores, només cal que arrossegueu i deixeu anar cada fitxer des de la secció del navegador del projecte al codi, dins de les etiquetes , com podeu veure a la pantalla següent. Assegureu-vos que la referència a jQuery aparegui abans de la referència a Bootstrap perquè la segona depèn de la primera:
Això és tot: heu afegit les referències tant a jQuery com a Bootstrap, i ara podeu començar a escriure codi.
Escrivint el vostre primer codi responsiu
Ara afegim una barra de navegació i la col·loquem a la part superior de la nostra pàgina. No dubteu a incloure entre 4 i 5 enllaços amb text simulat i no l'enllaceu a cap document de moment; només heu d'inserir el fragment de codi següent dins del cos del document.
No oblideu dedicar-vos una estona a familiaritzar-vos amb la funció d'emplenament automàtic de Netbeans, que us mostrarà les classes disponibles per Bootstrap a mesura que comenceu a escriure.
Al cor del fragment de codi següent hi ha la classe de contenidor Bootstrap, que s'utilitza per col·locar contingut dins d'un contenidor horitzontal que canviarà la mida automàticament en funció de la mida de la pantalla on es visualitzi. No menys important és la classe contenidor-fluid, que garantirà que el contingut dins ocupi tota l'amplada de la pantalla.
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Una altra característica distintiva de Bootstrap és que elimina la necessitat de taules en codi HTML. En lloc d'això, utilitza un sistema de quadrícula per dissenyar el contingut i fa que es vegi correctament tant en dispositius grans com petits (des de telèfons fins a pantalles grans d'escriptori o portàtils).
Al sistema de quadrícula de Bootstrap, la disposició de la pantalla es divideix en 12 columnes:
Una configuració típica consisteix a utilitzar el disseny de 12 columnes dividit en 3 grups de 4 columnes cadascun, de la següent manera:
Per indicar aquest fet en codi, i per tal que es mostri així començant en dispositius de mida mitjana (com ara ordinadors portàtils) i superiors, afegiu el codi següent sota l'etiqueta de tancament :
...
</nav>
<div class="row">
<div class="col-md-4">This is the text in GROUP 1</div>
<div class="col-md-4">This is the text in GROUP 2</div>
<div class="col-md-4">This is the text in GROUP 3</div>
</div>
</div> <!--Closing tag of the container class -->
Probablement haureu d'haver notat que les classes de columnes de la quadrícula Bootstrap indiquen el disseny inicial per a una mida de dispositiu específica i superior, ja que md en aquest exemple significa mitjà (que també cobreix dispositius lg o grans).
Per als dispositius més petits (sm i xs), els divs de contingut s'apilen i apareixen un a sobre de l'altre.
A la següent captura de pantalla, podeu veure com hauria de ser la vostra pàgina ara mateix. Tingueu en compte que podeu canviar la mida de la finestra del vostre navegador per simular diferents mides de pantalla després d'iniciar el projecte mitjançant el botó Executar el projecte, tal com hem après a la part 1.
Resum
Felicitats! Ja heu d'haver escrit una pàgina senzilla, però funcional i sensible. No oblideu consultar el lloc web de Bootstrap per familiaritzar-vos amb la funcionalitat gairebé il·limitada d'aquest marc.
Com sempre, si teniu alguna pregunta o comentari, no dubteu a posar-vos en contacte amb nosaltres mitjançant el següent formulari.