Sintesi della lezione

COME FUNZIONA INTERNET

CARICAMENTO DI UN FILE

Se voglio caricare un'immagine In Photosho la cerco sul disco del mio computer: percorso + nome file costituiscono un modo univoco per identificare la risorsa sul mio pc. È grazie a questa identificazione univoca che posso utilizzare i miei file C:Users\BrunoMigliaretti\Documents\SidaGroup\Corso IFTS Bologna – 2017\RetePolitecnica.png è un nome unico nel mio personal computer.

CARICAMENTO RISORSA SU INTERNET

Su Internet il nome univoco che identifica una risorsa si chiama URL.

Definizioni

Uniform Resource Identifier (URI, acronimo più generico rispetto ad "URL") è una stringa che identifica univocamente una risorsa generica che può essere un indirizzo Web, un documento, un'immagine, un file, un servizio, un indirizzo di posta elettronica, ecc.

URL è un URI che indica una risorsa internet. Un Uniform Resource Locator o URL è una sequenza di caratteri che identifica univocamente l'indirizzo di una risorsa in Internet, come un documento o un'immagine.

STRUTTURA DELL’URL

La tipica struttura di un URL è:

protocollo://indirizzo_risorsa 

Il protocollo stabilisce le regole con cui i dati verranno trasferiti. I protocolli più usati sono:

  • http
  • https
  • ftp

Se non specifico alcun protocollo il browser aggiungerà automaticamente all'URL http che è il protocollo di default per comunicazione su Internet.

La parte di un URL che contiene l'indirizzo della risorsa è composto da vari elementi, alcuni obbligatori, altre opzionali:

