Unidad 2

USO DE FRAMEWORKS.

¿Que es un framework?

En desarrollo web un framework  es una plataforma de software que proporciona herramientas predefinidas para desarrollar aplicaciones web de manera más eficiente y organizada. Los frameworks ayudan a los desarrolladores a evitar la repetición de código y a seguir buenas prácticas de programación, lo que resulta en aplicaciones más robustas y mantenibles.

Los frameworks se caracterizan por: 

1. Estructura Predefinida: Una arquitectura básica para la aplicación, incluyendo la organización de archivos y directorios.

2. Bibliotecas y Herramientas: Facilitan tareas comunes como la gestión de bases de datos, la autenticación de usuarios y la validación de formularios.

3. Modularidad: Permite la creación de módulos o componentes reutilizables, lo que facilita la expansión y el mantenimiento del código.

4. Seguridad: Ofrece mecanismos integrados para proteger la aplicación contra amenazas comunes como inyecciones SQL, ataques XSS y CSRF.

5. Compatibilidad: Asegura que la aplicación sea compatible con diferentes navegadores y dispositivos.

Entre las ventajas mas favorables en su uso, son el ahorro de tiempo, calidad del código y la facilidad de creación de aplicaciones escalables y modulares. Para lograr esto, es necesario conocer la curva de aprendizaje de cada framework y conocer en que tipo de proyectos nos seria útil, sin embargo no es obligatorio dominar todos. 

EXPLORACION DE FRAMEWORKS.

En lo que respecta diseño de interfaces. Hemos dominado lo que son los selectores de CSS y el manejo básico del DOM. Esta es una exploración de algunos frameworks para aplicar y reducir el código que se ha practicado en el blog anterior Desarrollo de Paginas Web.

BOOTSTRAP

Bootstrap es un framework de código abierto para el desarrollo de interfaces web, creado por Twitter. Es ampliamente utilizado debido a su facilidad de uso y su capacidad para crear sitios web responsivos y modernos.

Proporciona una estructura básica y componentes predefinidos que permiten a los desarrolladores crear interfaces de usuario atractivas y funcionales.

Plantilla realizada con Bootstrap

Bootstrap primeramente puede ser utilizado tanto por su funcionalidad CSS como JavaScript. Su implementacion esta basada en el uso de clases para aplicar los diseños. Es necesario entender su sistema Grid para el diseño responsivo y aprender cada clase para su respectiva etiqueta HTML.

Visita la pagina de Bootstrap aqui: Bootstrap · The most popular HTML, CSS, and JS library in the world. 

JQUERY.

jQuery esta interpretado en JavaScript

jQuery es una biblioteca de JavaScript que facilita la escritura de código JavaScript al proporcionar una sintaxis más sencilla y concisa. Fue creada por John Resig en 2006 y ha sido ampliamente adoptada debido a su capacidad para simplificar tareas comunes en el desarrollo web.

Características Principales de jQuery

1. Selección de Elementos: jQuery utiliza una sintaxis similar a los selectores de CSS para seleccionar y manipular elementos del DOM.

2. Manipulación del DOM: Permite agregar, eliminar y modificar elementos y atributos del DOM de manera sencilla.

3. Manejo de Eventos: Facilita la asignación de eventos a elementos del DOM, como clics, desplazamientos y cambios.

4. Efectos y Animaciones: Incluye funciones para crear efectos visuales y animaciones, como desvanecimientos, deslizamientos y ocultamientos.

Su máximo requisito es haber comprendido el DOM y la identificación de propiedades CSS.

Frameworks mas utilizados hasta la fecha.

Hasta ahora hemos explorado los frameworks en un enfoque básico, los siguientes frameworks son de enfoques mas experimentados y se requiere únicamente el dominio de JavaScript, pues los estilos están limitado al uso de Bootstrap o la creación de estilos originales con CSS.

REACT

Es conocida como una biblioteca de JavaScript para construir interfaces de usuario, desarrollada por Facebook. React permite a los desarrolladores crear componentes reutilizables que gestionan su propio estado, lo que facilita la construcción de interfaces de usuario complejas y dinámicas. La palabra componente es un termino estandar para frameworks de este calibre.

¿Que son los componentes? Son bloques de construcción reutilizables que encapsulan su propio estado y lógica. Los componentes pueden ser tan simples como un botón o tan complejos como una página completa.

Un componente de React.

En términos muy básicos, los componentes de React son funciones que devuelven un fragmento de HTML. Un fragmento como este puede ser utilizado tantas veces como se desee, en esta imagen para mostrarlo en navegador, se implementa como <CounterInLine/> 

