Your SlideShare is downloading. ×
03 Building cross-platform mobile applications with jQuery Mobile / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

605

Published on

Building cross-platform mobile applications with jQuery Mobile. …

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
605
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×