Applicazioni web: principali tecnologie

1

Principali tecnologie per costruire applicazioni web:

Applicazioni web: principali tecnologie

Client-side• Javascript

Server-side• PHP

rispetto alle distinzioni viste prima, queste soluzioni:

• Javascript(e jQuery)

PHP• JSP e Java ServletInoltre:ASP.NET Ruby, Python e Perl (Javascript)

Approcci ibridi• AJAX (jQuery)

a.a. 2018/19 Tecnologie Web 1

p p , q utilizzano linguaggi di programmazione alcune sono tecnologie client-side (il codice è elaborato sul

client, dal browser), altre sono server-side (il codice è elaborato sul server), altre sono miste

Linguaggi di programmazione - I

Programma = insieme di istruzioniLinguaggi di programmazione = linguaggi per scrivereprogrammi (istruzioni)Linguaggio:Linguaggio:• lessico: insieme di termini ("parole") del linguaggio• sintassi: definita da una grammatica che fornisce le regole di

composizione dei termini in frasi ben formate del linguaggio• semantica: definisce il significato delle frasi ben formate del

linguaggio

Analizzatore sintattico (parser): analizza frasi e decide se sono frasi ben formate del linguaggio o no


sono frasi ben formate del linguaggio o noLinguaggio di programmazione:• lessico = "keywords" del linguaggio• frasi ben formate = istruzioni (programmi)• semantica = esecuzione del programma

2

Linguaggi di programmazione - II

Linguaggi "ad alto livello" = linguaggi di programmazione facilmente comprensibili da un essere umano; esempi: C, C++, C#, Java, Python, Ruby, Javascript, …

Esempio:istruzioniscritte in Java

public String stampaIscritti() {String risultato = "";int n=0;while (n<listaStudenti.size()) {Studente iscritto = lista.get(n);risultato += n+1 + iscritto.getNome();n++;

}


}return ris;

}

Linguaggi di programmazione - III

Linguaggio macchina ("a basso livello") = linguaggio per esprimere le istruzioni in modo comprensibile alla macchina (computer)

Esempio[approssimativo]:istruzioniscritte in linguaggiomacchina

0100010 0011 010101111001 0101 000011101010 00001 01 010 10110010 101000011100010 0011 010101111001 010100 0000111 10 0011 010100000001 0101111 00001110100010 0011 01010111100111 01010 0001110 0011 010101111000001 0101 0000111 00010 011 0000111001 01010111 00111 000101010 0011 1000101111001 0101 000011100100 0011 011101011 0000 1100 00001100


NB: ogni "macchina" ha un suo specifico linguaggio macchina"macchina" =[approssimativamente] processore/sistema_operativo

010010 0111011 01100 010101001 0000111

3

Linguaggi di programmazione - IV

Il programmatore scrive il programma sorgente utilizzando un linguaggio"ad alto livello"

occorre tradurre le istruzioni nel programma sorgente in istruzioni in linguaggio macchina, eseguibili dal computer

Due tecniche per effettuare questa traduzione:


• Compilazione traduzione effettuata da strumenti chiamati compilatori

• Interpretazione traduzione effettuata da strumenti chiamati interpreti

Linguaggi di programmazione - V

Compilatore traduttore di testi…Compilare un programma:• tradurre il programma sorgente P nel linguaggio macchina

d ll hi M P ( ibil M)della macchina M Pm (programma eseguibile su M) > compila file_sorgente.src file_eseguibile.exe

• eseguire Pm sulla macchina M> esegui file_eseguibile.exe

Traduzione eseguita da un compilatore (specifico per M)

Pro: efficiente (esecuzione veloce)


efficiente (esecuzione veloce)Contro:

poco flessibile (per eseguire il programma su macchine diverse è necessario ri-compilare i sorgenti)

4

Linguaggi di programmazione - VI

GESTOREAPPELLI

GESTOREUTENTI

UI

import java.util.*public class GestApp {List appelli;…public void print() {

…}UI }

…}

File GestApp.src(sorgente)

COMPILATORE


File GestApp.exe

Linguaggi di programmazione - VII

Interprete traduttore simultaneo…Interpretare un programma:• richiedere l’esecuzione del programma sorgente P sulla

