SlideShare una empresa de Scribd logo
1 de 25
Mootools y otros frameworks JS
Que es JavaScript? ,[object Object],[object Object],[object Object]
Que es un Framework? ,[object Object],[object Object]
Porque usar un Framework?  ,[object Object],[object Object],[object Object]
Ejemplo de XMLHttpRequest sin Framework ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Unos cuantos Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Más Frameworks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Puntos a tener en cuenta cuando eliges un Framework js ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Cual elegir? ,[object Object],[object Object],[object Object],[object Object]
Por que Mootools? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Descripción de Mootools ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Browser ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Native y Element ,[object Object],[object Object],[object Object],[object Object]
Eventos de window Casi siempre vamos a necesitar un disparador: window.addEvent( 'domready ', function() {       // código que se ejecuta cuando el navegador tiene todo el HTML }); window.addEvent( 'load ', function() {       // código que se ejecuta cuando el navegador tiene toda la página web descargada (HTML, CSS, imágenes, JS, Flash, …) });
[object Object],[object Object],[object Object],[object Object]
Selectores selectors body div.example, div.note div[class|=dialog] div #title div[class!=made_up] body div h1#title div[class~=example] div p div #title div:not(.example) div > p ul.toc li.tocline2 p:contains(selectors) div + p ul.toc > li.tocline2 p:nth-child(even) div ~ p h1#title + div > p p:nth-child(2n) div[class^=exa][class$=mple] h1[id]:contains(Selectors) p:nth-child(odd) div p a a[href][lang][class] p:nth-child(2n+1) div, p, a div[class] p:nth-child(n) .note div[class=example] p:only-child div.example div[class^=exa] p:last-child ul .tocline2 div[class$=mple] p:first-child div[class*=e]
Más selectores ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Arrays ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Funciones ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Eventos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Crear elementos var  newElementVar =  new  Element('div', { 'id': 'id_name', 'text': 'I am a new div', 'styles': { 'width': '200px', 'height': '200px', 'background-color': '#eee', 'float': 'left‘ } });
Manipulando elementos ,[object Object],[object Object],[object Object],[object Object],[object Object]
Mover elementos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Estilos de los elementos ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bibliografía ,[object Object],[object Object],[object Object],[object Object],[object Object]

Más contenido relacionado

La actualidad más candente

Frontend Tools | Herramientas para Frontends
Frontend Tools | Herramientas para FrontendsFrontend Tools | Herramientas para Frontends
Frontend Tools | Herramientas para FrontendsDavid Ballén
 
Presentación Multimedia - Django
Presentación Multimedia - DjangoPresentación Multimedia - Django
Presentación Multimedia - DjangoViviana Trujillo
 
Concurrency with Promise Style – Rayco Araña
Concurrency with Promise Style – Rayco ArañaConcurrency with Promise Style – Rayco Araña
Concurrency with Promise Style – Rayco ArañaDroidcon Spain
 
Taller de Django betabeers
Taller de Django betabeersTaller de Django betabeers
Taller de Django betabeersbetabeers
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008Mitusin
 
Iniciación PHP 5. PHP y MySQL
Iniciación PHP 5. PHP y MySQLIniciación PHP 5. PHP y MySQL
Iniciación PHP 5. PHP y MySQLRightster
 
Desarrollo de aplicaciones web con PHP y symfony
Desarrollo de aplicaciones web con PHP y symfonyDesarrollo de aplicaciones web con PHP y symfony
Desarrollo de aplicaciones web con PHP y symfonyJuan Eladio Sánchez Rosas
 
Jsp directiva page
Jsp directiva pageJsp directiva page
Jsp directiva pagejubacalo
 
Django - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosDjango - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosGeorge Navarro Gomez
 
Taller introduccion symfony2
Taller introduccion symfony2Taller introduccion symfony2
Taller introduccion symfony2Mario IC
 
Find File Servlet DB
Find File Servlet DBFind File Servlet DB
Find File Servlet DBjubacalo
 
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y AngularDesarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y AngularFreelancer
 
Vue + Typescript: Decorators vs. Extend, Fight!
Vue + Typescript: Decorators vs. Extend, Fight!Vue + Typescript: Decorators vs. Extend, Fight!
Vue + Typescript: Decorators vs. Extend, Fight!Sara Lissette L. Ibáñez
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLjubacalo
 

La actualidad más candente (20)

Frontend Tools | Herramientas para Frontends
Frontend Tools | Herramientas para FrontendsFrontend Tools | Herramientas para Frontends
Frontend Tools | Herramientas para Frontends
 
Presentación Multimedia - Django
Presentación Multimedia - DjangoPresentación Multimedia - Django
Presentación Multimedia - Django
 
Concurrency with Promise Style – Rayco Araña
Concurrency with Promise Style – Rayco ArañaConcurrency with Promise Style – Rayco Araña
Concurrency with Promise Style – Rayco Araña
 
Taller de Django betabeers
Taller de Django betabeersTaller de Django betabeers
Taller de Django betabeers
 
Barcelona Workshop 2008
Barcelona Workshop 2008Barcelona Workshop 2008
Barcelona Workshop 2008
 
Iniciación PHP 5. PHP y MySQL
Iniciación PHP 5. PHP y MySQLIniciación PHP 5. PHP y MySQL
Iniciación PHP 5. PHP y MySQL
 
Desarrollo de aplicaciones web con PHP y symfony
Desarrollo de aplicaciones web con PHP y symfonyDesarrollo de aplicaciones web con PHP y symfony
Desarrollo de aplicaciones web con PHP y symfony
 
13proftpd
13proftpd13proftpd
13proftpd
 
Jsp directiva page
Jsp directiva pageJsp directiva page
Jsp directiva page
 
Django - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales ConceptosDjango - Curso Básico - Principales Conceptos
Django - Curso Básico - Principales Conceptos
 
Taller introduccion symfony2
Taller introduccion symfony2Taller introduccion symfony2
Taller introduccion symfony2
 
Java script
Java scriptJava script
Java script
 
Introducción a groovy & grails
Introducción a groovy & grailsIntroducción a groovy & grails
Introducción a groovy & grails
 
Find File Servlet DB
Find File Servlet DBFind File Servlet DB
Find File Servlet DB
 
Java
JavaJava
Java
 
Javascript
JavascriptJavascript
Javascript
 
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y AngularDesarrollo Web Ágil con Symfony, Bootstrap y Angular
Desarrollo Web Ágil con Symfony, Bootstrap y Angular
 
Vue + Typescript: Decorators vs. Extend, Fight!
Vue + Typescript: Decorators vs. Extend, Fight!Vue + Typescript: Decorators vs. Extend, Fight!
Vue + Typescript: Decorators vs. Extend, Fight!
 
9.laravel
9.laravel9.laravel
9.laravel
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTML
 

Destacado

Tecnicas investigación cualitativa PDI
Tecnicas investigación cualitativa PDITecnicas investigación cualitativa PDI
Tecnicas investigación cualitativa PDIJaime Cubas López
 
Field Service Engineer Job Description
Field Service Engineer Job DescriptionField Service Engineer Job Description
Field Service Engineer Job DescriptionTravis Burick Jr.
 
Unidad 3 conversacion
Unidad 3 conversacionUnidad 3 conversacion
Unidad 3 conversacionJair Milan
 
Communication Trends 2008
Communication Trends 2008Communication Trends 2008
Communication Trends 2008Julie Kaeli
 
Toxicologia laboral
Toxicologia laboralToxicologia laboral
Toxicologia laboralmarkvilleus
 

Destacado (9)

Midlife Carrieres Brochure
Midlife Carrieres BrochureMidlife Carrieres Brochure
Midlife Carrieres Brochure
 
Budapest'56 s2
Budapest'56 s2Budapest'56 s2
Budapest'56 s2
 
Tecnicas investigación cualitativa PDI
Tecnicas investigación cualitativa PDITecnicas investigación cualitativa PDI
Tecnicas investigación cualitativa PDI
 
Lulululu
LulululuLulululu
Lulululu
 
Field Service Engineer Job Description
Field Service Engineer Job DescriptionField Service Engineer Job Description
Field Service Engineer Job Description
 
foros y blog
foros y blogforos y blog
foros y blog
 
Unidad 3 conversacion
Unidad 3 conversacionUnidad 3 conversacion
Unidad 3 conversacion
 
Communication Trends 2008
Communication Trends 2008Communication Trends 2008
Communication Trends 2008
 
Toxicologia laboral
Toxicologia laboralToxicologia laboral
Toxicologia laboral
 

Similar a Mootools Y Otros Frameworks JS

Java Script Frame Works
Java Script Frame WorksJava Script Frame Works
Java Script Frame Workshectorguedea
 
Django - Plataforma de sitios web
Django - Plataforma de sitios webDjango - Plataforma de sitios web
Django - Plataforma de sitios webjcarazo
 
Desarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo QuilónDesarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo Quilónbetabeers
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js IntroduccionMayer Horna
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Facescok12v
 
Un poco más allá con grails. PrimerViernes
Un poco más allá con grails. PrimerViernesUn poco más allá con grails. PrimerViernes
Un poco más allá con grails. PrimerViernesDani Latorre
 
Microsoft Expression Web
Microsoft Expression WebMicrosoft Expression Web
Microsoft Expression Webdaniel ridan
 
Introducción a JQuery
Introducción a JQueryIntroducción a JQuery
Introducción a JQueryContinuum
 
Dragome en JavaConf Buenos Aires 2014
Dragome en JavaConf Buenos Aires 2014 Dragome en JavaConf Buenos Aires 2014
Dragome en JavaConf Buenos Aires 2014 Fernando Petrola
 
Programacion orientada a objetos en javascript
Programacion orientada a objetos en javascriptProgramacion orientada a objetos en javascript
Programacion orientada a objetos en javascriptRobert Moreira
 
Node js Alt.net Hispano
Node js Alt.net HispanoNode js Alt.net Hispano
Node js Alt.net Hispanohdgarcia
 
Cadius que es_moo_tools_
Cadius que es_moo_tools_Cadius que es_moo_tools_
Cadius que es_moo_tools_epplestun
 

Similar a Mootools Y Otros Frameworks JS (20)

Java Script Frame Works
Java Script Frame WorksJava Script Frame Works
Java Script Frame Works
 
Django - Plataforma de sitios web
Django - Plataforma de sitios webDjango - Plataforma de sitios web
Django - Plataforma de sitios web
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
Desarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo QuilónDesarrollo web en Nodejs con Pillars por Chelo Quilón
Desarrollo web en Nodejs con Pillars por Chelo Quilón
 
Ajax
AjaxAjax
Ajax
 
Curso introductorio a Raptor.js con Node.js
Curso introductorio a Raptor.js con Node.jsCurso introductorio a Raptor.js con Node.js
Curso introductorio a Raptor.js con Node.js
 
01 Ext Js Introduccion
01 Ext Js   Introduccion01 Ext Js   Introduccion
01 Ext Js Introduccion
 
Jsf Java Server Faces
Jsf   Java Server FacesJsf   Java Server Faces
Jsf Java Server Faces
 
Un poco más allá con grails. PrimerViernes
Un poco más allá con grails. PrimerViernesUn poco más allá con grails. PrimerViernes
Un poco más allá con grails. PrimerViernes
 
Frameworks de templates y xml
Frameworks de templates y xmlFrameworks de templates y xml
Frameworks de templates y xml
 
Microsoft Expression Web
Microsoft Expression WebMicrosoft Expression Web
Microsoft Expression Web
 
Curso de HTML5
Curso de HTML5Curso de HTML5
Curso de HTML5
 
Manual Basico De Struts
Manual Basico De StrutsManual Basico De Struts
Manual Basico De Struts
 
Introducción a JQuery
Introducción a JQueryIntroducción a JQuery
Introducción a JQuery
 
Semana 2 Configuración entorno de desarrollo
Semana 2   Configuración entorno de desarrolloSemana 2   Configuración entorno de desarrollo
Semana 2 Configuración entorno de desarrollo
 
Dragome en JavaConf Buenos Aires 2014
Dragome en JavaConf Buenos Aires 2014 Dragome en JavaConf Buenos Aires 2014
Dragome en JavaConf Buenos Aires 2014
 
Programacion orientada a objetos en javascript
Programacion orientada a objetos en javascriptProgramacion orientada a objetos en javascript
Programacion orientada a objetos en javascript
 
Guia herramientas de bd
Guia herramientas de bdGuia herramientas de bd
Guia herramientas de bd
 
Node js Alt.net Hispano
Node js Alt.net HispanoNode js Alt.net Hispano
Node js Alt.net Hispano
 
Cadius que es_moo_tools_
Cadius que es_moo_tools_Cadius que es_moo_tools_
Cadius que es_moo_tools_
 

Último

PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosJhonJairoRodriguezCe
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxJorgeParada26
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativanicho110
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxFederico Castellari
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIhmpuellon
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 

Último (11)

PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 

Mootools Y Otros Frameworks JS

  • 1. Mootools y otros frameworks JS
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. Eventos de window Casi siempre vamos a necesitar un disparador: window.addEvent( 'domready ', function() {       // código que se ejecuta cuando el navegador tiene todo el HTML }); window.addEvent( 'load ', function() {       // código que se ejecuta cuando el navegador tiene toda la página web descargada (HTML, CSS, imágenes, JS, Flash, …) });
  • 15.
  • 16. Selectores selectors body div.example, div.note div[class|=dialog] div #title div[class!=made_up] body div h1#title div[class~=example] div p div #title div:not(.example) div > p ul.toc li.tocline2 p:contains(selectors) div + p ul.toc > li.tocline2 p:nth-child(even) div ~ p h1#title + div > p p:nth-child(2n) div[class^=exa][class$=mple] h1[id]:contains(Selectors) p:nth-child(odd) div p a a[href][lang][class] p:nth-child(2n+1) div, p, a div[class] p:nth-child(n) .note div[class=example] p:only-child div.example div[class^=exa] p:last-child ul .tocline2 div[class$=mple] p:first-child div[class*=e]
  • 17.
  • 18.
  • 19.
  • 20.
  • 21. Crear elementos var newElementVar = new Element('div', { 'id': 'id_name', 'text': 'I am a new div', 'styles': { 'width': '200px', 'height': '200px', 'background-color': '#eee', 'float': 'left‘ } });
  • 22.
  • 23.
  • 24.
  • 25.