Protoweb Construyendo aplicaciones web fácilmente

Slides:



Advertisements
Presentaciones similares
Sistema de Información Cultural, CONACULTA México, 2006 SiC / RENiC Aspectos técnicos relevantes para un Sistema de Información (SI)
Advertisements

APLICACIÓN PARA EL ESTUDIO EN GRUPO DE PROBLEMAS COMPLEJOS
Gestión de Recursos Informáticos Unidad Nº 3: Alfresco.
Presentación de la Plataforma de Gestión de la Excelencia
CAPACITACION PARA EL TRABAJO: INFORMATICA
Portal Hacienda Digital
CREACION DE ESPACIOS VIRTUALES PARA TRABAJO EN EQUIPO
DIRECTOR: ING. DIEGO MARCILLO CODIRECTOR: ING. JAIME ANDRANGO
Servicios TIC.
ALFIN en el contexto de la Web 2.0
Taller de Herramientas de Google Docs
SILVIA BEATRIZ GAVILANES NARANJO KELLY VERÓNICA CARVAJAL CUJI
“SISTEMA DE PASANTÍAS PARA LA FACULTAD DE INGENIERÍA
DESARROLLO E IMPLEMENTACIÓN DE UN PLUGIN DE GOOGLE WALLET PARA PAGOS ONLINE UTILIZANDO SOFTWARE OPEN SOURCE.
Framework Hexápodo PHP fácil, rápido y sin dolor
Índice 1. Introducción, objetivos y justificación del proyecto.
Características Técnicas
INTERFAZ DE ACCES DISEÑO DE BASE DE DATOS
Daniel Correa Botero.  Puede ser desplegado en la mayoría de los servidores web y en casi todos los sistemas operativos y plataformas sin costo alguno.
El paradigma de la orientación a objetos La programación orientada a objetos genera códigos eficientes y estandariza la metodología de programación, además.
HERRAMIENTAS CASE.
MOODLE ASPECTOS BÁSICOS
La evolución de la WEB Web 1.0 Web 2.0 Web 3.0.
Ingeniería de Software
Portal Docente Virtual : Grupo Andaluz de Investigación: ‘Topología Computacional y Matemática Aplicada Proyecto Fin de Carrera Realizado por: Pablo Germán.
Arquitectura de una aplicación
DISEÑO DE SOFTWARE 1ª. Parte
Ingenieria de software
HERRAMIENTAS TELEMATICAS
TIPOS DE SOFTWARE Se denomina software a un programa, equipamiento lógico o soporte lógico necesario para hacer posible la realización de una tarea con.
Computación en la Nube UASF.
El Internet.
Ingeniería en Sistemas de Información Diseño de Sistemas (3K1)
UNIDAD EDUCATIVA CALASANZ Manual de usos de WORDPRESS. NOMBRE: Melissa Veintimilla Labanda Curso: 1º ´´C´´ FECHA: 29 de marzo del 2015.
UNIDAD 7 WEB Y HTML.
IMPORTANCIA DE LOS FACTORES DE LA EDUACION VIRTUAL Elaborado por: Grupo Beta - Junio de 2012.
Especialización en Desarrollo de Software
Introducción al Lenguaje. ¿ Qué es PHP ? O Hypertext Pre-processoes (PHP) es un lenguaje de "código abierto" interpretado, de alto nivel, embebido en.
Algunas herramientas y aplicaciones que se pueden trabajar en GOOGLE.
Glosario Pictórico por Lilliam María Martínez García Asignatura: Indagación, Tecnología y Pensamiento Crítico.
Programación Java y Desarrollo de Aplicaciones Modulo 3 Lenguaje de programación Java Software utilizado.
 El trabajo del alumno se inicia visitando la WebQuest y accediendo a los recursos que se le presentan.  Una vez que han accedido a estos recursos esta.
