CSS

EcoTaskApp: Aplicación Web de Gestión de Tareas Ecológicas con Angular

Introducción La concienciación medioambiental se ha convertido en uno de los principales retos de la sociedad actual. Cada vez más personas desean adoptar hábitos sostenibles, pero en muchas ocasiones carecen de herramientas que les permitan organizar, controlar y realizar un seguimiento de sus acciones ecológicas. Ante esta necesidad surge EcoTaskApp, una aplicación web desarrollada con Angular cuyo objetivo es facilitar la gestión de tareas relacionadas con el cuidado del medioambiente y promover hábitos sostenibles mediante un sistema de seguimiento y recompensas. EcoTaskApp permite a los usuarios registrarse, iniciar sesión, crear tareas ecológicas, clasificarlas…continue reading →

Tracking de Pedidos en Tiempo Real con Angular, ASP.NET Core, SignalR y Azure Cosmos DB

Temas del Master que cubre este proyecto Este proyecto integra contenidos de varias areas del Master en Desarrollo Full Stack + Arquitecturas Cloud: Arquitectura: SPA desacoplada Angular + API REST, diseno de APIs RESTful escalables y versionadas, patron Repository en ASP.NET Core Seguridad: Autenticacion y autorizacion con JWT, gestion de roles y politicas en APIs REST, proteccion CORS Computacion en la nube: Base de datos en Azure (Cosmos DB como equivalente a MongoDB Atlas en la nube) Comunicacion y Tiempo Real: SignalR en ASP.NET Core para aplicaciones en tiempo real, arquitectura orientada a…continue reading →

8+1 Funciones Esenciales de Figma para Diseñar una App

Figma es una de las herramientas más populares para el diseño de interfaces y prototipos interactivos. Esta documentación reúne 8+1 funciones esenciales que debes conocer para diseñar una app de manera eficiente. Desde la creación de proyectos hasta el uso de herramientas avanzadas como Auto Layout y Plugins, este documento junto con el vídeo te guiará paso a paso para sacar el máximo provecho de esta plataforma. 1. Crear un Proyecto Ve a la pestaña principal de Figma. Haz clic en Create New Design File para iniciar un nuevo proyecto. 2. Paneles Principales…continue reading →

ANGULAR+PRIMENG 2023

En este post se va a enseñar como utilizar la librería de componentes PrimeNG. Esta librería ofrece una variedad de componentes como tablas, formularios y menús con un diseño atractivo y una funcionalidad mejorada. Instalar dependencias Primero necesitas ejecutar los comandos de instalación en tu proyecto. A parte de PrimeNG y PrimeIcons (Librería opcional) añadiremos también PrimeFlex que es una librería de estilos css muy parecida a Bootstrap y compatible con PrimeNG, la razón para añadir esta librería es que Bootstrap sobrescribe los estilo de algunos componentes de PrimeNG obligándonos a retocarlos manualmente…continue reading →

Creación de Modales en Vue3 con SweetAlert2

SweetAlert2, es una librería javascript que permite crear ventanas emergentes con un diseño profesional y fácil de personalizar e implementar, es compatible con la mayoría de los navegadores web como: Edge, Chrome, Firefox, Safari, entre otros más. Está pensada para poder utilizarse junto a JavaScript Vanilla. Por lo tanto se puede utilizar para distintos frameworks como React, Vue y Angular, en este post se explicará cómo utilizarla en Vue3. Instalación  Podemos realizarla de dos maneras ambos casos están en la web en el apartado de “Installation” Primer método Mediante el CDN que la…continue reading →

Login Y Registro con AUTH0 en REACT

En este post vamos a enseñar como utilizar AUTH0 un proveedor de autenticación a REACT Lo primero es registrarse en AUTH0 https://www.flickr.com/photos/197088457@N08/52525159594/in/shares-10d138Xtp5/ Elegimos other y pinchamos en el checkbox para cambiar de región nuestra cuenta https://www.flickr.com/photos/197088457@N08/52525159584/in/shares-tSDkT4sSVz/ Elegimos el nombre del dominio que queramos y la regio EU https://www.flickr.com/photos/197088457@N08/52524411962/in/shares-m0PBz7Q821/ Pulsamos en el botón de crear aplicación https://www.flickr.com/photos/197088457@N08/52525159564/in/shares-nYC243pYb0/ Pinchamos en single page applications ya que es para una aplicación de React y pulsamos crear https://www.flickr.com/photos/197088457@N08/52524878616/in/shares-59071Xq863/ Le decimos que es para una aplicación de REACT https://www.flickr.com/photos/197088457@N08/52525431418/in/shares-X38tEks99e/ Pulsamos en el enlace de para conseguir la application keys…continue reading →