Come creare un progetto web

2,384 views

Published on

Cosa è un sito web e quali attività devono essere previste.

Post d'appoggio:
http://blog.merlinox.com/progetto-web/

Published in: Self Improvement
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,384
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
49
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Come creare un progetto web

  1. 1. Progetto web Cosa è un sito web e quali attività devono essere previste
  2. 2. Attività base <ul><ul><li>Contatto e coordinamento </li></ul></ul><ul><ul><li>Analisi delle informazioni </li></ul></ul><ul><ul><li>Preparazione prototipo (mockup) </li></ul></ul><ul><ul><li>Preparazione bozze grafiche </li></ul></ul><ul><ul><li>Preparazione prototipo Live </li></ul></ul><ul><ul><li>Creazione Template </li></ul></ul><ul><ul><li>Creazione CMS (db) </li></ul></ul><ul><ul><li>Creazione pagine / Integrazione CMS </li></ul></ul><ul><ul><li>Installazione / Configurazione </li></ul></ul><ul><ul><li>Web Writing e SEO </li></ul></ul>
  3. 3. Contatto e coordinamento <ul><li>La prima ed essenziale attività per un progetto web. Il contatto è fondamentale per definire le 5W del progetto: </li></ul><ul><ul><li>who : conoscere il cliente e rapportarsi in merito </li></ul></ul><ul><ul><li>what : l'idea del progetto </li></ul></ul><ul><ul><li>why : target del progetto > obiettivi e tipo di utenza </li></ul></ul><ul><ul><li>where : eventuali vincoli di hosting </li></ul></ul><ul><ul><li>when : tempistica > inizio, step intermedi, fine e modalità di consegna (attesa) dei contenuti </li></ul></ul><ul><li>In questa attività è buona norma tenere conto dei tempi che saranno necessari lungo tutto il periodo di lavoro, per comunicare con il cliente o coordinarsi con altri team. </li></ul>
  4. 4. Analisi delle informazioni <ul><li>Raccolto il maggior numeri di informazioni è necessario creare il progetto su &quot;carta&quot;, per arrivare alla produzione di un prototipo con funzionalità tempi e costi chiari e preventivati. </li></ul><ul><ul><li>Creazione delle voci basi del progetto </li></ul></ul><ul><ul><li>Esplosione delle voci in attività minori </li></ul></ul><ul><ul><li>Quantificazione delle attività </li></ul></ul><ul><ul><li>Necessità di sw / hw extra </li></ul></ul><ul><ul><li>Albero di &quot;navigazione&quot; </li></ul></ul><ul><ul><li>Albero di &quot;funzionalità&quot; </li></ul></ul><ul><ul><li>(approvazione...) </li></ul></ul><ul><li>Fondamentale : identificare con precisione l'elenco del materiale, chi e come lo fornisce. </li></ul>
  5. 5. Prototipo <ul><li>Condivise con il cliente le attività, accettati dal cliente i costi e &quot;firmato il contratto&quot; si può partire creando un prototipo del sito usando ideogrammi, chiamati professionalmente mockup . </li></ul><ul><ul><li>Definizione delle aree del sito </li></ul></ul><ul><ul><ul><li>aree sempre presenti </li></ul></ul></ul><ul><ul><ul><li>aree occasionali </li></ul></ul></ul><ul><ul><ul><li>menu </li></ul></ul></ul><ul><ul><ul><li>contenuti </li></ul></ul></ul><ul><ul><ul><li>footer </li></ul></ul></ul><ul><ul><li>Struttura homepage </li></ul></ul><ul><ul><li>Struttura modelli principali di pagina </li></ul></ul><ul><ul><li>Struttura / casi d'uso di funzionalità interattive </li></ul></ul>
  6. 6. Bozze grafiche <ul><li>Con il progetto ben chiaro e il mockup sufficientemente rappresentativo, si può partire con la creazione delle bozze grafiche. Per ogni prototipo dovrà essere prodotta una bozza. </li></ul><ul><ul><li>Riproduzione degli spazi presenti in prototipo </li></ul></ul><ul><ul><li>Adattamento dei loghi </li></ul></ul><ul><ul><li>Scelta dei font e dei colori </li></ul></ul><ul><ul><li>Gestione elementi ricorsivi </li></ul></ul><ul><ul><li>Inserimento di contenuti verosimili </li></ul></ul><ul><li>ps: il cliente le considererà già un lavoro finito, è necessario siano più verosimili possibile ma soprattutto realizzabili </li></ul>
  7. 7. Prototipo Live     <ul><li>Per progetti di dimensioni particolarmente importanti il cliente potrebbe richiedere la creazione di un prototipo funzionante. Questa attività può essere svolta prima o dopo le bozze grafiche: dipende da cosa il cliente necessità come prototipo: </li></ul><ul><ul><li>se un prototipo per particolari funzioni: va bene anche prima </li></ul></ul><ul><ul><li>se un prototipo per animazioni o interazioni grafica: dopo </li></ul></ul>
  8. 8. Creazione Template <ul><li>Approvate le bozze si inizia a  tagliare i sorgenti grafici e a tradurli in un mix di immagini, html, css e javascript. </li></ul><ul><li>L'attività si suddivide in: </li></ul><ul><ul><li>individuazione dei media target  (potrebbe essere necessario un template per ogni media) </li></ul></ul><ul><ul><li>individuazione dei modelli di pagina necessari </li></ul></ul><ul><ul><li>ottimizzazione delle immagini </li></ul></ul><ul><ul><li>ottimizzazione SEO del codice </li></ul></ul><ul><ul><li>interattività e animazioni </li></ul></ul>
  9. 9. Creazione CMS <ul><li>Se il vostro cliente ha necessità di un sistema di gestione contenuti (CMS) le scelte sono: </li></ul><ul><ul><li>usare un sistema pronto (wordpress, drupal, ...) </li></ul></ul><ul><ul><li>creare un CMS ad hoc </li></ul></ul><ul><li>Creare un nuovo CMS è un progetto di web application a se stante. Sarà quindi necessario valutare questa attività in modo isolato. </li></ul><ul><li>Nel caso di un prodotto nuovo è necessario particolare attenzione all'architettura delle informazioni e alla struttura del db, difficilmente modificabile in corso d'opera. </li></ul>
  10. 10. Creazione pagine / integrazione cms <ul><li>Con i modelli di pagina  (template)  pronti non resta altro che sviluppare tutte le pagine:  </li></ul><ul><ul><li>statiche : con i contenuti nel HTML </li></ul></ul><ul><ul><li>dinamiche : collegando i modelli di pagina alle fonti dati (DB) tramite query e condizioni </li></ul></ul><ul><li>Nel caso di uso di un CMS è da concordare con il cliente quali parti si inserirà in modo autonomo e quali dovremo inserire noi e poi lui eventualmente potrà modificarle. </li></ul>
  11. 11. Installazione e configurazione <ul><li>Nel caso abbiamo creato il sito presso nostri sistemi, dovremo prevedere di ricreare il sito definitivo presso l'hosting scelto dal cliente. </li></ul><ul><li>Questa attività potrebbe essere prevista anche all'inizio del progetto, nel caso in cui il cliente indichi che vuole ogni step sul sito online o nel caso di uso di CMS particolarmente configurabili e che è meglio avere subito nel server pubblico (o in staging*) . </li></ul><ul><li>* staging è un hosting parallelo a quello pubblico, dove effettuare test prima della pubblicazione </li></ul>
  12. 12. Web Writing  e SEO <ul><li>Un progetto web completo può richiederci anche di assolvere ai compiti di web writing, SEO e promozione. Attività correlate: </li></ul><ul><ul><li>definizione degli obiettivi di visibilità </li></ul></ul><ul><ul><li>ricerca delle parole chiave </li></ul></ul><ul><ul><li>scrittura dei testi ottimizzati </li></ul></ul><ul><ul><li>progetto continuativo di creazione nuovi testi </li></ul></ul><ul><li>A questo si può aggiungere un progetto di promozione / comunicazione continuativo nel tempo: </li></ul><ul><ul><li>definizione obiettivi </li></ul></ul><ul><ul><li>step intermedi </li></ul></ul><ul><ul><li>indentificazione dei media e delle campagne </li></ul></ul>
  13. 13. Contributi  <ul><li>Grazie a tutti coloro che hanno contribuito a questo documento, segnalandomi bug o aggiunte. </li></ul><ul><li>Grazie a: mark3991 ,  Joel , Marco , ... </li></ul>
  14. 14. Farsi pagare <ul><li>Il punto più dolente di questi tempi è quello di farsi pagare le fatture. Qui non mi sento di dare consigli, ma di dirci &quot;stiamo attenti&quot; si! </li></ul><ul><li>Se notate bug nel documento o volete proporre aggiunte, vi prego di segnalarlo nel post dedicato: &quot; progetto-web &quot;. </li></ul><ul><li>Per contattarmi e condividere altre idee i miei riferimenti sono i seguenti: </li></ul><ul><li>Riccardo Mares aka Merlinox www.merlinox.com [email_address] </li></ul>

×