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 cdigo

Aplicaciones web
En la actualidad existen muchas tecnologas que se pueden emplear para implementar Aplicaciones Web, donde las ms importantes y son consideradas como estndares son:
HyperText Markup Language (HTML5) JavaScript CSS3

En palabras de uno de los ms prestigiosos diseadores 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 pgina web debe ser rpida, fcil 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 Organizacin del documento o pgina web

CSS3
Aspectos visuales Apariencia

JavaScript
Comportamiento Simula una aplicacin

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

Ms simple Mejor documentado Mejor organizacin Ms 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

<video width="360" height="240" controls= "controls" > <source src="LittleWing.mp4 type="video/mp4"> </source> Video no es soportado en este navegador </video>

CSS3
CSS es un lenguaje para definir el estilo o la apariencia de las pginas web, escritas con HTML CSS se cre para separar el contenido de la forma, a la vez que permite a los diseadores mantener un control mucho ms preciso sobre la apariencia de las pginas Ahora posee control en el propio lenguaje

Caractersticas
Algunas de las caractersticas que ofrece CSS3:
Bordes redondeados, con degradados, imgenes

Cajas con sombra

Caractersticas
Mltiples imgenes de fondo

Mltiples columnas

Caractersticas
Texto con sombra

Caractersticas
Transparencia

JavaScript
Es un lenguaje de programacin interpretado
No requiere compilacin Utilizado en pginas web Sintaxis semejante a la del lenguaje Java y el lenguaje C

JavaScript
Todos los navegadores modernos interpretan el cdigo JavaScript integrado dentro de las pginas web Se provee al lenguaje JavaScript para interactuar con una pgina web mediante DOM DOM(Modelo de Objetos del Documento) es una interfaz de programacin de aplicaciones que proporciona un conjunto estndar de objetos para representar documentos HTML

JavaScript
Para utilizar JavaScript en una pgina web, el mtodo correcto es incluir como un archivo externo, tanto por cuestiones de accesibilidad, como practicidad y velocidad en la navegacin. <script src=archivo.js></script> Es posible agregar JavaScript directamente en la pgina web, pero no es recomendado

Juntando todo

Diferenciando pgina web de aplicacin web

MVC (Modelo-VistaControlador)

Aplicaciones web modernas

La velocidad de transmisin de datos que se tiene ahora es tal que ahora parece razonable disear aplicaciones Web que puedan substituir incluso las aplicaciones de escritorio ms complejas. An nos quieren convencer de que esto no se puede hacer con los estndares 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 estndares han evolucionado mucho y hoy en da es posible crear aplicaciones realmente sofisticadas basadas exclusivamente en estndares.

GMail (correo electrnico)

Outlook

Ms Office Web

AutoCAD 360

Lucida Chart (google)

WebGL (OpenGL)

Juegos? League of legends

Desarrollo gil
El desarrollo gil de software son mtodos de ingeniera del software basados en el desarrollo iterativo e incremental, donde los requerimientos y soluciones evolucionan mediante la colaboracin de grupos auto organizados y multidisciplinarios

Desarrollo de software
Notablemente dificil para entregar
A tiempo y Con lo presupuestado

Procesos formalizados Organizacin para manejar procesos Documentacin

Desarrollo (de software) gil

Actualmente es una prctica bien establecida Est en crecimiento Muchas compaias lo practican Compaias son giles en la transisin

Diferencias
Desarrollo tradicional
Comando y control Dirigido por la documentacin

Desarrollo gil
Equipos auto-administrados Comunicacin fluida Iterativo Evolucionario/Diseo iterativo Pruebas en etapas tempranas Colaborativo Ligero, proceso adaptable

Proceso serial por naturaleza

Diseo complejo y anticipado Probar despus

Burocratico
Pesado, procesos rgidos

Desarrollo tradicional (Cascada)

Requerimientos del sistema

Especificaciones de los requerimientos del sistema

Detallar los requerimientos

Especificacion de los requerimientos del software

Especificaciones funcionales Diseo en alto nivel

Documentacin del Diseo en alto nivel

Diseo detallado

Documentacin del Diseo detallado

Completar etapas de codificacin

Implementacin

Documentacin aceptada

Pruebas

Ejecutar producto

Entrega

Scrum

Definir

Planificar

Disear+codificar+probar

revisar

iterar

Herramientas (Frameworks)
La palabra inglesa "framework" (marco de trabajo) define, en trminos generales, un conjunto estandarizado de conceptos, prcticas 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 Cdigo abierto

Frameworks para aplicaciones web

Lado del cliente
Interfaz de usuario Interacin con el usuario Comunicacin con el servidor de aplicaciones Actualizacin de datos (requestupdate)

Lado del servidor

Comunicacin con el servidor de datos Administracin 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 interaccin con la tcnica AJAX

jQuery UI

jQuery Grid

Sencha ExtJs

Recomendacin
Usted decida Recomiendo ExtJs

Framworks lado servidor

Manipulacin y administracin de datos Conexin 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 bsicas Comunidad active Buena documentacin

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

Cons
Decorators son horribles y gastan tiempo Para crear formularios es necesario escribir cdigo html Frameworks deben ahorrar tiempo, no obligor a aprender como configurar decoradores para decorar elementos bsicos HTML Configuration basadas en XML?, por que no usar solamente arrays?

Recomendacin
Por lo expuesto

Yii
Pero
No es necesario usar alguno de estos, es una codificacin relativamente simple y puede ser hecho por nosotros mismos.

Desarrollo gil != Aplicaciones agiles

Buenas practicas Uso de estndares Uso de frameworks Uso de metodologas giles Buenas practicas Cdigo eficiente y probado Frameworks ligeros Evitar mezclar frameworks Evitar sobrecargar la aplicacin

Desarrollo ++gil
Como hacer ms 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 80s

Requiere de algunas especificaciones Ideal para aplicaciones que comparten caractersticas similares (sistemas de informacin) 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 aplicacin web

Demo
Cree una base de datos y tablas
CREATE 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 server define('DB_SERVER', "localhost"); //database login name define('DB_USER', "root"); //database login password define('DB_PASS', "123"); //database name define('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 aplicacin (build)

Demo
Creara los archivos necesarios para ejecutar la aplicacin usando el framework ExtJs

Demo Aplicacin final

Conclusiones
Proyecto de desarrollo de aplicacin web
Usando cdigo 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