Come migliorare al CSS, progettare e programmare UI?

Question

Ho una certa familiarità con i CSS e ho usato un bel po 'di javascript e jquery anche poca esperienza di progettazione del layout e lavoro a stretto contatto con Photoshop. Ma, in qualche modo, non mi sento più sicuro di quando sto programmando con il database o il lato C# e affronterò molti problemi quando sto lavorando con la progettazione dell'interfaccia utente e la disposizione degli elementi nel modo che voglio, ad es. Come dire un file .psd che i designer ti danno ... e vuoi che la tua pagina appaia esattamente così ..

Quindi so che devo solo mettermi a fare di più e imparare lungo la strada. Ma qualcuno ha dei buoni consigli o suggerimenti per migliorare la programmazione dell'interfaccia utente ... Se ci sono alcuni siti web con video e tutorial o qualche buon libro dovrei fare riferimento a migliorare ... Grazie mille per il tuo aiuto ..

Answer 1

Ho installato firebug 2 anni fa e mi sono ritrovato a passare più tempo a leggere il codice di altre persone - se vedo un sito che mi piace o una tecnica che voglio usare, lo faccio semplicemente firebug - è un po 'come un musicista lettura di spartiti e immaginazione di come suoni

Ho trovato che rispondere a domande su questo sito mi ha aiutato molto anche a voi - si arriva a conoscere esattamente ciò che si conosce e si diventa più consapevoli delle aree in cui è necessario migliorare

Penso che sia molto importante sapere come funziona il box box e come farlo funzionare in tutti i browser: ci sono alcune semplici regole fondamentali che, se obbedite, ti aiutano a garantire che il tuo test x-broswer sia privo di dolore, sapendo come aggiungere padding o margine a qualcosa senza rompere il tuo layout ti permette di essere precisi con i tuoi disegni - ho usato per lasciare 20 pixel di spazio orizzontale extra nei miei contenitori come un modo per far sì che le mie colonne non cadessero mai dal bordo di una pagina, ma ora so come il box-model opere, posso usare l'esatto larghezze, altezze, imbottitura e il margine che sono dettagliate nella mock-up che mi sono dato

io personalmente consiglio di utilizzare un quadro foglio di stile semantico - suggerisco Blueprint semantica (anche se YUI e Anche i 960 sono fantastici) - di fatto, passare a un framework CSS è forse una delle modifiche più importanti apportate al mio merluzzo ing stile l'anno scorso e mi ha aiutato a capire che quasi tutti i problemi x-browser che ho avuto erano facili da risolvere senza troppi problemi

Se non è stato già fatto, aggiungere "CSS" e "HTML" all'elenco "Tag interessanti" in StackOverflow e leggi il più possibile. Rispondi alle domande, abbassa i voti sul mento, assapora i voti positivi e continua a cercare di aiutare gli altri con i loro problemi

Una cosa che molti dimenticano è questa: Il CSS è in realtà un linguaggio veramente complesso. C'è molto di più in esso che incontra l'occhio ed è molto difficile da padroneggiare - just.keep.fighting.the.gight.fight

Answer 2

Puoi imparare facendo se sempre ti chiedi se puoi fare una cosa specifica in un modo migliore e in caso di dubbio guarda questa cosa usando Google.

Tuttavia, troverai che i libri ti offrono un quadro più completo dell'intero processo e ti insegnano molto che i singoli post del blog non possono insegnarti. Internet è come un riferimento; devi sapere cosa cercare, ma il libro ti fornirà utili suggerimenti a cui potresti non aver pensato.

Answer 3

Pratica, pratica, pratica.

Vorrei navigare sul Web per modelli o siti esistenti e tentare di replicarli per la pratica.

Ovviamente, rispettare i diritti dell'autore e non ricreare il tema di qualcuno e quindi utilizzarlo su uno dei siti a meno che non sia effettivamente rilasciato al pubblico.

Answer 4

Vorrei guardare in "HTML semantico" http://en.wikipedia.org/wiki/Semantic_HTML

cercando anche in DOCTYPE: http://htmlhelp.com/tools/validator/doctype.html

Quelle 2 cose una volta padroneggiato mi hanno aiutato per iscritto corretta x browser css che può apparire esattamente come comps quando si bisogno di essa.

Direi di evitare i modelli a meno che i progettisti non facciano sempre lo stesso layout del sito per l'interfaccia utente, vorrete essere più agili di così.

Una buona cosa che tende ad aiutare x browser css anche per i principianti è una buona reset.css: http://meyerweb.com/eric/tools/css/reset/

Answer 5

Mi piacerebbe anche esplorare la zona di interfaccia utente usabilità. useit.com è una buona fonte.

Answer 6

darei un'occhiata a CSS Zen Garden.

Answer 7

Ho avuto questa frustrazione anche per un po '(credo che molti lo facciano). Una cosa specifica che alleviava parte di quella frustrazione era l'apprendimento dell'importanza delle classi e degli id ​​(per esempio, rendere più semplice la javascript, le classi facilitare i cambiamenti su larga scala). Questo potrebbe sembrare davvero semplice, ma è stato un grande passo per me. Immagino che quello che sto dicendo sia che devi solo passare del tempo con esso. Non allontanarti perché è intimidatorio o frustrante. Ci vuole solo tempo.