Mindset digital

Sesión 6
Unidad 6: Herramientas para Desarrollar Software,
Frameworks y Tecnologías.
 Resultado de aprendizaje

• Diferenciar que IDE’s es necesario para mi proyecto.

• Entender Angular como Framework, su definición y aplicación
y tener la capacidad de integrar conceptos y tecnologías
como (Testing, Angular Material, Frameworks CSS, SASS,
entre otros)
 Contenidos o temas

• Contenido 1: ¿Qué es un IDE?.

• Contenido 2: ¿Cuál es la importancia de Ios IDEs?.
• Contenido 3: ¿Cuáles son los tipos de IDE?.
• Contenido 4: ¿Qué IDE y editores de texto debería mirar?.
• Contenido 5: ¿Por qué se necesita un Framework?.
• Contenido 6: ¿Qué es Angular?.
• Contenido 7: Ventajas de AngularJS.
 Contenido 1: ¿ Qué es un IDE?

IDE es el acrónimo del término inglés Integrated Development Environment o,

lo que es lo mismo, Entorno de Desarrollo Integrado. Es el escenario digital
utilizado en programación para desarrollar aplicaciones, juegos… Es
imprescindible tanto en el ámbito del Desarrollo de Aplicaciones Web (DAW)
como en el Desarrollo de Aplicaciones Multiplataforma (DAM). Hace que la
tarea del programador sea más sencilla, gracias a las herramientas que tiene
incorporadas, como compiladores, depuradores o bibliotecas, y esto se
traduce en un aumento de la productividad.
 Contenido 1: ¿ Qué es un IDE?

Cualquier IDE debe tener una serie de características básicas que

garanticen que la experiencia del usuario será satisfactoria. Todo IDE
debe contar con:
❑ Editor de código. Se trata de un editor de texto creado exclusivamente
para trabajar con el código fuente de programas informáticos.
❑ Compilador. Un programa encargado de traducir las instrucciones en
código fuente, escritas en lenguaje de programación, a código objeto,
el único lenguaje que el ordenador entiende.
❑ Depurador o debugger. Un programa que permite probar y buscar
errores en otros programas.
❑ Linker. Es la herramienta con la que combinar diferentes archivos de
código fuente para convertirlos en un único fichero ejecutable.
❑ Refactorización de código. Proceso en el que se recurre a funciones
como el reformateo o la encapsulación para mejorar el código fuente.
 Contenido 1: ¿ Qué es un IDE?

El abanico de IDEs es muy amplio. Decantarse por uno u otro dependerá

básicamente de las exigencias y necesidades de cada programador, que puede
utilizar IDEs diferentes para trabajos distintos. Entre las alternativas más utilizadas y
mejor valoradas están:
⮚ Eclipse.
⮚ Visual Studio.
⮚ Xcode.
⮚ IntelliJ Idea.
⮚ Sublime Text.
⮚ Atom.
⮚ PHPStorm.
 Contenido 2: ¿ Cuál es la importancia de Ios IDEs?

Las siguientes razones enumeran la importancia del uso de los

IDEs:
Desarrollo más rápido de software y aplicaciones:
Los IDE eliminan la necesidad de configurar e integrar manualmente nuevas
utilidades. En cambio, estas herramientas existen como parte del mismo área
de trabajo, lo que reduce significativamente los periodos de aprendizaje y
configuración. En combinación con interfaces gráficas simplificadas y la
comodidad de no saltar entre plataformas y aplicaciones durante el proceso
de desarrollo, estos factores pueden dar lugar a un ciclo de desarrollo de
aplicaciones mucho más corto.
 Contenido 2: ¿ Cuál es la importancia de Ios IDEs?

Las siguientes razones enumeran la importancia del uso de los

IDEs:
Reducción del tiempo de incorporación
Cuando nuevos desarrolladores se unen a un proyecto, los IDE ayudan a
reducir al mínimo el tiempo de incorporación. En lugar de invertir el tiempo en
aprender varias herramientas de software, los nuevos desarrolladores pueden
centrarse en aprender a trabajar con el IDE y empezar a utilizar rápidamente
las herramientas y los flujos de trabajo pertinentes.
 Contenido 2: ¿ Cuál es la importancia de Ios IDEs?

