Come ho realizzato il sito per il corso di HTML in 20 passi (prima parte)

Di Daniele Vietri | Twitter @marlenek | Facebook danielevietri
28/04/2009 - in Corso di HTML - Commenti (0)
Questo post è stato letto 2135 volte in 1019 giorni.
 

Il sito del corso è diventato un caso di dominio pubblico. Sì, insomma, con questi  post ho deciso di raccontare qualcosa del "dietro le quinte" dato che il sito stesso potrebbe diventare un esempio del quale parlare durante le lezioni.

E allora vorrei raccontare qualcosa del ciclo di vita di questo sito, insomma del percorso che ha seguito dalla fase di analisi fino alla pubblicazione di qualche giorno fa. Certo quotidianamente continuo ad apportare modifiche ed aggiornamenti, ma l'iter dei progetti web personali, di piccola entità, è spesso piuttosto simile (anche se non si tratta mai di passaggi realmente sequenziali).

Questa è dunque l'esperienza del sito per il corso di HTML per webmaster:

1. Definizione dell'obiettivo
   Ho pensato allo scopo del sito e a quali compiti deve assolvere. In questo caso ci sono ben 2 obiettivi: informare e vendere, quindi poco peso alla "tecnica" e molta importanza alla facilità d'uso, alla chiarezza ed alla fiducia.
    
2. Definizione dei contenuti
   Ho elencato tutte le domande che vorrei fare nel caso dovessi acquistare un corso (lato acquirente), poi ho elencato tutto quello che avrei voluto dire come docente riguardo al corso (lato venditore). Ho aggiunto le caratteristiche peculiari ed i vantaggi. Ho riletto molte volte e tagliato qua e là: semplicità e sintesi, ho scelto di tenere solo le informazioni necessarie e utili agli obiettivi. Infine ho stilato due liste ordinate: per importanza e per logica che mi hanno aiutato a definire quanto peso e quanto spazio dedicare ad ogni informazione.
    
3. Definizione della struttura
   Ho preso le liste del punto precedente ed ho cercato di raggruppare queste informazioni in maniera da arrivare a definire le pagine e quali informazioni dovessero contenere. Ho ipotizzato come queste informazioni dovessero essere navigate dai visitatori e quindi definito come collegarle tra loro. Da qui ho raggruppato in due insiemi le cose a cui dare rilievo (menu) e le cose a cui non dare rilievo (footer). Infine ho estratto un paio di elementi che potessero in qualche modo "aiutare" la scelta (box).
    
4. Dominio
   Ho elencato una serie di parole che definissero l'argomento del sito e le ho inserite sui tool di suggerimento messi a disposizione dai motori di ricerca, insomma ho raccolto informazioni su quali parole vengono utilizzate comunemente per cercare argomenti simili a questo. Ne ho estratte alcune valide e le ho combinate tra loro cercando il giusto mix tra chiarezza, grammatica, keyword. Infine le ho messe in ordine di preferenza ed ho verificato la disponibilita' del dominio .it relativo.
    
5. Hosting
   Ho definito la tecnologia ed il budget, poi ho iniziato la ricerca su Google. Alla fine però ho preferito non perdere tempo prezioso e mi sono affidato ai consigli ed all'esperienza di alcuni amici soddisfatti del loro fornitore. Devo dire che per il momento sono davvero fantastici e che vorrei scrivere un post a riguardo per ringraziarli a dovere. Comunque ho acquistato lo spazio online, inviato la LAR al NIC via fax (sigh) e dopo qualche giorno il tutto era attivo. Di solito è più economico comprare subito il dominio e acquistare lo spazio hosting poco prima della pubblicazione, in realtà ho voluto farlo prima per effettuare anche qualche test online e soprattutto per avere la possibilità di caricare una pagina temporanea e di iniziare a segnalarla ai motori di ricerca.
    
