introduzione ai linguaggi formali: html e xml fondamenti di programmazione: cenni di javascript...

78
Introduzione ai Linguaggi Formali: Introduzione ai Linguaggi Formali: HTML e XML HTML e XML Fondamenti di Programmazione: Cenni di Fondamenti di Programmazione: Cenni di Javascript Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof. Gianluca Palermo Dipartimento di Elettronica e Informazione [email protected] http://home.dei.polimi/gpalermo

Upload: adolfo-cirillo

Post on 01-May-2015

223 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Introduzione ai Linguaggi Formali: HTML e Introduzione ai Linguaggi Formali: HTML e XML XML

Fondamenti di Programmazione: Cenni di Fondamenti di Programmazione: Cenni di JavascriptJavascript

Politecnico di MilanoFacoltà del Design – Bovisa

Prof. Gianluca PalermoDipartimento di Elettronica e Informazione

[email protected]://home.dei.polimi/gpalermo

Page 2: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 2

Politecnico di Milano

Indice Indice

Il World Wide Web– Sistemi informativi lineari e non lineari: gli ipertesti– Il Web: cenni storici– Cenni di HTML– HTML come linguaggio formale

Cenni di XML Fondamenti di programmazione

– Il linguaggio Javascript

Introduzione al modello open source

Page 3: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 3

Politecnico di Milano

Testi consigliatiTesti consigliati

Slide presentate a lezione http://www.w3schools.com/ http://www.opensource.org/ Rick Darnel “HTML 4 Tutto&Oltre” Apogeo

Page 4: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 4

Politecnico di Milano

Sistemi informativi lineari e non lineariSistemi informativi lineari e non lineari

Per pensare e comunicare gli uomini usano da sempre un sistema di informazione lineare ma l’esigenza di reperire più velocemente dati ed effettuare ricerche ha portato alla nascita dei sistemi non lineari– I sistemi non lineari non sono nati con il web, si pensi ad

esempio a libri e riviste i cui indici permettono di reperire direttamente le informazioni cercate senza dover leggere tutto ciò che viene prima

– Si parla anche di ipertesti

In un sistema non lineare non esiste un ordine predefinito di lettura.

Sistema lineare

Sistema non lineare

Page 5: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 5

Politecnico di Milano

Sistemi non lineari: WWWSistemi non lineari: WWW

Il World Wide Web (WWW) è un sistema informativo non lineare– Realizza un ipertesto distribuito e multimediale– È possibile consultare documenti seguendo un tracciato

preimpostato dagli autori o costruendo percorsi dettati da interessi personali

I motori di ricerca permettono, dopo l’inserimento di alcune parole chiave, di ottenere una lista di collegamenti a documenti che rispondono ad alcuni criteri. L’utente può proseguire la ricerca cliccando sui collegamenti e navigando di pagina in pagina verso dati sempre più specifici

I documenti per il WWW sono scritti adoperando il linguaggio formale: l’HyperText Markup Language

Page 6: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 6

Politecnico di Milano

Breve storia del webBreve storia del web

Anni ’80 - Nasce il concetto di ipertesto– I computer utilizzati non erano abilitati a visualizzare immagini

1991 - Un ricercatore del CERN di Ginevra (Tim Berners-Lee) definisce il protocollo http e il linguaggio html per la costruzione di ipertesti distribuiti

Anni ’90 - Il WWW si diffonde– L’arrivo dei browser grafici all’interno degli ambienti desktop permette di

inserire contenuti multimediali ai documenti HTML

Fine anni ’90 - Si diffondono le tecnologie per la creazione di pagine dinamiche– Gli sviluppatori web iniziano a sostituire le pagine statiche con documenti

creati dinamicamente tramite programmi lato server (script CGI,PHP,JSP,…)

– Le pagine diventano dinamiche anche lato client tramite software studiato ad hoc (activeX, applet Java, codice javascript…)

Page 7: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 7

Politecnico di Milano

Web: HTTP, Client (Browser) e Web: HTTP, Client (Browser) e ServerServer

HTTP è un protocollo di comunicazione che definisce le regole con le quali un programma client, chiamato Web Browser, e un programma server, chiamato Web Server, possono interagire per scambiarsi richieste e risposte

