30/04/2014Corso di Informatica1/19 Progettazione di un sito Web Docente Ing. Maria Mirto Ing....

04/11/23 Corso di Informatica 1/19

Progettazione di un sito Web

Docente Ing. Maria MirtoIng. Passante Marco


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.


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;


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.


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 ...


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.


Caratteristiche non funzionali di un sito Web

• Fattori di qualità Navigabilità Accessibilità Usabilità Leggibilità Affidabilità Manutenibilità Sicurezza


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.


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.


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.


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


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


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


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


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


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)


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


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.


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


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.


Come creare un sito web

• Usufruire dei moltissimi servizi gratuiti su internet GOOGLE SITES

WEEBLYBLOGGERALTERVISTA.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"



• 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, oppureweb.tiscali.it/informatica, oppuresites.google.com/site/informatica, oppureinformatica.weebly.com oppureinformatica.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



• 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.



• 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


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…

30/04/2014Corso di Informatica1/19 Progettazione di un sito Web Docente Ing. Maria Mirto Ing....

Documents

Transcript of 30/04/2014Corso di Informatica1/19 Progettazione di un sito Web Docente Ing. Maria Mirto Ing....