Actividad 18

Como hacer un sitio web compatible con celulares y otros dispositivos móviles

 Lograr que las páginas web se vean correctamente en todos los navegadores de teléfonos y otros equipos portables como tabletas y eBooks. Códigos y scripts para identificar el navegador del usuario y cargar el estilo CSS que permita mostrar una página web correctamente.

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.

➔ 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>