Costruzione di un sito web dott.sa Giovanna Delloste.

19
Costruzione di un sito web dott.sa Giovanna Dell’oste

Transcript of Costruzione di un sito web dott.sa Giovanna Delloste.

Page 1: Costruzione di un sito web dott.sa Giovanna Delloste.

Costruzione di un sito web

dott.sa Giovanna Dell’oste

Page 2: Costruzione di un sito web dott.sa Giovanna Delloste.

Definizioni e ruoli del webmaster

Chi è il webmaster?Il webmaster è colui che progetta e cura lo sviluppo di un sito Internet, adottando soluzioni che garantiscano il necessario equilibrio tra i contenuti che si vogliono comunicare e le esigenze di natura estetica e tecnica. Il ruolo del webmaster dipende molto dall'organizzazione aziendale e dall'ambito nel quale opera. In tutti i casi, comunque, egli rappresenta, nei confronti dell'utente, la figura di riferimento per ogni informazione, tecnica e non,

che riguardi il sito.

Page 3: Costruzione di un sito web dott.sa Giovanna Delloste.

Introduzione al World Wide Web

Il www, acronimo di World Wide Web è il risultato dell'interconnessione fisica e logica fra un vasto numero di computer in rete. Ogni computer su Internet viene definito host, ha unproprio indirizzo IP e può indifferentemente svolgere funzioni da client o server per unamoltitudine di protocolli, a seconda del software installato ed utilizzato.Nella sua forma base, un Server Web è un computer generalmente online 24 ore su 24, haun indirizzo IP fisso a cui è associato un nome tipo www.dominio.com e, tramite un software dedicato (Apache, IIS, Zeus...) non fa altro che fornire file ai client (i browser come Netscape Navigator, Microsoft Internet Explorer, Opera...) che li richiedono.Questi file sono tipicamente immagini (di solito in formato GIF e JPEG) e pagine HTML, che normali file ASCII contenenti il testo di un linguaggio di programmazione ipertestuale che permette di formattare testo, grafica e link all'interno di schermate visualizzabili dal browser.Il protocollo che gestisce il trasferimento di questi file fra client e server web è l'HTTP Hyper text Transfer Protocol.Di fatto mentre si naviga non si fa altro che trasferire file via rete, tramite il protocollo HTTP, dall'hard disk del server web al nostro computer, dove il browser interpreta le pagine HTML ricevute e le visualizza, richiedendo di volta in volta le immagini e gli altri file necessari per completare la visualizzazione delle pagine.

Page 4: Costruzione di un sito web dott.sa Giovanna Delloste.

COSA SONO GLI URL

E' grazie agli URL (Uniform Resouce Locator) che i navigatori possono accedere

alle informazioni del World Wide Web. Il problema è che non esiste un indice principale, un unico punto di riferimento, che racchiuda in se tutte le risorse

e le informazioni disponibili su Internet, quindi per recuperare una specifica informazione si possono utilizzare diversi protocolli e metodi. I protocolli in questione sono:HTTP = HyperText Transfer Protocol. Protocollo di trasferimento di

ipertesto, quello che viene più utilizzato nel WWW.FTP = File Transfer Protocol. Protocollo di trasferimento di file.

TELNET = Telnet. Protocollo per accedere, tramite interfaccia testuale, ad un host

(computer) remoto.NEWS = Network News Transfer Protocol. Protocollo di trasferimento delle

news.

Page 5: Costruzione di un sito web dott.sa Giovanna Delloste.

HTTP E FTP

Questi due protocolli hanno lo stesso formato in quasi tutti i casi.

La sintassi è: risorsa=//nome_server/percorso_documento

Per individuare, ad esempio tramite protocollo HTTP, il file pippo.htm,

contenuto nella directory mio sul server xxx.yyy.it si utilizzerà l'URL:

http://xxx.yyy.it/mio/pippo.htm.

Page 6: Costruzione di un sito web dott.sa Giovanna Delloste.

OVERVIEW DEI SERVER WEB DISPONIBILI SUL MERCATO

Ci sono molti software con funzioni da server web disponibili sul mercato. Ecco un elenco dei piu rappresentativi con una breve descrizione :Apache (www.apache.org) (quello che utilizziamo noi integrato nel EasyPHP) sviluppato dalla Apache Software Foundation è diffuso sia nella versione 1.3 che nella 2.0. e’ Gratis, altamente e facilmente configurabile. E’ Il piu utilizzato, gira praticamente su tutte le piattaforme, Windows incluso.

Microsoft Internet Information Server (www.microsoft.com) sviluppato dalla Microsoft Corp. Pro: Facile da usare; buon supporto tecnico; buone performance

Contro: Ha una storia travagliata in termini di sicurezza; non open-source ;

Ben integrato con Windows, permette una facile installazione e configurazione.Facile da usare, ha avuto seri e ripetuti problemi di sicurezza.

Page 7: Costruzione di un sito web dott.sa Giovanna Delloste.

Zeus 4.0 (www.zeus.com) sviluppato dalla Zeus Technology Ltd.

Pro: Molto veloce; scalabile, interfaccia user-friendly.Contro: Poco espandibile; costoso (1700 dollari circa a server).

Zeus web server ha features estensibili, una interfaccia ben fatta, ottime performance e gira su piattaforme Unix.

iPlanet Web Server Enterprise Edition (www.iplanet.com) sviluppato dalla

iPlanet E-Commerce Solutions, poi definitivamente acquisita da Sun, deriva dal

Netscape Server, a suo tempo un leader del mercato. Pro: Eccellente supporto java, buone performance.Contro: Poco espandibile, interfaccia poco intuitiva, costoso (poco meno

di 1500 dollari per CPU).

