Your SlideShare is downloading. ×
0
Desarrollo Web Ágil con Symfony,
Bootstrap y Angular
Bayron Guevara
Investigador Independiente
FLISOL 2014
Contenido
● Principios del Desarrollo Ágil
● Metodologías y componentes del Desarrollo Ágil
● Scrum y XP: Metodologías ági...
Principios del Desarrollo Ágil
El desarrollo ágil o agile development en inglés es un
conjunto de metodologías de desarrol...
Principios del Desarrollo Ágil
2. Equipos auto-organizados y comunicación cara a cara.
Tratan de evitar demasiados formali...
Principios del Desarrollo Ágil
Metodologías y componentes del
Desarrollo Ágil
Se han desarrollado numerosas metodologías o
implementaciones prácticas del...
Metodologías y componentes del
Desarrollo Ágil
2. Lean Software Development (LSD).
Inspirado en el modelo de producción LE...
Metodologías y componentes del
Desarrollo Ágil
3. Programación Extrema (XP). Considera el
cambio de requerimientos como un...
Scrum y XP: Metodologías ágiles
más difundidas
Comprende varias reuniones que van desde obtener retro-
alimentación hasta ...
Scrum y XP: Metodologías ágiles
más difundidas
Scrum y XP: Metodologías ágiles
más difundidas
Sus características fundamentales son:
● Entregas pequeñas
● Historias de u...
Symfony como framework de
desarrollo Server-Side
Symfony es un framework para el desarrollo de
aplicaciones web en PHP. Co...
Symfony como framework de
desarrollo Server-Side
Los requests (solicitudes web) siguen el siguiente
flujo a través de Symf...
Symfony como framework de
desarrollo Server-Side
Symfony posee una arquitectura orientada a
componentes llamados Bundles. ...
Symfony como framework de
desarrollo Server-Side
Symfony utiliza un administrador de dependencias para
aplicaciones PHP ll...
Symfony como framework de
desarrollo Server-Side
El patrón de diseño MVC es muy práctico en las
aplicaciones web, ya que p...
Symfony como framework de
desarrollo Server-Side
Una de las características más útiles que poseen
los frameworks modernos,...
Bootstrap: Framework para
Front-end
Es un framework para el desarrollo de interfaces de
usuario de aplicaciones web (front...
Bootstrap: Framework para
Front-end
Consta de los siguientes componentes prefabricados
que nos permitirán embellecer autom...
Bootstrap: Framework para
Front-end
Componentes Principales
● Alertas
● Badges
● Jumbotron
● Paginación
Bootstrap: Framework para
Front-end
Componentes Principales
● Barras de progreso
● Listas
● Paneles
● Tablas
Bootstrap: Framework para
Front-end
Sistema de Grillas (Grid System)
Bootstrap se basa en un sistema de cuadricula de 12
c...
Bootstrap: Framework para
Front-end
Sistema de Grillas (Grid System)
Comportamiento del sistema de grillas a diferentes re...
Bootstrap: Framework para
Front-end
Organización de la grilla en pantallas mayores a 992px (md: medium devices)
La misma g...
AngularJS: Framework Javascript
Angular es un framework javascript para el
desarrollo de aplicaciones web dinámicas
median...
AngularJS: Framework Javascript
Veamos un sencillo ejemplo práctico en Angular
usando el clásico Hello World!, donde lo qu...
AngularJS: Framework Javascript
Este ejemplo consta básicamente de cuatro pasos:
1. Activar Angular dentro de una porción ...
AngularJS: Framework Javascript
● Data Binding. Permite actualizar la vista
automáticamente cuando el modelo cambia y
vice...
AngularJs: Framework Javascript
● Comunicación con el servidor. Posee servicios pre-
fabricados de comunicación basados en...
Colocando todo junto
Hemos visto a grandes rasgos algunas de las
metodologías y tecnologías más populares para
el desarrol...
Colocando todo junto
Por otra parte gracias a estas tecnologías de frontend,
ahora el desarrollo de backends -Symfony en n...
Colocando todo junto
Es un framework para el desarrollo web móvil
basado en Bootstrap y Angular. Se integra como
un módulo...
Gracias por su atención.
Desarrollo Web Ágil con Symfony,
Bootstrap y Angular
Upcoming SlideShare
Loading in...5
×

Desarrollo Web Ágil con Symfony, Bootstrap y Angular

8,350

Published on

Principios y Técnicas de Desarrollo Web Agil y su aplicacion utilizando frameworks de desarrollo rápido como Symfony2, Bootstrap, Angular.

Published in: Software
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,350
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
208
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Desarrollo Web Ágil con Symfony, Bootstrap y Angular"

  1. 1. Desarrollo Web Ágil con Symfony, Bootstrap y Angular Bayron Guevara Investigador Independiente FLISOL 2014
  2. 2. Contenido ● Principios del Desarrollo Ágil ● Metodologías y componentes del Desarrollo Ágil ● Scrum y XP: Metodologías ágiles más difundidas ● Symfony como framework de desarrollo Server-Side ● Bootstrap: Framework para Front-end ● Angular: Framework Javascript ● Colocando todo junto
  3. 3. Principios del Desarrollo Ágil El desarrollo ágil o agile development en inglés es un conjunto de metodologías de desarrollo de software orientadas a agilizar o acelerar su lanzamiento inicial y mejoramiento continuo. Se fundamenta en tres (3) principios: 1. Ciclo corto de desarrollo (generalmente de 2 a 4 semanas). Opuesto al enfoque tradicional donde el lanzamiento del software se prolonga hasta satisfacer la mayoría de los requerimientos del cliente, el desarrollo ágil promueve ciclos cortos e incrementales -llamados iteraciones- que permiten validar tempranamente la funcionalidad.
  4. 4. Principios del Desarrollo Ágil 2. Equipos auto-organizados y comunicación cara a cara. Tratan de evitar demasiados formalismos y enfatizan la comunicación directa entre los miembros del equipo de desarrollo y el cliente. 3. Adaptabilidad y respuesta rápida a los cambios. Se evalúan los resultados en cada iteración y se mantiene un canal de comunicación constante con el cliente para validar requerimientos y responder oportunamente a los cambios que puedan surgir.
  5. 5. Principios del Desarrollo Ágil
  6. 6. Metodologías y componentes del Desarrollo Ágil Se han desarrollado numerosas metodologías o implementaciones prácticas del desarrollo ágil. Siendo las más populares las siguientes: 1. Scrum. Es la metodología actualmente más utilizada en el desarrollo web y define un equipo de trabajo con 3 roles: ScrumMaster (facilitador del proyecto), ProductOwner (representante del cliente) y el Team (desarrolladores). Cada ciclo se llama sprint durante el cual se desarrollan mejoras potencialmente entregables o utilizables.
  7. 7. Metodologías y componentes del Desarrollo Ágil 2. Lean Software Development (LSD). Inspirado en el modelo de producción LEAN, el cual fue originado en la Toyota, se basa en los siguientes principios: ● Eliminar los desperdicios ● Ampliar el aprendizaje ● Decidir lo más tarde posible ● Reaccionar tan rápido como sea posible ● Potenciar el equipo ● Véase todo el conjunto
  8. 8. Metodologías y componentes del Desarrollo Ágil 3. Programación Extrema (XP). Considera el cambio de requerimientos como un aspecto natural del desarrollo de software, además de dar mayor importancia a las relaciones interpersonales del equipo de trabajo.
  9. 9. Scrum y XP: Metodologías ágiles más difundidas Comprende varias reuniones que van desde obtener retro- alimentación hasta definir los requerimientos. ● Scrum diario o stand-up meeting. ● Reunion de planificacion del Sprint ● Reunion de revision del Sprint ● Retrospectiva del Sprint El Scrum mantiene una serie de documentos que le permiten conocer el estado actual y futuro del proyecto: Product Backlog, Sprint Backlog, Burn down Chart. Scrum
  10. 10. Scrum y XP: Metodologías ágiles más difundidas
  11. 11. Scrum y XP: Metodologías ágiles más difundidas Sus características fundamentales son: ● Entregas pequeñas ● Historias de usuario para documentar requerimientos ● El Cliente debe estar presente continuamente. ● Diseño simple para facilitar su comprensión por el equipo ● Pruebas unitarias continuas. Por ejemplo, el Desarrollo Guiado por Pruebas (TDD) ● Refactorización del código (Refactoring). ● Programación en Parejas ● Propiedad compartida del código Programación Extrema (XP)
  12. 12. Symfony como framework de desarrollo Server-Side Symfony es un framework para el desarrollo de aplicaciones web en PHP. Con framework me refiero a un conjunto de herramientas y a una metodología de desarrollo. Alrededor de Symfony existe una comunidad y una filosofía basada en el software libre y de código abierto. Symfony esta inspirado en otro framework llamado Ruby on Rails que comparte el mismo patrón de diseño de apps llamado Modelo-Vista-Controlador.
  13. 13. Symfony como framework de desarrollo Server-Side Los requests (solicitudes web) siguen el siguiente flujo a través de Symfony.
  14. 14. Symfony como framework de desarrollo Server-Side Symfony posee una arquitectura orientada a componentes llamados Bundles. Cada bundle puede hacer uso de los servicios expuestos por otros bundles a través de un mecanismo llamado Inyección de Dependencias. Arquitectura Esta flexibilidad permite desarrollar componentes con mayor facilidad. Prueba de ello son los miles de componentes de terceros que se pueden encontrar en el repositorio KnpBundles (http://knpbundles.com).
  15. 15. Symfony como framework de desarrollo Server-Side Symfony utiliza un administrador de dependencias para aplicaciones PHP llamado Composer, el cual es similar a YUM o APT para Linux, o a Bundler para Ruby. "require": { "monolog/monolog": "1.2.*" } Se le considera el sucesor de Pear ya que es más completo y sencillo de utilizar. Por ejemplo para indicar que la librería monolog es una dependencia de nuestro proyecto, basta con usar el siguiente código:
  16. 16. Symfony como framework de desarrollo Server-Side El patrón de diseño MVC es muy práctico en las aplicaciones web, ya que permite dividirlas en tres componentes: Modelo de datos, Vista del contenido y Controlador de la lógica de la aplicación. Twig como motor de plantillas Doctrine o Propel para modelar la base de datos
  17. 17. Symfony como framework de desarrollo Server-Side Una de las características más útiles que poseen los frameworks modernos, y que es parte de la filosofía RAD, es la capacidad de generar código fuente y prototipos funcionales de manera automática a partir de simples comandos. Symfony posee generadores para crear Bundles, Controladores CRUD (Create-Read-Update- Delete) a partir de modelos de datos, crear entidades de datos a partir de una BD, etc. Generadores (Scaffolding)
  18. 18. Bootstrap: Framework para Front-end Es un framework para el desarrollo de interfaces de usuario de aplicaciones web (front-end). Podemos usarlo tanto por medio de CSS puro o mediante extensiones del lenguaje como Less o Sass. Esta fundamentado sobre la tendencia actual en web respecto a diseñar primero para las pantallas móviles (mobile-first) y en crear diseños responsivos (responsive-design); de manera que nos permite desarrollar aplicaciones web que luzcan y funcionen bien tanto en móviles como en computadoras de escritorio o laptops.
  19. 19. Bootstrap: Framework para Front-end Consta de los siguientes componentes prefabricados que nos permitirán embellecer automáticamente nuestros elementos web: Componentes Principales ● Menú desplegable ● Grupos de botones ● Input Groups ● Barras de Navegación
  20. 20. Bootstrap: Framework para Front-end Componentes Principales ● Alertas ● Badges ● Jumbotron ● Paginación
  21. 21. Bootstrap: Framework para Front-end Componentes Principales ● Barras de progreso ● Listas ● Paneles ● Tablas
  22. 22. Bootstrap: Framework para Front-end Sistema de Grillas (Grid System) Bootstrap se basa en un sistema de cuadricula de 12 columnas para crear el layout de una página web. Usa la técnica de CSS conocida como media queries para ajustar automáticamente el ancho de cada columna de acuerdo al tamaño/resolución de la pantalla. Además dispone de una serie de clases que nos permiten especificar si un conjunto de grids (celdas) continuas se mostrarán horizontalmente o por el contrario se apilaran unas debajo de otras.
  23. 23. Bootstrap: Framework para Front-end Sistema de Grillas (Grid System) Comportamiento del sistema de grillas a diferentes resoluciones y clases CSS
  24. 24. Bootstrap: Framework para Front-end Organización de la grilla en pantallas mayores a 992px (md: medium devices) La misma grillla se apila automáticamente en resoluciones de pantalla pequeñas (menores a 992px, ej: iPhone, Windows Phone)
  25. 25. AngularJS: Framework Javascript Angular es un framework javascript para el desarrollo de aplicaciones web dinámicas mediante una arquitectura MVW (Model-View- Whatever). A diferencia de otros, Angular extiende el lenguaje HTML introduciendo etiquetas que permiten controlar el comportamiento y agregar dinamismo a una página web. Fue desarrollado inicialmente por Google y esta bajo la licencia MIT, que es una licencia permisiva de software libre.
  26. 26. AngularJS: Framework Javascript Veamos un sencillo ejemplo práctico en Angular usando el clásico Hello World!, donde lo que escribimos en el campo de texto se refleja inmediatamente en el encabezado de abajo.
  27. 27. AngularJS: Framework Javascript Este ejemplo consta básicamente de cuatro pasos: 1. Activar Angular dentro de una porción de nuestra página: directiva ng-app 2. Incluir el código fuente de la librería: angular.min.js 3. Declarar un modelo de datos y enlazarlo a un formulario: directiva ng-model 4. Utilizar una referencia al modelo declarado previamente: sintaxis {{modelName}}
  28. 28. AngularJS: Framework Javascript ● Data Binding. Permite actualizar la vista automáticamente cuando el modelo cambia y viceversa. ● Controlador. Permite definir acciones al interactuar con los elementos del DOM (click, enviar un form). ● Deep Linking. Una forma de generar links (URIs) que llevan a una ubicación especifica de la app. ● Validación de formularios. Podemos definir validación client-side de formularios de manera automática y declarativa. Características principales
  29. 29. AngularJs: Framework Javascript ● Comunicación con el servidor. Posee servicios pre- fabricados de comunicación basados en AJAX, facilitando la integración con sistemas de terceros. ● Componentes reutilizables. Similar a los componentes de Bootstrap pero usando nuevos tags o directivas HTML. ● Exportable. Permite integrarlo fácilmente a otras tecnologías. ● Inyectable. Las dependencias se definen de forma declarativa y cualquier componente se puede reemplazar por uno propio. Características principales
  30. 30. Colocando todo junto Hemos visto a grandes rasgos algunas de las metodologías y tecnologías más populares para el desarrollo web. Ahora vamos a aplicarlo todo junto en un solo ejemplo. Aunque por defecto Bootstrap emplea jQuery como framework javascript para lograr la interactividad de sus componentes, alternativamente existen ports del mismo implementados en otros frameworks. Para AngularJS se encuentran: UI Bootstrap y Mobile Angular UI.
  31. 31. Colocando todo junto Por otra parte gracias a estas tecnologías de frontend, ahora el desarrollo de backends -Symfony en nuestro caso- se centra en proveer al frontend de los datos en bruto para generar y almacenar dinámicamente el contenido del sitio. Esto usualmente significa desarrollar un webservice bajo los principios de la arquitectura REST y usando JSON o XML como formato de datos. La ventaja de este enfoque es que el mismo servicio de datos se puede reutilizar en otras plataformas como son apps móviles nativas, Smart TVs, etc. Emblema de JSON
  32. 32. Colocando todo junto Es un framework para el desarrollo web móvil basado en Bootstrap y Angular. Se integra como un módulo y adicionalmente provee funciones para el reconocimiento de gestos propios de pantallas táctiles entre los que se encuentran: tap, fast-click, swipe, etc. Podemos ver una demo en acción a través del siguiente enlace: http://mobileangularui.com/demo Mobile Angular UI
  33. 33. Gracias por su atención. Desarrollo Web Ágil con Symfony, Bootstrap y Angular
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×