Progettazione di un sito Web Docente Ing. Maria Mirto Ing. Passante Marco 29/03/2017 Corso di Informatica

Cos’è un sito Web? Sito Web: un insieme coordinato di pagine, relative ad uno stesso tema, che risiedono tipicamente su uno stesso server Esistono diversi tipi di siti Web: completamente liberi: in cui ogni pagina è diversa dalle altre con una struttura regolare nella presentazione delle informazioni, in cui esistono cioè pagine con la stessa struttura e quindi riconoscibili come una serie dove l'informazione è piuttosto statica dove l'informazione è altamente dinamica e quindi una preoccupazione importante deve essere la frequenza di aggiornamento e la manutenzione. Un sito web, o sito Internet, anche abbreviati in sito se chiaro il contesto informatico, è un insieme di pagine web correlate, ovvero una struttura ipertestuale di documenti accessibili con un browser tramite World Wide Web su rete Internet. 29/03/2017 Corso di Informatica

Siti statici vs siti dinamici Dal punto di vista della struttura e della tecnologia utilizzata: siti statici siti dinamici I siti web statici presentano contenuti di sola ed esclusiva lettura. Solitamente vengono aggiornati con una bassa frequenza e sono mantenuti da una o più persone che agiscono direttamente sul codice della pagina (tramite appositi editor web). Si tratta storicamente della prima generazione di siti web. I siti web dinamici presentano invece contenuti redatti dinamicamente (in genere grazie al collegamento con un database) e forniscono contenuti che possono variare in base a più fattori. I siti web dinamici sono caratterizzati da un'alta interazione fra sito e utente; 29/03/2017 Corso di Informatica

Tipologie di siti I siti web vengono poi comunemente divisi in categorie per inquadrarne il settore di operatività o i servizi offerti: Siti a carattere educativo, didattici incoraggiare l'esplorazione del sito secondo un filo logico piuttosto che lasciare la più assoluta libertà nella navigazione. Siti a carattere informativo È importante la natura delle informazioni che si vogliono fornire, se sono relativamente stabili o se cambiano spesso; E’ importante che siano aggiornate tempestivamente; Le informazioni possono essere riconducibili a delle strutture ricorrenti. Se l'informazione è abbastanza strutturata bisognerà allora prendere in considerazione la possibilità di mantenere le informazioni in una base di dati e prevedere meccanismi per la generazione automatica delle pagine. Esempi di siti informativi: cataloghi un sito di un dipartimento universitario che pubblica la lista dei corsi offerti. 29/03/2017 Corso di Informatica

Tipologie di siti Siti di immagine (brochurware) e personali fornire un'immagine ad una organizzazione o ad una persona, e allora la domanda da porsi è qual è l'immagine che si vuole comunicare. Siti commerciali lo scopo principale del sito è attrarre clienti e quindi bisogna progettarlo nell'ottica di attrarre visitatori nella fascia di mercato in cui il prodotto si colloca. Siti che offrono servizi ad esempio un motore di ricerca o un servizio gratuito di posta elettronica, la struttura del sito può essere relativamente semplice ma la complessità risiede nell'applicazione sottostante che realizza il servizio. Portali Siti di intrattenimento Siti di comunità Siti artistici ... Brochureware: A Web site that advertises a product but contains only the equivalent of a paper brochure with no interactivity. 29/03/2017 Corso di Informatica

Analisi È importante capire di quale tipo di sito si tratta facendo un'analisi prima di intraprendere il progetto. Avere in mente l'obiettivo per cui il sito viene costruito, e le caratteristiche del contenuto informativo può aiutare a capire le caratteristiche che il sito stesso deve avere e fare le scelte giuste nella fase di realizzazione. 29/03/2017 Corso di Informatica

Caratteristiche non funzionali di un sito Web Fattori di qualità Navigabilità Accessibilità Usabilità Leggibilità Affidabilità Manutenibilità Sicurezza Nella realizzazione del sito, il progettista deve essere guidato anche dall’obiettivo di fornire non solo un sistema che offra delle funzionalità, ma che le offra con un certo gradi di qualità. Grazie ad un’attenta analisi della qualità il progettista può, in fase di sviluppo, capire se le scelte effettuate e il cammino intrapreso nello sviluppo porta ad un prodotto valido. I principali fattori che caratterizzano la qualità sono: 29/03/2017 Corso di Informatica

