Accentsconagua
Questo è il contenuto principale bene
Questo è un breve paragrafo per evidenziare dove andrà il contenuto generale.
Share
Il web design è una professione in evoluzione. Mentre un occhio acuto per il colore, la tipografia e il layout saranno sempre importanti, queste abilità vengono superate dalla necessità di comprendere le motivazioni dell'utente. Non è sufficiente costruire un sito e attendere che il traffico entri in funzione: i siti devono aiutare gli utenti a raggiungere i propri obiettivi, con un minimo di attriti cognitivi. Bootstrap può aiutare i professionisti del web a definire questi obiettivi e creare anche un'esperienza killer.
non stiamo facendo pagine, stiamo facendo film
Mi piace dire che non stiamo facendo pagine, stiamo facendo film. Gli utenti si aspettano che i siti vengano caricati rapidamente, forniscono contenuti accattivanti e un'interattività intelligente. Proprio come i film dipendono da tagli rapidi, illuminazione e umore per attirare gli utenti, i siti Web si basano su transizioni, interattività e tempismo. Questi dettagli spesso si perdono durante la fase di progettazione o, peggio, non vengono mai considerati. Mentre una transizione che richiede 0,5 secondi quando dovrebbe richiedere 0,25 secondi di solito non affonderà un'applicazione, è questo livello di dettaglio che separa il bene dal grande.
Vi mostrerò come Bootstrap può sostituire i wirefram statici e portare questi dettagli in primo piano prima e con meno sforzo.
Il primo passo è scaricare le ultime build stable Bootstrap e jQuery.
Sebbene jQuery sia ospitato da un certo numero di CDN, preferisco includere tutti i file localmente, così posso lavorare con o senza accesso web. Vai avanti e imposta una struttura di directory come quella qui sotto, e copia i CSS Bootstrap non terminati, i CSS responsivi Bootstrap e i file Javascript. Modificare i nomi e le posizioni in base alle esigenze, ma l'utilizzo di questa struttura consente di sfruttare il mio modello HTML anche nel passaggio successivo.
Ora sarebbe un buon momento per creare un terzo foglio di stile, che chiamerò user.css. Questo file verrà utilizzato per sovrascrivere gli stili Bootstrap in base alle esigenze.
Questa è l'unica altra configurazione necessaria per iniziare a costruire un wireframe interattivo. Creare un file nella directory principale del progetto e denominarlo index.html. Dopo aver creato il file, copiare questo codice e salvare.
Wireframes interattivi di bootstrap Il tuo layout andrà qui.
Apri un browser web e trascina il file index.html salvato in esso. Se tutti gli include sono caricati correttamente, dovresti vedere qualcosa di simile allo screenshot qui sotto. Se non vedi la finestra di avviso, apri la Console o Web Inspector e verifica se un file non è stato caricato. Dopo aver risolto il problema, rimuovere o commentare la linea di avviso in $ (Document) .ready funzione nella parte inferiore della pagina e prepararsi a costruire wireframes Bootstrap.
Con tutti i file necessari, possiamo iniziare a eseguire i blocchi principali dei contenuti. La maggior parte dei siti (app) conterrà un'intestazione, una navigazione principale, un contenuto principale, una barra laterale e un piè di pagina. Sto volutamente mantenendo il layout semplice, per illustrare rapidamente la potenza del sistema di griglia Bootstrap.
L'unico markup strutturale sulla pagina fino ad ora è il nostro div con "contenitore" di classe.
Nota: Questo div è un blocco contenente richiesto per Bootstrap; noi costruiremo la nostra intera applicazione wireframe al suo interno.
Bootstrap richiede anche il nuovo doctype HTML e genera le sue regole di stile con le classi, anziché i nomi dei tag. Queste decisioni significano che possiamo utilizzare alcuni nuovi elementi HTML5: intestazione, navigazione, sezione, articolo, a parte e piè di pagina. Vale la pena ricordare che se si prevede di testare il layout in Internet Explorer, sarà necessario scaricare e includere Modernizr o lo Shim HTML5. Le versioni moderne di Firefox, Chrome e Safari supportano nativamente lo standard HTML5.
Bootstrap è costruito su una griglia di 12 colonne. Usa due classi, riga e campata per creare contenitori a livello di blocco. Applicando la classe di riga a un contenitore come un div o intestazione, si estende automaticamente su tutta la larghezza di 940 px. Aggiungendo contenitori con campata di classeN (N essendo un segnaposto per il numero di colonne), puoi facilmente creare pozzi di contenuto, barre laterali e altri blocchi di layout senza dover gestire i float o altre stranezze.
Per iniziare rapidamente, ho intenzione di creare un'intestazione di base, una barra di navigazione, un pozzo principale, un lato e un piè di pagina. Sostituisci "Il tuo layout andrà qui" con il seguente codice.
My Awesome App
Questo è il contenuto principale bene
Questo è un breve paragrafo per evidenziare dove andrà il contenuto generale.
Ho anche aggiunto alcune regole base a user.css, rendere più facile l'identificazione dei blocchi di contenuti. Se tutto è andato bene, dovresti vedere un numero di blocchi grigi con testo descrittivo nero all'interno.
/ * Regola di stile di base per contorni e elementi a livello di blocco dello spazio * / [class * = "span"] background: #eee; margin-bottom: 10px;
I layout fissi e fluidi sono in circolazione da molto tempo. I layout reattivi sono relativamente nuovi e combinano le parti migliori di entrambi. Offre agli sviluppatori strumenti per ottimizzare i loro progetti per più dispositivi (smartphone, tablet, schermi stretti e widescreen) senza dover mantenere una base di codice separata per ciascuno. Ridimensiona la finestra del tuo browser per vedere il foglio di stile reattivo di Bootstrap in azione e scopri l'incredibile capacità di scrivere una sola volta e testare i wireframes in un certo numero di ambienti.
I browser utilizzano i punti di interruzione CSS per decidere come eseguire il rendering di una pagina, in base alle misurazioni della larghezza minima e massima. I punti di interruzione in relazione alla larghezza del browser iniziano sempre con @media (argomento larghezza) e sono molto facili da leggere. Possono anche contenere un secondo argomento in un altro insieme di parentesi, che consente una grande flessibilità per più dispositivi.
Nell'esempio di codice riportato di seguito, ho creato diverse regole che definiscono i colori di sfondo per quattro punti di interruzione reattivi comuni Bootstrap, leggermente modificati per mostrare una transizione uniforme da un colore a quello successivo.
/ * Colori di sfondo di base per i punti di interruzione reattivi * / / * Larghezza massima 480px telefono orizzontale e in basso * / @media (larghezza massima: 480px) .container background: # f1ea81; .container: after content: "Max-width 480px landscape phone e down"; / * Min-width 481px e max-width 767px landscape phone to portrait tablet * / @media (min-width: 481px) e (max-width: 767px) .container background: # a7f7e5; .container: after content: "Min-width 481px e max-width 767px landscape phone to portrait tablet"; / * Min-width 768px e max-width 979px tavoletta verticale a landscape * / @media (min-width: 768px) e (max-width: 979px) .container background: # c4deff; .container: after content: "Min-width 768px e max-width 979px, portrait tablet to landscape"; / * Visualizzazione widescreen 980px min-width * / @media (min-width: 980px) e (max-width: 1199px) .container background: # fde3ff; .container: after content: "Min-width 980px, max-width 1199px, formato desktop"; / * Visualizzazione widescreen 1200px min-width * / @media (larghezza minima: 1200px) .container background: # ffc4c4; .container: after content: "Min-width 1200px, formato widescreen";
Abbiamo creato un layout completamente reattivo, ma ci mancano ancora le cose buone. Il resto di questo tutorial ti mostrerà come aggiungere interesse visivo attraverso il contenuto e l'interattività.
Ora che l'impalcatura è a posto, possiamo iniziare ad aggiungere contenuti. Sto deliberatamente mantenendo queste viste generiche caselle grigie con stili minimi che incoraggiano gli utenti beta a focalizzarsi direttamente sull'interazione, e non rimanere troppo attaccati allo stile visivo.
L'unità eroe è stata progettata per creare un invito all'azione frontale e centrale. Download di codice, nuove applicazioni o ultime notizie sono buoni candidati. Per i nostri scopi, lo userò per annunciare un importante aggiornamento del software. Sostituisci l'esistente h2 e p tag nel contenuto principale bene con il codice qui sotto e aggiornare il browser per vedere l'eroe in azione.
La versione 2.0 è qui!
Tutte le nuove funzionalità, molti miglioramenti
Un pacchetto più perfetto tu’Non è probabile che lo trovi
Il nostro team è stato impegnato lo scorso anno, rinnovando completamente il funzionamento interno della nostra applicazione. Caricamenti di pagina più veloci, ricerca migliore e integrazione mobile.
Scarica ora
L'unità eroica è un buon inizio, ma le persone vogliono vedere dove andranno il loro tempo e i loro soldi. Una galleria di immagini è un forte seguito ed è un gioco da implementare. Le immagini sono disposte usando lo stesso Spann griglia che definisce i blocchi di layout e può essere facilmente estesa per includere titoli, tag, didascalie o microdati. Per ora, useremo Placehold.it per generare tre caselle grigie sotto la nostra unità eroe.
Sono un grande sostenitore del markup semantico, quindi useremo l'HTML5 figura e figcaption tag per un maggiore contesto. Anche se nessuno dei tuoi utenti sta navigando con uno screen reader o un altro dispositivo di assistenza, il markup descrittivo è una best practice per UX e lo sviluppo front-end.
Aggiungi una lista non ordinata e alcune immagini all'interno del contenuto principale bene, sotto il tuo elemento eroe in questo modo:
Questa è una breve didascalia.
Questa è una breve didascalia.
Questa è una breve didascalia.
Un altro aggiornamento del browser dovrebbe produrre un layout simile a questo, se visualizzato widescreen.
L'unità eroica e le immagini aggiungono molto interesse visivo, ma evidenziano la nostra prossima sfida: i punti elenco puntati rappresentano un elemento di navigazione adeguato.
Bootstrap ha diversi stili di navigazione incorporati, quindi la sperimentazione è incoraggiata. Ho intenzione di evidenziare la navigazione a schede qui. Il nostro primo ordine del giorno è sostituire la lista di navigazione di base:
Quindi, rimuoviamo lo sfondo grigio dal nostro intestazione e nav elementi. Aggiungi le seguenti quattro righe alla fine del tuo user.css file.
header [class * = "span"], nav [class * = "span"] background: #fff;
Abbiamo anche bisogno di aggiornare bene il contenuto principale. Ho aggiunto una classe di tab-contenuti al sezione elemento e avvolto l'eroe e le immagini in a div con class = "tab-pane active" e id = "TAB1". Ho aggiunto tre ulteriori div elementi di seguito, con ID che corrispondono ai tag del link di navigazione. Questi tre blocchi sono stub da compilare in seguito, ma saranno utili per il test. Aggiorna il sezione markup e aggiorna il browser. Se tutto va bene, dovresti essere in grado di passare attraverso le schede e visualizzare il contenuto stubbed.
Le schede sono fantastiche, ma sono anche solo un inizio. Sebbene Internet diventi rapidamente segmentato e simile a un'applicazione, è comunque guidato da collegamenti da una risorsa all'altra. I collegamenti vengono utilizzati per agganciare le pagine, fornire un contesto aggiuntivo e, a volte, per ospitare funzioni secondarie. Tooltip e popover sono buoni esempi di funzioni secondarie; sono facilmente implementabili con attributi dati personalizzati.
Quali sono gli attributi dei dati? Per John Resig, che ha scritto su questi dispositivi nel lontano 2008:
Semplicemente, la specifica per gli attributi dei dati personalizzati afferma che qualsiasi attributo che inizia con "data-" sarà trattato come area di archiviazione per dati privati (privato nel senso che l'utente finale non può vederlo - non influisce sul layout o presentazione).
Ciò significa che possiamo aggiungere dati personalizzati ai nostri tag link e Bootstrap gestirà di conseguenza.
Supponiamo che la nostra galleria di immagini sia costituita da informazioni tecniche. Le descrizioni potrebbero includere terminologia non chiara per l'utente medio. Attiva i suggerimenti sostituendo l'HTML della galleria di immagini, iniziando dall'elenco non ordinato e aggiungendo un jQuery $ (Document) .ready funzione e funzione tooltip di Bootstrap nella parte inferiore della pagina.
Questa è una breve didascalia. Contiene un linguaggio tecnico come i termini specifici del dominio come HTML
Questa è una breve didascalia. Contiene un linguaggio tecnico come i termini specifici del dominio come i CSS
Questa è una breve didascalia. Contiene un linguaggio tecnico come i termini specifici del dominio come JS
// Aggiungi appena sopra il tag body di chiusura // Attiva i tooltip
Con l'HTML e Javascript in posizione, aggiornare il browser e scorrere i collegamenti della galleria per rivelare i tuoi suggerimenti.
Ora aggiungeremo la condivisione alla nostra galleria di immagini (almeno in un modo wireframe) con i popover. I popover vengono attivati includendo gli attributi dei dati nel markup e un altro snippet di JavaScript.
Innanzitutto, aggiungiamo un pulsante di condivisione a ciascuna delle didascalie delle immagini. Aggiungi il blocco di codice appena sotto il tag del paragrafo di chiusura in ciascuno figcaption.
cinguettio
Tumblr
Flickr
"data-title =" Condividi questa immagine "> Condividi
Potrebbe sembrare strano mettere ogni elemento su una riga, ma ho trovato che Bootstrap è piuttosto schizzinoso sul markup ben formato, ed è più facile individuare gli errori una riga alla volta. Dobbiamo scrivere alcune righe di JavaScript e i popover saranno pronti.
// Previene le azioni dei collegamenti predefiniti e il salto di pagina var links = $ ('a'); links.on ('click', function (e) e.preventDefault ();); // Attiva i popover var popovers = $ ('a.popover-link'); popovers.popover (); Questa volta abbiamo aggiunto una funzione di collegamenti generali per evitare che il nostro schermo salti quando gli utenti fanno clic sul pulsante Condividi. Senza dilungarsi troppo in dettagli specifici, ogni azione su una pagina web registra un evento, che qui catturiamo come argomento della funzione 'e'. Intercettando questo evento e sostituendolo con il nostro JavaScript personalizzato, la pagina rimane dove dovrebbe e il nostro popover appare come previsto.
Accidenti. Dopo tutto ciò, le finestre modali diventeranno una passeggiata. Bootstrap rende disponibili finestre modali aggiungendo un blocco di HTML nella parte superiore del contenitore e un pulsante o collegamento con un href che corrisponde all'ID della finestra modale. Innanzitutto, l'HTML modale.
L'unica altra cosa da fare è aggiungere il nostro grilletto. Dato che questa è un'applicazione, dovremmo supporre che ci sarà una sequenza di login. Ho modificato il intestazione per abbreviare l'area del banner e aggiungere il nostro pulsante Login vicino alla casella di ricerca. Cambia il seguente codice HTML e aggiungi il CSS alla fine del tuo user.css file.
My Awesome App
Accesso
/ * Casella di ricerca * / header header margin-top: 20px; larghezza: 70%; fluttuare: a sinistra; / * Pulsante di accesso * / header a float: right; margine: 20px 0 0 20px;
Aggiorna e fai clic sul pulsante Accedi. Dovresti essere ricompensato con un'animazione rapida e la finestra modale che presenta fronte e centro.
Questo wireframe interattivo sta procedendo bene. Abbiamo una navigazione che funziona, molti blocchi per aggiungere contenuto, interattività e un layout reattivo. Quello che non abbiamo è un modo per cercare le cose, anche in senso sperimentale dell'utente. Ancora una volta, Bootstrap ci ha coperto.
Gli utenti sono abituati a visualizzare la casella di ricerca in primo piano nell'angolo in alto a destra dei display del desktop e appena sotto il titolo nei display più stretti. Inizieremo rompendo il intestazione elemento in due blocchi e aggiungendo un singolo input al più piccolo:
My Awesome App
Aggiungeremo anche alcune righe di CSS al user.css file, per spingere la casella di ricerca fuori dalla parte superiore della pagina.
/ * Casella di ricerca * / header header margin-top: 20px; larghezza: 90%;
Scriverà anche una quantità leggermente maggiore di JavaScript per far funzionare correttamente il typeahead. Lo manterrò al minimo e spiegherò cosa sta facendo ogni script.
Immagino che alcuni di voi stiano pensando "Sono un web progettista, non uno sviluppatore. Punto giusto, ma dobbiamo almeno testare le acque JavaScript per sbloccare la piena potenza di Bootstrap. E inoltre: i clienti sono entusiasti quando una casella di input inizia a restituire risultati dalla prima lettera che digitano.
Aggiungi lo snippet di JavaScript qui sotto al tag script esistente e fai clic su Aggiorna. Se funziona correttamente, dovresti visualizzare un menu a discesa con i risultati suggeriti dopo aver digitato una o più lettere nella casella di ricerca.
var search = $ ('input # search'); $ (search) .typeahead (fonte: ['Dave Mustaine', 'Tom Morello', 'Jim Root', 'Kirk Hammett', 'Joe Perry', 'Jimi Hendrix', 'Eric Clapton', 'Billy Duffy' , "Johnny Hickman", "Eddie Van Halen", "Dimebag Darrell", "Noel Gallagher", articoli: 5); Ok, ecco cosa sta facendo il codice. Il var search = $ ('input # search') dice a jQuery di memorizzare un riferimento alla casella di ricerca nella variabile denominata ricerca. Quindi chiamiamo, o invochiamo, la funzione jQuery sulla nostra variabile di ricerca, e chiamiamo anche il metodo typeahead Bootstrap. All'interno della parentesi del typeahead, noterete una parentesi ondulata di apertura e chiusura . Queste parentesi sono utilizzate per creare un oggetto JavaScript e memorizzare alcune informazioni sulla nostra casella di ricerca.
La prima informazione è la fonte array. Nel modo più semplice, un array è un elenco ordinato di cose. Ecco una lista di chitarristi. Di conseguenza, ogni chitarrista aggiunto all'array sarà disponibile come input di ricerca. La seconda parte dell'oggetto, articoli: 5 indica alla casella di ricerca il numero massimo di risultati da mostrare.
Queste sono solo due delle diverse opzioni disponibili. Vi incoraggio a consultare la documentazione typeahead Bootstrap e sperimentare con diverse configurazioni. La schermata finale di questo passaggio dovrebbe essere simile a questa:
Bootstrap è diventato un punto fermo nel mio flusso di lavoro front-end. Mi permette di testare quando le iterazioni sono relativamente indolori e provare diversi approcci contemporaneamente. Queste scoperte aiutano a guidare le decisioni di progettazione finale e aiutano a evitare modifiche dispendiose in termini di tempo durante il ciclo di sviluppo completo. Trattando i wireframe come una parte fondamentale dell'esperienza utente, sono in grado di creare strumenti più naturali e più gratificanti.
Ho appena scalfito la superficie di Bootstrap e ciò che è possibile usando il suo kit di parti. I wireframe sono un ottimo punto di partenza per apprendere i dettagli: sono pensati per essere lo-fi, i primi modelli di test delle applicazioni complete a venire. Clienti e colleghi possono testare le nostre ipotesi e aiutarci a perfezionare rapidamente, con il minimo dispendio di tempo.
Spero che questo tutorial ti sia piaciuto, grazie per la lettura!
