Tutorial 2 de jQuery e introduccion jQuery Mobile

1. Parte 2
Ing. César Eduardo Suárez Trujillo

2. 1 PROTOTYPE
Para empezar, debemos dejar a un lado todo lo que sabemos de programación
Orientada a objetos. Todo en javascript son objetos, un arreglo en javascript es
simplemente 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 muy
dinámico que me permite agregar métodos a un objeto según sea
necesario.
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én
contiene un método para agregarlo.

4. Este método estaría en cada una de las implementaciones de
cada punto. Por memoria es mejor tener una implementación
del método agregar que sea compartida por cada uno de los
objetos.

5. Revisando un arreglo desde la consola, tenemos lo siguiente:

6. Que podríamos interpretar

7. Podríamos crear entonces un objeto que simplemente se
comporte 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();

12. color
casa1
abripuerta
Casita.prot
color otype
casa2
Prototype

13. 2 JQUERY UI
Biblioteca de componentes reusables para el framework
jQuery, que añaden un conjunto de plugins, widgets y
efectos.
http://jqueryui.com/

14. Principales elementos:
Draggable
Droppable
Interacciones Resizable
Selectable
Sortable
Accordion
Autocomplete
Button
Widgets Datepicker
Dialog
Progressbar
Slider
Tabs

15. Utilidades Position
Widget
Effect
Show
Hide
Toggle
Color
Efectos
Animation
Add Class
Remove Class
Toggle Class
Switch class

16. Drag and Drop
Jquery UI provee la funcionalidad de arrastrar elementos por todo el
documento usando su método draggable(). Para definir un elemento
como destino de un objeto que se arrastra se utiliza el método
droppable().

17. Resizable
Este método nos provee la posibilidad de cambiar el tamaño de los
elementos dinámicamente de cara al usuario. Esta requiere adicionar
el tema css que viene una lalibreria.
$( "#resizable" ).resizable();

18. Sortable
Con este método podemos reorganizar los elementos
dentro de este(en cuanto a posición) arrastrando cada uno
de los elementos que se quiere reubicar.
$( "#sortable" ).sortable();

19. Widgets
Los widgets son una pequeñas aplicaciones que tiene unas
funcionalidades especificas. jQuery UI tienes las siguientes:
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs

20. Acordion
Me permite crear una serie de secciones, que se van
desplegando según interactúe sobre los cabezotes de estas

21. Efectos
Los efectos de la librería jQuery standard son realmente limitados
por no decir que se limitan a uno solo. jQuery UI nos trae
muchísimas mas posibilidades y nos da la posibilidad también de
realizar animaciones de color (transiciones de color)

22. 3 PLUGINS
Algo elemental es que, creo que el mundo no necesita mas
slider plugins , aunque no quiere decir que no podamos
hacer el nuestro y saber como hacer un puglin

23. Hay dos objetos que podemos extender, de entre los cuales debemos elegir
según sea su fin:
1-El objeto jQuery se extiende cuando se necesita crear una función
gené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 las
funciones de Ajax como $.post
2-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ón
a este objeto, la forma de llamarlo sería $(domElement).mifuncion().

24. El método extend() es el método que nos permite incrementar la
funcionalidad de jQuery, pues todo el código de nuestro plugin debe
de ir definido dentro de él.
jQuery.fn.extend(
red: function(){
/*Código aquí*/
};
);

25. Este mini plugin nos pintara todos los elementos que invoquemos
con 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");
});
}
});

26. USANDO PLUGINS DE TERCEROS
En la mayoría de casos usar plugins de terceros es la salida
rápida en nuestros proyectos. Esta es una lista de algunos
muy ú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/

27. 4 JQUERY MOBILE
jQuery mobile es el framework de javascript para desarrollo
de aplicaciones web para moviles basado en en jQuery.

28. 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:

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

30. Las paginas son div cuto atributo data-role es igual a page. Un
documento puede tener múltiples paginas y esta se identificaran
simplemente 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>

31. Tenemos que saber que existen dos tipos de llamados. Uno que son links
“internos” y los links externos. Los links internos son realmente paginas
que se crean en el mismo documentos html y tiene un identificador, se
invocan con #id y pueden tener efectos a la hora de ser llamadas y al ser
internas 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/

32. MI PRIMERA PAGINA

33. CREACIÓN DE NUESTROS
TEMPLATES
http://jquerymobile.com/themeroller/

34. DUDANDO DE JQUERY
Escoger un framework no implica un
matrimonio, simplemente un punto de partida para que todos
en el equipo hablemos el mismo idioma. Dentro de los
frameworks más populares, jQuery no es precisamente el más
rápido, tampoco el mas lento, pero si el más popular .
Podremos ver una prueba de velocidad en este link (aun no he
visto una que tenga la ultima version de jQuery)
http://mootols.net/slickspeed/

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

36. • 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/