I linguaggi Il linguaggio più diffuso con cui i siti web sono costruiti è l‘HTML (Hyper Text Markup Language) e suoi derivati. L'HTML viene interpretato da particolari software chiamati web browser Es: Firefox e Internet Explorer. Alcuni plugin per i browser permettono la visualizzazione di contenuti animati, come Flash, Shockwave o applet Java. Alcuni contenuti possono essere generati dinamicamente sul browser dell'utente, ad esempio tramite JavaScript o Dynamic HTML, tecnologie supportate per impostazione predefinita da tutti i browser recenti. Per la costruzione di siti web dinamici in grado di estrapolare dati da database, inviare email, gestire informazioni, ecc., i linguaggi di scripting più diffusi sono PHP e ASP.NET Per la creazione di siti internet molti webmaster utilizzano comunemente strumenti automatizzati, chiamati web editor, grazie ai quali redigere il codice anche senza averne un'approfondita conoscenza. l plugin (o plug-in o addin o add-in o addon o add-on), in campo informatico è un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l'utilizzo di nuove funzioni non presenti nel software principale. La capacità di un software di supportare i plugin è generalmente un'ottima caratteristica, perché rende possibile l'ampliamento e la personalizzazione delle sue funzioni in maniera semplice e veloce. In alcuni casi, il plugin viene anche denominato estensione (extension): ne sono esempi l'architettura a estensioni di Mozilla Firefox 29/03/2017 Corso di Informatica

HTML L’ HTML (HyperText Markup Language) è il linguaggio utilizzato dai documenti Web. Grazie al loro specifico formato, i documenti presenti su Web sono veri e propri ipertesti. Un ipertesto è un documento nel quale alcuni elementi (parole attive sottolineate) rappresentano dei “legami” con altri documenti. La struttura viene definita interattiva in quanto è possibile selezionare gli elementi attivi per avviare immediatamente il collegamento al documento di interesse ad esso riferito. 29/03/2017 Corso di Informatica

HTML L’HTML è un linguaggio molto semplice ma nello stesso tempo molto potente, creato per realizzare pagine ipertestuali da pubblicare sulla rete Internet, grazie al servizio WWW (World Wide Web). Un documento HTML è composto da un testo intervallato da alcuni elementi (o tag) che ne indicano la funzione logica oppure inseriscono dei comandi di formattazione. Il linguaggio HTML è caratterizzato da una serie di elementi ed attributi che sono di riferimento quando viene esaminato il codice delle pagine realizzate. 29/03/2017 Corso di Informatica

HTML Tali elementi definiscono le due sezioni di un documento HTML: l’intestazione <HEAD> il corpo <BODY> Definiscono anche gli elementi specifici del documento (es. titolo, commenti,...) ELEMENTI PRINCIPALI: definiscono i paragrafi e le intestazioni del documento, creando la struttura principale della pagina CARATTERISTICHE DEL TESTO: modificano il ruolo e l’aspetto estetico del testo contenuto tra l’inizio e la fine LISTE (Elenchi) COLLEGAMENTI: creano i collegamenti ipertestuali e la specificazione dei puntamenti IMMAGINI TABELLE: consentono di formattare i dati e di organizzare in modo complesso la struttura della pagina MODULI (Forms): per la creazione di questionari interattivi 29/03/2017 Corso di Informatica

HTML: Comandi principali Definiscono i paragrafi e le intestazioni del documento, creando la struttura principale della pagina: < HTML > Segnala al browser il linguaggio in cui è redatto il documento < HEAD > Raccoglie le informazioni relative al documento < TITLE > Assegna un titolo al documento < BODY > Delimita il contenuto di una pagina HTML 29/03/2017 Corso di Informatica

HTML: Formattazione del testo Modificano il ruolo e l’aspetto estetico del testo contenuto tra l’inizio e la fine: < P > Inizia un nuovo paragrafo < BR > Inserisce un ritorno a capo < STRONG > Trasforma il testo delimitato in carattere neretto (logico) < CITE > Inserisce una citazione rientrate nel testo 29/03/2017 Corso di Informatica

HTML: Liste di elenchi < UL > Inizio di una lista non numerata < OL > Inizio di una lista numerata < LI > Indica l’inizio di una voce di lista < MENU > Inizio di una lista di tipo a menu 29/03/2017 Corso di Informatica

