Appunti di Introduzione all'informatica

Transcript

1 Appunti di Introduzione all'informatica HTML e Applicazioni Web COSA SI IMPARA IN QUESTO MODULO: Come è fatta una pagina web Cosa è HTML Cosa è e come è fatta una applicazione web HTML Come è fatta una pagina del World Wide Web Quando il browser riceve una pagina web e la visualizza, esso obbedisce a una serie di comandi che gli spiegano che cosa va visualizzato e come. Tali comandi sono contenuti in un file che il server ha mandato via Internet. Essi sono scritti in un linguaggio che si chiama Hyper-Text Markup Language (HTML) e il file ha un nome che finisce con l'estensione.html. Per esempio, la pagina iniziale di un sito tipicamente è contenuta in un file che si chiama index.html. Il browser riceve questo file e lo memorizza sul disco (in una zona apposita chiamata cache). Poi lo visualizza immediatamente. Io non sono nemmeno tenuto a sapere che tale file esiste sul mio disco. NOMENCLATURA I seguenti sono termini frequentemente utilizzati che è utile sapere. Browser Client che invia richieste HTTP su una rete Alla ricezione di una risposta HTTP invoca l interprete appropriato per il linguaggio in cui è espressa la risposta (nel nostro caso HTML) Web server Server in attesa di richieste HTTP a cui replica con risposte HTTP Web page (o document) Risorsa ospitata da un web server e richiesta da un browser 1

