Web matrix y j querymobile

1. WebMatrix y JQueryMobile Gonzalo “Chalalo” Pérez Correa Microsoft MVP ASP/ASP.NET www.chalalo.cl @chalalo

2. Agenda ¿Porquecon WebMatrix? Introduccion a jQueryMobile Anatomía de unapágina Elementosvisuales Elementos de gráficos de navegación Elementos de formulario Listas 2.0 Tips Utiles PhoneGap Microsoft Confidential 2

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 frameworsJavascript 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! Microsoft Confidential 3

4. Microsoft Confidential 4 Multiplataforma

5. Microsoft Confidential 5 Optimizado para Touch y Temas

6. Mobile Web Framework Microsoft Confidential 6 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) .

8. Versión Beta 1

9. HTML5 & CSS3

10. Liviano (12k)

11. Events

12. API and Methods

13. Ajax Form Handling

14. URL handling and transitions

16. Anatomía

18. Se permiten múltiples vistas por documento

19. Se puede escribir una app en un solo archivo

20. Contiene un header, footer y un área de contenidoMicrosoft Confidential 10

21. <!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> <div data-role="content"> <p>Contenido de la página</p> <p>indicado por data-role</p> </div> <div data-role="footer"> <h4>www.chalalo.cl</h4> </div> </div> </body> </html> Microsoft Confidential 11

22. DEMO Anatomía de una Página Múltiples Vistas Microsoft Confidential 12

23. Características de las Páginas Transiciones: 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 Microsoft Confidential 13

24. Características de las Páginas Ajax: 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 Microsoft Confidential 14

25. DEMO Transiciones Diálogos Temas Microsoft Confidential 15

26. Elementos Gráficos -Barras Elemento “themeables” generalmente utilizados como comandos de navegación en appsmóbiles: Barra de titulo: Barra de pie de página Widget de barra de navegación Microsoft Confidential 16

27. DEMO Headerbars Footerbars Navbars Estableciendo temas Microsoft Confidential 17

28. ElementosGráficos - Botones El framework de JM, mediante data-role=“button” agregaautomaticamentelos estilosnecesariosparaconseguirque los links tenga la gráfica de un botón Microsoft Confidential 18 <a href="index.html" data-role="button">Link button</a> Los botones de formulario, como typesubmit, 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

29. 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> Microsoft Confidential 19 <a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Borrar</a>

30. DEMO Botones Iconos Temas Posiciones Microsoft Confidential 20

31. Formularios Microsoft Confidential 21

32. 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 jQueryUI widgetAPI. Desactivar Ajax (data-ajax="false“ en form) Existe la posibilidad de evitar el render, con data-role="none“ o programáticamente: Microsoft Confidential 22 $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo”;});

33. Elementos de Formulario 1/5 Text Inputs Microsoft Confidential 23 <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div> Search Inputs <div data-role="fieldcontain"> <label for="search">Search Input:</label> <input type="search" name="password" id="search" value="" /> </d

34. Elementos de formulario 2/5 Microsoft Confidential 24 Slider (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> Fliptoggleswitches <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>

35. Elementos de formulario 3/5 Microsoft Confidential 25 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" /> <labelfor="r1">Cat</label> <input type="radio" name="r1" id="r2" value="choice-2" /> <labelfor="r2">Dog</label> <input type="radio" name="r1" id="r3" value="choice-3" /> <labelfor="r3">Hamster</label> <input type="radio" name="r1" id="r4" value="choice-4" /> <labelfor="r4">Lizard</label> </fieldset> </div> Radio Buttons (Horizontal) <fieldset data-role="controlgroup" data-type="horizontal" >

36. Elementos de Formulario 4/5 Microsoft Confidential 26 Checkboxes (Vertical) <div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Agreetotheterms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <labelfor="checkbox-1">I agree</label> </fieldset> </div> Checkboxes (Horizontal) <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">

38. Estas pueden trabajar bien en Navegadores de escritorio

39. Permiten el uso de listas y selecciones múltiples

40. La personalización tiene costo de rendimiento!Microsoft Confidential 27 <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>

41. Elementos de Formulario 6/6 Selects 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 Microsoft Confidential 28 $(document).bind('mobileinit',function(){ $.mobile.selectmenu.prototype.options.nativeMenu = false; });

42. DEMO Elementos de Formulario Theming Microsoft Confidential 29

43. Listview – UL 2.0 Microsoft Confidential 30 Utilizació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.

44. Posibilidad de incluir separadores, imágenes, contadores, searchfilters y más! Microsoft Confidential 31 Listview – UL 2.0

45. TipsUtilesjQueryMobile Evento 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. Microsoft Confidential 32

46. TipsUtilesjQueryMobile $.mobile.changePage( “busqueda.cshtml", { type: "post", data: $("form#search").serialize() }); Microsoft Confidential 33 $.mobile.changePage (method) $.mobile.changePage( "about/us.html", { transition: "slideup"} ); @{ vardb= Database.Open("MiBD"); varIdRegion =UrlData[0] ; varsql ="SelectIdCiudad, NombreCiudadfrom Ciudades whereIdRegion=@0orderbyIdCiudadasc"; var data = db.Query(sql,IdRegion); Json.Write(data,Response.Output); }

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

48. PhoneGapBuild 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!!!! Microsoft Confidential 35

49. DEMO PhoneGap:Build Microsoft Confidential 36

50. ¿ Preguntas? Microsoft Confidential 37

51. Links ( si o si) http://www.asp.net/webmatrix http://www.jquerymobile.com/ http://www.phonegap.com/ Si te queda tiempo: www.chalalo.cl Microsoft Confidential 38

52. © 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.

Web matrix y j querymobile

Recomendados

Recomendados

Más contenido relacionado

Similar a Web matrix y j querymobile

Similar a Web matrix y j querymobile (20)

Más de Gonzalo C.

Más de Gonzalo C. (16)

Web matrix y j querymobile