Introduzione alla creazione di siti internet

A cura di Matteo Mazzoli: mazzoli.matteo@gmail.com

Breve storia del WWW
 Il World Wide Web (WWW) nasce tra il 1989 e il 1991 come
progetto del CERN di Ginevra affidato a un gruppo di ricercatori
informatici tra i quali Tim Berners-Lee e Robert Cailliau.
 Lo scopo del progetto era la creazione di un sistema pratico ed
efficiente per lo scambio di informazioni all'interno del CERN e
tra i ricercatori del CERN e i loro collaboratori all'estero.
 I ricercatori identificarono due elementi chiave per la
realizzazione di tale sistema:
 Internet: la rete globale già esistente fin dagli anni '70
 Gli ipertesti: documenti elettronici non organizzati in maniera
sequenziale (come un libro) ma contenenti collegamenti che
consentano di saltare da un punto all'altro nel documento

Breve storia del WWW
 Nel 1991 i ricercatori realizzarono un prototipo basato su NeXT
(una piattaforma hardware su cui girava una variante di Unix) già
dotato di una sorta di interfaccia grafica per "navigare".
 Alla fine del 1992 erano già disponibili 26 web server in varie
nazioni.
 Alla fine del 1993 i web server disponibili erano già oltre 200.
 Tra il 1992 e il 1993 il National Centre for Supercomputing
Applications (NCSA) realizzò il primo web browser: chiamato
NCSA Mosaic
 In pochi anni il WWW ebbe una crescita molto rapida,
divenendo utilizzato da milioni di persone. Gli interessi
commerciali attorno a tale successo portarono alla "guerra dei
browser".

La guerra dei browser
 Nel 1994 Marc Anderseen (realizzatore di NCSA Mosaic) e Jim Clark (fondatore
della Silicon Graphics) fondarono Netscape Corp. e realizzarono il browser
Netscape Communicator basato su Mosaic
 Nel 1995 Microsoft lancia il browser Internet Explorer.
 Negli anni successivi (fino al 1998) i due browser combattono a colpi di nuove
funzionalità, ma alla fine Netscape si dichiara sconfitta non riuscendo a
competere con Internet Explorer (che era preinstallato su Windows...)
 Netscape Corp. viene venduta ad America On-Line (AOL) e il codice sorgente
di Communicator viene reso pubblico creando una comunità Open Source
(chiamata Mozilla.org) che ne porti avanti lo sviluppo.
 Nel 2000 esce una nuova versione del browser Mozilla, ricco di funzionalità ma
molto lento.
 Nel 2004 la comunità di Mozilla riesce nell'intento di rivoluzionare il cuore del
proprio browser e realizza Mozilla Firefox, un browser veloce, flessibile e
multipiattaforma che riscuote un rapido e crescente successo.

 Il browser NCSA Mosaic

 Negli ultimi anni sono nati anche altri browser
portando alla seguente distribuzione di utilizzo:

Che cos‘è il WWW?
 Il World Wide Web è un "globally distributed hypermedia
system", ossia un ipertesto multimediale distribuito a livello
mondiale:
 Un ipertesto, ossia un documento (elettronico) costituito da
pagine consultabili in maniera non sequenziale attraverso l'uso
di collegamenti (links) all'interno delle pagine stesse.
 multimediale, ossia che contiene testo, ma anche immagini,
suoni, video, ecc...
 distribuito a livello mondiale, ossia tale per cui le pagine non
sono tutte memorizzate in un unico computer, ma su
innumerevoli server diversi. I collegamenti contenuti in una
pagina di un server possono riferire pagine memorizzate su altri
server.

Che cosa non è il WWW?
Il World Wide Web NON E' Internet.
 Internet è la rete globale di computer su cui il WWW
viene diffuso.
 Internet si basa su protocolli di comunicazione che
consentono di interconnettere reti diverse e basate su
caratteristiche di connessione anche molto diverse tra
loro
 Internet è il canale che consente di diffondere, oltre al
