COME PROGETTARE UN SITO INTERNET - … · Cos’è un Sito Web Siti Web Statici e Dinamici, Blog,...

66
COME PROGETTARE UN SITO INTERNET Utilizzare gli strumenti offerti dal web

Transcript of COME PROGETTARE UN SITO INTERNET - … · Cos’è un Sito Web Siti Web Statici e Dinamici, Blog,...

COME PROGETTARE

UN SITO INTERNETUtilizzare gli strumenti offerti dal web

Cos’è un Sito Web

Siti Web Statici e Dinamici, Blog, E-Commerce, Web Application

Desktop, Mobile, Responsive e Nuove Tipologie di Navigazione

Usabilità, User Experience, Engagement, Conversioni

Architettura e Progettazione Grafica

Strumenti per realizzare e gestire siti web - CMS

CMS proprietari e CMS Opensource

JoomlaWordpress Magento

Drupal, Prestashop, Opencart e CMS minori

Monitoraggio ed Allineamento alle Attitudini degli Utenti

Dominio, Estensione, Host, DB

COS’É UN SITO WEB

COS’É UN SITO WEB

993000 risultati

2 fra i primi 5 hanno suscitato subito interesse, fornendo immediatamente un piccolo estratto di definizione

3 dei primi 5 hanno mostrato informazioni incomplete o errate

Le fonti reperite online non sempre sono attendibili.

COS’É UN SITO WEB

Un sito è uno spazio nel web in cui un'azienda, un privato o chiper essi esprimono delle idee, propongono un qualcosa osemplicemente condividono dei pensieri.Fisicamente un sito è uno spazio in un pc, che chiamiamo servere che viene associato ad un indirizzo.

Amdweb

Sito internet è uno di quei concetti che diamo per scontato, ma non sappiamo mai bene di preciso cosa significhi

COS’É UN SITO WEB

Un sito web o sito Internet (anche abbreviato in sito se chiaro il contesto informatico) è un insieme di pagine web correlate,

ovvero una struttura ipertestuale di documenti che risiede su un server web.

Wikipedia

Collegamento ipertestuale

In informatica, un collegamento ipertestuale (in inglese hyperlink, spesso abbreviato in link, usato anche in italiano) è un rinvio da

un'unità informativa su supporto digitale ad un'altra. È ciò che caratterizza la non linearità dell'informazione propria di un

ipertesto.

COS’É UN SITO WEB

Sito Luogo, Località

WebIl World Wide Web (in inglese letteralmente: "ragnatela mondiale"), abbreviato Web, sigla

WWW, è uno dei principali servizi di Internet che permette di navigare e usufruire di un insieme

vastissimo di contenuti (multimediali e non) collegati tra loro attraverso legami (link), e di

ulteriori servizi accessibili a tutti o ad una parte selezionata degli utenti di Internet.

Contenuti Insieme di informazioni sull’argomento, oggetto di trattazione o di discussione

COS’É UN SITO WEB

Sito

Luogo sul web

Web

Insieme di infrastrutture e collegamenti di internet

Mezzi di trasporto

Indirizzi

Posizioni del territorio virtuale

Browser

Internet

Territorio Virtuale

COS’É UN SITO WEB

COS’É UN SITO WEB

Tipologia

Piccola impresa

Titolo

Azienda Agricola Stefania Mezzetti

Indirizzo

http://www.vinimezzetti.it/

Tipo di attività

Produzione agrolimentare

COS’É UN SITO WEB

Tipologia

Grande Impresa

Titolo

Asos

Indirizzo

http://asos.com/

Commercio abbigliamento

Tipo di attività

Tipologia

Media impresa

Titolo

Marini Home Design

Indirizzo

http://www.mobilimarini.it/

Rivenditore Arredamento

Tipo di attività

COS’É UN SITO WEB

Multinazionale

Titolo

Volkswagen

Indirizzo

http://it.volkswagen.com/

Produzione Automobili

Tipo di attività

Tipologia

Rivista

Titolo

Teatro Naturale

Indirizzo

http://www.teatronaturale.it/

Informazione Agroalimentare

Tipo di attività

Tipologia

COS’É UN SITO WEB

Centro Commerciale Virtuale

Titolo

Ebay

Indirizzo

http://www.ebay.com/

Servizi di compravendita fra utenti

Tipo di attività

Tipologia

