En aquest post començarem fent un lloc amb Bootstrap, el framework de codi obert que ens facilita fer-ho responsiu i dotar-lo de certa interactivitat. Es tracta d'un templat bàsic generat automàticament per un complement de l'entorn de desenvolupament que recomanem abans i que cal modificar.
En el article anterior trobaràs les instruccions per instal·lar VS Codium, traduir la interfície d'usuari a l'espanyol i instal·lar el complement de Bootstrap.
Dues coses que has de tenir en compte:
- Les ordres que fem servir són dreceres de teclat, has de tipejar-les. El Copy/paste no funciona.
- El nostre gestor de continguts no em permet mostrar el codi HTML pel que he de fer servir captures de pantalla. Perquè tinguis accés al codi dels exemples els vaig pujar a GitHub.
Com clonar un repositori GitHub
El que separa els grans de la resta de nosaltres és la manera com reaccionen els problemes. A Richard Stallman no li agradava el driver de la seva impressora i com que no el van deixar canviar, va iniciar el moviment del programari lliure. A Linus Torvalds no li convencia cap de les plataformes per compartir codi i va crear la seva pròpia. Git.
A diferència dels sistemes de distribució de programari tradicionals en què l'única interacció permesa a l'usuari és la descàrrega, amb el Git es pot seguir l'evolució del projecte al llarg del temps. Altres persones poden clonar el repositori, fer modificacions i proposar-los als desenvolupadors del projecte original que les incorporin. En cas d'acceptar-les, els desenvolupadors ho poden fer fàcilment sense haver de descarregar i tornar a carregar els fitxers.
Hi ha diversos serveis basats en Git, jo vaig triar GitHub simplement perquè s'integra amb VS Codium.
Per poder descarregar els fitxers d'exemple al vostre ordinador només necessiteu instal·lar el paquet git seguint les instruccions de la vostra distribució per instal·lar paquets a la terminal.
Després escrius les ordres següents.
Jo prefereixo guardar els fitxers a la carpeta Documents per això canvio el directori amb
cd Documentos
Després clono els fitxers amb:
git clone https://github.com/dggonzalez1971/bootstrap.git
Et recordaré aquests passos en cadascun dels articles que resten ja que així aniràs actualitzant els fitxers d'exemple a mesura que els vagi pujant.
Per veure els fitxers només obre el navegador de fitxers i cerca la carpeta bootstrap.
Fent un lloc amb Bootstrap
En cas que prefereixis tipejar el codi manualment comencem creant una carpeta on guardarem el lloc. Pots posar-hi el nom que t'agradi.
Després seguim els passos següents:
- Anem a menú Arxiu.
- premem en Nou Fitxer de text.
- premem sobre Desa.
- Busquem la carpeta que creem i posem al fitxer el nom exemple1.html.
- premem en Desa.
De vegades és possible que la finestra de l'Explorador de fitxers quedi oculta per la de VSCodium.
Farem que l'extensió ens creï la plantilla bàsica. Per això tipem !b5-$
Això generarà el codi que trobareu a la carpeta d'exemples com ara exemple1.html
Veurem el següent:
Aquest és el codi generat per Bootstrap.
A aquest fitxer li farem alguns canvis. Trobareu les modificacions sota el nom exemple2.html
- A la línia 2 canviem l'idioma reemplaçant eng per és. Això indica als cercadors que l'idioma del lloc és l'espanyol.
- A la línia 6 canviem el text que està sota les etiquetes title. posem El meu primer lloc Bootstrap.
- A la línia 12 canviem el contingut entre les etiquetes h1 per Això és un lloc fet amb Bootstrap.
A continuació, farem unes modificacions importants. Aquestes modificacions tenen a veure amb:
- El desenvolupador del complement no pot seguir el ritme de les versions de Bootstrap i n'hi ha d'altres de més actuals.
- Hi ha moltes opcions de components bootstrap ia mi m'interessa una altra.
- Segons la documentació oficial, la crida a les llibreries Javascript han d'estar dins de les etiquetes body.
Per a l'exemple 2 modifiquem el contingut de la línia 7, esborrem la línia 8 i 9 i pugem el contingut restant per mantenir la compatibilitat a la numeració. Després cliquem al final de la línia 10 per crear una nova línia 11 i posar l'enllaç a les llibreries Javascript.
No et preocupis si no entens el codi. Explicaré la funció de cada línia en el proper article.