WWW, servizi quali la posta elettronica, il
trasferimento di file (FTP), la messaggeria
istantanea, ecc...

Le fondamenta del WWW
I protocolli/linguaggi su cui si basa il WWW (fin dalle sue
origini) sono i seguenti:
 Uniform Resource Locator (URL) - Come riferire un particolare
documento. E' una convenzione su come scrivere i
riferimenti ad altri documenti. Viene utilizzato nei link
contenuti nelle pagine web.
 HyperText Transfer Protocol (HTTP) - Come ottenere un
documento. E' un protocollo di comunicazione che viene
utilizzato per l'accesso a documenti ipertestuali via rete.
 HyperText Markup Language (HTML) - Il formato dei
documenti. E' un linguaggio per la realizzazione di
documenti ipertestuali

I Domini
 Il dominio di un URL specifica la posizione fisica dove
si trova la risorsa che si vuole recuperare. Un dominio
solitamente è un computer dove è presente un
programma (server) che gestisce le richieste del
protocollo specificato nella prima parte dell'URL.
 Il dominio può essere specificato sia dal suo indirizzo
IP (Internet Protocol) o utilizzando un nome che
corrisponde all'indirizzo IP.
 Un indirizzo IP è costituito da una sequenza di 4
numeri (detto anche ottetti) (ciascuno dei quali varia
da 0 a 254), suddivisi da un punto: aaa.bbb.ccc.ddd.

I Domini
Data la difficoltà di ricordare i numeri, è stato messo a punto
un meccanismo in grado di associare ad un indirizzo IP un
nome di dominio (servizio DNS, Domain Name Server). I
nomi dei domini sono costituiti da parole suddivise da un
punto: www.matteomazzoli.com. Solitamente, se si legge un
nome di dominio da sinistra verso destra, ogni parola/nome
individua una 'zona' o dominio sempre più generale rispetto a
quella precedente.
Ad esempio, www.matteomazzoli.com individua il server di
nome www che si trova nella zona matteomazzoli (  ) che si
trova nella zona com (Organizzazioni commerciali). L'ultima
parola, detta estensione, è di due o tre caratteri.

Le Estensioni
Estensione Significato
edu Istruzione (siti di scuole o università)
com Organizzazioni commerciali o produttive
gov Istituzioni nazionali, federali o governative
org Organizzazioni varie (di solito senza scopi di lucro)
net
Organizzazioni dei fornitori di servizi (ISP o Internet Service
Provider)
it
Dominio dei siti che si trovano in Italia. Analogamente ci sono
estensioni per tutti i paesi del mondo: 'fr' per Francia, 'uk' per
Regno Unito, 'de' per Germania, 'es' per Spagna, ecc.
eu Dominio della Unione Europea

Estensioni del WWW
A questi componenti di base si sono poi aggiunti nel tempo altri
componenti che consentono di realizzare pagine web più evolute e
dinamiche, ad esempio:
 Cascading Style Sheet (CSS): un linguaggio per descrivere gli aspetti
di presentazione di una pagina web (font, colori, ecc...)
 Client Scripting: un insieme di linguaggi e tecnologie (e.g.
JavaScript) per realizzare pagine più complesse e interattive (ad
esempio tramite finestre pop-up, ecc...) che contengono del codice
che viene eseguito dal browser
 Siti web dinamici: il server web non è più un semplice "memorizzatore
di pagine" ma esegue applicazioni i cui output sono pagine web. Per
questo nascono linguaggi quali Perl, PHP, Pyton e ASP.

Architetture del WWW
Alcune architetture comuni per la realizzazione di siti web sono le
seguenti:
 Sito web statico: Ogni pagina del sito è memorizzata in un file
diverso sul web server in formato HTML. Quando viene richiesta
una pagina, il file corrispondente viene inviato al client e
visualizzato così com’è dal browser.
 Sito web con script: Differisce rispetto all'approccio statico nel