HTML: Collegamenti Creano i collegamenti ipertestuali e la specificazione dei puntamenti < A HREF=“URL” > indica un collegamento ad un’altra pagina. Alcuni URL possibili sono: http://www.esempio.it/homepage.htm Puntamento ad una pagina esterna (la pagina risiede su un web server esterno) file://c:\sito\pagina.htm Puntamento ad una pagina interna (la pagina risiede sul web server interno) mailto:nome.utente@provider Per spedire una mail al destinatario < A HREF=“#ancora” > indica un riferimento all’interno di una stessa pagina 29/03/2017 Corso di Informatica

HTML: Immagini < IMG SRC=“nomefile.gif” > Inserisce l’immagine nella pagina < IMG ALT=“testo alternativo” > Permette di visualizzare del testo alternativo all’immagine per utenti che utilizzano un browser solo testo < IMG ALIGN=“top/middle/bottom” > Indica l’allineamento dell’immagine rispetto alla riga di testo (alto/centro/basso) 29/03/2017 Corso di Informatica

HTML: Tabelle Consentono di formattare i dati e di organizzare in modo complesso la struttura della pagina: < TABLE > Inserisce una tabella < TR > Indica una nuova riga di tabella < TD > Indica una singola cella all’interno di una riga di tabella < CAPTION > Inserisce un titolo per la tabella < TH > Inserisce una riga per i titoli dei campi della tabella 29/03/2017 Corso di Informatica

Figure professionali Attività complessa che coinvolge più persone e professionalità il webmaster, che progetta il sito e ne è il responsabile l'esperto di architettura dell’informazione (information architect), che è responsabile dell'organizzazione dell'intero sito e della struttura di navigazione il content manager, che è responsabile della redazione del contenuto e della struttura logica il webdesigner, che è responsabile dell'aspetto grafico (layout) il programmatore o sviluppatore, che è responsabile del comportamento delle pagine l‘esperto di webmarketing, che si occupa della promozione del sito nel web il responsabile SEO (search engine optimization), che si occupa del posizionamento del sito all'interno degli indici dei motori di ricerca il sistemista, che gestisce la rete, l‘hardware e il software di base del web server in cui è ospitato il sito. Realizzare un sito Web richiede: Capacità editoriali e di strutturazione del contenuto Capacità di presentazione grafica Capacità di programmazione 29/03/2017 Corso di Informatica

Struttura di un sito Web Home Page Punto di ingresso nel sito Posto migliore per inserire un menù di collegamenti o un sommario del sito Non soggetta a grosse variazioni Pagine Differenti per lunghezza e contenuti L'home page Tutti i siti web sono organizzati attorno ad una home page che rappresenta il punto d'ingresso logico nel sistema di pagine web. L'home page inoltre, è la pagina più visitata di ogni sito web e su questa pagina si basa la prima impressione dei vostri utenti. Se i vostri utenti avranno un'impressione negativa, difficilmente continueranno la navigazione delle vostre pagine web. L'alta visibilità della home page la rende anche il posto migliore per inserire un menù di collegamenti o un sommario del sito. L'home page richiede una progettazione accurata considerando anche che non deve subire grosse variazioni una volta che il vostro sito è on line perché gli utenti resterebbero disorientati se una home page cambia eccessivamente ogni settimana. Le pagine Dopo aver definito l'home page andiamo a progettare le singole pagine del nostro sito che saranno differenti tra loro per lunghezza e contenuti. Lunghezza - Se una pagina web è troppo lunga l'utente non riuscirà a visualizzarla interamente sullo schermo e sarà costretto a scorrerla verticalmente. Lo scorrimento verticale può causare la perdita di contesto da parte dell'utente, perché gli elementi come i titoli dei documenti, gli identificatori del sito e i collegamenti alle altre pagine del sito scompaiono dallo schermo. Se volete progettare pagine lunghe prevedete di inserire pulsanti tipo "Torna Su" a intervalli equivalenti ad una schermata piccola (circa 300 pixel verticali); così facendo l'utente non dovrà mai scorrere più di metà schermo per trovare un pulsante di navigazione che lo riporti all'inizio della pagina. 29/03/2017 Corso di Informatica

