Extreme Cluster Administration Toolkit Alberto Crescente, INFN Sez. Padova.
Prof. Giuseppe ROMANO...È corretto indicare però che in genere nel toolkit degli sviluppatori...
35
Prof. Giuseppe ROMANO
Transcript of Prof. Giuseppe ROMANO...È corretto indicare però che in genere nel toolkit degli sviluppatori...
Prof. Giuseppe ROMANO
HTML
HTML è il principale linguaggio di
pubblicazione di pagine Web, oltre che uno
strumento sempre più utilizzato per la
realizzazione di contenuti e applicazioni
mobile.
Impareremo durante il corso a realizzare
pagine e siti in HTML, con immagini, link,
tabelle, form di inserimento dati per gli utenti,
e tanto altro ancora.
HTML: introduzione
HTML è l’acronimo di
HyperText Markup Language
(“Linguaggio di contrassegno per gli Ipertesti”)
Si tratta un linguaggio di markup (di ‘contrassegno’ o ‘di
marcatura’), che permette di indicare come disporre gli
elementi all’interno di una pagina.
HTML: introduzione
Queste indicazioni vengono date attraverso degli appositi
marcatori, detti tag (‘etichette’), che hanno la
caratteristica di essere inclusi tra parentesi angolari
(<img> per esempio è il segnaposto di un’immagine).
HTML: introduzione
Con HTML quindi indichiamo, attraverso i tag, quali
elementi dovranno apparire su uno schermo e come
essi debbano essere disposti.
Tutte queste indicazioni sono contenute in un
documento HTML, detto “Pagina HTML“.
Una pagina HTML è rappresentata da un file di testo,
ovvero un file che possiamo modificare con
programmi come notepad e in genere hanno un nome
che finisce con l’estensione .html.
HTML: introduzioneIn passato si utilizzavano alcuni tag HTML per definire font (tipi di
carattere), i colori o le dimensioni degli oggetti sullo schermo.
Oggi il quadro è definitivamente cambiato e molte di quelle funzionalità
sono deprecate favorendo una divisione dei compiti più chiara tra diversi
strumenti:
•HTML
serve a definire quali sono gli elementi in gioco, stabilire
collegamenti (link) tra le pagine e l’importanza (non la forma o il
colore) che hanno i testi, creare form per gli utenti, fissare titoli,
caricare immagini, video, etc.
•CSS
o “fogli di stile”. Si tratta di una serie di regole che permettono di
definire l’aspetto (lo stile) che devono assumere gli elementi sulla
pagina. Dimensioni, colori, animazioni, ogni caratteristica visuale
può essere manipolata.
HTML: creare la prima pagina
Seppure molto potente, HTML non è un linguaggio complesso e può
offrire soddisfazioni immediate.
Per iniziare basta pochissimo, quasi niente in realtà:
Un browser, ne abbiamo almeno uno già installato nel PC o nei device
che utilizziamo.
Un editor di testi, anche di questi ce ne sono a bizzeffe e tipicamente ce
n’è uno in ogni ambiente operativo.
L’importante è ricordare che non dobbiamo utilizzare programmi come
Word, OpenOffice o WordPad, che sono “word processor” evoluti e non
servono allo scopo.
HTML: Creare la prima pagina
Lanciamo il nostro editor di testi, ad esempio il
classico blocco note di Windows e scriviamo un semplice
testo come il seguente:
<html>
<head>
<title>Ciao Mondo</title>
</head>
<body>
<h1>Ciao Mondo</h1>
<p>Questa è la nostra prima pagina HTML!</p>
</body>
</html>
HTML: Creare la prima pagina
Tag Descrizione
<html> Serve semplicemente a dire che il file è una pagina HTML
<head> Questo tag contiene una serie di informazioni utili per la
gestione della pagina, nel nostro caso abbiamo definito ad
esempio quale sarà il titolo che apparirà sui motori di
ricerca e sulle linguette del browser, grazie al tag <title>,
ma questa sezione è destinata a contenere molto di più:
dall’inserimento di librerie alla definizione dell’insieme di
caratteri.
<body> Contiene gli elementi della pagina, tutto il contenuto e tutti
i relativi tag che saranno poi resi a video
HTML: strumenti di sviluppo, l’editor
Gli strumenti principali che servono a realizzare pagine
HTML sono:
- editor di testo,
- browser,
- software per manipolare foto o immagini vettoriali,
- tool per la progettazione e la messa online del sito
Per ogni lavoro avere gli attrezzi giusti è fondamentale.
Un buon ambiente di sviluppo può fare la differenza sia
quando iniziamo a sviluppare in HTML, sia quando
abbiamo a che fare con la manutenzione di lavori già
fatti.
HTML: editor di testoLa scelta dell’editor è piuttosto importante, è il principale compagno di
strada in questo percorso e tipicamente diventa un’estensione naturale
del pensiero.
Gli editor che risultano tra i più utilizzati sono:
Editor Piattaforma Licenza
Atom. io Windows, Linux, Mac Gratuita
Sublime Text Windows, Linux, Mac Praticamente gratis. Si
può scaricare una
versione di prova che
sostanzialmente può
utilizzare senza
restrizioni o limiti di
tempo
Notepad Windows Gratuita
HTML: il browserIl programma che interpreta il markup delle nostre pagine HTML e
mostra a video tutto ciò che indichiamo si chiama Browser.
La parola tradotta letteralmente sta per “colui che dà un’occhiata in
giro” ed è stata utilizzata per definire il tipo di programmi che usiamo
per navigare sul Web.
Per capire meglio come lavorare in HTML è importante soffermarci su
alcuni degli aspetti più importanti che riguardano proprio questi
strumenti, diventati nel tempo molto di più che semplici software per la
“navigazione di Internet”.
Tra i compiti svolti dal browser, relativamente alle pagine HTML, quelli
che ci interessano di più sono due:
- il caricamento
- la visualizzazione (rendering)
HTML: il browserCARICAMENTO
Caricare la pagina significa acquisirne il contenuto, più
tecnicamente il browser richiede che venga effettuato
un trasferimento di file.
Perché sia possibile effettuare le richieste, la pagina HTML,
come pure tutti i file ad essa correlati, è raggiungibile
facendo riferimento ad un certo indirizzo, come questi che
seguono:
HTML: il Browser
Semplificando possiamo dire che grazie agli indirizzi
possiamo effettuare richieste:
in “locale”, quando i file si trovano sul device o sul computer
su cui gira il browser
in “remoto”, quando i file sono su un server da contattare
tramite internet (o altra rete).
La fase di caricamento della pagina è il primo punto cruciale
quando si parla di perfomance:
perché un sito o una applicazione risultino gradevoli da
utilizzare bisognerà fare in modo di minimizzare quanto più
possibile i tempi di caricamento.
HTML: il Browser
La seconda fase cruciale è quella della visualizzazione
ovvero del cosiddetto rendering della pagina, la fase in cui il
browser interpreta i documenti HTML e dispone sullo
schermo gli elementi (testi, immagini, filmati) a seconda
delle indicazioni ivi contenute.
Il componente del browser che svolge questo compito è
detto “Rendering Engine” (motore di rendering), che in
sostanza si comporta come un sistema operativo in
miniatura e che sfrutta direttamente le caratteristiche
hardware del device su cui visualizziamo le nostre pagine.
In questa fase quindi, specie nei progetti più complessi o
quando le pagine sono destinate a dispositivi lenti o con
poca memoria, bisogna fare attenzione a non
sovraccaricare di lavoro l’ engine del browser.
HTML: Il Browser
Il browser è fondamentale per testare il nostro lavoro sotto il profilo
visuale e non solo. I browser moderni come Google Chrome,
Mozilla Firefox, Microsoft Edge e Apple Safari (per non fare torto a
nessuno), forniscono infatti i cosiddetti “strumenti di sviluppo”
grazie ai quali possiamo tenere sotto controllo diversi aspetti delle
pagine HTML.
Poiché queste funzionalità si attivano col tasto F12, in alcune
occasioni si parla di “F12 Tools”.
Tra questi strumenti troviamo moltissime cose, dall’analisi del
caricamento della pagina all’emulazione dei sensori dei device, dal
debug step-by-step del codice JavaScript etc.
HTML: il BrowserI browser non sono tutti uguali.
Anche se praticamente tutti i browser moderni garantiscono una
pressocché totale aderenza agli standard del W3C (World Wide
Web Consortium), rimangono ancora alcune piccole differenze
nell’implementazione delle direttive, quindi nel modo in cui i singoli
browser mostrano i contenuti.
In sostanza quando lavoriamo al nostro HTML, possiamo trovarci a
fare i conti con:
- la compatibilità dei browser (specie quelli più datati possono
dare problemi);
- le capacità dei dispositivi (in termini di performance e banda ad
esempio);
- le tipologie di schermo cui sono destinate le nostre pagine
HTML.
Se in passato l’idea dominante era quella di tentare di ottenere la
stessa visualizzazione su tutti i browser, oggi è fondamentale che i
contenuti siano proposti in modo adeguato alla singola situazione
(es. mobile, large screen, desktop, vecchi browser, etc.).
HTML: Il Browser
Quale Browser scegliere?
Naturalmente il consiglio è quello di provarli tutti e cercare
quello che meglio ci sembra adattarsi alle proprie esigenze.
È corretto indicare però che in genere nel toolkit degli
sviluppatori Chrome non manca quasi mai, che anche
Firefox è piuttosto utilizzato, vista la varietà dei tool disponibili
e che i browser Microsoft, che pure hanno strumenti avanzati di
sviluppo, sono spesso utilizzati per valutare questioni di
compatibilità.
HTML: software per immaginiLe pagine HTML professionali sono ricche di elementi grafici
(pensiamo ai siti Web o alle App mobile) e sarà fondamentale
avere uno o più strumenti per la creazione e manipolazione delle
immagini.
Per orientarci meglio è utile dividere in gli elementi grafici in due
grandi categorie:
Foto (e illustrazioni) Hanno funzione decorativa o
divulgativa e sono spesso parte del
contenuto della pagina
Elementi di layout Arricchiscono e chiarificano il
contenuto, ma quasi mai ne sono
parte: icone, separatori, badge,
tooltip, bozzetti della pagina
HTML: software per immagini
La suddivisione è tutt’altro che banale, infatti a seconda della
tipologia di immagine possiamo avere software dalle caratteristiche
molto diverse.
Cerchiamo anche in questo caso di capire quali siano le funzioni più
utilizzate e quali i software che ci possono meglio supportare.
HTML: software per immaginiFoto e immagini bitmap
Quando si parla di elaborazione grafica non si può non citare Photoshop.
È certamente il software più completo e più utilizzato, il che significa anche
più ricco di letteratura e di esempi che ci aiutano a lavorare meglio.
Diamo però un’occhiata alle operazioni più frequentemente utilizzate nella
gestione di immagini:
Funzionalità Descrizione
Filtri Almeno le manipolazioni di base come sfocatura,
contrasto, aggiustamento livelli sulla banda cromatica
Tagli di immagine (CROP) Per effettuare tagli precisi delle immagini e rispettare
dimensioni e proporzioni richieste dal layout della pagina
Livelli Consentono di sfruttare diversi layer per lavorare in
modo semplice con le sovrapposizioni
Testi Aggingere e poter manipolare testi e font
Ottimizzazione Molto utili i tool di ottimizzazione del peso in bytes delle
immagini, regolando parametri come sfocatura o numero
di colori.
HTML: software per immagini
In base a queste esigenze, quando il budget non ci
consentisse di avere uno strumento così potente a
portata di mano, abbiamo delle valide alternative
gratuite, come Paint.NET o Gimp.
Le community a sostegno di questi progetti inoltre
sfornano numerosi plugin per estenderne
costantemente le funzioni.
Da non dimenticare anche un software come Pixlr e i
diversi validi servizi on line.
HTML: software per immaginiVettoriali, SVG ed elementi di layout
Una delle pratiche ancora molto diffuse è quella di realizzare il bozzetto del layout
direttamente su Photoshop.
C’è una corrente tra i designer che ha scelto di abbandonare questa tecnica,
prediligendo la definizione degli spazi direttamente tramite semilavorati in HTML e
CSS.
Questo anche grazie alla potenza dei tool di sviluppo dei browser, che consentono
di lavorare in modo rapido sul codice.
In ogni caso poi servono sempre logo, icone per menu e sezioni, elementi decorativi,
badge e tutti gli elementi che caratterizzano lo stile del sito o dell’app.
Anche questi elementi possono essere realizzati con tecniche diverse e con diversi
software.
La pratica più diffusa è quella di realizzare questi elementi in formato
vettoriale SVG, perché:
- è possibile ridimensionarli senza perdita di definizione;
- spesso sono file più leggeri;
- si prestano a manipolazioni interessanti anche con i CSS.
HTML: software per immagini
I software più interessanti per generare questo tipo di file sono:
Adobe Illustrator – parente stretto di Photoshop, altrettanto
blasonato e altrettanto professionale. Ottimo per i vettori, naturalmente
a pagamento
Inkscape - ottimo software open source, con una forte community di
sviluppatori alle spalle e tutte le caratteristiche per manipolare gli SVG
HTML: Elementi e tag
In una pagina HTML tutti gli elementi sono connotati da tag (letteralmente
“etichette”).
Si tratta di marcatori che evidenziano non tanto l’aspetto, quanto il senso, il
ruolo, o l’organizzazione che vogliamo assegnare ai contenuti.
Ad esempio se indichiamo
un titolo con <h1> per noi le parole in quel titolo rappresentano il tema
principale della pagina, al di là del modo in cui saranno visualizzate.
HTML: Elementi e tag
Questa visione “semantica” degli elementi è fondamentale, ci
aiuta a non perdere di vista il fatto che una pagina deve essere un
luogo ordinato di informazioni, soprattutto sul Web.
Se pensiamo ad esempio al classico contesto delle ricerche online,
risulta naturale comprendere che tanto più una pagina sarà
associabile a una keyword o a un tema, tanto più facile sarà trovarla.
Per questo sarà importante curare cose come
l’organizzazione del testo, la definizione dei titoli, dei link
dei grassetti.
HTML: Elementi e tag
Tuttavia in HTML possiamo anche definire lo scheletro
dell’interfaccia utente di una app, e in questo frangente i tag
diventano utili come supporto all’organizzazione del layout o alla
definizione di aree specifiche per l’esperienza utente.
In tutti e due i casi continuiamo a non parlare di “grafica”, ma di
struttura.
HTML: elementi e tagCome è fatto un tag
Un tag è una keyword del linguaggio racchiusa tra
parentesi angolari (<>).
Esempi di tag sono <html>, <body> e <h1>.
I tag HTML non sono “case sensitive” ciò significa che
scrivere <head> o <HEAD> è esattamente la stessa
cosa.
In ogni caso la consuetudine è quella di
scrivere i tag in minuscolo
HTML: Elementi e tag
Molti elementi in HTML servono per descrivere porzioni di
pagina, aree, o contenuti.
Ad esempio
<body> descrive il contenuto di tutta la pagina,
<h1> racchiude un titolo
<p> denota un paragrafo nel testo.
Pertanto un elemento HTML è quasi sempre un
contenitore e il suo contenuto è delimitato da:
- tag di apertura (es. <p>);
- tag di chiusura (es. </p>).
HTML: elementi e tag
Le pagine HTML sono quindi formate per composizione di contenitori
(annidati) l’uno dentro l’altro.
Per capire meglio riprendiamo il nostro semplice esempio:
<!doctype html>
<html lang="it">
<head>
<title>Ciao Mondo!</title>
</head>
<body>
<h1>Ciao Mondo!</h1>
<p>Questa è la nostra prima pagina HTML!</p>
<img src="immagine.jpg">
</body>
</html>
html
|
+---head
| |
| +---title
| |
| +---"Ciao Mondo!"
|
+---body
|
+---h1
|
+---"Ciao Mondo!"
|
p
|
+---"Questa è la nostra prima pagina HTML!"
|
img
HTML: elementi e tag
La struttura che emerge è quella di
un albero, in cui i rami sono tutti tag
contenitori e le estremità sono composte da
testi, immagini o altri elementi come le caselle
di input. Tutti questi elementi finali non sono
contenitori e non necessitano di un tag di
chiusura.
HTML: Elementi e tag
L’albero che abbiamo tracciato ricorda il modo in cui
viene rappresentato il documento nella memoria del
browser, ovvero il DOM (Document Object Model), il
modello del documento HTML di cui
l’elemento <html> è il nodo radice.
HTML: Elementi e tag
Spesso per sottolineare l’annidamento di un
elemento in un altro si usa
“indentare il codice”,
ovvero discostare il contenuto dall’inizio della
riga lasciando spazi (o tab).
In pratica apertura e chiusura del tag si
trovano allo stesso livello, mentre il
contenuto viene spostato verso destra di un
tab.
TAG HTMLSTRUTTURA:
<HTML>
<HEAD>
<TITLE> Pagina web </TITLE>
</HEAD>
<BODY bgcolor=“#FFFFFF”>
corpo del documento ….
</BODY>
</HTML>
NOTA1: Alcuni browser potrebbero visualizzare correttamente una pagina
anche senza i tag di struttura, è però sempre opportuno utilizzarli.
NOTA2: Nel tag body si possono settare vari attributi tra cui l’attributo
bgcolor, che serve per definire lo sfondo della pagina.
All’ attributo bgcolor si può assegnare una stringa esadecimale di 6 caratteri
che definisce un colore tramite il formato RGB (Red Green Blue) preceduta
dal carattere cancelletto (#).
In alternativa si può assegnare direttamente il nome di un colore (green,
blue, red, yellow)
TAG HTML
colore parola chiavenotazione
esadecimale
arancione orange #ffa500
blu blue #0000ff
bianco white #ffffff
giallo yellow #ffff00
grigio gray #808080
marrone brown #a52a2a
nero black #000000
rosso red #ff0000
verde green #008000
viola violet #ee82ee
Ecco una tabella con la notazione di alcuni colori
