witola.com

Quello che segue è un articolo che ho letto su un blog per quanto riguarda gli sviluppatori di front-end e le pratiche di codifica e ho pensato lo dia. E 'da Doug Neiner, un editor di alimentare i Coding ed è presidente di Pixel Studio Graphic Design . Si è assuefatto alle nuove tecnologie, e in particolare ama trascorrere del tempo con WordPress, Ruby on Rails e jQuery.

Quello che segue è una serie di 10 cose da ricordare e mettere in pratica su ogni progetto di sviluppo web. Li ho elencati qui in ordine di importanza in quanto molti dei passaggi costruire a vicenda. Se si prende nient'altro lontano dalla lettura, si prega di prendere Rules # 1 e # 2 a cuore e praticarle. Credo che risolvere questi due problemi porterà a una migliore progettazione e una migliore applicazione in siti web su Internet.

1. Carica sufficiente, e poi alcuni

Soprattutto in periodi di difficoltà economica, le imprese ei cittadini non stanno cercando di ridurre i costi e mantenere i progetti fino ad un minimo. A causa di questa conoscenza, noi come sviluppatori web tenta di spostare in ogni fase il più rapidamente possibile. Lo sviluppo front-end, però, prendere una notevole quantità di tempo, se fatto correttamente. Non è adeguatamente carica per quel tempo ci porta come sviluppatori di saltare cose che sappiamo sono importanti solo per mantenere il progetto nell'ambito del bilancio. La regola è semplice ... che normalmente non avrà il tempo per farlo bene, se non avete il tempo di prendere. L'unico modo per avere più "tempo" come sviluppatore, è quello di garantire il tempo che facciamo spesa è adeguatamente compensata. A quel punto solo può nostri cuori e le menti essere pienamente inserito nei nostri progetti ... e solo allora possiamo prendere il tempo di seguire i restanti 9 regole.

2. Educare il Designer

Per coloro che sono un designer / developer all-in-one, questo dovrebbe essere facile. Tuttavia, programmatori che lavorano con o per un designer hanno una responsabilità unica. Come molti designer provengono da un background di stampa, è a voi, lo sviluppatore, di educarli sulle possibilità a disposizione i loro disegni. No ... non ho detto far loro conoscere le 150 + jQuery plugin in uso, oi vostri pensieri sull'uso di un UL / LI combo vs A una serie di tag. Ho detto loro di educare le possibilità. Aiutarli a capire come il loro design potrebbero essere visualizzati su dispositivi diversi. Aiutateli a capire come sfruttare sfondi ripetuti e modelli di tegole di raggiungere grandi disegni con file di dimensioni minime.

Non lasciare la creatività solo al progettista sia! Questa è la tua occasione per dimostrare che sei creativa e trovando le soluzioni tecnologiche ideali per soddisfare le esigenze del progettista. Dire loro "semplicemente non è fatto in quel modo" per ogni richiesta è un modo sicuro per causare frustrazioni su entrambi i lati. Mettete la vostra mente a lavorare trovare modi per aggirare gli ostacoli.

Nota: Le regole da 3 a 10 costruire da queste prime due regole. Alcune delle seguenti regole richiedono grafica aggiuntivi dal progettista, e tutte le regole del tempo per seguire. Impegnatevi a regole 1 e 2, e le regole rimanenti sia senso e rendere il vostro prodotto finito molto meglio.

3. Pensate a livelli non in Slices

Ancora oggi, usiamo ancora la frase "tagliare il design" per descrivere il processo di spostamento di un disegno da Illustrator o Photoshop nel finito HTML / CSS layout. Mentre questo è ancora in gran parte precisa, il suo nome smentisce del precedente concetto di affettare un design a pezzi e rimontare (di solito in una tabella) torna nella pagina HTML.

Quello era il vecchio web. Il nuovo web utilizza il concetto di stratificazione, sovrapposizione e z-index per realizzare i disegni con la profondità. Come un codificatore, essere sicuri di ottenere file PSD o file AI livelli dal progettista rispetto a un design piatto. Questo vi permetterà di avere molta più flessibilità nel modo in cui mettere insieme un sito web. Ricordate, quando si lavora a strati, considerare gli elementi HTML che sono essenziali per la struttura prima di ricorrere ad aggiungere altri div e span. È possibile utilizzare un modello che si ripete verticale sul html elemento, e uno sfondo ripetendo orizzontale sul body elemento senza portare il temuto div#wrapper per risolvere i mali di fondo.

