Estás en Inicio / Editorial / Tecnologías móviles

30.08.2007

Tu sitio web en dispositivos móviles

Por Damián Pérez Valdés | 12,680 Lecturas
Archivado en: CSS, Tecnologías móviles

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.

Plugin para Wordpress

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.

Probando nuestro sitio web para móviles

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.

Navegador Opera:

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.

Opera Mini:

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.

Extensión de Firefox:

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.

Emulator:

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.

Versión para móviles usando Hojas de Estilos CSS

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.

Sitios para agregar nuestras páginas de inicio

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.

Sitio para crear y hospedar nuestra versión para móviles

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:

(2 votos, promedio: 5 de 5)

 Loading ...

Sobre el autor

Damián Pérez Valdés
Webmaster, Administrador de Sistemas, con experiencia en desarrollo web y de aplicaciones.

• Todos los editoriales
• Aspectos técnicos
• Desarrollo Web
• Diseño
• Negocios
• Principiantes
• Navegando
• Semblanza
• Enviar colaboración

• Todas las notas
• Eventos
• Enviar colaboración

• Por países
• Por temática
• Sugerir empresa

• Todos los foros
• Diseño web
• Programación web
• Negocios web
• Temas generales
• Compartiendo
• Admistrando sitios
• Seguridad y Redes
• Archivo

• Acerca de
• Preguntas frecuentes
• Créditos
• Contacto

• Suscribirse
• Archivo de boletines

• AmigoMensajero
• Hostigg
• Hostigg (en)
• 120 segundos
• Últimos Temas
• Desarrollo Web
• Cristalab
• Blogs Chapines