Teorie e tecniche della comunicazione web

I LINGUAGGI DEL WEB 2.0

FONDAMENTI DI CODIFICA

Premessa:

• CODIFICA (markup) = sistema regolato da standard e convenzioni per cui ad un sistema di bit corrispondono

specifiche informazioni, un’informazione corrisponde quindi all’associazione di specifici bit (esempio: HTML è

un linguaggio di markup)

• PROGRAMMAZIONE = insieme di attività e tecniche svolte per creare un insieme di istruzioni, attività

prettamente informatica che si basa su conoscenze specifiche con l’obiettivo di creare un software

• CODIFICA DEI CARATTERI = sistema convenzionale che fa corrispondere alla associazione di un bit

un’informazione utile alla identificazione di un singolo carattere o glifo, gestibile come carattere

• CODIFICA DEI TESTI = sistema convenzionale che fa corrispondere all'associazione di un bit una informazione

utile all'identificazione della struttura logica di un testo (SGML, XML) e alla sua visualizzazione (HTML, CSS)

• BIT = cifra del sistema di numerazione binario, unità di misura del contenuto d’informazione di un messaggio

che viene rappresentata alternativamente con le cifre 0 e 1

RAPPRESENTARE L’INFORMAZIONE

→ SISTEMA DI CODIFICA DEI CARATTERI (codifica dei singoli caratteri)

→ SISTEMA DI CODIFICA DEI TESTI (codifica che consente il trattamento dei testi)

LA CODIFICA DEI CARATTERI

→ ASCII (1967-1968)

Primo sistema di codifica a 7 bit che permetteva la codifica di 127 caratteri diversi rappresentati quindi attraverso un

codice binario appunto a 7 bit (esempio: “A” = 01000001)

→ ASCII ESTESO (metà anni ‘80)

Con la diffusione dei personal computer vi è la necessità di praticità universale per cui si aggiungono ai 7 bit di ASCII

caratteri linguistici specifici in un sistema definito ASCII esteso (sistema a 8 bite = 1 BYTE). Per motivi commerciali, la

nascita del web ne determina la “morte”: la visualizzazione non era garantita per la diversa visualizzazione dei caratteri

aggiuntivi rispetto lo standard a 7 bit di ASCII

→ UNICODE

Progetto di sistema a 16 o 32 bit che risolve il problema di visualizzazione per tutti i caratteri del mondo

→ UTF-8

Sistema che semplifica la codifica a 32 bit (4 BYTE) poiché pone come standard il sistema ASCII e quindi i caratteri più

frequenti sono codificati con 1 BYTE, poi 2, 3 e 4 per i meno frequenti. Usato molto nel web in quanto ha il vantaggio

➔

di mantenere la stessa codifica per lo standard ASCII e può essere usato su vecchie applicazioni linguaggio di codifica

dei caratteri del web

LA CODIFICA DEL TESTO

La codifica del testo si divide in CODIFICA PROCEDURALE (codifica che si usa, per esempio, in Word e quindi costituisce

una codifica funzionante mediante software) e CODIFICA DICHIARATIVA (codifica che si effettua mediante i linguaggi

di markup). La codifica dichiarativa può usare LINGUAGGI MARKUP PROCEDURALI (HTML) per cui il marcatore si

traduce in comando, o LINGUAGGI DI MARKUP DICHIARATIVI (XML, XHTML, SGML) per cui il marcatore non dà

istruzioni di visualizzazione come avviene nel linguaggio di markup procedurale, ma solo informazioni logiche e

strutturali)

CODIFICA PROCEDURALE

→ Il marcatore traduce direttamente in comando il carattere senza che l’utente debba conoscere il linguaggio di

codifica dei caratteri

CODIFICA DICHIARATIVA

→ Il marcatore non costituisce la visualizzazione diretta del codice, necessario conoscere i linguaggi di marcatura dei

caratteri e gli elementi distintivi della codifica dichiarativa:

→ testo da sottoporre a codifica

→ insieme di identificatori simbolici (<c>, </c>, <emph>)

→ correlazione fra gli identificatori e il testo (<titolo>I Promessi Sposi</titolo>)

→ insieme di regole, definito sintassi, che struttura il modo in cui gli identificatori devono essere inseriti nel testo sotto

forma di marcatori (<titolo> e non >titolo>>)

HTML

Il 28 ottobre 2014 HTML 5 (ultima versione) sostituisce XHTML: i cambiamenti fondamentali sono riscontrabili nella

retrocompatibilità con applicazioni vecchi (ora non più possibile) e la responsività (visione ottimale su mobile),

mentre non è più necessario un plug-in per audio e video.

REGOLE HTML

→ RISPETTARE LA STRUTTURA GERARCHICA

<html>

<title>Esempio titolo</title>

<h1>Esempio sottotitolo</h1>

<p>Esempio paragrafo</p>

</html>

→ OGNI MARCATORE DI APERTURA DEVE AVERE IL CORRISPONDENTE MARCATORE DI CHIUSURA

Ogni elemento consiste necessariamente di un tag iniziale <taginiziale> e un tag finale </tagfinale> che

racchiudano la porzione di testo da codificare con quel tag

→

(esempio: <b>Ciao!</b> Ciao!)

→ NON È CONSENTITO INCROCIARE I MARCATORI

Non è possibile “incrociare” i marcatori e bisogna tener presente che l’elemento contenuto in un tag, aperto

e opportunamente chiuso, codifica solo ed esclusivamente l’elemento compreso nel tag

→

