Your SlideShare is downloading. ×
0
Crysfel Villa Román<br />Ingeniero de Software<br />Quizzpot<br />Ext JS: La herramienta que revolucionó el front-end<br />
2<br />Objetivo<br />La importancia de desarrollaraplicaciones RIA y la soluciónpropuestapor Ext JS<br />
3<br />Agenda<br />Aplicaciones RIA<br />JavaScript en el front-end<br />Ext JS como herramienta RIA<br />Algunos Componen...
Aplicaciones RIA<br />Rich Internet Applications.<br />Término introducido por compañías como Macromedia en el 2002.<br />...
Ejemplos<br />
El diseño importa<br />La mayoría de las personas dan su confianza a sitios con un buen diseño.<br />Normalmente juzgamos ...
¿En donde comprarías?<br />
JavaScript<br />JavaScript como solución para el desarrollo de aplicaciones RIA.<br />Soporte Ajax<br />Modificación del D...
Problemas al usar JS<br />Incompatibilidad entre exploradores.<br />Mala implementación en algunos navegadores.<br />Compl...
¡Librerías!<br />jQuery<br />Prototype<br />Mootools<br />ExtCore<br />Yahoo UI<br />
Ext JS como solución RIA<br />“Jack Slocum” comienza a desarrollar Ext JS en el 2006 como una extensión para YUI.<br />Pos...
Ext JS como solución RIA<br />En diciembre del 2007 aparece la versión 2.0 del Framework, una re-ingeniería total.<br />En...
Arquitectura de Ext JS<br />
Arquitectura de Ext JS<br />
Dividido en seis áreas<br />
Componentes populares<br />El “venerable” GridPanel<br />Ordenar Asc/Desc<br />Seleccionar filas<br />Redimensionar Col.<b...
Componentes populares<br />Grid editable<br />Editar celdas al vuelo<br />Utilizar diferentes controles.<br />Validaciones...
Componentes populares<br />Mensajes y alertas<br />Alertas con un buen “look and field”<br />Personalizables<br />Intuitiv...
Componentes populares<br />Formularios<br />Validaciones<br />Máscaras<br />Envío por Ajax<br />Combos con “autocomplete”<...
Componentes populares<br />TreePanel<br />Estructura de árbol<br />Drag and Drop<br />Colapsables con animación<br />
Componentes populares<br />Charts<br />Linear<br />Columnas<br />De pastel<br />Barras<br />Series<br />
Componentes populares<br />Tabs<br />Con “scroll” automático<br />Creados desde el DOM<br />Creados con JS<br />Contenedor...
Componentes populares<br />Toolbar<br />Botones en diferentes tamaños<br />Desplegar columnas<br />Agrupación <br />Submen...
Desktop<br />
Ejemplos: Motors<br />
Ejemplos: DreamHomesMap<br />
Ejemplos: Schema Bank<br />
¿Dónde encontrar ayuda?<br />http://www.extjs.com/deploy/dev/docs/<br />
¿Dónde encontrar ayuda?<br />http://www.extjs.com/forum/<br />
¿Dónde encontrar ayuda?<br />http://foro.quizzpot.com/<br />
¿Dónde encontrar ayuda?<br />http://extjses.com<br />
¿Dónde encontrar ayuda?<br />http://www.extjs.com/learn<br />
¿Dónde encontrar ayuda?<br />http://www.quizzpot.com/<br />
Libros: LearningExt JS<br />Shea Frederick<br />ColinRamsay<br />Steve &apos;Cutter&apos; Blades<br />En Amazon $35.99<br ...
Libros: Ext JS in Action<br />Jesus &quot;Jay&quot; Garcia<br />En Manning $27.50 y $44.99<br />Basado en Ext JS v3<br />
Licencias y Costos<br />OpenSource (GPL v3)<br />Commercial license<br />Reseller license<br />
Licencias y Costos<br />OpenSource (GPL v3)<br />Sin costo<br />Commercial license<br />$329 (1); $1,299 (5); $5,749 (25);...
Links de referencia<br />Sitio oficial<br />http://www.extjs.com/<br />Documentación<br />http://www.extjs.com/deploy/dev/...
Crysfel Villa Román<br />www.quizzpot.com<br />crysfel@gmail.com<br />Preguntas y Respuestas<br />
Upcoming SlideShare
Loading in...5
×

Introducción a Ext JS - SG09

4,215

Published on