Las siguientes razones enumeran la importancia del uso de los

IDEs:
Flujo de trabajo mejorado.

Los IDE proporcionan una amplia gama de soluciones y funciones. Esto incluye el
resaltado de sintaxis y otras funciones diseñadas para ayudar a identificar y corregir
errores en los navegadores de código, clase y objeto para navegar y visualizar
procesos, y una interfaz GUI para realizar tareas y ejecutar acciones sin tener que
cambiar entre varias aplicaciones. En conjunto, estas funciones ayudan a organizar y
optimizar los flujos de trabajo para un desarrollo más eficiente.
 Contenido 2: ¿ Cuál es la importancia de Ios IDEs?

Las siguientes razones enumeran la importancia del uso de los

IDEs:
Automatización avanzada.
Para procesos de desarrollo de aplicaciones y software esenciales, como la
compilación, depuración e implementación, los IDE permite a los usuarios crear
automatizaciones eficaces. Esto ayuda a garantizar que el proceso de desarrollo no
se detenga a la espera de aprobaciones u otras tareas que el sistema puede realizar
fácilmente por sí mismo.
 Contenido 3: ¿Cuáles son los tipos de IDE?

Los entornos de desarrollo integrado (IDE) se pueden

clasificar ampliamente en varias categorías diferentes,
según el desarrollo de la aplicación que admiten y cómo
funcionan. Sin embargo, es posible acomodar varias
aplicaciones de software de IDE muchas categorías.
 Contenido 3: ¿Cuáles son los tipos de IDE?

IDE locales
Los desarrolladores instalan y ponen en marcha IDE locales directamente en sus
equipos locales. También tienen que descargar e instalar varias bibliotecas
adicionales dependiendo de sus preferencias de codificación, los requisitos del
proyecto y el lenguaje de desarrollo. Mientras que las IDE locales son
personalizables y no necesitan de una conexión a Internet una vez instalados,
presentan varios desafíos.
 Contenido 3: ¿Cuáles son los tipos de IDE?

A continuación, se muestran algunos tipos de IDE Locales:

• Pueden consumir mucho tiempo y su configuración puede resultar difícil.

• Consumen recursos de equipos locales y pueden ralentizar el rendimiento
de los equipos de forma significativa.
• Las diferencias de configuración entre el equipo local y el entorno de
producción pueden generar errores en el software.
 Contenido 3: ¿Cuáles son los tipos de IDE?

IDE en la nube

Los desarrolladores utilizan IDE en la nube para escribir, editar y compilar código
directamente en el navegador para prescindir de la necesidad de descargar
software en sus equipos locales. Los IDE basados en la nube ofrecen varias
ventajas en comparación con los IDE tradicionales.
 Contenido 3: ¿Cuáles son los tipos de IDE?

Estos son algunos de dichas ventajas:

✔ Entorno de desarrollo estandarizado
Los equipos de desarrollo de software pueden configurar un IDE basado en la nube de forma
central para crear un entorno de desarrollo estándar. Este método los ayuda a evitar errores
que pueden ocurrir debido a las diferencias en la configuraciones de los equipos locales.

✔ Independencia de plataformas
Los IDE en la nube funcionan en el navegador y son independientes de los entornos de
desarrollo locales. Esto significa que se conectan directamente a la plataforma de la nube del
vendedor y los desarrolladores pueden utilizarlos desde cualquier equipo.

✔ Mejor rendimiento
Crear y compilar funciones en un IDE requiere de una gran capacidad de memoria, lo que
puede ralentizar el equipo del desarrollador. El IDE en la nube utiliza recursos de cómputo de
la nube y libera los recursos del equipo local.
 Contenido 4: ¿Qué IDE y editores de texto debería mirar?

La mayor parte de lo que debe buscar en términos de características específicas