Multinazionale

Titolo

Facebook

Indirizzo

http://www.facebook.com/

Servizi di connessione fra utenti

Tipo di attività

Tipologia

COS’É UN SITO WEB

Un sito web o sito Internet è uno spazio nel web (ospitato fisicamente su di un server), accessibile tramite un browser e raggiungibile tramite un indirizzo, in cui un'azienda, un privato o chi per essi ha la possibilità di organizzare e mettere a disposizione del contenuto, e quindi dell'informazione sull'argomento o sull'oggetto di trattazione del sito stesso.

Siti Web come raccoglitori di informazioni

L'insieme di informazioni contenute su un sito web viene solitamente organizzato in pagine correlate, collegate attraverso

appositi link ipertestuali.

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Sito web è quindi un termine incredibilemente generico, all’interno del

quale si possono distinguere categorie di prodotti diversi, basati su

tecnologie differenti e finalizzati a servizi di diversa natura.

Sito Web Statico

Sito Web Dinamico

Blog

E-commerce

Web Application

Sito Vetrina

Portali

Community

Motori di ricerca

Forum

Social Newtork

Altro

Tipologia

Piccola impresa

Titolo

Azienda Agricola Stefania Mezzetti

Indirizzo

http://www.vinimezzetti.it/

Tipo di Sito

Statico

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Sito Web Statico

Tipologia di sito web che permette ad un utente generico di visualizzare i contenuti senza però poter interagire con essi. Solitamente scritto in html puro e non collegato ad un database, non permette quindi al generico amministratore di modificarne le informazioni.

Tipo di attività

Produzione agrolimentare

Tipologia

Media impresa

Titolo

Marini Home Design

Indirizzo

http://www.mobilimarini.it/

Rivenditore Arredamento

Tipo di attività

Tipo di Sito

Dinamico

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Sito Web Dinamico

Il termine web dinamico viene utilizzato per indicare tutte quei sistemi Web che interagiscono attivamente con l'utente modificando le informazioni mostrate in base a quelle ricevute dall'utente stesso e che consentono anche un più rapido aggiornamento del sito web da parte dell'amministratore.Questa tipologia di siti è solitamente collegata ad un database utilizzato per memorizzare i contenuti.

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Tipologia

Grande Impresa

Titolo

Asos

Indirizzo

http://asos.com/

Tipo di attività

Commercio abbigliamento

Tipo di Sito

Ecommerce

E-commerce

L’E-commerce consiste nello svolgimento di attività commerciali e di transazioni per via elettronica e comprende attività diverse quali: la commercializzazione di beni e servizi per via elettronica, la distribuzione on-line di contenuti digitali, l’effettuazione per via elettronica di operazioni finanziarie. Una piattaforma e-commmerce è quindi un sito web dinamico che permetta di effettuare tali operazioni

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Tipologia

Rivista

Titolo

Teatro Naturale

Indirizzo

http://www.teatronaturale.it/

Tipo di attività

Informazione Agroalimentare

Tipo di Sito

Blog

Blog

Nel gergo di Internet, un blog è un particolare tipo di sito web in cui i contenuti vengono visualizzati in forma cronologica, ordinati in categorie e correlati per tag. In genere un blog è gestito da uno o più blogger che pubblicano, più o meno periodicamente, contenuti multimediali e/o testuali, in forma di post, concetto assimilabile o avvicinabile ad un articolo di giornale.

Anche Il blog può essere considerato un sito web dinamico.

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Tipologia

Multinazionale

Titolo

Volkswagen

Indirizzo

http://it.volkswagen.com/

Tipo di attività

Produzione Automobili

Tipo di Sito

Web Application / Portale

Web Application

L’espressione Web Application indica un'applicazione accessibile/fruibile via web per mezzo di un network, come ad esempio una Intranet all'interno di un sistema informatico o attraverso la Rete Internet, ovvero in una architettura tipica di tipo client-server, che offre determinati servizi all'utente client.

Portale

Un portale web, o portale internet (informalmente anche portale) è un sito web che costituisce un punto di partenza, una porta di ingresso, ad un gruppo consistente di risorse in internet o di una intranet.

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Tipologia

Multinazionale

Titolo

Facebook

Indirizzo

http://www.facebook.com/

Tipo di attività

Servizi di connessione fra utenti

Tipo di Sito

