Building cross-platform mobile applications with jQuery Mobile. Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

1. Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Moviles
Building Cross-Platform Mobile Applications
M.S.C. Raquel Vásquez Ramírez
M.S.C. Cristian A. Rodríguez Enríquez

2. Contenido
• Listas
– Básica
– Con
Botones
– Con
Divisiones
• Controles
en
jQuery
Mobile
• Formularios
• Arquitectura
Cliente
-­‐
Servidor
• Desarrollo
de
un
formulario
• Ac@vidades
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 02 of 22

3. Lista Básica
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 03 of 22
Lista desordenada
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Lista ordenada
<ol data-role="listview">
<li>Item 4</li>
<li>Item 5</li>
</ol>

4. Lista con Botones
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 04 of 22
Lista desordenada
<ul data-role="listview">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
Lista ordenada
<ol data-role="listview">
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ol>

5. Lista con Divisiones [1 de 2]
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 22
Lista desordenada
<ul data-role="listview">
<li data-role="divider">Desayunos</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li data-role="divider">Comidas</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>

6. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 22
Lista con Divisiones [2 de 2]
<ul data-role="listview">
<li>Restaurantes
<ul>
<li>Frances
<ul>
<li><a href="lecentral.html">Le Central</a>
<a href="reservations.php?
restaurant=903">Make Reservations</a>
</li>
</ul>
</li>
<li>Cajun and Creole
<ul>
<li>Bayou Bob's</li>
</ul>

7. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 07 of 22
Input Text
<label
for="input-­‐1">Nombre:</label>
<input
type="text"
name="input-­‐1"
id="input-­‐1"/>

8. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 22
Textarea
<label
for="textarea-­‐1"
>Datos:</label>
<textarea
name="textarea-­‐1"
id="textarea-­‐1">
Ejemplo
text
area
</textarea>

9. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 09 of 22
Search
<label
for="search-­‐1">Buscar:</label>
<input
type="search"
name="search-­‐1"
id="search-­‐1"
/>

10. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 10 of 22
Checkbox
<fieldset
data-­‐role="controlgroup">
<legend>Intereses:</legend>
<input
type="checkbox"
name="checkbox-­‐1"
id="checkbox-­‐1"
class="custom"
/>
<label
for="checkbox-­‐1">Musica</label>
…
</fieldset>

11. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 11 of 22
Checkbox Horizontal
<fieldset
data-­‐role="controlgroup“
data-­‐type="horizontal">
<legend>Intereses:</legend>
<input
type="checkbox"
name="checkbox-­‐1"
id="checkbox-­‐1"
class="custom"
/>
<label
for="checkbox-­‐1">Musica</label>
…
</fieldset>

12. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 12 of 22
Radio Button
<fieldset
data-­‐role="controlgroup">
<legend>radio
buSons:</legend>
<input
type="radio"
name="radio-­‐choice-­‐1"
id="radio-­‐full-­‐1"
value="choice-­‐1"
/>
<label
for="radio-­‐full-­‐1">Credit</label>
</fieldset>

13. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 13 of 22
Slider
<div
data-­‐role="fieldcontain">
<input
type="range"
id="slider-­‐1"
name="slider-­‐1"
min="0"
max="100">
</div>

14. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 14 of 22
Flip Switch/Flip Toggle
<label
for="slider-­‐music">Ambient
Music</label>
<select
name="slider-­‐music"
id="slider-­‐music"
data-­‐role="slider">
<op@on
value="on">On</op@on>
<op@on
value="off">Off</op@on>
</select>

15. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 15 of 22
Select Menu
<label
for="select-­‐restaurants">Select
Your
Restaurants:</label>
<select
id="select-­‐restaurants"
name="select-­‐restaurants">
<op@on
value="le
central">Le
central</op@on>
…
</select>

16. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 16 of 22
Send/Submit Button
<buSon
type="submit"
data-­‐theme="a"
data-­‐
mini="true">Enviar</buSon>

17. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 17 of 22
Formularios [1 de 3]
• Son
artefactos
u@lizados
para
enviar
información
al
servidor.
• jQuery
mejora
los
elementos
de
un
formulario
permi@endo
que
cada
componente
se
adapte
fácilmente
al
@po
de
interfaz
del
disposi@vo
móvil.

18. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 18 of 22
Formularios [2 de 3]
Procesamiento:
• Client Side (JavaScript)
• Server Side (PHP, Java, MS.NET…)
Almacenamiento
• Client Side (HTML 5 - Browser)
• Server Side (MySQL, Oracle, SQL Server, Posgresql…)

19. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 19 of 22
Formularios [3 de 3]
Definición de un Formulario:
<form
id="miFormulario"
ac>on="resultado.php”
method="post"
data-­‐ajax="false”>
…
</form>

20. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 20 of 22
Arquitectura Cliente - Servidor
HTTP Request
Cualquier tecnologia con
soporte HTTP y HTML

21. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 21 of 22
Desarrollo de un Formulario
Desarrollar un formulario con los siguientes campos:
• Usuario
• Password
• Nombre
• Apellido Paterno
• Edad
• Sexo
• Email
• Si desea suscribirse al boletín de noticias

22. Ac@vidades
• Realizar el procesamiento del formulario con .NET
• Utilizar SQL Server para almacenar los datos
procesados
• Obtener Feedback de la aplicación servidor y
mostrarlo en una lista (Listar Usuarios Registrados)
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 22 of 22