HTML

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 →