Lezione 1 (aa 2016-2017)

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:UsersBrunoMigliarettiDocumentsSidaGroupCorso IFTS Bologna – 2017RetePolitecnica.png è un nome unico nel mio personal computer.

CARICAMENTO RISORSA SU INTERNET

Digito un URL sulla barra degli indirizzi.

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

In un URL indirizzo_risorsa è composto da informazioni aggiuntive, alcune obbligatorie, altre opzionali:

nomehost [:porta][/percorso][?querystring]

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

/** Esempi di url **/
http://brunomigliaretti.com/userfiles/image/Bruno_256.png protocollo host percorso http://rendera.herokuapp.com hostprotocollo
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.

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 -->

<h1>Title</h1>

HTML 5

STRUTTURA DELLA PAGINA WEB

<!-- Prologo -->
<!DOCTYPE html>
<!-- fine prologo -->
<!-- HTML (Documento web) -->
<html lang="it">
<!-- Head: impostazioni della pagina -->
<head>
	<script src="mioscripr.js"></script>
	<link rel="stylesheet" href="styles.css">
	<meta charset="utf-8">
	<meta name="google" value="notranslate">
</head>
<!-- fine head -->
<!-- body: contenuto visibile della pagina -->
<body>
	<h1>Benvenuto!</h1>
	<p>Questo &egrave; il mondo di HMTL!</p>
</body>
<!-- fine body -->
</html>
<!-- fine HTML -->

PROLOGO

In HTML 5 il prologo è la semplice dichiarazione del tipo di documento come HTML <!DOCTYPE html>

ELEMENTO RADICE (ROOT)

L'elemento <html> è obbligatorio e può assumere questi attributi:

dir Determina la direzione del testo
lang Specifica il linguaggio di base dell'elemento quando è interpretato come HTML

<html lang="it"> 
 ....
</html>

HE AD

La sezione <head> contiene informazioni che non vengono direttamente visualizzate nella pagina:

<link> Contiene informazioni su documenti esterni collegati: fogli di stile, favicon, ecc.
<meta> Specifica informazioni di vario tipo sul documento.
<object> Racchiude un oggetto.
<script> Contiene script di programmazione o carica uno script di programmazione esterno .
<style> Definisce le regole di formattazione per il documento corrente
<title> Specifica il titolo del documento che compare nella barra del titolo del browser

<head>
	<script src="mioscripr.js"></script>
	<link rel="stylesheet" href="styles.css">
	<meta charset="utf-8">
	<meta name="google" value="notranslate">
</head>

BODY

Il corpo del documento è la sezione in cui si sviluppa il contenuto. È racchiusa, come in HTML, tra i tag <body>...</body>.

Gli elementi che possono comparire all'interno del corpo sono in genere suddivisi in due categorie:

elementi blocco ed gli elementi blocco sono quelli che definiscono la struttura del documento. Possono contenere altri elementi blocco, elementi inline o testo. Quando sono inseriti danno origine ad una nuova riga nel flusso del documento.
elementi inline: quando sono inseriti non danno origine a una nuova riga e possono contenere solo dati (essenzialmente testo) o altri elementi inline.

<body>
	<h1>Benvenuto!</h1>
	<p>Questo &egrave; il mondo di HMTL!</p>
</body>

ELEMENTI DI BASE

TITOLI (HEADINGS)

Gli heading (titoli) sono elementi blocco contrassegna dai tag da <h1> a <h6> e possono essere utilizzati per strutturare gerarchicamente un documento.
Per default i browser rendono i titoli in grassetto con corpi crescenti da <h6> (più piccolo del testo normale) a <h1>.

   <h1>Questo è un titolo di primo livello</h1> 
   <h2>Questo è un titolo di secondo livello</h2>

DIV

L’elemento <div> è un generico elemento blocco che racchiude una porzione di documento
Non è prevista alcuna formattazione di default

  <div> 
     Testo o qualsiasi altro elemento 
  </div>

P

L’elemento <p> è un elemento blocco che racchiude una paragrafo
Normalmente i browser rendono l'elemento <p> assegnandogli un margine inferiore e la dimensione di carattere di default.
La specifica prevede che l'elemento <p> non contenga elementi blocco

<p> Testo e elementi inline o inline-block </p>

UL

L’elemento <ul> rappresenta una lista non ordinata.

Gli elementi della lista sono rappresentati da elementi <li>
Per default una lista <ul> viene resa come lista puntata
All'interno di un elemento <li> può essere inserito un elemento <ul> o <ol> per creare liste annidate a più livelli

	<ul>
		<li>Elemento lista</li>
		<li>Elemento Lista
			<ul>
				<li>Elemeto Lista di secondo livello</li>
			</ul>
		</li>
		<li>Elemento lista</li>
		<li>Elemento lista</li>
	</ul>

OL

L’elemento <ol> rappresenta una lista ordinata.

Gli elementi della lista sono rappresentati da elementi <li>
Per default una lista <ol> viene resa come lista numerata
All'interno di un elemento <li> può essere inserito un elemento <ul> o <ol> per creare liste annidate a più livelli

	<ol>
		<li>Elemento lista</li>
		<li>Elemento Lista
			<ul>
				<li>Elemeto Lista di secondo livello</li>
			</ul>
		</li>
		<li>Elemento lista</li>
		<li>Elemento lista</li>
	</ol>

ELEMENTI SEMANTICI

Gli elementi semantici sono quelli che ci aiutano a dare una struttura logica ad un documento

Normalmente sono elementi di tipo blocco
Nella maggior parte dei casi i browser non prevendono alcuna formattazione di default e vengono resi sullo schermo come testo normale

HEADER

La specifica impone che questo elemento debba delimitare l’intestazione di una sezione del documento.

Le intestazioni possono essere molteplici all’interno di un documento. Si pensi ad esempio blog: nell’home page ci sarà un’intestazione contenente il nome del blog, un menù di navigazione e qualche altra informazione. Sotto l’intestazione potrebbe esserci una sezione contenente gli articoli recenti, ognuna di queste dovrà avere anch’essa un’intestazione che potrebbe l’autore e la data di pubblicazione.
Non è prevista lacuna formattazione di default

	<header class="main-header">
		<div class="logo">Logo</div>
		<nav>
			<!-- Menu del sito -->
		</nav>
	</header>

NAV

L’elemento <nav> specifica una porzione di documento destinato alla navigazione per esempio la lista di un menu.

	<nav>
		<ul class="navbar">
			<li><a href="#titoli">Titoli</a> </li>
			<li><a href="#paragrafo">Paragrafo</a> </li>
			<li><a href="#liste">Liste</a> </li>
		</ul>
	</nav>

SECTION

L'elemento <section> rappresenta una sezione generica di un documento o applicazione.

Individua un raggruppamento tematico di contenuti, ed in genere contiene un titolo introduttivo ad esempio le sezioni di una homepage o i capitoli di un libro.
Se la sezione racchiusa è una notizia l’elemento più appropriato per tale impiego è il tag <article>.

	<section>
		Testo o qualsiasi altro elemento 
	</section>

ARTICLE

L’elemento <article> dev’essere utilizzato quando s’inseriscono informazioni indipendenti dal resto del documento o della sezione in cui è racchiuso.

Può trattarsi ad esempio di un articolo di giornale o un post in un blog o un qualsiasi altro elemento.

	<article>
		<header>
			<h1>Titolo</h1>
			<div class="autore>">Mario Rossi</div>
		</header>
		<p>....</p>
		<!-- Contenuto articolo -->
		<footer><time datetime="2017-03-01T14:00" pubdate>01/03/2017 14:00</time> </footer>
		<section class="commenti">
			<article>
				<!-- Autore commento 1, avatar, testo commento -->
			</article>
			<article>
				<!-- Autore commento 2, avatar, testo commento -->
			</article>
			<section class="aggiungi-commento">
				<form method="post">
					<label>Aggiungi commento:</label>
					<textarea rows="5" maxlength="500"></textarea>
					<button type="submit">Invia</button>
				</form>
			</section>
		</section>
	</article>

ASIDE

L’elemento <aside> viene utilizzato per definire una porzione di codice correlata al contenuto ma separata come per esempio una sidebar.

Le informazioni che racchiude, se rimosse, non devono incidere negativamente sulla completezza dell’informazione contenuta nell’elemento a cui è associato.
Può essere utilizzato ad esempio per racchiudere elementi <nav> aggiuntivi, banner pubblicitari o note.

FOOTER

L’elemento <footer> definisce una porzione di documento che rappresenta il piede della pagina o di una parte del documento.

Non è prevista lacuna formattazione di default
Analogamente alle intestazioni anche i piè di pagina possono essere molteplici all’interno di una pagina web.

<footer> &copy; 2017 Mia Azienda - Tutti i diritti riservati </footer>

FIGURE

Il tag <figure> specifica un contenuto indipendente dal testo, come illustrazioni, diagrammi, foto, esempi di codice, ecc

Mentre il contenuto dell'elemento <figure> è in relazione al flusso principale, la sua posizione è indipendente dal flusso principale, e se rimosso non dovrebbe influenzare il flusso del documento.
Di norma l’elemento <figure> contiene un elemento <figcaption> che arricchisce l'elemento contenuto in <figure> con una descrizione

	<figure>
		<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
		<figcaption>Una didascalia</figcaption> 
	</figure>

TIME

L’elemento <time> rappresenta una data.

È normalmente utilizzato all'interno di un elemento <article>
L'attributo datetime indica la data in forma "iso" (anno[-mese[-giorno]] [ora[:minuti[:secondi]]]) in modo che programmi esterni che consultano l'articolo possano determinarla in modo certo
L'attributo pubdate indica, se presente, che la data si riferisce alla pubblicazione dell'articolo in cui <time> è inserito altrimenti si presumerà che la data sia la data di pubblicazione della pagina.

   <time datetime="2010-04-21 11:45" pubdate ="pubdate" > 
      21 Pubblicato il 21 febbraio 2017 alle ore 11:45 
   </time>