macchina Mmacchina M> interpreta&esegui file_sorgente.src

• ogni istruzione di P viene tradotta in un insieme di istruzioni nel linguaggio macchina di M Im che viene immediatamente eseguito sulla macchina M

Traduzione eseguita da un interprete (specifico per M)

Pro:


Pro: flessibile (il sorgente è direttamente eseguibile su macchine diverse, dato l'interprete)

Contro: poco efficiente (esecuzione lenta)

5

Linguaggi di programmazione - VIII

GESTOREAPPELLI

GESTOREUTENTI


…}APPELLI

UI }…}


INTERPRETE


Linguaggi di programmazione - IXApproccio misto (per es. Java, Python):• tradurre il programma sorgente P in un linguaggio

intermedio (bytecode), indipendente dalla macchina Pb> compila file_sorgente.src file_intermedio.obj

• Interpretare ed eseguire Pb> interpreta&esegui file_intermedio.obj

Il primo passo viene eseguito da un compilatore (generico,indipendente dalla macchina)

Il secondo da un interprete (specifico per M), chiamato generalmente Virtual Machine


L'approccio misto somma i vantaggi dei due approcci:• è efficiente (il linguaggio intermedio è "molto vicino" al

linguaggio macchina e la sua interpretazione è veloce)• è flessibile (perché posso eseguire il programma compilato su

macchine diverse)

6

Linguaggi di programmazione - X

GESTOREAPPELLI

GESTOREUTENTI

UI


…}UI }

…}


mainList GestApp printgetAppelli

COMPILATORE


getAppelli...

File GestApp.obj(bytecode)

INTERPRETE

Linguaggi di programmazione - XI

NBLa scelta tra compilazione e interpretazione dipende dal linguaggio che si decide di utilizzare! Per es:

Esistono linguaggi compilati (come il C)

I linguaggi di scripting (per es. Javascript, Ruby) sono interpretati

Esistono linguaggi (anche utilizzati sul web) che utilizzano l'approccio misto (per es. Java, Python)


7

Principali tecnologie per costruire applicazioni web:

Javascript - I

Client-side• Javascript

Server-side• PHP

rispetto alle distinzioni viste prima, queste soluzioni:

• Javascript(e jQuery)

PHP• JSP e Java ServletInoltre:ASP.NET Ruby, Python e Perl (Javascript)

Approcci ibridi• AJAX (jQuery)


p p , q utilizzano linguaggi di programmazione alcune sono tecnologie client-side (il codice è elaborato sul

client, dal browser), altre sono server-side (il codice è elaborato sul server), altre sono miste

Javascript [www.html.it/guide/guida-javascript-per-esempi/]

• nonostante la somiglianza nel nome, è un linguaggio completamente distinto da Java!

• è un linguaggio di programmazione "ad alto livello" che serve

Javascript - II

è un linguaggio di programmazione ad alto livello che serve per scrivere programmi contenuti nelle pagine web (= script è un linguaggio di scripting )

• è utilizzato soprattutto per costruire interfacce utente interattive nelle applicazioni web

• è un linguaggio interpretato (e non compilato)• L'interprete Javascript è contenuto nel browser è una


p ptecnologia client-side: è il client (il browser) che interpreta (ed esegue) gli script... anche se, recentemente, sono stati costruiti degli stumenti (es. Node.js) per utilizzare Javascript server-side (cioè con un interprete sul server)

8

• il codice Javascript viene (di solito) racchiuso nel tag <script> (solitamente nell'intestazione head della pagina HTML):<script>window.onload = function() {document.getElementById("sta").onclick=stampa; };

function stampa() { window print(); }

Javascript - III

function stampa() { window.print(); }</script>

quando l'interprete HTML incontra il tag <script>, "passa la palla" all'interprete Javascript

rispetto alle distinzioni viste prima, Javascript: è un linguaggio di programmazione (e NON di mark-up) è una tecnologia client-side (il codice è elaborato sul client,

d l b ) i i i li


dal browser) – con eccezioni marginali• Il funzionamento di Javascript si basa su due concetti principali:

1. il DOM (Document Object Model)2. gli eventi (per questo si dice che i programmi Javascript sono

event-driven)

