COMUNICAZIONE ONLINE, RETI E VIRTUALITA’

MATTEO CRISTANI

AGENDA IL W3C CONSORTIUM CHE COS’E’ XML BASI DEL LINGUAGGIO HTML INTRODUZIONE AD HTML5

IL W3C CONSORTIUM Nell'ottobre del 1994 Tim Berners Lee, padre del Web, fondò

al MIT (Massachusetts Institute of Technology), in collaborazione con il CERN (il laboratorio dal quale proveniva), un'associazione di nome World Wide Web Consortium (abbreviato W3C), con lo scopo di migliorare gli esistenti protocolli e linguaggi per il World Wide Web e di aiutare il web a sviluppare tutte le sue potenzialità.

Nell'aprile del 1995 l'INRIA (Istituto Nazionale di Ricerca Informatica ed Automatica francese) divenne il primo membro europeo dell'organizzazione.

Nel 2003 l'ERCIM (Il Consorzio Europeo di Ricerca in Informatica e Matematica) prese il ruolo di host europeo del W3C dall'INRIA (che è l'istituzione francese dell'ERCIM).

GLI STANDARD Gli standard definiti dal W3C HTTP (HyperText Transfer Protocol) URI URL (in collaborazione con IETF) HTML (HyperText Markup Language) XML e i linguaggi da questo derivati: EXI (Efficient XML Interchange) XProc (XML Pipeline Language) XPointer (XML Pointer)

STANDARD XML Processing Model XML Schema XML Signature XHTML (eXtensible HyperText Markup

Language) MathML (Mathematics Markup Language) SVG (Scalable Vector Graphics) XForms XPath XQuery

STANDARD CSS (Fogli di stile a cascata) XSLT (Extensible Stylesheet Language

Transformations) CGI (Common Gateway Interface) DOM (Document Object Model) GRDDL (Gleaning Resource Descriptions

from Dialects of Languages)

OWL (Controllo dei contenuti) RDF (Controllo dei contenuti) SMIL (Synchronized Multimedia Integration

Language) SML (Service Modeling Language)

STANDARD SOAP(Simple Object Access Protocol) PICS (Platform for Internet Content

Selection) WAI (Linee guida per l'accessibilità) DOM (Linee guida per l'interfaccia) PICS (Linee guida per le piattaforme) POWDER (Protocol for Web Description

Resources) PNG (formato grafico) InkML (formato per inchiostro digitale)

XML XML (sigla di eXtensible Markup Language) è

un metalinguaggio di markup, ovvero un linguaggio marcatore che definisce un meccanismo sintattico che consente di estendere o controllare il significato di altri linguaggi marcatori.

Costituisce il tentativo di produrre una versione semplificata di SGML che consenta di definire in modo semplice nuovi linguaggi di markup da usare in ambito web. Il nome indica quindi che si tratta di un linguaggio marcatore (markup language) estensibile (eXtensible) in quanto permette di creare tag personalizzati.

SPECIFICHE IN XML La specifica di un linguaggio in XML avviene

attraverso due approcci Il DTD (Document Type Definition) dove si

definiscono i tag in termini di riscrittura ed indicazioni operative ai browser compatibili, in genere identificando le funzioni mediante i fogli di stile

Mediante un XML schema, che integra le operazioni di estensione dei tag con funzioni proprie del server, quindi facendo seguire al tagging azioni “libere” dal contesto della navigazione

BASI DEL LINGUAGGIO HTML5 HTML è un linguaggio di descrizione di pagine Un documento HTML è un file di testo (file

ASCII) contenente dei comandi per Formattazione Inserimento parti multimediali Link ipertestuali

I file di testo hanno estensione .html o .htmE’ preferibile .html

BASI DEL LINGUAGGIO HTML5 HTML è case insensitive: i tag possono essere

scritti in maiuscolo e/o minuscolo E’ preferibile minuscolo

HTML è non posizionale: è possibile, ma sconsigliato,scrivere tutto il codice

di una pagina su di una sola linea; andare a capo nel file html non significa andare a

capo nella pagina; non è possibile utilizzare il carattere spazio per

allineare parti di testo Come qualificatori di testo è indifferente

utilizzare le apici singole o doppieE’ preferibile usare le doppie apici

TAG I comandi (marcatori, tag) hanno una forma sintattica

particolare<tag>informazioni</tag>

Le informazioni tra <tag> e </tag> devono essere trattate secondo quanto stabilito dal comando stesso I tag hanno nomi mnemonici Esistono degli editor che assistono nella creazione delle pagine

I tag possono avere degli attributi<tag attr1=“valore1” attr2=“valore2” … >informazioni</tag>

XHTML: tutti i tag hanno sempre una forma di apertura ed una di

chiusura qualora un tag non ha forma di chiusura esso va scritto nella

forma<tag attr1=“valore” … />

I valori degli attributi vanno scritti sempre fra doppie apici

INTESTAZIONE Un documento HTML è costituito da due parti

