Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1)

Transcript

1 Cenni storici sul web (Internet) Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Web significa letteralmente ragnatela Avviato nel 1989 (Tim Berners-Lee) come sistema di trasporto di documentazione per i progetti di ricerca del CERN È un sistema per la diffusione a livello mondiale di informazione e documentazione Nato per scopi di ricerca (ma anche militari) si sviluppa soprattutto in campo commerciale e di entertainment N.B: alcune slide sono tratte da una presentazione della prof.ssa Mongiello Corso di Laurea in Ingegneria Informatica A.A Semestre Corso (A-M) Prof. Giovanni Pascoschi 2 Caratteristiche principali del web Sistemi ipertestuali 1.Sistema informativo ipermediale distribuito 2. Funzionamento architettura client-server protocollo HTTP Un documento ipertestuale è un documento con le seguenti caratteristiche: l organizzazione logica non segue regole di rigida sequenzialità la consultazione richiede di utilizzare indici e dizionari, e di ricorrere a libere associazioni per trovare l informazione desiderata 3. Informazioni sono accessibili tramite navigazione ipertestuale mediante operazioni di ricerca mirate 4. Linguaggio HTML per la descrizione di documenti 3 4

2 L origine dell ipertesto Elementi di un ipertesto anni 40 nasce il concetto di ipertesto anni 60 viene coniata la parola ipertesto anni 70 nascono i primi sistemi reali in ambito universitario anni 80 sviluppo e commercializzazione Un documento ipertestuale è un insieme di frammenti nodi collegati per mezzo di riferimenti espliciti o impliciti (link) che possono essere utilizzati per esplorare in modo non sequenziale il documento Un nodo può essere una struttura logica Un link può avere inizio in un nodo e condurre ad un altro nodo dello stesso documento o ad un altro documento 5 6 Sistemi multimediali Tipi di documenti Un sistema multimediale è un sistema di memorizzazione, integrazione e gestione di informazioni eterogenee e complesse Lo scopo è quello di rappresentare il mondo reale attraverso numerose forme in modo che l informazione venga fruita in modo più efficace: Testo, grafica Audio Animazioni, immagini fisse o in movimento Documento ipertestuale Insieme di informazioni testuali e grafiche esplorabili attraverso collegamenti sequenziali Documento multimediale Insieme di informazioni trasmesse da uno o più media in unione a testo e grafica statica la cui presentazione occupa spazio e tempo Documento ipermediale Documento multimediale con collegamenti ipertestuali Ipertesti + multimedia= ipermedia 7 8

3 Gli standard per la descrizione dei documenti Standard SGML SGML (Standard Generalized Markup Language) è uno standard per la gestione delle informazioni adottato dall ISO nel Gli standard definiscono formati di interscambio e protocolli di trasmissione di informazioni e documentazione SGML: Standard Generalized Markup Language HTML: Hyper Text Markup Language XML: extensible Markup Language La finalità di SGML è di consentire la preparazione di documenti indipendenti dalla piattaforma e dalle applicazioni, mantenendovi al contempo informazioni di struttura relative al formato, all indice analitico e alle informazioni collegate. SGML distingue il contenuto (testuale o multimediale) di un documento dalle informazioni riguardanti il contenuto stesso, che non vengono visualizzate. Document Type Definition (regole di struttura): Descrive la struttura, i possibili contenuti e il tipo di descrizione validi per un particolare tipo di documento Markup Lo specifico linguaggio utilizzato per descrivere in concreto il singolo documento nell ambito di un certo tipo 9 10 Architettura del web Rappresentazione e identificazione delle informazioni Architettura client-server la comunicazione ha luogo tra un programma client ed un server per estensione viene detto client il computer su cui viene eseguito il programma client e server il computer su cui gira il programma che soddisfa la richiesta server. Server gestisce la distribuzione dei documenti Client invia richieste di documenti, riceve documenti, attiva programmi di visualizzazione,ecc Un insieme di protocolli per la trasmissione di documenti, file, posta,ecc. Protocollo http: HyperText Transfer Protocol Il protocollo è stato concepito solo per il download di documenti Recentemente con opportune estensioni del server è possibile creare dinamicamente il contenuto del documento da inviare al browser a seguito di una richiesta La stessa dinamicità, in termini di contenuti è stata ottenuta dal lato client utilizzando script in linguaggi come CGI (Common Gateway Interface), Visual Basic Script (VBscript) o Javascript Informazioni complesse ed eterogenee Documenti Testo, immagini Temporizzate audio, video Localizzate attraverso l Uniform Resource Locator (URL) 11 12

