Una de las formas de adaptar una página web al móvil es con el uso del framework de jQuery, el llamado jQuery mobile. En realidad no adaptamos nuestra web al móvil, sino que construimos una página nueva para el móvil.
Vamos por partes, primero tenemos que incluir, entre los <head> de la página, la llamada al framework de la siguiente manera: de nuestra página, la llamada al framework, lo cual haremos del siguiente modo:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile.structure-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
Con este método accedemos directamente al servidor de jQuery, desde el cual descargamos lo necesario para que el framework funcione correctamente. Con la primera linea descargamos la hoja de estilos, en la segunda el script principal de jQuery y en la tercera linea descargamos el script de jQuery-mobile propiamente dicho.
Después ya solo nos queda construir la página propiamente dicha. El formato debe de ser obligatoriamente en HTML5 ya que jQuery recogerá los datos de ciertas etiquetas para construir la página.
Vamos con un primer fragmento de la página:
<div data-role="page" id="inicio">
<div data-role="header" data-theme="c">
<h1>Talleres</h1><br> <h1>Guadamia</h1>
<a href="#" data-icon="home" data-icon-pos="notext" data-theme="e"></a>
</div> //fin de header
<img id="imgback" src="images/nombre.gif" alt="Taller de coches">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#diagnosis" data-transition="slideup">Diagnósis del automóvil</a></li>
<li><a href="#mecanica" data-transition="slideup">Mecánica y electricidad</a></li>
<li><a href="#neumaticos" data-transition="slideup">Neumáticos y amortiguación</a></li>
<li><a href="#contacto" data-transition="slideup">Contacto</a></li>
</ul> //fin de data-role="listview"
<a href="tel:+34687759906" data-role="button" data-theme="b">Llámanos ahora</a>
</div> //fin de content
<div data-role="footer"><h5>Página hecha con jQuery mobile por Jose luis Acebedo Parajón</h5>
</div> //fin de footer
</div> //fin de page
Con este sencillo código ya tenemos el menú principal de nuestra página que quedará como veis en la imagen superior. Lo nuevo aquí son los data-role, data-theme, data-transition y data-icon. Estos data son los que leerá jQuery para construir nuestra página. Aquí comentaré unos pocos, para saber más sobre ellos consultar la guía oficial (en inglés) en http://jquerymobile.com/demos/1.2.0/.
Con data-role="page" indicamos donde comienza y donde termina nuestra página (importante saber que dentro del mismo código HTML5 tendremos todas la páginas que necesitemos, este primer código sería la página principal o menú principal). Dentro de data-role="page" están las divisiones de la página en: cabecera (data-role="header"), contenido (data-role="content") y pié de página (data-role="footer"). A cada contenido de la página podemos asignarle un color o tipo de letra diferente lo cual realizamos con data-theme="letra", la letra (desde la a hasta la c) nos dará un color y letra diferentes. Dentro de mi contenido (content) tengo el menú principal que se divide en una vista de lista (listview), donde están las opciones del menú (diagnosis, mecánica, neumáticos y contacto) y un botón (button) que realiza una llamada al número especificado. En este ejemplo tenemos otros data, como data-icon el cual nos muestra un icono específico o data-transition que realizará una transición al abrir el enlace especificado.
Ahora bien, ¿cómo mostrar más información?. En el ejemplo arriba descrito tenemos varios enlaces dentro de a href todos precedidos de una almohadilla (#). Pues es tan sencillo como insertar, seguido del código anterior, un código como el siguiente:
<div data-role="page" id="diagnosis">
<div data-role="header"><h1>Diagnósis del automóvil</h1></div> //fin de header
<div data-role="content">
Aquí una descripción, un texto, o lo que queráis.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a> //botón para volver a la pagina de inicio
</div> //fin de content
<div data-role="footer">
<h3>Más información en <a href="#cajadialogo" data-rel="dialog">la vista web</a> de la página</h3>
</div> //fin de footer
</div> //fin de page
Podéis ver que el código es prácticamente igual que el primero, con la única excepción de que, dentro del div data-role="page", insertamos un id con el mismo nombre del enlace que queremos mostrar (esta vez sin la almohadilla, id="diagnosis"). Y así hacemos lo mismo para todos los enlaces que tengamos.
Si os dais cuenta, en el primer código, dentro del div data-role="page", también le hemos puesto un id con el nombre de inicio. Esto es para volver a la página de inicio a través del botón de enlace que ponemos en las restantes páginas.
Lo siguiente sería la estructura básica de una página en jQuery-mobile:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
<meta name="viewport" content="width=device-width", minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="themes/personalstyle.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile.structure-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header" data-theme="c">
<h1>Talleres</h1><br> <h1>Guadamia</h1>
<a href="#" data-icon="home" data-icon-pos="notext" data-theme="e"></a>
</div>
<img id="imgback" src="images/nombre.gif" alt="Taller de coches">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#diagnosis" data-transition="slideup">Diagnósis del automóvil</a></li>
<li><a href="#mecanica" data-transition="slideup">Mecánica y electricidad</a></li>
<li><a href="#neumaticos" data-transition="slideup">Neumáticos y amortiguación</a></li>
<li><a href="#contacto" data-transition="slideup">Contacto</a></li>
</ul>
<a href="tel:+34687759906" data-role="button" data-theme="b">Llámanos ahora</a>
</div>
<div data-role="footer"><h5>Página hecha con jQuery mobile por Jose luis Acebedo Parajón</h5>
</div>
</div>
<div data-role="page" id="diagnosis">
<div data-role="header"><h1>Diagnósis del automóvil</h1></div>
<div data-role="content">
Contenido de diagnósis.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
<div data-role="page" id="mecanica">
<div data-role="header"><h1>Mecánica y electricidad</h1></div>
<div data-role="content">
Contenido de mecánica.</br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
<div data-role="page" id="contacto">
<div data-role="header"><h1>Contacto</h1></div>
<div data-role="content">
Contenido de contacto.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
<div data-role="page" id="neumaticos">
<div data-role="header"><h1>Neumáticos y amortiguación</h1></div>
<div data-role="content">
Contenido de neumáticos.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
</body>
</html>
Y, para redireccionar a nuestra página móvil a los que nos visiten desde un móvil ver este post.
Vamos por partes, primero tenemos que incluir, entre los <head> de la página, la llamada al framework de la siguiente manera: de nuestra página, la llamada al framework, lo cual haremos del siguiente modo:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile.structure-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
Con este método accedemos directamente al servidor de jQuery, desde el cual descargamos lo necesario para que el framework funcione correctamente. Con la primera linea descargamos la hoja de estilos, en la segunda el script principal de jQuery y en la tercera linea descargamos el script de jQuery-mobile propiamente dicho.
 |
| Ejemplo de como podría quedar. |
Después ya solo nos queda construir la página propiamente dicha. El formato debe de ser obligatoriamente en HTML5 ya que jQuery recogerá los datos de ciertas etiquetas para construir la página.
Vamos con un primer fragmento de la página:
<div data-role="page" id="inicio">
<div data-role="header" data-theme="c">
<h1>Talleres</h1><br> <h1>Guadamia</h1>
<a href="#" data-icon="home" data-icon-pos="notext" data-theme="e"></a>
</div> //fin de header
<img id="imgback" src="images/nombre.gif" alt="Taller de coches">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#diagnosis" data-transition="slideup">Diagnósis del automóvil</a></li>
<li><a href="#mecanica" data-transition="slideup">Mecánica y electricidad</a></li>
<li><a href="#neumaticos" data-transition="slideup">Neumáticos y amortiguación</a></li>
<li><a href="#contacto" data-transition="slideup">Contacto</a></li>
</ul> //fin de data-role="listview"
<a href="tel:+34687759906" data-role="button" data-theme="b">Llámanos ahora</a>
</div> //fin de content
<div data-role="footer"><h5>Página hecha con jQuery mobile por Jose luis Acebedo Parajón</h5>
</div> //fin de footer
</div> //fin de page
Con este sencillo código ya tenemos el menú principal de nuestra página que quedará como veis en la imagen superior. Lo nuevo aquí son los data-role, data-theme, data-transition y data-icon. Estos data son los que leerá jQuery para construir nuestra página. Aquí comentaré unos pocos, para saber más sobre ellos consultar la guía oficial (en inglés) en http://jquerymobile.com/demos/1.2.0/.
Con data-role="page" indicamos donde comienza y donde termina nuestra página (importante saber que dentro del mismo código HTML5 tendremos todas la páginas que necesitemos, este primer código sería la página principal o menú principal). Dentro de data-role="page" están las divisiones de la página en: cabecera (data-role="header"), contenido (data-role="content") y pié de página (data-role="footer"). A cada contenido de la página podemos asignarle un color o tipo de letra diferente lo cual realizamos con data-theme="letra", la letra (desde la a hasta la c) nos dará un color y letra diferentes. Dentro de mi contenido (content) tengo el menú principal que se divide en una vista de lista (listview), donde están las opciones del menú (diagnosis, mecánica, neumáticos y contacto) y un botón (button) que realiza una llamada al número especificado. En este ejemplo tenemos otros data, como data-icon el cual nos muestra un icono específico o data-transition que realizará una transición al abrir el enlace especificado.
Ahora bien, ¿cómo mostrar más información?. En el ejemplo arriba descrito tenemos varios enlaces dentro de a href todos precedidos de una almohadilla (#). Pues es tan sencillo como insertar, seguido del código anterior, un código como el siguiente:
<div data-role="page" id="diagnosis">
<div data-role="header"><h1>Diagnósis del automóvil</h1></div> //fin de header
<div data-role="content">
Aquí una descripción, un texto, o lo que queráis.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a> //botón para volver a la pagina de inicio
</div> //fin de content
<div data-role="footer">
<h3>Más información en <a href="#cajadialogo" data-rel="dialog">la vista web</a> de la página</h3>
</div> //fin de footer
</div> //fin de page
Podéis ver que el código es prácticamente igual que el primero, con la única excepción de que, dentro del div data-role="page", insertamos un id con el mismo nombre del enlace que queremos mostrar (esta vez sin la almohadilla, id="diagnosis"). Y así hacemos lo mismo para todos los enlaces que tengamos.
Si os dais cuenta, en el primer código, dentro del div data-role="page", también le hemos puesto un id con el nombre de inicio. Esto es para volver a la página de inicio a través del botón de enlace que ponemos en las restantes páginas.
Lo siguiente sería la estructura básica de una página en jQuery-mobile:
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8" />
<title>Titulo</title>
<meta name="viewport" content="width=device-width", minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="themes/personalstyle.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile.structure-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page" id="inicio">
<div data-role="header" data-theme="c">
<h1>Talleres</h1><br> <h1>Guadamia</h1>
<a href="#" data-icon="home" data-icon-pos="notext" data-theme="e"></a>
</div>
<img id="imgback" src="images/nombre.gif" alt="Taller de coches">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#diagnosis" data-transition="slideup">Diagnósis del automóvil</a></li>
<li><a href="#mecanica" data-transition="slideup">Mecánica y electricidad</a></li>
<li><a href="#neumaticos" data-transition="slideup">Neumáticos y amortiguación</a></li>
<li><a href="#contacto" data-transition="slideup">Contacto</a></li>
</ul>
<a href="tel:+34687759906" data-role="button" data-theme="b">Llámanos ahora</a>
</div>
<div data-role="footer"><h5>Página hecha con jQuery mobile por Jose luis Acebedo Parajón</h5>
</div>
</div>
<div data-role="page" id="diagnosis">
<div data-role="header"><h1>Diagnósis del automóvil</h1></div>
<div data-role="content">
Contenido de diagnósis.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
<div data-role="page" id="mecanica">
<div data-role="header"><h1>Mecánica y electricidad</h1></div>
<div data-role="content">
Contenido de mecánica.</br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
<div data-role="page" id="contacto">
<div data-role="header"><h1>Contacto</h1></div>
<div data-role="content">
Contenido de contacto.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
<div data-role="page" id="neumaticos">
<div data-role="header"><h1>Neumáticos y amortiguación</h1></div>
<div data-role="content">
Contenido de neumáticos.<br>
<a href="#inicio"data-role="button" data-inline="true">Inicio</a>
</div>
<div data-role="footer">
<h3>Más información en la vista web de la página</h3>
</div>
</div>
</body>
</html>
Sólo necesitamos incluir, entre los head de nuestra página, los meta que necesitemos o un link a nuestro propio CSS si lo precisamos.
Y, para redireccionar a nuestra página móvil a los que nos visiten desde un móvil ver este post.
Comentarios
Publicar un comentario