<html><head>

descrizione delle caratteristiche del documento</head><body>

documento vero e proprio</body>

</html>

head:la parte fondamentale è il titolo del documento che verrà visualizzato come titolo nella finestra del browser poiché il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca è importante che esso sia significativo.

Esempio <head> <title>Corso di laurea in Lingue per la comunicazione commerciale</title> </head>

CORPO DI HTML Corpo:

contiene il documento (pagina) vero e proprio documento di testoIl testo può essere inserito liberamente nella parte body e verrà visualizzato secondo le direttive di formattazione.

Intestazioni: permettono di indicare quali parti di testo vengono usate come titoli

Esempio <h1> titolo1 </h1>...<h6> titolo6 </h6>

Nota: H1, ..., H6 sono usati anche per controllare le dimensioni dei caratteri:

H1 corrisponde a caratteri grandi, ..., H6 a caratteri piccoli I tag h* hanno anche valore semantico per i motori di ricerca

Andare a capo <br/> a capo <p>…</p> paragrafo

ESEMPIO<html> <head> <title>Esempio01: Hello world!</title> </head> <body> Questa è la mia prima pagina web<br/> <p> Giuro solennemente di <b>non dire mai</b>

nella mia vita che HTML &egrave; un linguaggio di programmazione.<br/> </p>

</body></html>

INTRODUZIONE AD HTML5 Gli elementi di HTML5 si dividono in tre

categorie Normali Vuoti Provenienti da altri namespaces

ELEMENTI VUOTI 2. Elementi vuoti: gli elementi vuoti sono

quelli che non possono avere alcun contenuto. Per questi elementi si utilizza un tag ‘vuoto’. Essi sono: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr. Per gli elementi vuoti, la chiusura del tag,

obbligatoria in XHTML, è invece opzionale. Possiamo dunque definire un tag <img> secondo le regole XHTML:

<img src="immagine.png" alt="testo" /> OPPURE <img src="immagine.png" alt="testo">

PROVENIENTI DA ALTRI NAMESPACES 3. Elementi provenienti da altri

namespace: per questi elementi sono richiesti i tag ‘autochiudenti’. Si tratta degli elementi adottati da specifiche esterne, come SVG e MathML.

ELEMENTI NORMALI 1. Elementi normali: sono quelli che

possono racchiudere dei contenuti sotto forma di testo, commenti HTML, altri elementi HTML, etc. Sono elementi normali, dunque, i paragrafi (<p>), le liste (<ul>), i titoli (<h1>), etc. Salvo specifici casi, cui accenneremo nel seguito della lezione, gli elementi normali vengono definiti attraverso un tag di apertura (<p>) e un tag di chiusura (</p>).

DOCTYPE Poiché, come visto, le attuali specifiche di

HTML lo definiscono come estensione specifica di XML, occorre definire il tipo del documento

Questa operazione si fa specificando un riferimento ad un DTD, ovvero un Document Type Definition

Si tratta di un file che descrive la sintassi del linguaggio impiegato, ovvero di HTML

DOCTYPE Non è di fatto sempre obbligatorio specificare

il DocType di una pagina; la maggior parte dei browser la visualizzeranno correttamente anche senza specifica.

Il DocType, nella sua forma più estesa, ha bisogno di diverse informazioni: una dichiarazione in cui si determina se il

documento è di dominio pubblico o meno; una nota che veicoli a quali specifiche del W3C si

sta facendo riferimento; la lingua del documento.

SPECIFICHE CORRENTI La maggior parte delle pagine web,

attualmente, utilizza questo DocType: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//IT" http://www.w3.org/TR/html4/loose.dtd> Il linguaggio usato all'interno della pagina è l'html, il documento è di dominio pubblico e rispetta le specifiche del W3C del tipo HTML Transitional definiti nel DTD (Document Type Definition) loose.dtd, la lingua impostata è l'italiano.

SPECIFICHE TIPICHE Frameset: questa DTD è utilizzata dai siti che

al loro interno contengono i frames. Strict: è una DTD che applica rigide regole ed

applica quindi i nuovissimi standard del web. Ad esempio i tag deprecati non sono ammessi e gli elementi grafici di una pagina web devono essere definiti tramite i fogli di stile.

Transitional: come è facilmente intuibile dal nome questo è documento che contiene delle specifiche di transizione da uno standard all'altro, è il tipo maggiormente utilizzato ora sul web. Il documento non applica rigide regole ed è quindi possibile utilizzare tag deprecati.

ESEMPI DI SPECIFICHE Esempio di DocType per un sito con i frames:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

http://www.w3.org/TR/html4/frameset.dtd>

Esempio di DocType per un sito che applica rigidamente le ultime direttive del W3C:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" http://www.w3.org/TR/html4/strict.dtd>

INTESTAZIONE All’interno del tag <head> possono essere

inseriti, oltre al titolo, altri tag: I meta tag generici I meta tag http-equiv