4. Utilizzare il miglior formato di immagine

Qual è il "miglior formato di immagine", vi chiederete? E 'quello che meglio si adatta al compito a portata di mano. PNG, GIF e JPEG tutti hanno diversi vantaggi. Quando non c'è trasparenza in un'immagine, provare che la dimensione del file / qualità dell'immagine è migliore tra i PNG, GIF e JPEG. Per le immagini di grandi dimensioni, JPEG quasi sempre vincere per dimensioni la qualità vs. Per le immagini di piccole dimensioni senza trasparenza, vedere che ha una migliore dimensione del file PNG o GIF. Se si decide su una GIF, assicurati di giocare con le opzioni e le opzioni di dithering con perdita (avete neanche Photoshop ha una opzione "lossy" per GIF?). Spesso si può spremere anche i file più piccoli di Photoshop attraverso la regolazione delle impostazioni di uscita ancora di più.

Per le immagini che hanno bisogno di avere trasparenza, prendere decisioni consapevoli su come saranno utilizzati. Se verranno sovrapposti su uno sfondo complesso, potrebbe essere necessario utilizzare un file PNG. Se lo sfondo è abbastanza coerente che il mascherino di colore di una GIF non si distinguono male, vedere se il file GIF è più piccolo. GIF ha il vantaggio di non dover programmazione aggiuntiva per farlo funzionare in IE6.

Per quanto riguarda l'uso JPEG: se si utilizza JPEG come parte dell'interfaccia utente (e non solo per visualizzare una foto, etc), assicurarsi di lasciare fuori i profili ICC durante il salvataggio per il web. Alcuni browser onorerà il profilo e produrre una differenza di colore tra GIF / PNG e JPEG dello stesso colore. Questo è un problema semplice per evitare semplicemente disattivando i profili ICC.

Che cosa succede se si tratta di un mancato guadagno? Ci sono stati momenti in cui ho bisogno la piena trasparenza di un PNG con la complessità immagine più adatta per un JPEG. In questi casi spesso impilare (ricordate, pensate a strati) due immagini: una per la trasparenza PNG, GIF e una per l'aspetto un'immagine complessa. Si tratta di problem solving creativo come questo, che garantirà le pagine si caricano rapidamente, e che il design mantiene la sua integrità.

5. Sapere quando utilizzare le classi vs Ids

Ho pensato che questo era solo il senso comune, ma a quanto pare non è così vedo molti programmatori che utilizzano i nomi delle classi in cui devono adottare ids. Potrebbe non sembrare un grosso problema, ma lo farà quando si tenta di indirizzare un elemento utilizzando Javascript.

Il concetto è semplice, se ci sarà solo un elemento in una determinata pagina, utilizzare un id. Se ci saranno più istanze su una determinata pagina, utilizzare i nomi delle classi. Ogni volta che un elemento è one-of-a-kind, utilizzare un id. La sua semplice! Cose come ul.navigation per la barra di navigazione principale o div.site-logo non hanno alcun senso. Ognuno di questi elementi sono distinto e che dovrebbe avere e id.

Invece di aggiungere un'altra regola per la nostra lista, lasciatemi grumo qualcos'altro qui: non utilizzare le classi troppi! Prendete il codice seguente per un esempio estremo (Si noti che le classi appaiono sei volte):

Per coloro che il codice di frequente, ti rendi conto questo è un esempio ridicolo, ma dimostra la fallacia di over-utilizzando le classi. Utilizzare solo ciò che è necessario per la corretta e migliorare lo stile (via Javascript) il codice HTML, niente di più.

6. Rendere le vostre pagine Responsive

E 'importante che la pagina risponde correttamente come l'utente finale naviga attraverso esso. Utilizzando le convenzioni di come gli effetti di rollover di immagine così come: hover,: active e: gli stati di messa a fuoco non può essere sottolineato abbastanza. Se non si desidera ad assaltare l'utente con interazioni troppi o stili, ma la maggior parte delle persone che rispondono bene al feedback visivo. Qui è facile per voi: link dovrebbe cambiare stato quando il mouse passa sopra di loro ... d'epoca! Non è sufficiente che il browser visualizza una piccola mano che indica un link. Non posso dirvi quanto sia frustrante per cercare attraverso una pagina con testo nero alla ricerca dei link grigio scuro e sperando e pregando che la mano sembra avermi fatto sapere che ho trovato uno!

