Sesión 4

Agenda

• Ciclo de desarrollo de una aplicación web
• Stack application y web stack application

                       - Elementos que las conforman

                       - La arquitectura cliente-servidor la base de las aplicaciones web

                       - Herramientas de desarrollo web y recursos

• Criterios de selección tecnologías para aplicaciones web

Fases del ciclo del desarrollo una aplicación WEB

Enlistando las fases del ciclo de desarrollo de una aplicación web tenemos:

• Identificación del modelo de negocio
• Análisis de proceso de negocio 
• Propuesta técnica y revisión
• Diseño
• Desarrollo de la aplicación
• Monitoreo y control
• Puesta en producción y capacitaciones
• Mantenimiento y soporte

A continuación se establece un mapa mental que define las fases del ciclo de desarrollo de una aplicación web:

Stack application y web stack application

En términos generales una Stack application abarca desde la manera en que nos referimos al hardware de un computador y cómo los programas tradicionales se ejecutan.

De esta manera se define los siguientes conceptos:

Modelo tradicional: este modelo contiene las siguientes capas:

• Capa de hardware
• Sistema Operativo, que controla el acceso a esos recursos de hardware y su ejecución.
• Lenguajes de Programación, 
• Aplicación

Modelo WEB:     

El enfoque es sobre lo que está corriendo encima del sistema operativo. No se presta mucha atención al hardware ni al sistema operativo.

Web Stack Tools:

Herramientas necesarias para construir una aplicación Web en arquitectura cliente-servidor.

Una Stack application Web se encuentra en la parte superior del sistema operativo y el hardware, ejecutando código desde los requerimientos de negocio hasta los datos.

¿Cuáles son los elementos que forman una Stack application ?

Los requerimientos de la aplicación se convierte en un prototipo funcional, que luego se convierte en una aplicación escalable y posteriormente los datos se tratan en gran escala. La conforma:

User Interface/ User Experience Design (UX/UI DESIGN)

Toma los requerimiento de negocio y produce composiciones, diagramas de Photoshop o diagramas de croquis para el equipo de Front-end. 

Crean un marcado o maquetado no ejecutable de cómo debería funcionar esa aplicación.

Su objetivo es definir como el cliente desea interactuar, qué tipo de datos tendrá y su sus procesos dentro de la aplicación.

Front End 

Toma los elementos del concepto anterior y produce un prototipo funcional en HTML y CSS, con algo de JavaScript. No obstante, esta no es una aplicación lista para la puesta en producción.

Back End

Toma el prototipo funcional del equipo de front-end y lo integra en un sistema que pueda sobrevivir a cientos o miles de solicitudes por minuto. Aquí se profundiza más en la arquitectura del software real en el desarrollo de la lógica del sistema. 

Ops + Data

El equipo de back-end produce una aplicación escalable, pero luego necesita que el equipo de operaciones realmente haga que la aplicación se ejecute en el servidor, mantenga el código y reinicie si el código falla. Luego de una gran cantidad de datos producidos por los usuarios del sistema, aquí es donde la ciencia de datos comienza a trabajar con los datos que se almacenan desde el back-end.

 Esquema que resume los puntos anteriores:

Roles + Títulos de trabajo

Si se desea ampliar más sobre los aspectos explicados anteriormente consultar: Can a Full Stack Developer Exist?

La arquitectura cliente servidor es la base de una aplicación web

Repasando conceptos previos en el modelo cliente-servidor, la lógica de negocio esta inmersa dentro de la aplicación que realiza la interfaz de usuario en el lado cliente y el servidor administra los datos.

Ilustrando lo anterior y relacionando con el contexto de esta sesión tenemos:

Cabe agregar que es vital entender el proceso de desarrollo web antes de escoger las herramientas de la pila de tecnologías modernas a utilizar.

FRONT END                            BACK END

Profundizando un poco más lo que se necesita del lado cliente para empezar a desarrollar aplicaciones web es:

HTML (Hypertext Markup Languaje): es un lenguaje de marcas que provee la estructura de las páginas web.

CSS(Cascanding Style Sheets): define cómo se ve el HTML e indica al browser los formatos como deben ser desplegados los elementos de información.

Javascript: lenguaje de programación que provee el comportamiento del HTML.

Lo mejor y lo peor de ser un desarrollador web es que el entorno cambia constantemente. Si bien esto es emocionante, también significa que los desarrolladores web siempre deben ser proactivos en el aprendizaje de nuevas técnicas o lenguajes de programación, adaptarse a los cambios y estar dispuestos por aceptar nuevos desafíos.