fatto che i file HTML possono contenere porzioni di codice (in
un linguaggio tipo JavaScript) che verranno eseguite dal browser
per creare qualche effetto di dinamicità (controllo sui dati
immessi nella pagina, apertura di finestre di dialogo, ecc...)
 Sito web dinamico: I server web eseguono programmi che
generano le pagine web richieste da un client. Tali programmi
spesso interrogano un data-base per ottenere le informazioni che
servono per costruire le parti principali delle pagine.

Architettura di un sito web statico
 Il web server ha un archivio di documenti HTML (possibilmente
contenti script) che invia al client su richiesta
 Il browser (eseguito sul client) visualizza il documento ricevuto
(eseguendo eventuali script)

Architettura di un sito web dinamico
 In un sito web dinamico il server web non ha un archivio di pagine, ma
esegue un programma (web application) che genera le pagine su
richiesta
 Tra i linguaggi più usati per le web applications: PHP e ASP
 Comunemente la web application interagisce con un database usando
opportune librerie ed SQL
 Tra i database più usati: MySQL
 La combinazione Apache (Web Server) + MySQL + PHP e la più diffusa
per la realizzazione di siti web dinamici
 Esistono soluzioni "all inclusive" per l'installazione di questa
combinazione di software noti come soluzioni LAMP (per Linux) o
WAMP (per Windows), dove "AMP" e l'acronimo formato dalle iniziali
dei nomi delle tre componenti software
 Un esempio di WAMP di semplice utilizzo e poco invasivo è EasyPHP

Architettura di un sito web dinamico

Un documento HTML
Un documento HTML è semplicemente un file di testo avente estensione .HTM o
.htm (tipicamente nei sistemi DOS o Windows) oppure .html (generalmente nei
sistemi Unix e Linux) e contenente istruzioni HTML. Inoltre al suo interno ha
sempre la stessa struttura di base. Vediamola per gradi.
Un documento HTML è sempre delimitato dalle tag <HTML> e </HTML>. Il
primo naturalmente indica l'inizio del documento, il secondo la sua fine.
Inoltre un documento HTML è provvisto di una testa e di un corpo. Nella testa si
inserisce il titolo dell'argomento di cui si parla nel documento HTML ed eventuali
altre informazioni, mentre nel corpo si inserisce il suo svolgimento, con
testo, disegni, fotografie....
La testa, delimitata dalle tag <HEAD> e </HEAD>, deve sempre precedere il
corpo, che a sua volta è delimitato dalle tag <BODY> e </BODY>.
Ecco quindi la prima struttura di base di un documento HTML:
<HTML>
<HEAD>Titolo SITO</HEAD>
<BODY>Sito Internet</BODY>
</HTML>

Il PHP
 Il PHP è un linguaggio di scripting lato server
multipiattaforma nel senso che funziona
correttamente su server con diversi sistemi operativi
anche se, generalmente, è consigliabile un suo utilizzo
su server Linux (che costituisce l‘ambiente nativo di
questo linguaggio).
 E’ open-source e in rete c’è tantissimo materiale di
supporto con esempi pratici e applicazioni
perfettamente funzionanti.
 Non serve compilare, viene eseguito “al volo”
 Il codice è integrato all’interno del codice HTML

Il PHP - La Storia
 Nato nel 1994 ad opera del danese Rasmus
Lerdorf, PHP era in origine una raccolta di script CGI
che permettevano una facile gestione delle pagine
personali
 Nel 1995 si evolve diventando un linguaggio di
scripting embedded in differenti Web Server
 Attualmente (ormai alla versione 5) è stato arricchito
con il supporto alla programmazione Object-Oriented
e con numerose librerie (tra cui il supporto per
MySQL)

PHP - Perché è usato???
 Perché è fondamentalmente cross-platform
 Web Server: Apache, Microsoft IIS, Caudium, Netscape
