Share
La scorsa settimana abbiamo dato un'occhiata a come creare un semplice kit di interfaccia utente in Photoshop come modo per accelerare il lavoro in alcuni dei vostri progetti di web design. Abbiamo ricevuto un sacco di richieste su come rendere funzionali gli elementi, quindi senza ulteriori ritardi, ecco il tutorial di follow-up che voi ragazzi avete richiesto!
Questo tutorial è basato sulla sessione di progettazione che abbiamo analizzato in questo post precedente (che include un file PSD gratuito), quindi se non lo hai verificato, vai avanti e fallo ora. Se vuoi saltare direttamente alla parte funzionale, va bene anche questo!
Inutile dire che praticamente qualsiasi cosa sul web può essere fatta in vari modi? quindi proveremo qualcosa di nuovo oggi mostrandovi due modi diversi per ottenere funzionalità con questo design. Il primo sarà con Tom Green
In questo metodo, Tom Green ti mostrerà come prendere gli elementi che abbiamo progettato in Photoshop e renderli elementi completamente funzionali in Fireworks e Catalyst. Lascerò che Tom lo prenda da qui:
In questo prossimo metodo, ti mostrerò come creare rapidamente il nostro stile usando jQuery Themeroller. Innanzitutto, vediamo perché:
Sono un grande fan del riciclaggio del mio codice? ma sono un fan ancora più grande di trovare strumenti di codifica che sono già stati creati per me da altri (di solito più esperto) programmatori informatici! In effetti, con così tanti strumenti pre-codificati, è quasi sciocco iniziare qualsiasi progetto come questo, a meno che tu non abbia davvero una buona ragione per perdere tempo.
Ora, possiamo discutere se è utile o meno per un web designer imparare a codificare da zero (e vorrei rispondere che è davvero molto importante sapere come funzionano tutte queste cose), ma questo è un caso in cui stiamo creando un semplice kit UI? quindi presumo che tu abbia una conoscenza HTML / CSS di base e che saprai come aprire questi tipi di file e modificarli in un editor di testo.
Come tale, ho intenzione di basare questa parte del tutorial su ThemeRoller - lo strumento di creazione dell'interfaccia utente jQuery ufficiale. Se non hai ancora utilizzato l'interfaccia utente di jQuery, va benissimo, ma lascia che ti spieghi perché vogliamo utilizzare questo anziché il grezzo HTML / CSS:
Inutile dire, ma useremo ThemeRoller come base? aggiungeremo i nostri ritocchi stilistici personalizzati una volta ottenuto un buon punto di partenza.
Quindi, da dove iniziare? Stiamo andando a colpire duramente il codice in un minuto, ma iniziamo dal sito ThemeRoller creando una skin che sia vicina al nostro stile. Le cose a cui vorremmo prestare attenzione sono:
ThemeRoller ci fornisce solo un numero limitato di valori che possiamo modificare frontalmente (colore di sfondo, colore del bordo, colore del testo, ecc.), Quindi ciò che vogliamo fare in questo passo iniziale è inserire i valori di base del colore dal nostro design.
Potresti voler usare i tuoi colori, ma quello che ho trovato è questo (fai clic sul link per vedere i miei valori in azione):
Da qui, abbiamo solo bisogno di scaricare il tema che abbiamo appena creato. Il "tema" è fondamentalmente solo un file CSS personalizzato (insieme a una manciata di immagini) che verrà utilizzato, insieme agli script di base di jQuery, per creare i nostri elementi dell'interfaccia utente personalizzati..
Puoi usare i tuoi valori di colore ovviamente, ma sentiti libero di prendere il download usando la demo da qui.
Quello che ottieni in sostanza questo: guarda la demo grezza. È una pagina HTML generica che è stata generata per visualizzare i widget che abbiamo appena creato? da qui puoi incorporarlo facilmente nei tuoi progetti.
In questo ultimo passo prenderemo la demo personalizzata che Themeroller ci ha fornito e spostiamola nella nostra pagina HTML. Questo è abbastanza semplice se hai qualche esperienza con HTML - inizieremo afferrando il codice HTML grezzo necessario per il tuo widget e inseriscilo in una nuova pagina HTML che include i riferimenti file appropriati (sotto) per usarli widget come ti pare. I file di cui hai bisogno per fare riferimento nella sezione HEAD del tuo documento HTML sono qui:
Ricorda che se stai posizionando tutti i file di Themeroller in un'altra cartella separata per regolare i riferimenti della cartella in modo appropriato. Nella nostra demo, la sezione di riferimento ha il seguente aspetto:
Ogni widget UI (es .: una fisarmonica o un cursore) ha due componenti che è necessario ricordare:
La parte HTML è piuttosto semplice: basta prenderla dal file HTML demo scaricato. Dovrai includere gli script di "attivazione" per ciascuno dei widget che vuoi usare anche se. Nel nostro caso, questo è il seguente:
Nota come ogni "widget" è attivato con solo un paio di linee di codice? non stiamo scrivendo nulla di questo (anche se i codificatori jQuery avanzati sono welcoem per), piuttosto, stiamo solo afferrando gli script che la demo ci ha fornito.
L'elenco sopra rappresenta solo i widget mostrati nella demo? L'interfaccia utente di jQuery include alcuni altri che non sono mostrati qui. Se volessimo aggiungere un altro widget, lo troveremmo semplicemente all'interno della cartella "development-bundle / demo" (dal download del tema) e afferreremo lo script e l'HTML corrispondenti da lì.
Ad esempio, l'HTML per una barra di avanzamento è simile al seguente:
E lo script di attivazione che aggiungeremmo agli altri script è simile al seguente:
Accentsconagua
// Progressbar $ ("# progressbar"). Progressbar (valore: 20); Infine, prendiamo questo per un giro in un design personalizzato veloce che ho montato insieme:
Whallah! Probabilmente non c'è nulla di sconvolgente in termini di design (è destinato a essere solo una semplice demo), ma ora abbiamo dimostrato con successo che possiamo creare rapidamente un set di elementi dell'interfaccia utente usando Themeroller e spostarli in una custom Pagina HTML in pochi rapidi passaggi.
Questo è solo il punto di partenza di dove potresti andare con questo? ovviamente, per fare in modo che questi elementi dell'interfaccia utente facciano effettivamente qualcosa come la memorizzazione dei dati o l'invio di un modulo web, è necessario integrare una codifica aggiuntiva (che puoi leggere su molti tutorial sul nostro sito gemello Nettuts). Ma ai fini di questo tutorial, abbiamo creato una skin rapida che possiamo utilizzare in una varietà di progetti diversi.
Vale anche la pena notare che se non sei soddisfatto al 100% della pelle così com'è ora, puoi andare anche oltre regolando il file .CSS del tema personalizzato a cui abbiamo fatto riferimento.
