Guida HTML e CSS

HTML è il principale linguaggio di pubblicazione di pagine Web, oltre che uno strumento sempre più utilizzato per la realizzazione di contenuti e applicazioni mobile. Seguendo questa guida imparerai a realizzare pagine e siti in HTML, con tabelle e tanto altro ancora.

Introduzione all’HTML

CSS

Hello HTML! Creare la prima pagina

Ciao Mondo!

Strumenti di sviluppo, l’editor

Il Browser, che cos’è, come e perché tenerne conto

Introduzione all’HTML

HTML è l’acronimo di HyperText Markup Language (“Linguaggio di contrassegno per gli Ipertesti”) e non è un linguaggio di programmazione. Si tratta invece di un linguaggio di markup (di ‘contrassegno’ o ‘di marcatura’), che permette di indicare come disporre gli elementi all’interno di una pagina.

Queste indicazioni vengono date attraverso degli appositi marcatori, detti tag (‘etichette’), che hanno la caratteristica di essere inclusi tra parentesi angolari (ad es, è il segnaposto di un’immagine).

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, spesso 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.

Ciò significa che HTMLnon possiede i costrutti propri della programmazione, come i meccanismi “condizionali”, che consentono di reagire in modo diverso a seconda del verificarsi di una condizione (“in questa situazione fai questo, in quest’altra fai quest’altro”), o i costrutti iterativi (“ripeti questa azione, finché non succede questo”).

Nota: Si parla in questo caso di linguaggio dichiarativo, che serve appunto ad indicare cosa deve apparire sullo schermo (testi, immagini, suoni, etc.), dove e in che sequenza. Nel caso di linguaggi in cui specifichiamo algoritmi precisi con “strutture di controllo”, come C, C++, Java, o anche PHP e JavaScript, parliamo di “linguaggi imperativi”.

HTML + CSS + JavaScript

Anche se non ce ne occuperemo direttamente, è utile sapere che per lavorare con HTML è utile conoscere tutto il cosiddetto “stack“, ovvero tutte le tecnologie necessarie a realizzare un sito o una applicazione.

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

JavaScript
è un linguaggio di programmazione che consente di manipolare veramente qualunque cosa nella pagina HTML: lo stile, i contenuti della pagina, ma soprattutto l’interazione con l’utente. Ci permette di creare la logica dell’interfaccia utente (o anche di una applicazione) e di sfruttare le API messe a disposizione dal browser: dalla gestione del mouse al touch, dalla manipolazione delle immagini, alle richieste di dati dinamiche (in modalità Ajax) alla gestione di dati in locale (grazie ai LocalStorage).

In questa guida approfondiremo tutto ciò che riguarda il potenziale messo a disposizione da HTML ma faremo riferimento spesso anche a queste altre tecnologie, legate a doppio filo con il nostro markup.

HTML è uno standard: il W3C

Da quando Tim Berners Lee, nel 1991, ha definito la prima versione del linguaggio, fino ai giorni nostri, HTML ha continuato ad evolversi fino a maturare nello standard HTML 5.

Il secondo rilascio delle specifiche (HTML 2) è stato pubblicato dallo IEFT nel 1995, mentre già stava nascendo il W3C: World Wide Web Consortium l’organizzazione fondata dallo stesso Berners Lee con CERN e MIT, che oggi vede coinvolti numerosi istituti universitari e i più importanti attori tecnologici sulla scena mondiale come Apple, Microsoft, Google, Facebook, IBM, Adobe, e moltissimi altri.

Il W3C si occuperà di traghettare lo standard attraverso la versione 3.2 (1997) fino alla definizione di HTML 4 nel 1998 e HTML 4.01, la versione che ha sostenuto la crescita del Web di tutti gli anni 2000 e che assurgerà a standard ISO proprio a cavallo del terzo millennio.

Proprio negli anni 2000 nasce XHTML, un filone parallelo che cerca di dare maggior rigore all’HTML, definendolo come “applicazione XML” ne sono già state rilasciate due versioni (XHTML1.0 e XHTML1.1), molto simili a HTML 4.1, poi praticamente abbandonate già nel 2011 quando il W3C decide di affermare lo standard HTML 5 (tutt’ora sussiste una definizione di XHTML5.1 nella bozza delle specifiche HTMl5).

HTML5, Web e mobile