Web Application / Social Newtork

Social Network

Si intende con Social Network quel tipo di struttura informatica basata sul paradigma di Web Application, che permetta di creare una rete sociale di virtuale, ovvero che semplifichi il processo di nascita e mantenimento dei lagami fra utenti. Il concetto di Social Network è strettamente legato a quello di profilo personale, lista di contatti, collegamenti e fruizione dell’informazione dai contatti collegati.

SITI WEB STATICI E DINAMICI, BLOG, E-COMMERCE, WEB APPLICATION

Tipologia

Centro Commerciale Virtuale

Titolo

Ebay

Indirizzo

http://www.ebay.com/

Tipo di attività

Servizi di compravendita fra utenti

Tipo di Sito

Web Application / Ecommerce

Sistema informatico inteso a sostenere comunità omogenee attraverso il supporto, l'aumento e l'implementazione delle reti sociali già esistenti.

Forum

Insieme delle sezioni di discussione in una piattaforma informatica, o una singola sezione, oppure lo stesso software utilizzato per fornire questa struttura.

Motori di ricerca

Un motore di ricerca è un sistema automatico che analizza un insieme di dati e restituisce un indice dei contenuti disponibili classificandoli in modo automatico in base a formule statistico-matematiche che ne indichino il grado di rilevanza data una determinata chiave di ricerca.

Community

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Il termine generico Sito Web risponde quindi ad un’ampia e contorta

possibilità di classificazione. Nonostante ciò è possibile individuare

una serie di caratteristiche comuni ad un po’ tutti i siti che navighiamo.

Alcune di queste caratteristiche sono nel tempo diventate convezioni e

vanno a definire quelli che sono i canoni di usabilità di un sito web.

L’usabilità viene definita come "la capacità di un sistema di essere compreso, appreso e utilizzato dagli utenti quando usato sotto condizioni specificate"

Usabilità

Accessibilità

Utilità

Semplicità

Funzionalità

Alcune convenzioni consolidate ci permettono di

avvicinarci in maniera semplice ai canoni di usabilità.

Vediamo ad esempio le pagine più comuni a un po’ tutti

i siti web.

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Home

Sempre presente, rappresenta la pagina principale di presentazione del sito, dei suoi contenuti, e delle pagine web secondarie tramite essa raggiungibili. Se consideriamo il sito come una brochure aziendale, la home può essere paragonata alla copertina.

Pagina di “atterraggio”, appositamente sviluppata per trattare argomenti specifici ed attrarre tanto i motori di ricerca quanto gli utenti, eventualmente veicolandoli verso aree del sito di particolare interesse.

Landing

Contatti

Pagina quasi sempre presente, spesso inserita fra le ultime voci dell’indice o del menù, è utilizzata per fornire al navigatore informazioni utili a contattare l’azienda, spesso provvista di apposito form contatti automatizzato e

mappa navigabile

Pagine

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Pagine Istituzionali

Pagine come ad esempio “Chi Siamo” o “L’ Azienda” sono quasi sempre incluse nei siti web, eventualmente popolate con contenuti testuali e multimediali, vengono utilizzate per presentare l’argomento del sito stesso al navigatore.

Pagine Archivio

Sono pagine archivio quel tipo di pagine utilizzate per raccogliere piccole introduzioni di più sottopagine sullo stesso argomento, che rendano possibile all’utente lo spostarsi con facilità fra le varie sottopagine (spesso chiamate Articoli,

Entry o Post).Questo tipo di pagine di solito viene assimilato alle pagine di Categoria, Tag o Tipo di Dati. Anche la pagina di ricerca può

essere assimilata ad una pagina archivio. Ne sono esempio quelle sezioni che spesso prendono il nome di “Prodotti”, “Servizi”, “Porfolio” ecc...

Pagine Articolo

Rappresentano le sottopagine di una pagina archivio e contengono una descrizione dettagliata dell’argomento in questione. Nella maggiorparte dei casi in queste pagine è possibile trovare anche riferimenti ad articoli collegati o correlati.

Pagina presente su piattaforme Web E-commerce. Viene utilizzata per completare il processo di acquisto dei prodotti selezionati dall’utente.

Checkout

Carrello

Pagina presente su piattaforme Web E-commerce. E’ utilizzata come area di raccolta dei prodotti selezionati dall’utente.