Introducción a UML Departamento de Informática Universidad de Rancagua
Comercio Electrónico Parte 3 - Definición de conceptos generales: Internet, Dominio, , Website. - Que es un banner? - Que es un hosting? - -Cómo crear.
DIEGO ARMANDO GÓMEZ CUERVO Desarrollo de aplicaciones WEB con herramientas de software libre.
UNIVERSIDAD CAPITÁN GENERAL GERARDO BARRIOS FACULTAD DE CIENCIA Y TECNOLOGIA LICENCIATURA EN COMPUTACIÓN MÓDULO I: DISEÑO GRAFICO DOCENTE: ING. EDWIN ROLANDO.
Groupware/ Software Colaborativo
Realización de las tareas básicas de internet. ¿Qué es Internet? Podemos definir a Internet como una "red de redes", es decir, una red que no sólo interconecta.
UNITEC NEGOCIOS ELECTRÓNICOS ”DESARROLLO DE SOFTWARE ”
Tecnologías Cliente / Servidor
Punto 1 – Introducción al servicio Juan Luis Cano.
Desarrollo DE apps móviles
Karla Yunuen González Villanueva
Intregante: Rosa lisbeth zarate cordova Computacion informatica II.
Introducción al Lenguaje. ¿Qué es PHP? O Es un lenguaje de programación que es interpretado por un servidor web. O El lenguaje es genérico. PHP está orientado.
UNIVERSIDAD DE VIÑA DEL MAR SEDE SANTIAGO AREA INFORMATICA Marco de Trabajo para un Acceso Multimedia Universal Mediante Patrones Modelo-Vista-Controlador.
LOS PRINCIPALES BUSCADORES WEB Y LAS PRINCIPALES REDES SOCIALES.
UNA FORMA MAS SENCILLA DE PROCESAR INFORMACION. Jennifer Polo Madrid GOOGLE DOCS.
Servicios Web Conjunto de aplicaciones o de tecnologías con capacidad para interoperar en la Web. Estas aplicaciones o tecnologías intercambian datos entre.
Fundamentos de Ingeniería de Software
“ANALISIS, DISEÑO, DESARROLLO E IMPLANTACIÓN DE LOS MÓDULOS DE ADMINISTRACIÓN, ACADEMICO Y DOBE ORIENTADO A LA WEB PARA EL COLEGIO MILITAR Nº 10 ABDÓN.
Conociendo el modelo Cliente-Servidor
DLM Transact SQL Sesión I Introducción al SQL Server Uso de las herramientas de consultas del Transact SQL.
Aplicación web de tipo Ambiente Educativo Virtual, un sistema de gestión de cursos, de distribución libre, que ayuda a los educadores a crear comunidades.
Diseño de interacción. El diseño de interacción es la disciplina encargada de definir cómo se utilizan los productos y servicios interactivos. Su objetivo.
Conociendo el modelo Cliente-Servidor. Introducción En el mundo de TCP/IP las comunicaciones entre computadoras se rigen básicamente por lo que se llama.
Internet Infranet Protocolo World Wide Web Hipertexto Página web Sitio web Protocolo http Código HTML Editores HTML Portal Url Navegadores: A. Internet.
=MARCOS DE TRABAJO ORIENTADO A OBJETOS= « NETBEANS » INTEGRANTES: SOTELO CORTES JESVAN FIDEL JIMENEZ ALFARO ARTURO CAMARA.
Andrea Fernanda Salazar Rueda María Paula Peña Fernández Yuleny Osorio López.
COMUNICACIÓN Y TICS KÁROL FERNANDA BARRAGÁN M. JENNYLITH DAYANA ARDILA P. WENDY PAOLA PINTO F.
Transcripción de la presentación:

Protoweb Construyendo aplicaciones web fácilmente Leonel Viera - Federico González vieraleonel1@gmail.com fedegonzal@gmail.com Universidad Nacional de la Patagonia 29 junio 2010, Ushuaia, Argentina

Introducción a Protoweb Objetivo 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 Protoweb Motivaciones Audiencia. Idiomas, conectividad, diferencias cognitivas, seguridad Herramientas de análisis, diseño y desarrollo poco integradas Interacción con otras disciplinas. Frontera difusa Acceso global desde cualquier dispositivo Variedad de lenguajes en un mismo entorno 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.

Desarrollo web, contexto La dimensión de un nuevo espacio

Información y participación El contexto del desarrollo web Información y participación 1985-1995 correo electrónico 1995-2005 usuario pasivo Web 1.0 2005-2010 internet social Web 2.0

Dispositivos. No computadoras El contexto del desarrollo web Dispositivos. No computadoras Aplicaciones CrossBrowser, independientes de la plataforma y del sistema operativo.

Las aplicaciones de escritorio El contexto del desarrollo web Las 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.

Aplicaciones web. La audiencia El contexto del desarrollo web Aplicaciones 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.

