Login red social React

Es este tutorial aprendrás a iniciar sesión mediante una red social. En este proyecto utilizaremos la herramienta Firebase que nos facilitará el desarrollo de nuestra aplicación. En su plataforma donde podremos anclar y pedir permisos a la aplicaicón de terceros para poder inciar sesión a partir de las redes sociales. Tutorial Primero abrimos el símbolo de sistema de Windows. Agregamos el comando create-react-app y a continuación creamos el nombre del proyecto. Ej: npx create-react-app tutorialenfirebase A continuación, instalaremos las librerías de Firebase: entramos a la carpeta de nuestro nuevo propyecto :np tutorialenfirebase. yarn…continue reading →

Introducción a Material en Angular

Hola, bienvenidos a este nuevo post donde veremos una breve introducción a Material en Angular. ¿Qué es Material? Es un kit de componentes que nos permite incorporar elementos tales como botones, tablas, paginadores con un diseño, animaciones creados ya predeterminados. A continuación se empezará la explicación desde cero, necesitamos Visual Studio Code y la consola de Windows para poder trabajar. Empecemos! Para crear el proyecto debemos abrir la terminal de Windows e ir hacia la ruta que deseemos para guardar nuestro proyecto, nosotros lo haremos en una carpeta en el escritorio llamada Angular.…continue reading →

Introducción a React

¿Qué es React? React nació como una biblioteca de JavaScript para desarrollar interfaces de usuario. Fue creado y utilizado por Facebook hasta que en 2013 fue lanzado al público. Es un framework para la realización de aplicaciones Front. Utiliza el lenguaje jsx, que es una mezcla entre JavaScript y HTML. Es una Single Page Application (SPA). Esto quiere decir que es una aplicación de una sola página (por defecto index.html) en la que vas dibujando vistas y añadiendo funcionalidades a través de distintos componentes. No existe la navegación como tal, pero se crea…continue reading →

Filtrar contenido con pipe Angular

La tecnología de Pipe sirve para transformar visualmente los datos de nuestra web, en este ejemplo voy a enseñaros como filtrar serie de post en una tabla con un buscador. 1-Vamos a empezar creándonos un proyecto nuevo de angular 2-Creamos un nuevo component y una carpeta con el pipe Con el comando code . abrimos el proyecto en visual code y con ng serve lo iniciamos 3-Vamos a utilizar bootstrap para la apariencia de la web (opcional) //BOOTSTRAP 4 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"…continue reading →

Paginación en Angular

Vamos a aprender de una forma rápida y sencilla a realizar paginaciones en Angular. He creado una pequeña aplicación que muestra todos los empleados de un hospital, pero son demasiados y me gustaría poder paginarlos y que no se vean todos a la vez. https://www.flickr.com/photos/187087725@N06/49698124241/in/dateposted-public/ ¿Cómo se hace eso? Muy simple. Para empezar nos dirigimos a https://www.npmjs.com/package/ngx-pagination. Y como vemos para empezar a usar la paginación en nuestra aplicación tenemos que ejecutar el siguiente comando en el cmd de nuestro proyecto: npm install ngx-pagination --save. Una vez instalado, en el app.module.ts tenemos que…continue reading →

Semantic UI React

Buenas, en este post voy a explicar el uso básico de una herramienta de diseño de paginas web similar a Boostrap pero digamos que con un uso más básico que este. Antes de nada, decir que usaremos Visual Studio Code como intérprete del texto. Semantic UI es una librería de JQuery para la manipulación del DOM en la página y que será usado he interpretado por React.js. ¿Por qué Semantic es algo más simple que Bootstrap en cuanto a diseño?, porque este importa conjuntos de marcas que reciben su propio diseño a través…continue reading →

Enviar Emails en React

¿Se pueden enviar emails de forma nativa? La respuesta es no, React.JS no incluye los paquetes necesarios para poder enviar emails. Aparte de que React es la parte cliente (el navegador Web), por lo que no hay un servidor que esté a la escucha para realizar los envíos. En este post vamos a ver una forma de poder realizar envíos de email usando una aplicación de React como cliente web y usando ciertos paquetes para poder tener un servidor a la escucha, así cuando un usuario mande un formulario desde el cliente web…continue reading →

Qué es XSS y por qué debería de importarte

En este post exploraremos que es la vulneravilidad XSS, los daños que puede causar, las distintas herramientas que  aporta Net Framework para mitigar esta vulnerabilidad y algunos ejemplos reales. ¿Qué es Xss? Cross-Site-Scripting abreviado normalmente como XSS es un tipo de vulnerabilidad web que permite al atacante inyectar código malicioso en el navegador de una víctima. El atacante no tiene como objetivo directo de su ataque al usuario sino aprovecharse de la vulnerabilidad de la aplicación para que esta envíe el código a la víctima usando a la aplicación como cómplice. Las consecuencias…continue reading →

Uso de Section y Layout

Introducción En este post aprenderemos el significado de estos dos conceptos, además de saber cómo aplicarlos a la hora de desarrollar nuestra página web. Contestamos a: ¿Qué es?, ¿Para qué sirve?, ¿Cuándo utilizarlos? Y sobre todo ¿Cómo se utiliza?. Section El concepto “Section” se refiere a la estructura/ organización que aplicaremos a nuestra página web. Para planificarla se deberá utilizar lenguaje HTML con sus atributos y características. Toda página web básica deberá estructurarse de la siguiente manera:  CONSEJO El buen uso de las etiquetas (“Buenas prácticas”, poner cada etiqueta donde corresponda) HTML dará…continue reading →

Creación y manipulación de Azure Tables Storage.

En este tutorial vamos a aprender a crear una cuenta de almacenamiento con Portal de Azure (también podremos usarlo en entorno local con la máquina virtual de Azure) en el cual vamos a crear una tabla y a manejar sus datos (listar, crear, modificar y eliminar). Primeros pasos Con cuenta Azure Primero accedemos al portal de Azure. Una vez hayamos iniciado sesión con nuestra cuenta, en el menú lateral, seleccionaremos “cuentas de almacenamiento”. https://www.flickr.com/photos/156199631@N02/46555411575/in/dateposted-public/ Una vez dentro tendremos que añadir una nueva cuenta de almacenamiento. https://www.flickr.com/photos/156199631@N02/46555411555/in/dateposted-public/ Luego necesitaremos rellenar los datos necesarios y…continue reading →