Enterprise Server
 Sistemi Operativi: UNIX (HP-UX, OpenBSD, Solaris,
Linux), Mac OSX, Windows (tutte le versioni..)
 Database supportati: Adabas D, dBase, Empress,
FilePro (read-only), Hyperwave, IBM DB2, Informix,
Ingres, InterBase, FrontBase, mSQL, Direct MS-SQL,
MySQL, ODBC, Oracle (OCI7 and OCI8), Ovrimos,
PostgreSQL, SQLite, Solid, Sybase, Velocis,Unix dbm

PHP - Primi Passi …
<html>
<head>
<title>Esempio</title>
</head>
<body>
<?php echo "Ciao, sono uno script PHP!"; ?>
</body>
</html>
_______________________________
Ciao, sono uno script PHP!
Definizione dei Tag:
apertura <?, <?php
chiusura ?>

MySQL
MySql è il database relazionale open source più diffuso al
mondo.
Originariamente sviluppato dalla società svedese TcX per
uso interno, MySql costituisce oggi la soluzione ottimale
(soprattutto in ambiente Linux) per chi è in cerca di un
database veloce, flessibile, affidabile
e, soprattutto, gratuito!

MySQL
 MySQL NON va confuso con SQL. SQL è un linguaggio di
interrogazione strutturata sviluppato da IBM. MySQL
sfrutta SQL per interagire con i dati. Quindi: SQL è un
linguaggio, MySQL è un programma.
 MySQL NON è un database, ma un sistema di gestione, o
più precisamente un DBMS (Database Managment
System). Un DBMS può contenere e gestire più database
gestendo simultaneamente le richieste di diversi eventi.
 MySQL è un prodotto multi-piattaforma: ciò significa che
può girare sia in ambiente Linux che Windows

MySQL
 MySQL è open-source: questo significa non solo che è
gratuito, ma anche che avete a disposizione il codice
sorgente del programma e quindi, se sapete dove mettere le
mani, potete modificarlo ed adattarlo alle vostre specifiche
esigenze.
 MySQL è molto diffuso ed utilizzato nelle applicazioni per
il Web. Principalmente viene utilizzato insieme a
Php, tuttavia non sono infrequenti utilizzi di MySql con
altri linguaggi di scripting server side quali, ad
es., Asp, Cgi, Jsp, ecc.

MySQL
Tipi Numerici Interi
Tipo Intervallo di valori
TINYINT -128 > 127
SMALLINT -32768 > 32767
MEDIUMINT -8388608 > 8388608
INT -2147483648 > 2147483647
BIGINT -9223372036854775808 > 9223372036854775807
Tipi Numerici NON Interi
Tipo
FLOAT(I,D)
DOUBLE(I,D)
DECIMAL(I,D)

MySQL
Modificatori
• AUTO_INCREMENT - Aumenta automaticamente il valore di una
colonna aggiungendo 1 al valore massimo. E' opportuno utilizzarlo in
combinazione con NOT NULL. Può essere applicato a tutti i tipi
numerici interi.
• UNSIGNED - un campo contrassegnato con UNSIGNED non accetta
valori negativi
• ZEROFILL - viene utilizzato per inserire un numero preceduto da una
quantità variabile di zeri in base all'ampiezza della colonna. Se per
esempio si dichiara un campo INT(10) ZEROFILL e si desidera
memorizzare il valore "1234", esso verrà salvato come "0000001234"

MySQL
Tipi Dati Stringa
Tipo Dimensioni massime
CHAR(n) 255 byte
VARCHAR(n) 255 byte
TINYTEXT 255 byte
TINYBLOB 255 byte
TEXT 65535 byte
BLOB 65535 byte
MEDIUMTEXT 1.6 Mb
MEDIUMBLOB 1.6 Mb
LONGTEXT 4.2 Mb
LONGBLOB 4.2 Mb

