Facoltà di Pianificazione del Territorio A.A. 2011/2012. Informatica

Transcript

1 Facoltà di Pianificazione del Territorio A.A. 2011/2012 Informatica

2 Programma della giornata Contenuti: 1. Dai codici ai formati ai linguaggi di markup 2. Il protocollo http 3. Il linguaggio html e i CSS 2

3 Esempio di codifica ASCII Il testo: Tradotto (cioè cifrato) in ASCII (utilizzando tre cifre per ogni numero; ad es.: 045, ) diventa: E rappresentato in aritmetica binaria (un byte per lettera) diventa (limitandoci alle prime tre parole dell originale):

4 La codifica dei formati Apparentemente nel codice ASCII o UNICODE c è più di quanto ci serva per scrivere un testo Ma supponiamo però di essere creativi e di voler scrivere una cosa di questo tipo: Questo è un esempio di testo formattato. A questo punto 256 codici non ci bastano più! 4

5 La codifica dei formati Le lettere di un testo possono differire per: carattere (font): Times, Arial, Σψµβολ, Comic, Impact, dimensioni: 20 punti, 10 punti, 28 punti, effetti : grassetto, corsivo, sottolineato, in rilievo, colore: nero, rosso, verde,... Un codice che tenesse conto di tutte queste possibilità però sarebbe enorme. Approssimando per difetto abbiamo: 256 caratteri 51 font 96 dimensioni 7 effetti 16 colori = elementi da codificare Costruire una tavola come quella del codice ASCII o UNICODE per tener conto di tutte queste possibilità è irrealistico. 5

6 Codifica dei formati In realtà la soluzione adottata non è quella di creare una tabella come quella del codice ASCII Viceversa, per scrivere testi formattati si adottano particolari linguaggi che consentono di descrivere in modo sintetico l aspetto della pagina A differenza del codice ASCII, non tutti questi formati sono trasferibili da un sistema all altro La maggior parte di essi richiede l uso di sistemi e di software particolari sia per la scrittura che per la lettura Insomma, si guadagna in flessibilità ma si perde in generalità 6

7 Codifica dei formati Può essere utile citare alcuni fra i formati di testo più diffusi: il formato DOC (da document) utilizzato da Microsoft Word, necessita Word sia per la scrittura che per la lettura il formato HTML (HyperText Markup Language) utilizzato per le pagine web può essere scritto con qualsiasi programma di scrittura necessita per la lettura di un particolare tipo di programma, detto browser (es.: Internet Explorer, Firefox, Chrome,...) 7

8 Codifica dei formati il formato PDF (Portable Document Format) utilizzato per diffondere documenti sul web (formato compatto) necessita per la scrittura di Adobe Acrobat Distiller necessita per la lettura di Acrobat Reader (gratuito) il formato PS (PostScript) può essere scritto partendo da un qualsiasi software di word processing per essere letto necessita di software particolari (gratuitamente disponibili su Internet) 8

9 Testi Un testo può essere visto di solito come una stringa più o meno lunga, che viene letta sequenzialmente Gli autori di testi di solito danno una struttura ai propri testi; inoltre, a molti testi vengono associati degli attributi, come titolo, nome dell autore, ecc.; alcuni testi contengono riferimenti ad altri testi o a parti di se stessi 9

10 Ipertesti Si definisce ipertesto un documento la cui struttura di consultazione è non lineare, tale cioè che le parti di cui è logicamente costituito (capitoli, paragrafi, ) sono organizzate non semplicemente in successione, ma secondo una struttura più complessa. Ogni parte dell intero documento (chiamata nodo) può contenere degli anchor point, punti di aggancio per relazioni (chiamate link o anche hyperlink) che rimandano ad altre parti (nodi target) del documento. 10

11 11

12 Pagine e link 12

