Estás en Inicio / Editorial / Tecnologías móviles
30.08.2007
La cantidad de usuarios que utilizan los dispositivos móviles para navegar por internet se incrementa cada día. Por ello, el diseño de nuestro sitio debe contemplar este tipo de plataformas para hacer un sitio accesible y usable para dichos dispositivos.
La versión de tu sitio web para móviles, permite a los usuarios de teléfonos móviles y PDA ingresar a la información de forma accesible. Debemos tomar en cuenta qué tipo de usuarios será el grupo objetivo de dicha versión.
La mayoría de los dispositivos, incluyen la tecnología WAP, la cual no soporta imágenes y estilos. Mientras que la tecnología WAP2 soporta imágenes, XHTML y CSS. Además, algunos ofrecen pantalla monocromática o pantallas de alta resolución, soportando CSS y JAVA.
El plugin wp-mobile nos permite crear una versión de nuestro blog en WordPress para móviles. Para usarlo debemos descomprimir la carpeta hacia el directorio de nuestro blog “wordpress\wp-content\plugins\”.
Luego, acceder al panel de control, seleccionar la pestaña de plugin y activarlo. En el directorio, donde se descomprimió, encontraremos el archivo “wp-mobile.php” y el directorio “wp-mobile” donde se encuentra el fichero “index.php” que debemos editar, en él encontraremos diferentes variables que debemos llenar. El código es el siguiente:
<?php /* Variables a rellenar */ $favicon = ''; /* URI del favicon de la página ej: http://www.tublog.com/favicon.ico */ $logo = ''; /* URI del logo de la página (tamaño máximo recomendado para el logo 60x60px) ej: http://www.tublog.com/logo.png*/ $destacados =; /* Número de la categoría a destacar (los números aparecen en el menú de administración en Gestionar>>Categorías*/ $titulo=''; /* Nombre con el que referirse a los 5 últimos posts de la categoría destacada, por ejemplo "Ultimos destacados" */ ?>>
Al tener instalado y configurado el plugin, el usuario podrá accesar sin problema desde su dispositivo móvil, debido a que el plugin es cargado de forma automática.
Existen varios simuladores que nos permiten tener una vista previa del diseño de nuestro sitio o blog, en los dispositivos móviles. Algunos navegadores de internet, también disponen de opciones para realizar dicha función.
El navegador Opera permite obtener una visualización de nuestro sitio para dispositivos móviles a través de dos opciones.
La primera opción, la podemos accesar al seleccionar el menú “Ver/View” luego seleccionar la “Vista Pequeña/Small Screen”. Al seleccionar esta opción se adapta al tamaño aproximado de los móviles, el mismo elimina también los estilos CSS.
En la imagen podemos visualizar la versión para móviles el sitio Maestros del Web utilizando el navegador Opera.
La segunda opción de Opera es su navegador gratis llamado Opera Mini, que puede ser descargado hacia los móviles.
Incorpora varias compatibilidades, que lo hacen el más utilizado por los usuarios. Actualmente existen dos versiones de este navegador para móviles, disponibles para la descarga gratuita.
Opera Mini incluye un simulador móvil que nos permite probar nuestro sitio web o blog, mediante el demo que se encuentra en su sitio oficial. Este simulador carga imágenes y estilos CSS.
El navegador de Firefox incluye una extensión llamada Web Developer, la cual instala una barra de herramientas con la que el usuario puede deshabilitar todos los estilos, javascript, imágenes, cookies y definir tamaños de la página.
Con la extensión Web Developer de Firefox podemos elegir la opción ubicada en: CSS - Display CSS by Media Type – Handheld, donde adaptará los estilos de nuestro sitio que serán cargados correctamente en los móviles.
Es un simulador de móviles en línea, cuenta con algunos skin y con un formulario donde podremos insertar la dirección de nuestro sitio para emular un móvil real desde nuestro navegador de Internet.
El uso de los archivos CSS nos permite diseñar un estilo que será mostrado en los móviles. Vinculando una hoja de estilo con el sitio.
En atributo “Media” identifica el uso de “handheld/móviles”, al utilizar Dreamweaver como editor se facilita la selección de la opción, de lo contrario debemos buscar la línea de código y agregarlo.