6. Bozzetti grafici di massima
   Si entra nel vivo. Ho realizzato su carta la struttura schematica delle tre pagine "modello" per il sito: la home page, la pagina di contenuto e la pagina di iscrizione. Sono partito a posizionare i contenuti (e gli spazi) in base alla loro importanza rispetto l'obiettivo ed alla regola di Gutemberg, poi gli elementi di navigazione. Sapevo però che avrei utilizzato un template, quindi sono stato molto generico nel definire questa struttura con i wireframe. Ho realizzato 3-4 alternative per ogni modello di pagina previsto.
    
7. Realizzazione grafica
   Anche se nel mio caso sarebbe più corretto dire "scelta del template", infatti ho deciso di concentrarmi sui contenuti, sulle visite e sulle attività degli utenti piuttosto che sull'aspetto grafico. Quindi ho dedicato alcune ore per la ricerca di un template gratuito HTML/CSS che si avvicinasse il più possibile alle mie bozze su carta ed ho selezionato quello con i colori e un appeal più in linea con l'obiettivo (rassicurante, professionale, fresco, piacevole). Ho subito personalizzato codice, struttura e immagini secondo le mie esigenze e l'analisi dei punti precedenti.
    
8. Preparazione dei contenuti testuali
   Ho iniziato a scrivere sapendo, per ogni frase e per ogni pagina, quanto spazio avrei dovuto occupare. Cioè il meno possibile. Paragrafi brevi, comodi da leggere, informazioni e processi semplici, buona densità di parole selezionate all'interno di un discorso lineare. Uno degli obiettivi del sito è appunto quello di informare, per questo ho dedicato diverso tempo ai contenuti testuali (oltre al fatto che sono un maniaco, off course). Pochi link verso l'esterno e qualche collegamento di conseguenza o di approfondimento su contenuti interni. Ho scelto anche di dare del "tu" perché tutto fosse più semplice da leggere, informale e famigliare.
    
9. Preparazione dei contenuti fotografici
   Ho scelto di metterci nome e cognome, ma ho pensato che questo non fosse sufficiente a garantire un  certo tipo di tranquillità e sicurezza a chiunque non mi conoscesse. Il passo verso l'inserimento di una fotografia è stato breve. L'aspetto poco concreto, insicuro e impersonale di un sito web può essere limitato e migliorato con elementi come un blog, informazioni sulla persona e qualche fotografia dell'autore (e presto delle lezioni in aula). Per fortuna ho un amico che il sabato mattina non ha di meglio da fare che scattare foto ad una brutta faccia come la mia! Il fotoritocco ha fatto il resto...
    
10. Preparazione dei contenuti video
    Quando non conosco un'azienda, un servizio o un prodotto mi informo il più possibile, prima di acquistare. La cosa che assume maggior peso nella mia scelta è, di solito, il giudizio e l'esperienza di persone indipendenti che hanno avuto modo di provare prima di me. Ad esempio chi comprerebbe qualcosa da un utente eBay che ha feedback negativi? Ecco uno dei motivi per i quali ho tenuto un corso di test con 3 persone, oltre alla verifica dei contenuti, adesso diventa importante il loro parere come "testimonial". Ho chiesto via mail di descrivere la loro esperienza con il corso ed ho estratto alcune frasi per le citazioni testuali nei fumetti e poi... ho recuperato una videocamera, una parete colorata, una sedia e a piede libero abbiamo chiacchierato del corso. Poi un piccolissimo montaggio e l'upload su Youtube.

Domani il post successivo per la seconda parte con i passi 11-20...

 

    

---

Questo articolo ti è piaciuto?

Se desideri stamparlo clicca qui oppure potresti essere interessato alla sottoscrizione del feed RSS per ricevere gratuitamente nel tuo aggregatore tutti gli aggiornamenti di questo blog.

 

Commenti

Nessun commento trovato. Vuoi essere il primo a scrivere un commento? Fammi sapere la tua opinione scrivendola nel modulo qui sotto!
 

Nuovo commento

Non inserire testo nel campo sotto (altrimenti non riuscirai a commentare)

Testo (max 1000 caratteri)

Nome

e-Mail / Link ("nofollow", "no-rel", non pubblicato)

Disclaimer
L'indirizzo IP del mittente viene registrato, in ogni caso si raccomanda la buona educazione.