HTML

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 →