Date post: | 25-Oct-2015 |
Category: |
Documents |
Upload: | technym-peru-eirl |
View: | 76 times |
Download: | 3 times |
Desarrollo ágil de aplicaciones web
Yalmar Ponce Atencio
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
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.”
Componentes principales
• HTML5• Elementos principales • Organización del documento o página web
• CSS3• Aspectos visuales• Apariencia
• JavaScript• Comportamiento• Simula una aplicación
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
HTML5 un mejor HTML
• Más simple• Mejor documentado• Mejor organización• Más completo• Todo en uno
Nuevos elementos
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>
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
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
Características
• Algunas de las características que ofrece CSS3:• Bordes redondeados, con degradados, imágenes
• Cajas con sombra
Características
• Múltiples imágenes de fondo
• Múltiples columnas
Características
• Texto con sombra
Características
• Transparencia
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
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
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
Juntando todo
Diferenciando página web de aplicación web
MVC (Modelo-Vista-Controlador)
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.
GMail (correo electrónico)
Outlook
Ms Office Web
AutoCAD 360
Lucida Chart (google)
WebGL (OpenGL)
¿Juegos? League of legends
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
Desarrollo de software
• Notablemente dificil para entregar• A tiempo y• Con lo presupuestado
• Procesos formalizados• Organización para manejar procesos• Documentación
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
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
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
Scrum
Diseñar+codificar+probarPlanificarDefinir revisar
iterar
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.
Ventajas y desventajas
• Eficientes• Seguros • Soporte• Costo
• Aprender a usarlos• Complicados de
personalizar• Código abierto
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
Framworks lado cliente
• jQuery• jQuery UI• jQuery Grid• ExtJS• Prototype• Angular• Dojo
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
jQuery UI
jQuery Grid
Sencha ExtJs
Recomendación
• Usted decida• Recomiendo ExtJs
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
Framworks lado servidor
• CodeIgniter• Yii• Symfony 2• Zend• Django• nodejs
Codeigniter
• Ventajas• Simple• Librerias básicas• Comunidad active• Buena documentación
• Desventajas• No posee maneras de crear datos tabulares• No ORM• No genera CRUD
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
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
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?
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.
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
Desarrollo ++ágil
• ¿Como hacer más ágil el proceso de desarrollo de software?• Herramientas RAD• Generadores de software
Herramientas RAD
• Wysiwyg• Escritorio
• Delphi, VS.Net (VB, C#)• Web
• Sencha Architect
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.
Propuesta
• Define una base de datos• A partir de las tablas generar un proyecto para
Sencha Architect• Sencha Architect genera aplicación web
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`));...
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");?>
Demo
• Ejecutar el sistema generador de aplicaciones web• Este crea un proyecto para Sencha Arquitect• Puede ser usando otras herramientas
Demo (Usando Sencha Arquitect)
Demo Construir la aplicación (build)
Demo
• Creara los archivos necesarios para ejecutar la aplicación usando el framework ExtJs
DemoAplicación final
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