Upload
fulgencio-sergio
View
8
Download
0
Embed Size (px)
Citation preview
ProtowebConstruyendo aplicaciones web fácilmente
Universidad Nacional de la Patagonia29 junio 2010, Ushuaia, Argentina
Leonel Viera - Federico Gonzá[email protected]@gmail.com
Introducción a ProtowebObjetivo general
Desarrollar una herramienta que facilite el proceso de creación de aplicaciones web. Protoweb deberá facilitar la gestión integral de cada proyecto, permitir el trabajo colaborativo y generar aplicaciones seguras y accesibles, que respeten estándares y promuevan las buenas prácticas, la reutilización de código (y experiencias) y contribuir en la definición de una frontera más precisa entre la programación y el diseño gráfico.
Introducción a ProtowebMotivaciones
El desarrollo web es una de las ramas de la ingeniería de software que más ha crecido en los últimos años. Este crecimiento favoreció el auge de una gran cantidad de tecnologías asociadas, generando una diversidad de metodologías y herramientas de trabajo.
Variedad de lenguajes en un mismo entorno
Interacción con otras disciplinas. Frontera difusa Acceso global desde
cualquier dispositivo
Herramientas de análisis, diseño y desarrollo poco
integradas
Audiencia. Idiomas, conectividad, diferencias
cognitivas, seguridad
Desarrollo web, contexto
La dimensión de un nuevo espacio
El contexto del desarrollo webInformación y participación
1985-1995correo electrónico
1995-2005usuario pasivoWeb 1.0
2005-2010internet socialWeb 2.0
El contexto del desarrollo webDispositivos. No computadoras
Aplicaciones CrossBrowser, independientes de la plataforma y del sistema operativo.
El contexto del desarrollo webLas aplicaciones de escritorio
Las aplicaciones de escritorio han sido generalmente cerradas a un conjunto bien definido de usuarios. La comunicación entre el sistema y el mundo exterior se da en forma verbal o escrita, pero siempre por fuera de las fronteras de la aplicación.
El contexto del desarrollo webAplicaciones web. La audiencia
Las aplicaciones web pueden ser accedidas desde cualquier lugar en el mundo. Una clara definición de la audiencia permite incluir nuevos roles de usuarios al sistema, donde las reglas de seguridad son indispensables para este nuevo contexto.
El contexto del desarrollo webAplicaciones web. La audiencia
Penetración de internet por paísesPoblación mundial estimada: 6.800 millonesUsuarios de internet estimados: 1.800 millonesFuentes: Internet World Stats ; INDEC. 2010
Argentina tiene 5 millones de accesos de banda ancha, con 20 millones de usuarios estimados y
50% de penetración
Tierra del Fuego tiene alrededor de 100.000 usuarios de internet
Las islas Malvinas son la región del mundo con mayor
penetración de internet (100%)
El contexto del desarrollo webPáginas, sitios y aplicaciones
Las aplicaciones web incluyen redes sociales, documentos colaborativos en línea, webmail, transacciones bancarias, conversaciones telefónicas, cálculos en la nube, transmisiones televisivas en vivo, sistemas de seguridad a distancia, telemedicina, etc. Grandes empresas como Google están anunciando nuevos sistemas operativos con énfasis en las aplicaciones web.
Introducción a Protoweb
Un nuevo desarrollo web con herramientas visuales
Introducción a ProtowebVisión de equipo y proyecto
Protoweb permite la gestión de múltiples proyectos, asignando roles a cada miembro del equipo.
La generación de código está totalmente integrada a la herramienta visual y las aplicaciones resultantes son funcionales desde el inicio. Un esquema de clases y herencia permite agregar código manualmente para casos específicos, sin producir incompatibilidad con Protoweb.
Introducción a ProtowebORM, lo mejor de dos mundos
La representación con entidades pretende rescatar lo mejor de los objetos y las bases de datos y complementarlos en un
concepto integral a lo largo de todo el proyecto.
Introducción a ProtowebDiversidad. Plugins y widgets
Los plugins pueden reutilizarse en cualquier proyecto y son definidos por el desarrollador. Protoweb provee un
protocolo para la creación de nuevos plugins
Introducción a ProtowebHerencia y extensibilidad
Un esquema de clases y herencia permite a los desarrolladores agregar código manualmente para casos específicos, sin producir incompatibilidad con Protoweb. De esta manera, Protoweb se convierte en una interface visual de desarrollo, que proporciona una solución simple eficiente y flexible.
Poniendo a prueba ProtowebDesarrollo de una aplicación
Una entidad es la representación informática de un concepto o una cosa del mundo real. En la práctica, generalmente un grupo de tablas y clases que definen un concepto.
Los atributos representan campos de entidades.Las relaciones vinculan a las entidades.
Cada entidad puede tener distintas acciones, las que definirán pantallas en la aplicación generada.
Un plugin es equivalente a un componente en otros lenguajes visuales. Los widgets son instancias de plugins (widget es un plugin en uso).
Conceptos para recordar
Protoweb por dentro
El proceso de análisis y diseño
Proceso de análisis y diseñoProblemática y características
Protoweb fue desarrollado utilizando los principios de Scrum, pero con una metodología propia. Los mockups y el diagrama entidad relación fueron indispensables en todo el proceso.
Proceso de análisis y diseñoIntroducción a Scrum
Los principios del Daily Scrum Meeting- Qué hiciste ayer?- Qué tenés pensado hacer hoy?- Tuviste algún problema para alcanzar tu objetivo?- Tu equipo pondrá algo en el camino de otro? (scrum de scrum)
Proceso de análisis y diseñoMockups. Comunicación clara
Proceso de análisis y diseñoDespués del mockup
Proceso de análisis y diseñoSecuencia al crear un proyecto
user<<worker>> projects project
1 : create()
2 : muestra el formulario
3 : posteando información
4 : create_save()
5 : save()
6 : éxito
7 : create_DB()
8 : éxito
9 : unzip_files()
Gaurda los datos del proyecto, en la base de datos de protoweb y asocia al usuario creadorcomo lider del proyecto
Crea la base de datos delproyecto que se está creando,con el key_name del mismo
Descomprime los archivosbásicos para el proyecto
10 : éxito
11 : redirige a dashboard del proyecto creado
Proceso de análisis y diseñoBase de datos
Plugins utilizados con JQuery: ui, autocomplete, chkeditor, dynatree, google maps, select to slider, shadowbox, table sorter, block ui, hint, ckeditor y jquery tools.
Proceso de análisis y diseñoLenguajes y Browsers
PHP
HTML
MySQL
JavaScript
Firebug, Fireshot, HTML Validator,
FirePHP, Web Developer toolbar
CodeIgniter OverZealous
Jquery, AjaxSmarty
CSS
Yaml
El patrón MVC en ProtowebUn cliente-servidor de tres capas
HTMLCSS
JavascriptAjax
PHPASPJSP
MySQLMS-SQLOracle
Postgres
El patrón MVC en ProtowebLa capa cliente. El HTML
<html xmlns="http://www.w3.org/1999/xhtml" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>Gustave Courbet</h1> <p>Fue un pintor francés del siglo XIX, fundador del realismo, y comprometido activista democrático.</p> </body></html>
El patrón MVC en ProtowebCaos: ni cliente, ni servidor
<html xmlns="http://www.w3.org/1999/xhtml" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1><?php echo “Gustave Courbet”; ?></h1> <p><?php echo “Fue un pintor francés del siglo XIX, fundador del realismo, y comprometido activista democrático.”; ?></p> </body></html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>Gustave Courbet</h1> <p>Fue un pintor francés del siglo XIX, fundador del realismo, y comprometido activista democrático.</p> </body></html>
El patrón MVC en ProtowebSQL, PHP y HTML. Confusión web
<?php $res = “SELECT * FROM personas WHERE dni=$_GET[‘dni’]”;?><html xmlns="http://www.w3.org/1999/xhtml" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1><?php echo $res[“nombre”]; ?></h1> <p><?php echo $res[“biografia”]; ?></p> </body></html> ficha_persona.php
Embe
d PH
P +
HTM
L
<html xmlns="http://www.w3.org/1999/xhtml" lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>Gustave Courbet</h1> <p>fue un pintor francés del siglo XIX, fundador del realismo, y comprometido activista democrático.</p> </body></html>
Fina
l H
TML
http://www.ejemplo.com/ficha_persona.php?dni=30548264
El patrón MVC en ProtowebTemplates. Orden y progreso
<body> <h1>Gustave Courbet</h1> <p>fue un pintor francés del siglo XIX, fundador del realismo, y comprometido activista democrático.</p> </body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>{nombre}</h1> <p>{biografia}</p> </body></html>
http://www.ejemplo.com/ficha_persona.php?dni=30548264
ficha_persona.tpl
<?php $res = “SELECT * FROM personas WHERE dni=$_GET[‘dni’]”; $tpl = “ficha_persona.tpl”; $tpl->nombre = $res[“nombre”]; $tpl->biografia = $res[“biografia”];?> ficha_persona.php
Mod
el +
Co
ntro
ller
View
(Sm
arty
Tem
plat
e)Vi
rtua
l H
TML
El patrón MVC en ProtowebModelo Vista y Controlador
<body> <h1>Gustave Courbet</h1> <p>fue un pintor francés del siglo XIX, fundador del realismo, y comprometido activista democrático.</p> </body></html>
http://www.ejemplo.com/personas/ficha/30548264/
Fina
l H
TML
Model View Controller
Una clase php por tabla Un archivo por cada pantalla Una clase php por tabla
Class Persona { dni, nombre, biografia}
<html> <h1>{nombre}</h1> <p>{biografia}</p></html>
Class Personas { function ficha($dni) { ficha = New Persona($dni); }}
Herramientas utilizadas
El software (y la gente) que hizo posible a Protoweb
Un networking efectivo es primordial para los grupos descentralizados. Las herramientas de comunicación y backup se vuelven indispensables para asegurar de que nada falle.
Software y Herramientas utilizadasComunicación y Backup
DropBox
Google Code
Skype
Gmail
AVer
Auto Ver
Pidgin
Las herramientas de cloud computing (procesamiento en nube) y las aplicaciones online marcan una tendencia para los próximos años. Importantes empresas como Google han anunciado sistemas operativos basados en la red.
Software y Herramientas utilizadasAnálisis y Diseño
yUML
AVerStar UML
yUML
Mockups
Workbench
Google Docs
PHP Doc
Linux y Windows por igual, Protoweb ha sido desarrollado utilizando software gratuito, independientemente de la plataforma.
Software y Herramientas utilizadasServidores y Editores
WAMP
PHP MyAdmin
Netbeans
XAMPP
Google Hosting
Navicat
El futuro de Protoweb
Una herramienta abierta, al alcance de tod@s
El futuro de ProtowebPróximos pasos
Para una primera versión pública
• Revisar la seguridad y mejorarla.
• Extender la funcionalidad actual de generación de vistas, para que soporte la generación de vistas con formularios.
• Mejorar el soporte para layouts.
• Mejorar la interface de edición de widgets.
• Revisar y mejorar todo lo referente al manejo y detección de errores.
El futuro de ProtowebPróximos pasos
Ideas, propuestas y el futuro de Protoweb (1)
• Proveer una interface automática de instalación.
• Traducir a otros idiomas (incluido español).
• Módulo de invitaciones por e-mail (para integrar un proyecto).
• Integrar un editor online de código con sintaxis resaltada.
• Revisar y mejorar la API de Protoweb.
• Desarrollar nuevos plugins.
El futuro de ProtowebPróximos pasos
Ideas, propuestas y el futuro de Protoweb (2)
• Rediseñar la pantalla de work de un proyecto, para que las entidades puedan editarse de forma similar a un diagrama de clases.
• Aplicar un sistema de métricas automático (o semi-automático).
• Crear la capacidad de asignar tareas a cada miembro de un proyecto y generar una gráfica burn down de lo que queda por hacer en cada etapa.
Agradecimientos
Este trabajo no hubiera sido posible sin el apoyo académico y de nuestra familia.
Agradecemos especialmente a todas las personas que de una u otra manera colaboraron con la evolución de Protoweb. A nuestros amigos por sus comentarios y observaciones.
Protoweb ha recibido código y aportes de -literalmente- todos los continentes del mundo. Foros, libros, publicaciones, websites, conversaciones e intercambios de emails han sido herramientas fundamentales para comenzar a finalizar esta primera etapa de nuestro proyecto. Por eso, el agradecimiento es especialmente a todas las personas que creen que la libertad es sinónimo de generosidad.
That’s all Folks!