Main /InformaticaUmanistica07

Esercitazioni Informatica Umanistica mod. c

Esercitatore: Maurizio Napolitano


Orario delle lezioni

Le lezioni si terranno sempre nel Laboratorio Multimediale della facoltà di lettere e filosofia di Trento.


Siti utili


Lezione 1

Programma delle lezioni

World Wide Web
Il World Wide Web (Web) è una rete di risorse di informazioni, basata sull'infrastruttura di Internet. Il Web si basa su tre meccanismi:

  1. Uno schema di denominazione uniforme per localizzare le risorse sul Web.
  2. Protocolli, per accedere alle risorse denominate sul Web (ad es., HTTP).
  3. Ipertesto, per una facile navigazione tra le risorse (ad es., HTML)

WWW e Internet sono due cose distinte
WWW è un sottoinsieme di internet

Breve storia del WWW
Il World Wide Web nasce nel 1989 presso il CERN di Ginevra (Centro Europeo di Ricerche Nucleari, il più importante laboratorio di Fisica in Europa), su idea di Tim Berners-Lee e di Robert Cailliau L’idea era quella di permettere ai ricercatori di condividere la documentazione scientifica in formato elettronico ed indipendentemente dalla piattaforma migliorare la comunicazione e la cooperarazione, definendo standard e protocolli per scambiare documenti su reti dati, quali:

L’HTML è un linguaggio che viene interpretato dal browser.
Nasce il Consorzio w3c (w3.org) (1994) allo scopo di creare standard che tutti i browser devono (o dovrebbero) rispettare.
Quindi la sintassi dell’HTML è stabilita dal World Wide Web Consortium (W3C).

