In passato ho fatto un po 'di codice HTML, CSS e PHP, ma ho sempre lavorato solo su cose che erano già "finite" e non ho mai creato un sito web da zero. Tuttavia, di recente ho acquistato un dominio e alcuni servizi di hosting a basso costo e spero di migliorare le mie abilità HTML, CSS e Javascript in modo da poter diventare un po 'più commerciabile come sviluppatore web / webmaster.

In genere, quale processo utilizzi per avviare un sito Web? Disegni il layout su carta e poi fai il codice? O inizi a codificare e a modificare l'output a tuo piacimento?

Il mio processo generalmente appare un po 'così:

1. Caratteristiche . Con carta e matita, disponi le caratteristiche / pagine distinte che comporranno il sito. Questo arriva alle domande più generali: stai costruendo un semplice sito di informazioni e grafica per tua madre? una soluzione di e-commerce per una piccola impresa? un blog / galleria per un amico fotografo? La tua risposta determinerà molto sul percorso di costruzione che dovrai seguire. Questa fase può anche comportare una discussione considerevole con un cliente o chiunque sta guidando la barca (se non sei tu).

2. Wireframe . Con tutte le funzionalità necessarie disposte, elaborare un wireframe. Sulla carta o con uno strumento come i fuochi d'artificio che ti permetteranno di creare funzionalità di navigazione molto semplici. Se stai lavorando con un CMS come wordpress, come verranno gestiti i tuoi contenuti statici? Questo potrebbe anche essere un buon momento per iniziare a pensare alla struttura dei file. Se il tuo progetto avrà bisogno di un database personalizzato, ora è anche il momento di iniziare a pianificare la sua progettazione e implementazione. Questa è una fase critica, poiché la pianificazione intelligente farà risparmiare un sacco di backtracking e rielaborazioni, nel caso in cui vengano commessi errori o si verifichi lo scorrimento del progetto.

3. Tecnologia . Una volta che la fase di pianificazione è relativamente elaborata, scegli le tue tecnologie. Stai facendo HTML direttamente? un php cms in un ambiente lampada? .net mvc storefront? Queste domande possono influenzare l'ambiente di hosting richiesto, nonché i costi per l'esecuzione. Se stai facendo un negozio, la sicurezza è una delle preoccupazioni principali qui (SSL e conformità PCI, per esempio). Assicurati di avere un ottimo ambiente di test (localhost o altro) stabilito.

4. Design / Layout . Quando l'elenco delle funzionalità e il wireframe sono abbastanza ben determinati, puoi iniziare a pensare al design del sito. Sapere cosa riempirà le pagine è ovviamente un prerequisito. Mi piace lavorare in Photoshop e fare un uso intensivo delle cartelle come analogo alla tua struttura di markup. Vado al punto di nominarli con gli identificativi markup e css previsti. Anche se è probabilmente saggio fare qualche disegno in forma libera prima di ottenere veramente dettagliati. Tendo a utilizzare i file "layout" da cui estrarrò gli elementi e li inserirò nei file "process", ovvero i file che utilizzo per produrre grafica di produzione.

5. Markup / CSS . Una volta elaborato un design abbastanza pulito (dato che sicuramente si fletterà un po ', mentre vai in modalità di produzione) puoi iniziare a scrivere markup. In genere mi piace avere un layout standard che soddisfi tutti i contenuti del sito. Quindi - pulito e flessibile dovrebbe essere il punto chiave qui. Il markup del layout dovrebbe essere abbastanza completo prima di iniziare a scrivere CSS, ma trovo che facciano molto per informarsi. Farai anche molta ottimizzazione SEO in questa fase (denominazione corretta di immagini o tag A, meta info, doctypes ecc ...) Sii accurato.

5.1 Gestione dei temi . Se stai lavorando con un CMS e il tuo progetto verrà utilizzato come tema personalizzato, trova alcuni tutorial su come farlo esattamente per la tua applicazione. Questo può essere scoraggiante, francamente;) Costruirò sempre un layout di markup statico con CSS abbastanza completo prima di tagliarlo in elementi tematici.

6. Comportamento . Quando il tuo markup e CSS sembrano piuttosto completi e forse il tuo tema è a posto, puoi iniziare a sviluppare comportamenti (rollover, ecc.) JavaScript non discreto è importante, a meno che tu non stia utilizzando funzionalità che lo richiedono assolutamente (un ajax-pesante galleria o contenuto flash basato sui dati). La regola generale è: se qualcuno visita il tuo sito con JavaScript disattivato, cosa vedranno? A volte rimuovo gli elementi statici e li sostituisco con le versioni interattive in fase di esecuzione.

7. Contenuto . A meno che il design non dipenda dal contenuto (le immagini a volte sono il contenuto, ad esempio) = In genere uso testo / grafica segnaposto fino a quando il design e il comportamento non sono ben definiti. Evita di lavorare più di una volta. Se si stanno compilando i dati del prodotto, saranno necessari un attento controllo degli errori e test.