Il DOM (Document Object Model) [www.html.it/pag/15174/introduzione14/]

• Javascript mette a disposizione del programmatore un insieme di oggetti e di funzioni ("metodi") per interagire con gli

Javascript: DOM - I

di oggetti e di funzioni ( metodi ) per interagire con gli elementi della pagina webVi ricordate cosa abbiamo detto parlando di HTML...?!?

TAG: definiscono la struttura della pagina, per es: H1 = titoloP = paragrafoUL = listaLI =elemento della lista


Javascript, grazie al DOM, ci permette di manipolare questi elementi (per es. cambiare testi, immagini, menu, ecc.)

Ogni TAG, correttamente aperto e chiuso (<tag>...</tag> opp <tag />), definisce un elemento (oggetto) della pagina

9

Ma cos'è il DOM? Il DOM contiene:

• una serie di oggetti predefiniti, che corrispondono:– alla pagina web in quanto tale (document)

ad altri elementi appartenenti al browser per es:

Javascript: DOM - II

– ad altri elementi appartenenti al browser, per es: o il browser in quanto applicazione (navigator), o la finestra corrente (window), o l'URL corrente (location)o l'elenco degli URL visitati di recente (history)

• gli oggetti ricavati dal codice HTML della pagina, per es:<img src="silvestri1.jpg" id="acrobati">

a.a. 2018/19 Tecnologie Web

<p id="descr_album"><form action="calcola.php" method="post" id="costo_tot"><input type="text" id="username">

• delle funzioni (chiamate anche metodi) per eseguire operazioni sugli oggetti

17

Javascript: DOM - III

window documentlocationhistory

immagine (tag img)

paragrafo (tag p) conid="descr_album"

Il disco è "nato" a Lecce nello studio "Posada Negro" di Roy Paci ...

form (tag form) con id="costo_tot"


immagine (tag img)con id="acrobati"

campo di input testuale (tag input) con id="username"

10

Javascript: DOM - IV

navigator

Il DOM è organizzato in modo gerarchico (window è il "progenitore"; navigatorprogenitore ; navigator, document, ... sono suoi "figli"; gli elementi nella pagina sono "figli" di document; ecc...):

window

navigator image – id="acrobati"


history

location

document paragraph – id="descr_album"

form – id="costo_tot" campo di input (testuale) – id="username"

Ma come si usa il DOM??Apriamo una piccola parentesi su due nozioni di programmazione che ci serviranno a capire molte cose...

Oggetto

Parentesi: oggetti e funzioni - I

OggettoUn'entità digitale, con un nome, manipolabile attraverso istruzioni scritte in un linguaggio di programmazione ad alto livello. Un oggetto può essere predefinito (in un dato linguaggio), oppure definito dal programmatore

Funzione (o metodo)Operazione di cui si chiede l'esecuzione scrivendo un'apposita


p ppistruzione in un linguaggio di programmazione ad alto livello.Ad una funzione è possibile passare dei dati e generalmente restituisce un risultato. Una funzione può essere predefinita (in un dato linguaggio), oppure definita dal programmatore

20

11

Manipolare un oggetto spesso significa "invocare" su di esso una funzione (o metodo), cioè chiedere l'esecuzione di una certa operazione su quell'oggetto. Per farlo generalmente si usa la dot notation: oggetto.funzione()

Parentesi: oggetti e funzioni - II

Per esempio (in Javascript):window.close(); [chiedo all'oggetto window di eseguire l'operazione close()]

In altri casi si vuole semplicemente accedere a (conoscere il valore di) una proprietà di un certo oggetto. Anche in questo caso si usa la dot notation: oggetto.proprietà

P i (i J i t)


Per esempio (in Javascript):window.navigator.appName;[chiedo all'oggetto navigator il valore della proprietà appName, dopo aver chiesto all'oggetto window il valore della proprietànavigator...]

21

una proprietà di un oggetto è a sua volta un oggetto!(per es. l'oggetto navigator è una proprietà dell'oggetto window)

per accedere alla gerarchia di oggetti del DOM si può usare la dot notation:

Parentesi: oggetti e funzioni - III

dot notation:window.document.getElementById("acrobati")

funzione predefinita nel DOM che - prende in input una stringa di testo (es. "acrobati")

