In Evidenza
Il Contest del giorno su iPadevice
Contest
icon120_473087400
Vinci 15 copie di iParolix HD su iPadevice!
Partecipa al Contest lasciando un commento e vinci quest'applicazione
Ultime Notizie

Display Retina del Nuovo iPad: quali implicazioni per gli sviluppatori web?



Questo venerdì, 16 marzo, le prime unità del nuovo iPad arriveranno nelle mani delle persone. Il nuovo tablet Apple ha una risoluzione quattro volte superiore rispetto agli schermi classici. Questo vuol dire che i visitatori potranno visualizzare i vari siti web su di uno schermo ad alta risoluzione, con ben 3,1 milioni di pixel.

Gli schermi nitidi e cristallini sono un’impressionante novità per i possessori del nuovo iPad, ma allo stesso tempo creano alcuni nuovi dilemmi agli sviluppatori web che vorrebbero offrire una migliore esperienza per questi schermi ad alta risoluzione. Effettivamente, la maggiore densità di pixel implica il fatto che è possibile rendere disponibile una grafica migliore e più nitida, ma naturalmente c’è anche un piccolo “prezzo” da pagare. Immagini più grandi si traducono in una maggior larghezza di banda e un tempo di caricamento delle pagine più lungo.

Il problema è semplice: è necessario inviare immagini più piccole a schermi piccoli ed immagini di dimensioni maggiori a schermi più grandi. Inviare un’immagine enorme ottimizzata per l’iPad ad un dispositivo con una risoluzione massima di 320×480 semplicemente non avrebbe senso. Allo stesso tempo, quando la larghezza di banda non è un problema, la maggior parte dei siti vorranno rendere disponibili contenuti ad alta risoluzione per i display in grado di gestirli al meglio.

La soluzione ideale sarebbe rilevare sia la risoluzione dello schermo, sia la larghezza di banda disponibile. Quindi, in base alla combinazione di questi due fattori, il server potrebbe fornire l’immagine appropriata. Attualmente non è possibile, anche se ci sono già delle proposte per arricchire l’HTML per riuscire a gestire tale scenario.

Il Responsive Image Working Group, appartenente alla comunità W3C, spera di riuscire a risolvere alcuni di questi problemi. Il gruppo sta proponendo un nuovo elemento HTML, “<picture>“, che terrà conto di alcuni fattori come la velocità della rete, le dimensioni del dispositivo, la densità dei pixel dello schermo e la cache del browser per capire quale immagine fornire. Pensate ad una versione molto più intelligente dell’attributo lowsrc. Per il momento, però, è tutto ipotetico.

Anche Apple si sta preparando per riuscire ad offrire immagini ad alta risoluzione per gli iPad di terza generazione. Fondamentalmente, la società di Cupertino rende disponibili di default le immagini a bassa risoluzione, per poi inviare agli iPad le immagini più grandi, utilizzando un JavaScript. Questo meccanismo funziona, anche se per i nuovi iDevice implicherebbe un aumento dei tempi di download, per il fatto che dovranno scaricare due file per ogni componente grafica. Tale approccio di Apple andrà ad incrementerà anche il numero delle richieste HTTP, che a loro volta potrebbero rallentare la pagina.

Via | Webmonkey

999 Visite


2 Commenti

  1. bell’articolo
    a me sviluppatore è piaciuto molto
    a tutti gli sviluppatori web che ancora non lo conoscono consiglio di usare Sencha Touch, che permette di creare web app e siti mobile senza preoccuparsi del dispositivo e della risoluzione

    la stessa azienda offre anche un servizio che risolve proprio il problema di cui si parla in questo articolo, cioe vi basta caricare sul loro server le immagini che volete inserire nel sito in hd, e richiamarle con un url personalizzato. in questo modo loro rileva chi sta visitando il sito e con che risoluzione, e manda una versione adattata dell’immagine originale

    si chiama sencha.io

  2. In realtà effettuare dei controlli per vedere se un tablet/smarthphone utilizza un display di tipo retina è molto semplice, basta utilizzare i media-queries, ad esempio:
    media=”only screen and (-webkit-min-device-pixel-ratio: 2)”

    Oppure, via Javascript con la proprietà window.devicePixelRatio
    if( window.devicePixelRatio >= 2 ){ … }

    Ciao,
    Nicholas

 

   Commenti




Quick Apps - recensioni veloci delle ultime App per iPad!
quickapp_hover
icon120_583715630
Il Cruciverba Gigante
quickapp_hover
Fighter Wings HD
Fighter Wings HD
quickapp_hover
icon120_647122531
Plastic
quickapp_hover
ipash
ipash
quickapp_hover
Tesina
iTesina HD
quickapp_hover
icon120_592430341
Favole per Bambini

I Partner Esclusivi di iPadevice