Interfacce utente Bootstrap

Le interfacce utente sono una delle parti più importanti delle applicazioni, poiché è il modo in cui gli utenti interagiranno con le nostre creazioni, ma oltre a ciò, una buona interfaccia rende positiva l'esperienza con la nostra applicazione.D'altra parte, un'interfaccia dubbia significa che una buona applicazione non può più essere utilizzata.
Bootstrap Non ci fornisce interfacce costruite, è qualcosa che dobbiamo progettare noi stessi, tuttavia ci fornisce i componenti per poterli costruire e sebbene la maggior parte dei suoi componenti sia destinata alla progettazione di applicazioni web, in realtà ha altri componenti per migliorare l'esperienza di Username.
Questi componenti sono basati su JavaScript sì jQuery, quindi richiederemo che quest'ultima libreria sia in grado di utilizzare questi elementi che abbiamo menzionato, tuttavia una volta che vedremo alcuni dei risultati giustificheremo questa inclusione.
Come abbiamo indicato nell'introduzione, è necessario utilizzare jQuery Per utilizzare questi componenti, ecco perché la prima cosa che andremo a definire è come dovrebbe essere la nostra etichetta testa di tutti gli esempi che vedremo. Vediamone il codice:

Prima di tutto includiamo il bootstrap.css nella sua versione ridotta e poi il tema.css, finora tutto è stato il solito ma poi dobbiamo includere jQuery e dobbiamo anche includere bootstrap.js che è il modo in cui questo framework ci darà l'opportunità di incorporare i componenti per le nostre interfacce.
Queste inclusioni possono essere fatte come vediamo nel codice da una cartella sulla nostra macchina dove memorizziamo il progetto, oppure possiamo anche usare un CDN, come vediamo nel seguente pezzo di codice:

Qualsiasi opzione che usiamo va bene, l'importante è rispettare l'ordine in cui includiamo le librerie, altrimenti i nostri componenti non funzioneranno come vogliamo.
Una buona interfaccia dovrebbe sempre essere di aiuto all'utente, dovrebbe sempre mostrargli dove andare e per cosa funzionano i suoi diversi componenti, in questo modo è intuitiva ed evita congetture da parte dell'utente quando prova pulsanti e menu per trovare qualcosa. .
Descrizione comandoUno strumento che ci permette di evitare questo è il Descrizione comando, che non sono altro che piccole finestre pop-up che ci aiutano a spiegare sezioni della nostra applicazione, sono anche conosciute come caselle di aiuto, l'idea è che in queste piccole caselle aggiungiamo piccole frasi che danno significato all'azione che possiamo eseguire nella nostra interfaccia.
Vediamo un piccolo codice in cui dimostriamo come costruire un tooltip con l'aiuto di Bootstrap:

 Esempio di descrizione comando Salva

Nel nostro codice abbiamo inserito le librerie citate e poi nell'etichetta sceneggiatura usiamo l'evento documento.pronto per creare il nostro descrizione comando che si applicherà a tutto ciò che ha la classe strumento1, questo nome di classe può essere personalizzato da chiunque desideriamo e inoltre aggiungiamo come opzione che ha un layout a destra, ovvero il nostro aiuto verrà visualizzato sul lato destro. Quindi creiamo uno stile generale per il corpo in modo che il nostro contenuto sia più visibile sullo schermo a scopo dimostrativo.
Finalmente dentro il corpo creiamo un elemento pulsante, ha un attributo chiamato data-toggle e indichiamo che sarà a descrizione comando dove nell'attributo titolo inseriamo il testo che dovrebbe mostrare la nostra casella di aiuto e, naturalmente, nell'attributo classe dobbiamo includere strumento1 che era la classe che abbiamo definito all'inizio. Una volta che tutto è a posto, quando passiamo il mouse sul nostro pulsante, possiamo visualizzare il tooltip creato, che una volta eseguito nel nostro browser dovrebbe assomigliare a questo:

