03 building cross-platform mobile applications with jquery mobile / desarrollo de aplicaciones...
DESCRIPTION
Building cross-platform mobile applications with jQuery Mobile. Desarrollo de Aplicaciones Cross-Platform para Dispositivos MovilesTRANSCRIPT
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
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
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>
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>
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>
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>
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"/>
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>
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" />
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>
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>
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>
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>
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>
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>
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>
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.
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…)
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>
Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 20 of 22
Arquitectura Cliente - Servidor
HTTP Request
Cualquier tecnologia con soporte HTTP y HTML
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
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