Web matrix y j querymobile
Transcript of Web matrix y j querymobile
![Page 1: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/1.jpg)
WebMatrix y JQueryMobileGonzalo “Chalalo” Pérez CorreaMicrosoft MVP ASP/ASP.NETwww.chalalo.cl@chalalo
![Page 2: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/2.jpg)
Microsoft Confidential
2
Agenda− ¿Por que con WebMatrix?− Introduccion a jQueryMobile− Anatomía de una página− Elementos visuales− Elementos de gráficos de navegación− Elementos de formulario− Listas 2.0− Tips Utiles− PhoneGap
![Page 3: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/3.jpg)
Microsoft Confidential
3
¿Por qué utilizar WebMatrix?− Gratis y centrado en el código− Template compatible HTML5− Generación limpia de código− Fácil inclusión de framewors Javascript− Sintaxis Razor simplificada− Creación de Helpers− Manejo simplificado de base de datos(Sql
CE 4.0)− Descargalo en
http://www.asp.net/webmatrix− ASP.NET MVC 4.0 RoadMap indica que
tendrá un template de JQueryMobile, a aprender!
![Page 4: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/4.jpg)
Microsoft Confidential
4
Multiplataforma
![Page 5: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/5.jpg)
Microsoft Confidential
5
Optimizado para Touch y Temas
![Page 6: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/6.jpg)
Microsoft Confidential
6
Mobile Web Framework
El objetivo es proporcionar herramientas para crear interfaces dinámicas que nos permitan utilizar dispositivos touch.
JM ofrece dos tipos de layouts(listas, paneles y overlays) y un conjunto de controles de formulario & UI Widgets(tlggles,slides,tabs) .
![Page 7: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/7.jpg)
Microsoft Confidential
7
jQueryMobile
• Team JQuery• Versión Beta 1• HTML5 & CSS3• Liviano (12k)• Events• API and Methods• Ajax Form Handling• URL handling and
transitions• Global Configuration
![Page 8: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/8.jpg)
Microsoft Confidential
8
JQueryMobileEstado del proyecto:− Recientemente Liberado el Beta 1− Soporte para Blackberry 5.0 y
OperaMini− Características completas, solo
revisión de performance y Bugs Fixes
![Page 9: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/9.jpg)
Anatomía
![Page 10: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/10.jpg)
Microsoft Confidential
10
Pensar en Vistas<div data-role=”page” />o Solo 1 vista visible a la vezo Se permiten múltiples vistas por
documentoo Se puede escribir una app en un solo
archivoo Contiene un header, footer y un área
de contenido
![Page 11: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/11.jpg)
Microsoft Confidential
11
<!DOCTYPE html> <html> <head> <title>Test JQueryMobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script></head> <body> <div data-role="page">
<div data-role="header"> <h1>Header de Vistsa</h1> </div><!-- /header -->
<div data-role="content"> <p>Contenido de la página</p> <p>indicado por data-role</p> </div><!-- /content -->
<div data-role="footer"> <h4>www.chalalo.cl</h4> </div><!-- /footer --></div><!-- /page -->
</body></html>
![Page 12: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/12.jpg)
Microsoft Confidential
12
DEMO− Anatomía de una Página− Múltiples Vistas
![Page 13: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/13.jpg)
Microsoft Confidential
13
Características de las PáginasTransiciones: data-transition="pop“Animaciones disponibles para las transiciones de una pagina o vista:
− Slide,SlideUp,SlideDown,pop,face,flip(*)− Flip no funciona bien en dispositivos Android
ya que carece de capacidades 3D CSS Transform
Dialogs− Cualquier página se puede presentar como una
ventana modal, agregando data-rel="dialog“ el cual puede ir en combinación con data-transition, se recomienda las transiciones pop,slidedown y flip
![Page 14: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/14.jpg)
Microsoft Confidential
14
Características de las PáginasAjax:− Los vínculos a paginas en el mismo dominio se
transforman automáticamente en peticiones Ajax y se muestran con una transición.
− Enlaces que apuntan a otros dominios o que tienen los atributos target, rel="external" , data-ajax="false“ se hará una actualización completa de la página
![Page 15: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/15.jpg)
Microsoft Confidential
15
DEMO− Transiciones− Diálogos− Temas
![Page 16: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/16.jpg)
Microsoft Confidential
16
Elementos Gráficos -BarrasElemento “themeables” generalmente utilizados como comandos de navegación en apps móbiles:− Barra de titulo:
− Barra de pie de página
− Widget de barra de navegación
![Page 17: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/17.jpg)
Microsoft Confidential
17
DEMO− Header bars− Footer bars− Navbars− Estableciendo temas
![Page 18: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/18.jpg)
Elementos Gráficos - BotonesEl framework de JM, mediante data-role=“button” agrega automaticamente los estilos necesarios para conseguir que los links tenga la gráfica de un botón
<a href="index.html" data-role="button">Link button</a>
Los botones de formulario, como type submit, reset, button o imagen se convierten a un estilo como del de enlace, y el original se oculta, sin embargo, cuando se activa con un click, se ejecuta el evento del boton original
![Page 19: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/19.jpg)
Microsoft Confidential
19
Elementos gráficos - Botones− data-inline="true" para establer botones en
linea, por defecto, in-block− Posibilidad de establer un icono predefinido
o personalizado, y su posición dentro del botón:
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" >Borrar</a>
<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Borrar</a>
![Page 20: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/20.jpg)
Microsoft Confidential
20
DEMO− Botones
− Iconos− Temas− Posiciones
![Page 21: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/21.jpg)
Microsoft Confidential
21
Formularios
![Page 22: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/22.jpg)
Microsoft Confidential
22
Elementos de formulario− Por defecto JM automáticamente redenriza los
controles de formulario a controles optimizados para dispositivos touch.
− Una vez inicializados, se pueden abordar mediante programación mediante la jQuery UI widget API.
− Desactivar Ajax (data-ajax="false“ en form)− Existe la posibilidad de evitar el render, con data-
role="none“ o programáticamente:
$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo”;});
![Page 23: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/23.jpg)
Microsoft Confidential
23
Elementos de Formulario 1/5Text Inputs
Search Inputs
<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /></div>
<div data-role="fieldcontain"> <label for="search">Search Input:</label> <input type="search" name="password" id="search" value="" /></d
![Page 24: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/24.jpg)
Microsoft Confidential
24
Elementos de formulario 2/5Slider (Range)
<div data-role="fieldcontain"><label for="slider">Input slider:</label>
<input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>
Flip toggle switches
<div data-role="fieldcontain"><label for="slider">Select slider:</label><select name="slider" id="slider" data-
role="slider"><option value="off">Off</option><option value="on">On</option>
</select> </div>
![Page 25: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/25.jpg)
Microsoft Confidential
25
Elementos de formulario 3/5 Radio Buttons (Vertical)<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="r1" id="r1“ value="choice-1" checked="checked" /> <label for="r1">Cat</label>
<input type="radio" name="r1" id="r2" value="choice-2" /> <label for="r2">Dog</label>
<input type="radio" name="r1" id="r3" value="choice-3" /> <label for="r3">Hamster</label>
<input type="radio" name="r1" id="r4" value="choice-4" /> <label for="r4">Lizard</label> </fieldset></div>
Radio Buttons (Horizontal)
<fieldset data-role="controlgroup" data-type="horizontal" >
![Page 26: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/26.jpg)
Microsoft Confidential
26
Elementos de Formulario 4/5Checkboxes (Vertical)
<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">I agree</label> </fieldset></div>
Checkboxes (Horizontal)
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
![Page 27: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/27.jpg)
Microsoft Confidential
27
Elementos de Formulario 5/5Selects• Posibilidad de utilizar además, personalizaciones• Estas pueden trabajar bien en Navegadores de escritorio• Permiten el uso de listas y selecciones múltiples
• La personalización tiene costo de rendimiento!
<div data-role="fieldcontain"> <label for="sc1" class="select">Choose shipping method:</label> <select name=“sc1" id="select-choice-1"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select></div>
![Page 28: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/28.jpg)
Microsoft Confidential
28
Elementos de Formulario 6/6Selects− Para Select personalizados utilizar
data-native-menu=“false” o:
− Si la lista de valores de demasiado grande ,JM automáticamente genera una nueva “pagina”.
− Selección múltiple solo para personalizados con atributo multiple
− Inclusión de Placeholders
$(document).bind('mobileinit',function(){ $.mobile.selectmenu.prototype.options.nativeMenu = false;});
![Page 29: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/29.jpg)
Microsoft Confidential
29
DEMO− Elementos de Formulario− Theming
![Page 30: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/30.jpg)
Microsoft Confidential
30
Listview – UL 2.0Utilización de Listas <ul> vinculadas a un atributo data-role=“lisview”
JQ Aplicará los estilos necesarios para transformar la lista en una lista móvil amigable, con el indicador de flecha a la derecha, ocupando todo el ancho de la ventana del navegador
Al hacer click sobre un elemento se hará una petición ajax para la url , se crea la nueva pagina en el DOM y se realiza la transación.
![Page 31: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/31.jpg)
Microsoft Confidential
31
− Posibilidad de incluir separadores, imágenes, contadores, search filters y más!
Listview – UL 2.0
![Page 32: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/32.jpg)
Microsoft Confidential
32
Tips Utiles jQueryMobileEvento mobileinit$(document).bind( "mobileinit", function () { $.mobile.ajaxLinksEnabled = false; $.mobile.loadingMessage = 'Cargando...'; $.mobile.page.prototype.options.backBtnText = "Atras"; });
− Botón Atrás− Texto Cargando− Desactivar Ajax− Debe ser ubicado entre la inclusión de
la librería jquery y jquerymobile.
![Page 33: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/33.jpg)
Microsoft Confidential
33
Tips Utiles jQueryMobile
$.mobile.changePage( “busqueda.cshtml", {type: "post", data: $("form#search").serialize()
});
$.mobile.changePage (method)
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
@{var db= Database.Open("MiBD");var IdRegion =UrlData[0] ;var sql ="Select IdCiudad, NombreCiudad from Ciudades where IdRegion=@0 order by IdCiudad asc";var data = db.Query(sql,IdRegion);Json.Write(data,Response.Output);}
![Page 34: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/34.jpg)
Microsoft Confidential
34
PhoneGap¿Qué es Phonegap?− Es una plataforma abierta, basada en HTML5 y JavaScript, − Permite desarrollar aplicaciones para móviles − que compilará las aplicaciones creadas con su entorno
para sistemas operativos Móviles : Apple iOS, Google Android, BlackberryOS, WebOS, Windows Phone 7(*) y Symbian.
− La idea es solo un desarrollo, múltiples plataformas− Se prepara este 21 de julio para la version 1.0
![Page 35: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/35.jpg)
Microsoft Confidential
35
PhoneGap Build
− Evitar instalar múltiples SDK en la maquina local.
− No es necesario agregar el manifiesto− Escribir la app una sola vez− Compilar en la nube− Correr en todos lados!!!!
![Page 36: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/36.jpg)
Microsoft Confidential
36
DEMO PhoneGap:Build
![Page 37: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/37.jpg)
Microsoft Confidential
37
¿ Preguntas?
![Page 38: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/38.jpg)
Microsoft Confidential
38
Links ( si o si)
− http://www.asp.net/webmatrix− http://www.jquerymobile.com/− http://www.phonegap.com/
− Si te queda tiempo:− www.chalalo.cl
![Page 39: Web matrix y j querymobile](https://reader036.fdocuments.co/reader036/viewer/2022062319/5560b4e1d8b42af93b8b4988/html5/thumbnails/39.jpg)
© 2009 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond
to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.