Anche la struttura delle varie pagine segue delle convenzioni oramai consolidate, adeguate al senso di lettura occidentale (da sinistra verso destra). Tali consuetudini prevedono che alcune aree del layout restino inalterate mentre altre vengano adeguate alla specifica pagina del sito sulla quale il navigatore si trova.

Layout

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Header o Testata

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Elementi in evidenza(Spesso presente solo in home)

Sidebar (o barra laterale) destra e/o Sinistra (Spesso presenti solo nelle pagine interne)

Contenuto

Elementi in coda

Footer o Piè di Pagina

Header

Rappresenta grosso modo il preambolo del sito web, come anche il primo elemento che si presenta all’utente e che deve permettergli di muoversi agilmente attraverso le varie sezioni del sito. L’header solitamente rimane invariato su tutte le pagine; sia in termini contenutistici che di posizionamento. Fra gli altri, comprende di solito i seguenti elementi:

● Logo● Menù principale● Icone Social● Barra di ricerca● Eventuale Pay Off

Sempre per le convenzioni di lettura occidentale citate sopra, solitamente si usa inserire il Logo all’estrema sinistra o tuttalpiù al centro; le icone social e la barra di ricerca all’estrema destra, menù in evidenza, ed eventuale payoff direttamente a destra o sotto il logo.

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Logo

Cerca nel sito

Link Social

Menù principale

Contenuti in evidenza

Spesso presenti solo in home, e consistenti in una singola immagine, uno slideshow o un video; vengono utilizzati per mostrare da subito i contenuti e le aree del sito che potrebbero interessare l’utente.

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Sidebar

Spesso presenti solo nelle pagine interne, ed eventualmente variabili da pagina a pagina. Lo spazio delle sidebar è usualmente dedicato ad ospitare contenuti collegati, correlati o comunque inerenti alla pagina o alla sezione su cui l’utente si trova. Rappresentano uno spazio utilizzabile per veicolare l’utente verso una direzione suggerita piuttosto che una scelta.

Contenuto

L’area di contenuto rappresenta la parte più importante di un sito web, ed è quella che viene utilizzata per rendere disponibile all’utente le informazioni vere e proprie della pagina in cui si trova.

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Elementi in coda

Diffuso tanto sulle varie pagine del sito quanto in home page, questo spazio viene nella maggior parte dei casi utilizzato per offrire all’utente contenuti ed aree del sito che potrebbero interessargli a prescindere dalla pagina che sta navigando.

Footer

L’area del footer non è meno importante di quella dell’header e rimane solitamente invariata in ogni pagina del sito. Si tratta della parte convlusiva delle varie pagine ed ha senso utilizzarla tanto per permettere all’utente di non dover tornarein testa del sito (proponendogli quindi una serie di link che gli permettano di navigare ulteriormente) e di poter contattare

facilmente il proprietario nel caso in cui ne fosse sua intenzione.Fra gli altri, comprende di solito i seguenti elementi:

● Logo● Menù principale● Icone Social ● Contatti e Riferimenti● Partita IVA (obbligo legale)● Credits

Naturalmente, il logo spesso e volentieri viene posizionato a sinistra e i credits a destra.

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

User Experience

Con tutte queste similitudini fra vari tipi di siti webper potersi presentare al meglio e riuscire ad esserecompetitivi, oltre ad essere usabile ed averecontenuti di qualità un sito deve riuscire a garantireall’utente una buona controparte estetica, cherispecchi l’immagine dell’azienda, come anche acoinvolgerlo attraverso un’esperienza pulita eaccattivante.

Oltre ciò, ha sicuramente senso realizzare o pensare di realizzare un sito websoltanto se si hanno in mente degli obiettivi prestabiliti.Engagement e Conversioni in questo caso divengono prioritari.Se poi si tratta del sito web di una pmi, probabilmente gli obiettivi potrebberoessere vendere prodotti o servizi, espandere la clientela, aprirsi a nuovimercati, fidelizzare il cliente ecc..

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

EngagementObiettivi come quelli appena nominati potrebberoessere raggiunti tramite il tenativo di “ingaggiare” ilnavigatore, rendendolo partecipe della realtàimprenditoriale cui si sta interessando, magaricoinvolgendolo virtualmente in maniera attiva. Ilprocesso naturalmente prende il sito web come base,ma spazia in altre grandi aree del web. Utilizzare tuttele accortezze fin qui descritte può essere un buoninizio. Conversioni