Il Web Server è un processo (applicazione) in esecuzione continua su un elaboratore:– Il server resta in continuo ascolto delle richieste in arrivo

tramite la rete Internet– Alla ricezione di una richiesta, il server individua la risorsa

richiesta (ad es. un file HTML) e invia una risposta al clientHTTP Request

HTTP Response

Resource

Web ServerClient

(browser)

(1)

(2)

Page 8: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 8

Politecnico di Milano

Pagina HTMLPagina HTML

La risorsa di base richiesta dal client è una pagina HTML, ovvero un testo che rappresenta un documento ipertestuale

WebML.orgHome Page

....

Content

<HTML> <HEAD> </HEAD> <BODY>

...

</BODY></HTML>

Markup+ = final renditionContenuto + Markup = risultato finale

Page 9: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 9

Politecnico di Milano

HHyper yper TText ext MMarkup arkup LLanguage anguage (HTML) (HTML) HTML è un linguaggio di “contrassegno” testuale

Un documento HTML è un file di testo che contiene due classi di informazioni– Contenuto: il testo vero e proprio del documento; da solo non

garantisce la leggibilità

– Sistema di contrassegno (mark-up): informazioni aggiuntive al contenuto, per determinarne le modalità di presentazione; a loro volta queste informazioni possono essere suddivise in due classi:

• Struttura: informazioni su come è diviso logicamente il documento (titolo, paragrafi, capitoli…)

• Formattazione: informazioni sulla presentazione del documento (font, colori, spaziature…)

Un editor di testo è sufficiente per creare documenti HTML

Page 10: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 10

Politecnico di Milano

Applicazione Web: pagine Applicazione Web: pagine dinamichedinamiche

Più in generale, una richiesta HTTP (proveniente da un browser Web) può puntare ad un file in qualunque formato archiviato nel Web Server. Se il file non è HTML, viene semplicemente scaricato dal Server al Client.

Una richiesta HTTP può anche puntare all’invocazione di un programma da eseguire sul server (server side)

Tipicamente l’esecuzione del programma comporta anche la generazione di una pagina HTML da inviare in risposta al browser

La pagina inviata in risposta non esiste come file fisico sul server, ma è generata “al volo” (=dinamicamente) a seguito della richiesta del browser (es. carrello della spesa, forum, etc.)

Client

Request resource Call program

Build responseDeliver response

? ?

WebServer

CGIScript

Page 11: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 11

Politecnico di Milano

Primo EsempioPrimo Esempio

Index.html

Un documento html può avere estensione .htm o .html

Contenuto

Tag iniziale

Il Browser è un applicazione software che consente di vedere e di interagire con un documento html

Tag finale

Page 12: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 12

Politecnico di Milano

ElementiElementi

Un documento HTML è composto da ELEMENTI– Un elemento può a sua volta contenerne altri in modo nidificato

Un ELEMENTO è composto da un testo solitamente racchiuso tra 2 tag che ne indicano l’inizio e la fine– Es.: <html> … </html>

Alcuni elementi hanno solo il tag di inizio – Es.: <br> usato come interruzione di riga

I tag hanno sempre la forma “< nome_tag >” Il contenuto di un ELEMENTO è la stringa testuale

racchiusa tra i due tag– Testo– Altri elementi nidificati

I tag non sono case sensitive– <HTML> <html>

Page 13: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 13

Politecnico di Milano

AttributiAttributi

I tag possono avere degli attributi Gli attributi consentono al designer di definire

caratteristiche e proprietà di un elemento adattandolo al contesto del documento

Sono sempre nel formato nome_attributo=“valore”– Es.: <IMG SRC=“sfondo1.gif” ALIGN=“center” > …

Sono sempre aggiunti nel tag iniziale dell’elemento

I browser commerciali permettono di usare attributi proprietari al di fuori degli standard. E’ una pratica sconsigliata poiché:– Su browser diversi si potrebbero ottenere risultati diversi– In alcuni casi attributi non aderenti allo standard vengono ignorati

Page 14: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 14

Politecnico di Milano

Elemento

ContenutoStart Tag End Tag

Attributo

Gli elementi br e img non hanno il tag finale

Page 15: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 15

Politecnico di Milano

Formattazione del testo: HeadingsFormattazione del testo: Headings

