Web matrix y j querymobile

1,920 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,920
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web matrix y j querymobile

  1. 1. WebMatrix y JQueryMobile<br />Gonzalo “Chalalo” Pérez Correa<br />Microsoft MVP ASP/ASP.NET<br />www.chalalo.cl<br />@chalalo<br />
  2. 2. Agenda<br />¿Porquecon WebMatrix?<br />Introduccion a jQueryMobile<br />Anatomía de unapágina<br />Elementosvisuales<br />Elementos de gráficos de navegación<br />Elementos de formulario<br />Listas 2.0<br />Tips Utiles<br />PhoneGap<br />Microsoft Confidential<br />2<br />
  3. 3. ¿Por qué utilizar WebMatrix?<br />Gratis y centrado en el código<br />Template compatible HTML5<br />Generación limpia de código<br />Fácil inclusión de frameworsJavascript<br />Sintaxis Razor simplificada<br />Creación de Helpers<br />Manejo simplificado de base de datos(Sql CE 4.0)<br />Descargalo en http://www.asp.net/webmatrix<br />ASP.NET MVC 4.0 RoadMap indica que tendrá un template de JQueryMobile, a aprender!<br />Microsoft Confidential<br />3<br />
  4. 4. Microsoft Confidential<br />4<br />Multiplataforma<br />
  5. 5. Microsoft Confidential<br />5<br />Optimizado para Touch y Temas<br />
  6. 6. Mobile Web Framework<br />Microsoft Confidential<br />6<br />El objetivo es proporcionar herramientas para crear interfaces dinámicas que nos permitan utilizar dispositivos touch. <br />JM ofrece dos tipos de layouts(listas, paneles y overlays) y un conjunto de controles de formulario & UI Widgets(tlggles,slides,tabs) .<br />
  7. 7. jQueryMobile<br />Microsoft Confidential<br />7<br /><ul><li>TeamJQuery
  8. 8. Versión Beta 1
  9. 9. HTML5 & CSS3
  10. 10. Liviano (12k)
  11. 11. Events
  12. 12. API and Methods
  13. 13. Ajax Form Handling
  14. 14. URL handling and transitions
  15. 15. Global Configuration</li></li></ul><li>JQueryMobile<br />Estado del proyecto:<br />RecientementeLiberado el Beta 1<br />Soporte para Blackberry 5.0 y OperaMini<br />Características completas, solo revisión de performance y Bugs Fixes<br />Microsoft Confidential<br />8<br />
  16. 16. Anatomía<br />
  17. 17. Pensar en Vistas<br /><div data-role=”page” /><br /><ul><li>Solo 1 vista visible a la vez
  18. 18. Se permiten múltiples vistas por documento
  19. 19. Se puede escribir una app en un solo archivo
  20. 20. Contiene un header, footer y un área de contenido</li></ul>Microsoft Confidential<br />10<br />
  21. 21. <!DOCTYPE html> <br /><html> <br /><head> <br /><title>Test JQueryMobile</title> <br /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /><br /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><br /><script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script><br /></head> <br /><body> <br /> <div data-role="page"><br /> <div data-role="header"><br /> <h1>Header de Vistsa</h1><br /> </div><!-- /header --><br /> <div data-role="content"><br /> <p>Contenido de la página</p><br /> <p>indicado por data-role</p><br /> </div><!-- /content --><br /> <div data-role="footer"><br /> <h4>www.chalalo.cl</h4> <br /> </div><!-- /footer --><br /></div><!-- /page --><br /></body><br /></html><br />Microsoft Confidential<br />11<br />
  22. 22. DEMO<br />Anatomía de una Página<br />Múltiples Vistas <br />Microsoft Confidential<br />12<br />
  23. 23. Características de las Páginas<br />Transiciones:<br /> data-transition="pop“<br />Animaciones disponibles para las transiciones de una pagina o vista:<br />Slide,SlideUp,SlideDown,pop,face,flip(*)<br />Flip no funciona bien en dispositivos Android ya que carece de capacidades 3D CSS Transform<br />Dialogs<br />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<br />Microsoft Confidential<br />13<br />
  24. 24. Características de las Páginas<br />Ajax:<br />Los vínculos a paginas en el mismo dominio se transforman automáticamente en peticiones Ajax y se muestran con una transición.<br />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<br />Microsoft Confidential<br />14<br />
  25. 25. DEMO<br />Transiciones<br />Diálogos<br />Temas<br />Microsoft Confidential<br />15<br />
  26. 26. Elementos Gráficos -Barras<br />Elemento “themeables” generalmente utilizados como comandos de navegación en appsmóbiles:<br />Barra de titulo:<br />Barra de pie de página<br />Widget de barra de navegación<br />Microsoft Confidential<br />16<br />
  27. 27. DEMO<br />Headerbars<br />Footerbars<br />Navbars<br />Estableciendo temas<br />Microsoft Confidential<br />17<br />
  28. 28. ElementosGráficos - Botones<br />El framework de JM, mediante data-role=“button” agregaautomaticamentelos estilosnecesariosparaconseguirque los links tenga la gráfica de un botón<br />Microsoft Confidential<br />18<br /><a href="index.html" data-role="button">Link button</a><br />Los botones de formulario, como typesubmit, reset, button<br />o imagen se convierten a un estilo como del de enlace,<br /> y el original se oculta, sin embargo, cuando se activa con <br />un click, se ejecuta el evento del boton original<br />
  29. 29. Elementos gráficos - Botones<br />data-inline="true" para establer botones en linea, por defecto, in-block<br />Posibilidad de establer un icono predefinido o personalizado, y su posición dentro del botón:<br /><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" >Borrar</a><br />Microsoft Confidential<br />19<br /><a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Borrar</a><br />
  30. 30. DEMO<br />Botones<br />Iconos<br />Temas<br />Posiciones<br />Microsoft Confidential<br />20<br />
  31. 31. Formularios<br />Microsoft Confidential<br />21<br />
  32. 32. Elementos de formulario<br />Por defecto JM automáticamente redenriza los controles de formulario a controles optimizados para dispositivos touch.<br />Una vez inicializados, se pueden abordar mediante programación mediante la jQueryUI widgetAPI.<br />Desactivar Ajax (data-ajax="false“ en form)<br />Existe la posibilidad de evitar el render, con  data-role="none“ o programáticamente:<br />Microsoft Confidential<br />22<br />$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo”;});<br />
  33. 33. Elementos de Formulario 1/5<br />Text Inputs<br />Microsoft Confidential<br />23<br /><div data-role="fieldcontain"><br /> <label for="name">Text Input:</label><br /> <input type="text" name="name" id="name" value="" /><br /></div> <br />Search Inputs<br /><div data-role="fieldcontain"><br /> <label for="search">Search Input:</label><br /> <input type="search" name="password" id="search" value="" /><br /></d<br />
  34. 34. Elementos de formulario 2/5<br />Microsoft Confidential<br />24<br />Slider (Range)<br /><div data-role="fieldcontain"><br /> <label for="slider">Input slider:</label><br /> <input type="range" name="slider" id="slider" <br /> value="0" min="0" max="100" /><br /></div><br />Fliptoggleswitches<br /><div data-role="fieldcontain"><br /> <label for="slider">Select slider:</label><br /> <select name="slider" id="slider" data-role="slider"><br /> <option value="off">Off</option><br /> <option value="on">On</option><br /> </select> <br /></div><br />
  35. 35. Elementos de formulario 3/5 <br />Microsoft Confidential<br />25<br />Radio Buttons (Vertical)<br /><div data-role="fieldcontain"><br /> <fieldset data-role="controlgroup"><br /> <legend>Choose a pet:</legend><br /> <input type="radio" name="r1" id="r1“<br />value="choice-1" checked="checked" /><br /> <labelfor="r1">Cat</label><br /> <input type="radio" name="r1" id="r2" value="choice-2" /><br /> <labelfor="r2">Dog</label><br /> <input type="radio" name="r1" id="r3" value="choice-3" /><br /> <labelfor="r3">Hamster</label><br /> <input type="radio" name="r1" id="r4" value="choice-4" /><br /> <labelfor="r4">Lizard</label><br /> </fieldset><br /></div><br />Radio Buttons (Horizontal)<br /><fieldset data-role="controlgroup" data-type="horizontal" ><br />
  36. 36. Elementos de Formulario 4/5<br />Microsoft Confidential<br />26<br />Checkboxes (Vertical)<br /><div data-role="fieldcontain"><br /> <fieldset data-role="controlgroup"><br /> <legend>Agreetotheterms:</legend><br /> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /><br /> <labelfor="checkbox-1">I agree</label><br /> </fieldset><br /></div><br />Checkboxes (Horizontal)<br /><fieldset data-role="controlgroup"  data-type="horizontal" data-role="fieldcontain"><br />
  37. 37. Elementos de Formulario 5/5<br />Selects<br /><ul><li>Posibilidad de utilizar además, personalizaciones
  38. 38. Estas pueden trabajar bien en Navegadores de escritorio
  39. 39. Permiten el uso de listas y selecciones múltiples
  40. 40. La personalización tiene costo de rendimiento!</li></ul>Microsoft Confidential<br />27<br /><div data-role="fieldcontain"><br /> <label for="sc1" class="select">Choose shipping method:</label><br /> <select name=“sc1" id="select-choice-1"><br /> <option value="standard">Standard: 7 day</option><br /> <option value="rush">Rush: 3 days</option><br /> <option value="express">Express: next day</option><br /> <option value="overnight">Overnight</option><br /> </select><br /></div><br />
  41. 41. Elementos de Formulario 6/6<br />Selects<br />Para Select personalizados utilizar data-native-menu=“false”o:<br />Si la lista de valores de demasiado grande ,JM automáticamente genera una nueva “pagina”.<br />Selección múltiple solo para personalizados con atributo multiple <br />Inclusión de Placeholders<br />Microsoft Confidential<br />28<br />$(document).bind('mobileinit',function(){<br /> $.mobile.selectmenu.prototype.options.nativeMenu = false;<br />});<br />
  42. 42. DEMO<br />Elementos de Formulario<br />Theming<br />Microsoft Confidential<br />29<br />
  43. 43. Listview – UL 2.0<br />Microsoft Confidential<br />30<br />Utilización de Listas <ul> vinculadas a un atributo data-role=“lisview”<br />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<br />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.<br />
  44. 44. Posibilidad de incluir separadores, imágenes, contadores, searchfilters y más!<br />Microsoft Confidential<br />31<br />Listview – UL 2.0<br />
  45. 45. TipsUtilesjQueryMobile<br />Evento mobileinit<br />$(document).bind( "mobileinit", function () {<br /> $.mobile.ajaxLinksEnabled = false;<br />$.mobile.loadingMessage = 'Cargando...';<br /> $.mobile.page.prototype.options.backBtnText = "Atras";<br /> });<br />Botón Atrás<br />Texto Cargando<br />Desactivar Ajax<br />Debe ser ubicado entre la inclusión de la librería jquery y jquerymobile.<br />Microsoft Confidential<br />32<br />
  46. 46. TipsUtilesjQueryMobile<br />$.mobile.changePage( “busqueda.cshtml", {<br />type: "post", <br /> data: $("form#search").serialize()<br />}); <br />Microsoft Confidential<br />33<br />$.mobile.changePage (method)<br />$.mobile.changePage( "about/us.html", { transition: "slideup"} );<br />@{<br />vardb= Database.Open("MiBD");<br />varIdRegion =UrlData[0] ;<br />varsql ="SelectIdCiudad, NombreCiudadfrom Ciudades whereIdRegion=@0orderbyIdCiudadasc";<br />var data = db.Query(sql,IdRegion);<br />Json.Write(data,Response.Output);<br />}<br />
  47. 47. Microsoft Confidential<br />34<br />PhoneGap<br />¿Qué es Phonegap?<br />Es una plataforma abierta, basada en HTML5 y JavaScript, <br />Permite desarrollar aplicaciones para móviles <br />que compilará las aplicaciones creadas con su entorno para sistemas operativos Móviles : Apple iOS, Google Android, BlackberryOS, WebOS, Windows Phone 7(*) y Symbian.<br />La idea es solo un desarrollo, múltiples plataformas<br />Se prepara este 21 de julio para la version 1.0<br />
  48. 48. PhoneGapBuild<br />Evitar instalar múltiples SDK en la maquina local. <br />No es necesario agregar el manifiesto<br />Escribir la app una sola vez<br />Compilar en la nube<br />Correr en todos lados!!!!<br />Microsoft Confidential<br />35<br />
  49. 49. DEMO PhoneGap:Build<br />Microsoft Confidential<br />36<br />
  50. 50. ¿ Preguntas?<br />Microsoft Confidential<br />37<br />
  51. 51. Links ( si o si)<br />http://www.asp.net/webmatrix<br />http://www.jquerymobile.com/<br />http://www.phonegap.com/<br />Si te queda tiempo:<br />www.chalalo.cl<br />Microsoft Confidential<br />38<br />
  52. 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.  <br />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.<br />

×