13 Il Web Un modo di connettere computers che offrono informazioni (servers) con computer che la ricavano (clients). Usa Internet, ma non è la stessa cosa di Internet URL (uniform resource locator, es. un modo per specificare quale informazione c è e dov è HTTP (hypertext transfer protocol): un modo per richiedere specifica informazione ad un server HTML (hyptertext markup language): un linguaggio per descrivere informazione da visualizzare. Browser (Firefox, Chrome, Internet Explorer, ): un programma per fare richieste e visualizzare il risultato. 13

14 14

15 Un po di storia Tutto inizia nel 1989: Tim Berners-Lee al CERN progetta un modo per rendere accessibile in rete risultati di fisica. Prime distribuzioni di software: 1991 Primo browser grafico (Mosaic): Feb 1993 Marc Andreessen alla NCSA (Univ of Illinois) progetta Netscape, Mar 1994, primo browser commerciale L evoluzione tecnica è gestita dal World Wide Web Consortium ( agenzia non-profit, con sede al MIT, Berners-Lee ne è il direttore. 15

16 Primo Esempio Un documento html può avere estensione.htm o.html Index.html Tag iniziale Tag finale Contenuto Il Browser è un applicazione software che consente di vedere e di interagire con un documento html 16

17 (Browser) e Server 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 client (1) HTTP Request Resource Client (browser) (2) HTTP Response Web Server 17

18 Pagine dinamiche 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.)?? Request resource Web Server Call program CGI Script Client Deliver response Build response 18

19 Architettura Client-Server Router Client Browser Internet richiesta Router information Server Web Server Pagine HTML Immagini Suoni 19

20 Quando clickiamo una URL Il client apre una connessione TCP/IP e manda una richiesta del tipo: GET /filename HTTP/1.0 Il server restituisce: l informazione dell header un file di testo Il testo inviato può contenere materiale codificato appartenente a diversi formati (HTML, GIF, JPEG, ecc.) 20

21 Il formato di una URL: service://hostname/filename?other_stuff La parte filename?other_stuff può codificare: valori forniti dal client (forms) richieste di far girare un programma sul server (cgi-bin) 21

22 Quando compiliamo una form 0 Request Server/Form.html 3 Client/Browser 1 2 Data 3 2 Database HTML Form Action= Query.asp CGI String 1 Form Result Web Server (IIS) SQL Server Query Result Page 1 2 HTML form Form.html Query Template + Code Query.asp 22

23 Pagina HTML La risorsa di base richiesta dal client è una pagina HTML, ovvero un testo che rappresenta un documento ipertestuale Contenuto + Markup = risultato finale 23

24 Hyper Text Markup Language 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 24

25 Elementi 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.: 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> 25

26 Attributi 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 26

27 Elemento Start Tag Contenuto End Tag Gli elementi br e img non hanno il tag finale Attributo 27

28 Formattazione 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 28

29 Paragrafi 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 testo Il testo inizierà su una nuova riga e sarà allineato in base all attributo align Perché non usare ? va semplicemente a capo mentre aggiunge solitamente mezza riga di spazio per separare il paragrafo dal resto (vedi esempio) 29

30 30

31 Stili Fisici Vincolano il testo ad avere un determinato aspetto Stile del carattere Dimensione Colore testo in grassetto testo corsivo apice pedice <INS> </INS> testo inserito <DEL> </DEL> testo cancellato 31

32 Stili logici Dicono che funzione ha una parte di testo anziché stabilire fisicamente a come viene visualizzato Sarà il browser a decidere come visualizzarli testo enfatizzato testo di maggiore enfasi <ADDRESS> </ADDRESS> contrassegna indirizzi di posta Si comporta in modo simile a separando il contenuto dal resto del documento Alcuni tag sono ibridi: non definiscono né un aspetto fisico né un utilizzo logico <BIG> </BIG> il testo ha una dimensione maggiore rispetto a quella standard il testo ha una dimensione minore rispetto a quella standard 32

33 33

34 Entità Hanno due funzioni Permettono di visualizzare caratteri che non sono presenti sulla tastiera Permettono di visualizzare caratteri che hanno un significato particolare in HTML e non verrebbero visualizzati in altro modo Ad esempio <, > Si definiscono in due modi &nome_entita; (esempio: < ) &#numero_entità; (esempio: ) 34

35 35

36 Link È 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 invocare 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> 36

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

38 Link Esempio: uso della posta elettronica scrivi al direttore del Corriere <a href /> 38

39 Immagini Esempio: inserimento di una immagine foto del giorno <img src = foto_del_giorno.jpg width= 200 height= 400 alt= Foto del giorno /> 39

40 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> </tr> <tr> </tr> </table> <th> titolo prima col. </th><th>titolo seconda col. </th> <td>prima colonna, prima riga</td> 40

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

42 Meta - Tag Tag di servizio, utili per indicizzare il sito sui motori di ricerca Si scrivono nella sezione head della pagina Description descrizione sintetica del sito Keywords contenuti relativi al sito Sintassi: <META NAME= CONTENT= > Esempio: <META NAME= keywords CONTENT= notizie, giornale > <META NAME= description CONTENT= notizie del corriere > descrive il contenuto e le parole chiave della pagina che possono essere usate dai motori di ricerca per l indicizzazione 42

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