Sono definiti dai tag <H1> fino ad <H6> Vengono utilizzati per differenziare diverse parti di

un documento in base alla loro importanza Vengono visualizzati da diversi browser con

variazioni nelle dimensioni e nello stile, ma tutti seguono la regola che viene visualizzato lo stile di dimensioni maggiori in grassetto con H1 e quello di dimensioni minori con H6

L’autore può variare lo stile (grassetto-sottolineato…) all’interno dell’elemento

Page 16: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 16

Politecnico di Milano

ParagrafiParagrafi

Il browser non visualizza gli spazi multipli e i “new line” (=“a capo”)– Ogni sequenza di spazi viene contata come un solo carattere di spazio– Ogni “a capo” viene tradotta in uno spazio

Come risultato tutto il documento viene riportato su una sola riga e riformattato in base alla dimensione della finestra

Un modo per dividere il documento in paragrafi è usare l’elemento <P align=“left|center|right”> testo … </P>– Il testo inizierà su una nuova riga e sarà allineato in base all’attributo

align

Perché non usare <br> ?– <br> va semplicemente a capo mentre <P> aggiunge solitamente

mezza riga di spazio per separare il paragrafo dal resto (vedi esempio)

Page 17: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 17

Politecnico di Milano

Page 18: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 18

Politecnico di Milano

Stili FisiciStili Fisici

Vincolano il testo ad avere un determinato aspetto– Stile del carattere– Dimensione– Colore

<B> … </B> testo in grassetto <I> … </I> testo corsivo <SUP> … </SUP> apice <SUB> … </SUB> pedice <INS> … </INS> testo inserito <DEL> … </DEL> testo cancellato

Page 19: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 19

Politecnico di Milano

Stili logiciStili logici

Dicono che funzione ha una parte di testo anziché stabilire fisicamente a come viene visualizzato

Sarà il browser a decidere come visualizzarli <EM> … </EM> testo enfatizzato <STRONG> … </STRONG> testo di maggiore enfasi <ADDRESS> … </ADDRESS> contrassegna indirizzi di

posta– Si comporta in modo simile a <p> separando il contenuto dal

resto del documento Alcuni tag sono ibridi: non definiscono ne un aspetto

fisico ne un utilizzo logico– <BIG> … </BIG> il testo ha una dimensione maggiore rispetto a

quella standard– <SMALL> … </SMALL> il testo ha una dimensione minore

rispetto a quella standard

Page 20: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 20

Politecnico di Milano

Page 21: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 21

Politecnico di Milano

EntitàEntità

Hanno due funzioni– Permettono di visualizzare caratteri che non sono presenti

sulla tastierà– Permettono di visualizzare caratteri che che hanno un

significato particolare in HTML e non verrebbero visualizzati in altro modo• Ad esempio ‘<’, ‘>’

Si definiscono in due modi– &nome_entita; (esempio: ‘&lt;’)– &#numero_entità; (esempio: ‘&#160;’)

Page 22: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 22

Politecnico di Milano

Page 23: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 23

Politecnico di Milano

LinkLink

È l’elemento che più ha contribuito all’espansione del World Wide Web

Permette – Di navigare dal documento corrente ad un altro– Di navigare tra due punti dello stesso documento– Di adoperare altri servizi (mail, ftp,…)

Sintassi:LINK:– <a href=“URL”> testo visualizzato </a>

ANCORA: permette di navigare direttamente verso un punto del documento

– <a name="label"> testo visualizzato </a>

Page 24: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 24

Politecnico di Milano

Mentre il link è visualizzato in modo differente rispetto al resto del testo, l’ancora è formattata come testo standard

Page 25: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 25

Politecnico di Milano

FramesFrames

Permettono di dividere una pagina web in parti distinte aumentando il controllo sulle informazioni visualizzate

Sintassi:<framset ‘layout’> …

<frame SRC=‘…’><frame SRC=‘…’>…

</frameset>

È possibile partizionare la pagina orizzontalmente, verticalmente o in modo misto– <frameset rows=”30%,50%,20%"> ...– <frameset cols=”30%,50%,20%"> ...

Page 26: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 26

Politecnico di Milano

Page 27: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 27

Politecnico di Milano

Tabelle Tabelle

Permettono di formattare il layout di una pagina (o di una sua parte) in forma tabellare (righe,colonne)