El siguiente código es el que debe agregarse para el atributo handheld/móviles:
<link href="moviles.css" rel="stylesheet" type="text/css" media="handheld" />
También podemos hacer uso del atributo “handheld,all” el cuál cargará el estilo siempre.
<link href="moviles.css" rel="stylesheet" type="text/css" media="handheld,all" />
Al cargar nuestro sitio web desde el móvil, se cargará la hoja de estilo que hemos creado para este dispositivo. Esta hoja de estilo CSS puede no contener las imágenes que son cargadas en la versión para los monitores normales.
El siguiente código pertenece a una hoja de estilo la cual se mostrará en los móviles, se puede ver el uso de colores fuertes como el rojo y fuentes grandes. Este archivo puede llamarse movil.css (el nombre del archivo no afecta la función del atributo):
#content {
float: none;
width: 95%;
}
#sidebar {
width: 90%;
margin-left: 5%;
}
La siguiente página HTML vinculará estas hojas de estilo:
<html> <head> <title>Prueba</title> <link href="moviles.css" rel="stylesheet" type="text/css" media="handheld" /> </head> <body>Maestros del Web </body> </html>
Utilizando el atributo Media="handheld,all", al hacer uso de la extensión Web Developer de Firefox y elegir la opción ubicada en: CSS - Display CSS by Media Type – Handheld, nos mostrará los estilos seleccionados para este dispositivo.
Tappity es un sitio que nos permite crear nuestra página de inicio, al registrarnos recibiremos un código de confirmación en nuestra cuenta de correo electrónico. En el sitio encontraremos el botón “submit new site / Agregar sitio nuevo”.
Como primer paso debemos: agregar URL, en este paso podemos agregar la dirección de nuestro sitio.
En el segundo paso: descripción del sitio, nos solicitará el título de nuestro sitio web, la descripción, tags, si deseamos que se modifique el sitio para que se adapte a la pantalla de los dispositivos móviles, optimizar para iPhone y si el sitio será público o privado.
Seguidamente podemos generar una vista previa del mismo. Si está correcta podemos oprimir el botón “Submit” para que los cambios realizados queden guardados.
Luego de agregar el sitio en nuestra cuenta podemos acceder a este sitio desde el móvil y seleccionar las páginas de inicio agregadas.

También cuenta con una versión optimizada disponible para iPhone.
Zinadoo nos permite crear nuestras páginas para los usuarios que accedan a nuestro sitio web desde sus móviles. El mismo nos permite publicar textos, imágenes, videos, encuestas y enviar mensajes SMS.

También, contamos con herramientas para crear y hospedar nuestro sitio. Luego de registrarnos podemos acceder y crear nuestra versión para móviles. Crear diferentes páginas con información, enlaces, imágenes, desde su panel.
Luego de haber creado nuestro sitio podemos salvar los cambios y oprimir el botón “publicar/publish”, también podemos obtener la url para acceder a esta versión desde nuestro navegador o móvil.
Califica esta nota:
Damián Pérez Valdés
Webmaster, Administrador de Sistemas, con experiencia en desarrollo web y de aplicaciones.
Si eres nuevo en Maestros del Web y te agradan nuestras publicaciones, te invitamos a suscribirte a nuestro Feed.
Sindícanos en: Google Reader, Bloglines, My Yahoo o My MSN | ¿Qué es el Feed?
9 comentarios en total.
Con mi poca experiencia, he montado mi web con dream sin conocimientos de diseño ni de html y con una pda que tengo puedo leer la web.
¿tendría que hacer algo especial para que sea vista en dispositivos moviles?
Gracias la eh montado bien chingon gracias xD
Oh! Por Dios! Que maravilloso lo voy a probar inmediatamente! Si tengo dudas les aviso para que me ayuden….que buen POST!!!
esta excelente lo voy a probar ahorita mismo!
Muy buen artículo Damian. Muy práctico y útil para apoyarme con un proyecto actual en el que nos interesa que algunos sitios web gubernamentales se observen correctamente desde los móviles.
oye yo quiero poner un sistema de mensajeria de texto a celulares gratis no se si puedas ayudarme espero y si puedas
magnifico post…tengo que probarlo…gracias
kausa no se si me puedes mandar el manuel para sms infinitos a movistar y claro…chvr
me gusttari que me enviaran un manual para el diseño de sitos wap. por favor me puedes dar el nombre del programa para crear estos sitios.. yineduar@hotmail.com
2 trackbacks en total.
Maestros del Web es el punto de encuentro para los entusiastas de la red.
Creative Commons by-nc-sa 3.0 | Política de Privacidad | CMS: Wordpress