La versione di HTML che esamineremo in questa guida è quella più attuale: HTML 5, che è anche la versione che nasce appositamente per uscire dal solo ambito Web e diventare piattaforma per la creazione di applicazioni, anche desktop e mobile.

La specifica HTML5 infatti si compone della definizione di:

-una sintassi per il markup più efficace e adatta alle esigenze più moderne, con l’introduzione di specifici controlli per i form o degli attributi “data-” da arricchire i tag di informazioni specifiche;

-una serie di API che consentono di gestire, a livello approfondito aspetti come network, multimedia, e hardware dei dispositivi. In altre parole dalla gestione del video e dell’audio al monitoraggio delle batterie di un device.

Questo sviluppo dello standard ha dato il via alla generazione delle cosiddette App mobile ibride, che sfruttano sia HTML5, per creare app che si possono distribuire, come quelle native, sui marketplace dei dispositivi più comuni (come Google Play per Android ad esempio).

Link e ipertesti

La potenza di Internet consiste nell’essere un insieme esteso di contenuti connessi tra loro. Il linguaggio HTML e i link sono alla base di questo meccanismo che consente di muoversi rapidamente tra testi, immagini, video, applicazioni e quant’altro creando percorsi i propri percorsi di navigazione in totale autonomia.

Per accedere rapidamente a una ormai enorme mole di informazioni, sono nati i motori di ricerca, che si basano su una serie di elementi “semantici” per rispondere adeguatamente alle richieste degli utenti. Si parte dall’analisi del testo (o del contenuto) e dei collegamenti, fino a sfruttare i comportamenti degli utenti per catalogare le pagine e stabilire il livello di rilevanza (ranking) che hanno a seconda della singola query di ricerca.

L’ottimizzazione dei contenuti per favorire il posizionamento della pagina per specifiche ricerche si dice SEO (Search Engine Optimization), nel corso della guida ci troveremo a parlarne ancora.

Desktop Support

IE

11*
Edge

17
Firefox

60
Chrome

66
Safari

11.1

Mobile/Tablet Support

iOS Safari

10.3
Opera Mini

None
Chrome for Android

67
UC Browser for Android

11.8
Samsung Internet

6.2

CSS

Grid Container

The element on which display: grid is applied. It’s the direct parent of all the grid items. In this example container is the grid container.

Html

      &ltdiv class="container"&gt
        &ltdiv class="item item-1"&gt&lt/div&gt
        &ltdiv class="item item-2"&gt&lt/div&gt
        &ltdiv class="item item-3"&gt&lt/div&gt
      &lt/div&gt

Grid Item

The children (e.g. direct descendants) of the grid container. Here the item elements are grid items, but sub-item isn’t.

Html

      &ltdiv class="container"&gt
        &ltdiv class="item"&gt&lt/div&gt 
        &ltdiv class="item"&gt
          &ltp class="sub-item"&gt&lt/p&gt
        &lt/div&gt
        &ltdiv class="item">&lt/div&gt
      &lt/div&gt

Grid Line

The dividing lines that make up the structure of the grid. They can be either vertical (“column grid lines”) or horizontal (“row grid lines”) and reside on either side of a row or column. Here the yellow line is an example of a column grid line.

Grid line

Grid Track

The space between two adjacent grid lines. You can think of them like the columns or rows of the grid. Here’s the grid track between the second and third row grid lines.

Grid track

Grid Cell

The space between two adjacent row and two adjacent column grid lines. It’s a single “unit” of the grid. Here’s the grid cell between row grid lines 1 and 2, and column grid lines 2 and 3.

Grid cell

Grid Area

The total space surrounded by four grid lines. A grid area may be comprised of any number of grid cells. Here’s the grid area between row grid lines 1 and 3, and column grid lines 1 and 3.

Grid area

Table of Contents – Grid Props

Properties for the Parent
(Grid Container)

display

Defines the element as a grid container and establishes a new grid formatting context for its contents.

Values:

  • grid – generates a block-level grid
  • inline-grid – generates an inline-level grid
CSS

      .container {
        display: grid | inline-grid;
      }

Note: The ability to pass grid parameters down through nested elements (aka subgrids) has been moved to level 2 of the CSS Grid specification. Here’s a quick explanation.

grid-template-columns

grid-template-rows

Defines the columns and rows of the grid with a space-separated list of values. The values represent the track size, and the space between them represents the grid line.