META TAG GENERICINome Valore FunzioneDC.Title Titolo del documento Serve a definire il titolo del

documentodescription Descrizione del sito Serve per descrivere il contenuto

del sito o della pagina

creation_date Data Indica la data di creazione della pagina o quando essa verrà aggiornata

keywords Ogni parola chiave separata da Serve a dichiarare le parole chiave del sito o della pagina

robots PROSSIMO LUCIDO Serve a dare indicazione ai motori di ricerca per l'indicizzazione

revisit-after n° di giorni seguito da days Serve a dire al motore di ricerca dopo quanti giorni dovrà rivisitare la pagina

generator L'editor usato per scrivere il codice

Indica il nome dell'editor che si è usato per scrivere il codice della pagina

copyright Il proprietario del contenuto del sito

Indica a chi spetta il copyright del contenuto del sito

author L'autore della pagina Indica l'autore della pagina ed eventualmente il suo indirizzo e-mail

owner Proprietario del sito Indica il proprietario del sitolanguage Una o più lingue Indica la lingua o le lingue del sito

DC.Language Una o più lingue Indica al motore di ricerca di indicizzare le pagine in base alla lingua

IL META TAG ROBOTS Il meta tag robots serve a dare alcune indicazioni

ai programmi dei motori di ricerca (i cosidetti spider); più nello specifico, serve a comunicare allo spider del motore di ricerca come si deve comportare

I suoi possibili valori sono: none: non viene indicizzata la pagina e tutto ciò che è al

suo interno index: indicizza solo la pagina che il motore di ricerca sta

visitando noindex: non indicizza la pagina che il motore di ricerca

sta visitando follow: non indicizza la pagina che sta visitando prosegue

attraverso i link della pagina nofollow: indicizza la pagina che sta visitando ma salta i

link della pagina all: è l'insieme tra follow e index, indicizza la pagina che

sta visitando e prosegue attraverso i links.

HTTP-EQUIV La loro sintassi, in linea generale, è la

seguente: <meta http-equiv="nome_meta_tag" content="valore_del_meta_tag">.Nome Tag Valore Funzione

expires Ora nel formato GMT Indica la data di scadenza della validità della pagina.

reply-to Indirizzo mailDefinisce un indirizzo e-mail a cui gli utenti possono fare riferimento

Set-Cookie PROSSIMO LUCIDO Salva un cookie sul computer del visitatore

refresh PROSSIMO LUCIDO Serve per ricaricare la pagina dopo un determinato tempo

content-Type PROSSIMO LUCIDO Indica il set di caratteri in uso nella pagina

Pragma no-cache, costringe il browser a svuotare la cache e ricaricarla

Solo per NetScape. Forza il browser a non leggere il sito della cache

imagetoolbar yes abilita la visualizzazione della toolbar, no la disabilita

Da IE 6.0 in su, abilita/disabilita la toolbar che appare sulle immagini.

distribution global se è un contenuto di interesse generale, in caso contrario, usare local

Indica se il contenuto della pagina è di interesse generale o specifico

I COOKIE Il meta tag Set-Cookie serve, come suggerisce

il suo nome, a salvare un cookie sul computer di chi sta visitando la pagina. La sua sintassi è la seguente: <meta http-equiv="Set-Cookie" content="cookievalue=nome cookie; expires=data di scadenza; path=percorso nella cache"> cookievalue: attraverso questo parametro

impostiamo il nome che prenderà il cookie sul computer dell'utente.

expires: impostando una data in formato GMT si può determinare la data dopo la quale il cookie non avrà più effetto.

path: dove verrà salvato all'interno della cache

ESEMPIO DI SETTAGGIO DI UN COOKIE Esempio di settaggio di un cookie:

<head> <meta http-equiv="Set-Cookie"

content="cookievalue=xxx; expires=Tuesday, 13-Jul-06

23:00:00 GMT; path=/">

</head>

REFRESH Il meta tag refresh ricarica il contenuto della

pagina dopo un determinato intervallo di tempo, si può aggiungere anche un parametro mediante il quale il ricaricamento porterà ad un'altra pagina (reindirizzamento). La sua sintassi è: <meta http-equiv="REFRESH" content="intervallo di tempo per ricaricare; url=pagina a cui porterà il ricaricamente, opzionale">

ESEMPIO Esempio di reindirizzamento:

<meta http-equiv="refresh" content="4; url=http://it.wikibooks.org">

CONTENT-TYPE Il meta tag content-Type serve per dichiarare

il set di caratteri usati all'interno della pagina. La sua sintassi è la seguente: <meta http-equiv="content-Type" content="tipo di documento; charset=set di caratteri">.Il tipo di documento nel nostro caso è text/html con l'avvento dell'xml potrebbe esserci qualche nuovo valore.

ESEMPIO Esempio di come utilizzare il meta tag

content-Type:

<meta http-equiv="content-Type" content="text/html;

charset=iso-8859-1">

RIFERIMENTI http://it.wikibooks.org/wiki/HTML