Web App con jQuery Mobile I
Hoy vamos a ver cómo enfrentarnos por primera vez a una Web App con jQuery Mobile. Se trata de un pequeño tutorial en el que podrás hacer tu primer diseño web para movil. Es básico, pero puede ser la base de grandes diseños futuros.
Vamos a empezar paso a paso definiendo cada uno de los códigos que componen la Web App y vamos a explicarlos.
ESTRUCTURA
<!DOCTYPE html>
<html>
<head>
<title>Mi primer Web App</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link rel=»stylesheet» href=»http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css» />
<script type=»text/javascript» src=»http://code.jquery.com/jquery-1.6.4.min.js»></script>
<script type=»text/javascript» src=»http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js»></script>
</head>
<body> …contenido de mi App… </body>
</html>
Vemos que en principio, podría tratarse de un HTML básico, pero al menos hay un detalle que nos puede llamar la atención, la etiqueta VIEWPORT.
- VIEWPORT – La etiqueta viewport indica al navegador coómo debe mostrar el nivel de zoom de la página y sus dimensiones.
Si no definimos esta etiqueta, muchos navegadores utilizarán un «virtual» ancho de página, en torno a los 900px. Al establecer los atributos de la etiqueta, le estamos obligando a que se adapte al dispositivo con el que estamos viendo la web App. De este modo, en el código que estamos utilizando, le obligamos a que el ancho de pantalla se adapte al ancho del dispositivo, y que el grado de escala inicial sea 1.
Estos ajustes, no anulan la capacidad del usuario de poder hacer zoom en la página, con lo cual no perjudicamos en modo alguno la accesibilidad de las páginas.
DEFINIR LAS PÁGINAS DE LA WEB APP
Como en cualquier código HTML, será dentro del <body> donde definamos todo el contenido. De igual manera, aquí es donde vamos a definir cada una de las páginas que componen nuestra Web App.
Para crear cada una de las páginas utilizaremos etiquetas <div> y para definir cada una de ellas, lo haremos con el atributo data-role=»nombredelapágina»
<div data-role="page"> <div data-role="header"><h1>Título de la Página</h1></div> <div data-role="content"><p>Aquí va el contenido de esta página</p></div> <div data-role="footer"><h4>Pie de página</h4></div> </div>
Bien, ya tenemos definida una página, pero vamos a hacerlo algo más divertido, vamos a crear un par de páginas y a navegar entre ellas. Para ello, en el mismo documento HTML vamos a definir una página más, tal y como hicimos con la primera, con un data-role.
DESPLAZAMIENTO ENTRE PÁGINAS
El nombre de la página, lo definimos en el data-role. Para luego navegar entre páginas, es tan simple como hacer un hipervínculo con el nombre de la página destino del modo #nombrepaginadestino.
<body>
<!– Definimos pag 1 –>
<div data-role=»page» id=»pagina1″><div data-role=»header»>
<h1>PÁGINA 1</h1>
</div><!– /header –><div data-role=»content»>
<p>Este es el contenido de la primera página.</p>
<p>Desplazarme a la página <a href=»#pagina2″>2</a></p>
</div><!– /content –><div data-role=»footer»>
<h4>Pie de página 1</h4>
</div><!– /footer –>
</div><!– /fin pag 1 –><!– Definimos pag 2 –>
<div data-role=»page» id=»pagina2″><div data-role=»header»>
<h1>PÁGINA 2</h1>
</div><!– /header –><div data-role=»content»>
<p>Este es el contenido de la segunda página.</p>
<p>Desplazarme a la página <a href=»#pagina1″>1</a></p>
</div><!– /content –><div data-role=»footer»>
<h4>Pie de página 2</h4>
</div><!– /footer –>
</div><!– /fin pag 2 –>
</body>
Como hemos visto es muy fácil crear páginas dentro del documento HTML, basta con que cada una de ellas tenga un id único con su nombre, de este modo además también podremos desplazarnos entre páginas con un simple enlace que busque al «id» concreto de la página destino.
Gracias a quien redacto el mensaje y a los que respondieron las consultas de los post. Dieron soluciones muy útiles y seguramente hay muchas más,
suerte 😉
Lo que se hace es meter un código que reconozca el dispositivo con el que se entra en la web. Si se trata de un smartphone, un iPhone, un iPad,… lo envías a la página que corresponda y de lo contrario entra en la página que tienes por defecto.
Aquí por ejemplo puedes ver el código para detectar iPhone, iPod o iPad: https://www.gloobs.com/blog/index.php/diseno-web-para-iphone-ipod-ipad-detectar-navegador/
Tengo una duda y es que maquetando de esta manera cuando ingrese a traves de un smartphone va a reconocerlo y en que parte del hosting va, si es en el mismo o se compra uno nuevo? x ejemplo cuando busco en google toyota mi smartphone reconocer automaticamente este http://m.toyota.com/espanol/index.html
He encontrado esto, seguramente te valga:
http://demo.tutorialzine.com/2011/10/ios-homescreen-coffeescript/
Hola Chris, la respuesta es si y no, el problema es que todavía muchos navegadores no se lo van a tragar, y no se va a ver, podrías hacerlo con jQuery y jTouch, pero por ejemplo en explorer, no se va a ver 🙁
Hola, interesante artículo. Tengo una duda(es una forma de hablar) y es con respecto a las galerías de fotos.
En un iphone digamos que se podrían pasar a modo de barrido, no se si me explico.
Tengo intención de hacer una galería de imágenes en web normal, para que el pase de las fotos se haga de esa manera, dándole con el ratón a la foto y arrastrándola para pasar a la siguiente.
Hay algo para hacer esto de manera que me sirva en la web vista en un ipad o iphone como en un ordenador?
Saludos y gracias