Gli obiettivi possibili su un sito non devono per forza riguardare la vendita diun prodotto, ma potrebbero riguardare l'iscrizione ad una newsletter, lacompilazione di un form o una richiesta di informazioni. Quando un obiettivoanche banale viene raggiunto, si dice che c’è stata una conversione.Un dato importante nell’ambito web è il tasso di conversione, misurata come ilrapporto tra il numero dei visitatori che accedono ad una pagina (o sito web) equanti di questi compiono una determinata azione.

USABILITÀ, USER EXPERIENCE, ENGAGEMENT, CONVERSIONI

Siamo pigri

Se l’ambizione è realizzare delle conversioni, nel progettare un sitoweb e creare i contenuti da offrire agli utenti vanno tenute a menteuna serie di attitudini fondamentali.

Ci distraiamo facilmente

Prendiamo decisioni inconsciamente

Adoriamo le cose facili

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

Navighiamo con un gran numero di devicediversi

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

Proprio per questo i siti web moderni, al fine di essere accessibili efruibili, devono adattarsi alle dimensioni del dispositivo da cuivengono visualizzati.

Fino a qualche anno fa i dispositivi mantenevano una media didimensioni che non andava sotto i 980px. I web designer basavanoinfatti i loro layout sulla 980grid e se lo schermo eccedeva taledimensione la griglia si posizionava automaticamente al centro diesso.

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

980 px

Ad oggi le convenzioni del web design sonoleggermente cambiate e ci sono due diversesoluzioni per fare in modo che un sito si adatti aldispositivo di visualizzazione. Il responsive design ela versione mobile. Quale che sia la soluzione, ladistribuzione degli elementi sui vari device vieneeffettuata in modo da dare un senso di lettura piùverticale quanto più si riduce la larghezza deldispositivo.

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

980 px

Desktop

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

Tablet

Smartphone

DESKTOP, MOBILE, RESPONSIVE E NUOVE TIPOLOGIE DI NAVIGAZIONE

Sito responsive

Il sito responsive è quel sito che

prevede dei meccanismi di

adattamento alla dimensione della

finestra dalla quale vengono

visualizzati.

Versione mobile

Un sito oltre che essere usabile

dall’utente umano deve poter

essere indagato dai motori di

ricerca, che oltre ai contenuti

visibili per ogni pagina vanno a

visionarne alcuni aggiuntivi che

vengono denominati “meta

informazioni”.

La versione mobile di un sito è un

duplicato del sito stesso, pensato

e implementato per essere

visulizzabile dai dispositivi mobili.

Pare che questa non sia una

soluzione troppo adottata nella

community di sviluppatori web, che

preferiscono dare all’utente una

certa omogeneità di fruizione.

Meta infomazioni

DOMINIO, ESTENSIONE, HOST, DB

Realizzare un sito web - Passo 1: Scelta del dominio

Primo step per la creazione di un sito web è la scelta e l’acquisto di un

dominio, uno spazio Host (uno spazio sul web), ed un DataBase

(solitamente un mysql).

Scegliere un nome a dominio

Che sia descrittivo e facile da ricordare

Parte fondamentale del dominio, identifica immediatamente

tipologia o provenienza del sito. Fra le varie scelte possibili:

● com

● org

● net

● it

Scegliere un’estenzione

Un dominio rappresenta un indirizzo web attraverso il quale sia possibile arrivare ad un sito. Si presenta nella forma:www.nomeadominio.estensione

A volte viene indicato anche come URL (Uniform Reference Locator).

Verificare la disponibilità

DOMINIO, ESTENSIONE, HOST, DB

Realizzare un sito web - Passo 2: Scelta del provider

Per fare in modo che il nostro sito siaperfettamente utilizzabile da qualsiasiutente connesso al web dobbiamo farein modo che i sorgenti e le informazionivengano memorizzati su di unamacchina ad alte prestazioni, sempreaccessa e connessa, capace di ricevere esoddisfare richieste. Insomma ci servequello che di solito viene chiamatoServer. Per acquistarne uno dedicatodovremmo sicuramente affrontare unacifra proibitiva, per cui la scelta che si fanella maggior parte dei casi è acquistareuno spazio su una delle macchine diquello che viene detto Provider.Nella maggior parte dei casi, il Providermetterà a disposizione anche uno o piùDataBase mySql.

