Ed eccoci qui di nuovo, con la sesta lezione del corso bootstrap! Che come ricordiamo sempre è un corso realizzato grazie ad una collaborazione nata tra Falco96 e WorldTecno. Questa sarà una lezione veramente piena di nozioni nuove, che si andranno ad aggiungere a tutte quelle che hai appreso nelle precedenti lezioni. Quindi non perdiamo altro tempo e iniziamo subito con questa nuova lezione!
Alert
Nelle precedenti lezioni avevamo già visto questo componente fra i tanti che il framework bootstrap mette a disposizione dello sviluppatore, e quindi ricordiamo che gli alert sono come messaggi/notifiche di diverso tipo, utili per segnalare differenti tipologie di avvisi, i quali possono essere una semplice conferma di un’operazione oppure un messaggio di errore di mancata compilazione di un campo di una form, ciò come avevamo già visto è realizzabile con la classe alert-success, per il primo esempio mentre invece per il secondo esempio, alert-warning.
In questo primo screen ti mostriamo nuovamente un esempio visuale di questo componente di bootstrap, e nel caso non ti ricordassi cosa sono gli alert… Eccoti anche un esempio di codice sorgente per implementare gli alert:
Fatto un breve ripasso… Ora vediamo di introdurre qualche novità sugli alert!
Alert link
La prima novità che andiamo ad aggiungere sono gli alert link, ulteriore classe di bootstrap che se usata nel tag <a> (e quindi negli ancor link del linguaggio HTML), permette di inserire un link all’interno di un alert, di qualsiasi tipo, e di rendere automaticamente la formattazione di un link uguale a quella di un alert, nel quale il link viene inserito. Quindi se per esempio l’alert è di tipo info, quindi di colore azzurro, il link assumerà il colore azzurro, come potrai notare anche nello screen qui di seguito:
Inoltre ecco qui un esempio di codice sorgente per implementare tutto ciò!
Alert dismissing
Come avrai potuto notare all’inizio di questa lezione, e nella lezione precedente in cui avevamo già introdotto come nuovo componente l’alert, questo componente una volta apparso all’interno di una pagina web o di una schermata di una qualche applicazione web, non sia ha la possibilità di chiuderlo, e quindi di farlo scomparire in qualche modo dallo schermo… Quindi neanche l’utente finale che poi andrà ad utilizzare la nostra applicazione o visiterà il nostro sito web, non potrà intervenire e chiudere gli avvisi che compariranno sulla pagina web in cui sta navigando, o nella schermata dell’applicazione in cui esso si ritroverà! Questa mancanza non è per niente da sotto valutare, in quanto rende meno funzionale ed efficiente il nostro prodotto finale, pagina web o applicazione che sia, con l’utente che ne farà uso… Ma niente panico ovviamente c’è una soluzione che bootstrap mette a disposizione per risolvere anche questo piccolo “gap”, attraverso l’utilizzo della classe alert-dismissing. Come puoi anche vedere nell’esempio qui di seguito:
Dallo screen infatti ti sarà possibile notare che una volta implementata anche questa ulteriore classe oltre a quella standard per gli alert(alert alert-[tipo di alert]), apparirà all’interno dell’avviso, una “x”,la quale non è altro, come vedremo anche dopo nello screen del codice sorgente, un bottone gestito dalla classe button, che permette di effettuare la chiusura dell’ alert, risolvendo di fatto il problema riscontrato in precedenza! Eccoti il codice sorgente:
Come potrai notare il codice è veramente molto semplice da comprendere, in quanto non è molto diverso da quello già visto per il semplice alert standard… Ma in ogni caso, per qualsiasi dubbio a riguardo, ti consigliamo di guardare la live che troverai in fondo a questo post.
Alert container
Infine come ultima novità sugli alert andiamo a vedere gli alert container, e quindi un altro possibile utilizzo degli alert standard… L’alert container consente di usare un alert standard, e quindi il normale avviso che appare sullo schermo per notificare un qualcosa, come una pagina web vera e propria! Soluzione che può essere necessaria in alcune situazioni, anche se veramente molto rare( per esempio potrebbe essere un valida soluzione per implementare la pagina di errore 404 dei siti web). Comunque si eccoti un esempio di codice sorgente per imparare ad utilizzare gli alert container:
Da questo screen possiamo notare che per usare gli alert container viene utilizzata la classe mb-8, realizzata appositamente per questo scopo dagli sviluppatori di bootstrap. Una volta richiamata questa classe su un elemento HTML, come nel caso del nostro esempio che è richiamata all’interno di un paragrafo(<p>), possiamo poi andare ad inserire dentro l’elemento che ha richiamato la classe tutti gli elementi HTML che vogliamo, quali form, altro testo, pulsanti e molto altro ancora. Proprio come se l’alert fosse una vera e propria pagina web.
Buttons
Ora però spostiamoci su un altro argomento… E torniamo a parlare di buttons(pulsanti), a cui abbiamo già dedicato una lezione molto esaustiva sia in termini pratici che teorici, ma ciò che andiamo a vedere ora serve a completare l’intero quadro sui pulsanti e il loro utilizzo con bootstrap! Vediamo quindi le nozioni finali e aggiuntive su di essi.
Vertical buttons
Come prima novità, vogliamo mostrarti una classe dal nome btn-group-vertical, la quale permette di raggruppare tutti i pulsanti che vogliamo formando un unico gruppo che sarà integrato in un contenitore verticale attraverso un <div>. Eccoti il codice sorgente che ti aiuterà a comprendere meglio come implementare ciò:
Qui di seguito invece ti mostriamo con ulteriore screen come si presenteranno questi pulsanti una volta che il browser ha tradotto l’HTML:
Button sizing
Proseguiamo sempre con i buttons, andando a vedere in aggiunta come gestire la grandezza dei pulsanti attraverso le classi btn-bg o btn-sm. Queste classi funzionano all’interno di tutti i campi i cui pulsanti vengono supportati, come ad esempio nei link, nel submit dei form, o nei semplici pulsanti gestiti con il tag <button> dell’HTML. Eccoti quindi un esempio di codice sorgente per l’implementazione:
Ed eccoti qui anche il risultato finale:
Buttons toolbar
Chiudiamo l’argomento sui buttons, andando a vedere come sia possibile, con bootstrap, creare una barra degli strumenti(che in gergo tecnico informatico è detta “toolbar”), facendo sempre uso dei pulsanti. Eccoti quindi un codice sorgente di esempio:
Nella prima riga si può notare che prima viene creata la toolbar, poi si inserisce all’interno del tag <div> ogni gruppo di elementi della toolbar, con le classi btn-group mr-2. Ecco quindi come si presenta il tutto all’interno del nostro browser:
Wells
Dopo aver ridefinito ulteriormente due componenti già visti all’inizio di questo corso, passiamo invece a definire un nuovo componente di bootstrap, il wells. Questo componente è un pò particolare da spiegare in quanto esso è quasi simile ad un contenitore, con però caratteristiche notevoli, tanto che con esso si possono quasi definire nuovi componenti personalizzati su propria esigenza. Al suo interno inoltre è possibile inserire tante altre componenti già viste nelle lezioni precedenti, ecco un esempio visuale di tale componente:
Come potrai notare, quanto detto qualche riga sopra è pura verità, infatti con l’implementazione di default di questo componente, ci ritroveremo con uno sfondo bianco, scritte nere, ecc.., insomma quasi come un semplice div con qualche proprietà CSS applicatogli. Se noi vogliamo andare a modificare tale componente lo possiamo fare mediante un nostro CSS!
Thumbnails
Proseguiamo, con un altro nuovo componente, i Thumbnails, il quale permette di inserire all’interno della nostra pagina web, delle “miniature” (sotto forma di riquadri), con una determinate caratteristiche, nelle quali possono essere contenute ed inserite delle immagini, dei video, testo e altro ancora. Eccoti un esempio del codice sorgente per poterli implementare:
screen 15
Questo componente è molto utile in quanto permette allo sviluppatore di potere integrare all’interno di un sito web o di un’applicazione web delle sezioni in cui attraverso i thumbnails, è possibile per esempio implementare i punti di forza dei nostri servizi offerti oppure i punti di forza dei servizi offerti da un’azienda per cui si sta sviluppando tale sito o applicazione web.
Badges
Come argomento finale di questa lezione, andiamo a conoscere un ulteriore nuovo componente, anch’esso molto interessante, il quale se usato intelligentemente insieme al Javascript(o AJAX), oppure con PHP, permette di realizzare ad esempio una specie di contatore per le notifiche di una applicazione web, o un gestore messaggi all’interno di un area amministrativa di un sito web, permettendo quindi di tenere il conteggio del numero dei messaggi da leggere, il numero di notifiche arrivate oppure perché no, anche semplicemente il numero di visualizzazioni di un blog. Ovviamente ripetiamo che questo elemento può permettere di fare questo, a patto che dietro all’elemento grafico che permette all’utente l’interazione tramite mouse o touchscreen, ci sia un algoritmo fatto in PHP, oppure uno script realizzato ad esempio con il linguaggio AJAX(linguaggio web molto simile a Javascript ma con funzioni e caratteristiche un pò più avanzate), che effettua attraverso dei meccanismi appositi di calcolo il conteggio dei delle varie notifiche o quello delle visite ricevute sul blog. Eccoti un esempio di codice sorgente per la sua implementazione:
Screen 16
Esercizi
Prima di lasciarvi vogliamo proporvi alcuni esercizi da fare, per darvi così un modo per poter apprendere più velocemente le nuove nozione trattate in questa lezione.
- Realizzare un form dove andate ad inserire un numero. Se l’utente ha inserito il numero 4, dovrà comparire un alert, di tipo dismissing, e di tipo success, dicendo che il numero è corretto. Altrimenti per qualsiasi altro numero, dovrà comparire un alert, sempre di tipo dismissing, di tipo warning, che avvisa l’utente che il numero inserito è errato.
- Realizzare una lista di 4 pulsanti posizionati in verticale, due di grandi dimensioni, uno di dimensione standard e uno di piccole dimensioni.
- Realizzare tre Thumbnails con dimensioni differenti, contenenti 3 immagini diverse, scelte a piacere.
In conclusione
Arrivati qui, diciamo che per questa nuova lezione di oggi è veramente tutto! Per completare davvero l’apprendimento delle nuove nozioni viste in questa lezione, ti consigliamo di guardarti la da noi live realizzata, e cioè da Falco96 e WorldTecno, che ti lasceremo qui sotto all’articolo! Detto questo ci auguriamo che anche quest’altra lezione sia di tuo gradimento e ti auguriamo una buona lettura e visione del video, inoltre se il video e la lezione ti sono davvero piaciuto lasciaci un bel like per il buon lavoro che stiamo facendo per te! E se ancora non sei iscritto al nostro canale di YouTube, RaffaTechPro e Falco96Tecnology ti consigliamo subito di farlo! Con questo è davvero tutto! Ti aspettiamo alla prossima lezione… Ciao! 😉