Come possiamo vedere, questo componente è abbastanza utile poiché ci dà l'opportunità di spiegare all'utente attraverso le caselle di aiuto come funzionano o per cosa vengono utilizzati alcuni elementi nella nostra interfaccia.
C'è un altro componente molto importante nell'interfaccia utente ed è il fisarmonica, Lo scopo di questo elemento è quello di poter salvare il testo in un componente della nostra applicazione, con questo otteniamo una prima impressione sia dell'ordine che della pulizia della nostra interfaccia, dove l'utente quando fa clic su di esso, viene visualizzato il contenuto.
Questo è importante perché un'altra qualità di cui ha bisogno una buona interfaccia utente è la pulizia, poiché un'interfaccia pulita significa che l'utente non si sente stordito, e quindi sarà più piacevole utilizzarla.
La costituzione della fisarmonica è semplice, in questo caso non abbiamo bisogno di costruire uno script in quanto tale, dobbiamo solo creare una struttura di div che ci permettono di indicare che sono del tipo pannello, il titolo della nostra fisarmonica sarà un div del tipo intestazione del pannello e il nostro contenuto sarà un altro div del tipo contenuto del pannello, che dobbiamo ripetere per la quantità di elementi che vogliamo mostrare.
Vediamo nell'esempio seguente dove creiamo una fisarmonica a due elementi:

 Esempio di fisarmonica
Primo elemento
Questo è il primo elemento della nostra fisarmonica

Secondo elemento
Questo è il contenuto del nostro secondo elemento della fisarmonica

La cosa più importante per far funzionare la fisarmonica dopo la struttura sono gli identificatori, se guardiamo il titolo della fisarmonica abbiamo un'ancora e questo è diretto nell'esempio a articolo1 sì elemento2 dove ciascuna di queste ancore corrisponde all'identificatore del contenuto, allora vediamo come il blocco di contenuto di ognuna ha as andare queste due parole, il che significa che quando clicchiamo sui titoli vengono visualizzati i contenuti. Vediamo come appare nel nostro browser quando eseguiamo il nostro esempio:

INGRANDIRE

Come possiamo vedere, element1 mostra il suo contenuto senza problemi mentre element2 non mostra alcuna informazione, se ci clicchiamo sopra possiamo vedere come viene nascosto il contenuto di element1 e viene visualizzato il contenuto di element2:

INGRANDIRE

Infine, un altro dei grandi componenti per le interfacce utente sono i immagini modaliQuesti sono elementi che vengono richiamati quando si fa clic su un pulsante o un'ancora e la loro funzionalità è quella di mostrarci una sorta di finestra pop-up.
Questa finestra è molto utile perché ci permette di visualizzare del testo che, a causa della sua lunghezza, non è pratico in a descrizione comando, o forse abbiamo bisogno che l'utente inserisca alcune informazioni e non vogliamo inviarle a un'altra pagina. Questo tipo di componente ci aiuta a mantenere la pulizia della nostra applicazione, ma ci aiuta anche a costringere l'utente a prestare attenzione a qualcosa che può essere molto importante.
Naturalmente, qui devono valere le regole del buon senso, poiché sebbene sia possibile per un modale aumentare un altro modale, questo è di cattivo gusto e danneggia la navigazione dell'utente, anche se dobbiamo incorporare più di quattro campi in un modulo è meglio farlo in una nuova pagina e non in modo modale per citare alcuni esempi. Vediamo nel codice seguente come possiamo creare un modale:

 Grafici modali×
Una volta passato alla fase successiva, tutte le tue azioni saranno definitive.

Non posso annullare le tue risposte
Esci Continua

In questo caso il modale è configurato nel documento.pronto per essere visualizzato direttamente, questo tipo di implementazione è ampiamente utilizzato per dare avvisi prima che l'utente continui. Quindi il nostro modale è composto da tre parti; parte superiore (intestazione), corpo (corpo) e piè di pagina (piè di pagina).
Normalmente nel intestazione C'è un titolo con una taglia che risalta per indicare il motivo del modale, nel corpo la spiegazione o il contenuto come un modulo o un messaggio, e nel piè di pagina pulsanti di azione come continua o chiudi. Quindi vediamo come appare la nostra finestra modale quando la eseguiamo nel browser:

Questo componente è abbastanza semplice da implementare e conferisce alla nostra applicazione uno stile professionale, tuttavia è importante sapere come utilizzare la nostra logica per posizionarlo in un luogo che non interrompa l'armonia dell'applicazione.
Con questo concludiamo questo tutorial, dove abbiamo effettivamente sviluppato tre grandi componenti che ci aiutano a creare interfacce utente per ottenere una migliore organizzazione e comprensione delle azioni nella nostra applicazione, migliorando così l'esperienza di navigazione e l'utilizzo di essa.