Ing. César Eduardo Suárez Trujillo

Parte 2

PROTOTYPE1

Para empezar, debemos dejar a un lado todo lo que sabemos de programaciónOrientada 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;

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.

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.

Revisando un arreglo desde la consola, tenemos lo siguiente:

Que podríamos interpretar

Podríamos crear entonces un objeto que simplemente se comporte como un arreglo, de la siguiente forma

// Objeto vaciovar obj = {}; // herededa el mismo prototype de una objeto arrayobj.__proto__ = Array.prototype; // Podemos invocar el metodo pushobj.push(3);

Esto realmente viene siendo lo siguiente

var o = new Array();o.push(3);

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();

Tenemos el siguiente ejemplos:

En un diagrama esto se vería de la siguiente forma:

casa1

Casita.prototype

casita

colorabripuerta

colorabripuerta

casa2Prototype_protos_

_protos_

_protos_

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();

casa1

Casita.prototype

color

color

casa2Prototype_protos_

_protos_

_protos_

abripuerta

JQUERY UI

Biblioteca de componentes reusables para el framework jQuery, que añaden un conjunto de plugins, widgets y efectos.

2

http://jqueryui.com/

Principales elementos:

Interacciones

DraggableDroppableResizableSelectableSortable

Widgets

AccordionAutocompleteButtonDatepickerDialogProgressbarSliderTabs

Efectos

Utilidades PositionWidget

EffectShowHideToggleColorAnimationAdd ClassRemove ClassToggle ClassSwitch class

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().

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();

Sortable

$( "#sortable" ).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.

Widgets

Los widgets son una pequeñas aplicaciones que tiene unas funcionalidades especificas. jQuery UI tienes las siguientes:

AccordionAutocompleteButtonDatepickerDialogProgressbarSliderTabs

Acordion

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

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)

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

3

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().

jQuery.fn.extend( red: function(){ /*Código aquí*/ }; );

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({ 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"); }); } });

Este mini plugin nos pintara todos los elementos que invoquemos con este método de color gris.

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.htmlhttp://savedelete.com/100-best-jquery-plugins-sorted-by-kind.htmlhttp://www.webdesignerwall.com/demo/jquery/

JQUERY MOBILE

jQuery mobile es el framework de javascript para desarrollo de aplicaciones web para moviles basado en en jQuery.

4

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:

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

Bueno y seguimos con los scripts necesarios<!DOCTYPE html>

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

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>

<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div>

</div>

Elementos básicos internos

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

http://www.smdigital.com.co/clientes/pruebamovil/

<a href="multipage.html" rel="external">Link</a>

MI PRIMERA PAGINA

CREACIÓN DE NUESTROS TEMPLATES

http://jquerymobile.com/themeroller/

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/

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

9

/

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