Come inizi a costruire un sito web?
La maggior parte degli sviluppatori probabilmente inizia da zero o recupera alcune risorse dai siti precedenti. I più organizzati tra di noi hanno sviluppato un toolbox personalizzato da cui iniziare un sito che si rivela parte essenziale del loro flusso di lavoro.
Oggi discuteremo sul motivo per cui dovresti considerare di costruire il tuo pacchetto di front end per fungere da punto di partenza per ogni singolo sito che crei.
Cos'è un pacchetto Front End?
Quello che intendo per pacchetto frontale è essenzialmente un insieme di strumenti e convenzioni che standardizzano alcuni elementi del processo di sviluppo web. L'ispirazione per questo articolo proviene dalle menti creative di Erskine Design. Come designer, tu sei probabilmente un pensatore visivo quindi andremo direttamente al diagramma:
The Basic Outline o Erskine's Ultimate Front End Package
Come potete vedere, Erskine ha sostanzialmente costruito un framework di base da cui partire per i principali progetti di web design. Lo riassumono come un compendio di file CSS in cascata e connessi, convenzioni di denominazione, moduli, plug-in e script di libreria che assicurano che qualsiasi progetto condotto o elaborato da qualsiasi membro del team rimarrà in convenzione e sarà più semplice per chiunque altro entrare e lavorare in qualsiasi momento.?
Possedere un tale quadro può essere inestimabile per una serie di ragioni, che discuteremo di seguito. L'argomentazione avanzata da alcuni è che tale framework o toolkit non è solo utile, ma assolutamente necessario. Simon Collison di Erskine Design si spinge fino a dire? Senza dubbi o compromessi, ogni sito web deve essere costruito con un solido strato di base e un Ultimo pacchetto.?
Diamo un'occhiata ad alcuni dei vantaggi e dei motivi per cui crei il tuo pacchetto front-end personalizzato. (Basato su alcuni dei suggerimenti della presentazione di Erskine, trovato qui)
Eliminazione della ripetizione
Questa è la ragione più semplice e comprensibile per lo sviluppo di un pacchetto di front end. Ogni volta che inizi a costruire un sito, esegui varie fasi di configurazione, come la formazione della struttura HTML, la creazione di file CSS esterni, il collegamento dell'HTML al CSS esterno, l'importazione di jQuery e / o altre librerie JavaScript che usi spesso, ecc. Lo sviluppo di un pacchetto di front end recupera tutto questo tempo perduto rendendo estremamente semplice l'avvio di un nuovo sito: basta copiare la cartella contenente il framework e si è pronti e funzionanti.
Potresti sostenere che queste attività non richiedono una quantità significativa di tempo o sono addirittura necessarie per mettere il tuo cervello in una mentalità di sviluppo web. Per rispondere a queste argomentazioni ti suggerisco innanzitutto di dedicare te stesso a quanto tempo perdi su ogni progetto, impostando la gerarchia dei file, impostando e caricando script e stili, individuando le convenzioni di denominazione e correggendo gli errori di trascinamento. Scommetto che è molto più di quanto pensi. Infine, a quest'ultimo argomento vorrei sfidarti a riqualificare il tuo cervello per accettare una nuova parte del processo come l'inizio. Prova a saltare nella sperimentazione del tuo sistema e scopri quanto è più bello saltare tutte le attività noiose e ripetitive.
Standardizzazione
La standardizzazione è uno dei principali vantaggi dell'utilizzo di un kit di strumenti prefabbricati. Ogni volta che inizi un nuovo progetto, potresti fare cose leggermente diverse. Questo può essere qualcosa di grande, come cambiare il modo in cui impagini il tuo HTML, o qualcosa di piccolo, come decidere una nuova convenzione di denominazione. Ciò può rendere estremamente difficile per gli altri seguire il tuo lavoro o anche per tornare indietro e ricordare come stavi facendo le cose in quel momento.
Man mano che sviluppi il tuo pacchetto di front end, mantieni la standardizzazione in primo piano nella tua mente. Decidi il modo migliore in cui sai fare ogni piccola cosa e segui quelle convenzioni attraverso ogni progetto che inizi. Marcare i commenti allo stesso modo, organizzare i CSS allo stesso modo, utilizzare le stesse convenzioni di denominazione delle variabili, utilizzare la stessa gerarchia di cartelle, utilizzare le stesse reimpostazioni CSS, ecc. Prendere tutte le piccole decisioni e congetture dal sistema ha il vantaggio di snellire l'intero processo di sviluppo per assicurarti di creare un sito ben visibile e discernibile il più rapidamente possibile.
Questo non vuol dire che dovresti decidere su un sistema e mantenerlo permanentemente. Lascia che si evolva man mano che impari e scopri metodi migliori, semplicemente non integrando nuovi metodi in maniera sfacciata o abbastanza frequente da annullare l'utilità dell'intero pacchetto. Quando decidi su un modo migliore di fare qualcosa, assicurati di essere assolutamente certo che migliorerà il tuo sistema e assicurati di prendere nota delle modifiche e quando è stato integrato in modo da sapere cosa aspettarsi da progetti precedenti.
Migliore collaborazione
Questo è dove un pacco frontale attraversa da? Bello avere? a? assolutamente essenziale.? Quando lavori con un team di sviluppatori su un progetto di grandi dimensioni, una delle più grandi inefficienze che puoi avere è un fallimento nel far sì che tutti si trovino sulla stessa pagina dall'inizio del progetto.
Se Bill ha strutturato la sua parte del progetto in un modo, Jill strutturando la sua parte in un altro modo, e Will che sta cercando di tenere il passo con i metodi di Bill e Jill, le cose diventeranno fastidiose (e non solo perché tutte le tue i nomi dei dipendenti capita di fare rima). Ciò condurrà inevitabilmente a lunghi incontri trascorsi a discutere di sciocchezze. Se hai membri del team che hanno già avviato un progetto usando determinate convenzioni, puoi scommettere che stanno andando a difendere quel metodo fino alla morte per evitare di tornare indietro e fissare quello che considerano il lavoro finito. Questo è il motivo per cui è estremamente importante sviluppare un pacchetto di front end nei casi in cui è coinvolta una collaborazione significativa.Probabilmente dovrai ancora tenere una riunione per decidere le convenzioni specifiche da seguire, ma scoprirai che i membri del team sono molto più flessibili con i nuovi metodi se non richiedono il backtracking.
La chiave da asporto qui è di sviluppare un sistema prima che inizi un progetto, non durante. Ciò aumenterà le possibilità di accettazione e preverrà molti problemi di incompatibilità lungo la strada. Inoltre, assicurati di includere la tua squadra nel processo decisionale. Questo è estremamente importante per il successo del pacchetto per una serie di motivi. Innanzitutto, è sempre una cattiva idea per il management creare un sistema per semplificare una data attività senza consultare le persone che sono più vicine a tale attività. Non importa quanti più gradi universitari hai delle persone sotto di te, è probabile che siano la migliore autorità su ciò che funziona e non funzionerà. Infine, a parte la questione dell'efficacia, è di nuovo il problema dell'accettazione. Se consegni al tuo team una serie di linee guida che non hanno avuto alcun ruolo nello sviluppo, trascineranno i loro piedi e si lamenteranno per tutto il tempo perché li stai costringendo a fare qualcosa che non vogliono fare. Tuttavia, se si consente ai membri del team di ogni livello di partecipare attivamente allo sviluppo delle convenzioni, è molto più probabile che si conformino al nuovo sistema perché hanno contribuito alla sua creazione e direzione.
Controllo di qualità
Lo sviluppo di un pacchetto di front end consente di implementare un certo grado di controllo della qualità tra i membri del team fin dall'inizio del progetto. Garantisce errori comuni, come l'acquisizione del tipo di documento errato o la dimenticanza di includere un determinato foglio di stile del browser, non vengono creati. Inoltre, avere un sistema rigoroso in atto può aiutare a prevenire il lavoro intenzionalmente sciatto. In una folle corsa per far progredire un progetto, gli sviluppatori useranno spesso codice non conforme agli standard, nomi di variabili vaghe, trucchi oscuri e qualsiasi numero di scorciatoie con l'argomento che torneranno indietro e sistemeranno queste cose in un secondo momento. Il problema, naturalmente, è che di solito non è il momento di tornare indietro e correggere queste cose più avanti nel progetto man mano che ci si avvicina alle scadenze principali. Molti di questi problemi scompariranno se il tuo sostenitore di una cultura che eviti tali pratiche e scoraggi allontanandosi dalle convenzioni convenute.
In Regard to Design & Innovation
Prima di chiudere e chiedere di sentire le tue opinioni, voglio anticipare un argomento che potrebbe sorgere. Molti vedono convenzioni comuni e regole severe come qualcosa che paralizzerà il processo di progettazione, eliminando praticamente ogni spazio per la creatività o l'innovazione. Questo semplicemente non è il caso in questo caso ed è in realtà il risultato opposto di ciò che un pacchetto front-end ben progettato fornirà.
Un buon pacchetto di front end ti permetterà di concentrarti maggiormente sugli elementi creativi del processo di sviluppo attraverso la standardizzazione delle aree che consumano tempo e la cui variazione non farebbe una differenza significativa nel risultato finale. Ciò che intendo è che elementi come la gerarchia delle cartelle passeranno completamente inosservati all'utente finale e quindi non sono il luogo in cui concentrare la tua creatività su ogni singolo progetto. L'idea qui è quella di superare le cose noiose in un sol colpo, in modo che tu possa rapidamente scavare nelle cose che fanno, e dovrebbero, variare da un sito all'altro; le cose che rendono unico ogni sito. Con questo tipo di sistema, è possibile dedicare più tempo allo sviluppo di interfacce utente originali, alla scelta di combinazioni di colori personalizzate, alla ricerca di diverse famiglie di caratteri e alla codifica di funzioni innovative.
Se il sistema che si presenta ostacola il processo creativo, semplicemente non sta facendo il suo lavoro e dovrebbe quindi essere scartato in favore di un viaggio di ritorno al tavolo da disegno.
Risorse gratuite
Venduto sull'idea di sviluppare il tuo pacchetto di front end ma non sai da dove cominciare? Ecco alcune risorse gratuite per iniziare.
- Una collezione Killer di stili di reimpostazione CSS globali
- Esempi di pagine vuote HTML
- Un semplice sistema di template PHP
- Codice Google: librerie JavaScript ospitate (jQuery, MooTools, ecc.)
- 16 modelli di layout CSS di base
Parla la tua mente
Quanto sopra rappresenta il mio argomento prolisso per il motivo per cui credo che Erskine Design abbia ragione nel sostenere che ogni sito web dovrebbe essere costruito partendo da una base solida, standardizzata e preimpostata. Facci sapere se pensi che lo sviluppo di un sistema del genere valga la pena. Meglio ancora, se hai un sistema in atto, facci sapere come funziona!