RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte Sobre: Educación & Entretenimiento > Tutoriales & Videos Tutoriales

Respuesta
 
Herramientas Desplegado
Antiguo 06-mar-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 mobiles.
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, 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.

Spoiler:
<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.

Spoiler:
<?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.

Spoiler:
<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>

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.

Spoiler:
<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.
Puedes encontrar varios scripts en Javascript o PHP para detectar los navegadores web en:
http://techpatterns.com/downloads/sc...tion_basic.txt
http://techpatterns.com/downloads/sc...ion_php_if.txt

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: addons.mozilla.org, 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/fi...ntswitcher.xml
En el fututo deberás actualizarlo regularmente para tener disponibles los adentes de usuario de dispositivos nuevos.

Como ajustar Firefox el tamaño exacto de los dispositivos móviles

Usa los siguientes Bookmarklets para ajustar la pantalla de Firefox a un tamaño similar al de los dispositivos a simular.
TabletPC - Para simular el tamaño de un iPad, Kindle y otras tabletas.
iPhone - Para simular el tamaño de un iPhone o iTouch.
T-Mobile - Para simular el tamaño de un Nexus, Android, etc.
1024,768


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.

Donde comprobar la compatibilidad de una página web con celulares o dispositivos móviles

En Mobiready 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 http://www.w3.org/TR/mobile-bp/ (Prácticas recomendadas para móviles)


Fuente: NorficPC

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



Responder Citando
Los siguientes 3 usuarios agradecen a cejd por este mensaje:
baduser (06-mar-2012), cramercaba (15-mar-2012), Hunted (06-mar-2012)
Antiguo 06-mar-2012     #2
Bueno A Favoritos!

Excelente aporte. Muy bueno, muchas gracias!!!



Conocimiento: Máximo Poder
Enviar un mensaje por Yahoo  a Hunted Responder Citando
Los siguientes 3 usuarios agradecen a Hunted por este mensaje:
baduser (06-mar-2012), cejd (06-mar-2012), cramercaba (15-mar-2012)
Antiguo 06-mar-2012     #3
Predeterminado


Responder Citando
Usuarios que han agradecido este mensaje de baduser
cejd (06-mar-2012)
Antiguo 15-mar-2012     #4
Predeterminado



La vida es lo que pasa mientras se instalan las actualizaciones de Windows
Responder Citando
Respuesta

Etiquetas
celulares, página web.


(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
CSI: Miami jchierro Series TV 2 11-may-2020 00:01
¿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
La psicología velocista (velocípata) JesRICART Deportes 0 23-jun-2009 15:28


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