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
• Validación
de
formularios
• Manejo
de
Base
de
Datos
(Server
Side)
• Ac<vidades
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 02 of 15

3. Validación de Formularios
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 03 of 15
• Validación con JavaScript (Expresiones Regulares)
• Validación Server Side (Vía AJAX)
• Validación con Plugin jQuery (JavaScript)

4. Required Field
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 04 of 15
<fieldset data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="required">
</fieldset>

5. Minlegth
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 15
<fieldset data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="required” minlength="5">
</fieldset>

6. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 15
Password
<fieldset data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" minlength="5">
</fieldset>

7. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 07 of 15
Confirm Password
<fieldset
data-­‐role="fieldcontain">
<label
for="password2">Confirm
Password:</label>
<input
type="password"
name="password2"
id="password2"
class="required
passmatch"
minlength="5">
</fieldset>

8. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 15
EMail
<fieldset
data-­‐role="fieldcontain">
<label
for="email">Email:</label>
<input
type="email"
name="email"
id="email"
class="required
email"
minlength="5">
</fieldset>

9. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 09 of 15
Read Only
<fieldset
data-­‐role="fieldcontain">
<label
for="username">Username:</label>
<input
type="text"
name="username"
id="username"
value=“"
readonly="readonly">
</fieldset>

10. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 10 of 15
Desarrollo de un Formulario con Validación
[1 de 2]
• Username
(Required)
• Password
(Required,
Confirm)
• Email
(Required,
Format)
• Favorite
Color
Required
• Home
Town

11. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 11 of 15
Desarrollo de un Formulario con Validación
[2 de 2]
• Recuperar
Valores
• Validación
de
Datos
(Server
Side)
• Procesamiento
de
Datos
• Respuesta
(Feedback)
• Almacenamiento
de
Datos
• Confirmación
Registro
• …

12. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 12 of 15
Bases de Datos
• Server
Side
• Web
Applica<on
• Web
Services
• RESTFul
• SOAP
• Client
Side
• Browser
Database
(HTML
5)
• SQLite
(Combinado
con
Otras
Tecnologías)

13. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 13 of 15
Bases de Datos Server Side
• Database
Engines
• MySQL
• PosgreSQL
• SQL
Server
• Oracle
• Firebird
• Mongo
DB
• …

14. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 14 of 15
Base de Datos Server Side (Elementos)
• Validación
de
Datos
(Nulo,
Vacio,
Tipo,
Longitud)
• Procesamiento
(Formato
de
Datos
-­‐>
Formato
de
Fecha)
• Logica
de
Negocio
(Almacenar
Información,
Reportes,
…)

15. Ac<vidades
• Buscar plugins de validación jQuery
• Identificar que otro tipo de validación puede ser util
• Identificar las opciones de visualización de la
validación
• Validar Formulario con Acceso a Base de Datos
(Server Side)
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 15 of 15