{"id":230,"date":"2012-02-03T10:54:38","date_gmt":"2012-02-03T09:54:38","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/la-crisit-di-identita-del-pixel\/"},"modified":"2012-02-03T10:54:38","modified_gmt":"2012-02-03T09:54:38","slug":"la-crisit-di-identita-del-pixel","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/la-crisit-di-identita-del-pixel\/","title":{"rendered":"La crisi di identit\u00e0 del pixel"},"content":{"rendered":"

Il pixel \u00e8 sempre stato l’unit\u00e0 di misura pi\u00f9 piccola nel design per lo schermo. Poich\u00e9 \u00e8 sempre stato indivisibile, costituisce l’effettiva unit\u00e0 di misura per i designer per lo schermo. La frase \u201cun pixel \u00e8 un pixel\u201d \u00e8 stata adottata per aiutare i designer per la stampa, non abituati alla densit\u00e0 di schermo fissa, ad afferrare il concetto. A causa di questa consistenza, i web designer hanno adottato i pixel piuttosto che i punti o altre unit\u00e0 per creare i siti web.<\/p>\n

Adesso che l’hardware sta cambiando e che la densit\u00e0 di pixel aumenta, i pixel stanno lottando per ritrovare l’importanza di unit\u00e0 di misura stabile che un tempo avevano. Lo zoom dei browser \u00e8 una cosa ed \u00e8 stata spiegata su QuirksMode<\/a>, ma cos’\u00e8 un pixel negli attuali dispositivi ad alta risoluzione? Perch\u00e9 il 640px x 960px dell’iPhone 4 diventa 320px x 480px nel browser? La verit\u00e0 \u00e8 che ci sono due diverse definizioni di pixel: il pixel hardware (ossia, la pi\u00f9 piccola unit\u00e0 di misura che uno schermo supporta) oppure un pixel pu\u00f2 essere basato su un’unit\u00e0 ottica consistente basata su un \u201cpixel di riferimento\u201d.<\/p>\n

\n

Il pixel hardware<\/h2>\n

Il concetto di pixel hardware ci \u00e8 perlopi\u00f9 familiare: si tratta del pi\u00f9 piccolo punto che uno schermo pu\u00f2 fisicamente mostrare ed \u00e8 solitamente composto da dei sotto-pixel rossi, verdi e blu. La luce di questi tre sotto-pixel viene combinata insieme per creare i colori che vediamo. Dal momento che il pixel hardware \u00e8 collegato ad un elemento fisico sullo schermo, non lo si pu\u00f2 allargare, distorcere o suddividere. Queste propriet\u00e0 rendono il pixel hardware simile all’atomo: l’unit\u00e0 del design su cui costruiamo tutto.<\/p>\n<\/div>\n

\n

L’atomo di riferimento e la divisione degli atomi<\/h2>\n

Le cose stanno cambiando per il pixel. Il W3C attualmente definisce il pixel di riferimento come lo standard per tutte le misure basate su pixel<\/a>. Ora, piuttosto che basare ogni misurazione in base pixel sul pixel hardware, la si basa sull’unit\u00e0 di riferimento ottica<\/em>, che pu\u00f2 essere due volte pi\u00f9 grande del pixel hardware. Questo nuovo pixel dovrebbe apparire uguale in tutte le situazioni in cui lo si visualizzi. Il bello dell’usare un pixel di riferimento \u00e8 che prende in considerazione la vicinanza allo schermo: quando usate un telefono che tenete in mano vicino a voi, il pixel di riferimento sar\u00e0 pi\u00f9 piccolo sullo schermo piuttosto che su una proiezione che guardate da lontano. Se la persona che guarda lo schermo tiene il telefono in maniera tale che sia accanto alla proiezione, le dimensioni dei pixel dovrebbero apparire identiche, indipendentemente dalla risoluzione o dalla densit\u00e0 di pixel o dalla distanza da cui si guarda.<\/p>\n

I pixel di riferimento sono stupendi, ma adesso ci troviamo con due definizioni contrastanti. I dispositivi Android hanno una nuova unit\u00e0<\/a>, chiamata \u201cpixel indipendente dalla densit\u00e0\u201d o \u201cdip\u201d che gli sviluppatori possono usare per trovare su quanti pixel ottici si espande un oggetto. Questo permette agli sviluppatori di usare i pixel hardware per grafica e pattern usando px<\/code> o la nuova definizione relativa di un pixel per la dimensione del testo e il dip<\/code> per avere proporzioni consistenti tra tutti i device. Separare la definizione di un pixel in due unit\u00e0 va bene per Android ma il web ha a che fare con anni di design basati sul pixel per tutti i tipi di dispositivi. Sarebbe stato bello se i web developer avessero avuto anche queste unit\u00e0, ma senza cambiare completamente la definizione di pixel, il web basato sul pixel andrebbe in pezzi. Immaginate cosa succederebbe se un iPhone 4 dicesse a un sito web di essere effettivamente 640px: il testo apparirebbe dimezzato, talmente piccolo che senza lo zoom quel sito web sarebbe quasi impossibile da leggere. Sarebbe impossibile usare tutti quei siti mobile che disabilitano lo zoom.<\/p>\n

\"Img<\/p>\n

Fig. 1: Le dimensioni del pixel standard sul Galaxy Tab e sul Kindle Fire.<\/p>\n<\/div>\n

Inoltre, non possiamo sapere a priori la definizione di pixel usata da ciascun dispositivo e questo \u00e8 un problema. Ad esempio, il Galaxy Tab originale ed il Kindle Fire hanno la stessa dimensione di schermo e la stessa risoluzione, ma i pixel sul Tab, che si aggiustano con il pixel di riferimento, misurano 1,5 volte quello del Fire, che usa il pixel hardware. Uno sviluppatore dovrebbe cercare le informazioni su questi due dispositivi e pensare che se gli schermi sono identici e utilizzano entrambe il rendering engine Webkit, allora il proprio sito apparir\u00e0 uguale. Purtroppo per\u00f2 non \u00e8 cos\u00ec: per quel che riguarda i siti, il Galaxy Tab \u00e8 400px x 683px e il Kindle Fire \u00e8 600px x 1024px.<\/p>\n<\/div>\n

\n

Identificare i punti di rottura e andare avanti<\/h2>\n

Di sicuro possiamo dire che c’\u00e8 un problema con i pixel. Per\u00f2 possiamo usare le media query per identificare le inconsistenze e comportarci di conseguenza. Possiamo usare la media query device-pixel-ratio<\/code> per identificare i dispositivi con i pixel scalati. Possiamo combinare questa informazione con le dimensioni per identificare i tipi di dispositivi con un certo grado di accuratezza. L’iPhone 4 ha una device-pixel-ratio<\/code> di 2, pertanto misura il pixel come due volte pi\u00f9 grande rispetto al pixel hardware. Molti dispositivi Android hanno una device-pixel-ratio<\/code> di 1.5, quindi le cose sono scalate di un ordine e mezzo pi\u00f9 grandi rispetto al pixel hardware. Attualmente, servono i prefissi, ma potete usare questa media query per cominciare ad identificare i dispositivi scalati.<\/p>\n

La specificit\u00e0 \u00e8 fondamentale quando si tratta di identificare le classi di dispositivi, ma dovete prestare attenzione: non siate mai cos\u00ec tanto specifici da individuare un singolo dispositivo e cercare di gestire solo quello nel caso ci siano altri dispositivi che hanno lo stesso problema. Dando un’occhiata al Galaxy Tab e ai dispositivi simili a questo, una device-pixel-ratio<\/code> di 1,5 ci d\u00e0 solo una parte di informazione. La maggior parte dei telefoni Android al momento ha questa stessa device-pixel-ratio<\/code> e i conflitti qui possono portare ad altri problemi. Facendo una query sulla device-width<\/code> per entrambe gli orientamenti ci verr\u00e0 detto che questo \u00e8 pi\u00f9 largo di un telefono, ma non cos\u00ec largo come altri tablet che potrebbero uscire in futuro. Possiamo utilizzare device-width<\/code> per identificare lo schermo, a differenza di width<\/code> e height<\/code>, che fanno query solo sulla viewport. Utilizzando le dimensioni del dispositivo, possiamo ottenere molte pi\u00f9 informazioni sull’hardware in uso:<\/p>\n

@media screen and (device-pixel-ratio: 1.5)
    and (device-width: 683px)
    and (orientation: landscape),
  screen and (device-pixel-ratio: 1.5)
    and (device-width: 400px)
    and (orientation: portrait)<\/code><\/pre>\n
Notate come device-pixel-ratio<\/code> abbia bisogno del vendor prefix per funzionare, quindi aggiungendo -webkit-<\/code> e -o-<\/code> funzioner\u00e0 nei browser Webkit e Opera.<\/p>\n
Diamo adesso un’occhiata ai device come il Kindle Fire, che ha la stessa identica risoluzione hardware del Tab e usa i pixel basati sull’hardware. Avere a che fare con questi dispositivi \u00e8 pi\u00f9 difficile per \u00e8 pi\u00f9 probabile entrino in conflitto con i netbook e con altri schermi pi\u00f9 grandi con una simile risoluzione cos\u00ec come con l’iPad. Usanto le media query orientation<\/code> e max-device-height<\/code> verranno individuati i device che ci servono. I dispositivi di solito danno come altezza un valore minore della loro effettiva device-height<\/code> per fare in modo che i tablet 1024 x 768 non si identifichino con quelli sotto i 600px. Adesso stiamo guardando i tablet che hanno risoluzioni e dimensioni abbastanza consistenti:<\/p>\n
@media screen and (device-pixel-ratio: 1)
    and (device-width: 1024px)
    and (max-device-height: 600px)
    and (orientation: landscape),
  screen and (device-pixel-ratio: 1)
    and (device-width: 600px)
    and (max-device-height: 1024px)
    and (orientation: portrait)<\/code>

<\/pre>\n
\"Img<\/p>\n
Fig. 2: Pixel normalizzati sul Galaxy Tab e sul Kindle Fire.<\/p>\n<\/div>\n
Utilizzare gli em al posto dei pixel vi dar\u00e0 molto controllo su come si scaler\u00e0 il vostro sito, non solo sui caratteri, ma su tutto quello che prima aveva un valore basato sui pixel. Ora, tutto quello che dovete fare \u00e8 cambiare il valore di font-size<\/code> dell’elemento html<\/code>. Far apparire il Kindle Fire come il Galaxy Tab \u00e8 semplicemente una moltiplicazione della dimensione di base di 3\/2 (1,5) nella media query del Kindle Fire. Se volete usare i pixel basati sull’hardware nel Galaxy Tab, moltiplicate la sua dimensione base per 2\/3 (,666667). Dal momento che tutto \u00e8 basato sugli em, il vostro sito scaler\u00e0 in maniera relativa al font-size<\/code> di base. L’esempio completo \u00e8 in questo Gist<\/a>. Cambiarlo a seconda del contesto pu\u00f2 migliorare la consistenza tra le piattaforme.<\/p>\n
Gestire le molteplici definizioni di pixel pu\u00f2 essere complicato. Il pixel \u00e8 l’unit\u00e0 base e questo spostamento verso il pixel ottico causer\u00e0 delle stranezze. I produttori di device stanno facendo un lavoro abbastanza buono nell’identificare questi problemi e nel risolverli cos\u00ec da non doverlo fare noi stessi, ma qualcosa passer\u00e0 sempre tra le crepe o conterr\u00e0 delle inconsistenze. Fortunatamente, abbiamo gli strumenti per identificare e superare questi ostacoli fintanto che saremo coscienti di questo cambiamento.<\/p>\n
Nota dell’editore: a questo articolo sono state aggiunte le informazioni riguardanti i vendor prefix in post produzione, per coprire i browser basati su Webkit e Opera.<\/em><\/p>\n
Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Il pixel \u00e8 stato per molto tempo la particella atomica del design basato sullo schermo: un’unit\u00e0 di misura concreta e conosciuta. Ma i layout basati sui pixel hardware stanno rapidamente diventando una specie protetta. Anche l’introduzione di un nuovo pixel di riferimento, standardizzato dal W3C, sebbene prometta stabilit\u00e0 a lungo termine, non ci aiuta a navigare nel caos attuale. Considerate le due definizioni standard di pixel e le 500 viewport standard che i device Android dei vostri utenti potrebbero supportare. Per creare design che trascendano le differenze tra piattaforme, la promessa del web e degli standard, dovete normalizzare il pixel tra i vari dispositivi. Scott Kellum mostra come la matematica e le media query ci permettano di mantenerci mentalmente sani e ci aiuta a progettare in maniera consistente tra le varie piattaforme.<\/p>\n","protected":false},"author":818,"featured_media":7000642,"comment_status":"open","ping_status":"open","template":"","categories":[258,279,273,58],"tags":[],"coauthors":[349],"class_list":["post-230","article","type-article","status-publish","has-post-thumbnail","hentry","category-graphic-design","category-interaction-design","category-mobile-multidevice","category-numero-43-3-febbraio-2012"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/230","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=230"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000642"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=230"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=230"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=230"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=230"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}