Implementación de un diseño responsivo con jQuery Mobile y CSS3

Creación de esquemas de páginas que se adaptan a la resolución de la pantalla de cada usuario.

Por su parte, el marco de trabajo JQuery Mobile es una solución fantástica para crear rápidamente un sitio web móvil de marcado HTML5 accesible. Cuando se lo asocia con CSS3, las cosas pasan a ser interesantes, a medida que es posible crear esquemas de páginas web que responden al dispositivo del usuario basándose en la resolución de pantalla. Este artículo muestra el marco de trabajo de jQuery Mobile y las consultas de medios de CSS3 para implementar un diseño responsivo en sus páginas web.

Kris Hadlock, Web Developer/Designer, Studio Sedition

Photo of Kris HadlockDesde 1996, Kris Hadlock es desarrollador y diseñador web. Trabajó en proyectos para empresas como SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software y Fire Mountain Gems. Es autor de Ajax for Web Application Developers (Sams) y The ActionScript Migration Guide (New Riders), así como también columnista y escritor de numerosos sitios web y revistas de diseño como Peachpit.com, InformIT.com, y la revista Practical Web Design. Kris también es fundador de www.studiosedition.com, un estudio de desarrollo de software y diseño que es especializa en la fusión de la forma y función.



24-09-2012

El marco de trabajo jQuery Mobile es una biblioteca JavaScript que puede utilizar para crear con facilidad una versión móvil de un sitio web al convertir las páginas web existentes en sitios web y aplicaciones para pantallas táctiles. Posiblemente, el marco de trabajo jQuery Mobile cambie la manera en la que se acceda y distribuyan las aplicaciones móviles en dispositivos móviles y tablets al permitir a los usuarios conectarse directamente a aplicaciones para pantallas táctiles mediante un navegador web. Existen otras opciones para el desarrollo móvil, pero la diferencia con el enfoque que está tomando jQuery Mobile es que están orientando una gran variedad de plataformas móviles.

La tasa de adopción de smartphones y de tablets está aumentando increíblemente, y el marco de trabajo de jQuery Mobile ayuda a los desarrolladores a cumplir con la demanda creciente de experiencias web móviles. La proporción de experiencias web móviles requiere un nuevo conjunto de habilidades por parte de los desarrolladores web y los diseñadores. En 2010, Nielsen predijo que uno de dos estadounidenses tendrían un smartphone (ver Recursos para obtener un vínculo en el blog), que es un gran crecimiento si se lo compara con uno en 10 del año 2008 y en junio de 2011, los socios de AMI predijeron que "el uso de tablets entre las empresas con 1 a 1000 empleados crecería en un 1000 por ciento en el 2015" (ver Recursos para obtener un vínculo a la predicción completa). Con esto aumentos en la tasa de adopción, habrá una gran demanda para los desarrolladores web y para los diseñadores que puedan crear experiencias web móviles. El marco de trabajo de jQuery Mobile es una gran solución para crear experiencias web móviles, dado que aumenta la velocidad en la que pueden producirse los sitios web y es compatible con muchas plataformas móviles.

Dificultades y soluciones

El marco de trabajo de jQuery Mobile es una gran solución para la creación de una versión móvil o de tablet de sus páginas web, pero depende exclusivamente del contenido de un sitio web a adjuntarse con ciertos atributos de roles de datos. En muy pocos casos, podría resultar posible adjuntar estos atributos a su marcación HTML y podría ser necesario crear un sitio web móvil individual. Sin embargo, este artículo muestra cómo, con un poco de previsión y planeamiento, es posible utilizar una combinación del marco de trabajo de jQuery Mobile y las consultas de medios Cascading Style Sheets version 3 (CSS3) para crear un diseño responsivo y determina cómo reacciona el esquema frente al dispositivo del usuario. El propósito es crear un solo sitio web que pueda responder a los dispositivos de los usuarios al mostrar un esquema adecuado para la resolución de su pantalla.