Si se desea profundizar más sobre esta sección además de saber ejemplos de conjuntos de tecnologías  usadas para  plataformas consultar:  technology-stack-for-web-development

  

Algunas herramientas y recursos de desarrollo web del 2018 recomendadas para esta sesión

Bibliotecas de JavaScript

• JQuery: Una biblioteca de JavaScript rápida, pequeña y con muchas funciones.
• BackBone.JS: Proporciona una red con modelos, vistas, colecciones y eventos.
• D3.js: Biblioteca para manipular documentos basados en datos.
• React: La biblioteca de JavaScript de Facebook desarrollada para construir interfaces de usuario.
• JQuery UI: Un conjunto de interacciones de interfaz de usuario, efectos, widgets y temas.
• jQuery Mobile: Sistema de interfaz de usuario basado en HTML5 diseñado para crear sitios web responsive.
• Underscore.js: Ayuda para la programación funcional sin extender ningún objeto incorporado.
• Moment.js: Analizar , validar, manipular y mostrar fechas en JavaScript.
• Lodash: Una biblioteca de utilidades moderna que ofrece modularidad, rendimiento y extras.
• Vue.js : Un marco de JavaScript de código abierto utilizado para crear interfaces de usuario.

Marcos front-end

Bootstrap: HTML, CSS y un marco JS para desarrollar primeros proyectos responsive adaptables en la web.

Foundation: familia de marcos front-end responsive que facilitan el diseño de sitios web, aplicaciones y correos electrónicos responsive que se ven increíbles en cualquier dispositivo.

Semantic UI: marco de desarrollo que ayuda a crear diseños hermosos y sensibles utilizando HTML amigable para los humanos.

uikit: un framework de front-end ligero y modular para desarrollar interfaces web rápidas y potentes.

Preprocesadores CSS

Un preprocesador de CSS es básicamente un lenguaje de scripting que extiende CSS y luego lo compila en CSS normal.

Sass: Una extensión de CSS de grado profesional muy madura, estable y potente.

Less: Es como una extensión de CSS que también es compatible con CSS. Esto hace que el aprendizaje de Less sea más sencillo.

Stylus: un nuevo lenguaje, que proporciona una forma eficiente, dinámica y expresiva de generar CSS. Soporta tanto una sintaxis con sangría como un estilo CSS regular.

Editores de texto y código

Atom: Editor de texto moderno y accesible.

SublimeText: Editor de texto sofisticado para código, marcado y prosa con un gran rendimiento.

Notepad ++: Editor de código fuente gratuito que admite varios lenguajes de programación.

Visual Studio Code: Edición de código redefinida y optimizada para construir y depurar aplicaciones web y de nube modernas. 

WebStorm: IDE ligero pero potente, perfectamente equipado para el desarrollo complejo del lado cliente y el desarrollo del lado servidor con Node,js

Brackets: Editor de texto moderno, ligero y potente; escrito en JavaScript, HTML y CSS.

Git Clientes/Servicios

Git es un sistema de administración de código fuente para software y desarrollo web conocido por el control de revisión distribuido. Al trabajar con equipos, usar un cliente git para impulsar cambios de código de desarrollo a producción es una forma de mantener el caos y asegurar que las cosas se prueben para que no rompan su aplicación web en vivo o sitio.

SourceTree: Un cliente gratuito de Git y Mercurial para Windows o Mac, además de Bitbucket.

GitKraken: Un cliente multiplataforma gratuito, intuitivo, rápido y hermoso.

GitHub Client: Una forma perfecta de contribuir a proyectos en GitHub.

GitLab: Aloja tus proyecto de software privado y público de forma gratuita.

Para saber sobre más herramientas consultar la página:  100+ Awesome Web Dev Tools and Resources

Criterios de selección para escoger y no escoger una tecnología de una aplicación web

Cómo No escoger una tecnología WEB para un desarrollo de una aplicación

Criterios para escoger un stack de tecnología WEB

Como dato adicional la Ciberdelincuencia le costará a las empresas más de $2 billones en 2019

La investigación asociada titulada "El futuro de la ciberdelincuencia y la seguridad: amenazas de mitigación financiera y corporativa", encontró que la mayoría de estas violaciones provendrán de la infraestructura de res y de TI existentes. Mientras que las nuevas amenazas dirigidas a dispositivos móviles y la Internet de las cosas se informa que tendrá a un ritmo creciente. 

para mayor información consultar el siguiente enlace: Enlace cibercrimen

  

Referencias adicionales 

Enlace 1: presentación de la sesión

Enlace 2: Análisis de procesos de negocio

Enlace 3: Identificación de procesos de negocio