A quel punto sembra esserci sempre un periodo di rielaborazione, riparazione e lucidatura. Ma, in sostanza, è tempo di farlo vivere. Quindi vai a fare uno spuntino.

Hmmm. Immagino che non sia solo "come iniziare". Ma forse aiuta, comunque. In bocca al lupo!

Quando progetto un sito web, mi chiedo perché?

La prima parte del mio flusso di lavoro sta chiedendo PERCHÉ? Se lavoro con un cliente, devo assicurarmi che abbiano una visione ben definita di ciò che vogliono realizzare sul sito web.

1. Le domande sul perché.

• Raccontami un po 'di te e del perché lo stai facendo.

• Chi sono i clienti? Qual è il loro bisogno / dolore specifico? Ti prego di fornirmi - con alcuni esempi specifici di diversi tipi di clienti, di cosa hanno bisogno, di cosa farà il sito web per loro.

• Parlami del business. Che cosa fai esattamente?

• Cosa ti rende migliore del prossimo?

• Se stavi cercando il servizio fornito dalla tua azienda, cosa vorresti digitare in Google per trovarlo?

Se stai costruendo il sito per te, allora sai già quali sono queste risposte.

Se stabilisci in base alle risposte alle domande precedenti che queste persone sono serie e in realtà hanno una buona idea. Quindi procedi (ricorda che non ti vengono ancora pagati ma è meglio che ti prendano in giro se vuoi che ti assumano.)

2. La ricerca.

Trascorrere del tempo alla ricerca del cliente e della sua attività. Scopri i loro successi passati e tutti i problemi che hanno riscontrato. Sei il terzo sviluppatore che hanno assunto? Che cosa è successo agli altri 2 ragazzi?

Scopri di cosa ha bisogno il cliente. Per chi costruirai questo sito. Il cliente è un veterano di 60 anni in pensione o un ragazzino di 16 anni con la faccia da brufolo che gioca a Farmville su Facebook tutto il giorno.

Scopri chi sono i concorrenti. Potrebbero anche non saperlo. Fai un'analisi competitiva da 5 a 10 concorrenti e scopri chi è il culo di cui abbiamo bisogno per calciare i Serp. Questo è il palcoscenico che devi sapere qual è la parola chiave target. Più tardi e il tuo già fallendo.

2b La proposta

Soffiali via con la tua conoscenza della loro attività e escogita un accordo / proposta sul sito Web e sii pronto con il tuo contratto una volta che sono d'accordo. Ottieni il contratto firmato e un deposito del 50%, quindi procedi al passaggio 3.

3. La missione: prendine una

C'è un tema comune qui: in tutti questi casi, la missione non riguarda il prodotto in quanto tale. La missione è "solo" qualcosa che, se sei davvero serio, richiede che il prodotto diventi assolutamente incredibile, quindi lo fai accadere. Se preferisci: queste missioni sono tutte le risposte a, perché abbiamo appena aggiunto quella nuova funzionalità? No, quale nuova funzione stiamo aggiungendo? - Benjamin Pollack.

La tempistica deve essere stabilita in modo che tutti abbiano le loro aspettative in prospettiva.

4. Il flusso di lavoro

Qui è dove la maggior parte delle persone inizia, quindi spiegherò il mio processo, ma dovrai decidere quale flusso di lavoro è il migliore per la tua situazione, squadra, cliente, ecc.

1. Per me il contenuto viene prima di tutto. Mi assicuro che il cliente abbia fatto la maggior parte prima di scrivere qualsiasi codice. Non stiamo parlando della modifica finale della bozza, ma più o meno le parole di testo che saranno sulle pagine. Se è coinvolto un team di marketing, ciò potrebbe richiedere del tempo.

2. Dovresti già avere un'idea di come sarà il sito. Dovresti avere il contenuto. Ora devi lavorare sul layout e sui principi generali di progettazione che raggiungeranno l'obiettivo che hai raggiunto nel passaggio 3.

   Odio i wireframe ma capisco che sono necessari. Solo perché sai che aspetto potrebbe avere il tuo client. Questo è per la tua protezione e per i clienti. Quando tutti sono felici, fagli firmare qualcosa che dice "Questo è quello che ti stiamo pagando per costruire".

3. Sviluppo frontend e UI - HTML, CSS e DESIGNING IN THE BROWSER , la tecnica Hardboiled di Andy Clarke. Sono stanco di perdere così tanto tempo in Photoshop quando so di poter dimostrare un modello più rapido e realistico che mi dà anche un vantaggio sullo sviluppo.

4b. La base di codice

Finalmente ti diverti un po '. Per te e per i tuoi clienti, configura VERSION CONTROL prima di iniziare. Dal momento che stai eseguendo il controllo della versione, dovresti andare avanti e impostare BUG TRACKING mentre ci sei.

