¿Qué tiene que hacer un desarrollador web para que su página se adapte a las pantallas retina?

llevo dos años pidiendoles que mejoren la app para iphone, y ni una sola mencion,,, No es solo por applesfera, sino por weblog entera

Apple no se ciñe a los estándares, los crea.

Así impuso el uso de la pantalla táctil de tu móvil, la forma de consumir música y aplicaciones, y tantas otras cosas que han hecho que el mercado de ordenadores y dispositivos sea un lugar más interesante.

"Apple no se ciñe a los estándares, los crea."

¿Soberbia? ¿Donde?

Tú tienes una pantalla táctil, tú usas iTunes para tu música y apps.. no todo el mundo.

Quien está hablando de patentes, los estándares los imponen a base de copar mercados con sus conceptos innovadores.

Una cosa más:

La estrategia de Apple pasa por ir conquistando estándares estables en el tiempo.

Se enfocan en algún aspecto técnico o conceptual que se pueda mejorar en los dispositivos actuales y lo exprimen hasta poner el listón de calidad lo suficientemente alto como para que no sea necesario seguir subiéndolo.

De ahí el tomar como referencia la resolución que es capaz de distinguir el ojo humano a la distancia normal de uso de cada dispositivo ¿para que subir de ese punto?

Por eso los diseños de iMacs, iPhones, iPads, son tan durables en el tiempo, han llegado a un nivel óptimo y sólo requiren pequeñas actualizaciones cada año.

Es la razón por la cual el iPad 3 no se llamó así y paso a ser el (nuevo) iPad, su diseño se ha estabilizado. Y no hay más que mirar a la competencia para darse cuenta que lo han convertido en un estándar.

No es cierto. A la distancia de visionado de un portátil no es necesaria la resolución Retina. La forma sigue la función. Que función tiene realmente una pantalla así en un portátil??? Ver mis fotos más bonitas??? Trabajar a una resolución que en dos minutos la gráfica y el procesador echan humo??? Es un sinsentido. Está bien para los de marketing y los apasionados de apple. Que conste que soy uno de ellos pero la gallina de los huevos de oro bajo el nombre retina está agotada.

¿Copar mercados?

Desktop Operating System Share (1)
Windows 92.2%
Mac 6.7%
Linux 1.1%

¿Listón de calidad?, ¿Nivel optimo?, ¿diseños durables?!!!

iPad 3 - No carga su batería al ejecutar algunas aplicaciones
iPhone 4 - Esque no lo estás agarrando bien
iPad 2 - Manchas de luz en las pantallas
iMac blancas - Lineas verticales de 1px de ancho en las pantallas
Apple - "Apple retira sus productos de la certificación EPEAT".

¿Perder una certificación es un indicador de calidad? Si es que cuando uno no quiere ver algo basta con cerrar los ojos.

Si no recuerdo mal la pantalla es Sharp. Eso es innovación. Lo que pasa es que el único fabricante capaz de sacarlo al mercado y que se venda sin dar una explicación puramente técnica es Apple

Es cierto que innovan, y que seguramente tenga algún resultado positivo más que negativo para los usuarios, pero respecto al iPad, yo no tengo conocimiento que nadie haya adaptado la web para verla en el iPad, y en todo caso, si lo han hecho, ya ha supuesto un gasto añadido, igual que con el iPhone. Este caso supone un gasto que mucha gente puede pensar como innecesario, por eso digo (decimos) que no tiene cabida como algo tan popular entre las empresas como puede ser crear una App para iPad o iPhone.

No me he olvidado de ningún matíz. De hecho, si me permites el atrevimiento, creo que estás algo equivocado en cómo pasar algo a pantalla retina. (Ojo que lo digo de buen rollo, así que no me comas :P Nótese también que es una percepción, no tiene por qué ser verdad. Y de hecho aunque tuviera razón eso no significa que todo lo que yo diga sea correcto. Toma disclaimer! ;))

Como han dicho más abajo una pantalla retina, no es más que un display con un DPI mucho más alto de lo normal (HiDPI) y esto tiene que ver con la resolución, pero a la vez no tiene que ver, y me explico.

Lo que persigue una pantalla HiDPI es aumentar la definición, y para eso tienes que aumentar el número de píxeles que metes por unidad de área (el DPI) para que en una misma unidad de área tengas más pixeles, y por tanto mayor definición.

Sin embargo si únicamente aumentas la resolución por unidad de área, lo que vas a conseguir es que todos los elementos se vean más pequeños, de ahí que el SO tenga que tener soporte para modificar el DPI al dibujar las cosas, de forma que éste mantenga el tamaño de los elementos en pantalla independientemente de la resolución

En el MBPro Retina, con la resolución retina pese a que tienes 4 veces más píxeles, no tienes 4 veces el espacio de escritorio que tenías antes, tienes el mismo que en un MBPro de 15'' sin retina!

Es decir, la idea general para las pantallas retina es que ahora las imágenes (todo lo que sean mapas de bits, si alguien quiere saber por qué, que mire el siguiente mensaje que pongo un ejemplo) tienen que tener más resolución para que se vean bien en pantallas con alto DPI. Pero se verá bien en todas, no sólo en una. De hecho la imagen se verá perfectamente en pantallas con bajo DPI, ya que reescalar hacia un tamaño menor queda mucho mejor.

Luego ya habría que ver cómo optimizas tu aplicación o tu web para que cada visitante descargue sólo lo necesario, es tontería bajarte una imagen 4veces más grande (y por tanto de mayor tamaño) si no tienes una pantalla HiDPI por que no vas a notar la diferencia.