Sintassi– <table attributi>

<caption align=‘…’> didascalia </caption><tr attributi>

<th> titolo prima col. </th><th>titolo seconda col. </th>

</tr><tr>

<td>prima colonna, prima riga</td>…</tr>…

</table>

Page 28: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 28

Politecnico di Milano

Attraverso l’attributo border andiamo a definire quanto la struttura della tabella è visibile all’utente

Page 29: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 29

Politecnico di Milano

HTML come linguaggio formaleHTML come linguaggio formale

HTML è un linguaggio formale Questo significa che

– E’ sempre possibile decidere se una “frase” fa parte o meno del linguaggio (decidibilità)

– E’ possibile determinare in modo univoco il significato di una frase In un linguaggio formale distinguiamo:

– Sintassi: insieme delle regole che permettono di costruire frasi corrette

– Semantica: insieme delle regole che permettono di dare un significato alle frasi del linguaggio (una frase può essere sintatticamente corretta ma non aver nessun significato semantico)

In generale la programmazione di un computer avviene attraverso un linguaggio formale

Ovvero: Un linguaggio di programmazione è un linguaggio formale, non sempre è vero il viceversa– HTML NON E’ un linguaggio di programmazione

Page 30: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 30

Politecnico di Milano

Grammatica Grammatica

La sintassi di un linguaggio formale viene descritta attraverso una grammatica

Una grammatica formale viene descritta:– Definendo tutti i simboli che è possibile utilizzare nel

linguaggio– Definendo le regole sintattiche che permettono di utilizzare i

simboli per generare frasi

Per esempio nella grammatica del linguaggio HTML– I simboli sono rappresentati dall’insieme dei caratteri

dell’alfabeto e da tutte le parole speciali <html>,</html>,…– Le regole sintattiche sono tutte quelle che si occupano del

corretto uso degli elementi (tag di apertura e di chiusura, attributi,…)

Page 31: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 31

Politecnico di Milano

Errore sintattico: l’elemento <table> è stato chiuso in modo imprevisto.

Page 32: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 32

Politecnico di Milano

Errore semantico: il documento è sintatticamente corretto ma il funzionamento non è quello desiderato dall’autore.

Page 33: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 33

Politecnico di Milano

Indice Indice

Il World Wide Web– Sistemi informativi lineari e non lineari: gli ipertesti– Il Web: cenni storici– Cenni di HTML– HTML come linguaggio formale

Cenni di XML Fondamenti di programmazione

– Il linguaggio Javascript

Introduzione al modello open source

Page 34: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 34

Politecnico di Milano

XML: un linguaggio a markup XML: un linguaggio a markup estensibileestensibile L’Extensible Markup Language (XML) è uno standard del W3C nato

nel febbraio del 1998 Si tratta di un linguaggio a markup estensibile

– Un sottoinsieme di SGML– Con il quale è possibile creare nuovi tag

Tale linguaggio può essere usato per descrivere, in forma testuale, informazioni strutturateEs. – Descrivere un prodotto avente un codice, un colore, una descrizione

testuale– Descrivere un prodotto composto da parti ognuna delle quali caratterizzata

da informazioni specifiche Il suo ambito naturale di utilizzo è quindi nel supporto alle attività di

business-to-business

Page 35: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 35

Politecnico di Milano

XML: un linguaggio a markup XML: un linguaggio a markup estensibileestensibile Come tutte le specifiche W3C, XML è uno standard

aperto e indipendente dalla piattaforma Un documento XML è un documento di puro testo

composto da dati e tag– In tal senso un documento XML assomiglia ad un

documento HTML• L’intero linguaggio HTML può essere definito usando XML

Page 36: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 36

Politecnico di Milano

XML: un esempioXML: un esempio

<?xml version="1.0" standalone="yes"?><person>

<name><title>Ing.</title><first-name>Mario</first-name><last-name>Rossi</last-name>

</name><address type=“work”>

<street>P.zza Leonardo da Vinci</street><number>1</number><city>Milano</city><country>Italia</country><zipcode>20133</zipcode>

</address></person>

Page 37: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 37

Politecnico di Milano

XML vs. HTMLXML vs. HTML

HTML è un linguaggio di descrizione di pagina– I tag HTML permettono di descrivere come certe informazioni

