Introduzione al Web Design

Web Design e Web Mastering

Cominciamo il nostro corso con una breve ma importante definizione per chiarire le professionalità che caratterizzano un Web Design e un Web Master. Il Ruolo del Web Designer La figura del Web Designer cura esclusivamente la parte grafica del sito, l'aspetto e il layout delle pagine web: vale a dire quell’interfaccia che tutti gli utenti vedono in rete. Il web designer si occupa di realizzare i testi, le immagini e i dati multimediali che si vogliono far apparire sulle pagine di un sito.

Pertanto un Web Designer costruisce l’immagine di un cliente, di un’azienda o di un privato proprio attraverso la creazione di un sito web. Il Ruolo del Web Master Generalmente con il termine Web Mastering si indicano le conoscenze e le operazioni necessarie a creare e gestire un sito web. Un webmaster cura quindi la parte tecnica e amministrativa di un sito, dai codici che sono alla base delle pagine web, allo spazio in rete che le ospita.

I Diversi Aspetti del Web Design Analizziamo ora in dettaglio quelle che sono le principali attività di un Web Designer.

Il Design grafico

Le pagine web sono una forma di comunicazione e pertanto richiedono un’adeguata presentazione grafica.

Occuparsi della grafica significa saper scegliere e gestire tutto ciò che riguarda il layout, i caratteri, le forme e i colori delle singole pagine web.

Un Web Designer pertanto lavora all’inizio su tutti quegli elementi destinati ad apparire sulle pagine web; una volta scelto l’aspetto

grafico delle pagine potrà creare l’apparenza scelta attraverso il linguaggio (X)HTML.

Design delle Informazioni

Questo aspetto della realizzazione di siti web riguarda l’organizzazione dei contenuti di una pagina web. Occuparsi del design delle informazioni significa organizzare e gestire i contenuti presenti nelle pagine di un sito web e la loro accessibilità da parte degli utenti: in base alla tipologia di ogni contenuto, il Web Designer dovrà individuare la posizione del sito più adatta a metterlo in evidenza.

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 affinchè gli utenti possano eseguire operazioni direttamente sul sito; un Web Designer pertanto dovrà curare la creazione, l’aspetto e il posizionamento di tutti i pulsanti e i link presenti, essenziali per la navigazione interna.

Produzione della struttura (X)HTML

Occuparsi di web design comporta ovviamente la creazione di codici (X)HTML per generare l’aspetto finale delle pagine web.

Conoscenze Base di Programmazione

Alcune funzioni avanzate presenti nei siti web (come i contenuti dinamici e l’interattività) richiedono la conoscenza e l’utilizzo di codici di programmazione e applicazioni: i programmatori creeranno i codici di programmazione ma il Web Designer dovrà comprendere il loro funzionamento per gestirli al meglio all’interno delle pagine.

Multimedialità

In ogni pagina web è possibile inserire elementi multimediali come suoni, video, animazioni e filmati flash. Tali tipologie di file possono essere create anche dallo stesso Web Designer che dovrà poi integrarle all’interno delle pagine web.

N.B. Attualmente si sconsiglia sempre di più la creazione di siti in Flash, con un massiccio utilizzo di elementi multimediali e interattivi in linguaggio ActionScript, data la loro scarsa compatibilità in ambito Mac.

I Linguaggi del Web Design

La conoscenza dei seguenti linguaggi rappresenta un aspetto molto importante nella professione di ogni Web Designer.

• (X)HTML

• CSS (Cascading Style sheets)

• JavaScript

• PHP

Tali linguaggi sono tutti associati alla creazione e allo sviluppo dei siti web e, nella lista presentata, sono ordinati in base ad un livello crescente di difficoltà e pertanto saranno presi in considerazione durante il corso secondo tale sequenza.

Non tutti questi linguaggi sono ovviamente sempre fondamentali per svolgere la professione di Web Designer: non è detto che un Web Designer debba conoscere alla perfezione linguaggi di programmazione come il PHP e il JavaScript, al contrario è fondamentale una conoscenza approfondita dell’(X)HTML e dei CSS, elementi indispensabili per creare la struttura e il layout delle pagine web.