4 Identificazione dei documenti Gestione dei documenti HTML WWW identifica le informazioni sulla rete attraverso una notazione unica detta Uniform Resource Locator (URL), composta di più parti: La prima parte identifica il metodo di accesso : http (documenti ipertestuali) ftp trasferimento file La seconda parte rappresenta il nome del calcolatore su cui risiede l informazione (p.e. = nome del dominio) Le altre parti eventuali identificano il documento o le funzioni di elaborazione e i loro parametri Dopo essere stata identificata, l informazione viene reperita o elaborata in funzione del metodo di accesso e di ulteriori specifiche associate al suo nome (documenti, testo, immagini, form interattive,ecc.) Il linguaggio HTML descrive il contenuto di un documento attraverso la sua struttura grafica descritta nelle componenti essenziali Titoli e intestazioni Liste di paragrafi Tabelle Immagini Hyperlink L aspetto grafico è definito dal browser attraverso impostazioni standard con limitate possibilità di controllo L uso dei marcatori è indipendente dal contenuto, libero e finalizzato all ottenimento di un risultato grafico accettabile e comprensibile Documenti html interattivi Gestione evoluta di informazioni sul web:xml L interazione è ottenuta mediante form, documenti che contengono campi in cui si possono introdurre informazioni libere o scelte da liste Il browser compone la richiesta estraendo le informazioni variabili che vengono inviate al server per l interpretazione da parte di un programma HTML non consente di definire in modo certo e coerente il significato dei documenti I marcatori definiscono strutture generiche indipendenti dal significato delle parti che compongono il documento Non è definito uno schema per documenti omogenei o simili Non è possibile estendere o specializzare l insieme dei marcatori per dichiarare proprietà semantiche Non consente di formulare interrogazioni per ricercare documenti in base a: Proprietà strutturali Significato del testo ottenuto Il linguaggio XML supera le limitazioni di HTML e si propone quale formalismo per la definizione e gestione di informazioni su WWW 15 16

5 Caratteristiche fondamentali HTML Software per la creazione di documenti HTML Cosa non è il linguaggio HTML non è un linguaggio di programmazione Linguaggio di markup per la formattazione di documenti ipertestuali: Consente di individuare elementi in una pagina La pagine viene visualizzata utilizzando un browser (Internet Explorer, Mozilla, Opera, Chrome,ecc) Caratteristica: Separazione nel documento tra struttura e presentazione I documenti html sono contenuti in file con estensione.htm o.html Comuni editor di testo: Word, Wordpad, ecc Esistono numerosi ambienti di sviluppo di siti html (Dreamweaver, Microsoft Visual Developer, Frontpage, ecc): forniscono un interfaccia visuale per la preparazione di documenti HTML Elementi principali di una pagina HTML Tag fondamentali di HTML Un documento HTML consiste in testo e comandi o tag. Questi ultimi sono parole o frasi racchiuse tra i simboli < e >, detti marcatori di struttura. I tag definiscono la struttura logica del documento, identificando elementi quali titoli, intestazioni, paragrafi ed elenchi. Essi possono essere scritti indifferentemente in lettere maiuscole o minuscole. Un tag facoltativo, che se usato deve essere il primo di un documento HTML, è <!DOCTYPE>. Esso dice al browser quale specifica HTML (o XHTML) il documento usa <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN > 19 20

6 Tag fondamentali di HTML Struttura di un documento HTML Un documento HTML deve invece contenere obbligatoriamente i tag indicati di seguito, nell ordine con cui sono scritti, indicando varie sezioni <html> <head> </head> <body> </body> </html> Un documento HTML è costituito da una intestazione e da un corpo Tag delimitano l intestazione <HEAD> </HEAD> Tag utilizzabili nell header: <title> </title> (titolo della pagina che comparirà sulla barra di stato) Tag <meta> (identifica i metatag) Tag che delimitano il corpo <BODY> </BODY> Gli attributi consentono di impostare un colore di sfondo o un immagine di sfondo Esempio Meta tag (1) <html> <HEAD> <title> La mia prima pagina web </title> </HEAD> <BODY> Questa e una prova </BODY> </html> prova con Notepad I motori di ricerca individuano siti che contengono informazioni di interesse catalogano i siti web seguendo i link da una pagina all altra salvando le informazioni che consentono di identificare e classificare le pagine visitate i tag <meta> vengono utilizzati dai motori di ricerca per catalogare le pagine di un sito elementi non visibili all utente inseriti nella testata del documento HTML fra i tag <head> e <\head> attributi obbligatori: Name identifica il tipo di elemento meta, p.e.: keywords description Content: fornisce al motore di ricerca informazioni per catalogare il documento considerato 23 24

7 Meta tag (2) Meta tag (3) Un elemento meta che definisce una descrizione di una pagina potrebbe essere: <meta name=description content= Corso Fondamenti Informatica II"> Un elemento meta che definisce i termini chiave di una pagina potrebbe essere: <meta name=keywords content= programmazione, C++, OOPP"> Scopo degli attributi name e content è quello di descrivere il contenuto di una pagina Tuttavia, dato che molti Web master usano i tag meta a fini di spamming, per esempio ripetendo i termini chiave per fare attribuire alle pagine un punteggio più elevato nel ranking, alcuni motori di ricerca hanno smesso completamente di usarli Formato della pagina (1) Formato della pagina (2) il colore dello sfondo è di default bianco e quello del testo è nero, valori preimpostati dai browser. Per modificare il colore dello sfondo, si fa seguire al tag <body> l attributo bgcolor, seguito a sua volta da un valore descrittivo, che determina il colore dello sfondo delle pagine Web. Esempio: Per cambiare colore allo sfondo: <body bgcolor= green > per i colori sono possibili i seguenti 16 valori standard: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow Essi corrispondono all'insieme standard VGA sui PC. e possibile sostituire al nome in inglese un valore esadecimale compreso tra "#000000" (ogni coppia di digit un colore red, green, blue) e "#FFFFFF Per esempio, per il colore rosso (red) si può scrivere anche : <body bgcolor="#ff0000"> 27 28

8 Formato della pagina (3) Formato della pagina (4) anziché assegnare a una pagina un colore di sfondo, le si può assegnare come sfondo una immagine, facendo seguire al tag <body> l attributo background, al quale si assegna come valore un file di immagine. Esempio: <body background= tramonto.bmp > il file contenente l immagine si puo trovare anche in una diversa cartella, o addirittura in un documento presente su un altro host. Se, per esempio, il documento ha come indirizzo Web completo (o URL) esso può essere inserito con il seguente tag: <img src = " Il colore può essere assegnato anche a tutto il testo, tramite l'attributo text: <body text="red"> Inoltre, all'interno del documento è possibile marcare parte del testo in colori differenti da quello impostato con text. Ciò si ottiene usando il tag <font> seguito dall attributo color, cui si assegna uno dei valori di colore visti in precedenza Esempio: Questa e la mia <font color= yellow > prima </font> pagina web Formato della pagina (5) Formato della pagina (6) Il tag <font> consente anche di selezionare un repertorio di caratteri (font) e impostarne la dimensione (oltre che il colore). Per selezionare il font si usa l attributo face, che accetta una lista di font in ordine di preferenza Esempio: <font face= Garamond, Arial > Testo in Garamond </font> All'interno di un documento HTML possono essere inclusi dei commenti, facendoli precedere da e concludere da Esempio: <!--questo è un commento--> <!-- --> 31 32

9 Headers Formattazione dei paragrafi Consentono di definire formattazioni variabili nella dimensione del testo Forniscono sei livelli distinti: da H1 (piu grande) ad H6 (piu piccolo) <H1> </H1> <H2> </H2>. <H6> </H6> Generalmente utilizzabili per individuare i titoli <P> e </P> delimitano un paragrafo <hr> inserisce una linea Attributi Width, size, align, noshade <br> inserisce una riga vuota (va a capo) Formati utilizzabili Grassetto <strong> </strong> Corsivo <EM> </EM> Sottolineato <U> </U> Allineamento usando i tag: Centrato <center></center> A sinistra <left> </left> A destra <right></right> Oppure utilizzando l attributo align all interno di un tag paragrafo o header Font Link ipertestuali (1) Delimitato dai tag <font> </font> Attributi color = nome o codice colore size = ± x face = stile del font Tag di formattazione corsivo, grassetto, sottolineato Caratteri speciali pedice <Sub> </sub> apice  barrato <del> </del> La principale utilità delle pagine Web è costituita dalla possibilità di definire dei collegamenti (link) ipertestuali da un punto a un altro dello stesso oppure di un altro documento, e di attivare tali link con un click del mouse. I riferimenti ipertestuali sono inseriti in un documento HTML mediante il tag <A Href> </A> A significa Anchor Href specifica l indirizzo a cui è collegato il link 35 36

10 Link ipertestuali (2) Link ipertestuali (3) Per definire un link a un altro punto del documento corrente, si eseguono i seguenti passaggi: 1. nel punto di partenza del link si scrive una linea del tipo: Seleziona <a href= #puntolink >Capitolo</a> Il cancelletto (#) indica che si tratta di un link interno allo stesso documento Il testo racchiuso tra i tag <a> e </a> viene usato come denominazione del link, e di solito viene visualizzato in colore blu e sottolineato (il valore puntolink può essere sostituito da qualsiasi altra stringa di caratteri) 2. nel punto di arrivo del link si scrive un tag del tipo: Anziché da un testo, la denominazione del link può essere costituita da una immagine, se si inserisce il suo riferimento tra i tag <a> e </a> : <a href= capitolo.htm > <Img src= libro.gif ></a> <a name= puntolink > Link ipertestuali (4) Link ipertestuali (5) per definire un link a un altro documento, per esempio al file peter.html, si scrive una linea del tipo: Vai al<a href= paragraf.html >paragrafo libreria STL</a> è possibile inserire un punto di arrivo in un documento esterno: il link può avere come punto di arrivo anche una pagina presente su un altro host di Internet, indicandone l indirizzo Web completo. Per esempio, per collegarsi a un documento di indirizzo si scriverà: Vai al sito del Corso <a href= > </a> Vai al<a href= paragraf.html#link vector >paragrafo libreria STL:vector</a> 39 40

11 Link ipertestuali (6) Liste (1) e possibile anche inviare direttamente una messaggio di posta elettronica da una pagina Web: inviate un a <a href="mailto:info@primeeng.it"> prof. Pascoschi</a> l attivazione del link richiama la finestra di dialogo di posta elettronica del browser o (in sua assenza) il programma di posta installato nel sistema. Una lista non ordinata (elenco puntato non ordinato) è individuata dal tag <UL> </UL> Crea un elenco in cui ogni item è puntato <LI> </LI> denota ciascun elemento della lista esempio: <ul> <li> Primo item <li> Secondo item </ul> <ul> accetta l attributo type, che definisce il simbolo visualizzato all inizio di ogni riga dell elenco. I valori sono: disc (default) circle square Liste (2) Tabella (1) Una lista ordinata (elenco numerato) è individuata dal tag <OL> </OL> Crea un elenco in cui ogni item è numerato progressivamente <LI> </LI> denota ciascun elemento della lista esempio: <ol> <li> Primo item <li> Secondo item </ol> La tabella è delimitata dai tag <table> </table> Gli attributi che possono essere applicati sono Border, align (left/right/center), width caption (titolo principale della tabella) La tabella è organizzata in celle individuabili in righe mediante i tag <tr> </tr> Il contenuto delle celle può essere o un table header <th> </th> o table body <td> </td> Per annidare più liste è sufficiente inserire più tag di inizio (fine) lista 43 44

