Bienvenidos sean a este post, hoy veremos otra libreria de plug-in para nuestra ayuda.
En los dos posts anteriores hemos visto una libreria con un conjunto de plug-in que nos facilitaban la forma de trabajar con nuestras paginas, en el caso del post de hoy nos centraremos en algo similar pero orientado exclusivamente a los dispositivos moviles, telefonos, tablets o cualquier otro dispositivo similar, este lleva el nombre del titulo y se puede descargar desde el siguiente sitio:
https://jquerymobile.com/download/
Aqui podran descargar toda la libreria, usar el builder y descargar lo necesario o usarla por medio de CDN, este es de forma similar al que usamos para jQuery en este blog, para los ejemplos nos decantaremos por esta opcion, por ultimo como esta libreria utiliza Ajax para trabajar necesitaremos de unu servidor web, tal como hicimos cuando trabajamos con Ajax en jQuery, en caso de no tener alguno les recomiendo estos dos posts:
En este post les comento como crear un pc virtual e instalarle un linux debian, si hicieron esto pueden pasar al segundo post:
En este comento como instalar un servidor Apache, y de manera opcional pueden instalar PHP y mariadb aunque como dije no es necesario, esto se los sugiero asi porque solo necesita 1 GB de RAM, no ponen en riesgo su ordenador y en caso de no necesitarlo mas simplemente lo borran y listo, con esto comentado vamos a crear el ejemplo en el servidor, pero antes deben descargar las imagenes que usaremos:
Extraigan las cuatro imagenes y estas agreguenlas en el servidor, para este ejemplo les recomiendo crear un nuevo directorio en el servidor y en este pongan las imagenes descargadas anteriormente, en este caso para un mejor orden a su vez crreare otro directorio llamado imagenes donde estaran las fotos, nuestro siguiente paso sera crear un nuevo archivo con el nombre de movil.html, la estructura debe ser algo similar a esta:
.
├── imagenes
│ ├── book1.jpg
│ ├── book2.jpg
│ ├── book3.jpg
│ └── book4.jpg
└── movil.htmlAhora vamos a crear la base de nuestra pagina, para ello iremos al archivo movil.html y agregaremos el siguiente codigo:
movil.html
<html>
<head>
<title>Mitos de Cthulhu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilo.css" type="text/css"/>
</head>
<body>
<div>
<h1>Libros seleccionaddos</h1>
</div>
<div>
<ul>
<li><a href="cthulhu.html">The call of Cthulhu</a></li>
<li><a href="conan.html">Conan the barbarian</a></li>
<li><a href="hyper.html">Hyperborea</a></li>
<li><a href="color.html">The color out of space</a></li>
</ul>
</div>
</body>
</html>
Esta va a ser la base, observen que simplemente es una lista con unos links en el body, en el head tenemos el titulo de la pagina, una curiosidad como es el tag meta, este nos servira para adaptar en escala a la pagina dependiendo del dispositivo, si no lo pusieramos se veria como en una pc y por lo tanto se mostraria muy chico, en cambio de esta forma se mostrara de mejor forma, y lo mejor es que se ajusta automaticamente por lo tanto no afecta a la pagina si la vemos desde un ordenador u otro dispositivo, tambien cargamos el archivo css donde estaran los estilos, si lo prueban ahora se vera de esta forma
Ahora pasemos a implemetar a jQuery Mobile, para ello debemos tomar la seccion de head del archivvo movil.html y modificarla de la siguiente manera:
<head>
<title>Mitos de Cthulhu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilo.css" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
Basicamente lo que hicimos fue agregar el archivo de estilos de esta libreria antes que la libreria de jQuery y agregamos la libreria nueva despues de esta, con esto ya esta implementado, nuestro siguiente paso sera modificar todo el contenido de body de la siguiente manera:
<body>
<div data-role="page">
<div data-role="header">
<h1>Libros seleccionados</h1>
</div>
<div data-role="content">
<ul>
<li><a href="cthulhu.html">The call of Cthulhu</a></li>
<li><a href="conan.html">Conan the barbarian</a></li>
<li><a href="hyper.html">Hyperborea</a></li>
<li><a href="color.html">The color out of space</a></li>
</ul>
</div>
</div>
</body>Observen que agregamos un nuevo par de divs, el primero llamado page, otro header y el contenedor de links como content, pero aqui viene la curiosidad porque en todo los casos usamos a data-role en lugar de id o class como haciamos antes, esto es asi porque esta libreria aplica todo en base a la palabra data- seguida de la accion, por ejemplo role para indicar cual es el rol que debe aplicar al elemento, si miran la pagina notaran que tiene un cierto orden, todo debe estar encerrado en un rol llamado page, dentro de esta tendremos uno que sirve como encabezado (header), luego uno para identificar el contenido (content) y en este caso no lo usamos pero tambien tenemos uno para el final (footer), con estos cambios si probamos nuestra pagina ahora se vera de la siguiente forma
El primer detalle es como agrego un encabezado a nuestro titulo, le aplico un estilo propio y como este tiene un nombre largo lo redujo automaticamente, pero si lo ponen horizontal se vera de la siguiente forma
Observen como ahora si nos puso el nombre completo, y todo sin hacer nada absolutamente extra, ahora vamos a trabajar con varias paginas dentro de la misma, para ello debemos hacer un par de modificaciones en el body, despues del div page anterior agregaremos los siguientes:
<div id="cthulhu" data-role="page">
<div data-role="header">
<h1>The call of Cthulhu</h1>
</div>
<div data-role="content">
<img src="imagenes/book1.jpg" alt="The call of Cthulhu" />
<div class="titulo">The call of Cthulhu</div>
<div class="autor">H. P. Lovecraft</div>
</div>
</div>
<div id="conan" data-role="page">
<div data-role="header">
<h1>Conan the barbarian</h1>
</div>
<div data-role="content">
<img src="imagenes/book2.jpg" alt="Conan the barbarian" />
<div class="titulo">Conan the barbarian</div>
<div class="autor">Robert E. Howard</div>
</div>
</div>
<div id="hyper" data-role="page">
<div data-role="header">
<h1>Hyperborea</h1>
</div>
<div data-role="content">
<img src="imagenes/book3.jpg" alt="Hyperborea" />
<div class="titulo">Hyperborea</div>
<div class="autor">Clark A. Smith</div>
</div>
</div>
<div id="color" data-role="page">
<div data-role="header">
<h1>The color out of space</h1>
</div>
<div data-role="content">
<img src="imagenes/book4.jpg" alt="The color out of space" />
<div class="titulo">The color out of space</div>
<div class="autor">H. P. Lovecraft</div>
</div>
</div>Este es el contenido que teniamos anteriormente, observen como cada div tiene el rol de page, al igual que el anterior, pero cada uno con un id para distinguirlo, despues seguimos teniendo el header con el titulo en cada uno de ellos, asi como el contenido donde esta la imagen, el titulo y el autor, tal como vimos en los posts anteriores, ahora vamos a modificar el div donde estan los links de la siguiente manera:
<div data-role="page">
<div data-role="header">
<h1>Libros seleccionados</h1>
</div>
<div data-role="content">
<ul>
<li><a href="#conan">Conan the barbarian</a></li>
<li><a href="#hyper">Hyperborea</a></li>
<li><a href="#cthulhu">The call of Cthulhu</a></li>
<li><a href="#color">The color out of space</a></li>
</ul>
</div>
</div>En este caso no solo lo cambiamos de orden sino que en lugar de ir a un archivo le pasamos cada uno de los id para cada libro, despues el resto sigue de la misma forma pero antes de probarlo vamos a hacer la ultima modificacion, para ello debemos crear junto al archivo movil.html uno nuevo llamado estilo.css y le agregaremos el siguiente codigo:
.ui-content img {
display: block;
width: 250px;
height: 410px;
}
.ui-content .titulo {
padding: 10px;
margin: 0;
width: 230px;
font-weight: bold;
background-color: #000;
color: #fff;
text-shadow: none;
}
.ui-content .autor {
padding: 10px;
margin: 0;
width: 230px;
font-weight: bold;
background-color: #F79321;
color: #fff;
text-shadow: none;
}Nota: Los tamaños de width y height los ajuste para que se vean bien en mi dispositivo, si les queda muy chicos o grandes, ajustenlos a sus dispositivos.
Esto se encargara de darle un mejor formato a las «paginas» que agregamos recientemente, mas que nada para ajustar los anchos y altos de estos, asi como los colores y las fuentes, si lo prueban trabajara de la siguiente forma
Aqui les dejo un ejemplo de como trabaja ahora la pagina en un movil, si bien no es un movil como tal es muy similar a como lo veran, hasta aqui ya tenemos una pagina que nos linkea con otras paginas dentro de esta pero esto no acaba aca porque esto lo vamos a mejorar de una manera muy simple, tomen el siguiente tag:
<ul>Y lo modificaremos de la siguiente manera:
<ul data-role="listview" data-inset="true">En este caso le establecimos un nuevo rol y el inset es solamente para agregar una mejor apariencia, si lo prueban ahora se vera de la siguiente manera
Con que simpleza lo mejoramos no? ahora vamos a modificar la linea anterior de al siguiente manera:
<ul data-role="listview" data-inset="true" data-filter="true">Con este nuevo elemento agregamos un filtro para nuestra lista:
Ahora podemos filtrar el listado para mostrar solo lo necesario
Como pueden ver todo se incorpora de una manera practica y sutil, por ultimo vamos a agregar a las paginas el boton de volver, para ello en cada uno de los div con el rol de header, salvo el de los links, debemos hacer una modificacion y para ello tomemos uno de ejemplo:
<div data-role="header" data-add-back-btn="true">En este caso simplemente se agregara el boton de volver en cada uno de los headers de cada pagina facilitando el volver al inicio, veamos como quedo ahora nuestra pagina
Para finalizar con este tema debemos hacer una ultima modificacion, en este caso el primero sera en el archivo movil.html donde cambiaremos la siguiente linea:
<li><a href="#cthulhu">The call of Cthulhu</a></li>De esta manera:
<li><a href="cthulhu.html">The call of Cthulhu</a></li>Nuestra siguiente modificacion sera eliminar el div con el id de cthulhu dado que ahora estara externamente, con esto realizado debemos crear un nuevo archivo con el nombre de cthulhu.html y le agregaremos el siguiente codigo:
cthulhu.html
<!DOCTYPE html>
<html>
<head>
<title>The call of Cthulhu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="estilo.css" type="text/css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="cthulhu" data-role="page">
<div data-role="header" data-add-back-btn="true">
<h1>The call of Cthulhu</h1>
</div>
<div data-role="content">
<img src="imagenes/book1.jpg" alt="The call of Cthulhu" />
<div class="titulo">The call of Cthulhu</div>
<div class="autor">H. P. Lovecraft</div>
</div>
</div>
</body>
Basicamente lo que hicimos fue trasladar el div que teniamos en el otro archivo a este pero le agregamos las librerias necesarias para que pueda ejecutar los mismos elementos, si lo probamos funcionara de la siguiente forma
Como pueden ver fue practicamente transparente la transicion a la nueva pagina externa y se mantiene toda la estetica de las otras paginas, con todo esto hemos visto de una forma muy basica como trabajar con esta libreria, si consigo en algun momento mas material o puedo recompilar mas informacion sobre la misma estare armando algo sobre ella y la compartire, les dejo un link con todos los archivos visto en este post:
En resumen, hoy hemos visto a la libreria jQuery Mobile plug-in, una muy util para agregar nuevos elementos a nuestras paginas de una manera muy simple y practica, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 