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.
Indice rapido
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 il web.
Come funziona Internet
Cominciamo col dire che Internet è prima di tutto una rete, praticamente una connessione di due o più dispositivi. Ogni rete ha una specifica architettura che ne definisce il funzionamento.
L’architettura di internt è di tipo client-server. Il suo funzionamento è basato sul quello di ARPANET.
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 anche un ponte tra il mondo accademico e quello militare. Infatti, gli universitari potevano accedere e utilizzare questa rete, promuovendo così un ambiente di collaborazione e scambio di conoscenze senza precedenti.
Internet nasce ufficialmente il 30 Aprile 1986, quando la rete americana ARPANET fu collegata alla rete italiana, Inglese e Norvegese. La connessione di queste reti tra di loro diede vita alla prima rete globale.
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.
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 richedere 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 protocollo di comunicazione a pacchetti chiamato TCP (Transmission Control Protocol) è un protocollo di trasmissione che serve a rendere affidabile la comunicazione tra il client e il server.
Questo è possibile grazie ad una tecnica di trasmissione che suddivide i dati in piccoli pacchetti, indipendenti l’uno dall’altro.
L‘IP o Internet Protocol, invece 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 dell’HTTP il protocollo di riferimento usato era il più semplice e leggero FTP, che permette ancora oggi di connettersi ad un server per scambiare file.
Il protocollo HTTP
Grazie all’HyperTex transfer protocol (HTTP), si possono condividere file contenenti ipertesto.
L’HTTP, infatti, 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 permette di visualizzare pagine speciali, come ad esempio i documenti HTML, che contengono collegamenti ipertestuali ad altre pagine.
Il browser
Per visualizzare correttamente queste pagine, si dovette sviluppare un particolare software capace di leggere i file HTML, interpretare i tag che determinano l’aspetto e mostrare la pagina all’utente. Questo tipo di software si chiamano browser, senza di essi non possiamo vedere le pagine di un sito.
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 non è un applicazione che viene avviata dal computer ma è, invece, 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.
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 da essere visti da utenti che si appoggiano a collegamenti internet più o 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
Va da sé che ogni utente può utilizzare 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.