- restituisce come risultato l'oggetto del


DOM che ha quella stringa come valoredell'id (nel nostro es. un'immagine)

12

Alcuni esempi di utilizzo degli oggetti del DOM...

• si può usare l'oggetto navigator per sapere quale browser si sta utilizzando (Explorer/Firefox/Chrome/...):

<sc ipt>

Javascript: DOM - V

<script>var n = window.navigator.userAgent;document.write("<p>");document.write("n = " + n);document.write("</p>");

</script>

In Firefox:n = Mozilla/5 0 (Windows NT 6 1; Win64; x64; rv:61 0)


n Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0

23VEDI: prove_js_navigator.htmlVEDI: prove_js_navigator.html

• si può usare l'oggetto location per caricare nella finestra una pagina differente:

window.location.href = "http://www.unito.it";

[alla proprietà href dell'oggetto location assegno un nuovo

Javascript: DOM - VI

[a a p op età h ef de oggetto location asseg o u uovovalore (un nuovo URL)]

• si può usare l'oggetto history per tornare alla pagina web precedente:

window.history.back();

[all'oggetto history chiedo di eseguire l'operazione back()]

N l J i


Nota generale su Javascript:Attenzione! Il DOM è definito dal browser! E la definizione èfatta separatamente da Firefox, MS Explorer, Safari, Chrome, ecc... non esiste un vero standard! possono nascere incompatibilità…

24

13

I programmi Javascript sono tipicamente "guidati dagli eventi" (event-driven):

• Eventi = azioni dell'utente sulla pagina web: ogni volta che l'utente fa click su un link, scrive qualcosa nella

Javascript: eventi - I

, qcasella di un modulo online, preme un pulsante, ridimensiona una finestra, ecc… genera un "evento"

un programma Javascript deve contenere un gestore di eventi (event handler), che sia in grado di intercettare le azioni dell'utente (eventi) ed eseguire, di conseguenza, delle istruzioni

l f i i di


• Il DOM fornisce una serie di gestori di eventi predefiniti (cioè capaci di intercettare diversi tipi di azioni dell'utente): l'accadere di un evento nella pagina web mette automaticamente in azione il corrispondente gestore di eventi, che eseguirà le istruzioni assegnategli

25

grazie agli oggetti definiti nel DOM e ai gestori di eventi, negli script Javascript è possibile: reagire agli eventi (azioni dell'utente) interagire con vari elementi del browser e della pagina

Javascript: eventi - II

g p g

rendere interattivele applicazioni web!

Per esempio:• fa sì che, al passaggio del mouse, un'immagine cambi• far sì che, al click del mouse su un link, venga eseguita una

Ricordatevi di quest'aspetto di Javascript, perché sarà fondamentale per capire AJAX...!!


far sì che, al click del mouse su un link, venga eseguita una azione (per es. di stampa)

• far sì che, al click del mouse su un link, venga visualizzata un'immagine

• ecc…

14

In generale, per ottenere questa interattività occorre:1. intercettare l'evento, per es. il passaggio o il click del mouse

su un determinato oggetto del DOM2. assegnare al gestore dell'evento una funzione (una sequenza

Javascript: eventi - III

2. assegnare al gestore dell evento una funzione (una sequenza di istruzioni) da eseguire al verificarsi dell'evento

Es. di eventi generati da azioni del mouse su un oggetto: click dbclick (doppio click) mouseover (il cursore del mouse passa sull'oggetto) mouseout (il cursore del mouse "esce" dall'oggetto)


Esempio 1:<script>window.onload = function() {window.document.getElementById("sta").onclick = stampa;

};

Javascript: eventi - IV

};function stampa() {window.print();

}</script>...<button id="sta">stampa il testo

</button>


VEDI: prove_js_eventi.htmlVEDI: prove_js_eventi.html

click sul link stampa della pagina

15

Esempio 2:<script>window.onload = function() {window.document.getElementById("foto").onmouseover =

caricaSecondaFoto;window document getElementById("foto") onmouseout =

Javascript: eventi - V

window.document.getElementById( foto ).onmouseout = caricaPrimaFoto;

};function caricaPrimaFoto() {window.document.getElementById("foto").src =

"silvestri_s.jpg"; }function caricaSecondaFoto() {window.document.getElementById("foto").src =

"silvestri2_s.jpg";}


}</script>...<img src="silvestri_s.jpg" id="foto">

passaggio mouse sull'immagine cambiamento dell'immagine

Esempio 3:<a name="sard" /><ol><li><a href="#sard" id="uno">Torre Coltellazzo</a></li>

Javascript: eventi - VI

<li><a href="#sard" id="due">Chia: spiaggia</a></li>

<li><a href="#sard" id="tre">Nora: rovine romane</a></li>

<li><a href="#sard" id="qua">Chia: mare</a></li>

</ol><img src="coltellazzo-40.jpg"

id="sardegna">g


click del mouse sui link

visualizzazione img corrispondente

16

<script>window.document.getElementById("uno").onclick = caricaDiapo1;window.document.getElementById("due").onclick = caricaDiapo2;window.document.getElementById("tre").onclick = caricaDiapo3;window document getElementById("qua") onclick = caricaDiapo4;

Javascript: eventi - VII

window.document.getElementById( qua ).onclick = caricaDiapo4;

function caricaDiapo1() {window.document.getElementById("sardegna").src =

"coltellazzo-40.jpg"; }function caricaDiapo2() {window.document.getElementById("sardegna").src =

"calaChia-40.jpg"; }function caricaDiapo3() {window.document.getElementById("sardegna").src =

" l 40 j " }"colonna-40.jpg"; }function caricaDiapo4() {window.document.getElementById("sardegna").src =

"acquaChia-40.jpg"; }</script>


