Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Moviles
Building Cross-Platform Mobile Applications
M.S.C. Ra...
Contenido	
  
•  Listas	
  
–  Básica	
  
–  Con	
  Botones	
  
–  Con	
  Divisiones	
  
•  Controles	
  en	
  jQuery	
  M...
Lista Básica
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 03 of 22
Lista desordenada
<ul data-role="...
Lista con Botones
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 04 of 22
Lista desordenada
<ul data-r...
Lista con Divisiones [1 de 2]
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 22
Lista desordenad...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 22
Lista con Divisiones [2 de 2]
<ul data-role="l...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 07 of 22
Input Text
<label	
  for="input-­‐1">Nombre:</...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 22
Textarea
<label	
  for="textarea-­‐1"	
  >Dato...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 09 of 22
Search
<label	
  for="search-­‐1">Buscar:</lab...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 10 of 22
Checkbox
<fieldset	
  data-­‐role="controlgroup...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 11 of 22
Checkbox Horizontal
<fieldset	
  data-­‐role="c...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 12 of 22
Radio Button
<fieldset	
  data-­‐role="controlg...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 13 of 22
Slider
<div	
  data-­‐role="fieldcontain">	
  
...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 14 of 22
Flip Switch/Flip Toggle
<label	
  for="slider-...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 15 of 22
Select Menu
<label	
  for="select-­‐restaurant...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 16 of 22
Send/Submit Button
<buSon	
  type="submit"	
  ...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 17 of 22
Formularios [1 de 3]
•  Son	
  artefactos	
  u...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 18 of 22
Formularios [2 de 3]
Procesamiento:
•  Client ...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 19 of 22
Formularios [3 de 3]
Definición de un Formular...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 20 of 22
Arquitectura Cliente - Servidor
HTTP Request
C...
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 21 of 22
Desarrollo de un Formulario
Desarrollar un for...
Ac@vidades	
  
•  Realizar el procesamiento del formulario con .NET
•  Utilizar SQL Server para almacenar los datos
proces...
Upcoming SlideShare
Loading in …5
×

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

834 views
728 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
834
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

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

×