COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI.

Presentazione sul tema: "COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI."— Transcript della presentazione:

1 COMUNICAZIONE ONLINE, RETI E VIRTUALITA MATTEO CRISTANI

2 AGENDA IL W3C CONSORTIUM CHE COSE XML BASI DEL LINGUAGGIO HTML INTRODUZIONE AD HTML5

3 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).

4 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)

5 STANDARD XML Processing Model XML Schema XML Signature XHTML (eXtensible HyperText Markup Language) MathML (Mathematics Markup Language) SVG (Scalable Vector Graphics) XForms XPath XQuery

6 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)

7 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)

8 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.

9 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

10 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.htm E preferibile.html

11 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 doppie E preferibile usare le doppie apici

12 TAG I comandi (marcatori, tag) hanno una forma sintattica particolare informazioni Le informazioni tra e 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 informazioni 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 I valori degli attributi vanno scritti sempre fra doppie apici

13 INTESTAZIONE Un documento HTML è costituito da due parti descrizione delle caratteristiche del documento documento vero e proprio 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 Corso di laurea in Lingue per la comunicazione commerciale

14 CORPO DI HTML Corpo: contiene il documento (pagina) vero e proprio documento di testo Il 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 titolo1... titolo6 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 a capo … paragrafo

15 ESEMPIO Esempio01: Hello world! Questa è la mia prima pagina web Giuro solennemente di non dire mai nella mia vita che HTML è un linguaggio di programmazione.

16 INTRODUZIONE AD HTML5 Gli elementi di HTML5 si dividono in tre categorie Normali Vuoti Provenienti da altri namespaces

17 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 secondo le regole XHTML: OPPURE

18 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.

19 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 ( ), le liste ( ), i titoli ( ), etc. Salvo specifici casi, cui accenneremo nel seguito della lezione, gli elementi normali vengono definiti attraverso un tag di apertura ( ) e un tag di chiusura ( ).

20 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

21 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.

22 SPECIFICHE CORRENTI La maggior parte delle pagine web, attualmente, utilizza questo DocType: 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.

23 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.

24 ESEMPI DI SPECIFICHE Esempio di DocType per un sito con i frames: Esempio di DocType per un sito che applica rigidamente le ultime direttive del W3C:

25 INTESTAZIONE Allinterno del tag possono essere inseriti, oltre al titolo, altri tag: I meta tag generici I meta tag http-equiv

26 META TAG GENERICI NomeValoreFunzione DC.TitleTitolo del documentoServe a definire il titolo del documento descriptionDescrizione del sito Serve per descrivere il contenuto del sito o della pagina creation_dateData Indica la data di creazione della pagina o quando essa verrà aggiornata keywordsOgni parola chiave separata da Serve a dichiarare le parole chiave del sito o della pagina robotsPROSSIMO LUCIDO Serve a dare indicazione ai motori di ricerca per l'indicizzazione revisit-aftern° di giorni seguito da days Serve a dire al motore di ricerca dopo quanti giorni dovrà rivisitare la pagina generatorL'editor usato per scrivere il codice Indica il nome dell'editor che si è usato per scrivere il codice della pagina copyrightIl proprietario del contenuto del sito Indica a chi spetta il copyright del contenuto del sito authorL'autore della pagina Indica l'autore della pagina ed eventualmente il suo indirizzo e-mail ownerProprietario del sitoIndica il proprietario del sito languageUna o più lingueIndica la lingua o le lingue del sito DC.LanguageUna o più lingue Indica al motore di ricerca di indicizzare le pagine in base alla lingua

27 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.

28 HTTP-EQUIV La loro sintassi, in linea generale, è la seguente:. Nome TagValoreFunzione expiresOra nel formato GMT Indica la data di scadenza della validità della pagina. reply-toIndirizzo mail Definisce un indirizzo e-mail a cui gli utenti possono fare riferimento Set-CookiePROSSIMO LUCIDO Salva un cookie sul computer del visitatore refreshPROSSIMO LUCIDO Serve per ricaricare la pagina dopo un determinato tempo content-TypePROSSIMO 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

29 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: 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

30 ESEMPIO DI SETTAGGIO DI UN COOKIE Esempio di settaggio di un cookie: <meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Tuesday, 13-Jul-06 23:00:00 GMT; path=/">

31 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 è:

32 ESEMPIO Esempio di reindirizzamento: <meta http-equiv="refresh" content="4; url=http://it.wikibooks.org">

33 CONTENT-TYPE Il meta tag content-Type serve per dichiarare il set di caratteri usati all'interno della pagina. La sua sintassi è la seguente:. Il tipo di documento nel nostro caso è text/html con l'avvento dell'xml potrebbe esserci qualche nuovo valore.

34 ESEMPIO Esempio di come utilizzare il meta tag content-Type: <meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">

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