MySQL
Modificatori
• BINARY - Può essere utilizzato con CHAR o VARCHAR
• DEFAULT - Può essere utilizzato con tutti i tipi di dati (anche quelli
numerici) ad eccezione di TEXT e BLOB. Serve per indicare il valore di
default del campo.
• NULL / NOT NULL - Può essere utilizzato con tutti i tipi di dati
(numerici e stringa)
• PRIMARY KEY - Può essere utilizzato con tutti i tipi di dati (numerici e
stringa)
• UNIQUE - Può essere utilizzato con tutti i tipi di dati (numerici e
stringa). Con UNIQUE si imposta una regola di unicità, questo
significa che nessun dato contenuto nella colonna può essere ripetuto.
Ogni dato deve, quindi, essere unico.

MySQL - Esempio
CREATE TABLE `clienti` (
ìd` mediumint unsigned NOT NULL auto_increment,
`nominativo` varchar(100) NOT NULL,
ìndirizzo` varchar(200) NOT NULL,
`telefono` varchar(15) NOT NULL,
PRIMARY KEY (ìd`)
) ENGINE=MyISAM;

Varie tipologie di siti internet
Si distinguono più categorie di siti web, secondo lo scopo
perseguito:
• I siti vetrina (detti anche siti plaquette o siti identità) sono
dei siti il cui obiettivo è di mettere in risalto l'immagine
della marca della società, presentando ad esempio i propri
prodotti e servizi;
• I siti catalogo sono dei siti che puntano a presentare
l'offerta aziendale;

• I siti di informazione: sono dei siti che forniscono
un'informazione particolare ad un tipo di internauta;
• I siti commerciali: sono dei siti che vendono direttamente
dei prodotti agli internauti e permettono eventualmente di
pagare on line;
• I siti istituzionali: sono dei siti che presentano
l'organizzazione e i suoi valori. Questo tipo di sito descrive
solitamente l'attività dell'ente, le cifre chiave e da le
informazioni necessarie ai clienti o ai beneficiari;

• I siti personali (talvolta pagine personali) sono dei siti
realizzati da privati per divertimento, spesso per passione
ad un argomento o ad una disciplina;
• I siti comunitari sono dei siti che riuniscono degli
internauti con un interesse in comune.
• I siti intranet sono dei siti accessibili dall'interno di
un'azienda o di una direzione, con l'obiettivo di mettere a
disposizione e condividere delle informazioni professionali.

Il webmaster
Viene detto webmaster una persona che si occupa di un sito
web, cioè solitamente la persona che concepisce un sito e lo
aggiorna.
La vita di un sito web ha due componenti principali, ciascuna
divisibile in fasi specifiche :
• La creazione, che corrisponde alla concretizzazione di
un'idea e un sito on line, referenziato e visitato ;
• L'utilizzo, che corrisponde alla gestione quotidiana, alla sua
evoluzione e aggiornamento.

Il webmaster

Il webmastering
L'utilizzo del sito comporta soprattutto le attività seguenti :
• Sorveglianza, per assicurare un controllo delle tecnologie, del
posizionamento del sito e di quelli concorrenti ;
• Promozione, che permette di svilupparne il pubblico ;
• Manutenzione e aggiornamento, cioè l'animazione quotidiana del sito e
il mantenimento del suo buon funzionamento.
La realizzazione di un sito web è quindi un'attività multidisciplinare che
richiede molte competenze. Secondo l'organizzazione, la funzione di
webmaster potrà andare da quella di capo progetto a quella di « direttore
d'orchestra ».
Il termine webmastering designa l'insieme dei compiti necessari
all'utilizzo di un sito web.

La realizzazione
La realizzazione del sito riguarda la creazione delle pagine web e degli elementi
grafici. La creazione delle pagine web sta nel creare dei file HTML. Esistono due
modi di creare questo tipo di file :
• Scrivendo i file HTML « a mano », cioè digitando il codice HTML in un file di
testo attraverso un semplice editor di testo. Questa soluzione è la più fastidiosa
(nonostante la relativa semplicità del linguaggio HTML), ma rimane tuttavia la
migliore per imparare a realizzare un sito
• Usando un editor HTML WYSIWYG (What You See Is What You Get, tradotto
Quello che vedete è quello che ottenete). Si tratta di un software che permette di
creare delle pagine web a livello visivo piazzando degli oggetti e dei controlli. Il
software si incarica di generare il codice HTML automaticamente. Si tratta di
una soluzione molto pratica per creare delle pagine

…oppure…
Nell’epoca del Web 2.0 la voglia di comunicare e di mettersi in rete è
in espansione. Community, portali, blog, wiki e forum sono il nostro
pane quotidiano per mantenerci aggiornati e comunicare col
mondo.
Mentre anni fa avere un sito presupponeva conoscere come minimo
l’HTML e il Javascript, oggi per poter gestire un sito stylish e
funzionale serve solo un pò di praticità e tanta fantasia. Grazie ai
CMS -Content Management System-, infatti, la vita del geek è più
facile, possiamo infatti permetterci di prestare più attenzione alla
completezza e alla correttezza dei contenuti piuttosto che perdere
tempo smaneggiando con il codice -anche se, come WordPress
insegna, Code Is Poetry.

I migliori 10 CMS
• WordPress – Non ha bisogno di presentazioni, probabilmente uno dei
migliori in assoluto, adatto soprattutto per i blog gestiti da più utenti
ma adattabile anche per la costruzione di piccoli portali. Il suo punto di
forza è la community di utenti che contribuisce da anni alla creazione di
una vasta quantità di plugin e temi.
• Drupal – Strumento molto avanzato e completo per la creazione di
portali multi-utente. La sua struttura modulare permette agli
amministratori più esperti di personalizzare il portale con nuove
funzionalità, grazie a moduli aggiungibili al core.
• Joomla! – Stilosissimo CMS simile per funzionalità a Drupal, il suo
punto di forza sono la stabilit{ e l’affidabilit{ di cui gode grazie alla
solida base da cui nascono le sue radici. Joomla infatti è figlia di Mambo
dal quale ha tratto il core per poi evolversi modularmente.

I migliori 10 CMS
• Xoops – Ottimo strumento per la creazione e la gestione delle
comunità virtuali, può anche essere utilizzato come potente base per
blog o addirittura come framework per altre applicaizioni grazie alla
modularit{ della struttura che permette, a discrezione dell’utente, di
personalizzare l’installazione per renderla ad-hoc per le nostre
esigenze.
• Mediawiki – Mamma di Wikipedia, è la struttura base più completa
per creare meravigliosi wiki. Tecnicamente non è un CMS ma solo uno
strumento che semplifica la gestione degli wiki.
• Frog – Poco conosciuto ma valido e semplice, sia per blog che piccole
community. Vanta un pacchetto d’installazione veramente leggero ma
ha molte possibilità di personalizzazione anche grazie agli immancabili
plugin.

I migliori 10 CMS
• Globber – Non ha niente da invidiare alle piattaforme di blogging. La
pagina di scrittura dei post è molto originale ed è organizzata al meglio
per permettere un approccio molto pratico alla scrittura dei post.
• Dotclear – Degno di nota questo CMS francese supportato da una
buona comunità di sviluppo. Adattissimo per i blog personali, è dotato
di funzionalità che agevolano la lettura attraverso cellulari e PDA.
• DocuWiki – Altro valido strumento per la creazione di ottimi wiki
dall’aspetto particolarmente professionale. La struttura è quella classica
ma il layout è interessante.
• Jaws – Nato come framework, si comporta benissimo come CMS. Il
progetto è in piena espansione e mira a migliorare l’usabilit{ per gli
utenti. Valido strumento per piccoli portali, è completo di vari moduli
per la personalizzazione.

Introduzione alla creazione di siti internet

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (16)

Semelhante a Introduzione alla creazione di siti internet

Semelhante a Introduzione alla creazione di siti internet (20)

Introduzione alla creazione di siti internet