Esiste anche la possibilità di utilizzare Javascript come li i di i b i ( ili d

Javascript – Node.js

linguaggio di programmazione web server-side (utilizzando la libreria Node.js: ), ma si tratta di un uso decisamente poco comune...

• https://nodejs.org/

• http://www.html.it/guide/guida-nodejs/


17

Le tecnologie: jQuery - I

jQuery (jquery.com) [www.html.it/pag/18382/introduzione63/]è una libreria Javascript che• "nasconde" la complessità dell'interazione diretta con il DOM e

con XMLHttpRequest (AJAX, che vedremo poi...)p q ( , p ) semplifica la vita ai programmatori e rende il codice più "elegante"...

• permette di sviluppare applicazioni (client-side) cross-browser

Cosa vuol dire che jQuery è una libreria Javascript?!?... che il codice jQuery viene prima tradotto in Javascript e poi

interpretato (ed eseguito) dall'interprete Javascript!


p ( g ) p p

$("a").click(function() {alert("Hello"); });

jQueryinterprete Javascript

libreria jQuery

document.getElById("aa").onclick = msg;...

Javascriptesecuzione

Le tecnologie: jQuery - IIIn particolare, con jQuery è possibile:• interagire con il DOM, selezionando e manipolando elementi

definiti dall'HTML (o dal CSS), ed eseguire operazioni in risposta ad eventi

• inviare richieste (e ricevere risposte) asincrone e parziali (d)al Web Server, secondo il modello AJAX

è un modo di scrivere programmi Javascript... senza usare Javascript! (ma usando un "linguaggio" più potente e compatto)

Per usare jQuery occorre innanzitutto importare la librerianella pagina HTML:


<script src="jquery-3.1.0.js" /> (se ho scaricato la libreria jQuery è l'ho salvata sul mio server)

<script src="ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" /> (se uso una versione remota di jQuery, x es. fornita sul server di Google)

18

Le tecnologie: jQuery - IIIUno degli aspetti principali di jQuery sono i selettori, accanto ai gestori di eventi; per es:

• al click su qualunque link presente nella pagina, fai comparire una finestra di benvenuto gestore dell'eventop<script>$(document).ready(function(){

$('a').click(function(){alert("Benvenuto!");});

}<script>

• al click su un certo link (con id="pippo") fai comparire una

selettore (criterio di selezione: "a", cioè tutti gli elementi di tipo <a...></a> )

gestore dell evento click: al verificarsi dell'evento, esegui questa funzione


• al click su un certo link (con id= pippo ), fai comparire una finestra di benvenuto<p id="pippo">...</p>$('#pippo').click(function(){alert("Benvenuto!");});

selettore (criterio di selezione: "#pippo", cioè l'elemento con <... id="pippo" ...> )

Suggerimenti bibliografici

• Innanzi tutto i link segnalati nelle slide !!!

• V. Roberto, M. Frailis, A. Gugliotta, P. Omero, Introduzione alle Tecnologie Web, McGraw-Hill, 2005 [NB: fate "attenzione" perché è un po' vecchiotto !]attenzione perché è un po vecchiotto...!]

Frammenti suggeriti:– Cap. 5 (La programmazione nel web): sez. da 5.1 a 5.7

• V. Della Mea, L. Di Gaspero, I. Scagnetto, Programmazione Web Lato Server (seconda edizione aggiornata), Apogeo, 2011[www.apogeoeducation.com/9788838786938-programmazione-web-

lato-server-seconda-edizione-aggiornata.html]


Frammenti suggeriti:– Appendice B (Javascript): introduzione + sez. B.1 e B.3

19

Abbiamo detto che gli aspetti innovativi di HTML5 ruotano principalmente attorno a due temi:

1. nuovi tag maggiormente "semantici"2. un ricco insieme di API (per manipolare gli oggetti del DOM,

h' i hit )

HTML5: nuovi tag e nuove API

anch'esso arricchito)

Ora vedremo: strumenti per controlli e input di dati nei form, che stanno a

metà tra 1 e 2... sono parte del tagging (1), ma sono implementati attraverso Javascript (2)! anche se lo sviluppatore non se ne accorge

strumenti per la multimedialità, che comprendono tag (1) e API Javascript (2)


p ( )

API (Javascript) per costruire applicazioni web "ricche", cioè che offrono all'utente un'esperienza interattiva simile a quella offerta da programmi desktop/stand alone (per es: drag&drop, funzionamento offline, memorizzazione di dati sul client, utilizzo di informazioni georeferenziate)

API = Application Programming Interface (Interfaccia di Programmazione di un'Applicazione) = insieme di oggetti e funzioni per rendere disponibili ad altri programmatori le funzionalità di un programma (es: su un oggetto di tipo video

Application Programming Interface (API)

posso eseguire la funzione play())

UI (User Interface)


web appgeocoder=new google.maps.Geocoder();var ll=new google.maps.LatLng(45,7);var myOptions = {zoom: 12,center: ll,mapTypeId: ROADMAP} ...

API (Application Programming Interface)

20

FORM in HTML5• Controllo dell'input: uno degli usi principali di Javascript è

quello di interagire con i campi dei form, per esempio per controllarne il contenuto ("validazione dei form")

HTML5: form (input e controlli) - I

controllarne il contenuto ( validazione dei form )

<form id="dati" ...><input type="text" id="email"><input type="submit"></form><script>window onload = function() {


window.onload = function() {document.getElementById("dati").onsubmit = checkEmail; };

function checkEmail() {var typed = document.getElementById("email").value;...

}</script>

HTML5 introduce dei nuovi valori per l'attributo type che fanno sì che alcuni controlli vengano effettuati automaticamente:<input type="text">

– type = email per l'inserimento di indirizzi e-mail; se inserisco

HTML5: form (input e controlli) - II

yp p ;qualcosa che non ha la "forma" di un'email, me lo segnala<input type="email">

– type = url per l'inserimento di URL (indirizzi web); se inserisco qualcosa che non ha la "forma" di un'URL, me lo segnala<input type="url">


– type = tel per l'inserimento di numeri di telefono<input type="tel">

– type = number per l'inserimento di valori numerici<input type="number">

21

• Modalità di input più interattiveHTML5 introduce dei nuovi valori per l'attributo type che fanno sì che venga fornito all'utente un widget per l'input del dato:

– type = date (time) per l'inserimento di date (e orari); mi mette

HTML5: form (input e controlli) - III

– type = date (time) per l inserimento di date (e orari); mi mette automaticamente a disposizione un calendario<input type="date">


– type = range per l'inserimento di un numero attraverso uno slider<input type="range">

– type = color per la selezione di colori; mi mette automaticamente a disposizione una

l tt di l i

HTML5: form (input e controlli) - IV

palette di colori<input type="color">

– type = search per l'inserimento di query di ricerca (in realtà, nella maggioranza dei browser, equivale ad un campo di


q ptesto semplice)<input type="search">

NB non tutti i browser supportano tutti questi tipi!!!Provate con Google Chrome... (e NON usate MS Explorer!)

22

HTML5 introduce anche dei nuovi attributi per facilitare l'input e controllarlo:– placeholder: testo che compare

in un campo e che scompare

HTML5: form (input e controlli) - V

p pquando l'utente inizia a scrivere

– required: attributo booleano cioè che può assumere solo i valori true(vero) e false (falso) che serve a rendere obbligatoria la compilazione dell'elemento; il controllo viene fatto automaticamente all'invio) del form


il controllo viene fatto automaticamente all invio) del form<textarea placeholder="Scrivi qui il tuo messaggio"required> </textarea>

NB per gli attributi boleani vale la seguente equivalenza:attr=true attr (es: required=true required)

– min e max: indicano il valore minimo e massimo consentito; si applicano alle date (type=date, type=time, ...) e ai numeri (type=number, type=range)<input type="number" min="18" max="100">

HTML5: form (input e controlli) - VI

il menu che mi compare automaticamente (type=number) parte da 18 e arriva fino a 100

– autocomplete: spesso i browser forniscono suggerimenti per riempire i campi; questo a volte è comodo e a volte fastidioso... con l'attributo autocomplete possiamo attivare/disattivare questo comportamento


<input type="text" autocomplete>

NB non tutti i browser supportano tutti questi attributi... verificate provando o cercando online (per es. sui forum)

23

• HTML5 definisce un nuovo attributo, contenteditable, che impostato a true rende qualsiasi elemento modificabile da browser (per offrire uno strumento diediting testuale oltre le aree di testo)

HTML5: contenteditable

NOTA: Ma cosa significa "modificabile da browser"? Che riscontro visivo dovrebbe avere l'utente? Come dovrebbe comportarsi il markup in seguito alle modifiche dell'utente? Su questi aspetti le specifiche non sono tanto chiare... dicono solo che il risultato delle modifiche deve essere conforme all'HTML5: questa libertà ha prodotto comportamenti diversi nei browser; per es alcuni traducono il tasto invio con <br> (interruzione di linea), altri con <p> (nuovo paragrafo)...


( ), p ( p g )

Parallelamente mette a disposizione un insieme di API per agire sulla zona modificabile; per es è possibile definire un pulsante per attivare/disattivare il grassetto sulla selezione corrente utilizzando la funzione document.execCommand('bold')

MULTIMEDIA in HTML5• Una delle innovazioni più citate riguarda la gestione degli

oggetti multimediali nella pagina: n o i tag per inserire oggetti m ltimediali:

HTML5: multimedia - I

– nuovi tag per inserire oggetti multimediali:<audio src=...> </audio><video src=...> </video>

– API (Javascript!) per interagire con questi oggetti; per es:

<audio id="casa" src="laMiaCasa.mp3" controls preload></audio>


l'attributo controls (impostato a true) fa sì che vengano inseriti i controlli (play, pause, ecc.) nel widget

l'attributo preload (impostato a true) fa sì che l'audio/video venga caricato insieme alla paginaVEDI: prove_html5_api.htmlVEDI: prove_html5_api.html

24

<button id="playB">suona!</button><button id="pauseB">pausa...</button>

HTML5: multimedia - II

Nell'intestazione (<head> </head>):<script>window.onload = function() {window.document.getElementById("playB").onclick = suona;window.document.getElementById("pauseB").onclick = pausa;};f nction suona() {


function suona() {window.document.getElementById("casa").play(); }

function pausa() {window.document.getElementById("casa").pause(); }

</script>

Nuove API in HTML5

API per il drag&drop

• un esempio delle capacità del supporto al drag&drop offerto da HTML5 è i ibil i GM il ll fil d ' il

HTML5: nuove API - I

HTML5 è visibile in GMail: per allegare un file ad un'email (cioè fare l'upload di un file) è possibile trascinare il file sulla pagina per la composizione del messaggio


25

Offline API (Application Cache)• consente di creare applicazioni web funzionanti anche offline• in particolare, consente di specificare, in un apposito file, un

insieme di risorse (pagine web, immagini, fogli di stile, ecc.) di

HTML5: nuove API - II

cui vogliamo che il browser conservi una copia locale• queste risorse, dopo la prima sessione di navigazione online,

resteranno accessibili anche senza connessione di retePer es:

<html manifest="my.appcache">

Nel file my.appcache:CACHE MANIFEST

risorse da memorizzare in locale: dopo la prima connessione al server, ad ogni altro accesso all'app verranno

i l i i l li


home.htmlmy.cssjquery-3.1.0.jsFALLBACK:onImg.jpg offImg.jpgNETWORK:*

caricate le versioni localiversione alternativa da usare offline

URL a cui l'app può accedere:* = tutte/ = solo server dell'app

API per memorizzare dati sul client• consentono di accedere a database locali, gestiti dal browser• con queste API è possibile eseguire operazioni di inserimento

dati, modifica, eliminazione e ricerca

HTML5: nuove API - III

(a) Web Storage (più semplice)• consente di salvare coppie di stringhe nome-valore: il nome

(chiave) serve a recuperare il valore• è supportato da tutti i maggiori browser• è limitato (generalmente a 5MB)Es: Web Storage "prestiti"( i hi h

Paola Un covo di viperenomi( hi i)

valori

50a.a. 2018/19 Tecnologie Web

(per memorizzare a chi ho prestato dei libri):localStorage.setItem("Paola", "Un covo di vipere");

localStorage.getItem("Paola"); "Un covo di vipere"localStorage.removeItem("Paola"); cancella la coppia

<Paola, Un covo di vipere>

Steve L'uomo inquieto(chiavi)va o

26

(b) Indexed Database API (più complesso e potente)• consente di costruire degli Object Store client-side• Un Object Store contiene un insieme di oggetti (dati strutturati e

non solo stringhe cone nel Web Storage!), ognuno associato ad hi h l'

HTML5: nuove API - IV

una chiave, che serve a recuperare l'oggetto (in realtà è possibile associare all'oggetto anche altri indici...)

• non è supportato da tutti i browserEsempio (def. funzione di ricerca tramite id):

findById:function(type,id,successCB,errorCB){if(!db) {errorCB('init_error','storage not initialized!');}

var tx=db.transaction([type]);var objStore=tx objectStore(type);


var objStore=tx.objectStore(type);var req=objStore.get(id);request.onsuccess=function(event){successCB(event.target.result);};

request.onerror=function(event){errorCB('obj_not_stored','obj not found');};

}[da: D. Cameron. A Software Engineer Learns HTML5, JavaScript & jQuery. Cisdal, 2014]

Geolocation API

• non appartengono ad HTML5 in senso stretto, ma fanno parte di quell'insieme di librerie che gravitano attorno alle specifiche [dev w3 org/geo/api/spec source html]

HTML5: nuove API - V

[dev.w3.org/geo/api/spec-source.html]

• servono per definire una struttura-dati atta a contenere dati geospaziali e delle funzioni di accesso a tali dati

• se invocate da un dispositivo mobile (di ultima generazione) utilizzano le coordinate provenienti dal GPS; se invocate da un PC (es: portatile) utilizzano posizionamento legato all'indirizzo IP dell'host


all'indirizzo IP dell'host

• NB: per proteggere la privacy dell'utente è vietato utilizzare tali info senza autorizzazione esplicita

27

• le funzioni principali messe a disposizione da queste API sono:– getCurrentPosition: restituisce la posizione corrente– watchPosition: si attiva automaticamente ogni volta che la

HTML5: nuove API - VI

watchPosition: si attiva automaticamente ogni volta che la posizione cambia (es se l'utente sta passeggiando)

• se l'operazione di recupero della posizione dell'utente (coordinate) ha successo, viene eseguita una funzione (definita dal programmatore) che ha come input (dato in ingresso) la posizione, corredata di data e ora di recupero (es: tale funzione potrebbe, data la posizione dell'utente, suggerirgli i sushi bar

iù i i i)


più vicini)

Applicazioni web: principali tecnologie

Documents

Transcript of Applicazioni web: principali tecnologie