Tierra del Fuego tiene alrededor de 100.000 usuarios de internet El contexto del desarrollo web Aplicaciones web. La audiencia Argentina tiene 5 millones de accesos de banda ancha, con 20 millones de usuarios estimados y 50% de penetración Las islas Malvinas son la región del mundo con mayor penetración de internet (100%) Tierra del Fuego tiene alrededor de 100.000 usuarios de internet Penetración de internet por países Población mundial estimada: 6.800 millones Usuarios de internet estimados: 1.800 millones Fuentes: Internet World Stats ; INDEC. 2010

Páginas, sitios y aplicaciones El contexto del desarrollo web Pá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

Visión de equipo y proyecto Introducción a Protoweb Visió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.

ORM, lo mejor de dos mundos Introducción a Protoweb ORM, 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.

Diversidad. Plugins y widgets Introducción a Protoweb Diversidad. 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

Herencia y extensibilidad Introducción a Protoweb Herencia 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.

Desarrollo de una aplicación Poniendo a prueba Protoweb Desarrollo de una aplicación Conceptos para recordar 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).

Protoweb por dentro El proceso de análisis y diseño

Problemática y características Proceso de análisis y diseño Problemá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.

Introducción a Scrum Los principios del Daily Scrum Meeting Proceso de análisis y diseño Introducció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)

Mockups. Comunicación clara Proceso de análisis y diseño Mockups. Comunicación clara

Proceso de análisis y diseño Después del mockup

Secuencia al crear un proyecto Proceso de análisis y diseño Secuencia al crear un proyecto

Proceso de análisis y diseño Base de datos

Proceso de análisis y diseño Lenguajes y Browsers CodeIgniter OverZealous Firebug, Fireshot, HTML Validator, FirePHP, Web Developer toolbar Yaml PHP MySQL CSS JavaScript Jquery, Ajax Smarty HTML Plugins utilizados con JQuery: ui, autocomplete, chkeditor, dynatree, google maps, select to slider, shadowbox, table sorter, block ui, hint, ckeditor y jquery tools.

Un cliente-servidor de tres capas El patrón MVC en Protoweb Un cliente-servidor de tres capas HTML CSS Javascript Ajax PHP ASP JSP MySQL MS-SQL Oracle Postgres

La capa cliente. El HTML El patrón MVC en Protoweb <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>

Caos: ni cliente, ni servidor El patrón MVC en Protoweb Caos: 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>

SQL, PHP y HTML. Confusión web El patrón MVC en Protoweb SQL, PHP y HTML. Confusión web Embed PHP + HTML <?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 Final 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> http://www.ejemplo.com/ficha_persona.php?dni=30548264

View (Smarty Template) El patrón MVC en Protoweb Templates. Orden y progreso Model + Controller <?php $res = “SELECT * FROM personas WHERE dni=$_GET[‘dni’]”; $tpl = “ficha_persona.tpl”; $tpl->nombre = $res[“nombre”]; $tpl->biografia = $res[“biografia”]; ?> ficha_persona.php View (Smarty Template) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <h1>{nombre}</h1> <p>{biografia}</p> </body> </html> ficha_persona.tpl Virtual HTML <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/ficha_persona.php?dni=30548264

Un archivo por cada pantalla El patrón MVC en Protoweb Modelo Vista y Controlador Model View Controller Class Persona { dni, nombre, biografia } <html> <h1>{nombre}</h1> <p>{biografia}</p> </html> Class Personas { function ficha($dni) { ficha = New Persona($dni); } Una clase php por tabla Un archivo por cada pantalla Una clase php por tabla Final HTML <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/

Herramientas utilizadas El software (y la gente) que hizo posible a Protoweb

Comunicación y Backup AVer Software y Herramientas utilizadas Comunicación y Backup Google Code DropBox AVer Auto Ver Pidgin Skype Gmail 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 utilizadas Análisis y Diseño yUML Star UML yUML Mockups AVer Google Docs Workbench PHP Doc 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 utilizadas Servidores y Editores Google Hosting Navicat WAMP XAMPP PHP MyAdmin Netbeans Linux y Windows por igual, Protoweb ha sido desarrollado utilizando software gratuito, independientemente de la plataforma.

El futuro de Protoweb Una herramienta abierta, al alcance de tod@s

Próximos pasos Para una primera versión pública El futuro de Protoweb Pró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.

Pró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.

Pró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!