Mostrando entradas con la etiqueta google movil. Mostrar todas las entradas
Mostrando entradas con la etiqueta google movil. Mostrar todas las entradas

martes, 26 de febrero de 2013

Crear una versión móvil de tu página web ajustando el CSS



En los últimos años la venta de dispositivos móviles con acceso a internet ha crecido a un ritmo notorio y los usuarios cada vez más se conectan a través de sus dispositivos. Este cambio obliga a los desarrolladores de páginas web a optimizar de igual forma su sitio tanto para ordenadores de sobremesa como para dispositivos móviles. Si todavía no adaptaste tu página web a las diferentes plataformas porque piensas que es una tarea compleja estas totalmente equivocado. En esta guía desarrollaremos los conocimientos necesarios para optimizar tu página web manipulando el CSSen unos simples pasos. De esta manera tu web estará visible tanto para dispositivos móviles como para equipos de sobremesa.

Lo primero que tenemos que hacer es personalizar el código HTML de la página web para validarlo en móviles. Para esta tarea utilizaremos la extensión mobileToolkit que está disponible para navegadores Chrome y Firefox. La herramienta te otorga información precisa que te será de gran utilidad.

    • W3W3
    • mobileToolkitmobileToolkit

    Luego de purgar el HTML de la página web vamos a centrarnos en el CSS. Actualmente las páginas web que desarrollemos tienen que ser páginas inteligentesque puedan verse correctamente desde un iPad, un dispositivo Android, una tablet o un ordenador de sobremesa, aunque cada uno de ellos cuenta con un tamaño de pantalla diferente.
    Ajustar CSS:

    La versión de CSS3 incluye los Media Queries. Los mismos nos permiten seleccionar una hoja de estilo para cada dispositivo móvil y podrás manipular el ancho, el alto, la orientación vertical u horizontal y la resolución de la pantalla. Lo que vamos a manipular son los Media types tanto el “handheld” correspondiente a los dispositivos móviles, como el “screen” correspondiente para los ordenadores de sobremesa.

    El código para dispositivos móviles es el siguiente:

    <link href=”css/movil.css” rel=”stylesheet” type=”text/css” media=”handheld, only screen and (max-device-width: 480px)” />

    El código para equipos de sobremesa es el siguiente:

    <link href=”css/escritorio.css” rel=”stylesheet” type=”text/css” media=”screen and (min-width: 481px)” />

    Para los dispositivos móviles tienes un máximo de “480” y en los ordenadores de sobremesa un mínimo de “481”. Aquí podrás manipular el valor de los “px” a la medida deseada.

    Ahora vamos a ajustar el valor viewport. Este parámetro es tomado por los Smartphone y define el área visible de la página web (escala y Zoom).

    La línea que insertaremos para personalizar el viewport pueden ser dos. Ambas están optimizadas para la gran mayoría de Smartphone disponible en el mercado.

    Opción uno:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    Opción dos:
    <meta name="viewport" content="width=device-width"/>

    El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “<head>.

    • El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “<head>”.El código viewport lo tienes que incluir en el archivo “index.html” o crear un documento HTML en la raíz del sitio, e insertar el código entre las etiquetas “”.
    • viewport viewport

    De esta manera adaptaras tu página web a los navegadores más usados por los principales dispositivos móviles y harás que tu web sea visible en diferentes plataformas y se adapte a las necesidades de cada usuario.

    A continuación te dejamos una herramienta de Google con la cual podrás observar el aspecto de tu sitio web desde un Smartphone, generándote la herramienta un informe con recomendaciones que te será muy útil.

    Sitio Oficial: haztuwebmovil
    Extensión Chrome: mobileToolkit
    Extensión Firefox: mobileToolkit
    Fuente: NeoTeo

    Twitter Delicious Facebook Google+ Stumbleupon Favorites More