2 Web site Può contenere riferimenti ad altre risorse Una collezione di pagine web interconnesse, dotate di un punto di ingresso (detto home page) In genere appartengono ad una stessa organizzazione (o individuo) Come è fatto il linguaggio HTML Si tratta di un linguaggio. Quindi è comprensibile anche alle persone. (Se fosse un protocollo sarebbe comprensibile solo alle macchine.) Infatti si può scrivere a mano, direttamente con un text editor. Si tratta di un linguaggio di markup, cioè di annotazione. I linguaggi di markup sono quell'insieme di regole e simboli che si usano nell'editoria tradizionale, per comunicare fra chi decide l'impaginazione di un testo e chi deve realizzarla in pratica. Per indicare l'impaginazione, l'autore o un editor annota un testo, come p. es. il seguente: La Divina Commedia di Dante Alighieri INFERNO/Inferno: Canto I Nel mezzo del cammin di nostra vita/mi ritrovai per una selva oscura/ché la diritta via era smarrita. Ahi quanto a dir qual era è cosa dura/esta selva selvaggia e aspra e forte/che nel pensier rinova la paura! con indicazioni del tipo seguente: <frontespizio> <titolo>la Divina Commedia</titolo> <autore>di Dante Alighieri</autore> </frontespizio> <testo> <titolo-sezione>inferno</titolo-sezione> <titolo-capitolo>inferno: Canto I</titolo-capitolo> <strofa> <verso>nel mezzo del cammin di nostra vita</verso> <verso>mi ritrovai per una selva oscura</verso> <verso>ché la diritta via era smarrita.</verso> </strofa> <strofa> <verso>ahi quanto a dir qual era è cosa dura</verso> <verso>esta selva selvaggia e aspra e forte</verso> <verso>che nel pensier rinova la paura!</verso> </strofa> </testo> La persona che esegue l'impaginazione riceve dal grafico (chi decide l'aspetto esteriore della pubblicazione) le regole per impaginare le varie 2

3 parti: come deve essere un frontespizio, come deve essere un titolo, come deve essere l'indicazione dell'autore... (eccetera). Seguendo tali regole, si otterrà alla fine una cosa simile alla seguente: La funzione del linguaggio HTML è esattamente la stessa. Addirittura, l'aspetto esteriore dei comandi è analogo a quello illustrato nell'esempio dell'editoria tradizionale. Il linguaggio HTML è standardizzato dal WWW Consortium (W3C), un consorzio di ditte anche notevolmente importanti (Microsoft, IBM) impegnate nello sviluppo del WWW. Si tratta di uno standard industriale (ossia nessuna legge impone di adottarlo). Infatti non si autodefinisce standard ma raccomandazione. Lo standard attualmente adottato è la versione HTML 4.01 (che significa: quarta edizione con aggiunte alcune piccole varianti). Si può ottenere (gratuitamente) all'indirizzo ALTRA NOMENCLATURA E CONCETTI BASE Un file HTML contiene due parti: una intestazione, che comprende solo istruzioni accessorie, ma non il contenuto della pagina web; un corpo, che comprende il contenuto della pagina web. 3

4 In HTML qualunque documento web ha quindi la struttura che segue: <html> <head> Qui vanno informazioni generali </head> <body> Qui va il contenuto del documento </body> </html> (Al browser, che legge questo file, non importano gli spazi, i rientri, né come vado a capo, e nemmeno le maiuscole o minuscole; posso scegliere di ordinare le righe nel modo più chiaro per me.) I comandi compresi fra < e > si chiamano tag. I tag che abbiamo visto hanno tutti una versione inizio e una versione fine (che si riconosce perché il nome del tag inizia con la sbarra / ). Ne vedremo altri che hanno solo la versione inizio (perchè la versione fine non è necessaria). COSA VA NELL'INTESTAZIONE Nell'intestazione si possono mettere dei tag relativi a informazioni che descrivono il documento, la lingua che usa, ecc. L'informazione che più di frequente viene indicata è un titolo con cui riferirsi al documento <title>home page del mio sito</title> Questa informazione non è il titolo che verrà visualizzato in testa al documento. Infatti abbiamo appena detto che il contenuto del documento va nel corpo, non nell'intestazione. Questa informazione verrà visualizzata sulla sbarra del titolo del browser, p.es. così: COSA VA NEL CORPO Nel corpo di un documento HTML va tutto ciò che fa parte del contenuto del documento. Ossia, tutto ciò che va visualizzato nell'area di lavoro della finestra del browser. Nel seguito vediamo alcuni dei tag che si possono utilizzare, secondo lo standard attuale HTML

5 Alcuni tag HTML TITOLI NEL TESTO I titoli delle varie parti di testo si considerano gerarchici. Ossia ci sarà una divisione in parti principali (p.es. sezioni) caratterizzata da titoli di primo livello. Poi ci sarà una divisione in parti secondarie (p. es. capitoli) caratterizzata da titoli di secondo livello. Poi ci sarà una divisione in parti ulteriori (p.es. paragrafi) caratterizzata da titoli di terzo livello. E così via. In HTML ci sono 6 livelli di titoli, che si indicano così: <H1>Sezione I</H1> <H2>Capitolo 1<H2> <H3>Paragrafo 1.1</H3> e così via fino a H6. Tuttavia più di 3 o al massimo 4 livelli non conviene usare. Tra l'altro, è bene che una pagina web non sia troppo lunga, altrimenti diventa faticosa da leggere. Quindi già 3 livelli possono essere molti. PARAGRAFI I paragrafi di testo normale sono delimitati dai tag <P> e </P> <P>Testo normale, che si può eventualmente estendere su diverse righe.</p> Gli a-capo nel testo non vengono considerati: quando il browser impagina il testo si occupa lui di sistemarlo e di mandarlo a capo nei punti opportuni. In altre parole, non è detto e anzi è improbabile che sulla pagina visualizzata ci sarà un a-capo fra eventualmente ed estendere. D'altra parte, questo è naturale se si pensa che la finestra del browser può essere ridimensionata: il browser deve poter riaggiustare il testo per occupare lo spazio nel modo più efficiente. Per cambiare l'allineamento dei paragrafi si può introdurre un attributo del tag P. Un attributo è qualcosa che viene scritto dopo il nome del tag e ne specifica un aspetto. Per allineare un paragrafo si usa l'attributo align, nel modo seguente: Notare che per ottenere le lettere accentate occorre usare codici speciali: à é è ì ò ù È à è é ì ò ù È 5

6 HTML <P ALIGN=LEFT>Testo normale, che si può eventualmente estendere su diverse righe.</p> Risultato Testo normale, che si può eventualmente estendere su diverse righe. <P ALIGN=RIGHT>Testo normale, che si può eventualmente estendere su diverse righe.</p> Testo normale, che si può eventualmente estendere su diverse righe. <P ALIGN=JUSTIFY>Testo normale, che si può eventualmente estendere su diverse righe.</p> Testo normale, che si può eventualmente estendere su diverse righe. <P ALIGN=CENTER>Testo normale, che si può eventualmente estendere su diverse righe.</p> Testo normale, che si può eventualmente estendere su diverse righe. Alla fine di un paragrafo, il testo va a capo. Un altro tag per forzare un a-capo, anche se non siamo alla fine di un paragrafo, è il tag <BR> (line BReak). Questo è un tag che esiste solo nella versione inizio (non esiste il tag </ BR>). PARTI DEL TESTO CON SPECIALI FUNZIONI <EM>... </EM>: testo enfatizzato <STRONG>... </STRONG>: testo ancora più enfatizzato (p.es. se per EM viene usato il corsivo per STRONG viene usato il neretto). <CITE>... </CITE>: testo citato da altra fonte Esempio: HTML <P>Testo <STRONG>normale</STRONG>, che si può <EM>eventualmente</EM> estendere su diverse righe.</p> Risultato Testo normale, che si può eventualmente estendere su diverse righe. LISTE ED ELENCHI Un elenco numerato (o ordinato ) si crea con il tag <OL>... </OL> (Ordered List). Gli elementi dell'elenco si indicano con il tag <LI>, che non è necessario chiudere. Esempio: HTML <OL> <LI>Il mio primo elemento, <LI>il successivo, <LI>e infine l'ultimo, </OL> Risultato 1. Il mio primo elemento, 2. il successivo, 3. e infine l'ultimo, 6

7 Un elenco non numerato si crea con il tag <UL>... </UL> (Unordered List). Gli elementi dell'elenco si indicano nuovamente con il tag <LI>, che non è necessario chiudere. Esempio: HTML <UL> <LI>Il mio primo elemento, <LI>il successivo, <LI>e infine l'ultimo, </UL> Risultato Il mio primo elemento, il successivo, e infine l'ultimo, Per creare un elenco di elementi con descrizioni, si usa una Description List, tag <DL>... </DL>. Una description list ha due tipi di elementi: elementi che indicano un titolo: tag <DT> (Description Title) elementi che esplicitano una descrizione: tag <DD> (Description Data) Non è necessario chiuderli. Esempio: HTML <DL> <DT>Pavone <DD>Un uccello che fa la ruota <DT>Pinguino <DD>Un uccello che nuota <DT>Pulcinella di mare <DD>Un uccello che nuota, simile al pinguino <DD>Il pulcinella di mare però sa anche volare </UL> Risultato Pavone Un uccello che fa la ruota Pinguino Un uccello che nuota Pulcinella di mare Un uccello che nuota, simile al pinguino. Il pulcinella di mare però sa anche volare TABELLE Le tabelle si descrivono come segue: <TABLE> <TR> <TD> (dati casella 1 1) </TD> <TD> (dati casella 1 2) </TD> </TR> <TR> <TD> (dati casella 2 1) </TD> <TD> (dati casella 2 2) </TD> </TR> </TABLE> Ossia: Inizio e fine tabella sono segnati con i tag <TABLE>... </TABLE> (dati casella 1 1) (dati casella 1 2) (dati casella 2 1) (dati casella 2 2) Inizio e fine di ogni riga della tabella sono segnati con i tag <TR>... </ TR> (Table Row) 7

8 All'interno di ogni riga, inizio e fine dei dati contenuti in una casella sono segnati con i tag <TD>... </TD> (Table Data). ELEMENTI GRAFICI Le immagini non si possono mettere in un file HTML. Le immagini che vediamo in una pagina web sono file separati. Il browser li richiede al server web, come fa con le pagine HTML. Tali file vengono citati nel codice HTML. Il browser li visualizza all'interno della pagina, posizionati e dimensionati in modo opportuno. Il tag HTML per fare questo è <IMG> (IMmaGine). Questo tag non ha la versione fine e richiede necessariamente di specificare almeno un attributo, snza il quale non ha senso: tale atributo è l'indirizzo del file immagine. <IMG SRC= > Altri attributi che posso mettere sono: <IMG SRC= (indirizzo) WIDTH=100 HEIGHT=40 ALIGN=RIGHT VALIGN=TOP> WIDTH impone la larghezza; HEIGHT l'altezza. Se impongo uno dei due, l'altro viene calcolato per mantenere le proporzioni originali. Se impongo tutti e due posso variare anche le proporzioni. ALIGN impone l'allineamento orizzontale, come per il testo. VALIGN l'allineamento verticale rispetto alla riga in cui si trova l'immagine: TOP oppure MIDDLE oppure BOTTOM. Un altro elemento grafico è la riga orizzontale. Si usa il tag <HR> (Horizontal Rule). Si può specificarne la larghezza, anche in proporzione alla pagina: <HR WIDTH= 100 > <HR WIDTH= 70% > COLLEGAMENTI IPERTESTUALI I collegamenti ipertestuali si indicano nel seguente modo. Si sceglie una parte della pagina che deve essere cliccabile. Per esempio, per inserire un collegamento che consente di tornare alla home page, si renderà cliccabile il testo Home page. Questo testo è la nostra ancora, ossia il punto a cui si aggancia il collegamento. Lo marchiamo quindi con il tag <A>... </A> (Anchor). Anche questo tag non ha senso senza almeno un attributo: l'indirizzo a cui è collegato, cioè il riferimento ipertestuale. Dovremo quindi specificare l'attributo HREF (Hypertext REFerence): <A HREF= >Home page</a> 8

9 Un esempio di pagina web completa Codice HTML della pagina: <html> <head> <title>pagina di esempio</title> </head> <body> <h1>esempio di pagina HTML</h1> <h2>scopo</h2> <p> Questa pagina è una pagina di prova che serve ad illustrare i tag HTML che abbiamo visto.</p> <h2>consigli</h2> <p> Occorre essere <strong>rigorosi</strong> quando si scrive in HTML, perché il browser perdona molti errori e quindi non ci accorgiamo di averli fatti finché non succede qualcosa.</p> <p align=center> <em>è particolarmente noioso scrivere le tabelle. È consigliabile farsi prima un disegno su carta.</em></p> <h2>tre aspetti</h2> <p> Si può notare che un documento (e quindi anche una pagina web) si deve guardare sotto tre distinti aspetti: <ol> <li>il contenuto <li>le parti del testo <li>l'impaginazione </ol> Questi aspetti possono essere descritti come segue: <dl> <dt>contenuto <dd>la sostanza del documento <dt>parti del testo <dd>come il contenuto è logicamente suddiviso <dt>impaginazione <dd>che aspetto hanno le varie parti del documento. </dl> <h2>chi fa cosa?</h2> <ul> <li>l'autore decide il contenuto <li>l'autore o l'<em>editor</em> decide la suddivisione logica <li>il browser si occupa dell'estetica </ul> eventualmente aggiungendo immagini come la seguente:<br> <img src=" e link ipertestuali come quello che va alla <a href=" page del DISI</a> </p> 9

10 </body> </html> Quello che segue è la visualizzazione di questa pagina su un particolare browser che fa particolari scelte estetiche. È importante ricordare che HTML prevede solo di indicare al browser il ruolo delle varie parti del documento. Spetta poi al browser scegliere l'estetica di tali parti. Un modo per influire su questa scelta si chiama CSS o Cascading Style Sheets. Un file CSS è una serie di regole che riguardano le scelte estetiche. È buona norma tenere tali scelte distinte dal contenuto e dalla struttura logica. Quindi si fa un file CSS separato. Applicazioni web Applicazione = Programma applicativo. 10

11 Applicazione web = estensione di un programma applicativo che si utilizza attraverso il www. Quando un'applicazione deve essere usata da molte persone, la soluzione tradizionale era il mainframe: un grosso calcolatore centrale con grandi capacità di archiviazione e di connessione, scarse capacità di pura elaborazione, solide garanzie di resistenza ai guasti. Al mainframe ci si collegava attraverso linee telefoniche o rete dedicata usando un terminale. Un terminale è poco più di una tastiera + un monitor. Un mainframe, terminali. Quando i calcolatori piccoli (PC) sono diventati grandi, e capaci di elaborazione e collegamenti, si sono affiancati al calcolatore centrale nell'esecuzione delle applicazioni. Il calcolatore centrale è stato così sollevato da gran parte delle elaborazioni per conto degli utilizzatori (quelle necessarie p.es. a presentare visivamente le informazioni). Questo è il modello client-server. Con la diffusione e crescita del www, il ruolo di interfaccia utente è stato assunto da pagine web. Nascono così le web applications. Un server web, o più collegamenti. Esempi: Sistemi informativo pubblico (es. biblioteche) Commercio e servizi al pubblico in rete (e-commerce) Servizi della pubblica amministrazione in rete (e-government) Coordinamento sistemi informativi interni (aziendali, ecc: intranet) Accesso remoto a database Applicazioni distribuite Amministrazione remota di risorse Formazione a distanza Distribuzione multimedia/entertainment Distribuzione in tempo reale dell'informazione Pagine web dinamiche Il WWW è nato per pubblicare e distribuire informazioni agli utenti: I servizi sono essenzialmente a senso unico (broadcast = da un emittente a molti riceventi) I contenuti presentati sono statici (infatti si usa il concetto di pagina) 11

12 L uso del web come interfaccia utente di programmi applicativi richiede l introduzione di due componenti essenziali: interattività e dinamicità interattività = traffico a due sensi tra utente e server dinamicità = i contenuti vengono creati dinamicamente per un dato utente In altre parole, sono necessari strumenti per integrare l interfaccia web e gli strati sottostanti. INTERATTIVITÀ HTML consente di creare dei moduli (form) da compilare direttamente sul browser. Quando un utilizzatore preme il pulsante Invia (o Send o Submit o simili) presente in calce al modulo, i dati del modulo compilato vengono inviati al server. Questo è consentito dal protocollo HTTP, che prevede il comando POST per questo scopo. Il comando POST, che il browser dà automaticamente quando io premo Invia, serve per comunicare da client a server, anziché da server a client come nel normale uso. PAGINE ATTIVE Le pagine web attive sono pagine web che, oltre a possedere un contenuto, hanno anche un loro comportamento. In questo senso si può dire che una pagina attiva è un programma. Il principale ingrediente per passare da DOCUMENTO PASSIVO a DOCUMENTO ATTIVO si chiama web scripting 12

13 Scripting = programmazione. La differenza tra uno script e un programma è che lo script non viene compilato, non dà luogo a un file eseguibile, e non viene eseguito dal processore: uno script contiene comandi direttamente interpretati da un programma, che può essere: Il browser, dal lato client (client-side scripting) Il programma server, dal lato server (server-side scripting) CLIENT SIDE SCRIPTING Per esempio si usa il linguaggio Javascript. Serve a fare alcune cose direttamente sulla macchina dell'utilizzatore, in modo che non se ne debba occupare la macchina server. In tal modo la macchina server non è più necessario (come ai tempi dei mainframe) che sia in grado di eseguire i programmi di migliaia di utenti. Basta che sia in grado di fornirgli le informazioni richieste, e sarà il PC dell'utilizzatore a svolgere quelle funzioni. SERVER SIDE SCRIPTING Per esempio si usano i sistemi: ASP = Active server pages (usato dal server web prodotto da Microsoft, che si chiama IIS) JSP = Java server pages (usato dal server prodotto da Sun, che produce anche Java) PHP = PHP Hypertext Preprocessor (in origine in realtà era Personal Home Page; molto usato, soprattutto nel server web Apache, che è Open Source) ATTENZIONE: il linguaggio di programmazione Java non ha niente a che fare con il linguaggio di scripting Javascript Il Server side scripting viene usato per creare le pagine contenenti i dati specifici per un dato utilizzatore. Per esempio, quando chiedo il saldo del mio conto sul sito web della mia banca, questo viene scritto su una pagina web che viene creata al volo per me e mostrata solo a me. Esso consente di realizzare quindi LE FUNZIONI SPECIFICHE DELL'APPLICAZIONE (accesso ai dati, accettazione ordini, amministrazione utenti...) 13

14 Struttura di una applicazione web Si possono distinguere tre strati logici in cui suddividere un'applicazione qualsiasi (quindi anche i programmi che non son web applications). Gli strati logici sono: PRESENTAZIONE (= interfaccia) BUSINESS LOGIC (= le funzioni specifiche) MEMORIZZAZIONE DATI (= magazzino, utenti, ecc) Quindi è opportuno che la realizzazione fisica di un'applicazione (soprattutto una web application) segua questo schema logico. In altre parole, l'applicazione sarà fatta di tre programmi comunicanti fra di loro che realizzano queste tre funzioni logiche. Generalizzando il modello client-server si può immaginare il MODELLO MULTI-TIER. Nel nostro caso potremo adottare un modello 3-tier Tier 1 Client (thin o fat) con client side scripting. Un client è fat se fa tante cose, è thin se fa solo visualizzazione o poco più. Tier 2 Server, con server side scripting e component-based programming (ci sono dei programmi chiamati COMPONENTI che sono direttamente usabili da server side scripts). Esso, creando le pagine opportune, realizza le funzioni vere e proprie dell'applicazione. P.es. Mostra catalogo, Mostra stato dei miei ordini (carrello della spesa), Mostra disponibilità a magazzino, Esegui ordinazione, Esegui pagamento. Tier 3 Database, o in generale sistema informativo locale. Contiene tutti i dati permanenti che vanno archiviati. P.es. lo stato degli ordini di ogni cliente, lo stato del magazzino, il catalogo... 14