Un diseño responsivo es el que responde al dispositivo del usuario según la resolución de su pantalla. Esto significa que más allá de si el usuario está visualizando una página web desde un móvil, tablet o dispositivo de escritorio, el diseño responderá al dispositivo de forma adecuada al mostrar un esquema específico según la resolución de la pantalla de ese dispositivo. Aunque el marco de trabajo de jQuery Mobile proporciona la manera de crear rápida y fácilmente una versión móvil de un sitio web, actualmente (y probablemente nunca) proporcione una manera inherente de responder de forma dinámica al dispositivo del usuario según la resolución de su pantalla. De hecho, el sitio web de jQuery Mobile indica que la función pre existente Media Query Helper Classes se ha desaprobado en beta y se la ha quitado de la última versión. Los creadores del marco de trabajo recomiendan el uso de las consultas de medios CSS3, en su lugar. Con una combinación de las consultas de medios CSS3 y el marco de trabajo jQuery Mobile, es posible alcanzar un diseño responsivo que se adapte a entornos móviles, de tablets y escritorio. La documentación del marco de trabajo utiliza en realidad una combinación del marco de trabajo de jQuery Mobile y las consultas de medios de CSS3 para alcanzar su propio diseño responsivo. La documentación es realmente bastante similar al ejemplo que creará en este artículo en lo que se refiere a la forma en la que reacciona a diferentes resoluciones de pantalla.

CSS ha incluido medidas de codificación relacionadas con dispositivo desde la versión 2.1 mediante el uso de tipos de medios. Una forma común de utilizar tipos de medios, consiste en definir una hoja de estilo individual para una pantalla de computadoras de escritorio frente a una hoja de estilo para una versión impresa de una página web. CSS3 ha tomado el concepto de que la codificación relacionada con el dispositivo mide un paso más allá con la introducción de las consultas de medios. Las consultas de medios pueden utilizarse para determinar el tipo de dispositivo que está interactuando con su página web así como permitir a los desarrolladores determinar las propiedades físicas del dispositivo que está visitando sus páginas web. De más está decir que las consultas de medios se han convertido en una forma popular de hoja de estilo específica para los dispositivos, como puede ver en Listado 1, que proporciona una hoja de estilo específica para dispositivos móviles y de tablet según la resolución de la pantalla.

Listado 1 Utilización de consultas de medios para proporcionar hojas de estilo específicas para los dispositivos
<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 799px)" 
  href="mobile-tablet.css" />

El atributo de medios en este ejemplo contiene un valor de tipo de medios que está configurado para la pantalla y en una consulta de medios (que se incluye entre paréntesis). Esta consulta de medios específica controla para ver si la resolución de pantalla del dispositivo actual del usuario es menor o igual a 799px. Si lo es, se proporciona la hoja de estilo del móvil/tablet; de lo contrario, esta hoja de estilo no se envía. Puede incluir varios vínculos de hojas de estilo dentro de una misma página web, cada uno con su propia consulta de medios para implementar su página de forma diferente según la cantidad de resoluciones que desee. La cantidad más común de hojas de estilo basadas en resolución que he conocido son tres—una para los dispositivos móviles y tablets, una para los monitores de escritorio de baja resolución y uno para monitores de escritorio de alta resolución. Si iba a utilizar el código del Listado 1, todos los dispositivos que tienen una resolución inferior a 799px usarían esta hoja de estilo, entonces es un ejemplo perfecto de cómo podría orientar los dispositivos móviles y tablets con una hoja de estilo, y computadoras de escritorio con una hoja de estilo diferente.

También es posible utilizar varias consultas de medios directamente dentro de CSS de una única hoja de estilo. El listado 2 muestra un ejemplo de una clase CSS utilizada para un conjunto de ítemes de navegación, que creará más tarde en este artículo. Cuando la resolución de la pantalla del dispositivo es de aproximadamente 800px de ancho o más, el ancho de la navegación se establece en 300px; cuando la resolución de la pantalla es 799px o menos, el ancho de la navegación se establece en un 100%.