depende claramente del Desarrollador y/o programador. Sin embargo, a
continuación se enumeran algunas cosas a tener en cuenta:
• ¿Es posible trasladar proyectos entre editores exportándolos e importándolos?.
• ¿Tienen sentido las combinaciones de teclado, especialmente si vienes de un
editor como Vim, que tiene un enfoque de edición poco convencional?.
• ¿Cuál es el nivel de asistencia del editor de texto en caso de problemas? Es
preferible un editor de código abierto si no se dispone de asistencia activa.
• ¿Te parece razonable el flujo de trabajo del editor en cuanto a la creación de
proyectos y el trabajo diario en ellos?.
• Hay muchas más consideraciones que puede hacer, pero estas le ayudarán a
reducir sus opciones.
 Contenido 5: ¿ Por qué se necesita un Framework?

Un Framework es una estructura inicial, un modelo, que se emplea como

referencia en la puesta en funcionamiento de un proyecto para alcanzar objetivos
concretos. En tanto que plantilla o molde de base, hace posible que el desarrollo
de tales proyectos sea más expedito. Este puede definirse como un sentido clave.
Permite a los programadores desentenderse de esos elementos básicos para que
puedan concentrarse en el principal objeto de su interés.
 Contenido 5: ¿ Por qué se necesita un Framework?

1. El código web está organizado desde el primer momento

El orden y control tanto del código como de los archivos es mucho mejor gracias al uso de
los frameworks. Cuando realizas una instalación de framework para lenguaje PHP o
cualquier otro lenguaje, estos ya incorporan una estructura definida.

Es una forma de mantener una cierta organización para encontrar los archivos que
necesites de forma rápida y es muy útil cuando el software empieza a tener años y por él
han pasado muchos desarrolladores diferentes. Al seguir todos las mismas reglas, la
información está más organizada y es más fácil encontrar los archivos.
 Contenido 5: ¿ Por qué se necesita un Framework?

2. No reinventes la rueda
Como hablábamos antes, los framework proporcionan soluciones a la mayoría de
problemáticas comunes del desarrollo de aplicaciones web.
Todos los frameworks existentes, llevan una serie de utilidades para:
• Arquitectura de Desarrollo MVC (Modelo, Vista, Controlador).
• Autenticación de usuarios, niveles de control de acceso, sesiones, cookies…
• Estructura de Directorios y Archivos modulares.
 Contenido 5: ¿ Por qué se necesita un Framework?

3. Arquitectura MVC (Model - View - Controller)

No estamos hablando en chino, aunque lo parezca. El patrón Modelo-Vista-Controlador se
utiliza en aplicaciones PHP por diversas razones:

• Model: se encarga de presentar la estructura de tus datos, normalmente suele hacerse por
interfaces con las mismas bases de datos.

• View: también realiza una representación del contenido de las plantillas que componen una
página web, así como de los datos de salida.

• Controller: controla los request que hace el usuario, se comunica con el Model (base de
datos) y nos muestra la Vista (HTML).
 Contenido 5: ¿ Por qué se necesita un Framework?

4. No tienes que preocuparte por la seguridad, el framework te ayuda

Son muchas las funciones que puedes aplicar en PHP para conseguir controlar la
entrada/salida de datos y proteger así tu web de posibles ‘ataques’. Llevar a cabo este tipo de
acciones de forma manual es posible pero un poco complejo.

Por ello, utilizamos frameworks ya que estas funciones pueden realizarse automáticamente. Por
ejemplo, todas las acciones derivadas de HTML, como pueden ser las de los formularios o los
enlaces, pueden filtrar tanto datos de entrada como de salida de forma automática.
 Contenido 5: ¿ Por qué se necesita un Framework?

5. Respaldo y protección de la comunidad

Todos los frameworks de PHP están organizados por grandes comunidades; es decir, un gran
conjunto de desarrolladores a los cuáles puedes realizar consultas, conseguir su ayuda
mediante foros, listas de correos o plataformas especializadas como GitHub, StackOverflow,
etc.
 Contenido 6: ¿ Qué es Angular?

