desarrollo ágil de aplicaciones web
TRANSCRIPT
![Page 1: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/1.jpg)
Desarrollo ágil de aplicaciones web
Yalmar Ponce Atencio
![Page 2: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/2.jpg)
Contenido
• Aplicaciones web• Componentes• MVC
• Aplicaciones web modernas• Desarrollo ágil• Frameworks (lado cliente/lado servidor)
• Desarrollo ágil != Aplicaciones agiles • Desarrollo ++ágil• Generadores de código
![Page 3: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/3.jpg)
Aplicaciones web
• En la actualidad existen muchas tecnologías que se pueden emplear para implementar Aplicaciones Web, donde las más importantes y son consideradas como estándares son:• HyperText Markup Language (HTML5)• JavaScript• CSS3
• En palabras de uno de los más prestigiosos diseñadores Web, Miguel Ripoll:• “A good website has to be fast to download, easy to navigate, appealing to the
eye, on brand and on target, offer something different from the rest, have added value, and constitute a unique experience. Simple, really.”
• “Una buena página web debe ser rápida, fácil de navegar, de apariencia agradable, objetiva, ofrecer algo diferente al resto, tener un valor agregado, y constituir una experiencia única. Simple, realmente.”
![Page 4: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/4.jpg)
Componentes principales
• HTML5• Elementos principales • Organización del documento o página web
• CSS3• Aspectos visuales• Apariencia
• JavaScript• Comportamiento• Simula una aplicación
![Page 5: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/5.jpg)
Historia de HTML
• 1991 HTML version preliminar – Tim Berners-Lee – HTML Tags• 1993 HTML• 1993 HTML 2 preliminar• 1995 HTML 2 – W3C• 1995 HTML 3 preliminar• 1997 HTML 3.2 – “Wilbur”• 1997 HTML 4 - ”Cougar” - CSS • 1999 HTML 4.01• 2000 XHTML preliminar• 2001 XHTML • 2008 HTML5 / XHTML5 preliminar• 2011 HTML5 especificaciones completas• 2022 HTML5 vigencia esperada
![Page 6: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/6.jpg)
HTML5 un mejor HTML
• Más simple• Mejor documentado• Mejor organización• Más completo• Todo en uno
![Page 7: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/7.jpg)
Nuevos elementos
![Page 8: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/8.jpg)
Canvas
<canvas id="example" width="200" height="200">
Canvas no es soportado en este navegador
</canvas>
<script>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
![Page 9: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/9.jpg)
Video
<video width="360" height="240" controls= "controls" >
<source src="LittleWing.mp4“ type="video/mp4"> </source>
Video no es soportado en este navegador
</video>
Video
![Page 10: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/10.jpg)
CSS3
• CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML• CSS se creó para separar el contenido de
la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas• Ahora posee control en el propio lenguaje
![Page 11: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/11.jpg)
Características
• Algunas de las características que ofrece CSS3:• Bordes redondeados, con degradados, imágenes
• Cajas con sombra
![Page 12: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/12.jpg)
Características
• Múltiples imágenes de fondo
• Múltiples columnas
![Page 13: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/13.jpg)
Características
• Texto con sombra
![Page 14: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/14.jpg)
Características
• Transparencia
![Page 15: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/15.jpg)
JavaScript
• Es un lenguaje de programación interpretado• No requiere compilación• Utilizado en páginas web• Sintaxis semejante a la del lenguaje Java y el lenguaje C
![Page 16: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/16.jpg)
JavaScript
• Todos los navegadores modernos interpretan el código JavaScript integrado dentro de las páginas web• Se provee al lenguaje JavaScript para interactuar
con una página web mediante DOM• DOM(Modelo de Objetos del Documento) es una
interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML
![Page 17: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/17.jpg)
JavaScript
• Para utilizar JavaScript en una página web, el método correcto es incluir como un archivo externo, tanto por cuestiones de accesibilidad, como practicidad y velocidad en la navegación.
<script src=“archivo.js”></script>• Es posible agregar JavaScript directamente en la
página web, pero no es recomendado
![Page 18: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/18.jpg)
Juntando todo
![Page 19: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/19.jpg)
Diferenciando página web de aplicación web
![Page 20: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/20.jpg)
MVC (Modelo-Vista-Controlador)
![Page 21: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/21.jpg)
Aplicaciones web modernas• La velocidad de transmisión de datos que se tiene ahora es tal
que ahora parece razonable diseñar aplicaciones Web que puedan substituir incluso las aplicaciones de escritorio más complejas.• Aún nos quieren convencer de que esto no se puede hacer
con los estándares actuales de la W3C (HTML, CSS, etc) y que se requiere agregar funcionalidad propietaria (flash, Silverlight) a los browsers para poder crear aplicaciones atractivas y poderosas.• La realidad es que esto no es cierto, los estándares han
evolucionado mucho y hoy en día es posible crear aplicaciones realmente sofisticadas basadas exclusivamente en estándares.
![Page 22: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/22.jpg)
GMail (correo electrónico)
![Page 23: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/23.jpg)
Outlook
![Page 24: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/24.jpg)
Ms Office Web
![Page 25: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/25.jpg)
AutoCAD 360
![Page 26: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/26.jpg)
Lucida Chart (google)
![Page 27: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/27.jpg)
WebGL (OpenGL)
![Page 28: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/28.jpg)
¿Juegos? League of legends
![Page 29: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/29.jpg)
Desarrollo ágil
• El desarrollo ágil de software son métodos de ingeniería del software basados en el desarrollo iterativo e incremental, donde los requerimientos y soluciones evolucionan mediante la colaboración de grupos auto organizados y multidisciplinarios
![Page 30: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/30.jpg)
Desarrollo de software
• Notablemente dificil para entregar• A tiempo y• Con lo presupuestado
• Procesos formalizados• Organización para manejar procesos• Documentación
![Page 31: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/31.jpg)
Desarrollo (de software) ágil• Actualmente es una práctica bien establecida• Está en crecimiento• Muchas compañias lo practican• Compañias son ágiles en la transisión
![Page 32: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/32.jpg)
Diferencias
Comando y control
Dirigido por la documentación
Proceso serial por naturaleza
Diseño complejo y anticipado
Probar después
Burocratico
Pesado, procesos rígidos
Equipos auto-administrados
Comunicación fluida
Iterativo
Evolucionario/Diseño iterativo
Pruebas en etapas tempranas
Colaborativo
Ligero, proceso adaptable
Desarrollo tradicional
Desarrollo ágil
![Page 33: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/33.jpg)
Desarrollo tradicional (Cascada)
Requerimientos del sistema
Detallar los requerimientos
Especificaciones funcionales
Diseño en alto nivel
Diseño detallado
Implementación
Pruebas
Entrega
Especificaciones de los requerimientos del sistema
Especificacion de los requerimientos del software
Documentación del Diseño en alto nivel
Documentación del Diseño detallado
Completar etapas de codificación
Documentación aceptada
Ejecutar producto
![Page 34: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/34.jpg)
Scrum
Diseñar+codificar+probarPlanificarDefinir revisar
iterar
![Page 35: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/35.jpg)
Herramientas (Frameworks)• La palabra inglesa "framework" (marco de trabajo)
define, en términos generales, un conjunto estandarizado de conceptos, prácticas y criterios para enfrentar y solucionar un problema particular, consecuentemente será capaz de tratar problemas de índole similar.
![Page 36: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/36.jpg)
Ventajas y desventajas
• Eficientes• Seguros • Soporte• Costo
• Aprender a usarlos• Complicados de
personalizar• Código abierto
![Page 37: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/37.jpg)
Frameworks para aplicaciones web• Lado del cliente• Interfaz de usuario• Interación con el usuario• Comunicación con el servidor de aplicaciones• Actualización de datos (requestupdate)
• Lado del servidor• Comunicación con el servidor de datos• Administración de los datos
![Page 38: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/38.jpg)
Framworks lado cliente
• jQuery• jQuery UI• jQuery Grid• ExtJS• Prototype• Angular• Dojo
![Page 39: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/39.jpg)
jQuery
• Simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX
![Page 40: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/40.jpg)
jQuery UI
![Page 41: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/41.jpg)
jQuery Grid
![Page 42: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/42.jpg)
Sencha ExtJs
![Page 43: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/43.jpg)
Recomendación
• Usted decida• Recomiendo ExtJs
![Page 44: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/44.jpg)
Framworks lado servidor
• Manipulación y administración de datos• Conexión con la base de datos (servidor de datos)• MySQL, Oracle, PostgreSQL, SQLite, etc.
• CRUD• Create• Read• Update• Delete
![Page 45: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/45.jpg)
Framworks lado servidor
• CodeIgniter• Yii• Symfony 2• Zend• Django• nodejs
![Page 46: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/46.jpg)
Codeigniter
• Ventajas• Simple• Librerias básicas• Comunidad active• Buena documentación
• Desventajas• No posee maneras de crear datos tabulares• No ORM• No genera CRUD
![Page 47: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/47.jpg)
Yii
• Ventajas• ORM con AR • Genera CRUD usando Gii• Posee generadores tabulares ajax• Nice layout and theming organisation
• Desventajas• Las funciones ajax no son bien documentadas es
necesario modificar código javascript.• AR no es tan Bueno como doctrine
![Page 48: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/48.jpg)
Symfony
• Ventajas• Soporta ORM con doctrine• Genera la base de datos desde configuracion doctrine a
traves de YML
• Desventajas• Sobre configurado• Problemas de estabilidad con la version 2• Muy grande• Talvez un poco lento comparado con los otros
![Page 49: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/49.jpg)
Zend
• Ventajas• De los creadores de PHP• Se supone que ellos saben lo major para PHP• Zend Server puede mejorar desempeño
• Cons• Decorators son horribles y gastan tiempo• Para crear formularios es necesario escribir código html• Frameworks deben ahorrar tiempo, no obligor a aprender
como configurar decoradores para decorar elementos básicos HTML
• Configuration basadas en XML?, por que no usar solamente arrays?
![Page 50: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/50.jpg)
Recomendación
• Por lo expuesto
Yii• Pero …• No es necesario usar alguno de estos, es una
codificación relativamente simple y puede ser hecho por nosotros mismos.
![Page 51: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/51.jpg)
Desarrollo ágil != Aplicaciones agiles• Buenas practicas • Uso de estándares• Uso de frameworks• Uso de metodologías
ágiles
• Buenas practicas• Código eficiente y
probado• Frameworks ligeros• Evitar mezclar
frameworks• Evitar sobrecargar la
aplicación
![Page 52: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/52.jpg)
Desarrollo ++ágil
• ¿Como hacer más ágil el proceso de desarrollo de software?• Herramientas RAD• Generadores de software
![Page 53: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/53.jpg)
Herramientas RAD
• Wysiwyg• Escritorio
• Delphi, VS.Net (VB, C#)• Web
• Sencha Architect
![Page 54: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/54.jpg)
Generadores de software
• Abordaje no muy nuevo• Desde los 80’s
• Requiere de algunas especificaciones• Ideal para aplicaciones que comparten
características similares (sistemas de información)• No aplicable al desarrollo de software especifico• AutoCAD, Office, Juegos, etc.
![Page 55: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/55.jpg)
Propuesta
• Define una base de datos• A partir de las tablas generar un proyecto para
Sencha Architect• Sencha Architect genera aplicación web
![Page 56: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/56.jpg)
Demo
• Cree una base de datos y tablasCREATE DATABASE cursos;USE cursos;CREATE TABLE `estudiante` (`id` INT(8) NOT NULL AUTO_INCREMENT,`dni` INT(8) NOT NULL,`matricula` INT(8) NOT NULL,`escuela` VARCHAR(255) NOT NULL,`universidad` VARCHAR(255) NOT NULL,`nombres` VARCHAR(255) NOT NULL,`ap_pat` VARCHAR(255) NOT NULL,`ap_mat` VARCHAR(255) NOT NULL,`direccion` VARCHAR(255) NOT NULL,`nacimiento` VARCHAR(255) NOT NULL,`email` VARCHAR(255) NOT NULL,`telefono` VARCHAR(255) NOT NULL,`curso` VARCHAR(255) NOT NULL,PRIMARY KEY (`id`));...
![Page 57: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/57.jpg)
Demo
• Algunas especificaciones<?php//database serverdefine('DB_SERVER', "localhost");//database login namedefine('DB_USER', "root");//database login passworddefine('DB_PASS', "123");//database namedefine('DB_DATABASE',"cursos");define('PROJECT_PATH', "cursos");?>
![Page 58: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/58.jpg)
Demo
• Ejecutar el sistema generador de aplicaciones web• Este crea un proyecto para Sencha Arquitect• Puede ser usando otras herramientas
![Page 59: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/59.jpg)
Demo (Usando Sencha Arquitect)
![Page 60: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/60.jpg)
Demo Construir la aplicación (build)
![Page 61: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/61.jpg)
Demo
• Creara los archivos necesarios para ejecutar la aplicación usando el framework ExtJs
![Page 62: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/62.jpg)
DemoAplicación final
![Page 63: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/63.jpg)
![Page 64: Desarrollo ágil de aplicaciones web](https://reader035.vdocuments.pub/reader035/viewer/2022062304/55cf9b1e550346d033a4d1a8/html5/thumbnails/64.jpg)
Conclusiones
• Proyecto de desarrollo de aplicación web• Usando código plano
• Tiempo estimado 50 hrs (ejemplo)• Usando Frameworks
• Tiempo estimado 10 hrs• Usando Generador de aplicaciones
• Tiempo estimado 1 hrs + ajustes• Puede ser menos tiempo