COMUNICAZIONE ONLINE, RETI E VIRTUALITA’

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 InstituteofTechnology), 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 (eXtensibleHyperText Markup Language) • MathML (Mathematics Markup Language) • SVG (ScalableVectorGraphics) • XForms • XPath • XQuery

STANDARD • CSS (Fogli di stile a cascata) • XSLT (ExtensibleStylesheetLanguageTransformations) • CGI (Common Gateway Interface) • DOM (DocumentObjectModel) • GRDDL (GleaningResourceDescriptionsfromDialectsofLanguages) • OWL (Controllo dei contenuti) • RDF (Controllo dei contenuti) • SMIL (Synchronized Multimedia IntegrationLanguage) • SML (Service ModelingLanguage)

STANDARD • SOAP(SimpleObject Access Protocol) • PICS (Platformfor Internet ContentSelection) • WAI (Linee guida per l'accessibilità) • DOM (Linee guida per l'interfaccia) • PICS (Linee guida per le piattaforme) • POWDER (Protocolfor Web DescriptionResources) • 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 (DocumentTypeDefinition) 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 tagh* 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 è 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: • <imgsrc="immagine.png" alt="testo" /> • OPPURE • <imgsrc="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 DocumentTypeDefinition • 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 (DocumentTypeDefinition) 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 taghttp-equiv

META TAG GENERICI

IL META TAG ROBOTS • Il meta tagrobots serve a dare alcune indicazioni ai programmi dei motori di ricerca (i cosidettispider); 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">.

I COOKIE • Il meta tagSet-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 tagrefresh 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 tagcontent-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 tagcontent-Type: <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">

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

COMUNICAZIONE ONLINE, RETI E VIRTUALITA’