Angular es un framework de ingeniería de software

de código abierto mantenido por Google, que sirve
para desarrollar aplicaciones web de estilo Single
Page Application (SPA) y Progressive Web App
(PWA). Sirve tanto para versiones móviles como de
escritorio.
 Contenido 6: ¿ Qué es Angular?

Angular tiene un nivel de complejidad de medio a elevado y ofrece soluciones

robustas, escalables y optimizadas para lograr un estilo de codificación homogéneo
y de gran modularidad. Su desarrollo se realiza por medio de TypeScript o
JavaScript. En este último se ofrecen diversas herramientas adicionales al lenguaje
como tipado estático o decoradores. Su nombre «Angular» proviene del concepto de
paréntesis angulares (< >) que se utilizan en HTML.
 Contenido 6: ¿ Qué es Angular?

Angular tiene un nivel de complejidad de medio a elevado y ofrece soluciones

robustas, escalables y optimizadas para lograr un estilo de codificación homogéneo
y de gran modularidad. Su desarrollo se realiza por medio de TypeScript o
JavaScript. En este último se ofrecen diversas herramientas adicionales al lenguaje
como tipado estático o decoradores. Su nombre «Angular» proviene del concepto de
paréntesis angulares (< >) que se utilizan en HTML.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular

1. Uso de DOM regular

Un Document Object Model (DOM) es un documento XML o HTML que tiene una
estructura de árbol en la que cada nodo representa una parte del documento.
Angular hace uso de DOM regular, lo que permite una mejor organización
conforme avanza el desarrollo web.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular

2. Enlace de datos o data binding

El enlace de datos es un proceso con el que los usuarios pueden manipular

elementos de una página web a través de un navegador. Entre sus principales
ventajas es que no requiere secuencias de comandos ni programaciones
complejas, además de que emplea HTML dinámico. También permite una mejora
en la visualización de una página web, sobre todo cuando contiene una gran
cantidad de datos.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular

3. Compatibilidad móvil y de escritorio

Como ya lo mencionamos anteriormente, Angular funciona tanto para el desarrollo

de aplicaciones móviles como de escritorio. Esto también significa que puede
ejecutarse en la mayoría de navegadores web.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular

4. Velocidad y rendimiento

Angular cuenta con código de generación que permite convertir tus plantillas en códigos
altamente optimizados. Esto te ofrece todos los beneficios del código escrito a mano con
la productividad de un marco.

De igual manera, allana el camino para los sitios que optimizan para SEO y sus
aplicaciones angulares se cargan rápidamente. Esto ofrece una división de código
automática para que solo cargues el código que necesitas para representar la vista que
requieres.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular

5. Productividad

Angular permite la creación rápida de vistas de interfaz de usuarios con una sintaxis de
plantilla muy sencilla y eficaz. Además, con sus herramientas de líneas de comandos
puedes comenzar a construir en menor tiempo y agregar componentes, pruebas e
implementaciones al instante.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular
6. Enlace bidireccional de datos

Angular enlaza JavaScript y HTML, y una de sus principales ventajas es que el código de
ambos está sincronizado, lo que ahorra mucho tiempo para los desarrolladores web.

7. Directivas
Los archivos HTML se ven ampliados gracias a directivas habilitadas por los
desarrolladores cuando agregan el prefijo ng- a los atributos HTML. Existen
diferentes tipos de directivas muy útiles que puedes usar para diferentes acciones como
vincular el contenido de un elemento HTML a los datos de aplicación, o especificar que el
contenido de un texto debe reemplazarse con una plantilla.
 Contenido 6: ¿ Qué es Angular?

8 características de Angular

8. Pruebas
Angular hace uso del framework de prueba llamado Jasmine, el cual proporciona
diversas funcionalidades para escribir diferentes tipos de casos de prueba. De igual
manera, el marco admite pruebas unitarias y de integración.
 Contenido 7: Ventajas de AngularJS.