Page 8: Costruzione di un sito web dott.sa Giovanna Delloste.

INSTALLAZIONE E CONFIGURAZIONE DI EASYPHP

Per provare il nostro sito in locale abbiamo bisogno di un web server sul nostro pc.Si è detto quindi che un web server è un componente essenziale per simulare in locale il comportamento del sito una volta pubblicato e inserito sul server remoto, sia che si tratti di pagine statiche (HTML puro) o dinamiche (HTML con script PHP, ASP, PERL o simili).

Il web server più diffuso in Internet è Apache (www.apache.org). Apache, su licenza GPL, è nato per sistemi Linux ma sono ormai da tempo disponibili versioni per Windows. Ciò permette l'installazione in locale sulla maggior parte dei PC comuni. Al termine dell'installazione di Apache e della sua configurazione sarà possibile accedere alle proprie pagine web in locale attraverso più modi. Infatti le pagine web andranno inserite nella cartella "www" della directory di Apache, L'accesso alle pagine web in locale può avvenire attraverso url equivalenti, ovvero "http://localhost" o "http://127.0.0.1" o ancora "http://nomepc". Quando si digita nel browser tale indirizzo apache cerca automaticamente il file index.html o index.htm o start.htm nella directory "www" o in quella da voi specificata.

Page 9: Costruzione di un sito web dott.sa Giovanna Delloste.

Nel caso in cui volessimo creare un sito dinamico con script Php dovremmo installare anche il modulo PhP e il database ad esempio MySql. PHP è un modulo open source

facilmenteistallabile sul web server Apache che aggiunge al web server stesso la funzionalità di interpretazione ed

esecuzione del codice PHP, appunto. PHP è un linguaggio abbastanza semplice e di facile comprensione, almeno nei suoi aspetti basilari, anche se non si hanno esperienze di programmazione precedenti. MySQL è uno dei più potenti e veloci database. E' molto diffuso tra le applicazioni web e facilmente amministrabile e utilizzabile.

Page 10: Costruzione di un sito web dott.sa Giovanna Delloste.

Come abbiamo visto bisognerebbe installare separatamente Apache, PHP e MySQL, ma perchè perdere tempo e forze anche nelle configurazioni quando si può fare tutto in un colpo solo? Consigliamo infatti di installare una piccola applicazione che si occupa autonomamente di installare e configurare queste tre cose. L'applicazione in questione è EasyPHP. Per maggiori informazioni andate sul sito ufficiale www.easyphp.org.Innanzitutto bisogna scaricare da qui l'ultima versione, che comprende le ultime versioni di Apache, PHP e MySQL e PHPMyAdmin. Quest'ultima applicazione è in realtà un sistema di script PHP integrato che permette una facile amministrazione del database MySQL. Per installare EasyPHP basta scaricarlo, lanciare l'installer e seguire le istruzioni. Altermine è necessario "lanciarlo" dal menu Start. In realtà questo è un termine inappropriato poichè avviando EasyPHP questo non fa altro che avviare Apache, conintergrato il modulo PHP, e MySQL. Quando EasyPHP è correttamente avviato la suaicona lampeggia nell barra delle applicazioni.

Page 11: Costruzione di un sito web dott.sa Giovanna Delloste.

PROGETTAZIONE DI UN SITO WEB

La progettazione di un sito web è un’attività molto complessa perché può essere senza dubbio annoverata tra le progettazioni software. Essa, a

differenza della progettazione di altre tipologie di software,

comporta lasinergia tra professionalità eterogenee:

Esperti di comunicazioneEsperti di marketingEsperti di graficaEsperti informatici

Page 12: Costruzione di un sito web dott.sa Giovanna Delloste.

Un moderno sito web ha una strutura complessa nella quale si possono individuare una parte di front-end ed una di back-end. Front-end: struttura del sito, layout delle pagine,

codice HTML, script “leggeri” (client-side per elaborazioni secondarie), grafica ed elaborazione multimediale.

Back-end: procedure informatiche (normalmente server-side) quali autenticazioni, transazioni, ricerche su dati, carrello elettronico, etc.

Page 13: Costruzione di un sito web dott.sa Giovanna Delloste.

La descrizione precedente fa emergere, essenzialmente, tre aree di progettazione di un sito web: Progetto concettuale e logico Progetto grafico Progetto informatico di front-end e di

back-end

Page 14: Costruzione di un sito web dott.sa Giovanna Delloste.

Tali attività di progetto non sono da vedersi in maniera sequenziale, bensì sono intrecciate l’una all’altra. Le fasi principali di questa attività sono:

Reperimento del materiale testuale e pittorico Organizzazione logica del contenuto in unità

informative auto-consistenti (nodi) Eventuale espansione dei nodi complessi in

agglomerati di nodi più semplici Creazione della struttura logica di navigazione Creazione della struttura logica e del layout (non

grafico) delle singole pagine

Page 15: Costruzione di un sito web dott.sa Giovanna Delloste.

Ogni pagina di un sito web deve essere strutturata secondo criteri ben precisi. Vediamo un esempio di struttura di prima pagina i un sito web:

Page 16: Costruzione di un sito web dott.sa Giovanna Delloste.
Page 17: Costruzione di un sito web dott.sa Giovanna Delloste.

Vediamo inoltre alcuni modelli di siti:

Modello navigazionale a categorie/canali

Page 18: Costruzione di un sito web dott.sa Giovanna Delloste.

Modello navigazionale lineare

Page 19: Costruzione di un sito web dott.sa Giovanna Delloste.

Modello navigazionale ad opzioni