Listado 2 Utilización de consultas de medios para proporcionar CSS específicos para los dispositivos
En todos los medios y (ancho min.: 800px) {
  #nav {
    width: 300px;
  }
}

 En todos los medios y (ancho máx.: 799px) {
  #nav {
    width: 100%;
  }
}

Otro aspecto positivo de las consultas de medios es que si visualiza una página web en un navegador web moderno eso incluye el CSS del Listado 2 asociado con el elemento HTML, la página web también responderá al tamaño del navegador. Por lo tanto, si el navegador se establece en un ancho de 799px o menos, la navegación será 100% en ancho; si el navegador fue ajustado en un ancho de 800px o más, la navegación sería establecida en un ancho de 300px.


Volverse responsivo

Las consultas de medios son una declaración condicional que determina que CSS se aplica a una página web. Junto con el marco de trabajo de jQuery Mobile, puede crear algunos sitios móviles poderosos mientras mantenga un esquema de escritorio individual. Por sí mismo, el marco de trabajo de jQuery Mobile puede utilizarse para crear rápida y fácilmente sitios web para pantallas táctiles. El marco de trabajo tiene una gran cantidad de componentes que facilitan agregar botones, barras de herramientas, cuadros de diálogo, listas de elementos y mucho más. Sin embargo, cuando se trata de manejar el esquema de una página web, CSS sigue siendo el lenguaje a utilizar. Afortunadamente, como se lo mencionó anteriormente en este artículo, CSS3 introdujo consultas de medios, que proporcionaron a los desarrolladores la capacidad de cambiar el esquema de la página web según la resolución del dispositivo.

En combinación con el marco de trabajo de jQuery Mobile, puede crear algunos esquemas eficaces. Para el propósito de este artículo, utilizo un ejemplo simple que incluye un conjunto de elementos de navegación y una retícula. Los elementos de navegación y la retísula se esquematizarán de forma diferente, según la resolución de la pantalla. Lo primero que necesita hacer antes de que funcione el marco de trabajo de jQuery Mobile en su página web es incluir los archivos Java Script y CSS asociados con el marco de trabajo de jQuery Mobile (ver Listado 3).

Listado 3 Inclusión del marco de trabajo de jQuery Mobile
<link rel="stylesheet" 
  href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>

El marco de trabajo de jQuery Mobile incluye un componente de una lista de elementos que utilizará para mostrar sus elementos de navegación. Para crear una lista de elementos, simplemente agregue un atributo de roles de datos a su elemento ul de la lista de navegación con un valor de la lista de elementos. El marco de trabajo de jQuery Mobile también incluye una cantidad de herramientas útiles que le permiten crear esquemas de retículas de columnas múltiples. En el Listados 4, incluí una retícula de dos filas con tres columnas, que se construye al utilizar una combinación de clases ui-grid-b, ui-bloque-a, y ui-barra . Para obtener más información sobre los componentes disponibles del marco de trabajo de jQuery Mobile, ver Recursos.

Listado 4 Agregar una lista de elementos y una retícula al área de contenido
<div data-role="content">
    <ul id="nav" data-role="listview" data-inset="true">
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
        <li><a href="#">Nav item</a></li>
    </ul>
    
    <div id="grid" class="ui-grid-b">
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
        <div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
        <div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
        <div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
    </div>
</div>

Las letras se añaden al extremo de algunos de los nombre de clases: existen algunas letras relacionadas con temas que utiliza el marco de trabajo de jQuery Mobile para determinar qué tema se utiliza para implementar el componente. Para obtener más información sobre elementos relativos a un tema con el marco de trabajo de jQuery Mobile, lea el artículo relacionado en Recursos.