Values:

  • &lttrack-size&gt – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
  • &ltline-name&gt – an arbitrary name of your choosing
CSS

      .container {
        grid-template-columns:  ... |   ...;
        grid-template-rows:  ... |   ...;
      }

Examples:

When you leave an empty space between the track values, the grid lines are automatically assigned positive and negative numbers:

CSS

      .container {
        grid-template-columns: 40px 50px auto 50px 40px;
        grid-template-rows: 25% 100px auto;
      }
Grid with auto named lines

But you can choose to explicitly name the lines. Note the bracket syntax for the line names:

CSS

      .container {
        grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
        grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
      }
Grid with user named lines

Note that a line can have more than one name. For example, here the second line will have two names: row1-end and row2-start:

CSS

      .container {
        grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
      }

If your definition contains repeating parts, you can use the repeat() notation to streamline things:

CSS

      .container {
        grid-template-columns: repeat(3, 20px [col-start]);
      }

Which is equivalent to this:

CSS

      .container {
        grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px;
      }

If multiple lines share the same name, they can be referenced by their line name and count.

CSS

      .container {
        grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px;
      }

The fr unit allows you to set the size of a track as a fraction of the free space of the grid container. For example, this will set each item to one third the width of the grid container:

CSS

      .container {
        grid-template-columns: 1fr 1fr 1fr;
      }

The free space is calculated after any non-flexible items. In this example the total amount of free space available to the fr units doesn’t include the 50px:

CSS

      .container {
        grid-template-columns: 1fr 1fr 1fr;
      }

Properties for the Children
(Grid Items)

Note:
float, display: inline-block, display: table-cell, vertical-align and column-* properties have no effect on a grid item.

grid-column-start

grid-column-end

grid-row-start

grid-row-end

Determines a grid item’s location within the grid by referring to specific grid lines. grid-column-start/grid-row-start is the line where the item begins, and grid-column-end/grid-row-end is the line where the item ends.

Values:

  • &ltline&gt – can be a number to refer to a numbered grid line, or a name to refer to a named grid line
  • span &ltnumber&gt – the item will span across the provided number of grid tracks
  • span &ltname&gt – the item will span across until it hits the next line with the provided name
  • auto – indicates auto-placement, an automatic span, or a default span of one
CSS

      .item {
        grid-column-start:  |  | span  | span  | auto
        grid-column-end:  |  | span  | span  | auto
        grid-row-start:  |  | span  | span  | auto
        grid-row-end:  |  | span  | span  | auto
      }

Examples:

CSS

      .item-a {
        grid-column-start: 2;
        grid-column-end: five;
        grid-row-start: row1-start
        grid-row-end: 3
      }
Example of grid-row/column-start/end
CSS

      .item-b {
        grid-column-start: 1;
        grid-column-end: span col4-start;
        grid-row-start: 2
        grid-row-end: span 2
      }
Example of grid-row/column-start/end

If no grid-column-end/grid-row-end is declared, the item will span 1 track by default.

Items can overlap each other. You can use z-index to control their stacking order.

Animation

According to the CSS Grid Layout Module Level 1 specification there are 5 animatable grid properties:

  • grid-gap, grid-row-gap, grid-column-gap as length, percentage, or calc.
  • grid-template-columns, grid-template-rows as a simple list of length, percentage, or calc, provided the only differences are the values of the length, percentage, or calc components in the list.

Browser Support of CSS Grid properties

As of May 7th, 2018, only the animation of (grid-)gap, (grid-)row-gap, (grid-)column-gap is implemented in any of the tested browsers.

Browser Support for animatable grid properties

Browser
(grid-)gap, (grid-)row-gap, (grid-)column-gap
grid-template-columns
grid-template-rows
Firefox 55+, Firefox 53+ Mobile
Safari 11.0.2
Chrome 66+
Chrome for Android 66+, Opera Mini 33+
Edge 16+

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

Per il momento ci accontentiamo di questo approccio semplificato, vedremo più avanti come sia importante la scelta dell’ambiente di sviluppo. In questo modo possiamo rapidamente approcciare alla questione che ora ci interessa di più: scrivere la nostra prima pagina HTML.

Lanciamo il nostro editor di testi, ad esempio il classico blocco note di Windows e scriviamo un semplice testo come il seguente:

“Ciao Mondo!”

