RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Tecnologías & Hardware > Celulares, PDA & Tecnología Móvil

Respuesta
 
Herramientas Desplegado
Antiguo 01-jun-2012     #1
Predeterminado 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.



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 y por supuesto también en las computadoras de escritorio y laptops.

Ya que es tan reciente este auge, la gran mayoría de los CMS, es decir software en la red que permiten crear páginas web, ninguno de ellos está debidamente actualizado para lograr que las páginas generadas sean compatibles con los dispositivos móviles.

El gran problema al que nos enfrentamos todos, no es solo el de crear nuevo contenido que sea compatible, sino el de adaptar paginas creadas con anterioridad y que no se muestran debidamente en estos dispositivos, dichas paginas sin una acción inmediata, perderán cada día más visitantes en la medida que aumente la proporción de tráfico desde moviles. Quizás no sea necesario adaptar todas, pero si las más demandadas en cada caso.

Existen varias opciones o alternativas pero ninguna de ellas es perfecta ni constituye la solución perfecta.

Tipos de dispositivos móviles usados para acceder a internet, diferencias
Existen varias formas de diferenciar los dispositivos portables, pero para los que publicamos contenido en la actualidad, la más conveniente puede ser separarlos por los recursos de que disponen, de esa forma podemos diferenciarlos en solo dos grandes grupos:

Teléfonos celulares tradicionales que permiten el acceso a la red pero con recursos limitados. Todos estos medios por lo general tienen las siguientes limitaciones:
• Solo son compatibles con paginas hechas en: cHTML (iMode), WML y WAP.
• No admiten o son capaces de leer los script, por lo que de emplearse Javascript se bloquearían.
• No admiten tablas.
• Necesitan de páginas que usen la codificación UTF-8
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 y alternativas para que se vean correctamente las paginas en móviles y en navegadores de escritorio
-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.
-Otro método es usar el comando CSS @media handheld para servir un estilo solo a dispositivos portables a diferencia de “screen” media type que lo entregaría a los navegadores estándar. Es una ventaja porque la misma página usaría dos estilos diferentes, pero esto no es seguro ya que muchos teléfonos o PDA utilizarían de forma predeterminada screen media type.
Ejemplo del uso de @media handheld

En el siguiente ejemplo, de forma predeterminada el navegador cargará el archivo de estilo normal.css, si es un dispositivo portable entonces cargará el estilo inline, que modificará el ancho y tamaño de la fuente especificado en el archivo anterior.

Código:
<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>
Como detectar los dispositivos móviles con los que se accede a un sitio web

Lógicamente no se puede usar Javascript para este fin, porque gran parte de estos dispositivos no admite este lenguaje, la solución puede ser lenguajes de servidor como PHP, para detectar los dispositivos por su agente de usuario o utilizar Javascript en el código HTML a sabiendas que gran parte de los teléfonos más antiguos no podrán acceder a dicha página.

Script para detectar dispositivos móviles y redirigirlos a un directorio

-El siguiente script en lenguaje PHP, insertado al comienzo de una página index.php, re-direccionará a los dispositivos móviles cuyos agentes de usuario se especifiquen, a un directorio llamado en este ejemplo mobile, que contiene las versiones optimizadas para estos dispositivos.

En este ejemplo se especifican solo tres agentes de usuario (iphone, ipad y kindle), pero se pueden usar varios.

Los navegadores estándar continuaran leyéndo el resto de la página original.
La gran desventaja de su uso es la gran cantidad de dispositivos con agentes de usuarios diferentes, que incluso crece más cada día que pasa. Además se necesitarían versiones duplicadas de cada página.

Código:
<?php

$navigator_user_agent = (isset($_SERVER['HTTP_USER_AGENT'])) ? strtolower($_SERVER['HTTP_USER_AGENT']):'’;

if(

stristr($navigator_user_agent, “iphone”)or

stristr($navigator_user_agent, “ipad”)or

stristr($navigator_user_agent, “kindle”)

)

{

header(“Location: mobile/index.html”);

}

?>

<html>

Resto del código fuente de la página

</html>
Script para detectar dispositivos móviles y servirles un estilo CSS

-El siguiente script que se emplea en algunas páginas de este sitio, usa Javascript para servir a los clientes que no usen los navegadores estándar Internet Explorer, Chrome o Firefox, un estilo CSS diferente.

Código:
<script type=”text/javascript”>

//<![CDATA[

if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Googlebot/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {""} else {

document.write('<style type="text/css" media="screen">#sidebar,#menu{display:none;}#page{width:99%;}#content{width:99%;}</style>');}

//]]>

</script>
¿Qué hace el script?

Solo escribe el siguiente estilo si no se utilizan los navegadores especificados, que oculta la barra lateral o sidebar y el menú, también ajusta el ancho de la página.

Código:
<style type=”text/css” media=”screen”>

#sidebar,#menu{display:none;}

#page{width:99%;}

#content{width:99%;}

</style>
Script para detectar navegadores web específicos y servirles un estilo CSS

-El siguiente script funciona a la inversa, se usa en páginas creadas para móviles, a los navegadores Internet Explorer, Chrome o Firefox, se les servirá la página con un estilo diferente.

Código:
<script type=”text/javascript”>

//<![CDATA[

if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {

document.write('<style type="text/css" media="screen">#header{font-family:Verdana;font-size:16px;width:90%;}</style>');  

}

//]]>

</script>
Los dos poseen la ventaja que se pueden insertar en páginas existentes y que usan la extensión HTML, permite que dichas páginas se muestren correctamente en los Smartphone y otros dispositivos modernos que asimilan Javascript.

Como comprobar cómo se ven las páginas en dispositivos diferentes
Para comprobar la efectividad de los scripts anteriores, puede utilizarse un simulador, existen varios de ellos en la red, pero llevaría tiempo y dedicación debido a la gran cantidad de medios diferentes.

¿Cómo hacerlo entonces?

La solución más práctica puede ser usar en la PC el navegador Firefox con una extensión o complemento llamado User Agent Switcher, para comprobar el funcionamiento de las paginas antes de subirlas al servidor.

User Agent Switcher es una extensión creada por Chris Pederick, permite a Firefox funcionar como un simulador.

Permitirá cambiar a nuestro antojo el agente de usuario y escogerlo entre el de varios dispositivos, podremos ver nuestra página de la misma forma que el que acceda a ella navegando con un iPhone, iPad, BlackBerry, o cualquier otro dispositivo, incluyendo un navegador de escritorio o la araña de un buscador web.

Instalar User Agent Switcher en Firefox

Instala User Agent Switcher en Firefox desde el siguiente link: https://addons.mozilla.org/en-US/firefox/addon/59, de forma predeterminada la extensión solo incluye algunos pocos agentes de usuario, por lo que se deberá incluir un archivo XML que es una base de datos con la inmensa mayoría de los dispositivos que se utilizan en la actualidad.

Puedes descargar dicho archivo desde: http://techpatterns.com/downloads/firefox/useragentswitcher.xml
En el fututo deberás actualizarlo regularmente para tener disponibles los adentes de usuario de dispositivos nuevos.

Usar los estilos CSS para que se muestren adecuadamente las páginas en todos los navegadores

Algunos consejos para conseguir que las páginas se muestren correctamente tanto en computadoras de escritorio como en los dispositivos móviles son los siguientes:
• Evitar usar dimensiones absolutas como los pixeles en los elementos principales de las páginas, usar por ciento para acomodarlas en las pantallas pequeñas.

• En los iDevice (iPhone, iPad, iTouch) se debe usar el meta-tag “viewport” en el área del HEAD para facilitar el acomodo de las páginas de la siguiente forma:
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=yes”>

• En algunas páginas es recomendado ocultar para los móviles la barra lateral, lo que permite ganar espacio, esto se logra utilizando en CSS el atributo display:none.

• También se puede ocultar elementos que sobrepasen las dimensiones de las pantallas pequeñas, como imágenes de una forma similar a la anterior. Para eso es necesario agregarles un identificador a dichos elementos, por ejemplo id=”imagen1″ y a continuación en el CSS destinado a móviles usar:#imagen1(display:none;}