(X)HTML (HyperText Markup Language)

L’HTML (HyperText Markup Language) e l’XHTML (eXtensible HTML) sono entrambi linguaggi utilizzati per la creazione di quei documenti (i cosiddetti “ipertesti”), che permettono di visualizzare e navigare tra le pagine in rete.

Come vedremo nel modulo dedicato in dettaglio all’HTML, l’XHTML non è altro che una versione riformulata dell’HTML; dato lo stretto rapporto tra questi due linguaggi di markup, spesso nelle lezioni del corso verrà utilizzata l’abbreviazione (X)HTML per indicarli entrambi.

L’HTML e l’XHTML non sono linguaggi di programmazione, ma linguaggi di markup o “etichettatura”, volti 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, realizzata in (X)HTML. In particolare i file CSS, collegati agli ai file (X)HTML, sono fondamentali affinchè il browser riconosca l’interfaccia grafica progettata per un sito.

JavaScript

Il JavaScript è un linguaggio di programmazione. Viene utilizzato per manipolare gli elementi presenti nelle pagine web e alcune funzioni dei browser nella gestione e visualizzazione delle pagine. Ad esempio questo linguaggio viene utilizzato per cambiare in maniera dinamica gli stili di alcuni elementi all’interno di una pagina web oppure per far memorizzare al browser le informazioni relative a un utente in caso di una sua nuova visita.

PHP (Hypertext Preprocessor)

Il PHP è un linguaggio di programmazione che permette agli utenti che navigano in rete di comunicare attraverso le pagina web. Se

l’(X)HTML e i CSS servono a gestire l’interfaccia grafica di un sito, il PHP permette agli utenti di trasmettere delle informazioni attraverso di essa e di conservarle all’interno di appositi database con i quali comunica.

Il linguaggio PHP rappresenta pertanto un fondamentale strumento di interattività e di dialogo tra utenti e pagine web.

Il funzionamento del Web E’ necessario prima di tutto distinguere tra Internet e Web. Cosa si intende per Internet Con il termine Internet si indica un network o una rete di computer connessi tra loro a livello globale. Internet non è un network di proprietà di qualcuno ma semplicemente una forma di cooperazione regolata da un insieme di mezzi e regole standard. Collegare milioni di computer tra di loro significa condividere in tempo reale e a livello globale ogni tipo di informazione. I metodi standard utilizzati per trasferire informazioni e documenti in Internet sono definiti protocolli.

Cosa si intende per Web Il World Wide Web o semplicemente il web, la rete, costituisce solo uno dei tanti modi attraverso cui le informazioni possono essere condivise attraverso internet. Il Web usa uno specifico tipo di protocollo chiamato http (HyperText Transfer Protocol), un acronimo famigliare per chi naviga e che compare all’inizio di ogni indirizzo di sito web. Questo specifico protocollo permette di condividere i documenti collegandoli tra loro in rete attraverso l’utilizzo di ipertesti.

Trasmettere le informazioni nella rete I server I computer che rendono possibile il funzionamento di Internet vengono generalmente chiamati server, dal momento che offrono le informazioni secondo le richieste. I server tuttavia non sono computer veri e propri ma programmi specifici che permettono ai computer di dialogare velocemente tra loro, ricevendo informazioni e inviando in tempo reale le risposte alle richieste. Ogni computer per essere parte della rete deve avere dei programmi server specifici, gli http server, che gli permettono di condividere le informazioni secondo lo specifico protocollo.

Indirizzi IP e Domini:

Ogni computer nella rete ha un proprio indirizzo IP (Internet Protocol) in formato numerico (ad es. 108.321.247.13) e un proprio dominio (DNS, Domain Main System) per indicare ogni server con un nome anziché un numero (ad es. prova.com). L’IP viene usato dai computer per comunicare tra loro mentre il DNS viene usato dalle persone per muoversi con maggiore facilità nel Web. E’ possibile configurare il programma di navigazione (web server) di ogni computer affinchè più di un dominio faccia riferimento ad un solo indirizzo IP, permettendo così a più siti web di condividere un solo server per la gestione dei dati.

