martedì 9 ottobre 2012

Come si fa un sito (5) - L'albero


Raccogliere le idee e definire i contenuti che vogliamo inserire nel nostro sito è il primo passo da compiere. Si dovrà arrivare a definire un "albero" del sito, in cui partendo dalla home page si potranno raggiungere tutte le altre pagine.

Come si fa un sito (4) - La struttura di un sito


Un sito è normalmente composto da più pagine. Un grafico web può disegnare le pagine utilizzando software di grafica come Photoshop o The Gimp. Non occorre ovviamente disegnare tutte le pagine: basta distinguere le varie tipologie a seconda del contenuto che dovrà essere visualizzato nella pagina.

Normalmente la Home Page è la pagina più importante del sito, ed è spesso diversa da tutte le altre. In home page si concentra la maggior parte delle visite degli utenti, per cui dovrebbe essere progettata con estrema cura: i contenuti importanti siano accattivanti e visibili nella parte alta della pagina.

La Home Page dovrebbe essere una specie di contenitore - sommario, con rimandi alle sezioni ed alle pagine interne. Spesso in Home c'è uno slider fotografico, ovvero uno spazio in cui scorrono delle fotografie corredate da una descrizione e dei link alle corrispondenti pagine interne.

Dopo la home page, occorre progettare le altre pagine in base alle varie sezioni che compongono il sito. Solitamente ci sono delle pagine che hanno un contenuto testuale: il classico "chi siamo", oppure le "condizioni di utilizzo" sono pagine in cui, tra l'header e il footer, viene visualizzato semplicemente del teso descrittivo con una qualche fotografia a corredo.

Ci sono poi delle pagine "scheda" che servono a presentare un elemento (un prodotto; un film; un viaggio; una città; ...) con tutte le sue caratteristiche. Un sito di scarpe potrà avere una scheda per ogni scarpa, dove oltre alla fotografia ed alla descrizione potranno essere visualizzate altre informazioni dettagliate come il prezzo, la disponibilità e un modulo per effettuare l'ordine o chiedere maggiori informazioni.

Prima di arrivare alla "scheda" del prodotto occorre però una pagina intermedia, a "elenco" che appunto possa elencare le schede disponibili presentando un estratto dei contenuti. Le pagine a elenco possono essere molte: il sit di scarpe potrebbe avere pagine elenco per scarpe da uomo, da donna o da bambino. L'elenco potrebbe visualizzare una fotografia piccola, il nome del prodotto ed i primi 200 caratteri della descrizione con un link "vai alla scheda".

Come si fa un sito (3) - La struttura di una pagina


E' importante capire come è strutturata una singola pagina web poichè la disposizione dei vari elementi segue dei criteri precisi per fare in modo che il sito sia di facile utilizzo per chiunque.

Una pagina web si sviluppa di solito in senso verticale. La larghezza della pagina il più delle volte è fissa, mentre può apparire una barra di scorrimento verticale per poterla scorrere ed arrivare a leggere i contenuti che non sono visibili all'apertura.

Per questa ragione si può visivamente suddividere qualsiasi sito web in tre macro "fasce" orizzontali:
- in alto c'è l'intestazione (header) che contiene di solito il logo ed un menu orizzontale.
- la fascia centrale, più ampia, è riservata al contenuto della pagina.
- in basso c'è un pié di pagina (footer) che di solito contiene informazioni sulla ditta, note di copyright, e contatti telefonici. Ultimamente si ha la tendenza a creare dei footer molto ampi che contengono informazioni aggiuntive come gli ultimi commenti inseriti, i link a tutte le pagine del sito, ringraziamenti, ed eventuali contenuti presenti nei social network come Facebook, Twitter o Pinterest.

Notiamo come header e footer rimangano fisse: su ogni pagina del sito, l'intestazione ed il pié di pagina dovrebbero rimanere uguali a differenza del contenuto centrale che invece cambia completamente.

