Linguaggi e nuove tecnologie per il web - Appunti schematizzati

Linguaggi e nuove tecnologie per il web

Esame: 30 minuti, 15 domande a scelta multipla (2pt ciascuna).

Esempio: Linguaggi e nuove tecnologie per il web.

HTML5

HTML5 è la 5° versione del linguaggio di internet. Si tratta di un’evoluzione del linguaggio HTML per adattare i siti alle nuove esigenze del web. L’obiettivo dell’HTML5 è → 5° versione del linguaggio di rendere HTML indipendente da estensioni proprietarie dei browser (Flash) e di offrire la internet; evoluzione di HTML massima compatibilità tra browser diversi (e dispositivi diversi), in particolar modo i dispositivi mobile.

Obiettivi

• Rendere HTML indipendente da estensioni.
• Offrire compatibilità tra browser e dispositivi, soprattutto mobile.

Novità

• Presenza di tag specifici e tag semantici.
• Nuovi tag audio e video.
• Interazione utente con pagina web, es. form.
• Memorizza dati in locale.
• Elimina tag e attributi obsoleti.
• Supporto alle animazioni e grafica vettoriale SVG.

Le novità riguardano: ≠

• La novità maggiore è data dalla presenza di tag specifici per quanto riguarda la semantica nel markup e quindi l’introduzione di nuovi tag semantici per connotare il significato dei contenuti. La semantica nel markup mira a descrivere il significato dei contenuti web, come ad esempio il fatto che un blocco di testo è un'intestazione, un sottotitolo, un paragrafo o un elenco puntato, piuttosto che specificare come tali elementi dovrebbero apparire a livello visivo.
• Nuovi tag audio e video per controllare direttamente il contenuto multimediale.
• Novità sulle possibilità di interazione dell’utente con la pagina web, ad esempio nella validazione di form (attributo required) = es. campo obbligatorio.
• Capacità di memorizzare dati in locale.
• Eliminati alcuni tag obsoleti, ad esempio il tag <font>, <frame>, ecc., e alcuni attributi obsoleti, bgcolor, align ecc.
• Supporto alle tecnologie legate ad animazioni, JavaScript ecc...
• Supporta l’incorporazione di grafica vettoriale SVG. La grafica vettoriale SVG (Scalable Vector Graphics) è un formato di file basato su XML che viene utilizzato per descrivere grafiche bidimensionali scalabili. A differenza delle immagini raster, come JPEG o PNG, che sono basate su una griglia di pixel, le immagini SVG sono basate su formule matematiche che descrivono la posizione, la forma, il colore e altre proprietà degli elementi grafici.

HTML5 per dispositivi mobile

HTML5 è fondamentale per i dispositivi mobile: per i dispositivi mobile HTML5 è fondamentale, in quanto:

• Supporta le app offline, garantendo il funzionamento dei programmi in caso di interruzione di connettività.
• Supporta la geolocalizzazione per sfruttare al meglio il GPS.
• Supporto alla compilazione form in particolare per dispositivi touch.
• È indipendente dai software per la gestione di contenuti multimediali, Flash.

Supporta le app offline, geolocalizzazione, compilazione di form, è indipendente da software per i contenuti multimediali.

Nuovi tag e attributi

Compaiono nuovi tag e attributi per gestire al meglio contenuti innovativi e agevolare l’inserimento dei dati da parte dell’utente. Possiamo suddividere i nuovi tag in:

• Tag semantici, per migliorare la struttura delle pagine.
• Elementi per formattazione.
• Elementi interattivi.
• Tag semantici per una migliore strutturazione delle pagine.
• Elementi per la formattazione dei contenuti di testo.
• Elementi interattivi.

Gli elementi semantici

L’HTML5 introduce una serie di nuovi elementi semantici, che sono supportati da tutti i moderni browser. Gli elementi semantici sono elementi con un significato. Il nome del tag descrive chiaramente il significato sia al browser che allo sviluppatore.

HTML introduce nuovi elementi semantici. Linguaggi e nuove tecnologie per il web → sono elementi con significato, descrivono il loro contenuto al browser e allo sviluppatore.

<div> e <span> sono elementi non semantici, non ci dicono nulla sul loro contenuto.

<form>, <table> e <article> descrivono chiaramente il loro contenuto e quindi sono elementi semantici. Es. <form>, <table> e <article>. No <div> e <span>.