Accesso alle pagine web Le pagine di un sito web sono accessibili tramite una radice comune (detta “nome di dominio", per esempio "www.google.it"), seguita da una serie opzionale di "sotto cartelle" e dal nome della pagina. Il nome completo di ogni pagina è detto "indirizzo web" o, più tecnicamente, URI (o URL). Per esempio, nell'indirizzo www.w3c.org/Consortium/Offices/role.html www.w3c.org/ è la radice, o nome di dominio Consortium/Offices/ sono le sottocartelle, separate dal simbolo "/" role.html è il nome della pagina L‘home page di un sito è la prima pagina che si ottiene digitando il solo nome di dominio. l plugin (o plug-in o addin o add-in o addon o add-on), in campo informatico è un programma non autonomo che interagisce con un altro programma per ampliarne le funzioni. Ad esempio, un plugin per un software di grafica permette l'utilizzo di nuove funzioni non presenti nel software principale. La capacità di un software di supportare i plugin è generalmente un'ottima caratteristica, perché rende possibile l'ampliamento e la personalizzazione delle sue funzioni in maniera semplice e veloce. In alcuni casi, il plugin viene anche denominato estensione (extension): ne sono esempi l'architettura a estensioni di Mozilla Firefox 29/03/2017 Corso di Informatica

Come creare un sito web Usufruire dei moltissimi servizi gratuiti su internet GOOGLE SITES WEEBLY BLOGGER ALTERVISTA.ORG NETSONS Vantaggio Creare pagine web con pochi clic, senza installare nulla nel proprio computer e senza conoscere nessun linguaggio di programmazione. Svantaggio Forniscono un nome di dominio di terzo livello Ovvero, del tipo "miosito.sitospite.it" 29/03/2017 Corso di Informatica

Come creare un sito web Svantaggio Forniscono un nome di dominio di terzo livello Ovvero, del tipo "miosito.sitospite.it“ Ad esempio, se scegli come nome del sito “informatica", su uno spazio gratuito, l'indirizzo del sito sarà: informatica.altervista.org, oppure web.tiscali.it/informatica, oppure sites.google.com/site/informatica, oppure informatica.weebly.com oppure informatica.blogspot.com, e così via. leggere bene le clausole per capire i limiti della pubblicazione Ad esempio molti servizi gratuiti chiedono che venga usato lo spazio messo a disposizione, per fini personali e non aziendali o commerciali 29/03/2017 Corso di Informatica

Come creare un sito web Per ottenere un dominio di secondo livello, del tipo pcdazero.it o cocacola.com, occorre acquistarlo. Quanto costa un dominio? Pochissimo! Circa 10 euro all'anno. Acquistare solo il nome del dominio non basta per creare un sito. Occorre uno spazio dove ospitarlo (servizio di Hosting). Es: Netsons Cosa me ne faccio di un dominio senza spazio ? E’ possibile registrare solo il nome del dominio affinchè non venga registrato da qualcun altro. Successivamente dopo 1 mese, 1 anno o più, potrai acquistare lo spazio. Si potrebbe anche non acquistare lo spazio ed ospitare il sito direttamente sul proprio computer di casa o ufficio. Ma la cosa diventerebbe troppo complicata da gestire. In ambito informatico si definisce hosting (dall'inglese to host, ospitare) un servizio che consiste nell'allocare su un server web le pagine di un sito web, rendendolo cosí accessibile dalla rete Internet. Tale "server web", definito "host", è connesso alla rete Internet in modalità idonea a garantire l'accesso alle pagine del sito mediante browser, con identificazione dei contenuti tramite dominio ed indirizzo IP. 29/03/2017 Corso di Informatica

Come creare un sito web Si può scegliere di: Creare direttamente online le tue pagine web. puoi creare direttamente online le tue pagine web usando un semplice Editor HTML potrai usufruire di un potente strumento, che ti permette con pochi clic di installare un CMS Creare e salvare le tue pagine web sul tuo PC ed in seguito caricarle sul sito online. Puoi creare un intero sito web dal tuo PC usufruendo di programmi che non richiedono conoscenze di programmazione FrontPage, Dreamweaver Impari a conoscere i linguaggi di programmazione (HTML, CSS, PHP, etc.) per creare "mattone su mattone", il tuo sito web 29/03/2017 Corso di Informatica

CMS CMS è un acronimo, e sta per "Content management system", ovvero "Sistema di gestione dei contenuti". è una categoria di software che serve a organizzare e facilitare la creazione collaborativa di siti Internet. Installando un CMS sul tuo spazio web, potrai creare pagine web, direttamente online. È formato da un’applicazione e da un database Un CMS non richiede la conoscenza di linguaggi di programmazione, ed inoltre offre la possibilità di creare un sito web altamente professionale e graficamente eccellente. Esempi: Joomla, Magento, WordPress (per i blog), ecc… 29/03/2017 Corso di Informatica