Utilizzo di convenzioni quali la "Voi siete qui" indicatori descrittivi o strumento di consigli rientrano tutti in questa categoria. L'interazione e il feedback più che sembra l'utente mentre naviga attraverso un sito, meglio è.

7. Usa sempre sprite CSS Rollover

Se non sai cosa sono gli sprite CSS, leggi questo articolo di Smashing Magazine o questa in A List Apart per i dettagli. Per coloro che sanno quello che sono, perché non usarli!? Se mi dici la sua causa di una mancanza di tempo, voglio fare riferimento a Regola # 1 in questa lista. Passato l'argomento time, non posso davvero pensare di qualsiasi beneficio più importante che utilizzare Sprites CSS rollover di immagini. Controlla la Starter per jQuery sito. Quasi tutti i pezzi di interfaccia utente sono costruiti utilizzando un unico file PNG (nella foto sotto). I carichi di interfaccia tutto in una volta, e tutte le al passaggio del mouse / attiva degli Stati sono immediatamente disponibili. Nessun ritardo per a: hover immagine da caricare; Una richiesta al server, non 10 +. Questo è un fantastico strumento nel front-end di codifica Toolkbox che gli sviluppatori devono usare più frequentemente.

8. Comprendere la differenza tra Flash e Javascript

Credo che Javascript possono fare cose incredibili. Mi piace anche spingendo i limiti di ciò che può fare. Mi piace fare widget e plugin non meno che il prossimo ragazzo ... ma Javascript non può risolvere tutti i problemi nello sviluppo web dinamico. Invece di spendere 10 ore emulando una funzione di Flash che avrebbe portato 1 ora per fare in Flash, fare la scelta giusta e scegli Flash. D'altra parte, se avete solo bisogno di un rotatore immagine ... non ti azzardare a aprire Flash!

9. Prova il tuo sito in molti browser (compreso IE6)

Questo richiede tempo, non c'è dubbio. Ho sviluppato su un Mac e un PC (e più ambienti di Virtual PC) che mi ha permesso di test è la maggior parte delle persone normali browser usiamo oggi. Se non avete rapporti di Google Analytics dicono che nessuno usa tutti usano IE o Firefox, non fare una supposizione su come la gente esplorare il sito. Non sto dicendo rendere i siti sembrano identici, ma farle funzionare, funzione, e un aspetto gradevole (e certamente simili!) Nella maggior parte dei browser.

Nota: Cito IE6 in particolare perché il mio cliente più importante è una società che utilizza ancora IE6. Ho sviluppato uno stile di codifica che mi permette di costruire rapidamente per i browser moderni, e implementare solo un foglio di stile e alcune correzioni javascript in modo che il sito sembra giusto in IE6. Sono certo di perdere un po 'vantaggio facendo in questo modo, ma mi salva da molti momenti imbarazzanti.

10. Tenere sempre Manutenzione In Mind

Come si stanno "tagliando" un disegno di Photoshop, o preparare il vostro CSS e Javascript, la manutenzione tenere in mente. Qualche pazzo-cool trucco CSS si utilizza oggi può ritorcersi più tardi. Dumping regole CSS dove vuoi in un file CSS può sembrare veloce al momento (Guilty!), ma farà cambiare e aggiornare in un secondo momento un incubo.

Un passo importante da ricordare si verifica dopo aver predisposto file di un progettista per l'esportazione da Photoshop o Illustrator: Ricordati di salvare una versione del file appena prima dell'esportazione. In questo modo se avete bisogno di ri-esportare in un secondo momento, aggiungere un altro pulsante, cambiare una riga di testo, ecc, si sarà in grado di esportare nuovamente in fretta. Photoshop salva normalmente scelte formato immagine, le impostazioni di compressione e colori opachi per rendere il vostro lavoro ancora più facile.

Conclusione

Ci sono una serie di altre cose che sono importanti per Coders Front End da tenere a mente, ma credo che questi sono alcuni dei più importanti. Molti potrebbero obiettare che non sono regole, ma vi sfido a pensare a loro in quanto tale. Forse sarà meno probabilità di rompere loro nell'interesse di tempo o di denaro sul vostro prossimo progetto.