Estensione .html

Fatto questo salviamo il file con estensione .html ad esempio “hello.html“. Per i meno esperti, Windows a volte nasconde le estensioni e potrebbe risultare difficile salvare correttamente i nostri file. In questi casi possiamo abilitare le estensioni grazie alle opzioni di visualizzazione delle cartelle.

Non è raro trovare pagine HTML con estensione .htm. Questa abitudine, quasi del tutto scomparsa, trova radici nei nomi dei file dell’ms-dos e di Windows 3.1. Questi sistemi operativi potevano gestire solo file con nomi di massimo 8 caratteri ed estensioni di non più di 3 lettere. Dunque .html era diventato .htm, così come .jpeg era diventato .jpg.

Apriamo il file HTML

Una volta assegnata questa estensione, cliccando sul file si aprirà automaticamente il browser predefinito di sistema e mostrerà una schermata simile alla seguente:

Niente di straordinario dunque: viene mostrato il testo a video! Ma vediamo cosa succede se aggiungiamo qualcosa al nostro markup:

Ciao Mondo!

Questa è la nostra prima pagina HTML!

Una volta aggiunto un titolo (Heading) di primo livello “h1″e un paragrafo “p” proviamo ad aggiornare la pagina (in genere basta digitare F5) il testo viene modificato in questo modo:

Il browser mostra il nostro titolo con un carattere grande e in grassetto. Mentre il contenuto del paragrafo (quello compreso tra un “p” è un altro “p” rappresentato con una dimensione più piccola.

In effetti non abbiamo detto nulla sullo stile degli elementi rappresentati, ci siamo limitati a definire un titolo e un paragrafo e, come ci ritroveremo a dire diverse altre volte, questo è il compito del markup HTML. Tali definizioni infatti hanno un’importanza che va oltre la sola rappresentazione grafica.

Le scelte di stile sono comunque importanti ma accessorie, in questo caso vediamo applicate quelle preconfezionate nel browser e vedremo poi come modificarle a nostro piacimento.

I tag “head” e “body”: la struttura minimale della pagina HTML

Per fare le cose un po’ meglio e dirci soddifatti della nostra prima pagina torniamo sul nostro editor e modifichiamo il markup.

Sbirciare l’HTML nelle pagine Web

Abbiamo visto come completare con soddifazione una prima pagina HTML, ma una delle cose più interessanti di questo linguaggio è che il markup è scritto come un testo, perciò è possibile leggere codice scritto da altri.

Tutti i browser infatti danno la possibilità di mostrare il codice HTML delle pagine e quasi tutti permettono di farlo con la combinazione di tasti CTRL+U.

Non ci sorprenda, né ci scoraggi, trovare un codice molto fitto e complesso dietro a pagine apparentemente molto semplici come quella di DuckDuckGo.

Del resto quello di Google è molto più intricato. Come sappiamo HTML è alla base non solo di testi e ipertesti ma di vere e proprie applicazioni.

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 o il deploy dell’app.

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.

Editor di testo

La 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: Atom

Piattaforma: Windows, Linux, Mac

Licenza: Gratuita

Editor: Sublime Text

Piattaforma: Windows, Linux, Mac

Licenza: Praticamente gratis. Si può scaricare una versione di prova che sostanzialmente può utilizzare senza restrizioni o limiti di tempo

Editor: Notepad++

Piattaforma: Windows

Licenza: Gratuita

Syntax Highlighting

Serve a evidenziare la sintassi del linguaggio e rendere più leggibile il codice sorgente. Ogni tag, attributo, numero o parola chiave assume uno specifico colore e diventa subito riconoscibile. Grazie a questa caratteristica emergono più facilmente eventuali errori di battitura e diventa anche più chiara la struttura della pagina.

Autocompletamento

Mentre scriviamo il codice l’editor propone di completare automaticamente la parola o il comando che stiamo digitando. Ci sono diversi livelli di autocompletamento anche in base ai linguaggi.

In HTML ad esempio può risultare comoda la chiusura automatica dei tag: quando finiamo di scrivere

-viene subito scritto automaticamente;

-lasciandoci la comodità di scrivere dentro altro contenuto.

Altra comodità è il suggerimento delle regole CSS, visto che sono numerose e non è male averle tutte sotto mano per decidere quale inserire.

Community e plugin

Anche se gli editor offrono poche funzioni di base, le esigenze possono portarci a voler aggiungere alcune caratteristiche e diventa importante valutare quanti e quali plugin sono disponibili, quanto è numerosa la base di utenti e quanto è attiva la comunità degli sviluppatori. Un plugin a volte può essere determinante

Tra i plugin più utili ci sono ad esempio quelli che permettono di memorizzare e replicare degli snippet di codice (o il testo lorem ipsum ad esempio), quelli che permettono il confronto tra versioni diverse dei file (diff).

Macro e Shortcut

Le scorciatoie da tastiera sono estremamente importanti quando si sviluppa. Tutti gli editor mettono a disposizione le combinazioni di tasti per le operazioni più comuni: copia, incolla, taglia, undo etc.

Possiamo aver bisogno però di ulteriori automatismi, come richiamare uno snippet di codice, selezionare direttamente un tag etc. Per ottenere questo può rivelarsi determinante un editor che consenta di registrare sequenze di azioni (macro) da poter associare a combinazioni di tasti (shortcut).

Quale editor scegliere?

Gli editor di testi di cui sopra soddisfano tutti i requisiti citati e la scelta è veramente molto soggettiva, a volte legata anche all’abitudine. Tuttavia, per chi non fosse già particolarmente affezionato ad un software in particolare, la scelta potrebbe cadere su Atom.io, considerando che dei tre è il prodotto più giovane, gira su tutte le piattaforme è gratuito e ricco di estensioni.

Il Browser, che cos’è, come e perché tenerne conto

Il 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, sono due quelli che ci interessano di più: il caricamento e la visualizzazione (rendering) della pagina HTML.

Caricare la pagina HTML

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:

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 applcazione risultino gradevoli da utilizzare bisognerà fare in modo di minimizzare quanto più possibile i tempi di caricamento.

A tal proposito esistono una serie di tool e tecniche come la “minificazione” del codice, il caching, l’uso di siti ad hoc per il trasferimento veloce di contenuti (CDN), gli sprite, etc. Cose di cui non ci occuperemo direttamente, ma delle quali è utile conoscere l’esistenza.

Alcuni di questi accorgimenti come la cache sono inseriti anche nei browser. Inoltre tutti i browser inoltre forniscono dei tool per gli sviluppatori (in genere si attiva digitando F12) che consentono, tra le altre cose, di monitorare i tempi di caricamento dei file.

Rendering della pagina

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.

Anche a questo proposito ci sono una serie di strumenti, all’interno dei browser stessi, per verificare il tempo di esecuzione e l’uso di risorse dovute all’elaborazione della pagina.

Il browser e gli strumenti di sviluppo

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 agli editor di SVG. Vediamo quelli più utili nel contesto di questa guida.

L’esplorazione del codice e modifica dei CSS

Possiamo sezionare la pagina e vedere cosa c’è dietro a ogni elemento. Inoltre possiamo esaminare e modificare il CSS per effettuare delle modifiche e verificare “al volo” gli effetti.

Mobile View

È una modalità che ci consente di effettuare una prima e rapida valutazione della resa grafica e della user experience che otterremo sui dispositivi mobili.

È una modalità che ci consente di effettuare una prima e rapida valutazione della resa grafica e della user experience che otterremo sui dispositivi mobili.

Molto utile per interventi rapidi: per tracciare variabili, testare piccole porzioni di script o ricordare al volo le proprietà e i metodi di un oggetto.

I browser non sono tutti uguali

Anche se praticamente tutti i browser moderni garantiscono una pressocché totale aderenza agli standard del W3C, 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.).

Un buon riferimento per verificare la compatibilità dei browser è caniuse, in cui troviamo le direttive e funzionalità che sono supportate dai più importanti browser in circolazione, sia desktop, sia mobile.

Caniuse riporta anche le statistiche di accesso con diversi browser, un indice comunque utile per valutare la diffusione dei browser, le preferenze degli utenti e la penetrazione delle nuove versioni.

Quale Browser scegliere?

Naturalmente il consiglio è quello di 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à.

Tweet: Non-techy entrepreneur building your brand on a budget? Start HERE with a month FREE! @theloredanacom https://ctt.ec/JCO15+ Imprenditore non tanto tecnologico che vuole costruire il suo marchio con un budget limitato? Inizia QUI con un mese GRATIS!

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: