Web design – Nozioni base: Internet vs Web

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.

layout_scene

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.

Schema delle rete ARPANET tra il 1974 e il 1974.

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.

Estratto di un design kit

3. Il file pesano

Abbiamo detto anche che il protocollo TCP prevede che le informazioni siano:

  1. Richieste dal client;
  2. divise in pacchetti dati;
  3. inviate dal server;
  4. trasmesse attraverso la rete;
  5. 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 conosceremo invece gli strumenti che possiamo utilizzare per costruire le nostre pagine web.

Autore dell'articolo: Roberto Maiolino

Formazione professionale da graphic designer, lavoro nel settore nel marketing tradizionale e digitale. Una figura unica per la grafica, la comunicazione e l’advertising. Da anni lavoro per le aziende sul territorio nazionale e per le agenzie di comunicazione del Trentino-Alto Adige. www.robertomaiolino.it

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *