Progettare e Programmare Vol2 Cap7

capitolo 7 – L’«ecosistema» del web
1. Gli strumenti di base
I
2. La progettazione dei siti web
LL
3. L’editor Notepad++
E
CH
4. Dietro le pagine web: i tag HTML
NI
ZA
Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 1
Copia riservata all'insegnante Saverio Manglaviti - 5798018

7.1 Gli strumenti di base Indice
Il browser è l’applicazione client che visualizza le pagine dei siti web.
I
LL
premendo il tasto F12
E
mentre si visualizza un
CH
sito con il browser, a
destra apparirà il codice
HTML della pagina web
NI
ZA

Le pagine web sono codificate in HTML, acronimo di HyperText Markup

Language, ossia «linguaggio a marcatori per ipertesti».
I
E LL
CH
NI
ZA
Il linguaggio HTML stato creato nel 1990 da Tim Berners-Lee al CERN di
Ginevra, per facilitare la comunicazione dei dati sperimentali e delle relazioni
sulle ricerche svolte nei laboratori di fisica delle alte energie di tutto il mondo.

Le pagine web sono codificate in HTML, acronimo di HyperText Markup

Language, ossia «linguaggio a marcatori per ipertesti».
I
Dal 1994 il World Wide Web Consortium o W3C, un
LL
organismo internazionale indipendente e senza scopo
di lucro, si occupa dello sviluppo del linguaggio HTML
E
e della definizione della versione standard ufficiale.
CH
Oggi il linguaggio è arrivato alla sua quinta versione,
detta appunto HTML5.
NI
ZA

I tag, o marcatori, sono le parole-chiave dell’HTML e si scrivono tra <>.
Esempio: un codice in HTML e la sua visualizzazione con il browser Chrome.
I
<html> è il tag principale che racchiude il contenuto dell’intera pagina
LL
<head> racchiude i dati relativi alla pagina,
per esempio il titolo che appare nel browser
E
CH
NI
ZA
<body> racchiude i contenuti
che appariranno sulla pagina
<ul> delimita un elenco puntato di testo,

<li> delimita i singoli punti dell’elenco

I tag, o marcatori, sono le parole-chiave dell’HTML e si scrivono tra <>.
Esempio: un codice in HTML e la sua visualizzazione con il browser Chrome.
I
E LL
CH
NI
ZA
i commenti in HTML si aprono con il tag 

L’HTML è un linguaggio dichiarativo, non di programmazione.
I
Il linguaggio HTML permette di svolgere le principali attività di costruzione
LL
delle pagine web, ma:
E
• non si occupa del layout grafico e quindi dell’estetica delle pagine web:
questi aspetti sono delegati ai fogli di stile;
CH
• non formula istruzioni da eseguire, delegando invece questo compito ai
cosiddetti linguaggi di scripting.
NI
ZA

Con i fogli di stile scritti in linguaggio CSS si gestisce l’aspetto dei siti web.
Esempio: l’effetto di un foglio di stile sulla visualizzazione di un codice HTML.
I
LL
le istruzioni riquadrate inseriscono un foglio di stile nel codice
E
CH
il selettore li applica lo stile definito tra
le graffe a tutti i tag <li> della pagina
NI
ZA
e questo è l’aspetto risultante:

JavaScript è un utile linguaggio di scripting lato client.
JavaScript permette di sviluppare siti web interattivi, le cui pagine si modificano

a seconda delle azioni dell’utente:
I
LL
• è un vero linguaggio di programmazione, con una grammatica e una sintassi;
E
• è un linguaggio di scripting: il codice è semplice testo interpretato dal browser;
CH
• è un linguaggio lato client: il codice viene eseguito dal browser dell’utente;
• è un linguaggio a eventi: reagisce alle azioni dell’utente, come il clic del mouse;
• è un linguaggio orientato agli oggetti. NI
ZA
Nel loro insieme i linguaggi HTML, CSS e JavaScript costituiscono i tre pilastri
della programmazione web lato client.

JavaScript è un utile linguaggio di scripting lato client.

Esempio: JavaScript
il foglio di stile posiziona il pulsante sulla pagina usato per gestire la
risposta al clic del
I
LL
mouse su un pulsante.
nel tag <head> la
E
funzione di JavaScript
CH
specifica il testo che il
browser mostrerà
come avviso
NI
ZA
nel <body> il tag <input> dell’HTML
specifica l’evento: la pagina deve
visualizzare un pulsante (button) con
la scritta (value) «Fai clic qui!», e
all’evento onclick va eseguita la
funzione mostraMessaggio()

PHP è il più usato tra i linguaggi di scripting lato server.
Quando interroghiamo un motore
I
di ricerca o visitiamo un sito di e-
LL
commerce, è il server a creare la
pagina che vediamo nel browser,
E
in modo dinamico, in risposta alla
CH
nostra richiesta.
NI
ZA
I linguaggi lato server come PHP «fanno da ponte» tra le richieste inviate
dall’utente nelle pagine web e i dati contenuti nei database del server, poi
trasformano questi dati in nuove pagine web che vengono re-inviate all’utente.

7.2 La progettazione dei siti web Indice
Uno spazio personale su Internet può essere un profilo su un social network,

un blog oppure un sito web creato ex novo.
I
un esempio
LL
di blog
E
CH
NI
ZA

Nel web la usability mira a produrre siti semplici da consultare e da navigare.
Le norme ISO relative alla web usability stabiliscono linee-guida per progettare
I
siti che tengano opportunamente conto:
LL
• degli obiettivi di informazione e comunicazione;
E
• delle tipologie di utente a cui ci si vuole rivolgere;
CH
• dell’hardware e della larghezza di banda di cui dispone l’utente medio del sito.
NI
La scelta del tipo di carattere, del colore dei testi e del colore degli sfondi deve
ZA
sempre privilegiare la leggibilità e la chiarezza.
esempi di ERRORI da evitare!


Nel web la usability mira a produrre siti semplici da consultare e da navigare.
L’ipertestualità consente di collegare ogni parte di un sito con ogni altra parte.
I
LL
Questa possibilità arricchisce la navigazione, ma se è usata in modo troppo
spinto rischia di confondere l’utente.
E
CH
NI
ZA
una struttura gerarchica chiara una struttura dispersiva

Con i CMS si può creare un sito o un blog senza bisogno di programmare.
Per pubblicare un sito web o un blog ci si rivolge a un Internet Service Provider

o ISP, che può mettere a disposizione dei suoi clienti:
I
LL
• lo spazio su un web server per ospitare i file che compongono il sito;
• la possibilità di scegliere l’URL, cioè l’indirizzo web da assegnare al sito;
E
CH
• uno o più indirizzi e-mail legati al dominio del sito;
• una certa quantità di banda dedicata a chi visita il sito;
NI
• un servizio firewall e antivirus che protegga il sito dal malware.
ZA
Spesso l’ISP offre anche le piattaforme software lato server chiamate CMS
(Content Management System, sistemi per la gestione dei contenuti): sono
progettate per consentire la creazione guidata e la gestione semplificata di un
sito o di un blog, senza che l’utente debba conoscere la programmazione web.

Con i CMS si può creare un sito o un blog senza bisogno di programmare.
I
E LL
CH
NI
ZA
Per creare un proprio sito con un CMS si segue una procedura guidata online
che inizia con la scelta di un template, cioè un modello grafico e di struttura,
proprio come avviene nei word processor o nei programmi di presentazione.

7.3 L’editor Notepad++ Indice
Notepad++ è un editor per scrivere codice in HTML, CSS o JavaScript.
Notepad++ è un editor offline freeware con numerose caratteristiche utili:
I
• si può usare per scrivere codice in tutti i linguaggi di sviluppo per il web;
LL
• colora il codice, indenta, evidenzia e completa in modo automatico i tag;
E
• ha un’interfaccia grafica anche in italiano ed è personalizzabile in vari modi.
CH
NI
ZA
La versione per Windows si scarica gratuitamente dal sito notepad-plus-plus.org.

Dopo aver avviato il programma, la lingua dell'interfaccia si sceglie con il menu

Settings: si seleziona Preferences e si scorre nella finestra il menu Localization.
I
E LL
CH
NI
ZA

Il linguaggio predefinito si imposta con il menu della scheda Nuovo documento.
I
E LL
CH
NI
ZA

Notepad++ riconosce e segnala gli errori di sintassi HTML.
I
LL
il primo tag <ol> è aperto
qui l’errore è stato corretto
ma non viene poi chiuso
E
CH
NI
ZA
la linea a sinistra è rossa la linea a sinistra è grigia


7.4 Dietro le pagine web: i tag HTML Indice
Ogni pagina HTML contiene le due sezioni definite dai tag <HEAD> e <BODY>.
Questo è il codice minimo di una pagina HTML:

il browser visualizzerà una pagina bianca.
I
LL
• La riga <!DOCTYPE HTML> va sempre
E
messa a inizio file: comunica al browser il tipo
di documento che dovrà interpretare.
CH
• Il tag <HTML> è quello che racchiude l’intero
codice della pagina.
• La pagina vera e propria si compone delle

NI
ZA
due sezioni definite dai tag <HEAD> e <BODY>,
che sono a loro volta contenitori di altri tag.
NB: i tag si possono anche
scrivere minuscoli, perché
l’HTML non è case-sensitive.

La sezione <HEAD> è un contenitore di metadati relativi alla pagina HTML.
Tra i tag più importanti della sezione <HEAD> ci sono:
I
LL
• <TITLE>: definisce il titolo della pagina web, che appare nella linguetta della
E
scheda del browser ed è tra i dati con cui i motori di ricerca catalogano le pagine
CH
• <STYLE>: serve per definire nel file HTML gli stili grafici da applicare al
documento; se invece si salvano i fogli di stile in file esterni, si usa il tag <LINK>:
NI
<LINK rel="stylesheet" type="text/css" href="mio_stile.css">
• <SCRIPT>: racchiude le istruzioni eseguibili da applicare al documento, oppure

