La Rete e il Web

La ragnatela ipertestuale diffusa a livello mondiale nota come Web è un ambiente informativo e comunicativo che si basa su meccanismi di interazioni bidirezionali di tipo client-server grazie al quale è possibile una relazione comunicativa con l'ambiente informativo circostante.

Il client browser può così accedere ad infiniti nodi informativi ospitati su server Web e collegati fra loro attraverso appositi collegamenti (link). Il Web quindi come linguaggio ipertestuale la cui struttura, forma estetica e funzione sono comandati rispettivamente da appositi linguaggi di editing e programmazione quali html, css e javascript.

Scrivere codice per il Web

Il codice della pagine Web si suddivide essenzialmente in tre categorie principali: il markup strutturale (ad esempio html5) il quale deve cercare di dare maggior senso e significato possibile alla strutturazione - quindi semantica - di una pagina Web, il codice che imposta il layout e la formattazione grafica attraverso fogli di stile (css) ed il codice come javascript-DOM che determina le possibili fruizioni interattive con i contenuti di un sito Web magari attingendo dinamicamente ad un apposito database (ad esempio mysql) con apposite chiamate al server Web (ad esempio tramite php).

Per cominciare ad approcciarsi a questa complessa struttura di linguaggio ipertestuale conviene sicuramente procedere a piccoli passi concentrando la propria attenzione sul codice di markup che è oltretutto il più importante per presentare in maniera corretta ed ottimizzata i contenuti ai sempre più determinanti motori di ricerca. Inoltre, imparare a scrivere codice markup consente non solo di imparare a strutturare il Web ma permette di prendere dimestichezza con altri linguaggi di editing per svariati utilizzi come ad esempio la possibilità di scrivere ebook in formato epub.
L'esempio degli ebook è calzante per individuare un modello di comunicazione digitale affine a quella del Web ma che ha specifiche esigenze di presentazione e navigabilità dovendo realizzare un qualcosa che si possa definire libro ma che sia facilmente fruibile da un browser web in azione su un dispositivo mobile come un ereader (indice dei contenuti, ancore che rimandano a note e capitoli interni, massima leggibilità, eccetera).

MarkUp strutturale

L'html è un linguaggio di editing per la definizione della struttura di un sito web. I marcatori del linguaggio detti anche tag si riconoscono per essere compresi fra i segni di maggiore e minore ed applicano il loro marcamento strutturale a tutto ciò a cui sono associati (testo od elementi multimediali) fino a quando non vengono chiusi con la ripetizione del loro nome arricchita dal segno dello slash oppure perchè subentra un altro marcatore. I marcatori possono avere degli attributi a loro volta contraddistinti da un valore e devono rispettare il principio di una corretta nidificazione.

<a href="http://www.strano.net">link <strong>importante</strong></a>
link importante

I principali marcatori di una pagina web sono:

• doctype (tipologia della grammatica formale pubblicata)
• html (il tag che definisce un documento html)
• head (la sezione del documento html che raccoglie le meta-informazioni ovvero le informazioni che recensiscono il sito web)
• title (il titolo che recensisce la pagina web)
• meta (marcatori di descrizione della pagina o del sito web e delle sue caratteristiche ivi compresa la codifica dei caratteri)
• body (sezione del file html in cui vi sono i veri e propri contenuti della pagina web)
• h (marcatore che identifica secondo una gerarchia da 1 a 6 le sezioni principali di un documento Web)
• div (marcatore che identifica le singole sezioni di un documento Web)
• p (marcatore che identifica i paragrafi, nota bene: molti marcatori sono iniziali del corrispondente termine in inglese ed in questo casa paragraph)
• img (marcatore che identifica una immagine, molti importanti i relativi attributi src ed alt che corrispondono rispettivamente all'indirizzo relativo o assoluto della risorsa immagine e alla sua alternativa testuale
• a (marcatore che identifica un collegamento o link, molto importante il suo attributo href che ne identifica la url a cui è associato)

Con l'avvento dell'html5 sono comparsi molti altri marcatori orientati a classificare in maniera migliore il documento sotto un profilo semantico ad uso e consumo dei motori di ricerca e di ogni altro motore di rendering della pagina web: header, nav, footer, section, article, aside, figure, address, video, audio, ...

Ovviamente è possibile avvalersi di software (automatismi) per scrivere del codice struttuale per il Web così come di validatori per controllare il lavoro svolto ma realizzare una realizzare una pagina html con solo editor di testo ed utilizzando i principali marcatori (tag) rimane un esercizio fondamentale per imparare l'html facendo molta attenzione alle risorse chiamate in causa dai marcatori ed al loro posizionamento (percorso relativo o assoluto). I file html sono file di solo testo con estensione .htm o .html. Siccome sono destinati ad essere trasferiti sul Web (magari tramite servizio ftp) in maniera funzionale è assolutamente importante rispettare delle regole di buona scrittura come quelle di non usare lettere maiuscole, spazi e simboli speciali nella definizione dei nomi di file. E' inoltre indispensabile prendere coscienza del posizionamento delle risorse chiamate in causa dal codice html realizzato che può essere relativo a:

• risorse online contraddistinte dal protocollo http
• risorse presenti sulla stessa cartella dei file html
• risorse presenti su una sotto-cartella evocabili tramite dir/nome_file
• risorse presenti su una cartella di livello superiore alla propria evocabili tramite ../nome_file

Presentare con Stile il Web tramite i CSS

CSS (Cascading Style Sheets - fogli di stile a cascata) è una tecnica che consente di introdurre facilmente ed in maniera razionale ed ottimizzata (nel senso di razionalizzazione delle energie a disposizione) degli elementi di formattazione grafica in una pagina html. CSS come html è un linguaggio di editing che può essere associato ad una pagina Web (quindi ad un file html) in tre maniere diverse: tramite uno stile in linea è possibile determinare lo stile di un singolo elemento della pagina web, con lo stile incorporato lo stile di una singola pagina Web mentre con lo stile collegato si può virtualmente determinare lo stile di un intero sito Web pur complesso: l'efficienza e la comodità dei css risiedono infatti anche nella possibilità di comandare lo stile di più elementi e di più pagine web facendo riferimento ad una unica regia di stile determinando un notevole risparmio in termini di codice e banda.

1. stile in linea...
   <h1 style="color: red; background: black;">Sezione colore rosso su sfondo bianco</h1>
2. stile incorporato...
   <html> <head> <title>Inserire i fogli di stile in un documento</title>
   <style type="text/css"> h1 {color: red; } </style>
   </head> <body>
3. stile collegato...
   <html> <head> <title>Inserire i fogli di stile in un documento</title>
   <link rel="stylesheet" type="text/css" href="stile.css">
   </head> <body>

Sebbene i fogli stile siano una tecnica MOLTO complessa da padroneggiare alcune sue regole base sono relativamente semplici ed il funzionamento base dei css è un tipo di know-how indispensabile per chiunque ha necessità di rapportarsi a vario livello rispetto alla progettazione Web.
I fogli stile si applicano ai marcatori e quindi il loro funzionamento è inscindibile dalla marcatura di tipo html, gli elementi a cui si applicano gli stili possono essere cosiddetti di blocco ovvero che si estendono per intero in larghezza (ad esempio come p, table, div, h1 e h2) oppure in linea ovvero che condividono la loro posizione orizzontalmente con altri elementi (ad esempio a, img, span o strong). Similmente ai marcatori html i fogli stile sono caratterizzati da selettori a cui possono essere associate delle proprietà a cui a loro volta possono essere associati dei valori.
h1
{
color:orange; text-align:center;
}

I selettori associati ad un determinato marcatore ereditano le proprietà dai marcatori nel quale è eventualmente nidificato attraverso regole ben precise: per poter attribuire con precisione determinate proprietà di formattazione grafica a dei marcatori gli stessi possono essere identificati in maniera univoca tramite un identificativo (id) oppure accorpati in classi (class). L'identificativo id è particolarmente importante in quanto ad esso può essere associato non solo un determinato foglio stile ma anche un punto di ancoraggio (stile vecchio attributo name), una funzionalità javascript, un elemento dichiarato object oppure per l'identificazione di campi nel caso di estrazioni di dati per un database.
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Questo solo paragrafo ha un identificativo univoco che ne determina la centratura e sarà quindi il solo ad essere centrato!</p>
<p>Questo paragrafo non è caratterizzato da nessuno stile...</p>
</body>
</html>

<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>

<body>
<p>Questo paragrafo non è interessato da nessuno stile...</h1>
<p class="center">Questo paragrafo come tutti gli altri paragrafi del documento web con questa specifica classe risulterà centrato!</p>
<div class="center">Anche questo div risulterà centrato!</p>
</body>
</html>

Codice per tutti i gusti

Alcune categorie di device esigono codice ben strutturato e performante ma anche accorgimenti di layout ben specifici: è il caso dei dispositivi mobili che sicuramente necessitano di colori cosiddetti web safe, forti contrasti, informazione essenziale e leggera, layout e meccanismi di navigazione semplificati. Un accorgimento essenziale da adottare per un codice che ci si aspetti sia ben performante su smartphone ed altri dispositivi mobili è l'adozione di
<meta name="viewport" content="width=device-width" />
che ci consente di adattare i contenuti del sito web alla larghezza dello schermo (ovviamente come tutti i meta da inserire all'interno del marcatore head).
In ogni caso bisogna pensare ad editare il codice Web in funzione anche del particolare utilizzo del medesimo su interfacce con esigenze (di usabilità in primis) di tipo diverso: per rimanere ad esempio nel dominio dei dispositivi mobili liste di link adiacenti potrebbero risultare scomode su tablet ed affini dove non esistono sistemi di puntamento (mouse) o navigazione (tastiera) che permettono viceversa funzionalità di navigazione e funzionamento avanzate.

Altro caso di device esigente è costituito dagli spider dei motori di ricerca che fanno particolarmente attenzione a fattori ambientali come all'ecologia dei link interni ed esterni, alla qualità ed aggiornamento dei contenuti (facendo attenzione all'originalità dei medesimi nonché alla loro leggerezza ed efficacia di presentazione agli occhi degli spider) ma anche a particolari elementi strutturali e meta-descrittivi come url, title, meta description, tag di tipo h, alternative testuali.

Web Test

Altro aspetto strategico rimane la scelta dell'host (punto fisico della rete su cui ospitare il server web) in quanto possono esserci dei vantaggi nel posizionare un sito Web su un server Web e quindi su un host che non solo garantisce elevate performance (misurabili da appositi strumenti) ma che ha già guadagnato un certo tipo di credibilità in Rete ad esempio controllando la presenza di evenutali malware così come la link popularity.

Le performance di un sito Web ospitato su un determinato host sono valutabili attraverso numerosi strumenti di Web Test capaci di valutarne - ad esempio - la velocità e relativa leggerezza. Altri strumenti come i validatori sono in grado di verificare la correttezza formale del codice pubblicato oppure il funzionamento dei collegamenti ipertestuali. Altri strumenti ancora come i simulatori sono in grado di simulare (con qualche limite) il rendering di pagine Web su dispositivi mobili, tablet o altri dispositivi speciali.