jQuery Mobile archivos - Aprende Informatica Conmigo

Empezamos un nuevo «curso» con tutoriales y posiblemente también con videotutoriales sobre el framework «Jquery Mobile».

He elegido Jquery Mobile porque es bastante sencillo para todos aquellos y aquellas que estén comenzando y quieran empezar a desarrollar versiones móviles de páginas web o aplicaciones móviles.

Como en todo, siempre está bien tener unos conocimientos previos para afrontar correctamente una nueva tecnología y en este caso yo aconsejo tener conocimientos sobre lo siguiente:

HTML
CSS
JAVASCRIPT
JQUERY

Vamos al tema y empecemos ya!

En este primer artículo del curso de Jquery Mobile vamos a crear una «plantilla» sobre la que poder partir o sobre la que poder basarnos a partir de ahora.

Necesitamos:

Jquery
Jquery Mobile.

En ambos casos hay varias opciones de descarga de las librerías y yo voy a seguir la que considero más sencilla. Ya tendremos tiempo de complicarlo más adelante.

Bueno, para descargarnos los fichero de Jquery Mobile tendremos que ir a la web: http://www.jquerymobile.com

Como ya os he comentado, la forma más sencilla es descargarnos el paquete completo que incluye todos los «js», «css», «imágenes» y «demos». Os recomiendo que investiguéis un poco con las demos para que os hagáis una idea e incluso podáis acceder al código fuente.

Una vez descargado el fichero, los descomprimimos:

Si accedemos al directorio que se ha creado tras la descompresión tendremos:

Vemos una lista de fichero «css», «js» y «capetas».

Como he comentado antes, en la carpeta «demos» tendremos a nuestra disposición un montón de demos sobre los diferentes elementos de Jquery Mobile:

Ahora bien, de momento lo que nos interesa a nosotros para crear nuestra propia «plantilla» de inicio de Jquery Mobile es lo siguiente:

Directorio «images»
Fichero: jquery.mobile-1.4.2.css
Fichero: jquery.mobile-1.4.2.js

Ahora procedemos a descargarnos la librería de «Jquery» desde http://jquery.com:

Si pulsamos sobre el enlace de la derecha «Download Jquery», nos llevará a la siguiente página desde donde podremos descargar lo que nos interesa:

Ahora bien, yo recomiendo que os descarguéis la versión «uncompressed». Cuando vayamos a desarrollar algún proyecto en serio para producción, nos descargaremos la versión «compressed» que pesa menos.

Entonces, pulsamos con el botón derecho sobre el enlace «Download the uncompressed, development jQuery 1.11.0» y seleccionamos «guardar enlace como».

Guardamos este fichero en nuestro disco.

Ahora vamos a crear la estructura de directorios de nuestro proyectos (plantilla) de Jquery mobile y para ello podemos crear un directorio «plantilla» en el que crearemos los siguientes directorios:

Podemos crear más directorios pero por ahora nos vale con estos.

Copiamos el fichero «jquery.mobile-1.4.2.css» dentro del directorio «css» de nuestro proyecto.

Posteriormente copiamos los ficheros: «jquery.mobile-1.4.2.js» y «jquery-1.11.0.js» dentro del directorio «js».

Y para terminar, copiamos el directorio «images» de Jquery Mobile dentro del directorio «css».

Podéis observar que estoy utilizando «Sublime Text» pero podéis utilizar cualquier otro editor como «Notepad++» o incluso el block de notas.

Ahora creamos un nuevo fichero dentro de nuestro directorio «plantilla» con el nombre «index.html». De momento está vacío.

Ahora introducimos el siguiente código en el fichero que acabamos de crear:

</pre>
<!DOCTYPE html>
<html>
<head>
 <title>Titulo de Pagina</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
 <script src="js/jquery-1.11.0.js"></script>
 <script src="js/jquery.mobile-1.4.2.js"></script>
</head>

<body>
 <div data-role="page">

<div data-role="header">
 <h1>Titulo</h1>
 </div><!-- /header -->

<div role="main" class="ui-content">
 <p>Contenido de la pagina.</p>
 </div><!-- /content -->

<div data-role="footer">
 <h4>Footer</h4>
 </div><!-- /footer -->
 </div><!-- /page -->
</body>
</html>
<pre>

Podréis observar que los «js» y el «css» los he incluído al principio:

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" /></pre>
<script src="js/jquery-1.11.0.js"></script>

<script src="js/jquery.mobile-1.4.2.js"></script>

Pero más adelante veremos más opciones que pueden resultar más adecuadas en cada caso.

Bien, como ya conocéis HTML y CSS supongo que os haréis una idea de lo que estamos haciendo, ¿verdad?

Con el código:

<pre><div data-role="page">
 </div>

Definimos una página en Jquery Mobile.

Con:

<div data-role="header">
 <h1>Titulo</h1>
 </div><!-- /header -->

Definimos la sección de la cabecera

Con:

<div role="main">
 <p>Contenido de la pagina.</p>
 </div><!-- /content -->

El contenido de la página.

Y con:

<div data-role="footer">
 <h4>Footer</h4>
 </div><!-- /footer -->

El pié de página.

El resultado que obtenemos es el siguiente:

Ya veis que es algo muy sencillo.

Lo que hemos hecho hoy nos va a servir como «plantilla» o «base» sobre la que iremos trabajando en otros proyectos más complejos poco a poco.

Os dejo en enlace de JSFIDDLE.

Saludos.

oscar

Programador WordPress freelance