Aprende Informatica Conmigo

  • Inicio
  • Contenido Anterior
    • VIDEOTUTORIALES
    • Windows Server 2008
    • POWERSHELL

8 abril, 2014 Por oscar Deja un comentario

Curso de Jquery Mobile – 01: Introducción

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

Jquery Mobile

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:

Jquery Mobile

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

01-introduccion03

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:

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:

Jquery Mobile

  • 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:

Jquery Mobile

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:

Jquery Mobile

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».

Jquery Mobile

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:

  • css
  • js

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».

Jquery Mobile

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.

Jquery Mobile

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>

Jquery Mobile

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:

Jquery Mobile

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
oscar

Programador WordPress freelance

Publicado en: jQuery Mobile Etiquetado como: desarrollo, jquery, jquery mobile

Hazte con el tema Divi

Divi WordPress Theme
Libro windows server 2008

Libro certificación Windows Server 2016

Libro certificación Windows Server 2016

Libro Windows Server 2016

Libro Windows Sever 2016
Web Hosting

Últimos artículos

  • PHP función var_dump(): Mostrar el contenido de una variable
  • PHP función unset(): Eliminar variables
  • MySQL LIMIT: Limitar la canidad de filas en una consulta
  • PHP función isset(): Evaluar si una variable está definida
  • PHP función empty(): Comprobar si una variable está vacía
  • MySQL SELECT DISTINCT para encontrar registros con diferente valor en el mismo campo
  • Los mejores libros en español para aprender WordPress

Mis Webs

  • Aprende Informática Conmigo
  • Dinapyme
  • MUSIKP
  • Oscar Abad Folgueira

Proyectos

  • Basabe Baserria
  • Batukada Battuere
  • Bicicletas Sin Pedales
  • Bordalan
  • C.R. Pantano del Rumblar
  • Dinapyme
  • DiverBiblio
  • Egia Ingenieros
  • Hermanos Vivas construcciones
  • Ibartxi – Suministros de Gas y Soldadura
  • LANBASE
  • LS Fotografía
  • Luke and Phil
  • Masajes Mas Sana
  • MUSIKP
  • Oh! Yeah Dev
  • Oscar Abad Folgueira
  • Participación ciudadana Basauri
  • Restaurante Bideko
  • Taldesport
  • Vicente Choya
  • WooCommerce Knowledge2K
  • Inicio
  • Contenido Anterior

Copyright © 2023 · Oscar Abad Folgueira Y DINAPYME· Acceder