ZA
include un file JavaScript esterno, in tal caso con la sintassi:
<SCRIPT type="text/javascript" src="mio_script.js"></SCRIPT>

Nel linguaggio HTML gli attributi sono specifiche interne ai tag.
Per esempio, il tag <LINK> ha tre attributi:
I
LL
<LINK rel="stylesheet" type="text/css" href="mio_stile.css">
• rel indica la relazione tra il documento HTML e quello collegato;
E
CH
• type specifica il tipo di documento che si vuole collegare;
• href (hypertext reference, cioè «riferimento ipertestuale») indica a quale

NI
documento riferirsi e dove trovarlo, in questo esempio la stessa cartella del codice
ZA

Il tag <META> della sezione <HEAD> può contenere numerosi attributi.
Come <LINK>, anche <META> non richiede chiusura; lo si può ripetere più volte.
I
LL
• l’attributo charset definisce il set di caratteri da usare per la pagina web:
<META charset="UTF-8">
E
CH
• l’attributo name permette di inserire la descrizione di un contenuto (content):
<META name="description" content="Descrizione del sito">
NI
<META name="keywords" content="Parole-chiave del sito">
<META name="author" content="Nome dell’autore del sito">
ZA
• l’attributo name="viewport" fa ridimensionare automaticamente al browser la
pagina web, in base alla larghezza (width) dello schermo usato dall’utente:
<META name="viewport" content="width=device-width,
initial-scale=1.0">

Dentro il tag <BODY> si definiscono i contenuti che il browser visualizzerà.
I
Esempio: l’uso del tag <DIV> per suddividere la pagina in sezioni.
LL
class applica uno stile a più sezioni
E
CH
id applica uno stile a una singola sezione
NI
ZA

L’HTML5 ha introdotto nuovi tag dedicati all’impaginazione.
• <HEADER> è la sezione che contiene
I
LL
l’intestazione della pagina
E
• <ARTICLE> identifica una sezione con
CH
un contenuto principale della pagina
• <ASIDE> indica un contenuto di

servizio, come i comandi di navigazione NI
ZA
• <FOOTER> è il piè di pagina: contiene
informazioni come copyright e autore

Progettare e Programmare Vol2 Cap7

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Progettare e Programmare Vol2 Cap7

Caricato da

Copyright:

Formati disponibili

capitolo 7 – L’«ecosistema» del web

1. Gli strumenti di base

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 1

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Il browser è l’applicazione client che visualizza le pagine dei siti web.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 2

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Le pagine web sono codificate in HTML, acronimo di HyperText Markup

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 3

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Le pagine web sono codificate in HTML, acronimo di HyperText Markup

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 4

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Esempio: un codice in HTML e la sua visualizzazione con il browser Chrome.

<ul> delimita un elenco puntato di testo,

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Esempio: un codice in HTML e la sua visualizzazione con il browser Chrome.

i commenti in HTML si aprono con il tag

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 6

Copia riservata all'insegnante Saverio Manglaviti - 5798018

L’HTML è un linguaggio dichiarativo, non di programmazione.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 7

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Esempio: l’effetto di un foglio di stile sulla visualizzazione di un codice HTML.

e questo è l’aspetto risultante:

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 8

Copia riservata all'insegnante Saverio Manglaviti - 5798018

JavaScript è un utile linguaggio di scripting lato client.

JavaScript permette di sviluppare siti web interattivi, le cui pagine si modificano

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 9

Copia riservata all'insegnante Saverio Manglaviti - 5798018

JavaScript è un utile linguaggio di scripting lato client.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 10

Copia riservata all'insegnante Saverio Manglaviti - 5798018

PHP è il più usato tra i linguaggi di scripting lato server.

Quando interroghiamo un motore

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 11

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Uno spazio personale su Internet può essere un profilo su un social network,

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 12

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Nel web la usability mira a produrre siti semplici da consultare e da navigare.

esempi di ERRORI da evitare!

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Nel web la usability mira a produrre siti semplici da consultare e da navigare.

una struttura gerarchica chiara una struttura dispersiva

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 14

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Con i CMS si può creare un sito o un blog senza bisogno di programmare.

Per pubblicare un sito web o un blog ci si rivolge a un Internet Service Provider

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 15

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Con i CMS si può creare un sito o un blog senza bisogno di programmare.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 16

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Notepad++ è un editor per scrivere codice in HTML, CSS o JavaScript.

Notepad++ è un editor offline freeware con numerose caratteristiche utili:

La versione per Windows si scarica gratuitamente dal sito notepad-plus-plus.org.

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 17

Copia riservata all'insegnante Saverio Manglaviti - 5798018

Notepad++ è un editor per scrivere codice in HTML, CSS o JavaScript.

Dopo aver avviato il programma, la lingua dell'interfaccia si sceglie con il menu

Tibone, Progettare e programmare Vol 2 © Zanichelli editore 2019 18