• Se recomienda siempre usar imágenes cuyo ancho máximo sea de 280 pixeles, se mostrarán perfectamente en cualquier Smartphone.
¿Como comprobar la compatibilidad de una página web con celulares o dispositivos móviles?

En Mobiready (http://mobiready.com/) puedes tener una idea de la compatibilidad de una página con diferentes dispositivos portable, tiene una interface muy amigable, muestra el resultado en una escala y señala todos los errores con una sencilla explicación de cómo corregirlos.

También puedes visitar el validador del W3C para móviles en la siguiente dirección: http://validator.w3.org/mobile/

Sus resultados pueden resultar desalentadores ya que emplea reglas estrictas para que las paginas se muestren correctamente en los dispositivos portables tradicionales, no se tienen en cuenta las funcionalidades de los Smartphone y tabletas modernas.

Para conocer las reglas por las que se rigen estos validadores puedes leer Mobile Web Best Practices http://www.w3.org/TR/mobile-bp/ (Practicas recomendadas para móviles)

El amor es dar a alguien la capacidad de destruirte y confiar que no lo haga.




Última edición por Eloy58; 12-jun-2013 a las 17:42 Razón: dar formato al texto
Responder Citando
Los siguientes 12 usuarios agradecen a cejd por este mensaje:
Arleanjose (11-oct-2013), carmen10 (02-jun-2012), CrazyBoyGDL (01-jun-2012), csart (02-jun-2012), Eloy58 (12-jun-2013), Francisco6812 (01-jun-2012), Hunted (02-jun-2012), Muga (25-abr-2013), opadrino (12-jun-2013), pepersanchez (24-abr-2013), thehifor (09-oct-2013), Tururojo (02-jun-2012)
Antiguo 01-jun-2012     #2
Predeterminado

Muy util para todos aquellos que quieran estar al margen de la tecnologia con su sitio.!

Graciias por compartir!


Soy tan sólo uno, pero aún soy uno; no puedo hacerlo todo, pero aún puedo hacer algo; y tan sólo porque no puedo hacerlo todo, no rechazaré hacer eso que puedo hacer.
Edward E. Hale.

Enviar un mensaje por MSN a CrazyBoyGDL Enviar un mensaje por Skype™ a CrazyBoyGDL Responder Citando
Los siguientes 3 usuarios agradecen a CrazyBoyGDL por este mensaje:
carmen10 (02-jun-2012), cejd (01-jun-2012), Tururojo (02-jun-2012)
Antiguo 02-jun-2012     #3
Predeterminado





El que busca la verdad corre el riesgo de encontrarla.
Responder Citando
Usuarios que han agradecido este mensaje de carmen10
Tururojo (02-jun-2012)
Antiguo 02-jun-2012     #4
Predeterminado




Mi Sabiduria, abarca lo que una gota de Agua, en el Oceano del Conocimiento
Responder Citando
Antiguo 02-jun-2012     #5
Bueno Gracias!



Conocimiento: Máximo Poder
Enviar un mensaje por Yahoo  a Hunted Responder Citando
Antiguo 24-abr-2013     #6
Predeterminado

Gracias por los datos muy utilez para los desarrolladores de software.
Responder Citando
Antiguo 09-oct-2013     #7
Predeterminado

Buen aporte
Responder Citando
Respuesta

Etiquetas
internet, moviles


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
¿Sexo Virtual? Qué es, cómo se practica, etc. cardavid Sexualidad 41 25-jun-2017 19:31
Cajas y Dongles Para Mantenimiento de Celulares Arleanjose Celulares, PDA & Tecnología Móvil 18 31-dic-2013 22:11
Como hacer un sitio web compatible con celulares y otros dispositivos móviles cejd Tutoriales & Videos Tutoriales 3 15-mar-2012 12:11
CSI: Miami jchierro Series TV 1 21-oct-2009 20:34


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2018, Jelsoft Enterprises Ltd.
Ad Management by RedTyger