Actividad # 18

Adaptacion de una pagina web a cualquier dispositivo

Debido al auge actual del uso de móviles y dispositivos portables para acceder a internet y su inevitable crecimiento, es necesario para los desarrolladores y todos los que publican artículos en internet, buscar alternativas para lograr que las páginas web creadas se muestren correctamente en cualquiera de estos medios: teléfonos y otros equipos portables como tabletas y eBooks y por supuesto también en las computadoras de escritorio y Laptops.
Cada vez son más los que acceden a nuestros sitios utilizando sofisticados dispositivos, que soportan las últimas especificaciones de HTML, CSS y Javascript, su gran limitación es lo reducido de su pantalla que en algunos casos puede ser de solo 320 pixeles

Dispositivos portables como los Smartphone o tabletas modernas que disponen de un especie de escritorio, con una funcionalidad bastante similar a los navegadores de escritorio.
Ejemplos son los iDevice (iPhone, iTouch, iPad), Windows Phone 7, Blackberry, los que utilizan Android y todas las TabletPC y lectores de eBook.

Todos ellos:
• Por lo general admiten HTML 5 en menor o menor grado.
• Admiten perfectamente Javascript.
Por suerte están incluidos la mayoría de los dispositivos modernos y representan el grueso de la navegación con móviles en internet actualmente.


OPCIONES

Crear versiones de páginas optimizadas para celulares, detectar y dirigir estos dispositivos a ellas.
Crear versiones de páginas optimizadas para celulares y solo colocar un link en la parte superior de las páginas normales, para que el usuario manualmente las cargue.
Seguir utilizando las mismas páginas estándar pero utilizar un script que detecte los móviles y en ese caso carguen un estilo especifico solo para ellos.
Utilizar páginas optimizadas para celulares pero utilizar un script para que los navegadores estándar de escritorio usen un estilo apropiado para ellos.

Por último el método que recomienda Google, usar Responsive web design. Algo en español como "diseño web responsable o adaptable".
Responsive web design no es más que servir a todo tipo de dispositivos, la misma página o sea el mismo contenido HTML, pero utilizar CSS3 para definir la forma en que se representa, de acuerdo al tamaño de su pantalla.
Para eso se pueden emplear los comandos CSS: "@media handheld" y "@media screen".


Ejemplos del uso de @media handheld

<link rel="stylesheet" media="screen" type="text/css" href="normal.css" />
<style type="text/css">
@media handheld
body{width:98%;font-family:Verdana;font-size:16px;}
</style>

Usar el comando @media screen

@media screen and (min-width:300px) and (max-width:800px) {
body{font-size:0.8em;}
sidebar{display:none;}
}


Usar CCS3 para disminuir el tamaño de las imágenes

<style>
img{max-width:100%;}
</style>

Diseño web adaptable

El diseño web adaptable es una configuración en la que el servidor siempre envía el mismo código HTML a todos los dispositivos y en la que se utiliza CSS para modificar la presentación de la página en el dispositivo mediante consultas de medios. Nuestros algoritmos deberían detectar automáticamente esta configuración si a todos los user-agents del Googlebot se les permite rastrear los elementos de la página, ya sea CSS, JavaScript o imágenes.

Recomendamos usar con smartphones la siguiente consulta de medios CSS:

@media only screen and (max-width: 640px) {...}

El valor de anchura máxima de 640 px que se muestra arriba es un ejemplo, no un requisito. Nuestros algoritmos buscan valores de anchura máxima que sea razonable pensar que hacen referencia a resoluciones de pantalla de smartphones. Intentaremos supervisar qué sitios web para móviles habituales utilizan nuestros algoritmos y puede que los actualicemos en el futuro según corresponda.

En cuanto a cómo especificar la consulta multimedia, Google es compatible con todas las diferentes formas que las normas permiten para usar consultas multimedia en el código. Cada técnica de implementación tiene pros y contras, y puedes usar la que mejor se adapte a tu sitio y a tus usuarios. Como regla general, si el sitio funciona en un navegador reciente, como Google Chrome o Apple Mobile Safari, debería funcionar con nuestros algoritmos.

Para obtener más ayuda sobre el diseño web adaptable, puedes comenzar leyendo esta entrada de blog en el Centro para webmasters.