(esempio: <i>Il linguaggio<b>HTML</b>è preciso</i> Il linguaggio HTML è preciso)

→ PREVISTO L’USO DI ELEMENTI VUOTI

Gli elementi vuoti non racchiudono contenuti e quindi non necessitano dei rispettivi tag di chiusura

(esempio: <br/> come marcatore per andare a capo)

→ MARCATORI DEVONO ESSERE SCRITTI TUTTI IN MINUSCOLO

>> Strumenti utile per la codifica dei caratteri: editor w3schools.com <<

FONDAMENTI DI HTML

→ BASICS → TITOLI (sei tipologie per sei livelli e sei visualizzazioni)

<h1>La mia prima pagina web</h1>

<h2>La mia prima pagina web</h2>

<h3>La mia prima pagina web</h3>

<h4>La mia prima pagina web</h4>

<h5>La mia prima pagina web</h5>

<h6>La mia prima pagina web</h6>

→ ELEMENTO HEAD <head>

<!DOCTYPE html>

<html>

<head>

<title>Titolo</title>

<meta charset="UTF-8"/>

</head>

→ PARAGRAFO

<p>Contiene un paragrafo di testo </p>

→ LINK

Utilizzando i collegamenti, tecnicamente detti “ancore”, è possibile navigare all’interno dei

documenti ipertestuali. Il tag che identifica la presenza di un collegamento è <a> e richiede

come parametro l’indirizzo della destinazione URL

<a href="http://www.sito.it">Sito Internet</a>

(Gli URL rappresentano i riferimenti ipertestuali e sono composti di tre parti: il metodo di

accesso http://, l’indirizzo web del sito e l’indirizzo dell’oggetto all’interno dello spazio dei fai

di quel sito. I riferimenti possono essere assoluti o relativi – rispetto al documento corrente)

→ IMMAGINI

Possono essere inserite immagini in formato GIF (.gif) o JPEG (.jpg)

Se l’immagine è presente sul PC in una cartella collegata:

→

<img src="fiore.gif"> inserisce l’immagine fiore.gif

Se l’immagine è un collegamento ad una immagine sul web:

<p>An image from Sito.it:</p>

<img src="http://www.sito.it/images/fiore.jpg" alt="Sito.it" width="104"

height="142" />

→ FORMATTAZIONE DEL TESTO SEMPLICE E AVANZATA

• Stili logici e stili fisici

• Marcatura presentazionale:

<b> Bold - Grassetto </b>

<i> Italic - Corsivo </i>

<tt> TType - Font a spaziatura fissa </tt>

• Marcatura semantica

<strong> concetto rafforzato </strong>

<em> concetto evidenziato </em>

• Small text: <small>

• Deleted text: <del>

• Inserted text: <ins>

• Subscripts: <sub>

• Superscripts: <sup>

• Abbreviazioni: <abbr>

→ ELENCHI E LISTE

• Lista puntata (<ul>)

<ul>

<li>Luca</li>

<li>Elena</li>

</ul>

• Lista numerata (<ol>)

<ol>

<li> Luca</li>

<li>Elena</li>

</ol>

→ TABELLE

Le tabelle dovrebbero servire a mettere in relazione dei dati e ad estrarre le informazioni. In informatica, un

insieme di tabelle correlate fra loro genera un database, mentre in HTML le tabelle sono state utilizzate allo

scopo di creare il layout del sito, le cornici entro cui inserire contenuti.

<table>

<tbody>

<tr> <td>Nome</td>

<td >Cognome</td>

<td >Matricola</td>

</tr>

</tbody>

</table>

→ FORM

I form servono a creare delle tabelle in cui immettere i dati

<form>

Nome: <input type="text" name="nome" /><br />

Cognome: <input type="text" name=“cognome" />

</form>

→ CARATTERI SPECIALI

Le entità generali si aprono con & e si chiudono con il ; e si usano per i caratteri riservati ai marcatori che

costituiscono caratteri speciali

→

&lt; <

→

&gt; >

→

&amp; &

→

&quot; “

→

&eacute; è

>> Gli strumenti utili per apprendere HTML5: il libro “HTML 5 e CSS3 for dummies”, i siti “Code Academy” e

“W3School”, l’editor “Sublime Text 3” <<

CSS – Cascading Style Sheets

= serie di codici letti a cascata, fra codifica e programmazione

FOGLIO DI STILE

= file di blocco note che associa a HTML una serie di istruzioni che ne determinano la visualizzazione inserita in

parentesi graffe { x }

Nel 1997 nasce HTML 3.2 che voleva porre fine alla guerra dei browser introducendo i tag <font> e <color> che

specificavano il tipo del font e colore nelle pagine nel quale erano inserite. Lo sviluppo di siti di grandi dimensioni

necessitava l’investimento di moltissimo tempo poiché un cambiamento stilistico anche minimo doveva essere

→

manuale si sviluppano quindi i fogli di stile che permettono la modifica grafica di un documento HTML in modo

efficiente e veloce perché applicato a tutte le pagine di uno stesso documento o documenti diversi

+ il codice HTML è più pulito perché non ha più nello stesso file i CSS = la pagina può avere diversi fogli di stile a seconda

del browser e del dispositivo

SELETTORE + DICHIARAZIONE (PROPRIETÀ + VALORE) possono essere scritti in diversi modi

CREARE UN LAYOUT

PAGINA CON <div> = blocco generico che agisce su tutto il documento e serve per strutturarlo in parti definite,

riconoscibili anche dai motori di ricerca. Determina il sito e la struttura