jQuery Mobile #1

Esta serie de jQuery Mobile pretende hacer un seguimiento a un proyecto que utiliza esta famosa libreria utilizada para proyecto de webapps o webs móviles.

Lo primero es ir a su web y descargarse la libreria. Yo he elegido la opción de “latest stable” (1.4.2) y la he metido tal cual en la tipica carpeta js/vendor.

Lo siguiente ha sido ir a boilerplate mobile y descargar la plantilla que los chicos de boilerplate nos sugieren para proyectos para móviles.

jQuery Mobile incluye todo lo necesario para crear webapps: navegación, framework CSS, y una buena colección de widgets. La idea es la de ir mas alla de simplemente utilizar las opciones por defecto.

De momento asi quedaria el index.html. En negrita se puede ver lo importante: las importaciones de los js y css y el contenido.

Dentro del contenido, para establecer una pagina le daremos al div que la contiene el atributo data-role=”page”

<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Pagina Inicial - aitor_jqmobile</title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
<!-- For iOS web apps. Delete if not needed. https://github.com/h5bp/mobile-boilerplate/issues/94 -->
<!--
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">
-->

<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="js/vendor/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<body>
<div data-role="page">
<h1>Esta es la pagina inicial</h1>
<p>Probando, probando, ...</p>
</div>

<script src="js/vendor/jquery1.11.0.min.js"></script>
<script src="js/vendor/jquery.mobile-1.4.2/jquery.mobile-1.4.2.min.js"></script>
</body>
</html>
jQuery Mobile #1

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s