Eso por ejemplo lo hace Apple en su web oficial, si detecta una pantalla HiDPI, descarga una versión de las imágenes de mayor tamaño en segundo plano, y como no es algo instantáneo, se nota si te fijas :)

Pongo un ejemplo para explicar por qué hay que cambiar las imágenes, pero lo separo para que no quede un post mega tochísimo.

Supongamos la resolución del ipad2 y un botón cuadrado que mide 50x50px Supongamos también que al mostrarlo en la pantalla, cogemos una regla y lo medimos (si, en la pantalla) y nos sale que mide 1cm de lado.

Bien, ahora mostramos el mismo botón en el ipad3. Si volvemos a medirlo veremos que sigue midiendo 1cm. ¿Cómo es posible? La pantalla del ipad3 empaqueta en el mismo área física de la pantalla el cuádruple de pixeles, por lo que el botón debería verse mucho más pequeño (concretamente 4 veces más pequeño)

Lo que hace el sistema es dibujar el botón 4 usando veces más píxeles, por eso se ve mucho más definido.

Esto se puede hacer así por que el sistema dibuja el botón (o el texto, etc) y entonces puede calcular el DPI y dibujarlo a la mayor calidad.

Pero hay un problema, las imágenes de bits. Las imágenes de bits están definidas para una resolución y un DPI concreto, y eso define su tamaño real. Los mapas de bits una vez creadas, no se puede cambiar, no se dibujan de forma dinámica, se dibujan una vez y se guarda en un fichero. Por tanto si le dices al sistema Que dibuje una imagen de 50x50px en una pantalla con el doble de DPI, lo que hará será lo mismo que con el botón: dibujarla usando 4 veces más píxeles (tamaño de 100x100px) El problema es que como es una imagen y no podemos "redibujarla" lo que hace el sistema es escalarla. Y eso es lo que provoca la falta de definición.

Si, ahora te he entendido correctamente, pero aún así, al menos como yo lo veo, eso no es un tema de la pantalla "retina" sino de optimización web para diferentes resoluciones, algo que ya ocurre con o sin pantallas HiDPI.

Obviamente no deberías servir los mismos assets a dispositivos móviles que en escritorio, o incluso separando entre tablets y smartphones, y hay técnicas para adecuar el diseño (por css media queries por ejemplo)

Vamos, que yo creo que es un tema distinto, y que este gráfico simplemente habla del escalado de los elementos que lo requieren para no perder nitidez en una pantalla HiDPI.

En una página dinámica, es cosa de llamar a un método para que genere una imagen de acuerdo al tamaño de la pantalla. Vamos en plan "Oye servidor, si el dispositivo no es retina, genera una imagen 4 veces menor".

No es nada complicado a nivel profesional.

En todo caso la diferencia entre el nuevo iPad y un Mac retina no es relevante, puesto que, al menos que las medidas las bases en porcentajes, esa diferencia que tienen, se verá marcada en el espacio "vacío" de la web a los costados.

Las páginas webs SIEMPRE se han ido adaptando al "parque de pantallas" que hemos tenido los usuarios.

Actualmente se adopta como estándar los 1024 pixeles de ancho de pantalla para diseñar webs (teniendo en cuenta que cada navegador consume una cantidad diferente de esos píxeles para su propia interface). Así te aseguras que la gran mayoría de tu público ve tu web a ancho completo en sus pantallas.

Tardará el tiempo que tarde, pero cuando estás resoluciones se vayan imponiendo en las pantallas las webs ira´n haciendo su transición

Nuevas resoluciones cada vez mayores, que aún me acuerdo de cuando las webs eran a 640 de ancho.

+1

¿Puedes ser más concreto sobre cómo hacerlo?

Lo digo por que el que hizo ese grafo no es precisamente un don nadie: http://en.wikipedia.org/wiki/Thomas_Fuchs

El CSS no tiene porque cambiar lo más minimo, las pantallas retina toman el CSS como si no fueran retinas, no hay que tocar ni un punto el CSS…

¿Problemas en crear imágenes mayores y en hacer las cosas que puedas con css para que ocupe menos que las imágenes y el navegador las dibuje a la resolución adecuada?

Ojalá todos mis problemas como desarrollador fueran así amigo...

Y no sólo eso. Tantos años de práctica en optimización para arañar segundos al servidor y ahora sin venir a cuento a doblar el tamaño de imágenes...

Hombre, si, pero las imágenes se cachean y tal :)

Si y no. Depende de como lo tengan montado. Puedes usar un ajuste automático de la imagen. Lo que haces es guardar la imagen en versión retina y si detecta que es una versión normal o retina se ajuste.

Siempre y cuando la imagen original no sea mas pequeña que la retina...

"En definitiva, que el que haga una web nueva, es posible que aproveche para hacerla adaptada, pero entonces surge una pregunta: Y el resto de gente que no tiene pantalla retina en sus portátiles u otros? ( que son muchos!! ) como la verán esa web adaptada a retina"

Pues igual que las adaptaciones a móviles, se detectará automáticamente. Como en la web de apple, pero ni ellos la tienen 100% optimizada.

Pero está claro que en la mayoría de casos no merece la pena adaptarla de momento, es un mercado demasiado pequeño.

Sin duda, no merece la pena, y seguramente no llegue a merecerla nunca!

Bueno eso de nunca... no me atrevería a decirlo. Como todo en tecnología e informática va bajando de precio (excepto las subidas de IVA) y se va implantando. Lo mismo se decía de adaptar las webs móviles y mira.

Pero a día de hoy, como hemos comentado, mejor gastar el tiempo en otras cosas.