dovranno apparire a video– HTML fornisce informazioni legate all’aspetto dei dati

XML è un linguaggio di descrizione di dati– I tag XML nascono per definire informazioni riguardanti il tipo del

dato, come esso sia strutturato e cosa le diverse parti rappresentino

I tag HTML sono predefiniti– Nuove versioni di HTML aggiungono sempre nuovi tag

XML permette la definizione di nuovi tag

Page 38: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 38

Politecnico di Milano

Possibili utilizzi di XMLPossibili utilizzi di XML

In generale XML facilita lo scambio di dati tra applicazioni– Per applicazioni di business-to-business– Per permettere l’interoperabilità tra applicazioni diverse

• Es. Database– Per creare formati standard che superino i vincoli dei formati proprietari

(es. file word vs. XML) Miglioramento delle tecnologie di ricerca

– Es. ricerca di informazioni commerciali (prezzo migliore per un certo tipo di prodotto)

Scambio di informazioni tra agenti o tra agenti e siti Se HTML è il linguaggio per il “rendering” di informazioni sotto forma

di pagine web, XML è il linguaggio per lo scambio dati su web

Page 39: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 39

Politecnico di Milano

Caratteristiche di un documento XMLCaratteristiche di un documento XML

Ogni documento XML inizia con una dichiarazione nella forma:– <?xml version="1.0" standalone="yes"?>

Un documento XML può essere:– Ben formato– Valido

Un documento ben formato soddisfa le regole generali di XML– Per ogni tag aperto ne esiste uno chiuso– Vengono rispettate le regole di inclusione– ...

Un documento valido è un documento ben formato al quale è associato un document type definition (DTD)

– Il DTD definisce quali tag possano essere utilizzati e come

Page 40: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 40

Politecnico di Milano

Documenti ben formatiDocumenti ben formati

Un documento XML è “ben formato” se:– Ha uno ed un solo elemento radice

• Che non è contenuto all’interno di nessun altro elemento– Viene rispettata la regola di corretto annidamento tra elementi

• Per ogni start-tag interno ad un elemento X esiste un end-tag posto prima della fine di X

– Vengono rispettate le regole sulla sintassi dei tag• Uso di soli caratteri alfanumerici nel nome del

tag, …

Un documento ben formato può essere utilizzato per descrivere un qualsiasi tipo di dato

Ad esso non è esplicitamente associato alcun descrittore del tipo

Page 41: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 41

Politecnico di Milano

I DTDI DTD

Un DTD definisce le regole che un documento XML deve soddisfare per essere considerato valido rispetto a quel DTD

Tali regole definiscono nome e tipo del contenuto di ogni elemento che può apparire nel documento

Nonché le regole che definiscono dove tale elemento può o deve apparire all’interno del documento

Un DTD rappresenta la definizione della grammatica di un linguaggio– Il linguaggio che deve essere usato per definire tutti i documenti validi

rispetto a quel DTD

Page 42: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 42

Politecnico di Milano

I DTD: Un esempioI DTD: Un esempio

<!ELEMENT MEMO (TO,FROM,SUBJECT,BODY,SIGN)>

<!ATTLIST MEMO importance (HIGH|MEDIUM|LOW) "LOW">