Possiamo suddividere i elementi semantici dell’HTML5 in: tag semantici, elementi con un significato: descrivono chiaramente il significato sia al browser che allo sviluppatore, es. <form>, <table> e <article>.

Suddivisione degli elementi semantici dell’HTML5

• Tag semantici.
• Details: dettagli aggiuntivi che l’utente può mostrare o nascondere.
• Summary: sommario visibile per tag <details>.
• Time: date/time.
• Article: articolo, post, news, commento; in un elemento article possono essere inseriti altri elementi article.
• Section: sezione all’interno di un documento; deve contenere almeno un titolo.
• Aside: digressione, sezione con contenuto a sé stante, come articoli correlati, elenco di link, banner pubblicitario.
• Nav: menù del sito, link per accedere ad altre sezioni del sito; da non confondere con il tag <menu>; i link a piè di pagina e le breadcrumb non vanno inseriti in <nav>; deve racchiudere <ul> o <ol>.
• Header: blocco di intestazione, definisce una testata di un documento o una sezione; ci possono essere più <header> nello stesso documento.
• Hgroup: intestazione di una sezione, raggruppa elementi h1-h6.
• Main: contenuto principale; può essere presente 1 sola volta; non può essere contenuto in <article>, <aside>, <footer>, <header> o <nav>.
• Footer: piè di pagina per un documento o sezione <section>; può contenere <nav>.
• Figure: illustrazioni, diagrammi, foto, elementi grafici.
• Figcaption: didascalia per tag <figure>.
• Mark: testo evidenziato.

Tag article

Tag article: definisce di una sezione di contenuto semanticamente importante e ben definita. Identifica: articolo di una rivista, post di un blog, una news, un commento a un contenuto. In un elemento article possono essere inseriti altri elementi article.

Tag section

Tag section: definisce una sezione all’interno di un documento. Rispetto al div, le informazioni contenute in section hanno uno stesso valore semantico. Una section deve contenere un’intestazione quindi almeno un titolo (h1-h6).

Tag aside

Tag aside: definisce una sezione in cui è presente un contenuto collegato all’argomento della pagina, ma a sé stante. Es. un modulo di articoli correlati alle informazioni principali, banner pubblicitario, elenco di link, approfondimenti e note.

Tag nav

Linguaggi e nuove tecnologie per il web.

Tag nav: racchiude il menu del sito web, un insieme di link per accedere ad altre sezioni del sito. Da non confondere con il tag <menu>, che può avere come figli sia il tag <li> che <menuitem>, che invece non ha una definizione chiara e che non viene quasi mai usato!

Per utilizzare correttamente l’elemento <nav> dobbiamo ricordare che:

• Solo sezioni che sono costituite da grandi blocchi di navigazione sono appropriati per l’elemento <nav>.
• I link a piede di pagina e le breadcrumb non devono essere inseriti in una sezione <nav>.
• L’elemento <nav> non sostituisce gli elenchi o i link inseriti in elementi come gli <ul> o gli <ol> ma deve racchiuderli.

Tag header

Tag header: è un blocco di intestazione, tipicamente viene usato per descrivere la testata del sito web e anche quella di una sezione. Ci possono essere più elementi <header> nello stesso documento.

Tag hgroup

Tag hgroup: rappresenta l’intestazione di una sezione. Serve per raggruppare un insieme di elementi h1-h6, quando il titolo ha più livelli, come sottotitoli, titoli alternativi o slogan.

Tag main

Tag main: specifica il contenuto principale di una pagina, può essere presente una sola volta nella pagina HTML, non può essere contenuto in <article>, <aside>, <footer>, <header> o <nav>.

Tag footer

Linguaggi e nuove tecnologie per il web.

Tag footer: è tipicamente un blocco di chiusura interno della pagina, identificabile come il piè di pagina, o di una sezione. Viene utilizzato per segnalare contenuti informativi a livello di proprietà del sito, copyright, policy e condizioni d’uso, insieme di link, informazioni di contatto, ma anche l’autore dell’articolo nel caso di un article. Può contenere altri elementi, anche nav, ma solo se si tratta di un menu di seconda navigazione a piè di pagina. Ci possono essere più elementi nello stesso documento.

Tag figure e figcaption

