La viewport di un dispositivo | OTHER chapters | ||||
Nomi di dominio, DNS e pagine web: FAQ Le FAQ presenti riguardano l'installazione di un sito web su un server esterno, acquistato in Hosting condiviso ( senza accesso, quindi, all'intero disco fisso del server ) e con un sistema operativo Linux. Le pagine per tablet e cellulari Creo una pagina web e la apro con il browser del mio computer di casa ( desktop ): la vedo bene e leggo bene i testi che contiene. Se, invece, la apro con il browser del mio cellulare, faccio fatica a distinguere le lettere: la pagina sembra illeggibile, a causa dei caratteri ( font ) troppo piccoli, soprattutto se tengo il cellulare in posizione verticale. Il problema nasce dall'esistenza di molti apparecchi, computer desktop, cellulari, tablet, computer portatili, ognuno dei quali caratterizzato da una sua risoluzione video. La risoluzione video definisce la grandezza degli oggetti contenuti all'interno dello schermo, compresi i caratteri di testo.
Le dimensioni degli oggetti HTML che compongono la pagina web vengono impostati nei file CSS ( Cascading Style Sheets ). CSS è un linguaggio per la stesura dei fogli di stile, fogli nei quali gli autori di contenuti web possono memorizzare gli stili da applicare alle pagine web ( font, spazi, strutture ), quali i documenti HTML e le applicazioni XML. Un documento HTML è composto da più oggetti, quali i paragrafi, le liste, le intestazioni, i link, le immagini, etc. Ciascun oggetto è figlio ( child ) di un oggetto che lo contiene ( parent ) e può essere, a sua volta, padre ( parent ) di un oggetto posizionato al suo interno ( child ), in una catena gerarchica di oggetti, lungo la quale si propagano alcune proprietà, che passano da un oggetto padre al successivo oggetto figlio. Questo significa che, impostando una proprietà all'interno dell'oggetto radice, l'oggetto HTML che contiene tutti gli altri oggetti, non sarà più necessario impostare quella proprietà per gli oggetti figli, a meno che non si desideri modificarla per un oggetto HTML particolare. Questo è il meccanismo chiamato, nel linguaggio CSS, ereditarietà. Non tutte le proprietà CSS possono essere ereditate. Inoltre, le proprietà ereditabili potrebbero non esserlo per alcuni elementi ( oggetti ). Occorre verificare le pagine dedicate alla singola proprietà, per conoscere le regole di ereditarietà per la singola proprietà. Il primo elemento ( oggetto ) di un documento HTML è, non sorprendentemente, l'elemento:
il cui TAG di apertura, all'interno di una pagina HTML, segue immediatamente la dichiarazione della versione HTML:
Questa è la struttura gerarchica di un documento HTML. All'interno dell'elemento BODY, la gerarchia dei diversi oggetti viene definita, ovviamente, dal programmatore della pagina web. L'elemento HTML rappresenta la radice ( root ) di un documento HTML ( pagina web ). Gli autori sono incoraggiati a specificare l'attributo lang, per questo elemento HTML root:
Il selettore CSS per l'attributo lang dell'elemento html sarà:
Quindi, sarà possibile, per esempio, modificare il colore di sfondo dell'intera pagina HTML, agendo proprio sull'elemento html:
Il corpo della pagina HTML visibile agli utenti è compreso tra le TAG:
L'elemento head, invece, comprende una serie di metainformazioni, informazioni, cioè, relative alla pagina web che l'utente sta caricando, utili al browser, oppure ai motori di ricerca, ma non visualizzate sullo schermo dell'utente, eccetto il titolo della pagina. Ed è proprio tra queste metainformazioni che è possibile inserire un'informazione che ci permetterà di ridurre sensibilmente il problema delle differenti risoluzioni nei diversi apparecchi. Questa metainformazione fa parte delle tecniche sviluppate nel cosiddetto Responsive Web Design, che permette al browser di ridimensionare le pagine web, restringendole o allargandole, oppure nascondendone o spostandone il contenuto, al fine di renderle compatibili con la periferica utilizzata. Il nuovo metatag, da inserire all'interno dell'head di una pagina web, è il:
che suggerisce al browser di disporre il contenuto della pagina in una viewport, la porzione visibile della pagina web, di dimensioni pari allo schermo del cellulare corrente. In uno smartphone, per esempio, lo schermo fisico potrebbe avere una larghezza di 320 pixel, ma, quando il browser carica una pagina web, ne dispone il contenuto in una viewport di 980 pixel di larghezza, che è la grandezza che si suppone potesse avere nella sua versione originale ( pubblicata, normalmente, su un computer desktop ). La conseguenza è che i contenuti della pagina vengono ristretti, in modo da poter essere visualizzati in un apparecchio il cui schermo è di 320 pixel e non di 980 pixel. Con il metatag viewport da noi impostato, invece, stiamo suggerendo al browser che il contenuto originale della pagina web che sta caricando è stato creato per una viewport della grandezza dello schermo fisico della periferica ( cellulare, tablet ) sulla quale il browser è installato. In questo caso, quindi, il browser non dovrà fare alcuna supposizione sulle dimensioni della viewport originale e non dovrà, di conseguenza, ne restringere ne allargare i contenuti della pagina web. Le dimensioni della viewport possono essere espresse in pixel:
oppure con la parola chiave:
che rappresenta la larghezza del 100% della viewport della periferica corrente. Non è tutto. Nel campo content della viewport è anche possibile specificare il livello di zoom da applicare al contenuto della pagina, impostando la proprietà:
Nel seguente esempio:
stiamo suggerendo al browser di rappresentare gli oggetti HTML in un rapporto 1:1. Specificando valori inferiori a 1:
il browser effettuerà uno zoom all'indietro ( zoom out ), rimpicciolendo gli oggetti, mentre specificando valori superiori a 1:
il browser effettuerà uno zoom in avanti ( zoom in ), ingrandendo gli oggetti. L'oggetto viewport supporta altri attributi, quali:
che indicano al browser i moltiplicatori minimo e massimo che l'utente potrà usare per effettuare uno zoom all'indietro ( zoom out ), oppure uno zoom in avanti ( zoom in ). Nell'esempio seguente:
stiamo impedendo all'utente di zoomare in avanti, oltre alle dimensioni naturali della pagina. Per impedire all'utente lo zoom dei contenuti, è sufficiente, anche se sconsigliato, utilizzare un altro attributo:
Per chiarire ulteriormente, è utile la lettura dell'articolo A pixel is not a pixel, di Peter-Paul Koch, in cui si spiega come un pixel, in realtà, sia "un costrutto astratto, creato appositamente per gli sviluppatori del web". Se, nel nostro foglio di stile CSS, fissiamo la grandezza di un elemento qualsiasi, usando i pixel:
cosa accadrà quando l'utente ingrandirà la pagina, eseguendo uno o più zoom, sul proprio cellulare? Accadrà che i 300 pixel CSS andranno ad occupare molti più pixel fisici del cellulare sul quale è stato effettuato lo zoom. "Quando lo zoom è al 100%, i pixel CSS si sovrappongono ai pixel fisici del cellulare". In questo caso, quindi, i 300 pixel CSS corrispondono ai 300 pixel fisici. L'attributo:
rappresenta esattamente la larghezza dello schermo, espressa in numero di pixel della periferica ( cellulare, table, etc. ), non in numero di pixel CSS. "Il tag VIEWPORT, originariamente proprietà di Apple, ma oggi supportato da molti browser per apparecchi mobili, fa coincidere esattamente la viewport con lo schermo dell'apparecchio". L'attributo:
indica al browser il livello di zoom da applicare. Dire:
significa dire che 1 pixel CSS è uguale ad un pixel fisico. Attenzione: una periferica potrebbe avere non solo una sua risoluzione video, bensì anche una sua densità di pixel. Prendiamo l'esempio riportato da Mozilla, nell'articolo Using the viewport meta tag to control layout on mobile browsers: "Lo iPhone e molti cellulari Android hanno schermi da 3 fino a 4 pollici (7–10 cm), con 320 — 480 pixel (circa 160 dpi, o dot per inch, o punti per pollice)". Il DPI ( dots per inch ), indica, in fase di stampa, il numero dei punti presenti in una riga di un pollice. Un pollice ( inch ) corrisponde a 2,54 centimetri. Più punti sono presenti in un solo pollice, maggiore sarà la risoluzione dell'immagine. Non esiste alcuna relazione tra un pixel ed un punto: alcuni dispositivi utilizzano più punti per rappresentare un solo pixel. "Firefox per Maemo ( una piattaforma di sviluppo di Nokia ) viene eseguito su Nokia N900, che ha le stesse dimensioni di iPhone, ma 480 — 800 pixels (circa 240 dpi). "A causa di questa differenziazione in DPI, l'ultima versione di Fennec ( Firefox per Android ) stampava a video molte pagine più piccole di un terzo, circa, rispetto alle pagine prodotte da iPhone o Android. Fennec 1.1 per Maemo usa 1.5 pixel hardware ( fisici ) per ciascun pixel CSS, seguendo le indicazioni del browser per Android WebKit. Questo significa che una pagina con:
verrà visualizzata quasi con le stesse dimensioni fisiche in Fennec per Maemo, Mobile Safari per iPhone, Android Browser per cellulari HDPI ( high density, circa 240dpi ) e MDPI ( medium density, circa 160dpi ). Negli schermi da 240-dpi, le pagine con:
verranno effettivamente ingrandite al 150%, sia da Fennec, sia da Android WebKit. I testi saranno chiari e precisi, ma le immagini, probabilmente, non riceveranno alcun beneficio. Per avere immagini più nitide, gli sviluppatori web potrebbero creare immagini, se non l'intera pagina, al 150% delle loro dimensioni desiderate (o 200%, per supportare le periferiche a 320-dpi, quali il display retina di iPhone), per poi scalarle, usando CSS o le proprietà di viewport".
|
|||||
La viewport di un dispositivo | The .bit guides: original contents |