APPUNTI - TECNOLOGIE SOFTWARE PER IL WEB.pdf

PER ALTRI APPUNTI CONSULTARE IL SITO: https://luigi-v.github.io/Appunti_Universita/ Per altri appunti consultare il sito: https://luigi-v.github.io/Appunti_Universita/ By Vollono Luigi WWW = URL + HTTP + HTML, Tutti i seguenti elementi hanno un ruolo nella programmazione web: il protocollo HTTP, il web server, gli URL. URL Ogni risorsa sul web ha un indirizzo unico, nel formato URL (Uniform Resource Locators). Gli URL sono un particolare tipo di URI (Uniform Resource Identifier), stringa di caratteri, che forniscono un meccanismo per identificare una risorsa. Caratteristiche di un URI: È un concetto generale: non fa riferimento necessariamente a risorse accessibili tramite HTTP o ad entità disponibili in rete (quando lo fa, diventa URL). È un mapping concettuale ad una entità: non si riferisce necessariamente ad una particolare versione dell’entità esistente in un dato momento. Esistono due specializzazioni del concetto di URI: Uniform Resource Name (URN): identifica una risorsa per mezzo di un “nome” che deve essere unico e restare valido anche se la risorsa diventa non disponibile o cessa di esistere. Uniform Resource Locator (URL): identifica una risorsa per mezzo della locazione nella rete. Un URL tiene conto anche della modalità per accedere alla risorsa: Specifica il protocollo necessario per il trasferimento della risorsa stessa (non solo HTTP, quindi...) La prima parte corrisponde al protocollo utilizzato La parte rimanente del nome dipende dal protocollo Nella sua forma più comune (schema HTTP-like) la sintassi è ://[:@][:][/[?][#fragment]] : Descrive il protocollo da utilizzare per l'accesso al server (HTTP,HTTPS, FTP,...); :@: credenziali per l'autenticazione; : indirizzo server su cui risiede la risorsa. Può essere un indirizzo IP logico o fisico (www.unisa.it o 193.205.160.20); : definisce la porta da utilizzare (TCP protocollo di trasporto per http,80 default); : percorso (pathname) che identifica la risorsa nel file system del server(Home page della pagina se manca); : una stringa di caratteri che consente di passare al server uno o più parametri. Di solito ha questo formato: parametro1=valore&parametro2=valore2...; fragment: è una breve stringa di caratteri che si riferisce a una risorsa che è subordinata a un’altra risorsa primaria. HTTP HTTP è l’acronimo di HyperText Transfer Protocol, è il protocollo di livello applicativo utilizzato per trasferire le risorse Web (pagine o elementi di pagina) da server a client. Gestisce sia le richieste (URL) inviate al server che le risposte (pagine) inviate al client, è un protocollo stateless, ovvero né il server né il client mantengono informazioni relative ai messaggi scambiati. TERMINOLOGIA: Client: programma applicativo che stabilisce una connessione al fine di inviare delle richieste; Server: programma applicativo che accetta connessioni al fine di ricevere richieste ed inviare specifiche risposte con le risorse richieste; Connessione: circuito virtuale stabilito a livello di trasporto tra due applicazioni per fini di comunicazione; Messaggio: è l’unità base di comunicazione HTTP, è definita come una specifica sequenza di byte concettualmente atomica: Request: messaggio HTTP di richiesta (Client -> Server) Response: messaggio HTTP di risposta (Server -> Client) Resource: oggetto di tipo dato univocamente definito; URI: Uniform Resource Identifier – identificatore unico per una risorsa; Entity: rappresentazione di una risorsa, può essere incapsulata in un messaggio, tipicamente di risposta; Una risorsa può essere una pagina X, mentre una sua corrispondente entità è il testo contenuto in essa. Se cambia il testo la risorsa resta comunque la pagina X. TIPI DI CONNESSIONE Sia le richieste al server che le risposte ai client sono trasmesse usando stream TCP. Segue uno schema di questo tipo: server rimane in ascolto (server passivo), tipicamente sulla porta 80 client apre una connessione TCP sulla porta 80 server accetta la connessione (possibili più connessioni in contemporanea?) client manda una richiesta server invia la risposta e chiude la connessione Ipotizziamo di volere richiedere una pagina composta da un file HTML e 10 immagini JPEG: DIFFERENZE FRA HTTP V1.0 E V1.1 La stessa connessione HTTP può essere utilizzata per una serie di richieste e una serie corrispondente di risposte. La differenza principale tra HTTP 1.0 e 1.1 è la possibilità di specificare coppie multiple di richiesta e risposta nella stessa connessione. Le connessioni 1.0 vengono dette non persistenti mentre quelle 1.1 vengono definite persistenti. Il server lascia aperta la connessione TCP dopo aver spedito la risposta e può quindi ricevere le richieste successive sulla stessa connessione. Il server HTTP chiude la connessione quando viene specificato nell’header del messaggio(specificata dal client) oppure quando non è usata da un certo tempo (time out). HTTP V1.1 E PIPELINING Il pipelining consiste nell’invio di molteplici richieste da parte del client prima di terminare la ricezione delle risposte. Le risposte debbono però essere date nello stesso ordine delle richieste Metodi dei protocolli HTTP: Una richiesta è un nome di metodo http che indica al server il tipo di richiesta e come deve essere formato il resto del messaggio. GET: richiede una risorsa ad un server, il metodo più frequente è il click sui link su un documento o specificando un URL. La quantità di caratteri è limitata dalla lunghezza massima di un URL, e i dati inviati con GET vengono aggiunti all'URL nella barra del browser, e quindi i dati sono esposti. POST: è possibile richiedere qualcosa e allo stesso tempo inviare i dati del modulo al server, i dettagli della risorsa sono del body del messaggio e no nell’URL. Non ci sono limiti di lunghezza nei parametri. PUT: Chiede la memorizzazione sul server di una risorsa all’URL specificato, serve per trasmettere delle informazioni dal client al server. A differenza del POST però si ha la creazione di una risorsa. L’argomento del metodo PUT è la risorsa che ci si aspetta di ottenere facendo un GET con lo stesso nome in seguito. DELETE: Richiede la cancellazione della risorsa riferita dall’URL specificato. Sono normalmente disabilitati sui server pubblici(PUT & DELETE) HEAD: simile al GET, ma il server deve rispondere soltanto con gli header relativi, senza body. Viene usato per verificare un URL. OPTIONS: serve per richiedere informazioni sulle opzioni disponibili per la comunicazione. TRACE: invoca il loop-back remoto del messaggio di richiesta, ovvero consente al client di vedere che cosa è stato ricevuto dal server(diagnostica e testing). HTTP RESPONSE Descrive le informazioni indicate dal protocollo del browser, se la richiesta ha avuto successo e che tipo di contenuto è incluso nel body(es HTML). MIME MULTIPURPOSE INTERNET MAIL EXTENSIONS (MIME) Usato per specificare al browser la forma di un file inviato dal server, inserito all’inizio del documento. Specificando il tipo o sottotipo del file(es text, image…) CODICI DI STATO Lo status code è un numero di tre cifre, di cui la prima indica la classe della risposta e le altre due la risposta specifica: 1xx: Informational. Una risposta temporanea alla richiesta(es 100 Continue= se il client non ha ancora mandato il body); 2xx: Successful. Il server ha ricevuto la richiesta(200 Ok= GET con successo, 201 Created =PUT con successo); 3xx: Redirection. Il server ha ricevuto e capito la richiesta, ma sono necessarie altre azioni da parte del client(301 Moved permanently =URL non valida); 4xx: Client error. La richiesta del client non può essere soddisfatta per un errore da parte del client (400 Bad request=errore sintattico o richiesta non autorizzata). 5xx: Server error. La richiesta può anche essere corretta, ma il server non è in grado di soddisfare la richiesta per un problema(501 Not implemented =metodo non conosciuto dal server). COOKIE Parallelamente alle sequenze request/response, il protocollo prevede una struttura dati che si muove come un token, dal client al server e viceversa. I cookie possono essere generati sia dal client che dal server. Dopo la loro creazione vengono sempre passati ad ogni trasmissione di request e response. Hanno come scopo quello di fornire un supporto per il mantenimento di stato in un protocollo come HTTP, che è essenzialmente stateless. Un “cookie” può essere impostato dal lato-server e inviato ai client utilizzando sia le Servlet che le JSP. Le informazioni dei cookie sono memorizzate su disco del computer locale. STRUTTURA DEI COOKIE I cookie sono una collezione di stringhe: Key: identifica univocamente un cookie all’interno di un domain:path Value: valore associato al cookie (è una stringa di max 255 caratteri) Path: posizione nell’albero di un sito al quale è associato (di default /) Domain: dominio dove è stato generato Max-age: (opzionale) numero di secondi di vita Secure: (opzionale) non molto usato. Questi cookie vengono trasferiti se il protocollo è sicuro (HTTPS) Version: identifica la versione del protocollo di gestione dei cookie HEADER DEI COOKIE I cookies usano due header, uno per la risposta, ed uno per richieste successive: Set-Cookie: header della risposta, il client può memorizzarlo e rispedirlo alla prossima richiesta Cookie: header della richiesta. Il client decide se spedirlo sulla base del nome del documento, dell’indirizzo IP del server, e dell’età del cookie La classe Cookie Un cookie contiene un certo numero di informazioni, tra cui: una coppia nome/valore (Caratteri non utilizzabili: [ ] ( ) = , " / ? @ : ;) il dominio Internet dell’applicazione che ne fa uso path dell’applicazione una expiration date espressa in secondi (0 o numero negativo indica che il cookie non sarà memorizzato, 60*60*24 indica 24 ore) un valore booleano per definirne il livello di sicurezza https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie La classe Cookie modella il cookie HTTP: Si recuperano i cookie dalla request utilizzando il metodo getCookies() Si aggiungono cookie alla response utilizzando il metodo addCookie() Con il metodo setSecure(true) il client viene forzato a inviare il cookie solo su protocollo sicuro (HTTPS) Per eliminare un cookie, è sufficiente seguire i seguenti tre passaggi: Leggere un cookie già esistente e memorizzarlo Cookie[] cookies = null; nell'oggetto Cookie cookies = request.getCookies(); Imposta l'età dei cookie a zero utilizzando il metodo Cookie cookie = cookies[i] //i-esimo Cookie setMaxAge() cookie.setMaxAge(0); Aggiungi questo cookie nell'intestazione della risposta response.addCookie(cookie); HTML (HyperText Markup Language) - https://www.w3schools.com/html/html_intro.asp È un linguaggio di markup (‘contrassegno’ o ‘di marcatura’), che permette di indicare come disporre gli elementi all’interno di una pagina grazie ad appositi marcatori, detti tag (‘etichette’). HTML, serve a definire quali sono gli elementi in gioco, stabilire collegamenti (link) tra le pagine e l’importanza che hanno i testi, creare form per gli utenti, fissare titoli, caricare immagini, video, etc. Page Title My First Heading My first paragraph. La dichiarazione rappresenta il tipo di documento e aiuta i browser a visualizzare correttamente le pagine Web. L' elemento è l'elemento principale di una pagina HTML L' elemento contiene metadati sul documento L' elemento specifica un titolo per il documento L' elemento contiene il contenuto della pagina visibile L' elemento definisce una grande intestazione L' elemento definisce un paragrafo I tag HTML sono nomi di elementi circondati da parentesi angolari: I tag HTML vengono normalmente in coppie come e Il primo tag in una coppia è il tag iniziale, il secondo tag è il tag finale Il tag di chiusura è scritto come il tag di inizio, ma con una barra di avanzamento inserita prima del nome del tag Nello standard HTML5, il tag, il tag e il tag possono essere omessi. Caricare la pagina significa acquisirne il contenuto, più tecnicamente il browser richiede che venga effettuato un trasferimento di file. La pagina HTML è raggiungibile facendo riferimento ad un certo indirizzo, effettuando richieste: “locale”, quando i file si trovano sul device o sul computer su cui gira il browser. file:///D:/HTML.it/GUIDE/HTML/introduzione.html “remoto”, quando i file sono su un server da contattare tramite internet (o altra rete). http://www.html.it/guida-html/introduzione.html È importante minimizzare quanto più possibile i tempi di caricamento. Il rendering della pagina è la fase in cui il browser interpreta i documenti HTML e dispone sullo schermo gli elementi (testi, immagini, filmati) a seconda delle indicazioni contenute. Struttura della pagina HTML 1. Tutti i documenti HTML devono iniziare con una dichiarazione del tipo di documento: 2. Il documento HTML stesso inizia e finisce con 3. La parte visibile del documento HTML si trova tra e Elementi - https://www.w3schools.com/html/html_elements.asp Un elemento HTML è un contenitore e il suo contenuto è delimitato da tag di apertura e di chiusura. < tagname > Il contenuto va qui... < / tagname > Gli elementi HTML senza contenuto sono chiamati elementi vuoti, non hanno un tag di fine, come l'elemento. Elementi Block - https://www.w3schools.com/html/html_blocks.asp Un elemento a livello di blocco inizia sempre su una nuova riga e occupa l'intera larghezza disponibile (si estende da sinistra verso destra). Hello World https://www.w3schools.com/html/tryit.asp?filename=tryhtml_block_div L' elemento è spesso usato come contenitore per altri elementi HTML, non ha attributi obbligatori, ma style, classe id sono molto comuni se utilizzato insieme al CSS, creando diversi stili di contenuto. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_capitals Elementi Block in HTML: - Elementi inline - https://www.w3schools.com/html/html_blocks.asp Un elemento in linea non inizia su una nuova riga e occupa solo la larghezza necessaria. Hello World https://www.w3schools.com/html/tryit.asp?filename=tryhtml_inline_span L'elemento è spesso usato come contenitore per del testo, non ha attributi obbligatori, ma style, classe id sono comuni se utilizzato insieme al CSS, utilizzato per lo stile di parti del testo. My Important Heading https://www.w3schools.com/html/tryit.asp?filename=tryhtml_span_red Elementi Inline in HTML: Attributi - https://www.w3schools.com/html/html_attributes.asp Gli attributi forniscono informazioni aggiuntive sugli elementi HTML. Gli attributi forniscono informazioni aggiuntive su un elemento, e sono sempre specificati nel tag di inizio. Gli attributi di solito vengono in coppie nome / valore come: name = "value". L'attributo href (link o collegamenti) I collegamenti HTML sono definiti con il tag. L'indirizzo del link è specificato nell'attributo href. La sua sintassi è : link text Visit our HTML tutorial Un link locale (link allo stesso sito web) è specificato con un URL relativo (senza https: // www....). HTML Images Link: l'attributo di destinazione L'attributo target specifica dove aprire il documento collegato, e può avere uno dei seguenti valori: _blank - Apre il documento collegato in una nuova finestra o scheda _self - Apre il documento collegato nella stessa finestra / scheda di dove è stato fatto clic _parent - Apre il documento collegato nel frame principale _top - Apre il documento collegato nel corpo completo della finestra Framename - apre il documento collegato in una cornice con nome Visit W3Schools! https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_target Link - Immagine come collegamento https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_image Link Titoli L'attributo title specifica informazioni extra su un elemento. Le informazioni vengono spesso visualizzate come testo di descrizione quando il mouse si sposta sull'elemento. Visit our HTML Tutorial https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_title L'attributo src Le immagini HTML sono definite con il tag. Il nome file dell'immagine sorgente è specificato nell'attributo src. Le immagini in HTML hanno un set di attributi dimensione , che specifica la larghezza e l'altezza dell'immagine. L'attributo alt specifica un testo alternativo da utilizzare, quando un'immagine non può essere visualizzata Il valore dell'attributo può essere letto dagli screen reader. L'attributo di stile L'attributo style è usato per specificare lo stile di un elemento, come colore, carattere, dimensione, ecc. I am a paragraph https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_style L'attributo lang La lingua del documento può essere dichiarata nel tag, dichiarata con l'attributo lang. L'attributo titolo (suggerimento) Il valore dell'attributo titolo verrà visualizzato come suggerimento quando si passa il mouse sopra. This is a paragraph. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_title L'attributo di classe - https://www.w3schools.com/html/html_classes.asp L'attributo class viene utilizzato per definire stili uguali per elementi con lo stesso nome di classe. Pertanto, tutti gli elementi HTML con lo stesso attributo class avranno lo stesso formato e stile..cities { background-color: black; color: white; margin: 20px; padding: 20px; } London London is the capital of England. Paris Paris is the capital of France. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_capitals L'attributo class può essere utilizzato anche su elementi in linea..note { font-size: 120%; color: red; } My Important Heading This is some important text. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_span Nota: il nome della classe è case sensitive! Tag diversi possono condividere la stessa classe Tag diversi, come e , possono avere lo stesso nome di classe e quindi condividere lo stesso stile Paris Paris is the capital of France https://www.w3schools.com/html/tryit.asp?filename=tryhtml_classes_tags L'attributo id - https://www.w3schools.com/html/html_id.asp L'attributo id specifica un ID univoco per un elemento HTML (il valore deve essere univoco all'interno del documento HTML). Il valore id può essere utilizzato da CSS e JavaScript per eseguire determinate attività per un elemento univoco con il valore id specificato. #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } My Header https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_css Nota: il valore id è sensibile al maiuscolo / minuscolo. Differenza tra classe e ID Un elemento HTML può avere solo un ID univoco che appartiene a quel singolo elemento, mentre un nome di classe può essere utilizzato da più elementi. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_id_class Intestazioni - https://www.w3schools.com/html/html_headings.asp definisce la voce più importante. definisce l'intestazione meno importante. Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Il tag definisce un'interruzione tematica in una pagina HTML e viene spesso visualizzata come una riga orizzontale. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_hr Paragrafi - https://www.w3schools.com/html/html_paragraphs.asp Con HTML, non puoi modificare l'output aggiungendo spazi extra o linee extra nel tuo codice HTML. Il browser rimuoverà spazi aggiuntivi e linee extra quando viene visualizzata la pagina. This is a paragraph. This is another paragraph. L' elemento HTML definisce un'interruzione di riga. This isa paragraphwith line breaks. L' elemento HTML definisce il testo preformattato. Il testo all'interno di un elemento viene visualizzato in un font a larghezza fissa e conserva spazi e interruzioni di riga. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_pre Commenti - https://www.w3schools.com/html/html_comments.asp Puoi aggiungere commenti al tuo sorgente HTML usando la seguente sintassi: I commenti non vengono visualizzati dal browser, ma possono aiutare a documentare il codice sorgente. Stili - https://www.w3schools.com/html/html_styles.asp L'impostazione dello stile di un elemento HTML può essere eseguita con l'attributo style. L'attributo style HTML ha la seguente sintassi : Le proprietà sono: background-color definisce il colore di sfondo per un elemento HTML. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_background-color color definisce il colore del testo per un elemento HTML. This is a heading This is a paragraph. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_color font-family definisce il carattere da utilizzare per un elemento HTML. This is a heading This is a paragraph. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_font-family font-size definisce la dimensione del testo per un elemento HTML. This is a heading This is a paragraph. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_font-size text-align definisce l'allineamento orizzontale del testo per un elemento HTML. Centered Heading Centered paragraph. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_styles_text-align border definisce il bordo ed il duo colore. Hello World https://www.w3schools.com/html/tryit.asp?filename=tryhtml_color_border Formattazione del testo - https://www.w3schools.com/html/html_formatting.asp HTML usa elementi come e per la formattazione dell'output, come il testo in grassetto o in corsivo. L'elemento definisce il testo in grassetto , senza alcuna importanza aggiuntiva. This text is bold = This text is bold. L'elemento definisce il testo forte , con un'importanza "forte" semantica aggiunta. This text is strong = This text is strong. L'elemento definisce il testo in corsivo , senza alcuna importanza aggiuntiva. This text is italic = This text is italic. L'elemento definisce il testo enfatizzato , con un'importanza semantica aggiunta. This text is emphasized = This text is emphasized. L'elemento definisce un testo più piccolo. HTML Small Formatting = HTML Small Formatting L'elemento definisce segnato o evidenziato testo. HTML Marked Formatting = https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_mark L'elemento definisce cancellato (rimosso) testo. My favorite color is blue red. = My favorite color is blue red. L'elemento definisce sottolineato (aggiunto) testo. My favorite color is red. = My favorite color is red. L'elemento definisce il testo con indice. This is subscripted text. = This is subscripted text. L'elemento definisce il testo in apice. This is superscripted text. = Questo è un testo in apice. L'elemento definisce una breve citazione, tra virgolette. WWF's goal is to: Build a future = WWF's goal is to: “Build a future” L'elemento definisce una sezione citata da un'altra fonte. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_blockquote L'elemento definisce un'abbreviazione o un acronimo. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_abbr L'elemento è visualizzato in corsivo ed aggiungerà un'interruzione di riga prima e dopo. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_address L'elemento definisce il titolo di un'opera. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_cite Tabelle - https://www.w3schools.com/html/html_tables.asp Una tabella HTML è definita con il tag , e può avere diversi figli: , definisce la riga della tabella , definisce l’intestazione (header) della tabella, scritte di default in grassetto e centrate , definisce i dati o celle all’interno della tabella, possono contenere tutti i tipi di elementi HTML Firstname Lastname Jill Smith Eve Jackson https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table Celle che si estendono su molte colonne Per fare in modo che una cella si estenda su più di una colonna, usa l'attributo colspan. Name Telephone Bill Gates 55577854 55577855 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_colspan Celle che si estendono su più righe Per fare in modo che una cella si estenda su più di una riga, usa l'attributo rowspan. Name: Bill Gates Telephone: 55577854 55577855 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_rowspan Aggiunta di una didascalia Per aggiungere una didascalia a una tabella, usa il tag (immediatamente dopo il ). Monthly savings Month Savings January $100 February $50 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables2 Lista - https://www.w3schools.com/html/html_lists.asp Una lista non ordinata(unordered) inizia con il tag. Ogni elemento della lista inizia con il tag. Gli elementi dell'elenco saranno contrassegnati con piccoli cerchi neri per impostazione predefinita. Coffee Tea https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered Una lista ordinata(ordered) inizia con il tag. Ogni elemento della lista inizia con il tag. Coffee Tea https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered Una lista di descrizione è una lista di termini, con una descrizione di ciascun termine, può avere figli: , definisce la lista di descrizione , definisce il titolo dell’elemento elencato , definisce la descrizione dell’elemento elencato Coffee - black hot drink Milk - white cold drink https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_description Controllo della lista (ordered list) Per impostazione predefinita, un elenco ordinato inizierà il conteggio da 1. Se si desidera iniziare il conteggio da un numero specificato, è possibile utilizzare l'attributo start. Coffee Tea Milk https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_start Attributo Type (ordered list) L'attributo type del tag , definisce il tipo del marcatore dell'elemento della lista: Coffee Tea Milk Indicatore dell'elenco (unordered list) La proprietà CSS list-style-type viene utilizzata per definire lo stile del marcatore dell'elemento della lista. Coffee Tea Milk https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_disc Entità - https://www.w3schools.com/html/html_entities.asp I caratteri riservati in HTML devono essere sostituiti con entità carattere, anche quelli che non sono presenti sulla tastiera possono essere sostituiti da entità. Alcuni caratteri sono riservati in HTML, infatti se si utilizzano i segni meno di () nel testo, il browser potrebbe mescolarli con tag. Un'entità di carattere comune utilizzata in HTML è lo spazio senza interruzione: & nbsp; Uno spazio senza interruzione è uno spazio che non si spezzerà in una nuova linea. Nota: i nomi delle entità fanno distinzione tra maiuscole e minuscole. L'elemento - https://www.w3schools.com/html/html_forms.asp Definisce un modulo che viene utilizzato per raccogliere l'input dell'utente:. form elements. Un modulo HTML contiene elementi del modulo che sono diversi tipi di elementi di input, come campi di testo, caselle di controllo, pulsanti di opzione, pulsanti di invio e altro. L'elemento L'elemento può essere visualizzato in diversi modi, a seconda dell'attributo type: Definisce un campo di immissione del testo su una riga https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_text Definisce un pulsante di opzione (per selezionare una delle molte scelte) https://www.w3schools.com/html/html_forms.asp Definisce un pulsante di invio dei dati del modulo a un gestore di moduli Il form-handler è in genere una pagina del server con uno script per l'elaborazione dei dati di input. Il gestore di moduli è specificato nell'attributo di action del modulo. L'attributo action definisce l'azione da eseguire quando viene inviato il modulo. First name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit Se l'attributo action è omesso, l'azione viene impostata sulla pagina corrente. Se l'attributo type è omesso, il campo di input ottiene il tipo predefinito: "text". L'attributo target L'attributo target specifica se il risultato inviato verrà aperto in una nuova scheda del browser, in una cornice o nella finestra corrente. _blank - Apre il documento collegato in una nuova finestra o scheda _self (predefinito)- Apre il documento collegato nella stessa finestra / scheda di dove è stato fatto clic _parent - Apre il documento collegato nel frame principale _top - Apre il documento collegato nel corpo completo della finestra Framename - apre il documento collegato in una cornice con nome https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_target L'attributo method L'attributo method specifica il metodo HTTP ( GET o POST ) da utilizzare quando si inviano i dati del modulo. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_post Il metodo predefinito quando si inviano i dati del modulo è GET, i dati del modulo inviato saranno visibili nel campo dell'indirizzo della pagina: /action_page.php?firstname=Mickey&lastname=Mouse Aggiunge i dati di form nell'URL in coppie nome / valore La lunghezza di un URL è limitata (circa 3000 caratteri) Non utilizzare mai GET per inviare dati sensibili! (sarà visibile nell'URL) Utile per l'invio di moduli in cui un utente desidera aggiungere un segnalibro al risultato GET è migliore per i dati non protetti, come le stringhe di query in Google Utilizzare sempre POST se i dati del modulo contengono informazioni sensibili o personali. Il metodo POST non visualizza i dati del modulo inviato nel campo dell'indirizzo della pagina. Il POST non ha limiti di dimensioni e può essere utilizzato per inviare grandi quantità di dati. Non è possibile aggiungere ai segnalibri moduli con POST L'attributo name Ogni campo di input deve avere un attributo name da inviare, se è omesso, i dati di quel campo di input non verranno inviati affatto. Last name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit_id Raggruppamento dei dati del modulo con L'elemento viene utilizzato per raggruppare i dati correlati in un modulo. L'elemento definisce una didascalia per l'elemento. Personal information: First name: Last name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_legend L'elemento - https://www.w3schools.com/html/html_form_elements.asp L' elemento definisce un elenco a discesa. Volvo Saab https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select Gli elementi definiscono un'opzione che può essere selezionata. Per impostazione predefinita, il primo elemento nell'elenco a discesa è selezionato. Per definire un'opzione preselezionata, aggiungi l'attributo selected all'opzione. Fiat Valori visibili: Utilizza l'attributo size per specificare il numero di valori visibili. Volvo Saab Fiat https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_size Consenti selezioni multiple: Utilizzare l'attributo multiple per consentire all'utente di selezionare più di un valore. Volvo Saab Fiat https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select_multiple L'elemento L'elemento definisce un campo di input su più righe (un'area di testo). The cat was playing in the garden. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_textarea L'attributo rows specifica il numero visibile di linee in un'area di testo. L'attributo cols specifica la larghezza visibile di un'area di testo. Puoi anche definire la dimensione dell'area di testo usando i CSS L'elemento L' elemento definisce un pulsante cliccabile. Click Me! https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_button L'elemento - https://www.w3schools.com/tags/tag_datalist.asp L'elemento specifica un elenco di opzioni predefinite per un elemento. Gli utenti vedranno un elenco a discesa delle opzioni predefinite mentre inseriscono i dati. L'attributo list dell'elemento , deve fare riferimento all'attributo id dell'elemento. L'elemento L'elemento rappresenta il risultato di un calcolo (come quello eseguito da uno script). https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output Tipi di input - https://www.w3schools.com/html/html_form_input_types.asp , pulsante , casella di controllo , campi di input che dovrebbe contenere un colore , campi di input che dovrebbe contenere una data , specifica un campo di inserimento data e ora, senza fuso orario , campi di input che dovrebbe contenere un indirizzo e-mail , campo di file di selezione e un pulsante "Sfoglia" per il caricamento dei file , campo di input nascosto non viene mostrato all'utente, ma i dati vengono inviati quando il modulo viene inviato. , definisce un'immagine come pulsante di invio , permette all'utente di selezionare un mese e anno , definisce una numerico campo di immissione , campo password , pulsante di opzione(selezionare SOLO UNO) , definisce un controllo per immettere un numero il cui valore esatto non è importante (come un cursore). Range di default è 0 a 100, è possibile impostare restrizioni , pulsante di ripristino che ripristinerà tutti i valori del modulo ai valori predefiniti , si usa per i campi di ricerca , invio dei dati del modulo a un gestore di moduli , campi di input che dovrebbe contenere un numero di telefono , campo di immissione del testo su una riga , permette all'utente di selezionare un tempo , campi di input che dovrebbe contenere un indirizzo URL , permette all'utente di selezionare una settimana e anno Attributi di input - https://www.w3schools.com/html/html_form_attributes.asp L'attributo value specifica il valore iniziale per un campo di input. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_value L'attributo readonly L'attributo readonly specifica che il campo di input è di sola lettura (non può essere modificato). First name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_readonly L'attributo disabilitato L'attributo disabled specifica che il campo di input è disabilitato, è inutilizzabile e non selezionabile e il suo valore non verrà inviato quando si invia il modulo. First name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_disabled La dimensione Attributo L'attributo size specifica la dimensione (in caratteri) per il campo di input. First name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_size L'attributo maxlength specifica la lunghezza massima consentita per il campo di input First name: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_maxlength L'attributo segnaposto L' attributo placeholder specifica un suggerimento che descrive il valore atteso di un campo di input (un valore di esempio o una breve descrizione del formato) https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder Elemento - https://www.w3schools.com/tags/tag_meta.asp I metadati sono dati (informazioni) sui dati. Il tag fornisce metadati relativi al documento HTML che non verranno visualizzati nella pagina, ma saranno analizzabili dalla macchina. Gli elementi meta vengono in genere utilizzati per specificare la descrizione della pagina, le parole chiave, l'autore del documento, l'ultima modifica e altri metadati. I metadati possono essere utilizzati dai browser (come visualizzare il contenuto o la pagina di ricarica), i motori di ricerca (parole chiave) o altri servizi Web. Suggerimenti e note: i tag vanno sempre all'interno dell'elemento i metadati vengono sempre passati come coppie nome / valore. l'attributo content DEVE essere definito se il name o l'attributo http-equiv è definito. Impostazione di Viewport HTML5 ha introdotto un metodo per consentire ai web designer di assumere il controllo sulla vista, tramite il tag. Il viewport è l'area visibile dell'utente di una pagina Web, varia a seconda del dispositivo e sarà più piccolo su un telefono cellulare che sullo schermo di un computer. Un elemento viewport fornisce al browser le istruzioni su come controllare le dimensioni e il ridimensionamento della pagina. La parte width=device-width imposta la larghezza della pagina in modo che segua la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo). La parte initial-scale=1.0 imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser. Differenze tra HTML 4.01 e HTML5 L'attributo dello schema non è supportato in HTML5, quest’ultimo ha un nuovo attributo, charset, che semplifica la definizione del charset: HTML 4.01: HTML5: c:forEach - https://www.tutorialspoint.com/jsp/jstl_core_foreach_tag.htm Questi tag esistono come una buona alternativa all'inclusione di un ciclo Java for, while o do- while tramite uno scriptlet. Il tag è un tag comunemente usato perché itera su una collezione di oggetti. Il tag viene utilizzato per spezzare una stringa in token e scorrere tra i token. Attributo: - https://www.tutorialspoint.com/jsp/jstl_core_out_tag.htm Il tag mostra il risultato di un'espressione. Questo è quasi simile al modo in cui funziona. La differenza qui è che il tag ti permette di usare il più semplice "." notazione per accedere alle proprietà. Ad esempio, per accedere a customer.address.street, utilizzare il tag. Il tag può sfuggire automaticamente ai tag XML in modo che non vengano valutati come tag effettivi. Modello MVC Nel progetto di applicazioni Web in Java, due modelli di ampio uso e di riferimento: Model 1 è un pattern semplice in cui codice responsabile per presentazione contenuti è mescolato con logica di business, Suggerito solo per piccole applicazioni (sta diventando obsoleto nella pratica industriale) Model 2, Model-View-Controller (MVC) come design pattern più complesso e articolato che separa chiaramente il livello presentazione dei contenuti dalla logica utilizzata per manipolare e processare i contenuti stessi 1. Controller – definisce il comportamento dell’applicazione o fa dispatching di richieste utente e seleziona la view per la presentazione o interpreta l’input dell’utente e lo mappa su azioni che devono essere eseguite da model 2. Model – rappresenta livello dei dati, incluse operazioni per accesso e modifica. o possibilità per la view di interrogare stato di model o possibilità per il controller di accedere alle funzionalità incapsulate dal model 3. View – si occupa di visualizzare i contenuti del model. Accede ai dati tramite il model e specifica come dati debbano essere presentati o aggiorna la presentazione dei dati quando il model cambia o Fornisce i moduli per l’invio dell’input dell’utente verso il controller da parte del browser Esecuzione: In applicazioni Web conformi al Model 2, richieste del browser client vengono passate al Controller (implementato da una Servlet). Il Controller si occupa di eseguire la logica business necessaria per ottenere il contenuto da mostrare. Il Controller mette il contenuto nel Model (implementato con JavaBean) in un messaggio e decide a quale View (implementata da JSP) passare la richiesta. La View si occupa del rendering del contenuto. SERVLET Servlet job: Legge dati espliciti inviati dal client (Form data); Legge dati impliciti inviati dal client (Request Headers); Genera i risultati; Manda i dati espliciti al client (HTML); Manda i dati impliciti al client (Status Code e Response Headers). Una servlet è una classe java che si interfaccia con http. La Servlet crea pagine dinamiche, vengono presi informazioni da database o da altri server, essendo pagine che cambiano frequentemente. Apache/Tomcat è definito compiutamente come Web/Servlet Container. Le Servlet non hanno un “metodo main”, sono sotto il controllo di un'altra applicazione java chiamata Container (TomCat). Quando una server web application come Apache manda una richiesta alla servlet, il server non manda la richiesta alla servlet stessa ma ad un Container all’interno del quale è contenuta la Servlet. Il Container fornisce alla servlet request e response, chiama i metodi della servlet come doPost e doGet, controllando vita e morte della Servlet. Il Container automaticamente crea nuovi Thread java per ogni Request che riceve. La Servlet una classe Java che fornisce risposte a richieste HTTP. In termini più generali, è una classe che fornisce un servizio comunicando con il client mediante protocolli di tipo request/response, ad esempio HTTP. Le Servlet estendono le funzionalità di un Web Server generando contenuti dinamici, che vengono eseguite direttamente in un Web Container. In termini pratici sono classi che derivano dalla classe HttpServlet, che possono essere ridefinite, come il doGet() Le Servlet sono classi Java che elaborano richieste seguendo un protocollo condiviso. Le Servlet HTTP sono il tipo più comune di Servlet e possono processare richieste HTTP, producendo response http. Ogni Servlet, che comunicare coi client mediante protocollo http, deve derivare da: javax.servlet.http.HttpServlet. Un contatore del numero complessivo di utenti on-line di un sito Web, è opportuno collocarlo al livello application. Diverse servlet di una applicazione web possono condividere degli oggetti mediante ServletContext. Se ci sono piu utenti su macchine diverse che accedono alla stessa servlet, lo scope di applicazione permette loro di condividere lo stesso dato. Una variabile di istanza di una servlet viene condivisa da tutti gli utenti di quella servlet. Lo scope di request fa condividere uno stesso dato a più servlet o jsp a patto che queste stiano eseguendo all’interno della stessa request. REQUEST / RESPONSE All’arrivo di una richiesta HTTP il Servlet Container (Web Container) crea un oggetto request e un oggetto response e li passa alla Servlet. Gli oggetti di tipo Request rappresentano la chiamata al Server effettuata dal Client. Caratterizzati da varie informazioni. Viene creata dal Servlet container e passata alla Servlet come parametro ai metodi doGet() e doPost(). È un’istanza di una classe che implementa l’interfaccia HttpServletRequest: Chi ha effettuato la Request Quali parametri sono stati passati nella Request Quali header sono stati passati Gli oggetti di tipo Response rappresentano le informazioni restituite al client in risposta ad una Request: Status line (status code, status phrase) Header della risposta HTTP Response body: il contenuto (ad es. pagina HTML) CLASSI E INTERFACCE PER SERVLET HttpServlet fornisce una implementazione di service() che delega l’elaborazione della richiesta ai metodi: doGet(), doPost(), …. Ciclo di vita delle Servlet 1. INIT(): Il Container chiama la init() sull’istanza della servlet dopo che questa è stata creata, ma prima la servlet può servire altre richieste client. Se si vuole si può modificare il metodo(es. per connettersi al DB o ad altri oggetti). Può essere sovrascritta. 2. SERVICE(): Quando un client effettua la sua prima richiesta, il container crea un nuovo thread invocando il metodo service(), che guarda la richiesta(GET, POST, ecc..) ed invoca la doGet() e la doPost(). Il service() non deve essere mai sovrascritta. 3. DESTROY(): viene chiamato una sola volta quando la Servlet deve essere disattivata e serve per rilasciare le risorse acquisite. Modello “normale”: una sola istanza di Servlet e un thread assegnato ad ogni richiesta http per Servlet, anche se richieste per quella Servlet sono già in esecuzione. Nella modalità normale più thread condividono la stessa istanza di una Servlet e quindi si crea una situazione di concorrenza. MULTITHREADING: Il container esegue più thread di più processi richiesti da una singola servlet: DEPLOYMENT Un’applicazione Web deve essere installata e questo processo prende il nome di deployment che comprende: La definizione del runtime environment (ambiente di esecuzione) di una Web Application La mappatura delle URL sulle Servlet La definizione delle impostazioni di default di un’applicazione La configurazione delle caratteristiche di sicurezza dell’applicazione Web.xml È un file di configurazione (in formato XML) che contiene una serie di elementi descrittivi, descrive la struttura dell’applicazione Web. Contiene l’elenco delle Servlet e per ognuna di loro permette di definire una serie di parametri come coppie nome-valore: Nome Classe Java corrispondente Una serie di parametri di configurazione (coppie nome-valore, valori di inizializzazione) Contiene mappatura fra URL e Servlet che compongono l’applicazione (IMPORTANTE!) Mappatura Servlet-URL: Descrittore con mappatura: URL che viene mappato su myServlet: Servlet configuration: Una Servlet accede ai propri parametri di configurazione mediante l’interfaccia ServletConfig. Ci sono 2 modi per accedere a oggetti di questo tipo: 1. Il parametro di tipo ServletConfig passato al metodo init() 2. il metodo getServletConfig() della Servlet, che può essere invocato in qualunque momento ServletConfig espone un metodo per ottenere il valore di un parametro in base al nome: String getInitParameter(String parName): Pagine di errore: Pagine di eccezione: Servlet context Un Servlet Context è costituito da un gruppo di Servlet, pagine JSP o altre pagine web che condividono tra di loro risorse e dati. Ogni Servlet Context corrisponde ad una applicazione web, e viene associato ad un unico path di prefisso denominato context path. Si può ottenere un’istanza di tipo ServletContext all’interno della Servlet utilizzando il metodo getServletContext() consentendo l’accesso ai parametri di inizializzazione e alle risorse statiche della Web Application mediante il metodo InputStream getResourceAsStream(String path). IMPORTANTE: Servlet context viene condiviso tra tutti gli utenti, le richieste e le Servlet facenti parte della stessa Web application. Parametri di inizializzazione del contesto definiti all’interno di elementi di tipo context-param in web.xml: Sono accessibili a tutte le Servlet della Web application: Gli attributi di contesto sono accessibili a tutte le Servlet e funzionano come variabili “globali”. Vengono gestiti a runtime e possono essere creati, scritti e letti dalle Servlet. Gestione dello stato (di sessione) HTTP è un protocollo stateless: non fornisce in modo nativo meccanismi per il mantenimento dello stato tra diverse richieste provenienti dallo stesso client. Le applicazioni Web hanno spesso bisogno di stato. Sono state definite due tecniche per mantenere traccia delle informazioni di stato: uso dei cookie: meccanismo di basso livello uso della sessione (session tracking): meccanismo di alto livello La sessione rappresenta un’utile astrazione ed essa stessa può far ricorso a tre meccanismi base di implementazione: 1. Cookie 2. URL rewriting 3. Hidden form fields SESSIONE La sessione Web è un’entità gestita dal Web Container, ed è condivisa fra tutte le richieste provenienti dallo stesso client: consente di mantenere, quindi, informazioni di stato (di sessione). Può contenere dati di varia natura ed è identificata in modo univoco da una session ID. Questo è creato dall’applicazione (servlets) e dovrà essere sempre presente in ogni richiesta che fa l’utente, affinché l’utente possa essere riconosciuto dalle servlets. Come faccio io programmatore Web a fare in modo che il client mi invii il session Id che io gli ho assegnato ogni qualvolta che mi manda una richiesta se i cookie sono disattivati? 1. URL-Rewriting Per ogni URL che il server restituisce al client, aggiunge alcuni dati aggiuntivi alla fine di ciascun URL che identifica la sessione. Il server associa quell'identificatore con i dati che ha archiviato su quella sessione. Es: http: //host/path/file.html; jsessionid = 1234 Vantaggio: Funziona anche se i cookie sono disabilitati o non supportati Svantaggi: Il programmatore web deve codificare tutti gli URL che si riferiscono al tuo sito Tutte le pagine devono essere generate dinamicamente Non riesce a trovare segnalibri e collegamenti da altri siti 2. Hidden form fields

APPUNTI - TECNOLOGIE SOFTWARE PER IL WEB.pdf

Document Details

Tags

Related

Full Transcript

Upgrade to continue