E' possibile anche trovare dei design in cui il menù principale non sia sviluppato in senso orizzontale nell'header ma sia sviluppato verticalmente all'interno della fascia centrale: di solito posizionato in una colonna a sinistra. Questo succede quando si hanno dei menù composti da numerose voci, come ad esempio un sito di e-commerce che elenca tutte le categorie di prodotti disponibili. In questo caso il menù rimane uguale su ogni pagina, anche se è contenuto nel corpo centrale.

come si fa un sito (2) - La progettazione


I siti internet possono essere estremamente differenti l'uno dall'altro, a seconda dello scopo che vogliono raggiungere. Per avere un'idea dell'aspetto che dovrebbe avere un sito, basta curiosare tra i portali che mettono a disposizione modelli di siti già pronti come ad esempio templatemonster.com.

Se non siete dei grafici vi consiglio caldamente di prendere spunto da siti che vi piacciono particolarmente. I template realizzati da professionisti sono armonici e ben equilibrati, piacevoli alla vista e molto curati nei particolari. I concetti che stanno dietro a studi grafici di questo tipo sono molto precisi e richiedono una certa preparazione oltre ad avere un certo senso estetico.

Il consiglio non è quello di copiare - anche se per fini didattici questo sarebbe un buon esercizio. Se però state pensando di utilizzare pari pari un template di qualcun altro per creare un vostro sito e metterlo online, dovreste almeno preoccuparvi di leggerne la licenza oppure di contattare l'autore per chiedere sotto quali condizioni è possibile utilizzare il suo lavoro.

Come si fa un sito (1) - Presentazione

Benvenuti! In questo corso impareremo a creare un sito web da zero, attraversando varie fasi a partire dalla progettazione, passando dalla realizzazione pratica per finire con la pubblicazione on-line e la promozione attraverso i canali gratuiti che la rete mette a disposizione.

lunedì 25 giugno 2012

Devo studiare HTML 4, o HTML 5?

Si tratta di una delle domande più gettonate che si può trovare da un po' di tempo nei vari forum sul linguaggio HTML.
Chi si vuole avvicinare al mondo della programmazione web e sta cercando di capire quale linguaggio occorre studiare, si scontra con questo falso problema:

Devo prima studiare HTML 4 e poi passare al 5, o mi conviene partire subito da HTML 5?

Si tratta in realtà di un falso problema. Ciò che occorre studiare è l'HTML. Punto.
L'HTML è un linguaggio in evoluzione, ed esistono dei gruppi di lavoro appositamente cosituiti per definirne le specifiche.

Allo stato attuale il WHATWG (Web Hypertext Application Technology Working Group) sta lavorando alle specifiche dell'ultima versione del linguaggio HTML, la quinta.

Esiste quindi un documento piuttosto corposo, che potremmo definire la "Bibbia" dell'HTML 5, in cui vi si trovano descritte minuziosamente tutte le caratteristiche del linguaggio. Il documento non è definitivo, ma viene aggiornato costantemente.

I browser nelle loro ultime versioni, chi più chi meno, dovrebbero cercare di uniformarsi alle specifiche descritte in questo documento in modo da interpretare il codice HTML in modo corretto.

Imparare le basi dell'HTML ed essere in grado di creare semplici pagine web non è difficile, che si tratti di HTML 4, o HTML 5 i concetti di base sono sempre gli stessi.
Un link scritto in HTML 4 o HTML 5 è dato dallo stesso identico codice.
Così come una immagine, o un titolo, o un paragrafo.

Quando si ha qualche esigenza particolare, come visualizzare un video o creare dei grafici vettoriali allora ci si porrà il problema di come sfruttare le nuove funzionalità di HTML5 e di come verificare se il browser le supporta.

Qualsiasi guida, anche se datata, può servire allo scopo: anche se comunque è sempre meglio cercare guide nuove. Ma non preoccupatevi, di qualsivoglia versione si tratti, sempre di HTML stiamo parlando.