Ahora que ya sabes qué es Angular, es importante mencionar que cuenta con una gran
serie de módulos habituales para el desarrollo de proyectos web, por lo que no es
necesario que empieces desde cero. Esta no es la única ventaja de utilizarlo y te
menciono a continuación más beneficios.

1. Alta calidad de la aplicación

Si bien Angular es una plataforma compleja y difícil de aprender para algunos desarrolladores
web principiantes, esto, a la vez, también representa una enorme ventaja, pues el éxito del
producto está prácticamente asegurado. Puedes crear cualquier cosa que se te ocurra y hacerla
realidad con las funciones integradas del marco de trabajo.
 Contenido 7: Ventajas de AngularJS.

2. Desarrollo multiplataforma

Angular ofrece soluciones de aplicaciones web progresivas angulares que puedes

ejecutar en plataformas móviles, pero el marco puede utilizarse muy bien en
aplicaciones móviles nativas.
 Contenido 7: Ventajas de AngularJS.

3. Proceso de desarrollo web más rápido

Angular te permite crear aplicaciones de forma más rápida y eficiente, pues goza de ventajas
técnicas como las siguientes:
• Documentación detallada. La documentación de Angular está cuidadosamente escrita y
dotada de una gran variedad de ejemplos de código para tener mayor claridad en el proceso
y permitir que los desarrolladores encuentren soluciones rápidas a cualquier problema
conforme crean una aplicación.
• Interfaz de línea de comandos de Angular. La CLI (por sus siglas en inglés) facilita el trabajo
de los desarrolladores al ofrecer un conjunto de herramientas de codificación. Además, esta
línea de comandos puede ampliarse con bibliotecas de terceros para resolver problemas de
software inusuales o muy complicados.
• Enlace de datos bidireccional. Como ya lo mencionamos, Angular cuenta con esta
característica, lo que permite el ahorro de tiempo al automatizar algunos procesos de
generación de código.
• Soporte de Google. Cuando definimos qué es Angular también destacamos que lo mantiene
Google, por lo que puedes estar seguro de que recibirás soporte en tiempo y forma a
cualquier duda o problema que presentes.
 Contenido 7: Ventajas de AngularJS.

4. Aplicaciones web más ligeras

Versiones anteriores de Angular, presentaban problemas en el tamaño de las aplicaciones, lo
que no permitía una carga rápida. Actualmente, se han hecho mejoras en los módulos de carga
diferida y con el renderizador de Ivy, que permite hacer paquetes más pequeños para acelerar
la aplicación.
5. Código legible y comprobable
Podemos resaltar que Angular es un marco de trabajo consistente gracias a sus elementos
estructurales como módulos, componentes, directivas, tuberías y servicios; así como la
posibilidad de escribir aplicaciones con la arquitectura tradicional MVVM (Model-View-
ViewModel) y MVC (Model-View-Controller). Ambas sirven para el mejoramiento de reutilización
de código.
 ¿Qué plataforma de
desarrollo IDE o
Caso o reto a Framework es el mas
resolver adecuado para
implementar su
propuesta de solución? .
 Recurso del caso
Lectura
Estimado estudiante:
Para esta actividad se le solicita que pueda
Video
ayudarte a crear tu primer Proyecto en Angular a
través de la siguiente URL compartida.
Imagen

https://diarioprogramador.com/crear-primera-
aplicacion-en-angular/
 Presentación y
sustentación de equipos
 Ideas clave

1. Angular utiliza el lenguaje TypeScript, que es el superconjunto de JavaScript.

2. Es un Marco web de código abierto.
3. AngularJS tiene un Estructura MVC que hace que las aplicaciones web sean
fáciles y sencillas de crear desde cero.
4. Angular ofrece elementos de diseño de materiales prediseñados, como
elementos de navegación, controles de formulario, tablas de datos, diseños y
ventanas emergentes.
5. Angular ofrece características como el proceso mejorado de manejo de
errores para @Producción en situaciones en las que la propiedad no se
inicializa.
 “La tecnología hace posible lo que
antes era imposible. El diseño hace que
sea real”

“Michael Gagliano”