Sintesi della lezione

Rappresentazione digitale delle informazioni

  1. INTRODUZIONE L'informatica l'ha inventata Gutemberg
  2. IL PROCESSO
    1. Ogni pagina viene scomposta in singole unità informative (i caratteri)
    2. Ad ogni carattere viene sostituita la versione che la macchina di stampa è in grado di elaborare (il carattere componibile di piombo)
    3. La pagina può essere data in pasto alla macchina che può stamparne migliaia di copie.
  3. DEFINIZIONE DI INFORMATICA Informatica è la disciplina che studia l’elaborazione automatica di informazioni Informazione Dato Elaboratore
  4. AUTOMAZIONE Un processo viene automatizzato quando il numero di volte che esso deve essere eseguito è sufficientemente grande da rendere conveniente la progettazione e la costruzione di un sistema automatico che lo risolva.
  5. CODIFICA: Codifica è l'operazione con cui rendiamo disponibili le informazione per l'elaborazione automatica. Ogni informazione viene tradotta in un sistema simbolico su cui l'elaboratore può operare.
  6. CODIFICA E COMPUTER 
    1. Il computer è l'elaboratore programmabile più complesso e completo oggi esistente.
    2. Come succede per tutti gli elaboratori, le informazioni devono essere correttamente codificate perché il computer possa elaborarle.
    3. Il computer è una macchina elettronica e quindi deve usare dei dispositivi elettrici per elaborare le informazioni codificate.
    4. Come base del sistema di codifica si è deciso di usare dei micordispositivi in grado di avere due stati elettrici definiti che nell'elaborazione rappresentano le cifre 0 e 1
  7. SISTEMA BINARIO Il sistema numerico binario è un sistema numerico posizionale in base 2. Esso utilizza solo due simboli, di solito, indicati con 0 e 1, invece delle dieci cifre utilizzate dal sistema numerico decimale. I numeri espressi nel sistema numerico binario sono chiamati numeri binari. • Un numero binario è una sequenza di cifre binarie (dette bit). Il valore della cifra nella posizione n (contando da destra verso sinistra iniziando da 0) si ottiene moltiplicando la cifra per 2n , anziché per 10n, come avviene nella numerazione decimale.
  8. SISTEMA ESADECIMALE  Il sistema numerico esadecimale (spesso abbreviato come esa o hex) è un sistema numerico posizionale in base 16, cioè che utilizza 16 simboli invece dei 10 del sistema numerico decimale tradizionale. Per l'esadecimale si usano in genere simboli da 0 a 9 per le prime dieci cifre, e poi le lettere da A a F per le successive sei cifre, per un totale di 16 simboli. Il sistema esadecimale è molto usato in informatica, per la sua relazione diretta tra una cifra esadecimale e quattro cifre binarie.
  9. CODIFICA
    1. La codifica e’ l’operazione che consente trasformare le informazioni in dati numerici che calcolatori elettronici possono leggere ed elaborare.
    2. Un bit puo’ assumere solo due valori (0 e 1) Per rappresentare insiemi costituiti da piu’ di due stati/simboli si usano serie di bit.
    3. Una stringa di bit e’ costituita da un certo numero di bit (normalmente 8 o multipli di 8) ed e’ detta parola (word).
    4. La codifica si articola in due fasi: Divisione dell’informazioni in unità informative  e Assegnazione ad ogni unità di un valore NUMERICO che la codifica
  10. CODIFICA DEL TESTO
  11. CODIFICA ESATTA E CODIFICA APPROSSIMATA
    1. Una codifica esatta a n bit è possibile solo quando l’insieme delle informazioni da codificare è finito e di dimensione inferiore o uguale al massimo del valore che posso rappresentare con una parola di una lunghezza n. 
    2. I calcolatori sono oggetti finiti che elaborano e memorizzano un numero finito di bit.
    3. Se l’insieme da codificare ha una contiene un numero di informazioni maggiore di 2n se ne puo’ dare solo una rappresentazione approssimata o parziale. Questa limitazione avviene in due modi: Operazioni di limitazione Operazioni di partizionamento
  12. NUMERI INTERI
  13. CODIFICA DELLE IMMAGINI
  14. IMMAGINI VETTORIALI
  15. COMPRESSIONE DEI DATI

Gli argomenti vengono trattati oltre che nelle slide nella dispensa che potete consultare qui:

Apri la dispensa

COME FUNZIONA INTERNET

CARICAMENTO DI UN FILE

Se voglio caricare un'immagine In Photosho la cerco sul disco del mio computer: percorso + nome filecostituiscono 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 

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.

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

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

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 (protocollo host)
https://www.facebook.com/bruno.migliaretti 
https://95.110.178.124:8443/login_up.php3?success_redirect_url=https... (protocollo host percorso querystring )

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

Un Web Server  locale è un server installato sul tuo pc

Il numero ip 127.0.0.1 è un numero ip riservato (non utilizzato su internet) che indica il computer locale

Spesso nei sistemi operativi a questo numero viene assegnato l'alias localhost.

Con server web locale avremo a che fare con indirizzi del tipo:

http://localhost:61238/index.html
http://127.0.0.1:8000/index.html 

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

ELEMENTI BLOCCO

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 INLINE

Quando sono inseriti non danno origine a una nuova riga e possono contenere solo testo o altri elementi inline.

<p>Questo tasto è<b>grassetto</b></p> 

La parte delimitata dai tag  <b>...</b>  non sarà posta su una nuova riga.

Esempi come questo:

<b><p>Testo in grassetto</p></b> 

sono tollerati dai browser, ma non reggono al giudizio della validazione in quanto un elemento inline non può contenerne uno di tipo blocco.

span

L’elemento <span> è una generico elemento inline che definisce una porzione di testo. Non è prevista lacuna formattazione di default.

<p>Questa <span style="“font-wieight: bold”">parola</span> è in grassetto.</p>

FORMATTAZIONE

Esistono una serie di elementi inline che definiscono la funzione di una porzione di testo.

  • <em>  Testo enfatizzato
  • <strong>  Testo importante
  • <dfn>  Definizione
  • <code>  Codice
  • <samp>  Esempio di output
  • <kbd>  Imput da tastiera
  • <var>  Variabile

In HTML5 è compito del foglio di stile definire il formato di questi elementi.

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>