Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

una dosis de jQuery Mobile!

Primeros ejercicios básicos con jQuery Mobile
by

Alejandro Mercado

on 8 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of una dosis de jQuery Mobile!

una dosis de jQuery Mobile
rapid0!

por Alejandro Mercado
amercado@kmmx.mx

Paso 1. Sírvete un buena
taza de café
jquerymobile.com/downloads
Instalando jQuery Mobile
Podemos descargar el archivo ZIP que contiene las librerias fuente en http://jquerymobile.com/download/.

Podemos también utilizar los archivos del CDN en code.jquery.com como veremos posteriormente.

Librerias
jquery.mobile-1.0.css, which is renamed into jquery.mobile.css: it corresponds to the CSS file of jQuery Mobile, uncompressed version. This file will be used to style the HTML pages displayed in the browser.
jquery.mobile-1.0.js, which is renamed into jquery.mobile.js: it is the JavaScript file of jQuery Mobile, uncompressed version. This file will use JavaScript code that can run in the browser.

jquery.mobile-1.0.min.css : compressed version of jquery.mobile-1.0.css.
jquery.mobile-1.0.min.js : compressed version of jquery.mobile-1.0.js.

Finally, the images directory, which contains some images that will be displayed in HTML pages using CSS directives (operation handled internally by jQuery Mobile).

Librerias 2


<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
Primer ejemplo

<body>
<div data-role=page>
<div data-role=header>
<h1>Titulo de la Ventana</h1>
</div>

<div data-role=content>
<p>Contenido de la Ventana</p>
</div>
</div>

</body>
</html>
ejercicio01.html
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet
href=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css />
<script src=http://code.jquery.com/jquery-1.6.min.js></script>
<script src=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js>
</script>
</head>

<div data-role=page>
<div data-role=header>
<h1>Window Title</h1>
</div>

<div data-role=content>
<p> Window Content </p>
</div>
</div>
</body>
</html>
ejercicio01b.html
<body>
data - role
Es un framework desarrollado por jQuery que combina HTML5 y jQuery para la creación de aplicaciones web móviles.

Nos permite generar aplicaciones cuya apariencia será siempre la misma, independientemente del dispositivo desde el cual acceda un usuario, siempre que este usuario acceda desde un dispositivo con un navegador que soporte HTML5.

Este framework provee ciertas herramientas que nos facilitan la creación de una página, con unas pocas asignaciones de atributos HTML podremos generar interfaces muy usables y accesibles..


jQuery Mobile
Otro punto a favor para este framework es que las aplicaciones generadas
con este framework con los estandares de accesibilidad 1.0 , actualmente estan trabajando para cumplir absolutamente con los entandares de
accesibilidad, y su objetivo es que todos su componentes cumplan con las normas de accesibilidad 1.0 .

Su sintaxis sigue siendo la misma pero han ampliado el número de funciones y métodos para dar cabida a todas las nuevas funcionalidades de HTM5 como la geolocalizacion, acelerometro, o eventos que detecten el control (o gestures) con dedos sobre la pantalla.
jQuery Mobile
<link rel="apple-touch-icon" href="filename.png" />
Associate the HTML page with an icon on the desktop

Remove the address bar of the browser
<meta name="apple-mobile-web-app-capable" content="yes" />
Associate an image to the application startup

<link rel="apple-touch-startup-image" href="filename.png" />
Pie de página

<div data-role=footer>
<h1>Window bottom</h1>
</div>
Paso 2. Descargar el framework
Moverse de una página a otra


<div data-role=header>
<h1>Window 1</h1>
</div>

<div data-role=content>
<p> Window content 1</p>
<a href=#win2> Goto window 2 </a>
</div>
</div>

<div data-role=header>
<h1>Window 2</h1>
</div>

<div data-role=content>
<p> Window content 2</p>
</div>
</div>
La arquitectura de roles es el uso de un nuevo atributo llamado:
data-role
.

Los atributos data- son válidos dentro de HTML5, y se denominan atributos personalizados.
<div data-role=page id=win2>
<div data-role=page id=win1>
Agregamos un botón de regresar

<div data-role=content>
<p> Window content 1</p>
<a href=#win2> Goto window 2 </a>
</div>
</div>

<div data-role=header>
<h1>Window 2</h1>
</div>

<div data-role=content>
<p> Window content 2</p>
</div>
</div>
<div data-role=page id=win2 data-add-back-btn=true>
http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH02.php
Full transcript