Ahora que ha creado su página web, puede utilizar CSS3 para crear un esquema responsivo que se ajuste dinámicamente según la resolución de la pantalla del usuario. Hacerlo es simple: Simplemente, utilice las consultas de medios que conoció anteriormente en este artículo para determinar la resolución de la pantalla y luego escriba CSS que corresponda específicamente a los diferentes escenarios. El Listado 5 utiliza una consulta de medios que verifica una resolución de 800px o más y otra consulta de medios que verifica la resolución de la pantalla de 799px o menos. La primera consulta de medios flota la navegación y la retícula hacia la izquierda, de forma tal que se posicionan una junto a la otra para completar el espacio más ancho que está disponible en una pantalla de alta resolución. La segunda consulta de medios no tiene una flotación y establece el ancho de navegación y la retícula en 100%, lo que finalmente posiciona la navegación por sobre la retícula para adaptarse a resoluciones de pantallas más pequeñas para dispositivos como smartphones y tablets.

Listado 5 Utilización de consultas de datos para crear un esquema responsivo
En todos los medios y (ancho min.: 800px) {
  #nav {
    width: 300px;
    float: left;
    margin-right: 20px;
  }
  #grid {
    width: 450px;
     float: left;
  }
}

en todos los medios y (ancho máx.: 799px) {
  #nav {
    width: 100%;
  }
  #grid {
    width: 100%;
  }
}

Los dispositivos con una resolución de pantalla más alta mostrarán el esquema de lado a lado, de forma similar a la Ilustración 1.

Ilustración 1 Cómo muestra la página web un dispositivo con mayor resolución
Ilustración 1 Cómo muestra la página web un dispositivo con mayor resolución

Los dispositivos con una resolución de pantalla inferior mostrarán el esquema de lado a lado, de forma similar a la Ilustración 2.

Ilustración 2 Cómo muestra la página web un dispositivo con menor resolución
Ilustración 2 Cómo muestra la página web un dispositivo con menor resolución

Por su puesto que este es un ejemplo muy simple, pero muestra cuán fácil es crear un esquema responsivo utilizando el marco de trabajo de jQuery Mobile y CSS3. Las posibilidades son excitantes, y esto es simplemente un peldaño para iniciarse. Al agregar algunos simples atributos de roles de datos a su HTML, puede crear una versión móvil de sus páginas web; al incluir las consultas de los medios de CSS3, puede permitir que su diseño responda a el dispositivo del usuario según la resolución de la pantalla. Incluso puede alterar el tema de jQuery Mobile cuando alguien visualizar sus páginas web en una computadora de escritorio, de forma tal que la página web no parece una página web móvil en resoluciones más altas. Todo lo que necesita es chequear para obtener una resolución más alta con una consulta de medios y, luego, cambiar el CSS para los componentes jQuery Mobile con el objetivo de sobreescribir esencialmente los estilos por defecto que crean el tema.


Conclusión

El propósito del diseño responsivo consiste en mostrar sus datos en el mejor esquema posible para alcanzar páginas web de fácil navegación. La combinación del marco de trabajo de jQuery Mobile y de CSS3 puede crear un conjunto poderoso de esquemas que puede utilizar para responder al dispositivo de cada usuario.


Descargar

DescripciónNombretamaño
Sample jQuery Mobile and CSS3 web pagejquery-mobile-responsive-design.zip3KB

Recursos

Aprender

Obtener los productos y tecnologías

  • Descargar y referenciar los archivos jQuery Mobile JavaScript y CSS.
  • Evalúe los productos de IBM de la forma que más le convenga: Descargue pruebas de productos, pruebe un producto en línea, utilice un producto en el contexto de la nube o pase algunas ora en SOA Sandbox para aprender a implementar eficientemente arquitectura orientada al servicio.

Comentar

  • Participe de la comunidad developerWorks. Conéctese con otros usuarios de developerWorks mientras explora los blogs conducidos por desarrolladores, foros, grupos y wikis.

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Desarrollo móvil
ArticleID=836549
ArticleTitle=Implementación de un diseño responsivo con jQuery Mobile y CSS3
publish-date=09242012