Tag figure e figcaption: il tag <figure> definisce un blocco a parte rispetto al testo, in cui inserire elementi grafici di contorno a livello di contenuto. Con <figcaption> aggiungiamo didascalie e descrizioni. Immagini, grafici, esempi, tabelle.

Tag mark

Tag mark: serve per evidenziare la porzione di un testo, come il classico evidenziatore di Word. Il colore di default è il giallo ma poi su CSS è possibile anche cambiare il colore.

Form

I form sono utilizzati per far inviare agli utenti dati e contenuti al server, il quale procede a elaborarli e processarli. Lato client/HTML, i form sono composti da tag in grado di aggiungere componenti logici relativi alla raccolta di dati, input, come caselle di testo, liste, selezioni multiple ecc. Per fare in modo che un utente non si dimentichi di compilare un campo possiamo assegnare l’attributo “required” in uno qualsiasi dei tag che vogliamo, rendendolo così obbligatorio e suggerendo all’utente che va compilato.

Form → per far inviare agli utenti dati/contenuti al server. Sono composti da tag; assegnando l’attributo “required” a un tag esso diventa obbligatorio.

Tag audio e video

Tag audio e video permettono di gestire i file relativi alla riproduzione di suoni e filmati, che vengono caricati in streaming. Attenzione, lo streaming diventa onere del webserver che ospita il vostro sito. Essendo in streaming, il video o l’audio non devono essere scaricati completamente per essere eseguiti, ma i contenuti vengono forniti via via che il video o l’audio si carica. Questo comporta comunque un grosso dispendio di banda. Per questo spesso vengono forniti i tag audio e video solo in modalità desktop, e oscurati in modalità mobile, se non necessari.

Linguaggi e nuove tecnologie per il web.

Tag audio e video → permettono di gestire i file di suoni e filmati caricati in streaming. Ci sono diversi attributi: src, percorso file da riprodurre; controls, visualizzare barra di controllo; auto play, avvia il contenuto all’avvio della pagina; loop, riproduce il contenuto all’infinito.

Per entrambi abbiamo differenti attributi:

• Src: associa il percorso del file da riprodurre.
• Controls: fa visualizzare la barra di controllo.
• Auto play: fa avviare il contenuto quando si avvia la pagina.
• Loop: riprodurre il contenuto all’infinito.

HTML5: strutturare le pagine

Vengono ufficialmente deprecate le tabelle per il layout, a vantaggio del tag div + float-clear. Deprecate = disapprovate.

Struttura HTML5

Al div si affiancano tag più specifici. Se il div era abbastanza versatile, gli vengono affiancati tag con una finalità molto più precisa e specifica, tag specifici per il content, l’header, il footer... etc. Infatti, grazie ai nuovi tag HTML5 otteniamo una pagina suddivisa in parti ben strutturate a livello semantico. Viene così anche facilitata la lettura da parte dei browser: il markup non è più anonimo, ma è più descrittivo, a tutto vantaggio dei bot e dei crawler. Ogni elemento del markup specifica chiaramente il contenuto attraverso i tag, a vantaggio dell’indicizzazione. Google, ma anche lo sviluppatore, sarà in grado di capire velocemente quale è l’header, il content, il menu e il footer di un sito. Il motore di ricerca attribuirà quindi “pesi” differenti ai vari blocchi semantici del sito.

• Grazie ai nuovi tag, la pagina è ben strutturata a livello semantico.
• Facilitata la lettura da parte dei browser.
• Il markup è più descrittivo a vantaggio dell’indicizzazione.

Linguaggi e nuove tecnologie per il web.

Linguaggi e nuove tecnologie per il web.

CSS3

CSS3 (Cascading Style Sheets 3) è la versione più recente del linguaggio di stile utilizzato per definire l'aspetto di un sito web. Con CSS3 è possibile definire lo stile di una pagina web in modo separato dal contenuto, permettendo di creare design più complessi e personalizzati. Rappresenta un grande passo in avanti per la progettazione di siti web moderni e responsive.

CSS3 → versione più recente del linguaggio di stile.

I CSS3 hanno introdotto delle nuove unità di misura per facilitare la realizzazione di layout soprattutto in chiave responsive. Prima della loro introduzione, per le dimensioni, ma anche per i margin, i border e i padding, degli elementi di tipo block, titoli, paragrafi, div, o inline-block, immagini, solitamente usavamo due tipi di unità di misura:

• Valori assoluti espressi in pixel (px).
• Valori relativi espressi in percentuale (%).
• Valore automatico (auto).

Prima: per le dimensioni di elementi di tipo block, titoli, div, o inline-block, immagini, usavamo valori assoluti espressi in pixel o relativi espressi in %. Per la proprietà font-size potevamo usare valori assoluti o relativi.

Anche per la proprietà font-size, → la proprietà CSS font-size viene utilizzata per definire la dimensione del testo all'interno di un elemento HTML, potevamo usare sia dei valori assoluti, sia dei valori relativi.

Sono valori assoluti:

• Le parole chiave xx-small, x-small, small, medium, large, x-large, xx-large.
• Quelli espressi con unità di misura come pixel (px) o punti (pt).

Sono valori relativi:

• Le parole chiave smaller e larger.
• Quelli espressi in em.
• Quelli espressi in percentuale.

Valori assoluti: pixel, punti, xx-small, medium, large ecc. Valori relativi: smaller, larger, em, %.

Novità: nuove unità di misura per facilitare la realizzazione di layout, la dimensione del testo anche in chiave responsive.

CSS3 unità di misura REM

Unità di misura REM → moltiplica la misura a cui fa riferimento ma è relativa rispetto al font-size del root element. Di default il font-size del tag HTML è 16px (= 1rem).

Nati per facilitare la dimensione del testo anche in chiave responsive, i CSS3 introducono una nuova unità di misura relativa: i rem. Come gli em è un’unità di misura che moltiplica la misura a cui fa riferimento, ma è relativa rispetto al font-size del root element. → Il font-size del root element è il valore di default utilizzato per la dimensione del testo all'interno di un documento HTML. Se non viene specificata nel codice CSS diversamente, i browser di default hanno il font-size del tag HTML pari a 16px, dunque 1rem corrisponderà a 16px.

Posso usare i valori rem per: font-size e line-height, es. padding, margin, width e height.

Unità di misura relative alla viewport

Novità: nuove unità di misura relative alla viewport.

I CSS3 introducono delle nuove unità di misura relative alla viewport del browser in cui viene visualizzato il sito web. La viewport è importante perché influisce sulla presentazione e l'aspetto di una pagina web. Ad esempio, se una pagina web non è progettata per adattarsi alle dimensioni della viewport, potrebbe essere necessario scorrere in orizzontale o in verticale per visualizzare tutto il contenuto, rendendo l'esperienza di navigazione meno piacevole per l'utente.

Linguaggi e nuove tecnologie per il web.

2 unità di misura per dimensionare gli elementi in base allo spazio del browser: la larghezza viewport (vw) e l'altezza viewport (vh) permettono agli elementi di avere una dimensione relativa alla propria viewport, ogni unità rappresenta una % della viewport.

La larghezza viewport (vw) e l’altezza viewport (vh) sono due unità di misura che permettono agli elementi di avere una dimensione relativa alla propria viewport, cioè la porzione visibile all’utente del documento. Ogni unità rappresenta una percentuale della propria viewport.

• Width: 50vw; /* 50% della larghezza della viewport */
• Height: 25vh; /* 25% dell’altezza della viewport */

Queste 2 unità di misura risultano utilissime quando vogliamo dimensionare elementi in base allo spazio fornito dal browser stesso, ad esempio mettere un’immagine full-screen. Solitamente vw si usa per le larghezze e vh per le altezze ma posso usare, per esempio, anche un vh per una larghezza o per altre proprietà.

CSS3 @font-face

@font-face → proprietà per caricare all’interno delle pagine font non standard, salvate nella directory del sito o di una libreria online.

Con la proprietà @font-face è possibile, infatti, caricare all’interno delle pagine web font non standard salvate all’interno della directory del sito web o di una libreria online; consentendo la visualizzazione del sito in modo corretto su tutti i dispositivi e su i browser, indipendentemente dal fatto che il carattere sia installato sul computer dell’utente.

• Consente la visualizzazione senza che il carattere sia installato sul PC dell’utente.
• Deve essere richiamata all’interno di un foglio CSS con nome del carattere e indirizzo.

La proprietà @font-face deve essere richiamata all’interno di un foglio CSS indicando il nome del carattere e l’indirizzo della sorgente del file del carattere scelto. Possiamo usare Google Fonts per il nostro sito.