4c. Copia Modifica

Ricordi quel contenuto che abbiamo? Ora è quando deve essere modificato. Faccio schifo, quindi cerco di assumere qualcun altro o mi assicuro che molte persone lo leggano. Controlla e assicurati che le parole chiave di cui abbiamo parlato nel passaggio 2 siano ottimizzate per il SEO. Se il nostro contenuto è eccezionale e riguarda effettivamente quelle parole chiave, ciò dovrebbe venire naturalmente.

5. Test beta e UI

Ottieni alcuni esseri umani che respirano vivi per sedersi di fronte al tuo sito e iniziare a usarlo. Mi piace arruolare mia madre che a volte chiama e vuole sapere perché la sua stampante non stampa (la spina della mamma, deve essere collegata prima). Questo tipo di utenti deve essere in grado di navigare nel tuo sito a meno che, ovviamente, non stia usando l'esempio di 16 anni per bambini con brufolo di cui sopra.

6. Manutenzione e piano SEO

Assicurati che tutti sappiano chi è incaricato di combattere le bestie del server .

In un mese fai riferimento all'analisi della concorrenza che abbiamo fatto e confronta il nostro sito con quelli che abbiamo analizzato. Usa questi dati per creare il tuo piano SEO e NO non sto parlando del SEO dell'olio di serpente, sto parlando di assicurarti che stai ancora generando contenuti relavent, i siti sono naturalmente collegati a te (perché sei così fantastico) e ai tag del titolo abbina il testo del corpo. La SEO è un processo lungo a meno che il tuo Stack Overflow e non abbia un esercito di 14,1 milioni di utenti per generare contenuti di qualità per te.

C'è una grande differenza tra i contenuti di qualità e le cose che trovi sul "sito sillabato", che non collegherò. (Per evitare che il succo no-follow goccioli anche su di loro).

7. Avvia

Tutto funziona? La missione di costruire bellezza è stata raggiunta? Avere un piano di lancio ed eseguirlo.

Se hai fatto tutto bene nei passaggi 1 - 6, il tuo lancio sarà un gioco da ragazzi, senza sciopero, che potresti avere problemi. Basta essere pronti per loro e correggere eventuali errori.

Invia la fattura, risciacqua e ripeti.

Mi piace iniziare <!DOCTYPE html>

Seriamente però ... prime priorità:

1. Scopri cosa vuole il cliente. Disegna uno schizzo approssimativo per il layout di base, crea uno schema di colori, ecc.
2. Esegui un mock up (statico) di navigazione e layout di base e collabora con il cliente per perfezionarlo.
3. Produzione reale. Ottieni CMS e / o contenuto statico in atto. Contatta nuovamente il cliente per assicurarti che sia quello che stanno cercando e che possano gestire il CMS / il CMS in grado di gestire le loro esigenze.
4. Rifinisci e ripeti 3 fino a quando il cliente è soddisfatto.
5. ????
6. Profitto!

Prima di tutto vorrei disegnare il layout di base e disegnarlo su carta prima di iniziare a scrivere codice. Dopo aver completato il disegno di base su carta, è facile codificarlo in modo modulare. L'Office php & css sarebbe il modo migliore per personalizzarlo.

Mi piace sempre iniziare facendo un modello usando una sorta di software Photoshop in modo che possa incorporare qualsiasi e tutte le immagini nel tuo sito.

La maggior parte delle risposte è già approfondita, vorrei solo aggiungere che è necessario utilizzare alcuni framework o modelli in modo da non perdere tempo a riscrivere le basi.

Ci sono molti framework PHP disponibili là fuori ( Kohana è il mio preferito) o molte persone usano Wordpress come base. Inoltre potresti usare un framework CSS, di nuovo ce ne sono molti là fuori, uno dei più popolari è il sistema a griglia 960

Quando si progetta un sito Web, come si inizia di solito ?

Come te ho scoperto la necessità di commercializzarmi come sviluppatore / designer web qualche anno fa. Ho trovato il mio punto di partenza per capire nella mia mente quali informazioni, immagini e messaggi voglio offrire ai visitatori che visitano il mio sito Web? e cosa volevo che l'utente realizzasse / facesse mentre visitava il mio sito web .

Una volta ho capito che la comprensione del processo di progettazione è diventata molto più chiara. Mi ha permesso di scrivere gli elementi della mia homepage e delle pagine successive che avrebbero comunicato quegli elementi.

Ad esempio, ero molto desideroso di rendere il mio CV facilmente reperibile e scaricabile. Quindi, durante la progettazione del mio sito, ho assicurato che le informazioni sul mio CV e dove si trovavano dove erano prontamente disponibili.

La morale della storia deve essere pertinente. Tutto sul tuo sito Web dovrebbe servire a uno scopo, altrimenti è solo rumore inutile.