HTML - Hyper Text Markup Language
Un markup language combina testo con informazioni riguardanti il testo stesso.
Le informazioni riguardano la struttura nel quale il testo va inserito. Queste informazioni aggiuntive vengono inserite usando i markup.
Il più noto tra i markup languages è sicuramente l'HTML
Quello che si produce con un markup language non è il documento stesso, ma un file di codice e testo che deve essere poi interpretato da una applicazione (nel caso dell'HTML il browser) <nome> è un tag (etichetta)
Es:<markuptag>testo</markuptag>
testo è l'argomento del tag
ulteriori modifiche possono essere fatte attraverso gli attributi
Es:<markuptag attributo="valore">testo</markuptag>

Struttura documento HTML
Un documento HTML è costituito da tre parti:

  1. Una linea che contiene la versione di HTML.
  2. Una sezione contenente l'intestazione. (HEAD).
  3. Il corpo (BODY) che contiene il contenuto del documento.

Ogni documento scritto in HTML deve essere contenuto in un file, la cui estensione deve essere .htm o .html

Esempio pagina HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>

	<head>
		<title>Il mio primo HTML</title>
	</head>

	<body>
		<p> Hello, World! </p>
	</body>

</html>

Fornisce informazioni sulla versione di documento usata
tag di apertura e chiusura del documento
intestazione documento
corpo del documento

Note

Elenco lezioni


Lezione 2

I TAG HTML


Distinzione fra HEAD e BODY

Titolazioni H1 ... H6

Tavola dei colori

Elenco dei TAG

Elenco lezioni


Lezione 3

TABELLE

ELENCHI

<ol>

   <li>1. Oggetto uno</li>
   <li>2. Oggetto due</li>
   <li>3. ...</li>

</ol>

  1. Oggetto uno
  2. Oggetto due
  3. ...

<ul>

   <li>Oggetto uno</li>
   <li>Oggetto due</li>
   <li>...</li>

</ul>

  • Oggetto uno
  • Oggetto due
  • ...

File .zip con esempi HTML di quanto spiegato a lezione

Per maggiori informazioni contattare l'esercitatore

Elenco lezioni


Lezione 4

XML - eXtensible Markup Language (Linguaggio di marcatura estensibile)

Un XML segue una struttura ad albero

Grafo ad albero elementi documento XML

Documento XML

<addresses>

	<person>
		<lastName>

		</lastName>

		<firstName>

		</firstName>

		<phone>

		</phone>

		<email>

		</email>

		<address>
			<street>

			</street>
			<city>

			</city>
			<state>

			</state>
			<zip>

			</zip>
		</address>
	</person>

</addresses>

Regole scrittura documento XML (Well Formed Text)

    * un documento XML comincia sempre con l'istruzione 
      <?xml  version="1.0" ?>
    * i documenti XML sono "case sensitive" (viene fatta differenza fra maiuscolo e minuscolo)
      esempio
      <contatto/> e <CONTATTO/> hanno due significati diversi
    * ogni tag deve essere bilanciato (deve esserci un tag di apertura ed uno di chiusura e scritti nel corretto ordine)
      CORRETTO!
      <contatto>
         <nome>Verdi</nome>
      </contatto>
      ERRATO!
      <contatto>
         <nome>Verdi</contatto>
      </nome>
    * i tag che non contengono valori devono essere chiusi (tag di apertura e tag di chiusura) oppure scritti nella forma </elemento>

Esempi XML:

Elenco lezioni


Lezione 5

DTD - Document Type Definition

Sintassi
<!DOCTYPE root-element [dichiarazione-elementi]>
root-element = elemento radice

Esempio dichiarazione interna
<?xml version="1.0" ?>
<!DOCTYPE nota [

  <!ELEMENT nota (per,da,titolo,testo)>
  <!ELEMENT per (#PCDATA)>
  <!ELEMENT da (#PCDATA)>
  <!ELEMENT titolo (#PCDATA)>
  <!ELEMENT testo (#PCDATA)>

]>
<nota>

  <per>Carlo</per>
  <da>Paola</da>
  <titolo>Compleanno Maurizio</titolo>
  <testo>Alle 18 grande festa!</testo>

</nota>

Esempio dichiarazione esterna (la dichiarazione della DTD è salvata nel file nota.dtd)
<?xml version="1.0" ?>
<!DOCTYPE nota SYSTEM "nota.dtd">
<nota>

  <per>Carlo</per>
  <da>Paola</da>
  <titolo>Compleanno Maurizio</titolo>
  <testo>Alle 18 grande festa!</testo>

</nota>

Validatori XML:

Il validatore controlla se l'istanza XML segue le regole definite nella DTD. NB: la DTD deve essere inclusa nel file .xml

Grammatica di <!ELEMENT nometag (...)>

SINTASSI

SPIEGAZIONE

ESEMPIO

primo,secondo

L'elemento deve contenere l'elemento "primo" e l'elemento "secondo" nell'ordine definito

<!ELEMENT elemento (primo,secondo)>

questo|quello

L'elemento deve contenere l'elemento "questo" o l'elemento "quello"

<!ELEMENT elemento (primo|secondo)>

sottoelemento?

L'elemento è formato dall'elemento "sottoelemento" la cui presenza è facoltativa

<!ELEMENT elemento (sottoelemento?)>

sottoelemento*

L'elemento è formato dall'elemento "sottoelemento" che può essere ripetuto 0 o infinite volte

<!ELEMENT elemento (sottoelemento*)>

sottoelemento+

L'elemento è formato dall'elemento "sottoelemento" la cui presenza è obbligatoria da 1 a infinite volte

<!ELEMENT elemento (sottoelemento+)>

sottoelemento

L'elemento è formato dall'elemento "sottoelemento" la cui presenza è obbligatoria e non può essere ripetuto

<!ELEMENT elemento (sottoelemento)>

#PCDATA

L'elemento è non contiene sottoelementi ed è formato da una sequenza di caratteri

<!ELEMENT elemento (#PCDATA)>

NB:esistono molti altri parametri

Elenco lezioni


Lezione 6 Esempio XML con attributi

<?xml version="1.0" ?>

      <raccoltacd>
            <cd>
                  <titolo anno="1973">Dark Side of the Moon</titolo>
                  
<genere>rock</genere>
                  <autori>
                        <autore>Pink Floyd</autore>
                  
</autori>
            </cd>
            <cd>
                  <titolo anno="1990">The Razors Edge</titolo>
                  
<genere>rock</genere>
                  <autori>
                        <autore>AC/DC</autore>
                  
</autori>
            </cd>
      </raccoltacd>

<!-- DTD associata -->

<!DOCTYPE raccoltacd [
      
<!ELEMENT raccoltacd (cd*)>
            
<!ELEMENT cd (titolo, genere, autori)>
                  
<!ATTLIST titolo anno CDATA #REQUIRED>
            
<!ELEMENT titolo (#PCDATA)>
            
<!ELEMENT genere (#PCDATA)>
            
<!ELEMENT autori (autore+)>
            
<!ELEMENT autore (#PCDATA)>
]>

Grammatica di <!ATTLIST tagdiriferimento nome_attributo TIPO_ATTRIBUTO valore_predefinito>

SINTASSI

SPIEGAZIONE

tagdiriferimento

nome dell'elemento a cui si rifà l'attributo

nome_attributo

nome dell'attributo

TIPO_ATTRIBUTO

Indica quali sono i valori ammessi

  • CDATA
    • insieme di caratteri
  • (valore1|valore2|...|valoreN)
    • può assumere solo uno dei valori in lista

nota: esistono altri casi

valore_predefinito

assume uno dei seguenti valori

  • valore
    • un valore predefinito che viene dato qualora l'attributo non sia dichiarato
  • #REQUIRED
    • l'attributo deve essere sempre dichiarato
  • #IMPLIED
    • la dichiarazione dell'attributo non è necessaria
  • #FIXED valore
    • l'attributo ha un valore fisso corrispondente a valore

Elenco lezioni


Lezione 7

XSL = eXtensible Stylesheet Language.

XSLT = XSL Transformation

Dichiarazione XSLT
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   [... serie di istruzioni ...]

</xsl:stylesheet>

Un documento XML può richiamare il suo XSL attraverso questa dichiarazione

<?xml-stylesheet type="text/xsl" href="nomefile.xsl"?>

Uso di <xsl:template>

GRAMMATICA del xsl Note generiche: I comandi xsl cominciano con la sintassi
</xsl:nome_comando attributo=".." >

La chiusura del comando avviene con la sintassi:
</xsl:nome_comando>
fare attenzione al simbolo
/
Come in HTML un comando/tag che non ha argomenti può essere scritto nella forma di compatta di chiusura:
<xsl:nome_comando/>
fare attenzione al simbolo
/

SINTASSI

SPIEGAZIONE

<xsl:value-of select="/percorso/elemento"/>

Restituisce il valore contenuto nell'argomento dell'elemento xml di nome elemento

<xsl:for-each select=""percorso/elemento">

[.. istruzioni ...]

</xsl:for-each>

tutte le istruzioni contenute dalla sua apertura fino alla sua chiusura per ogni elemento dichiarato nel percorso dell'attributo select

<xsl:sort select=""percorso/elemento" select="ascending|descending" />

Ordina l'insieme dei dati dell'albero xml usando i valori dell'elemento definito select e con l'ordinamento definito da order I valori che può assumere order sono:

  • ascending: valore crescente
  • descending: valore decrescente

Se non dichiarato assume il vaore ascending

Esempio: <xsl:value-of select="..."/> In questo caso vine mostrato solo il primo valore dell'albero xml

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
   <head>
      <title>
I miei cd</title>
   </head>
   <body>
      <h2>
I miei cd</h2>
      <ul>
         <li><xsl:value-of
select="/raccoltacd/cd/titolo"/></li>
      </ul>
   </body>
</html>
</xsl:template>
</xsl:stylesheet>

Esempio: <xsl:for-each select="..."/> Attraverso l'uso di for-each vengono mostrati tutti i valori

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
   <head>
      <title>
I miei cd</title>
   </head>
   <body>
      <h2>
I miei cd</h2>
      <ul>
        <xsl:for-each
select="/raccoltacd/cd">
         <li><xsl:value-of
select="./titolo"/></li>
        </xsl:for-each>
      </ul>
   </body>
</html>
</xsl:template>
</xsl:stylesheet>

Esempio: <xsl:sort select="..."/> Attraverso l'uso di % l'insieme dei dati è visualizzato in ordine crescere in base all'elemento dichiarato in select%

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
   <head>
      <title>
I miei cd</title>
   </head>
   <body>
      <h2>
I miei cd</h2>
      <ul>
        <xsl:for-each
select="/raccoltacd/cd">
        <xsl:sort
select="genere"/>
         <li><xsl:value-of
select="./titolo"/></li>
        </xsl:for-each>
      </ul>
   </body>
</html>
</xsl:template>
</xsl:stylesheet>

Elenco lezioni


Lezione 8

XSLT - Uso dei condizionali

SINTASSI

SPIEGAZIONE

<xsl:if test="elemento = 'valore' ">

[.. istruzioni ...]

</xsl:if

Esegue una serie di operazioni solo se l'elemento dichiarato in test corrisponde alla stringa valore contenuta fra apici

<xsl:for-each select="elemento_padre/[./elemento_figlio = 'valore']">

[.. istruzioni ...]

</xsl:for-each>

esegue una istruzione for-each filtrando i dati dove elmento_figlio corrisponde a valore (sempre scritto fra apici)

<xsl:choose>
    <xsl:when
test="elemento='valore'">
       [... istruzioni ...]
    </xsl:when>
    <xsl:otherwise>

       [... istruzioni ....]
     </xsl:otherwise>
</xsl:choose>

All'interno di choose possono essere dichiarate diverse condizioni di test attraverso l'uso di when (possono esserci più condizioni when Se nessuna delle condizioni when è soddisfatta, allora si passa al blocco di istruzioni definito in otherwise

Note:

Elenco lezioni


Lezione 9

XSLT - attributi

Accedere agli attributi di un file XML via XSL

Esempio: la visualizzazione dei titoli dei cd e l'anno (fra parentesi)
<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
   <head>
      <title>
I miei cd</title>
   </head>
   <body>
      <h2>
I miei cd</h2>
      <ul>
        <xsl:for-each
select="/raccoltacd/cd">
        <xsl:sort
select="genere"/>
         <li>
         <xsl:value-of
select="./titolo"/>
         (<xsl:value-of
select="./titolo/@anno"/>)
         </li>
        </xsl:for-each>
      </ul>
   </body>
</html>
</xsl:template>
</xsl:stylesheet>

Riferimenti:

Scrivere in un attributo di un tag xhtml via xsl

Esempio: l'xml copertinecd.xml contiene un elemento con il nome del file della copertina del cd

<?xml version="1.0" ?>

<!DOCTYPE raccoltacd [
      
<!ELEMENT raccoltacd (cd*)>
            
<!ELEMENT cd (titolo, genere, copertina, autori)>
                  
<!ATTLIST titolo anno CDATA #REQUIRED>
            
<!ELEMENT titolo (#PCDATA)>
            
<!ELEMENT genere (#PCDATA)>
            
<!ELEMENT copertina (#PCDATA)>
            
<!ELEMENT autori (autore+)>
            
<!ELEMENT autore (#PCDATA)>
]>

      <raccoltacd>
            <cd>
                  <titolo anno="1973">Dark Side of the Moon</titolo>
                  
<genere>rock</genere>
                  <copertina>thedarksideofthemoon.jpg</copertina>
                  <autori>
                        <autore>Pink Floyd</autore>
                  
</autori>
            </cd>
            <cd>
                  <titolo anno="1990">The Razors Edge</titolo>
                  
<genere>rock</genere>
                  <copertina>therazorsedge.jpg</copertina>
                  <autori>
                        <autore>AC/DC</autore>
                  
</autori>
            </cd>
      </raccoltacd>

Aggiungendo alla seconda riga del file sopra l'istruzione
<?xml-stylesheet type="text/xsl" href="copertinecd.xsl"?>

che richiama queste istruzioni XSL

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
   <head>
      <title>
I miei cd</title>
   </head>
   <body>
      <h2>
I miei cd</h2>
      <xsl:for-each select="/raccoltacd/cd">
       <p>
       <img>
         <xsl:attribute
name="src">
         <xsl:value-of select="./copertina"/>
         </xsl:attribute>
       </img>
       <br/>
       <xsl:value-of select="./titolo"/>
       (<xsl:value-of
select="./titolo/@anno"/>)
       </p>
      </xsl:for-each>
   </body>
</html>
</xsl:template>
</xsl:stylesheet>

Il cui output è simile a questo

I miei cd


The Dark Side of the Moon (1973)

The Razor's Edge (1990)

Riferimenti:

Elenco lezioni


Lezione 10

Progetto per l'esame

Vedere anche vecchia pagina http://sra.itc.it/people/napolitano/info

Esempio "La musica che mi piace"
Pagina Principale - chiamare il file index.html
contiene una parte testuale del progetto arricchita (se possibile) da una immagine
ed i collegamenti alle pagine XML con le trasformazioni XSLT
Informazioni utili:
  • file html di base su cui lavorare
  • vedere documento pdf con i tag html (vd siti utili)
  • ridimensionare le immagini con un software dedicato (vd siti utili)
Individuare le caratteristiche dei dati da rappresentare
Stabilire cosa mettere come attributo e cosa come elemento
Capire come questi vengono utilizzati (= il numero di ripetizioni)
Creare la DTD e la sua istanza conteporaneamente
Informazioni utili:
  • Si consiglia di creare un file XML con la DTD scritta all'interno
  • Si consiglia di validare il file XML ogni volta che si aggiunge una istruzione nella DTD e nella sua relativa istanza
  • file XML di base su cui lavorare

                  <?xml-stylesheet type="text/xsl" href="nomefile.xsl"?>

  • NB: sostituire nomefile.xsl con il corretto nome del file xsl di riferimento
  • Inserire nel file xsl un link al file index.html
Informazioni utili:

Elenco lezioni