nomehost [:porta][percorso][?querystring][#hash]

Nomehost è obbligatorio. Gli elementi non specificati vengono sostituiti dagli elementi di default.

 

/** Esempi di url **/
http://brunomigliaretti.com/userfiles/image/Bruno_256.png protocollo host percorso http://rendera.herokuapp.com hostprotocollo
http://brunomigliaretti.com/it/home#portfolio
https://www.facebook.com/bruno.migliaretti protocollo host percorso querystring https://95.110.178.124:8443/login_up.php3?success_redirect_url=https... 

ARCHITETTURA CLIENT-SERVER

  • Server: Programma in ascolto su una porta (punto di accesso) – Quando arriva una richiesta da un client, il server analizza questa richiesta (eventualmente con l’aiuto di altri programmi), elabora una risposta (anche in questo caso, eventualmente con l’aiuto di altri programmi ) e la invia al client. – Un server, generalmente, può servire più client contemporaneamente
  • Client: Un client è un programma che si connette ad un server, fa una richiesta, aspetta una risposta e la utilizza per preparane un nuova richiesta al server o per fornire un output (un risultato) all'utente.

WEB SERVER 

Un Web Server è un programma (in esecuzione su un computer remoto o sul computer locale) in grado di gestire le richieste di trasferimento di pagine web ad un client, tipicamente un web browser. Il Web Server gestisce due flussi di informazioni: – le richieste che arrivano dai client (che vengono analizzate ed elaborate) – le risposte inviate ai client (che sono il risultato di queste elaborazioni)

Per comunicare con i client un web server utilizza il protocollo HTTP (per default sulla porta 80) o il suo corrispondente sicuro HTTPS (sulla porta 443).

HTTP e HTTPS 

  • In informatica un protocollo di comunicazione è un insieme di regole che stabiliscono come si attua il trasferimento di dati tra entità.
  • HTTP (HyperText Transfer Protocol) è il protocollo usato come principale sistema per la trasmissione d'informazioni sul web. È ottimizzato per il trasferimento delle pagine web.
  • HTTPS (HyperText Transfer Protocol Secure) è l'implementazione di HTTP che prevede il trasferimento di dati in forma criptata, impedendo a terzi in ascolto di leggere i dati trasmessi.
  • Quando si collegano ad un sito con protocollo HTTPS tutti i maggiori browser richiedono al web server una certificazione sull'identità (e quindi anche sulla proprietà) del sito.
  • Questo perché si presuppone che i dati trasferiti con protocollo sicuro sia sensibili (ad esempio accesso ad un conto corrente online).
  • Se la certificazione non viene fornita (esistono organismi terzi che si occupano di verificare, su richiesta dei proprietari, l'autenticità dei siti web) il browser avvisa l'utente.
  • Il passo successivo dipende dal browser:
    • Opera blocca il sito
    • Mozilla Firefox consente di aggiungere un eccezione al controllo di sicurezza
    • Chrome, Microsoft Internet Explorer e Microsoft Edge consentono di bypassare l'avvertimento • In linea di massima se l'utente è certo dell'identità del server (perché, ad esempio, ne è lui il proprietario) può bypassare l'avvertimento e collegarsi ugualmente.
  • In generale il protocollo HTTP e considerato poco sicuro e tutti i siti che trattano dati sensibili (transizione economiche o privacy) sono passati negli ultimi anni a HTTPS.
  • Chrome a partire da quest'anno ha iniziato a segnalare come non sicuri i siti che usano http, cominciando da quelli che richiedono password, ma annunciando che questa segnalazioni verrà estesa a tutti i siti che non usano https.

CHROME E HTTPS

  • Il sito implementa https e la sua autenticità è certificata -> Semaforo verde
  • Il sito implementa https, ma la sua autenticità non è certificata -> Avviso di pericolo, semaforo rosso
  • Il sito non implementa https e richiede una password -> Segnalazione di sito non sicuro senza segnale di pericolo
  • Il sito non implementa https. -> Cliccando sull'icona  tra le informazioni sul sito l'utente legge l'invito a non inserire dati sensibili in quanto la connessione non è protetta.

BROWSER

Un Web browser è un HTTP/HTTPS client, cioè un programma, dotato di interfaccia grafica, che: – interagisce con un server web, richiedendone i servizi (per es. pagine Web) – riceve i dati dal server e li ricompone – visualizza le pagine Web (ipertesti), mostrandone il contenuto e interpretando correttamente i linguaggi che vengono utilizzati per descriverne i contenuti (HTML, CSS, Javascript)

PAGINE STATICHE E DINAMICHE

Quando ci connettiamo ad una risorsa in rete, identificata da un URL:

  • Nel caso più semplice l'indirizzo di una pagina scritta in HTML il cui contenuto è fisso (STATICA);
  • In altri casi, l'URL può contenere l'indirizzo di una pagina “dinamica” (per esempio scritta in ASP, PHP, o JSP) il cui contenuto viene generato (selezionato, composto) al momento della richiesta;

SCENARI POSSIBILI

  • Sito semplice (statico):
    • L'amministratore con un semplice editor di testi crea e modifica le pagina HTML. I fogli di stile CSS e i file Javascipt e li salva nel disco locale.
    • L'utente con un browser richiede le pagine web e le consulta.
  • Applicazione web generica
    • Utilizzando di solito un sistema di sviluppo integrato il programmatore crea e modifica file che il server è in grado di eseguire (aspx, php, jsp, ecc. a secondo dell'ambiente scelto) , i fogli di stile CSS e i file Javascipt e testa il suo lavoro su un server Web Locale
    • L'utente con un browser richiede le pagine web. Il server elabora le richieste e risponde restituendo pagine scritte in HTML.
  • Content Management System (ad esempio Word Press)
    • L'amministratore ha accesso ad una applicazione web con la quale può modificare il database in cui sono memorizzati i contenuti del sito. database.
    • L'utente con un browser richiede le pagine web. Il server recupera i contenuti nel database e risponde restituendo pagine scritte in HTML.

APPLICAZIONI WEB

Il passaggio di semplici documenti HTML tra il server e il client non permette lo sviluppo di applicazioni web complesse che coinvolgano una fase di elaborazione oltre che di passaggio di dati. Per questo motivo sono state sviluppate tecnologie che permettano una maggiore interazione dell'utente con il server web e una capacità di elaborazione sia del server che del client web.

IN SINTESI

  • Le informazioni che ci arrivano da Internet ci arrivano in formato pagina web
  • Come nella comunicazione tradizionale le informazioni sono organizzate semanticamente in indici, titoli, sottotitoli, paragrafi, figure, ecc., in modo che siano intellegibili.
  • Questa formattazione semantica viene fatta utilizzando HTML, un linguaggio che contiene istruzioni che servono, appunto, ad organizzare i contenuti di una pagina web.
  • La pagina web per essere fruita deve essere presentata in maniera piacevole e leggibile su vari tipi di schermo e di dispositivo. A tal fine è stato costruite un altro linguaggio che ha il compito di definire le regole di visualizzazione della varie parti di una pagina: CSS
  • Infine le pagine web sono interattive: – Interattività ipertestuale immediata (HTML) – Interattività lato server (Invio richieste e ricevo risposte e risultati di elaborazioni) – Interattività lato client: utilizzo di programmi più o meno complessi scritti in javascript per rendere più semplice e produttiva l'attività di navigazione dell'utente.

HTML

HTML è l'acronimo di HyperText Markup Language ("Linguaggio a marcatori per gli Ipertesti").

  • Non è un linguaggio di programmazione non ha, cioè, meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro"), e non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione.
  • Si tratta invece di un linguaggio di contrassegno (o 'di marcatura'), che permette di articolare gli elementi di una pagina in blocchi le cui caratteristiche vengono definite attraverso degli appositi marcatori, detti "tag".
  • Comunica al browser di quali risorse ha bisogno per comporre la pagina web
  • Definisce e articola il contenuto della pagina:
    • Struttura semantica della pagina
    • Elementi di formattazione
    • Componenti multimediali
    • Componenti funzionali

I TAG

  • I tag vanno inseriti tra parentesi uncinate: <TAG>
  • La chiusura del tag viene indicata con una barra: </TAG>
  • Il contenuto che il tag modifica va inserito tra l'apertura e la chiusura del tag medesimo:
Questa <span style=“font-wieight:bold”>parola</span> è in grassetto. 
  • che nel rendering verrà reso:
Questa parola è in grassetto.
  • Alcuni tag non hanno (o possono non avere) contenuto (empty tag) . Ad esempio l’interruzione di linea la indico così: <br />

ELEMENTI

  • Ogni tag definisce un elemento (element) del documento HTML
  • Esistono vari tipi di elementi:
    • Elementi visibili che definiscono componenti semantiche del testo (titoli, intestazioni, piè di pagina, paragrafi, ecc.)
    • Elementi visibili che definiscono componenti che consentono l'interazione con l'utente (link, campi che consentono l'immissione di testo, bottoni, ecc.)
    • Elementi visibili che servono a formattare parti di testo (grassetto, corsivo, ecc.)
    • Elementi visibili e non visibili che consentono l'inserimento di risorse multimediali (immagini, audio, video, ecc.)
    • Elementi non visibili che servono a caricare risorse funzionali necessarie alla pagina web (script, fogli di stile)
    • Elementi non visibili che racchiudono codice eseguibile o istruzioni di stile.

ATTRIBUTI

  • Le caratteristiche di un tag vengono determinate dagli attributi del tag. Ogni tag ha per i suoi attributi dei valori predefiniti che io posso modificare:
<tag attributo_1="valore1" attributo_2="valore2">contenuto</tag> 
  • Alcuni attributi sono generali, comuni a tutti i tag (id, class, ecc.), altri sono specifici e valgono solo per determianti elementi. AD esempio gli attributi che segueno possono essere usati nel tag <img> ma non nel ta <p>:
<img width="20" height="20" src="miaImmagine.gif" alt="alt“ /> 
  • Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro.
  • È quindi opportuno usare l’indentazione. Grazie ad essa il codice HTML risulta più leggibile.

ELENCO COMPLETO DEGLI ATTRIBUTI UTILIZZABILI IN HTML

Nome dell'attributo Elementi supportati Descrizione
accept <form>, <input> Lista di tipi che il server accetta, normalmente un file di tipo type.
accept-charset <form> Lista delle codifiche di caratteri supportate.
accesskey Attributo globale Definisce una scorciatoia da tastiera per attivare o aggiungere il focus all'elemento.
action <form> L' URI di un programma che processa le informazioni inviate per mezzo di un modulo.
align <applet>, <caption>, <col>, <colgroup><hr>, <iframe>, <img>, <table>, <tbody><td><tfoot> , <th>, <thead>, <tr> Specifica l'allineamento orizzontale dell'elemento.
alt

<applet>, <area>, <img>, <input>

Testo alternativo in caso un immagine non possa essere visualizzata.
async <script> Indica che lo script deve essere eseguito in modalità asincrona.
autocomplete <form>, <input> Indica che i controlli in questo modulo possono, di defaut, avere il loro valore completato automaticamente dal browser.
autofocus <button>, <input>, <keygen>, <select>, <textarea> L'elemento riceve il focus automaticamente dopo il caricamento della pagina.
autoplay <audio>, <video> L'audio o il video devo partire appena possibile.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

Colore di sottofondo dell'elemento.

Nota: Questo è un attibuto ereditato. Utilizzare la proprietà background-color in sostituzione.

border <img>, <object>, <table>

La larghezza del bordo.

Nota: Questo è un attributo ereditato. Utilizzare la proprietà  CSS border in sostituzione.

buffered <audio>, <video> Contiene l'intervallo di tempo del media già bufferizzato.
challenge <keygen> Una stringa che viene presentata con la chiave pubblica.
charset <meta>, <script> Dichiara la codifica di caratteri della pagina o dello script.
checked <command>, <input> Indica che l'elemento deve essere conrollato al caricamento della pagina.
cite <blockquote>, <del>, <ins>, <q> Contiene un URI che punta alla sorgente di quanto citato o modificato.
class Attributo globale Usato spesso con i CSS per modellare elementi con proprietà comuni.
code <applet> Specifica l'URL del file class della applet che deve essere caricato ed eseguito.
codebase <applet> Questo attibuto fornisce l'URL assoluto o relativo della directory dove il file .class dell'applet  referenziata dall'attributo code è memorizzato.
color <basefont>, <font>, <hr>

Questo attributo imposta il colore del testo utilizzando un nome colore o specificando il suo valore in formato esadecimale #RRGGBB.

Note: Questo è un attributo ereditato. Utilizzare la proprietà CSS color in sostituzione.

cols <textarea> Definisce il numero delle colonne in un'area di testo.
colspan <td>, <th> L'attributo colspan definisce il numero delle colonne nelle quali una cella dovrebbe espandersi.
content <meta> Un valore associato con http-equiv o name a seconda del contesto.
contenteditable Attributo globale Indica che il contenuto dell'elemento è editabile.
contextmenu Attributo globale Definisce l'ID di un elemento <menu> che servirà come menù contestuale dell'elemento.
controls <audio>, <video> Indica che il browser deve visualizzare i controlli di playack per l'utente.
coords <area> Una serie di valori che specificano le coordinate di un area selezionabile all'interno di una regione.
data <object> Specifica l'URL della risorsa.
datetime <del>, <ins>, <time> Indica data e ora associate con l'elemento.
default <track> Indica che la traccia deve essere abilitata a meno che le preferenze dell'utente indichino diversamente.
defer <script> Indicano che lo script deve essere eseguito dopo che la pagina è stata analizzata.
dir Attributo globale Definisce la direzione del testo. I valori permessi sono ltr (Left-To-Right: da sinistra a destra) or rtl (Right-To-Left: da destra a sinistra)
dirname <input>, <textarea>  
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indica che l'utente non può interagire con l'elemento.
download <a>, <area> Indica che il collegamento ipertestuale è da utilizzare per scaricare una risorsa.
draggable Attributo globale Definisce l'elemeno come trascinabile.
dropzone Attributo globale Indica che l'elemento consente l'eliminazione dei contenuti da esso.
enctype <form> Definisce il tipo di contenuto dei dati del form quando il method è POST.
for <label>, <output> Descrive elementi che appartengono a questo.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicano il form al quale l'elemento si riferisce.
headers <td>, <th> L'ID che gli elementi <th> applicano a quest'ultimi.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Note: In qualche caso, come per <div>, questo attributo è ereditato, e quindi deve essere usata la proprietà CSS height in sostituzione. In altri casi, come per <canvas>, l'altezza deve essere specificata con questo attributo.
hidden Global attribute Indica la rilevanza di un elemento.
high <meter> Indica il limite inferiore del range superiore
href <a>, <area>, <base>, <link>  L'URL di una risorsa collegata.
hreflang <a>, <area>, <link> Specifica la lingua della risorsa collegata.
http-equiv <meta>  
icon <command> Spefifica una figura che rappresenta il comando.
id Attributo globale Spesso utilizzato con CSS per applicare uno stile ad uno specifico elemento. Il valore di questo attributo deve essere unico.
ismap <img> Indica che l'immagine è una parte della mappa immagine lato server.
itemprop Attributo globale  
keytype <keygen> Specifica il tipo della chiave da generata.
kind <track> Specifica il tipo della traccia di testo.
label <track> Specifica un titolo leggibile dall'utente della traccia di testo.
lang Attributo globale Definisce la lingua usata nell'elemento.
language <script> Definisce la lingua dello script usato nell'elemento.
list <input> Identifica una lista di opzioni predefinite da suggerire all'utente.
loop <audio>, <bgsound>, <marquee>, <video> Indica che il media deve essere riprodotto dall'inizio quando terminato.
low <meter> Indica il valore limite superiore del campo inferiore.
manifest <html> Specifica l'URL del manifesto della cache del documento.
max <input>, <meter>, <progress> Indica il valore massimo consentito.
maxlength <input>, <textarea> Definisce il numero massimo di caratteri consentiti nell'elemento.
media <a>, <area>, <link>, <source>, <style> Specifica un suggerimento del media per il quale è stata disegnata la risorsa.
method <form> Definisce il metodo HTTP da usare alla sottomissione del form. Può essere GET (default) o POST.
min <input>, <meter> Indica il valore minimo consentito.
multiple <input>, <select> Indica che possono essere inseriti valori multipi come input ad un tipo email o file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Nome dell'elemento. E' ad esempio utilizzato dal server per identificare i campi nel form suttomesso.
novalidate <form> Questo attributo indica che il form non deve essere validato alla sottomissione.
open <details> Indica se i dettagli verranno visualizzati al caricamento della pagina.
optimum <meter> Indica il valore numerico ottimale.
pattern <input> Definisce un'espressione regolare con la quale validare il valore dell'elemento.
ping <a>, <area>  
placeholder <input>, <textarea> Fornisce un suggerimento all'utente circa cosa può essere inserito nel campo.
poster <video> Un URL che indica un fotogramma da mostrare finché l'utente esegue o cerca.
preload <audio>, <video> Indica se l'intera risorsa, parte di essa o niente deve essere precaricata.
pubdate <time> Indica che queste data e ora sono dati dell'elemento progenitore più vicino <article>.
radiogroup <command>  
readonly <input>, <textarea> Indica se l'elemento è editabile.
rel <a>, <area>, <link> Specifica la relazione dell'oggetto obbiettivo con l'oggetto di collegamento.
required <input>, <select>, <textarea> Indica se questo elemento deve essere compilato o meno.
reversed <ol> Indica se l'elenco deve essere visualizzato in ordine decrescente anzichè ascendente.
rows <textarea> Definisce il numero di righe in area di testo.
rowspan <td>, <th> Definisce il numero di righe sopra le quali si estende la cella della tabella.
sandbox <iframe>  
spellcheck Attributo globale Indica se il controllo ortografico è consentito per l'elemento.
scope <th>  
scoped <style>  
seamless <iframe>  
selected <option> Definisce un valore che sarà selezionato al caricamento della pagina.
shape <a>, <area>  
size <input>, <select> Definisce la larghezza dell'elemento (in pixel). Se l'attributo type dell'elemento è text o password rappresenta il numero di caratteri.
sizes <link>  
span <col>, <colgroup>  
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> L'URL del contenuto incorporabile.
srcdoc <iframe>  
srclang <track>  
start <ol> Definisce il primo numero se diverso da 1.
step <input>  
style Attributo globale Definisce gli stili CSS che sovrasteranno gli stili precedentemente impostati.
summary <table>  
tabindex Attributo globale Sovrascrive l'ordinamento della tabella impostato di default dal browser e segue quello specificato al posto suo.
target <a>, <area>, <base>, <form>  
title Attributo globale Testo da visualizzare in un suggerimento quando si passa sopra all'elemento.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Definisce il tipo dell'elemento.
usemap <img><input>, <object>  
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Definisce un valore di default che verrà visualizzato nell'elemento al caricamento della pagina.
width <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video> Nota: In qualche caso, come per <div>, questo è un attributo ereditato, quindi deve essere utilizzata la proprietà CSS width in sostituzione. In altri casi, come per <canvas>, la larghezza deve essere specificata con questo attributo.
wrap <textarea> Indica se il testo deve essere circondato.

ENTITY

  • Per rappresentare i caratteri non codificabili con lo standard ASCII si è introdotta una codifica particola detta entity.
  • Un entity è così composta:
&nnnn; 
  • Quando il parser HTML incontra una parola che inizia con & legge i successivi caratteri fino ad in contrare  ;  e tenta di interpretare il tutto come un carattere secondo la tabella di codici definita dal W3C.
  • Elenco completo delle entity: https://dev.w3.org/html5/html-author/charref

COMMENTI

  • Un strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi:
  • Un commento è un’indicazione significativa per il webmaster, ma invisibile al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi.
  • La sintassi è la seguente:
<!-- questo è un commento -->

 

Torna all'inizio