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.
stile in linea...
<h1 style="color: red; background: black;">Sezione colore rosso su sfondo bianco</h1>
stile incorporato... <html>
<head>
<title>Inserire i fogli di stile in un documento</title>
<style type="text/css">
h1 {color: red; }
</style>
</head>
<body>
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>
<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.
Novità in tema codice
Il nuovo motore di ricerca americano sviluppa servizi accessori molto utili per i webmaster:
Blekko non è solo una valida alternativa agli altri più blasonati e popolari motori di ricerca ma anche una valida piattaforma tecnologica di analisi dei contenuti Web che offre degli strumenti veramente utili per i Webmaster... http://scaccoalweb.dotblog.it/2011/11/blekko-emerge-anche-come-nuovo-strumento-di-analisi-seo.html