12 Tabella (2) Frame (1) esempio: <table> <caption>risultati dell esame</caption> <tr><th>studente</th><th>matricola</th><th>voto</th></tr> <tr><td>mario Bianchi</td><td>1</td>><td>28</td></tr> <tr><td>carlo Rossi</td><td>2</td>><td>29</td></tr> <tr><td>roberto Verdi</td><td>3</td>><td>30</td></tr> </table> Risultati dell esame Studente Matricola Voto Mario Bianchi 1 28 Carlo Rossi 2 29 Roberto Verdi 3 30 i frame consentono di visualizzare più di un documento HTML nella stessa finestra del browser ogni documento visualizzato è chiamato frame, e ciascuno di essi è indipendente dagli altri i frame sono utili in quanto evitano di caricare le stesse immagini, e mantengono ordinata la struttura e i contenuti di un sito Frame (2) Frame (3) I tag che implementano i frame sono: <frameset> <frame> <noframes> (per i browser che non usano i frame) Il tag <frameset> definisce come dividere la finestra in più frame, impostando un gruppo di righe o di colonne. Esso sostituisce il tag <body>, e viene chiuso dal tag </frameset> Ad esempio, la suddivisione della pagina Web precedente si può ottenere con un tag del tipo: <frameset cols = 30%,70%"> i valori delle colonne (o delle righe) indicano la quantità di area di schermo che sarà occupata da ciascuna colonna o riga l esempio precedente imposta un frame con due colonne, la prima al 30% della larghezza della finestra del browser, la seconda al 70%. Dopo avere diviso la pagina in due o più frame, è necessario riempire ciascuno di essi con un file avente per estensione.html. Ciascuno di tali file viene richiamato, all interno del file principale, da un tag <frame> (privo del tag di chiusura) esempio: <frame src= sinistra.html"> <frame src= destra.html"> esempio completo: <html> <head></head> <frameset cols= 30%,70%"> <frame src= sinistra.html"> <frame src= destra.html"> </frameset> </html> 47 48

13 Frame (4) Form (introduzione) esempio: <frameset cols="120,*"> (120 pixel a sinistra, tutto il resto a destra) <frame name="sinistro" src="sx.html"> <frameset rows="20%,60%,20%"> (suddivisione per righe) <frame name="alto" src="top.html"> <frame name="centrale" src="central.html"> <frame name="basso" src="basso.html"> </frameset> </frameset> gli elementi HTML visti sinora permettono a un utente di visualizzare i contenuti di un sito, ma non di interagire con esso, il che rende il rapporto utente/pagina unidirezionale e statico i form (moduli) consentono all'utente di interagire con il sito spedendo un proprio commento, avanzando richieste senza scrivere espressamente una , firmando guest book, rispondendo a sondaggi, effettuando acquisti on-line su siti e-commerce alto ciò rende il rapporto bidirezionale, tramite l utilizzo di programmi residenti su server ( necessità di utilizzo dei linguaggi Script) sinistro centrale basso Script Riepilogo della lezione Per migliorare le funzionalità delle pagine web è possibile introdurre script all interno dell HTML Il tag <Script> indica al browser che il testo che segue è parte di uno script Per specificare il linguaggio utilizzato è possibile usare l attributo Language (p.e. Language = javascript ) Elementi di programmazione web e linguaggi di script (1) Il WEB Linguaggio html Principali TAG del linguaggio html <\Script> indica la fine dello script Il codice dello script è delimitato dai tag <Script> e <\Script> 51 52

14 Fine della lezione Analisi di siti web Analisi di un sito web (Tesina esame di Maturita ) Domande? Analisi di un sito commerciale Esercizi Esercizio n.1 : Creare una pagina web con argomento se stessi Esercizio n.2 : Creare un minisito web che descrive i principali contenuti del Corso di Fondamenti di Informatica II Esercizio n.3 : Creare un minisito web che descrive il progetto d anno che si sta realizzando 55