Una introducción a Ext JS como solución para el desarrollo de aplicaciones RIA

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,215
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
174
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Introducción a Ext JS - SG09"

  1. 1. Crysfel Villa Román<br />Ingeniero de Software<br />Quizzpot<br />Ext JS: La herramienta que revolucionó el front-end<br />
  2. 2. 2<br />Objetivo<br />La importancia de desarrollaraplicaciones RIA y la soluciónpropuestapor Ext JS<br />
  3. 3. 3<br />Agenda<br />Aplicaciones RIA<br />JavaScript en el front-end<br />Ext JS como herramienta RIA<br />Algunos Componentes del Framework<br />Ejemplos de aplicaciones con Ext JS<br />Donde encontrar Ayuda<br />Licencias y costos<br />
  4. 4. Aplicaciones RIA<br />Rich Internet Applications.<br />Término introducido por compañías como Macromedia en el 2002.<br />Aplicaciones que tienen el objetivo de mejorar la experiencia del usuario.<br />Flash, Flex, JavaFX, JavaScript, Silverlight.<br />
  5. 5. Ejemplos<br />
  6. 6. El diseño importa<br />La mayoría de las personas dan su confianza a sitios con un buen diseño.<br />Normalmente juzgamos solo por las apariencias.<br />¡El diseño/apariencia importa!<br />
  7. 7. ¿En donde comprarías?<br />
  8. 8. JavaScript<br />JavaScript como solución para el desarrollo de aplicaciones RIA.<br />Soporte Ajax<br />Modificación del DOM<br />Aporta dinamismo a un sitio<br />
  9. 9. Problemas al usar JS<br />Incompatibilidad entre exploradores.<br />Mala implementación en algunos navegadores.<br />Complicado para depurar (debug).<br />Malas prácticas en el desarrollo.<br />Muchos desarrolladores subestiman a JavaScript por su mala fama en los 90’s.<br />Es un lenguaje complejo y “misterioso” para muchos<br />
  10. 10. ¡Librerías!<br />jQuery<br />Prototype<br />Mootools<br />ExtCore<br />Yahoo UI<br />
  11. 11. Ext JS como solución RIA<br />“Jack Slocum” comienza a desarrollar Ext JS en el 2006 como una extensión para YUI.<br />Posteriormente se agrega soporte para librerías como jQuery, Prototype + Scriptaculous.<br />En el 2007 la librería funciona en modo “Stand alone” (versión 1.1).<br />
  12. 12. Ext JS como solución RIA<br />En diciembre del 2007 aparece la versión 2.0 del Framework, una re-ingeniería total.<br />En agosto de 2008 aparece la versión 2.2 del Framework, se agregan nuevos componentes.<br />En febrero del 2009 se realiza la primera conferencia y se presenta Ext Core.<br />En junio del 2009 se libera Ext 3.0 con soporte REST, Remoting y varios componentes más.<br />
  13. 13. Arquitectura de Ext JS<br />
  14. 14. Arquitectura de Ext JS<br />
  15. 15. Dividido en seis áreas<br />
  16. 16. Componentes populares<br />El “venerable” GridPanel<br />Ordenar Asc/Desc<br />Seleccionar filas<br />Redimensionar Col.<br />Ocultar columnas<br />Paginar datos<br />
  17. 17. Componentes populares<br />Grid editable<br />Editar celdas al vuelo<br />Utilizar diferentes controles.<br />Validaciones<br />
  18. 18. Componentes populares<br />Mensajes y alertas<br />Alertas con un buen “look and field”<br />Personalizables<br />Intuitivas<br />
  19. 19. Componentes populares<br />Formularios<br />Validaciones<br />Máscaras<br />Envío por Ajax<br />Combos con “autocomplete”<br />
  20. 20. Componentes populares<br />TreePanel<br />Estructura de árbol<br />Drag and Drop<br />Colapsables con animación<br />
  21. 21. Componentes populares<br />Charts<br />Linear<br />Columnas<br />De pastel<br />Barras<br />Series<br />
  22. 22. Componentes populares<br />Tabs<br />Con “scroll” automático<br />Creados desde el DOM<br />Creados con JS<br />Contenedor<br />
  23. 23. Componentes populares<br />Toolbar<br />Botones en diferentes tamaños<br />Desplegar columnas<br />Agrupación <br />Submenús<br />Iconos en diferentes <br /> posiciones y tamaños<br />
  24. 24. Desktop<br />
  25. 25. Ejemplos: Motors<br />
  26. 26. Ejemplos: DreamHomesMap<br />
  27. 27. Ejemplos: Schema Bank<br />
  28. 28. ¿Dónde encontrar ayuda?<br />http://www.extjs.com/deploy/dev/docs/<br />
  29. 29. ¿Dónde encontrar ayuda?<br />http://www.extjs.com/forum/<br />
  30. 30. ¿Dónde encontrar ayuda?<br />http://foro.quizzpot.com/<br />
  31. 31. ¿Dónde encontrar ayuda?<br />http://extjses.com<br />
  32. 32. ¿Dónde encontrar ayuda?<br />http://www.extjs.com/learn<br />
  33. 33. ¿Dónde encontrar ayuda?<br />http://www.quizzpot.com/<br />
  34. 34. Libros: LearningExt JS<br />Shea Frederick<br />ColinRamsay<br />Steve &apos;Cutter&apos; Blades<br />En Amazon $35.99<br />Basado en Ext JS v2<br />
  35. 35. Libros: Ext JS in Action<br />Jesus &quot;Jay&quot; Garcia<br />En Manning $27.50 y $44.99<br />Basado en Ext JS v3<br />
  36. 36. Licencias y Costos<br />OpenSource (GPL v3)<br />Commercial license<br />Reseller license<br />
  37. 37. Licencias y Costos<br />OpenSource (GPL v3)<br />Sin costo<br />Commercial license<br />$329 (1); $1,299 (5); $5,749 (25); $16,449 (+100)<br />Reseller license<br />Depende del proyecto<br />
  38. 38. Links de referencia<br />Sitio oficial<br />http://www.extjs.com/<br />Documentación<br />http://www.extjs.com/deploy/dev/docs/<br />Costos y licencias<br />http://www.extjs.com/products/license.php<br />Ejemplos<br />http://www.extjs.com/deploy/dev/examples/samples.html<br />Tutoriales en español<br />http://www.quizzpot.com/<br />
  39. 39. Crysfel Villa Román<br />www.quizzpot.com<br />crysfel@gmail.com<br />Preguntas y Respuestas<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×