<!ELEMENT TO (#PCDATA)>

<!ELEMENT FROM (#PCDATA)>

<!ELEMENT SUBJECT (#PCDATA)>

<!ELEMENT BODY (P+)>

<!ELEMENT P (#PCDATA)>

<!ELEMENT SIGN (#PCDATA)>

<!ATTLIST SIGN signatureFile CDATA #IMPLIED

email CDATA #REQUIRED>

Page 43: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 43

Politecnico di Milano

Documenti validiDocumenti validi

Un documento XML è “valido” se:– E’ ben formato– Ha un DTD associato– E’ conforme al DTD associato

• Rispetta le regole sintattiche ivi definite

Un documento XML valido inizia con la dichiarazione:– <?xml version="1.0" standalone=“no"?>

L’associazione “documento XML” – DTD si ottiene tramite l’uso del tag DOCTYPE nel documento XML:– <!DOCTYPE MEMO SYSTEM "memo.dtd">

oppure<!DOCTYPE MEMO [ … ]

Page 44: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 44

Politecnico di Milano

XML: un insieme di tecnologieXML: un insieme di tecnologie

CSS XSL XSLT XPath DOM …

Page 45: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 45

Politecnico di Milano

Indice Indice

Il World Wide Web– Sistemi informativi lineari e non lineari: gli ipertesti– Il Web: cenni storici– Cenni di HTML– HTML come linguaggio formale

Cenni di XML Fondamenti di programmazione

– Il linguaggio Javascript

Introduzione al modello open source

Page 46: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 46

Politecnico di Milano

Pagine attive: JavascriptPagine attive: Javascript

È stato progettato per migliorare le capacità del codice HTML e per rendere attive le pagine web

Il codice javascript è incorporato nei documenti HTML dentro i quali viene esegito

È un linguaggio interpretato (l’interprete è il browser)– Quindi il funzionamento dipende dal tipo di browser

utilizzato

È basato su eventi:– La maggior parte del codice viene attivato da azioni

dell’utente (ad esempio cliccando su un bottone)

Page 47: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 47

Politecnico di Milano

Linguaggi compilati ed interpretatiLinguaggi compilati ed interpretati

Il compilatore non esegue il programma che riceve in ingresso, ma lo traduce in linguaggio macchina. Il software viene eseguito dalla CPU

Diversamente i linguaggi interpretati non vengono compilati ma eseguiti direttamente da un software particolare (interprete).

In teoria per qualunque linguaggio è possibile sviluppare sia un compilatore che un interprete

L’uso dell’interpete peggiora le prestazioni run-time ma consente una fase di sviluppo rapida eliminando le fasi di compilazione e linking

Page 48: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 48

Politecnico di Milano

Linguaggi compilati ed interpretatiLinguaggi compilati ed interpretatiCodice sorgente

Codice oggetto

Eseguibile

Compilatore

linker

interprete

Loader

esecuzione

esecuzione

Page 49: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 49

Politecnico di Milano

Primo esempioPrimo esempio

Il codice viene inserito tra due tag

ESEMPIO

Page 50: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 50

Politecnico di Milano

Dove si posiziona il codice?Dove si posiziona il codice? HEAD

– Utile per scatenare eventi, assicura che tutte le funzioni di cui si ha bisogno vengano caricate e siano pronte all’uso.

BODY– Utile per inserire contenuti direttamente nel documento

File esterno– Utile quando si usa il medesimo codice in diverse pagine

• Manutenzione facilitata

Page 51: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 51

Politecnico di Milano

VariabiliVariabili

Vengono usate per conservare dati Javascript è “case sensitive”

– ‘Risultato’ è diversa da ‘risultato’

Dichiarazione

È possibile ma non indispensabile adoperare l’identificatore “var” durante la creazione di una variabile

Page 52: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 52

Politecnico di Milano

Funzioni Funzioni

Una funzione è una porzione di programma, costituita da un insieme di istruzioni che complessivamente eseguono una determinata operazione o risolvono un determinato problema

Una funzione può restituire un valore ma non è necessario– Una funzione può essere chiamata per ottenere un valore come risultato

oppure perché produce un determinato effetto pur senza ritornare nessun valore (ad esempio può redirezionare il browser su un’altra pagina o aprire una finestra)

Una funzione può essere invocata da qualsiasi punto di una pagina

Una funzione può a sua volta richiamare un'altra funzione o addirittura se stessa (si parla in questo caso di programmazione ricorsiva)

La funzione invocante rimane sospesa fino al termine della funzione invocata

Page 53: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 53

Politecnico di Milano

Come definire una funzioneCome definire una funzione

Si aspetta dei parametri e ritorna un valore

Non richiede parametri e non ritorna un valore

Si aspetta dei parametri e non ritorna un valore

Non richiede parametri e ritorna un valore

Page 54: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 54

Politecnico di Milano

Esempio Esempio

Page 55: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 55

Politecnico di Milano

Validità delle variabili Validità delle variabili

Una variabile dichiarata dentro una funzione ha validità solo all’interno della funzione

Una variabile dichiarata all’esterno di una funzione ha validità in tutta la pagina

Nell’esempio precendente che validità hanno le variabili– valoreDaRestituire ?– risultato ?

Page 56: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 56

Politecnico di Milano

EventiEventi

Sono azioni che vengono intercettate dal browser e permettono di eseguire codice javascript in seguito all’interazione con l’utente– Premendo un pulsante si può ad esempio invocare una funzione

Esempi di eventi– Click del mouse– Passaggio del mouse su un elemento (anche senza click)– Caricamento della pagina– …

Ogni evento viene associato ad una funzione da eseguire

Page 57: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 57

Politecnico di Milano

FormForm

Completano l’interfaccia di I/O permettendo all’utente di inserire valori

Vengono racchiusi nei tag <form>…</form>

Gli elementi che possono essere inseriti in un form sono– Campi di testo– Checkbox– Pulsanti– …

Possono attivare eventi e lanciare funzioni javascript

Page 58: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 58

Politecnico di Milano

Form ed Eventi: EsempioForm ed Eventi: Esempio

Evento

Page 59: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 59

Politecnico di Milano

Accesso ai datiAccesso ai dati

Nonostante Javascript sia un linguaggio orientato agli oggetti è possibile programmare in modo funzionale (senza creare oggetti)

Tuttavia per accedere alle variabili inserite dall’utente nel form è necessario usare gli oggetti built-in di javascript

Per i nostri scopi basterà immaginare questi oggetti come contenitori di variabili o di altri contenitori. – Per arrivare ad una variabile dobbiamo attraversare un percorso

che passa dal contenitore più grande fino al valore che ci interessa– casa.stanza.letto.lenzuola.colore

Esempio: parametro = document.forms.demo.testo.value

Page 60: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 60

Politecnico di Milano

Accesso ai datiAccesso ai dati

document.forms.demo.testo.value

Pagina html

Tutte le form presenti nella pagina

demo

testo

Page 61: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 61

Politecnico di Milano

Funzioni predefinite - Es.: PopupFunzioni predefinite - Es.: Popup

alert(“messaggio")

E’ una funzione esattamente come quella che abbiamo definito nel codice,con la differenza che è gia stata definita dagli sviluppatori di javascript (built-in) per cui possiamo invocarla pur senza sapere come è implementata.

Fa parte delle funzioni che non restituiscono un valore ma che vengono utilizzatePer l’effetto che hanno. In questo caso l’effetto è di aprire una finestra popup sulloSchermo visualizzando il messaggio che viene passato come parametro

Page 62: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 62

Politecnico di Milano

EsempioEsempio

Page 63: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 63

Politecnico di Milano

Esecuzione condizionaleEsecuzione condizionale Permette di intraprendere azioni differenti in base al

valore vero o falso di una espressione

Codice sotto condizione

Due sequenze eseguite

Una in alternativa all’altra

Doppia condizione con

3 alternative

Page 64: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 64

Politecnico di Milano

Esempio (Flow chart)Esempio (Flow chart)

numero > 0 ?

lascia il segno invariato

numero < 0 ?

numero = 0 Inverti il segno

sino

no si

Calcolo del valore assolutodi un numero

Page 65: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 65

Politecnico di Milano

Esempio (test) Esempio (test)

Page 66: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 66

Politecnico di Milano

Esempio (implementazione) Esempio (implementazione) ESEMPIO

Page 67: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 67

Politecnico di Milano

Ripetizione Ripetizione

La stessa sequenza di operazioni viene eseguita più volte fino all’avverarsi della condizione di uscita

Controllo in testa

Controllo in coda (il codice

viene eseguito almeno una volta

Page 68: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 68

Politecnico di Milano

Esempio (Flow chart)Esempio (Flow chart)

parametro > 0 ?

combinazione = 1contatore = parametro

contatore > 0 ?

comunica il risultatocombinazione = combinazione * 2contatore = contatore -1

si

no

no

si

Acquisisci l’esponente

parametro = esponente

fermati

Calcolo del numero di

colori che è possibile

rappresentare con N bit

Page 69: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 69

Politecnico di Milano

Esempio (test) Esempio (test)

Page 70: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 70

Politecnico di Milano

Esempio (implementazione) Esempio (implementazione) ESEMPIO

Page 71: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 71

Politecnico di Milano

Indice Indice

Il World Wide Web– Sistemi informativi lineari e non lineari: gli ipertesti– Il Web: cenni storici– Cenni di HTML– HTML come linguaggio formale

Cenni di XML Fondamenti di programmazione

– Il linguaggio Javascript

Introduzione al modello open source

Page 72: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 72

Politecnico di Milano

Categorie di softwareCategorie di software

Software

Open source / Libero

Pubblico dominio

Proprietario

Chiuso

Software con licenzaGPLLGPL…

Free Download

Page 73: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 73

Politecnico di Milano

Software proprietarioSoftware proprietario

Il suo utilizzo, la ridistribuzione o modifica sono proibiti o richiedono un permesso o sono sottoposti a tali vincoli che in pratica non si possono fare liberamente.

Il software chiuso rappresenta la maggior parte del software proprietario e non rende disponibile il codice sorgente

All’interno del software proprietario trovano posto anche i programmi shareware– E’ possibile redistribuire il programma ma per il continuare

ad usarlo è necessario pagare una licenza

Page 74: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 74

Politecnico di Milano

Open SourceOpen Source

Il codice sorgente deve essere disponibile Il termine “Open Source” indica un software la cui

licenza prevede la possibilità per tutti gli utilizzatori di ottenere il codice sorgente

Questo da la possibilità a tutti gli sviluppatori di migliorare il software

La collaborazione di molti sviluppatori permette ad un programma di evolvere in modo più veloce rispetto al caso di un ristretto team di programmatori

Possiamo dividere il software open source in– Software di pubblico dominio– Software con permesso d’autore copyleft

Page 75: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 75

Politecnico di Milano

Open source e software liberoOpen source e software libero

Non sono la stessa cosa, rappresentano due correnti filosofiche diverse pur coesistendo su molti aspetti specifici

Open source è una metodologia di sviluppo– Trae dalla condivisione del codice sorgente benefici pratici

Il software libero è un movimento sociale– Il software libero è una questione di libertà non di soluzione di

sviluppo ottimale o di prezzo– Libertà di eseguire il programma, per qualsiasi scopo – Libertà di studiare come funziona il programma e adattarlo alle

proprie necessità – Libertà di ridistribuire copie in modo da aiutare il prossimo – Libertà di migliorare il programma e distribuirne pubblicamente i

miglioramenti, in modo tale che tutta la comunità ne tragga beneficio

Page 76: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 76

Politecnico di Milano

Pubblico dominioPubblico dominio

Di solito si usa il termine “pubblico dominio” come sinonimo di “libero” ma in realtà ha un significato giuridico preciso

È un particolare software privo di diritto di autore (privo di copyright)

Significa che il programma è modificabile e redistribuibile imponendo anche vincoli sul suo utilizzo

Quindi un software può nascere come pubblico dominio ed essere modificato e redistribuito a pagamento

È il caso di un noto server grafico linux (X11)

Page 77: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 77

Politecnico di Milano

Permesso d’autore (copyleft)Permesso d’autore (copyleft)

ll software con permesso d'autore (copyleft) è software libero le cui condizioni di distribuzione non permettono ai ridistributori di porre alcuna restrizione addizionale all'atto di ridistribuire o modificare il software. Questo significa che ogni copia del software, anche se modificata, deve essere software libero.

Un esempio di copyleft è la licenza GPL (General Public Licence) utilizzata dalla maggior parte delle comunità open source

Copyleft è un gioco di parole– copyright tende a tutelare il diritto d'autore, anche attraverso

limitazioni all'accesso della conoscenza, mentre il copyleft intende tutelare il più generale diritto della collettività a fruire dei prodotti

Page 78: Introduzione ai Linguaggi Formali: HTML e XML Fondamenti di Programmazione: Cenni di Javascript Politecnico di Milano Facoltà del Design – Bovisa Prof

Cultura tecnologica del progetto 78

Politecnico di Milano

Free downloadFree download

Il software liberamente scaricabile non appartiene necessariamente ad una categoria precisa tra quelle viste

Spesso anche il codice proprietario può essere scaricato ed adoperato (ad esempio i vari plug-in per internet explorer che permettono di vedere animazioni)

Si usa il termine Freeware per indicare questo tipo di software che può essere liberamente scaricato e redistribuito ma non modificato

Un ulteriore categoria è rappresentata dal software semilibero che può essere utilizzato redistribuito e modificato ma non per fini di lucro