Scegliere la tipologia di servizio del provider

Fra le varie soluzione offerte dal provider 3 sono quelle più diffuse

Hosting Condiviso

Virtual Private Server

Cloud

DOMINIO, ESTENSIONE, HOST, DB

Hosting Condiviso

Forma classica di hosting in cui un unico server è destinato ad ospitare una pluralità di siti web (a volte anche diversecentinania se non adirittura migliaia) appartenenti a diversi titolari.Nell'hosting condiviso tutti i siti web presenti sullo stesso server devono, ovviamente, condividere le capacità e le risorsedella stessa macchina con il rischio che i problemi di un singolo sito web si riflettano anche su tutti gli altri.

Virtual Private Server (VPS)

Un server virtuale è una porzione di un server fisico in cui viene emulato (mediante un apposito software di virtualizzazione) un ambiente indipendente del tutto analogo a quello che si avrebbe in un server dedicato. In un certo senso possiamo definire un VPS come una soluzione a metà strada tra l'hosting condiviso (perchè si condivide spazio e risorse di una macchina "fisica") e l'housing (perchè si può gestire l'ambiente a proprio piacimento ed in piena autonomia esattamente come se si disponesse di un intero server hardware!).

Cloud

Il termine cloud indica una particolare architettura di sistemi informatici in cui le risorse sono distribuite e scalabili sullabase delle effettive necessità dell'utilizzatore. Ciò signifca che i dati sono memorizzati e caricati in remoto, e cheall’occorenza vengono attivate o disattivate una serie di risorse dell’architattura atte a soddisfare le esigenze di trafficointernet.

ARCHITETTURA E PROGETTAZIONE GRAFICA

Realizzare un sito web - Passo 3: Architettura dell’informazione

Una volta ottenuto uno spazioadeguato ad ospitare il sito web èbene partire con un’ampia attività diprogettazione.Tale attivà usualmente si suddividenella progettazione dell’architetturadell’informazione e nellaprogettazione grafica.La prima delle due è di fondamentaleimportanza e pone le fondamenta perla struttura del sito web.

Definire la struttura del menù principale

Definire il menù principale permette di iniziare a dare un

primo ordinamento alle informazioni presenti sul sito.

Il menù principale è un importante elemento del design del

sito, nonchè strumento principale per l’utente durante la

navigazione.

Esso può essere considerato alla stregua di un sommario o

indice su di una pubblicazione cartacea.

Una volta definito il menù si deve passare a definire i tipi di

dati che andranno a popolare il sito. Il tipo di dato “Pagina”

ad esempio è sempre presente. Altri tipi di dati abbastanza

utilizzati sono “Prodotti”, “Servizi”, “News” ecc..

Definire i vari tipi di dati

Definire Gerarchie e Categorie

Per dare all’utente la possibilità di spostarsi facilmente all’interno di grandi quantità di informazione è bene

collegare e mettere in relazione le varie entry del sito fra di loro. Per farlo di solito si utilizzano diversi gradi di

annidamento e la definizione di categorie e tag cui andranno poi associate le vari informazioni del sito.

ARCHITETTURA E PROGETTAZIONE GRAFICA

Definire la distribuzione degli elementi nel layout

Adesso che tutta l’informazione da inserire sul sito dovrebbe essere stata definita ed ordinata

si passa a ipotizzare come i vari elementi definiti in fase di architettura vadano distribuiti tanto

nell’home page quanto nelle pagine interne.

Realizzare un sito web - Passo 4: Progettazione Grafica

L’attività di progettazione finisce quindi con unarielaborazione grafica di quanto definito;fondamentale per poter appurare che tuttofunzioni effettivamente come previsto comeanche che si stia procedendo nella giusta direzioneestetica.Di solito è un grafico ad occuparsi di questaattività, producendo una serie (2/3) di bozzegrafiche, e rifinendo successivamente quellaconcordata con il proprietario del sito.

STRUMENTI PER REALIZZARE E GESTIRE SITI WEB - CMS

Realizzare un sito web - Passo 5: Scelta del CMS

Finita la fase di progettazione, entriamo finalmente nel pratico ed iniziamo astrutturare il sito web.Per farlo dovremmo sicuramente servirci di quello che viene chiamato ContentManagement System, o Sistema di Gestione dei Contenuti.

Un CMS è uno strumento software, installato su un server web, il cui compito èfacilitare la gestione dei contenuti di siti web, svincolando il webmaster daconoscenze tecniche specifiche di programmazione Web.

Possiamo quindi dire che un CMS è uno strumento che ci permette di installare egestire siti web dinamici. L’utilizzo di un simile sistema è fondamentale in quantosvincola il webmaster da competenze tecniche web e permette a chiunque digestire un sito web in maniera banale.

La diffusione dell’utilizzo di CMS è stata così importante che la community di sviluppatori

Web internazionale ha inziato a creare dei sistemi gratuiti e a disposizione tanto dell’utente

esperto che li voglia utilizzare come base di partenza per ulteriori sviluppi, quanto all’utente

meno esperto che li voglia usare in maniera banale per la semplice gestione di un sito.

CMS PROPRIETARI E CMS OPENSOURCE

CMS Proprietari

Il CMS di questa tipologia è un sistema chiuso, diproprietà di chi lo sviluppa. Nella maggior parte dei casi ilcodice sorgente non è noto al grande pubblico nè fruibiledal titolare del sito web ed è costruito ad hoc perrispettare precisi canoni di usabilità sicurezza e velocità.

Fra i pro dell’utilizzare un sistema proprietario:● Alto grado di originalità● Personalizzazione● Semplicità● Velocità● Ampie garanzie di sicurezza

Fra i contro invece:● Basse probabilità di evoluzione● Integrazioni macchinose● Scarsa diffusione di istruzioni e documentazione● Vincolo forte con gli sviluppatori del sistema● Costi maggiori

CMS Open Source

Un CMS Open Source è invece un sistema aperto, gratuito, incui il codice è a disposizione di chiunque lo voglia indagare.Utilizzare un sistema del genere spesso significa avere inmano una struttura costituita per il grande pubblico del web,piena di funzionalità (anche inutili alle volte) e facilmenteespandibile.

Fra i pro di un sistema Open Source abbiamo:● Costi di installazione e configurazione contenuti● Modularità● Libertà nei confronti dello sviluppatore● Ampia diffusione di documentazione, wiki ecc.● Alte probabilità di evoluzione

Fra i contro:● Scarse garanzie di sicurezza● Potenziali funzionalità superflue● Basso grado di originalità

CMS PROPRIETARI E CMS OPENSOURCE

Realizzare un sito web - Passo 6: Installazione del CMS

Una volta scelto il CMS da utilizzare per creare il sito web ne va effettuatal’istallazione. Il processo di istallazione è tutt’altro che banale e, tanto per unsistema proprietario quanto per un sistema Open Source, è bene che sia una figuracompetente a procedere in tale senso.

Realizzare un sito web - Passo 7: Gestione del CMS

Installato e configurato il tutto inizia l’effettiva attività di gestione del sito web.Dal primo caricamento contenuti all’aggiornamento periodico, l’amministratore dovràprendere dimestichezza con il sistema di gestione.Alcuni sistemi nascono con l’obiettivo di favorire la gestione del contenuto multimedialegenerico, altri sono più orientati verso la gestione di meccanismi di commercioelettronico.Andiamo adesso a vedere i principi di gestione di 3 fra i più famosi CMS diffusi sul web:

WORDPRESS

Sistema di gestione dei contenuti pubblicato per la prima volta nel2003 e oramai alla versione 4.1, al momento è uno dei CMS piùutilizzati a livello globale.Elastico ed essenziale, Wordpress affianca ad un interfaccia semplice efunzionale un sistema di integrazione ed evoluzione che ne aumenta lepotenzialità in manieria tutt’altro che banale.

Per chi volesse prendere dimestichezza con WordPress, ecco unminimo di lessico essenziale da conoscere:

● Plugin● Tema● Editor● Widget● Post● Media

Wordpress utilizza una tipizzazione molto forte, che prevede lapossibile creazione di un’ampia gamma di tipi di dati, tutti discendentidel tipo di dato Post.

WORDPRESS

WORDPRESS

Bacheca Backend

WORDPRESS

Tipi di dati

Area solitamente dedicata alla gestione dei contenuti del sito web.

I tipi di dati Articoli, Pagine e Media sono inclusi di default.

● Articoli è utilizzabile per gestire una sezione stile blog;

● Pagine è invece dedicato alla gestione delle pagine generiche

● Media viene usato per la gestione di qualsivoglia tipo di contenuto

multimediale

Aspetto

Sezione utilizzabile per modificare molte caratteristiche dell’aspetto del sito,

comprende al suo interno:

● Gestione del tema

● Gestione dei menù

● Gestione dei widget

Plugin

Area del CMS dedicata all’integrazione di funzionalità

WORDPRESS

Layout backend modifca articolo o pagina

WORDPRESS

Editor contenutoEditor Url Pagina

Editor Titolo Pagina

Informazioni pubblicazione

Call to Action Aggiornamento Pagina

WORDPRESS

Funzionalità aggiuntive

Pannello gestione meta informazioni

Immagine collegata alla pagina

JOOMLA

CMS nato nel 2005 e già alla versione 3.3, fino a poco tempofa competeva con WordPress per il titolo di sistema piùutilizzato per la gestione dei contenuti.Rigido ma con ampie garanzie di sicurezza, Joomla prensentaun’esperienza utente leggermente più macchinosa; maconserva ugualmente le caratteristiche di integrabilità equindi porta con se diverse possibilità di evoluzione.Per chi volesse prendere dimestichezza con Joomla, ecco unminimo di lessico essenziale da conoscere:

● Plugin● Componenti● Estensioni● Templates● Editor● Moduli● Articoli

Se usate Joomla cercate di far integrare il componente k2,ottimo sistema aggiuntivo di gestione dei contenuti

JOOMLA

JOOMLA

Bacheca Backend

JOOMLA

Gestione Menù

Gestione Banale Contenuti

Gestione funzionalità aggiuntive (fra cui sistema di gestione

contenuti k2)

Installazione e Rimozione funzionalità aggiuntive e template

JOOMLA

Layout backend modifca articolo o pagina

JOOMLA

Gestione Titolo

Gestione Url

Navigazione contenuti multimediali

Gestione Meta Informazioni

Call to Action e stato Pubblicazione

JOOMLA

Testo Completo

Testo Introduttivo

MAGENTO

I CMS Content Oriented visti fin’ora, se integrati con le giuste componenti, possonoandare bene per gestire anche E-Commerce in cui la quantità di prodotti in venditae la complessità di personalizzazione dei prodotti stessi siano contenute.

Nel caso in cui invece i presupposti di cui sopra venganomeno, è bene usare sistemi costruiti ad hoc per la gestione diE-Commerce di grande complessità.

MAGENTO

CMS E-Commerce Oriented lanciato nel 2008, è unapiattaforma che garantisce una serie di vantaggi poichéinclude potenti strumenti di marketing e di gestione delcatalogo prodotti, ed è un sistema estremamente versatilee perfetto per l’ottimizzazione SEO.Le funzioni che lo differenziano da altri CMS e lo rendonouno tra i più scaricati per il commercio elettronico sono:

● possibilità di confronto tra i prodotti● inserimento di recensioni sul prodotto● immagini con possibilità di zoom visualizzazione di

report● gestione degli ordini batch di importazione e di

esportazione di catalogo● personalizzazione degli account spedizione di mail per

l’ordine a più indirizzi contemporaneamente● inserimento di sconti, promozioni e prezzi speciali● possibilità di negozi online multipli● supporto per più valute e supporto per più lingue

Utilizzare Magento vuoldire anche affrontare deicosti di gestione emanutenzione più alti, apartire dallo spaziohosting che deverispondere a precisicanoni di efficienza evelocità.Proprio per questo lascelta di questo CMSpiuttosto che di unContent Oriented con leopportune integrazioniva ponderata caso percaso.

DRUPAL, PRESTASHOP, OPENCART E CMS MINORI

MONITORAGGIO ED ALLINEAMENTO ALLE ATTITUDINI DEGLI UTENTI

Abbiamo visto quanto sia importante l’interazione con l’utente per essere online inmaniera sensata col proprio sito web.Naturalmente un sito ben fatto, usabile e che porti a delle conversioni può portaread una pmi dei vantaggi non banali.Le potenzialità di Internet però non si fermano qui. I siti web ci danno infatti lapossibilità di avere dei feedback taciti da parte degli utenti; registrando le loroattitudini attraverso dei sistemi di monitoraggio adeguati allo scopo.