Benvenuti in questa nuova rubrica dedicata al Web Design.
Questa serie di articoli sarà divisa in tre fasi: Nozioni base, Dentro il codice, Progettazione.
In questo articolo, cercheremo di capire cos’è internet, cos’è il web e come funzionano. Informazioni che, vi assicuro, faranno la differenza quando progetterete un sito.
L’importanza dell’informatica
Vi starete chiedendo:
Perché un designer dovrebbe dovrebbe sapere come funziona un sito?
La risposta è semplice, ogni progettista deve conoscere il contesto, l’ambiente e la tecnologia con i quali si dovrà confrontare. Per questo, un web designer deve conoscere l’ambiente in cui andrà a operare: il web, gli strumenti utilizzati e soprattutto i limiti e le opportunità delle tecnologie con il quale ha a che fare.
Oggi si vedono troppi creativi che fanno siti “fighi” che però una volta sviluppati creano più problemi che soluzioni: Siti che non si adattano ai dispositivi, che funzionano su alcuni browser e non su altri, confusionari, pesanti o difficili da navigare. Questo accade quando chi li progetta non ha le opportune conoscenze tecnico-teoriche. Ecco perché, per questa rubrica voglio partire proprio dalle nozioni tecniche di base.
Differenza tra Internet e Web
La prima cosa da capire quando ci si approccia alla progettazione di siti è l’enorme differenza tra Internet e Web. Nel linguaggio comune siamo abituati ad utilizzare i due temini come sinonimi ma in realtà sono due cose ben diverse:
- Internet è un’infrastruttura fisica e virtuale che collega diverse reti tra loro, che a loro volta collegano diversi dispositivi per trasferire informazioni.
- Il Web, invece, è un servizio che sfrutta Internet per la condivisione di risorse mediante documenti ipertestuali.
Fatte queste premesse, approfondiamo meglio questa differenza è cerchiamo di capire come funzionano internet e web.
Come funziona Internet
Cominciamo col dire che Internet è prima di tutto una rete. Una rete genericamente è la connessione di due o più dispositivi. Ogni rete ha una specifica architettura che ne definisce il funzionamento. Nello specifico l’architettura di rete di internet è di tipo client-server. Il suo funzionamento è basato sul quello di ARPANET.
Facciamo un passo indietro. Nel 1969, la DARPA (Defense Advanced Research Projects Agency) del “Dipartimento della Difesa degli Stati Uniti” avviò un progetto rivoluzionario che avrebbe cambiato per sempre il mondo della comunicazione: ARPANET. Questa rete di computer è stata progettata e realizzata con l’obiettivo di sviluppare nuove tecnologie a uso militare, ma la sua influenza si è estesa ben oltre gli ambiti militari.
ARPANET rappresentava, infatti, anche un ponte tra il mondo accademico e quello militare. Gli universitari potevano accedere e utilizzare questa rete, promuovendo così un ambiente di collaborazione e scambio di conoscenze senza precedenti.
Tuttavia, per espandere ulteriormente la rete anche ad altri soggetti, serviva un protocollo di trasmissione dati sicuro ed efficiente. La svolta avvenne quando nel 1970 l’università di Stanford mise a punto il modello TCP/IP, ovvero dei protocolli che si occupano del trasferimento e indirizzamento delle informazioni in una rete con architettura client-server.
Sull’esempio di ARPANET, nei due decenni successivi vennero create altre reti, accademiche, amatoriali e nazionali, soprattutto in Europa. Come ad esempio le Reti Accademiche e di Ricerca (EARN, EUNet, RARE): Istituita nel 1984, la rete EARN (European Academic and Research Network) che collegava i mainframe IBM delle università europee. Contestualmente l’Europa partecipò allo sviluppo di nodi sperimentali connessi ad ARPANET e successivamente si unì al progetto per lo sviluppo del protocollo TCP/IP.
Infine, il 30 Aprile 1986 la rete americana ARPANET fu collegata quelle italiana, Inglese e Norvegese. La connessione di tutte queste reti tra di loro diede vita alla prima rete globale, nasce ufficialmente Internet.
L’architettura Client-server
Nelle reti a condivisione diretta tutti i dispositivi sono connessi e condividono risorse e documenti, un esempio sono le reti peer-to-peer (P2P). In queste reti tutti i dispositivi possono richiedere o inviare dati allo stesso modo.
In un architettura client-server, invece, i dispositivi connessi, chiamati host, possono assumere 2 ruoli diversi all’interno della rete:
- Il client è il dispositivo che effettua una richiesta.
- il server è il dispositivo che risponde al client e fornisce servizi, inviando le informazioni richieste.
La differenza rispetto alle reti dirette è la presenza di un server che gestisce gli accessi alle risorse ad un certo numero di “Terminali” o client, così da evitare conflitti di utilizzazione e migliorare la sicurezza.
Il protocollo TCP/IP
Il sistema TCP/IP è composto da due protocolli che servono a migliorare la sicurezza, l’affidabilità e l’efficienza del trasferimento di dati all’interno di una rete client-server. Questi due protocolli sono:
- TCP (Transmission Control Protocol) – Un protocollo di trasmissione che serve a rendere affidabile la comunicazione tra il client e il server, grazie ad una tecnica di trasferimento che suddivide i dati in piccoli pacchetti, indipendenti l’uno dall’altro.
- IP (Internet Protocol) – Il protocollo che si occupa dell’indirizzamento dei pacchetti di dati all’indirizzo di consegna corretto.
Un indirizzo IP è quindi un codice numerico che individua in maniera univoca la posizione fisica di un dispositivo nel mondo. Possiamo paragonarlo all’indirizzo di casa nostra (Via + numero civico + comune + provincia + Paese).
Come funziona il Web
Il World Wild Web, è un servizio che sfrutta la rete internet per condividere informazioni attraverso l’utilizzo di documenti ipertestuali. Ideato al CERN di Ginevra nel 1989, viene ufficializzato il 6 agosto 1991, quando un informatico inglese, Tim Berners-Lee, pubblicò il primo sito web che sfruttava il protocollo HTTP.
Prima del servizio web, infatti, si sfruttava la connessione alla rete utilizzando altri protocolli come l’FTP, che viene utilizzato ancora oggi per scambiare file con un server. L’FTP, ad esempio, viene utilizzato per salvare o copiare file all’interno di un server utilizzandolo come un hard disk remoto oppure per caricare sul server i documenti di un sito web. Con l‘HTTP, invece, si ha la possibilità di sfruttare documenti ad ipertesto, visualizzarne il contenuto e “navigare” tra un documento e l’altro grazie ai collegamenti ipertestuali al loro interno.
Il protocollo HTTP
L’HTTP (HyperTex transfer protocol), è il protocollo che regola il trasferimento di documenti ad ipertesto tra il server e il client. Differisce da altri protocolli (come FTP) per il fatto che le connessioni vengono generalmente chiuse una volta che una determinata richiesta è stata soddisfatta, con un conseguente minor carico sia per il client che per il server.
Questo protocollo permette di visualizzare istantaneamente i documenti come pagine, grazie all’utilizzo di uno specifico software chiamato browser. I documenti ad ipertesto, come esempio i documenti HTML, contengono collegamenti ipertestuali ad altre pagine, creando una consultazione dei dati fluida come se ci si trovasse all’interno di un enorme enciclopedia sfogliabile. L’insieme dei documenti ipertestuali collegati tra di loro e salvati in uno stesso server costituiscono un sito web.
Il browser
Come detto, quindi, per poter leggere un documento ipertestuale, visualizzarlo come una pagina web e interpretando il linguaggio HTML, è necessario un particolare software chiamato browser. Fu lo stesso team di Berners-Lee ha sviluppare, nel 1990, il primo browser proprio per consentire una corretta navigazione all’interno di un sito web.
Abbiamo visto e approfondito il funzionamento di internet e del web , questo è sufficiente per fare le prime considerazione sulla progettazione di un sito web. Approfondiremo il funzionamento dei documenti HTML e del Browser nel prossimo articolo di questa rubrica.
Cosa sapere per progettare un sito
Questa analisi sul funzionamento di internet e del web ci porta a delle importanti conclusioni che influiscono sul modo in cui dobbiamo progettare un sito.
1. Un Sito non è un programma
Un sito web non è un applicazione che viene avviata dal computer ma è un insieme di documenti e file multimediali collegati tra loro. Ogni pagina del sito è un file che “richiama” o si collega ad altri file. In parole povere, il sito non esiste finche non lo vediamo, i documenti sono conservati sul server ma il sito viene “assemblato” dal browser nel momento in cui noi lo visualizziamo.
Questo ci dice che:
il modo in cui la pagina viene visualizzata dipende dal browser utilizzato dall’utente.
Quindi, quando progettiamo un sito dobbiamo prevedere come esso sarà visto nei vari browser disponibili e assicurarci che quello che progettiamo sarà universalmente compatibile.
2. I file del sito sono indipendenti
La prima cosa che abbiamo capito, dunque, è che un sito web non è un applicazione ma un insieme di file collegati tra loro. Tuttavia, anche se collegati i vari file rimangono indipendenti. Le stesse pagine HTML di un sito sono autonome e potrebbero, quindi, essere completamente diverse le une dalle altre, sia nella forma che nel contenuto. È il design grafico delle pagine del sito a dare l’impressione all’utente che si tratti di un unica entità, per questo è importante progettare siti che garantiscano uniformità visiva tra le varie pagine.
Per rendere questa operazione più agevole e migliorare la gestione degli stili di un sito, è stato introdotto un nuovo tipo di file detto CSS, acronimo di cascading style sheets. In questo modo tutti gli elementi delle pagine HTML che sono collegate al medesimo CSS potranno apparire con lo stesso stile.
Affinché il CSS sia ben strutturato, però, il designer deve progettare in maniera coerente e fornire allo sviluppatore delle opportune tavole di stile e design kit dal quale ricavare gli stili di tutti gli elementi grafici del sito. Su questo argomento ho scritto un articolo che spiega l’approccio progettuale utilizzato oggi nei siti web.
3. Il file pesano
Abbiamo detto anche che il protocollo TCP prevede che le informazioni siano:
- Richieste dal client;
- divise in pacchetti dati;
- inviate dal server;
- trasmesse attraverso la rete;
- Elaborate del browser che poi le mostra sul terminale dell’utente
Questo vuol dire che la velocità di connessione dell’utente e la velocità del server sono due variabili fondamentali da tenere in considerazione. Se il server possiamo gestirlo perché scegliamo noi l’hosting che ospiterà il nostro sito (per questo è importante scegliere con accuratezza l’hosting), la connessione dell’utente è, invece, una variabile fuori dal nostro controllo.
Per questo motivo, è importante progettare siti che oltre ad essere accattivanti e user friendly siano anche sufficientemente leggeri in modo da essere visti da utenti che si appoggiano a connessioni meno veloci. Questo risultato si ottiene nei seguenti modi:
- Scrivendo o generando un codice “pulito”. Perché ogni stringa di codice aumenta il peso della pagina;
- Utilizzando immagini non troppo pesanti e ottimizzate per il web;
- Ottimizzando l’utilizzo di web font.
Quando questo non avviene, vediamo il tipico caricamento della pagina con gli elementi che si materializzano sotto i nostri occhi…non è bello!
4. Ogni dispositivo ha le sue caratteristiche
Ogni utente oggi può utilizzare, non solo browser ma anche dispositivi differenti per visitare il nostro sito.
Ogni computer è diverso dall’altro ed è collegato a display più o meno grandi. Inoltre, al giorno d’oggi, esistono tanti tipi di dispositivi: computer desktop, notebook, smartphone, televisori smart e addirittura assistenti vocali con display. Appare quindi evidente un problema di accessibilità.
Anche in questo caso non abbiamo il controllo di questa variabile, l’unica cosa che possiamo fare è adottare un design flessibile e/o adattabile prevedendo tutte le eventualità possibili.
Il responsive è l’adaptive web design sono oggi due tecniche di progettazione e di sviluppo di siti indispensabili.
- L’approccio adaptive prevede un sito con diversi layout fissi ma predeterminati per ogni dispositivo.
- L’approccio responsive prevede un singolo layout fluido che, grazie ad una serie di regole da noi progettate, risponde alle dimensioni dello schermo adattandosi continuamente in maniera fluida.
Con l’adaptive abbiamo il controllo del risultato finale ma non del comportamento della pagina. Con il responsive, invece, abbiamo il controllo del comportamento ma non del risultato.
Le due tecniche possono essere anche utilizzate insieme per garantire un design fluido e perfettamente adattabile ad ogni dispositivo.
Conclusione
In questo articolo abbiamo cominciato ad esplorare l’ambiente in cui un progettista web deve lavorare. Abbiamo visto l’architettura che rende possibile internet e la tecnologia che rende possibile trasformare gruppi di file in un sito web.
Nel prossimo articolo approfondiremo l’HTML, il linguaggio utilizzato per costruire le pagine web.
Lascia un commento