I Browser o Programmi di Navigazione

Se i server permettono di ottenere le informazioni richieste in rete, i Browser permettono agli utenti di fare le proprie richieste nel web. Il sistema di domande e risposte gestito da server e browser avviene sempre attraverso il protocollo http, attraverso il quale è possibile trasferire non solo documenti ma qualsiasi tipo di informazione o file: immagini, filmati, file audio e qualsiasi altro tipo di risorsa che sia resa disponibile in rete.

Esistono diversi tipi di browser. I più conosciuti e utilizzati sono i browser grafici, categoria alla quale appartiene, ad esempio, Internet Explorer.

Tuttavia, bisogna ricordare che il Web è accessibile e può essere visto non solamente attraverso dei normali computer ma anche attraverso cellulari e palmari.

Ogni sito web pertanto deve essere visibile attraverso ogni tipologia di browser.

Gli indirizzi delle pagine web (URLs)

Per trovare un sito tra le miriadi di pagine web presenti sui server, si richiama uno specifico indirizzo chiamato URL (Uniform Resource Locator). Un URL completo può apparire ad esempio nel modo seguente: http:// www.sitoprova.it//2014/samples/first.html Ogni URL è composto da tre elementi:

1. Il protocollo (http://) 2. Il nome del sito

3. Il percorso assoluto (absolute path) che conduce al documento che si ricerca.

La prima parte indicata nell’URL è il protocollo che viene utilizzato per lo scambio di informazioni: http://. Il protocollo utilizzato è generalmente l’http. Tuttavia in alcuni casi nell’URL è possibile trovare il protocollo https, utilizzato in alcune pagine web per svolgere operazioni protette La seconda parte dell’URL definisce il sito web attraverso il suo dominio (DNS). In questo caso abbiamo: www.sitoprova.it

La terza parte, in cui vediamo diverse parole separate da barre diagonali (i cosiddetti slash), contiene le indicazioni necessarie per passare attraverso i vari livelli, in cui i documenti di un sito (ipertesti) sono organizzati, fino ad arrivare a quello che ci interessa, indicato nell’ultima parte dell’URL: in questo caso, first.html.

File prestabiliti (Default files)

Non tutti gli URL richiamano uno specifico documento ma molto spesso conducono ad un insieme di cartelle (directory) come nei casi seguenti:

http://www.sitoprova.it oppure http://www.sitoprova.it/news/

In questi casi, il server che riceve la richiesta risponde mostrando un documento di default, chiamato generalmente index.html, che compare nell’URL nel modo seguente:

http://www.sitoprova.it/index.html

Il nome del documento standard generico può tuttavia essere diverso, come ad esempio default.htm oppure index.php e la sua scelta dipende dalle impostazioni del server utilizzato per rendere pubblico il sito.

Tali documenti di default rendono i siti più accessibili dal momento che aiutano i browser a raggiungere con più facilità determinate pagine web, rispondendo con rapidità alle richieste degli utenti.

Schema di funzionamento delle pagine Web

Ogni volta che richiediamo una determinata pagina web si genera la seguente sequenza di eventi:

• Richiamo dell’URL attraverso la sua digitazione nella barra dell’indirizzo oppure attraverso l’uso di un apposito link.

• Il browser invia una richiesta http al server indicato nell’URL, richiedendo un file specifico oppure una directory.

• Il server cerca il file richiesto e risponde secondo il protocollo http e lo riporta al browser.

Se il documento richiesto non può essere trovato il server riporta un messaggio di errore. Molto spesso infatti leggiamo “404 not found”.

• Il browser analizza il documento HTML richiesto. Se questo contiene anche delle immagini allora il browser contatta nuovamente il server per ottenere ogni file d’immagine specificato dal markup del documento sorgente.

• Il browser come ultimo passaggio inserisce ogni immagine nel documento.

Attraverso questo rapido dialogo, apparentemente complesso, ogni utente (o client di rete) e in grado di reperire e visualizzare le pagine web cercate con tutti i loro contenuti.

Tale meccanismo, esemplificato nel seguente schema, costituisce il cosiddetto paradigma client-server.

FINE LEZIONE