En React se deben seguir reglas estrictas como por ejemplo, nombres de los componentes inician con Mayúsculas, las clases HTML se identifican como 'className', etc.

Si cumples con el requisito mencionado, La curva de aprendizaje de este framework no será tan rígida pero tampoco sencilla.

React es utilizado en muchos proyectos de acuerdo con encuestas laborales, en competencia con Angular JS. Por lo que si decides subir de nivel en el desarrollo, React seria una opcion recomendable. 

ANGULAR JS

Angular es un framework de desarrollo web de código abierto mantenido por Google. Está diseñado para facilitar la creación de aplicaciones web dinámicas y de una sola página (SPA, por sus siglas en inglés). Angular utiliza TypeScript, un superconjunto de JavaScript, y sigue el patrón de diseño MVC (Modelo-Vista-Controlador) para estructurar el código de manera eficiente y escalable.

También se basa en componentes y se extiende con TypeScript con sus características adicionales como tipos estáticos y decoradores, lo que mejora la productividad y la calidad del código.

Teniendo la noción de los componentes, serán mas fáciles de identificar y adaptarse.

VUE

Utilizado para construir interfaces de usuario y aplicaciones de una sola página (SPA). Fue creado por Evan You y se ha convertido en una de las herramientas más populares para el desarrollo web debido a su simplicidad, flexibilidad y rendimiento.

Al igual que las anteriores, Vue se basa en componentes y utiliza un sistema de reactividad que actualiza automáticamente la interfaz de usuario cuando cambian los datos subyacentes, lo que facilita la gestión del estado de la aplicación.

Proporciona directivas como v-bind, v-model y v-for que permiten enlazar datos, manejar eventos y renderizar listas de manera declarativa. Tambien incluye herramientas integradas para aplicar transiciones y animaciones a los elementos del DOM cuando se añaden, actualizan o eliminan.

Su ecosistema robusto incluye herramientas como Vue Router para el manejo de rutas y Vuex para la gestión del estado global de la aplicación.

Vue tiene la capacidad de ser integrado al codigo HTML de una manera simple.

A diferencia de las anteriores, Vue tiene una curva de aprendizaje sencilla, fácil de aprender y utilizar, especialmente para desarrolladores que ya están familiarizados con HTML, CSS y JavaScript. Pues se puede integrar fácilmente en proyectos existentes y se puede utilizar tanto para pequeñas partes de una página como para aplicaciones completas.

La usabilidad de todos los frameworks son todo un debate en terminos de popularidad, sin embargo Vue tambien se a colocado como una opcion recomendable debido a su amplia comunidad de desarrolladores y una amplia documentación, lo que facilita encontrar soluciones y soporte.

VALIDACION DE LOS FORMULARIOS.

La actividad recurrente en el diseño de interfaces esta enfocada en el estilo visual de las paginas informativas, de presentacion, etc, esto incluye tambien a los formularios. 

Un rol importante del diseño de interfaces es la validación de formularios, esto se realiza por medio del manejo del lenguaje JavaScript, los estilos sirven como señas visuales para saber si los campos se rellenaron con información correcta, si son obligatorios, entre otros criterios.

Puedes tomar el siguiente formulario de ejemplo para validar los campos mostrados, puedes cambiar su temática o agregar mas campos a tu gusto, los estilos están a tu imaginación.

CRITERIOS PARA LA VALIDACION DE FORMULARIOS.

Con la intención de realizar pequeños desafíos en la exploración de JavaScript y detalles adicionales en HTML; Se mencionan los siguientes criterios su nivel obligatorio dependen de los campos del formulario.

Campos Requeridos: Los campos obligatorios no estén vacíos.

Ejemplo: Nombre, correo electrónico, contraseña.

Formato de Datos: Verificar que los datos ingresados sigan un formato específico.

Ejemplo: Correos electrónicos deben seguir el formato usuario@dominio.com.

Longitud de los Campos: Que los datos ingresados tengan una longitud mínima y/o máxima.

Ejemplo: Contraseñas deben tener al menos 8 caracteres

Rango de Valores: Los valores numéricos estén dentro de un rango permitido.

Ejemplo: Edad debe estar entre 18 y 99 años.

Coincidencia de Campos: Verificar que dos campos coincidan, como la confirmacion de una contraseña.

Tipo de Datos: Los datos ingresados sean del tipo correcto, Por ejemplo los Números de teléfono deben contener solo dígitos.

Estos son algunos de los criterios para validar en formulario, no obstante esta actividad no debe confundirse con Procesamiento de Datos. Con estos conceptos, finalizamos la Segunda Unidad de Diseño de Interfaces.