Jquery 2

  • 919 views
Uploaded on

Tutorial 2 de jQuery e introduccion jQuery Mobile

Tutorial 2 de jQuery e introduccion jQuery Mobile

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
919
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
66
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. Parte 2Ing. César Eduardo Suárez Trujillo
  • 2. 1 PROTOTYPEPara empezar, debemos dejar a un lado todo lo que sabemos de programaciónOrientada a objetos. Todo en javascript son objetos, un arreglo en javascript essimplemente un objeto con valores y métodos como push o pop. 1. var myArray = [1, 2]; 2. myArray.push(3); 3. myArray.reverse(); 4. myArray.pop(); 5. var length = myArray.length;
  • 3. Javascript es un lenguaje que no maneja clases y es un lenguaje muydinámico que me permite agregar métodos a un objeto según seanecesario. var point = { x : 10, y : 5, add: function(otherPoint) { this.x += otherPoint.x; this.y += otherPoint.y; } };Este ejemplo ilustra un objeto que representa un punto y tambiéncontiene un método para agregarlo.
  • 4. Este método estaría en cada una de las implementaciones decada punto. Por memoria es mejor tener una implementacióndel método agregar que sea compartida por cada uno de losobjetos.
  • 5. Revisando un arreglo desde la consola, tenemos lo siguiente:
  • 6. Que podríamos interpretar
  • 7. Podríamos crear entonces un objeto que simplemente secomporte como un arreglo, de la siguiente forma // Objeto vacio var obj = {}; // herededa el mismo prototype de una objeto array obj.__proto__ = Array.prototype; // Podemos invocar el metodo push obj.push(3); Esto realmente viene siendo lo siguiente var o = new Array(); o.push(3);
  • 8. Tenemos el siguiente ejemplos: var casita =function (color){ this.color=color; this.abrirPuerta=function(){ console.log("abrio"+this.color); } } var casa1=new casita("rojo"); casa1.abrirPuerta(); var casa2=new casita("verde"); casa2.abrirPuerta();
  • 9. En un diagrama esto se vería de la siguiente forma: color abripuerta casa1 Casita.prot color otype abripuerta casa2 Prototype casita
  • 10. Implementando nuestro método de abrirpuerta, obtendríamos lo siguiente var casita =function (color){ this.color=color; } Casita.prototype.abrirPuerta=function(){ console.log("abrio"+this.color); } var casa1=new casita("rojo"); casa1.abrirPuerta(); var casa2=new casita("verde"); casa2.abrirPuerta();
  • 11. colorcasa1 abripuerta Casita.prot color otypecasa2 Prototype
  • 12. 2 JQUERY UIBiblioteca de componentes reusables para el frameworkjQuery, que añaden un conjunto de plugins, widgets yefectos. http://jqueryui.com/
  • 13. Principales elementos: Draggable DroppableInteracciones Resizable Selectable Sortable Accordion Autocomplete Button Widgets Datepicker Dialog Progressbar Slider Tabs
  • 14. Utilidades Position Widget Effect Show Hide Toggle Color Efectos Animation Add Class Remove Class Toggle Class Switch class
  • 15. Drag and DropJquery UI provee la funcionalidad de arrastrar elementos por todo eldocumento usando su método draggable(). Para definir un elementocomo destino de un objeto que se arrastra se utiliza el métododroppable().
  • 16. ResizableEste método nos provee la posibilidad de cambiar el tamaño de loselementos dinámicamente de cara al usuario. Esta requiere adicionarel tema css que viene una lalibreria. $( "#resizable" ).resizable();
  • 17. SortableCon este método podemos reorganizar los elementosdentro de este(en cuanto a posición) arrastrando cada unode los elementos que se quiere reubicar. $( "#sortable" ).sortable();
  • 18. WidgetsLos widgets son una pequeñas aplicaciones que tiene unasfuncionalidades especificas. jQuery UI tienes las siguientes: Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs
  • 19. AcordionMe permite crear una serie de secciones, que se vandesplegando según interactúe sobre los cabezotes de estas
  • 20. EfectosLos efectos de la librería jQuery standard son realmente limitadospor no decir que se limitan a uno solo. jQuery UI nos traemuchísimas mas posibilidades y nos da la posibilidad también derealizar animaciones de color (transiciones de color)
  • 21. 3 PLUGINSAlgo elemental es que, creo que el mundo no necesita masslider plugins , aunque no quiere decir que no podamoshacer el nuestro y saber como hacer un puglin
  • 22. Hay dos objetos que podemos extender, de entre los cuales debemos elegirsegún sea su fin:1-El objeto jQuery se extiende cuando se necesita crear una funcióngenérica que no necesita interactuar con los elementos DOM de la página.Cuando creamos una función bajo este objeto, la forma de llamarlo es$.mifuncion. Ejemplos de este tipo de funciones, tenemos por ejemplo lasfunciones de Ajax como $.post2-El objeto jQuery.fn se extiende cuando queremos añadir métodos al“wrap” que jQuery hace a los objetos DOM. Cuando añadimos una funcióna este objeto, la forma de llamarlo sería $(domElement).mifuncion().
  • 23. El método extend() es el método que nos permite incrementar lafuncionalidad de jQuery, pues todo el código de nuestro plugin debede ir definido dentro de él. jQuery.fn.extend( red: function(){ /*Código aquí*/ }; );
  • 24. Este mini plugin nos pintara todos los elementos que invoquemoscon este método de color gris. jQuery.fn.extend({ colorear: function(){ /*Recorre todos los elementos encapsulados*/ this.each(function(){ /*Aquí se cambia el contexto, por lo que this se refiere al elemento DOM por el que se está pasando*/ jQuery(this).css("color",”#CCC"); }); } });
  • 25. USANDO PLUGINS DE TERCEROSEn la mayoría de casos usar plugins de terceros es la salidarápida en nuestros proyectos. Esta es una lista de algunosmuy útiles en nuestros proyectos.Paginas con listas de plugins http://www.1stwebdesigner.com/css/jquery-plugins-2011/ http://www.smashingapps.com/2011/12/26/best-of-2011-best- useful-jquery-plugins-and-tutorials.html http://savedelete.com/100-best-jquery-plugins-sorted-by-kind.html http://www.webdesignerwall.com/demo/jquery/
  • 26. 4 JQUERY MOBILEjQuery mobile es el framework de javascript para desarrollode aplicaciones web para moviles basado en en jQuery.
  • 27. CARACTERISTICAS• jQuery Mobile se puede considerar como un plugin de jQuery, por tanto su forma de trabajo es la mismas.• Nos brinda herramientas para construir sitios web para móviles (no solo código javascript) HTML y CSS.• Soporte completo de HMTL5• Eventos de gestos (tacto)• Maneja temas como jQueryUI• Plataformas compatibles:
  • 28. PRIMERO PASOS jQuery Mobile provee una serie de interfaces graficas con soporte de eventos táctiles y un sistema de navegación animado basado potencializado con AJAX. Es un documento HTML5 por tanto inicia como tal <!DOCTYPE html> Bueno y seguimos con los scripts necesarios <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head>
  • 29. Las paginas son div cuto atributo data-role es igual a page. Undocumento puede tener múltiples paginas y esta se identificaransimplemente con el ID <div data-role="page"> ... </div>Elementos básicos internos <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
  • 30. Tenemos que saber que existen dos tipos de llamados. Uno que son links“internos” y los links externos. Los links internos son realmente paginasque se crean en el mismo documentos html y tiene un identificador, seinvocan con #id y pueden tener efectos a la hora de ser llamadas y al serinternas no requieren una recarga de la pagina.Lo links externos se tiene que expesificarse de la siguiente forma <a href="multipage.html" rel="external">Link</a> http://www.smdigital.com.co/clientes/pruebamovil/
  • 31. MI PRIMERA PAGINA
  • 32. CREACIÓN DE NUESTROS TEMPLATES http://jquerymobile.com/themeroller/
  • 33. DUDANDO DE JQUERYEscoger un framework no implica unmatrimonio, simplemente un punto de partida para que todosen el equipo hablemos el mismo idioma. Dentro de losframeworks más populares, jQuery no es precisamente el másrápido, tampoco el mas lento, pero si el más popular .Podremos ver una prueba de velocidad en este link (aun no hevisto una que tenga la ultima version de jQuery) http://mootols.net/slickspeed/
  • 34. 9 REFERENCIAS Y OTRO LINKS• Jquery.com• http://jquerymobile.com/• Wikipedia.com• Javascript and CSS Development with jQuey –Richard York• http://addictedtonew.com/archives/414/creating-a-jquery- plugin-from-scratch /• http://www.cristalab.com/tutoriales/crear-plugins-para-jquery- c251l/• http://msdn.microsoft.com/en-us/magazine/ff852808.aspx
  • 35. • http://fgnass.github.com/spin.js/ (cargador hecho sin imagenes)• http://embeddedjs.com/• http://www.linkedin.com/groups/jQuery- 100943?home=&gid=100943&trk=anet_ug_hm / Grupo de Linkedin• http://knockoutjs.com/• https://github.com/BorisMoore/jsrender• http://www.codiqa.com/• http://addictedtonew.com/archives/414/creating-a-jquery-plugin- from-scratch/