Prof. Giuseppe ROMANO
Il Corso « Webmaster (base) », si pone come obiettivo quello di introdurre i partecipanti al mondo del WEB, fornendo loro le basi e gli strumenti necessari alla realizzazione e gestione di siti web.
Nel corso delle lezioni saranno effettuati esempi pratici per illustrare, in maniera introduttiva, i linguaggi HTML e CSS, strutturare una pagina Web, creare e gestire semplici layout e menù di navigazione.
La parte conclusiva del corso sarà dedicata ai CMS e alla introduzione di Joomla per offrire ai partecipanti nozioni per il prosieguo della propria formazione come Webmaster.
PROGRAMMA DEL CORSO
1 Introduzione al WEB
2. Internet, la comunicazione on line, i protocolli di comunicazione
3 Le fasi di analisi e progettazione di un sito web
4 Il linguaggio HTML
5 Tabelle
6 CSS (fogli di stile)
7 Aggiungere stile al testo
8 Raggruppamenti e Pubblicazione Sito
Introduzione
Internet è un’immensa rete costituita da milioni di computer in tutto il mondo connessi tra loro in grado di comunicare e di scambiare dati e informazioni grazie a un linguaggio comune.
Per definizione Internet è una Rete di Reti (infatti mette insieme le varie reti dei computer locali).
Molteplici sono i dispositivi che possono essere collegati alla rete:
computer, tablet, smartphone, telefonini, console di gioco, televisori, ecc. Internet offre molti servizi; due sono i più conosciuti e usati:
la posta elettronica,
il WWW (World Wide Web).
Internet mette a disposizione degli utenti collegati informazioni, file, materiale di vario genere in forma di pagine ipertestuali cioè pagine che oltre al testo hanno immagini, filmati e soprattutto link,
collegamenti ad altre pagine dello stesso tipo.
La diffusione mondiale della rete Internet è iniziata verso la metà degli anni ottanta quando la rete militare ARPANET, messa a punto e realizzata dal Dipartimento della Difesa degli Stati Uniti come
collegamento tra elaboratori militari durante il periodo della Guerra Fredda, viene lasciata e resa disponibile alle principali Università
americane che cominciano a utilizzarla per diffondere dati e informazioni scientifiche.
Il WWW (World Wide Web), che consiste nell’organizzazione delle informazioni in modo ipertestuale e basa il suo successo sulla
semplicità di utilizzo da parte degli utenti, è stato messo a punto alla fine degli anni ottanta dal CERN (Centro Europeo per le Ricerche Nucleari) di Ginevra.
L’utilizzo del WWW ha subito un incremento esponenziale a partire dalla prima metà degli anni novanta grazie anche alla diminuzione dei costi di accesso e ad un utilizzo della rete sempre maggiore.
La rete internet
Le pagine Internet
Le pagine internet sono strutturate in collegamenti ipertestuali.
Una pagina ipertestuale è una pagina con testo, immagini, video, cioè elementi multimediali, con qualcosa in più rispetto alle pagine
“normali”: sono presenti i link.
I link, in pratica, sono puntatori ad altre pagine ipertestuali. Un link ha un aspetto simile al seguente: questo è un link. Ma anche un’immagine può essere un link: con un clic sul link si passa alla pagina ipertestuale indicata.
Quindi la lettura può seguire molti percorsi alternativi. Il codice con cui viene scritta una pagina ipertestuale è l’HTML (HyperText Markup Language).
Questo codice viene interpretato dal browser cioè dal programma che permette di navigare in Internet; esempi di browser sono Internet Explorer, Firefox, Safari, ecc.
Un link, quindi, permette di raggiungere altre risorse di Internet.
Per consentire i passaggi ipertestuali si è sviluppato il cosiddetto
URL (Uniform Resource Locator)
che rappresenta il nome preciso e univoco con il quale le risorse sono conosciute dalla rete Internet.
La struttura di un URL è la seguente:
tipo://indirizzo/percorso/oggetto dove
tipo è il protocollo di trasferimento o il tipo di servizio (http, ftp, file, ecc.)
indirizzo è il nome dell’elaboratore che contiene fisicamente la risorsa,
percorso è la localizzazione logica all’interno del computer
oggetto è il nome della risorsa.
L’ URL quindi contiene il nome del protocollo da utilizzare per accedere alla risorsa (per esempio http), il nome del
dominio che identifica un computer specifico su Internet e la descrizione gerarchica che specifica il percorso di un file nel computer.
http://www.matematicamente.it http:// Protocollo
www.matematicamente.it nome del sito
Il nome del sito è costituito da due parti fondamentali:
Dominio di secondo livello: il nome scelto in fase di registrazione (nell’esempio “matematicamente”)
Dominio di primo livello: indica il tipo di dominio scelto nel sito (nell’esempio “.it”)
Alcuni esempi:
.org: sito organizzativo
.edu: sito relativo all’educazione .com: sito di commercio
.gov: sito governativo
.net: enti che si occupano della rete
Se l’indirizzo è più lungo è perché indica la pagina che viene visualizzata in quel determinato momento, come ad esempio
http://www.matematicamente.it/ecdl
Precedentemente si è scritto dell’HTML, il linguaggio con cui vengono scritte le pagine internet.
Per poter interpretare tale codice è necessario un particolare programma chiamato Internet browser.
I browser più diffusi sono Microsoft Internet Explorer, Mozilla Firefox, Google Chrome.
ATTENZIONE: il browser non è il motore di ricerca!
Per motore di ricerca si intende un sito internet specifico che permette di ricercare informazioni sul web a partire da una parole chiave.
I più diffusi motori di ricerca sono Google,Yahoo!, Bing.
Quando si parla di indirizzo ip si intende un indirizzo numerico che indica il protocollo di rete di un determinato sito web.
A volte può capitare di voler conoscere questo indirizzo ma di non sapere come fare. Questa operazione infatti potrebbe sembrare piuttosto complicata per i meno esperti.
In realtà, seguendo alcuni pratici consigli ci si può riuscire abbastanza facilmente.
Nelle prossime slide verrà spiegato, in pochi e semplici passaggi, come fare.
Per conoscere l'indirizzo ip di un sito internet si può adoperare la finestra del prompt dei comandi.
"Start/Tutti i Programmi/Accessori/Prompt dei comandi"
oppure semplicemente cliccando su "Start" e poi digitando ''cmd'' nella finestra che comparirà sullo schermo.
A questo punto, una volta apparsa la finestra del prompt dei comandi, bisognerà andare semplicemente a digitare il comando al quale sarà affiancato e successivamente l'indirizzo alfabetico del sito di cui si è interessati a conoscere l'indirizzo ip.
nslookup www. Google. It (invio)
La risoluzione tra URL e Indirizzo IP, necessaria per l'instradamento in Rete tramite protocollo IP, è affidata al DNS, il database server che contiene la corrispondenza fra nomi di host e indirizzi IP.
I server DNS non sono altro che quei “traduttori” che ti permettono di collegarti ai siti Internet digitando degli indirizzi testuali semplici (es. google.com) anziché dei lunghissimi indirizzi numerici (es. 74.125.224.72) che poi sarebbero le reali coordinate dei siti Internet.
Questo significa che utilizzare dei server DNS rapidi rende più veloce la connessione ai siti Internet rispetto a quando si usano dei server DNS lenti.
I server DNS di Google sono noti ed ampiamente apprezzati specie per la loro velocità e per il fatto che, essendo internazionali, consentono di accedere anche ai siti che vengono oscurati dai provider italiani.
Server DNS preferito IPv4: 8.8.8.8 Server DNS alternativo IPv4: 8.8.4.4
Anche i server DNS di OpenDNS sono abbastanza veloci, consentono anch’essi l’accesso ai siti bloccati in Italia, ma vengono sfruttati più che altro per la loro funzione di «parental control» mediante la quale è possibile inibire la visualizzazione di determinate categorie di siti: social network,
siti per soli adulti, siti dedicati ai giochi, servizi di Web Mail e molto altro ancora.
•Server DNS preferito IPv4: 208.67.222.222
•Server DNS alternativo IPv4: 208.67.220.220
Servizi Internet
Oltre alle pagine Web, Internet mette a disposizione vari servizi:
E-Mail: il servizio di posta elettronica. A questo servizio è possibile correlare le Mailing list (liste di mail) e le Newsletter.
E-commerce: commercio e vendita on line.
E-Learning: istruzione attraverso la rete.
Download e Upload di file: la possibilità di scaricare programmi,
immagini, documenti, in generale file, dai siti Internet. Questo processo è chiamato Download. Viceversa la possibilità di inserire contenuti in siti che li ospitano è chiamato Upload
Home-banking: gestione del conto corrente attraverso la rete.
Istant messanging: scambio in tempo reale di messaggi di testo.
Telelavoro: attività lavorativa svolta in un luogo diverso dall’azienda, normalmente a casa.
Voip (Voice Over Internet Protocol): conversazione telefonica tramite Internet, come ad esempio, Skype
Video chiamate: chiamata telefonica con la visione degli utenti tramite la webcam.
Feed RSS: possibilità di avere disposizione gli ultimi aggiornamenti di un sito.
Blog: un diario personale on line.
Forum: community di condivisione
Streaming TV: possibilità di usufruire della TV via Internet
Cloud computing: utilizzare delle risorse offerte da un provider per la memorizzazione e l’utilizzo di risorse online
Fin dal 1993, internet era esclusivamente utilizzato da scienziati e militari e le applicazioni commerciali nell’uso della rete erano limitate.
L’affermazione dei browser e delle attività commerciali su internet, che viene definita web 1.0, rappresenta la prima fase dell’uso recente di internet;
il web 2.0 vede la crescita dei siti di social network e la nascita di una cultura partecipativa sulla rete, che lo contraddistingue;
il web 3.0 rappresenta la fase che stiamo vivendo attualmente,
l'evoluzione dell'utilizzo del Web e l'interazione fra gli innumerevoli percorsi evolutivi possibili
WEB 1.0 - WEB 2.0 - WEB 3.0
WEB 1.0
Nel primo stadio internet attua un’interconnessione degli utenti basata sulle reti di comunicazione; sviluppa siti, portali e piattaforme di servizi web nei quali gli utenti possono solo navigare, sfogliare il catalogo virtuale dei prodotti, approfondendo le loro caratteristiche, e acquistare dai siti web delle aziende.
Con il web 1.0 viene limitata la possibilità d’interazione tra l’azienda e i propri clienti, quindi gli unici punti di contatto sono costituiti dai mezzi classici: mailing, fax, telefono e pubblicità.
Si determina così un flusso comunicativo di tipo unidirezionale che, partendo dall’alto verso il basso, mira al mercato di riferimento, senza esplorare né condividere i suoi desideri e le sue proposte.
Il navigatore giungeva su una pagina, ne visionava il contenuto e finiva li, lo spazio web era una vetrina, si comunicava in un solo senso, nell’unica direzione possibile: dall’editore dei contenuti all’utente visitatore; un po’ come avviene per la televisione, anche se con una fruizione diversa permessa dall’ipertestualità.
WEB 2.0
Il secondo stadio invece è caratterizzato dal web 2.0, inteso come l’insieme di tutte quelle applicazioni online che permettono uno spiccato livello di interazione sito- utente (blog, forum, chat, sistemi quali Wikipedia, Youtube, Facebook, Myspace, Twitter, Gmail, WordPress, Tripadvisor ecc.).
Il web 2.0 poggia quindi su tre pilastri: interazione, condivisione e partecipazione. L’interazione offre a ciascun individuo la possibilità di usufruire, in tempo reale, dei contenuti che più lo interessano e di condividerli con gli altri utenti della rete.
WEB 3.0
Il Web 3.0 è un termine a cui corrispondono significati diversi volti a descrivere l'evoluzione dell'utilizzo del Web e l'interazione fra gli innumerevoli percorsi evolutivi possibili.
Questi includono:
- trasformare il Web in un database, cosa che faciliterebbe l'accesso ai contenuti da parte di molteplici applicazioni che non siano dei browser;
- sfruttare al meglio le tecnologie basate sull'intelligenza artificiale;
- il web semantico.
La trasformazione del World Wide Web in un ambiente dove i documenti pubblicati siano associati ad informazioni e dati (metadati) che ne
specificano il contesto semantico in un formato adatto all’interrogazione e l’interpretazione (es. tramite motori di ricerca) e, più in generale,
all’elaborazione automatica.
In pratica, un Web in cui le macchine non solo leggono, ma interpretano.
WEB 4.0
Questa ulteriore fase del Web dovrebbe integrare pienamente le due fasi precedenti per realizzare un Web Ubiquitous:
in pratica le applicazioni presenti sul Web avrebbero lo scopo di mettere in connessione in modo automatico le persone
(così come il Web semantico mette in connessione in modo automatico i contenuti), sulla base delle attività che stanno svolgendo, per aiutarle a collaborare e raggiungere scopi condivisi mettendo insieme le loro risorse e le loro competenze.
Si tratterebbe quindi di un Web pienamente integrato con la realtà fisica, al servizio delle relazioni, per moltiplicarle e potenziarle.
Un aspetto importante dal punto di vista tecnologico è la diffusione delle tecnologie wireless che possono consentire effettivamente alle persone di essere sempre online in qualsiasi luogo e in qualsiasi momento.
L’idea fondamentale in questo tipo di evoluzione è che il Web diventi sempre più uno strumento di servizio per aiutare le persone a raggiungere i loro obiettivi (conoscenza, lavoro) sfruttando l’enorme patrimonio di risorse che deriva dall’essere in rete: non solo risorse “statiche” (contenuti) ma sempre di più “intelligenze”.
SITI WEB STATICI E DINAMICI
Siti web statici.
I siti web statici sono siti web composti da pagine HTML residenti sul webserver che possono essere visualizzate allo stesso modo da tutti gli utenti. Non sono modificabili, salvo nel caso in cui se ne carichi un'altra con lo stesso nome, e non consentono la personalizzazione da parte dell'utente. Per ogni pagina web esiste un file fisico scritto in linguaggio Html. I siti web statici sono molto diffusi nei primi anni della rete internet.
I siti web dinamici sono sviluppati mediante linguaggi di scripting server side ( Asp, Php, ecc. ).
Consentono di scrivere il contenuto della pagina sulla base dei parametri inseriti dall'utente. Per ogni pagina web non esiste una pagina fisica poiché questa viene costruita in linguaggio HTML ogni volta che l'utente la richiede.
I siti web dinamici occupano meno spazio e sono facilmente aggiornabili.
Essendo dinamici implicano un maggiore lavoro da parte del processore del server.
Siti web dinamici.
WEB MASTERING
Con il termine web mastering si indicano le conoscenze e le operazioni necessarie a creare e gestire un sito web.
Un webmaster cura la parte tecnica e amministrativa di un sito, dai codici che sono alla base delle pagine web, allo spazio in rete che le ospita.
Web Design
Il webdesign o web design indica la fase di progettazione e di sviluppo tecnico di un sito web.
Il web designer è colui che progetta la comunicazione visiva di un sito e crea le singole pagine web: in generale è il responsabile dell'aspetto grafico di un sito, della sua riuscita comunicativa e del coinvolgimento emotivo degli utenti che visitano il sito.
Il web designer è anche il responsabile finale della qualità di un sito web e garantisce che i siti che siano accattivanti dal punto di vista grafico, abbiano un buon impatto visivo, siano semplici da navigare, compatibili con le esigenze dei visitatori e accessibili utilizzando browser e componenti diversi: a lui spetta il compito di coniugare design e navigazione mediante l'utilizzo delle tecnologie digitali disponibili.
Spesso per siti di piccole dimensioni il ruolo di web design e web master è assunto da una medesima figura.
Sono quei casi in cui web design e web master hanno le conoscenze necessarie per potersi occupare dell’intera progettazione, costruzione e gestione di un sito web.
Per siti web professionali web design e web master lavorano a stretto contatto ma ognuna su fronti differenti. Per progetti complessi molto complessi sono affiancati da altre figure professionali come esperti in web marketing, graphic designer e programmatori
I VARI ASPETTI DEL WEB DESIGN
1) Design grafico:
Le pagine web sono una forma di comunicazione e pertanto richiedono un’adeguata presentazione grafica.
Occuparsi della grafica significa sapersi occupare di tutto ciò che riguarda il layout, i caratteri, i colori etc. delle singole pagine web.
Un graphic designer può pertanto lavorare esclusivamente sull’aspetto di una pagina web e non sulla programmazione esistente alla base di essa.
2) Design di informazione (information design):
Questo aspetto della realizzazione di siti web riguarda l’organizzazione dei contenuti di una pagina web.
Occuparsi del design di informazione significa organizzare e gestire i contenuti presenti nelle pagine di un sito web e la loro accessibilità da parte degli utenti.
3) Design dell’interfaccia:
Mentre il design grafico riguarda solamente l’aspetto delle pagine web, il design dell’interfaccia riguarda l’organizzazione e le modalità di funzionamento delle pagine e quanto queste siano facilmente fruibili dai visitatori.
Questo aspetto del web design riguarda tutti i metodi scelti per poter eseguire operazioni direttamente sul sito come, ad esempio, tutti i pulsanti e i link presenti, essenziali per la navigazione interna.
4) Produzione di testi:
Occuparsi di web design comporta anche la creazione dei documenti, codici e immagini alla base dello
“sviluppo” di una pagina web.
Il processo di scrittura si basa sulla conoscenza del linguaggio di programmazione html.
5) Scrittura e Programmazione:
Alcune funzioni avanzate presenti nei siti web (come i contenuti dinamici e l’interattività) richiedono la conoscenza e l’utilizzo di programmi speciali e applicazioni gestite dai programmatori o “sviluppatori”
durante la creazione di un sito.
6) Multimedialità
In ogni pagina web è possibile inserire elementi multimediali come suoni, video, animazioni e filmati flash per l’interattività.
In particolare è proprio la figura
professionale dello sviluppatore multimediale
o flash a creare file audio e video in Flash
adatti alle pagine web.
Gli elementi del web design
I seguenti linguaggi sono tutti associati alla creazione a allo sviluppo dei siti web e sono ordinati in base ad un livello crescente di difficoltà e pertanto verranno presi in considerazione durante il corso secondo tale sequenza:
· HTML/XHTML
· CSS (Cascading Style sheets)
· JavaScript/DOM scripting
· Server-side scripting
· XML
· Java
HTML (HyperText Markup Language)
L’HTML (HyperText Markup Langage) o l’XHTML (eXtensible HTML) sono entrambi linguaggi utilizzati per la creazione dei documenti (i cosiddetti “ipertesti”), presenti nelle pagine web.
Gli ipertesti realizzati in HTML sono pagine che attraverso appositi collegamenti o link servono a collegare tra loro le diverse pagine web.
L’(X)HTML non è un linguaggio di programmazione, ma un linguaggio di markup o “etichettatura”, volto a creare un sistema per identificare e descrivere i contenuti testuali di un documento web.
CSS (Cascading Style Sheets)
Con il termine Cascading Style Sheets (CSS) si indicano quei file che servono a determinare l’aspetto dei contenuti presenti in una pagina web, come la formattazione e il layout, realizzati precedentemente in (X)HTML.
In particolare i file CSS, collegati agli “ipertesti”, sono fondamentali per far si che il browser riconosca l’interfaccia grafica progettata per un sito.
JavaScript
Il JavaScript, pur non collegato al Java, è un linguaggio di programmazione.
Viene utilizzato per aggiungere e manipolare gli elementi presenti nelle pagine web e alcune funzioni della finestra del browser.
Questo linguaggio viene utilizzato ad esempio per cambiare gli stili di alcuni elementi di un sito oppure per far ricordare al browser le informazioni relative all’utente in caso di una sua nuova visita.
Server-side programming:
Mentre alcuni siti web sono semplicemente una raccolta di documenti redatti in (X)HTML, molti siti commerciali presentano funzionalità avanzate ed un’interfaccia molto più dinamica a seconda delle esigenze.
Queste funzioni avanzate sono gestite attraverso applicazioni web specifiche presenti nei server.
Sviluppare delle specifiche applicazioni web rientra nell’ambito specifico della programmazione, dal momento che possono essere utilizzati diversi linguaggi come CGI Scripts (scritto in C+, Perl, Python, o altri), Java Server Pages (JSPs), PHP,VB.NET,
ASP.NET, Ruby on Rails.
XML:
XML (eXtensible Markup Language) non
rappresenta un linguaggio vero e proprio
ma un insieme di regole per creare altri
linguaggi di markup come l’(X)HTML.
Java:
Si tratta di un linguaggio di programmazione completo utilizzato per lo sviluppo di programmi di ampio utilizzo.
Tale linguaggio può essere tuttavia utilizzato anche per la creazione di piccole applicazioni per il web (le cosiddette
“applets”).
Imparare il linguaggio di programmazione Java è fondamentale solo nel caso in cui si voglia diventare dei programmatori.
In realtà non c’è alcuna necessità di conoscere il linguaggio Java per creare dei siti web. Al contrario un’eventuale conoscenza di questo linguaggio costituisce uno step finale nella realizzazione di un sito web.
Cos’è indispensabile?
Tra tutti gli elementi finora visti la conoscenza di soli due è strettamente
necessaria per creare autonomamente un sito web semplice:
il linguaggio di markup (X)HTML e i file CSS
sono i due elementi fondamentali per creare
la struttura e il layout delle pagine web.
Di cosa ho bisogno per creare un sito web?
a) Hardware
- un pc o un mac, dotato di una buona RAM, con almeno uno dei seguenti sistemi operativi:Windows, Linux o MacOS;
- uno scanner o una macchina fotografica digitale per poter creare eventualmente gli elementi grafici da inserire nelle pagine web create;
- eventualmente un secondo computer con una differente piattaforma per gestire al meglio lo sviluppo del sito web e testare in tempo reale le varie modifiche.
b) Software
Esiste un’infinità di programmi creati e utilizzati espressamente per la realizzazione delle pagine web.
Possiamo raggruppare tutti questi software in 6 categorie a seconda delle loro finalità:
