92H

Después de haber comenzado con ReactJS: Instalar todo lo necesario para empezar e Introducción a ReactJS, vamos a ir un poco más profundo en cómo funcionan los componentes de React.

Cuando creamos un componente e interactuamos con el pasa por un ciclo de vida. Si conocemos que pasa en cada paso podemos aprovechar de hacer modificaciones o reaccionar a ciertos eventos para hacer nuestro componente y aplicación comportarse como queremos.

Vamos a ver 3 ciclos:

  1. Inicialización del componente
  2. Actualización del componente
  3. Destrucción del componente

Y veremos en cada ciclo que métodos son llamados y que propiedades están disponibles.

1. Inicialización del Componente

Esta es la fase inicial donde el componente es creado.

Los métodos y triggers que son llamados durante esta fase son:

  1. getInitialState
  2. getDefaultProps
  3. componentWillMount
  4. render
  5. componentDidMount

getInitialState

Este es llamado sólo una vez antes de que el componente se monte. Regresará el valor inicial de this.state.

getDefaultProps

Solo se invoca una sola vez y es guardado en cache cuando el componente es creado. Los valores serán guardados en this.props.

Como es invocado antes de la creación de cualquier instancia no puede depender en los valores anteriores de this.props.

componentWillMount

Invocado solo una vez justo antes que se llame al render del componente, tanto en el cliente como en servidor, si se coloca un valor de estado (this.state) dentro de este método no provocará una actualización.

render

Este método retorna el componente como tal para su visualización, sino quieres que se muestra nada debes retornar null o false. Es el único método requerido siempre por los componentes.

Esta función debe ser pura, lo que quiere decir que no debe modificar el estado del componente y que regresará el mismo resultado cada vez que se llame. Tampoco debe leer o escribir directamente al DOM o interactuar con el navegador, para este tipo de intereacciones se pueden utilizar otros métodos como por ejemplo componentDidMount().

componentDidMount

También se invoca una sola vez, sólo en el cliente, y es llamado inmediatamente después de la vizualización inicial (realizada por la función render). En este método ya puedes acceder a cualquier referencia de los componentes hijos, el método componentDidMount de los hijos es siempre llamado antes que el de los padres.

En este método puedes integrar otros frameworks de Javascript, colocar timers con setTimeOut o setInterval o hacer llamadas AJAX.

Aquí finaliza la fase de inicialización y el componente debería ya mostrarse en nuestro navegador.

2. Actualización

La fase de actualización pasa o cuando hay nuevos props o cuando cambia el estado.

  1. componentWillRecieveProps (solo cuando hay nuevos props)
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

componentWillRecieveProps

Sólo es llamado cuando un componente está recibiendo nuevos props. Podemos utilizar este método para actualizar el estado (this.state) sabiendo que va a haber un cambio en los props.

Los valores antiguos de los props se pueden acceder con this.props ya que aún no se han actualizado.

Este método recibe como parámetros los valores de los props a actualizar.

Por ejemplo:

componentWillReceiveProps: function(nuevosProps) {
  this.setState({
    votos: nuevosProps.votos > this.props.votos
 });

Nota importante: NO implica que un cambio de estado vaya a generar un cambio en los props.

Este método NO es llamado cuando hay un cambio de estado.

shouldComponentUpdate

Es llamado antes de render cuando son recibidos nuevos props o estados. Este método por defecto retorna true, pero si estamos seguro que la actualización de los props o el estado no requiere que se actualice el componente puedes sobreescrbirlo y retornar false, en cuyo caso no se llamara a método render hasta el próximo cambio y tampoco se llamarán a los métodos componentWillUpdate y componentDidUpdate.

Aquí es donde es importante la inmutabilidad del estado del componente, en este método podemos hacer comparaciones entre los cambios y ver si es necesario actualizar o no. Esto nos permite obtener mejor rendimiento y menos uso de nuestros recursos.

Por ejemplo podemos verificar si no hubo cambios en nuestro props y si es así no actualizar.

shouldComponentUpdate: function(nuevosProps, nuevoEstado) {
  return nuevosProps.id !== this.props.id;
}

También como se muestra tenemos acceso al nuevoEstado, por lo que podemos hacer otras comparaciones y ver si es necesario actualizar o no.

Este método no se llama en la inicialización.

componentWillUpdate

Se llama justo antes de llamar a render(), cuando se reciben los nuevos props o estados. Aquí podemos hacer preparaciones antes de que ocurra la actualización.

Es importante saber que NO podemos utilizar this.setState() en este método, si necesitamos cambiar el estado debido a un cambio en los props debemos usar el método componentWillReceiveProps que vimos anteriormente.

Ejemplo:

componentWillUpdate: function(nuevosProps, nuevoEstado) {
  ...
}

Este método no se llama en la inicialización.

render

Es igual al que vimos en la fase de inicialización y es donde se crea el componente como tal.

componentDidUpdate

Se llama justo después de render después que todos los cambios han sido hechos en el DOM. Puedes utilizar este componente para hacer alguna operación el DOM después que el componente se haya actualizado.

componentDidUpdate: function(anteriorProps, anteriorEstado) {
  ...
}

3. Destrucción

Esta es la última fase y es cuando el componente se destruye y consiste en un sólo método.

componentWillUnmount

Es llamado justo antes de que el componente sea removido del DOM, es útil para hacer cualquier operación de limpieza, tales como invalidar timers, eliminar elementos que se hayan creados durante componentDidMount y cualquier otra operación pendiente.

Conclusión

Siempre es importante conocer por cuales ciclos de vida pasa cualquier elemento de nuestra aplicación, muchas veces tratamos de realizar operaciones donde no corresponde, o queremos evitar que pasen ciertos eventos cuando se cumplen ciertos valores, o queremos acceder a datos antes de que se muestren y todo lo podemos hacer con los métodos que vimos.

También te pueden interesar ReactJS: Instalar todo lo necesario para empezar e Introducción a ReactJS.

Como siempre si tienen cualquier duda o sugerencia siempre son bienvenidos los comentarios.

 

 

reactjs

En el artículo anterior Introducción a ReactJS vimos como que es React y un par de pequeños ejemplos de como crear un componente, en este artículo instalaremos todo lo necesario para correr React en nuestra computadora.

Instalar Node

Lo primero que tenemos que tener instalado es Node, preferiblemente en su última versión.

Mac OS X o Linux (Recomendada)

Si tienes cualquiera de estos dos sistemas operativos recomiendo instalar node con NVM, este es un manejador de versiones de node que permite cambiar de versiones cuando lo necesites y mantener actualizado node a su última versión de forma sencilla.

Nota: Para linux necesitas tener instalado build-essentials y libssl-dev.

Los pasos para instalarlo son:

1- Ejecutar en el terminal:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

2- Para instalar la última versión de node ejecutamos:

nvm install node

Para más información ve a la página de NVM.

Mac OS X (Alternativo)

Tienes dos opciones ir a la página de Node descargar el instalador y ejecutarlo o instalarlo con brew ejecutando:

brew update
 brew install node

Con cualquiera de los dos métodos debería quedar instalado node y npm.

Si ya lo tenías instalado lo puedes actualizar con:

brew update node

Linux (Alternativo)

Puedes instalar node en Linux usando cualquier instalador de paquetes de tu distribución por ejemplo para Debian y Ubuntu ejecutando:

sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install nodejs npm

También puedes descargar el instalador desde la página de Node

MS Windows

Descarga el instalador desde la página de Node

Instalar Webpack

Hay dos librerías que se utilizan con React para crear el bundle de nuestra aplicación, hacer live reload y mucho más una es browserify y la otra es Webpack, yo prefiero Webpack y por eso indico como se instala aquí, si prefieres browserify instala ese.

Para instalar Webpack simplemente ejecutamos:

npm install webpack -g

También necesitaremos el Webpack-dev-server para instalarlo ejecutamos:

npm install webpack-dev-server -g

Esto instalará el paquete de webpack y webpack-dev-server de manera global.

Instalar Babel

En nuestros ejemplos vamos a estar utilizando ES6 (o ES2015 como prefieras llamarlo) y para esto necesitamos Babel que “transpila” o transforma el código ES6 a la versión anterior para que sea entendido por todos los navegadores, sin tener que preocuparnos de nada.

Para instalarlo ejecuta:

npm install babel -g

Empezando un proyecto

Listo esas son las herramientas que necesitamos ahora veremos con configurar un proyecto de ejemplo con estas herramientas.

En este ejemplo vamos a hacer un simple botón que al presionarlo nos muestre un número aleatorio.

Creamos un directorio que yo voy a llamar react-configuracion

mkdir react-configuracion

cd react-configuracion

Una vez dentro del directorio ejecutamos:

npm init

Presionamos Enter para seleccionar todas las opciones por defecto, después lo podremos cambiar en el archivo package.js.

Esto inicializará nuestro proyecto con un archivo package.js.

Ahora tenemos que instalar react y react-dom ejecutando:

npm install react react-dom --save

Eso lo instalará y lo guardará en nuestras dependencias.

Para que no tengamos errores en la instalación debemos declarar webpack y webpack-dev-server en nuestras dependencias para eso ejecutamos:

npm install webpack webpack-dev-server --save-dev

Ahora instalaremos algunos preset de Babel:

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

Nota: Recuerda que debes tener instalado babel, webpack y webpack-dev-server como lo indicamos en los pasos anteriores.

Ahora vamos a empezar a crear nuestra aplicación.

Primero creamos un archivo llamado webpack.config.js en tu editor favorito, este archivo es donde indicaremos como se compilará nuestro proyecto y donde se hará la transformación de JSX a Javascript, en este archivo colocamos lo siguiente:

module.exports = {
 entry: './main.js', //cual es la entrada de nuestra aplicacion
 output: {
   path: './', //donde colocará los archivos al terminar
   filename: 'index.js' //el nombre de nuestro bundle
 },
 devServer: { // opciones para el servidor de desarrollo
   inline: true, // para que se recargue automáticamente cuando cambie un archivo
   port: 3333 // puerto donde funcionará el servidor
 },
 module: {
   loaders: [
     {
       test: /\.js$/, //probamos por la extensión .js
       exclude: /node_modules/, //no queremos procesar los archivos en node_modules
       loader: 'babel', //utilizamos babel
       query: { //cargamos los presets que instalamos
         presets: ['es2015', 'react']
       }
     }
   ]
 }
};

Todo está comentado en el archivo para que lo puedan entender mejor.

Ahora creamos un archivo llamado index.html con el siguiente contenido:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Número Aleatorio</title>
</head>
<body>
 <div id="app"></div>
 <script src="index.js"></script>
</body>
</html>

Un HTML estandar donde agregamos un div con id #app que será nuestro elemento target para la aplicación e incluimos el index.js que es el bundle que crea Webpack como lo indicamos anteriormente.

Creamos un archivo llamado App.js donde crearemos nuestro primer componente, colocamos el siguiente contenido:

import React from 'react';
const App = React.createClass({
 getInitialState() {
   return { num: Math.ceil(Math.random() * 6) };
 },
 getNumeroAleatorio() {
   this.setState({num:Math.ceil(Math.random() * 6)});
 },
 render() {
   return (
     <div>
       <p>{this.state.num}</p>
       <button onClick={this.getNumeroAleatorio}>Lanzar</button>
     </div>
   )
 }
});

export default App;

Simplemente estamos creando un componente con JSX, con un estado inicial de un número aleatorio, una función que coloca el estado de num en un número aleatorio, el componente como tal que consiste en mostrar el número y un botón para actualizarlo que llama la función getNumeroAleatorio. Finalmente exportamos la clase. Puedes ver más de los componentes en el primer artículo de Introducción a ReactJS.

Luego creamos el archivo main.js donde mostraremos nuestro componente, en este archivo colocamos lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Aquí importamos la librerías necesarias y nuestro componente que acabamos de crear, luego indicamos con ReactDOM.render() que muestre nuestro componente App (primer argumento), y que lo asocie con el div con id app que creamos en nuestro index.html.

Por último modificamos nuestro archivo package.js, eliminamos la linea que dice test dentro de scripts y agregamos una nueva linea de start donde llamamos a webpack-dev-server.

{
 "name": "react-configuracion",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "start": "webpack-dev-server"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "react": "^0.14.7",
   "react-dom": "^0.14.7"
 },
 "devDependencies": {
   "babel-core": "^6.4.5",
   "babel-loader": "^6.2.2",
   "babel-preset-es2015": "^6.3.13",
   "babel-preset-react": "^6.3.13",
   "webpack": "^1.12.13",
   "webpack-dev-server": "^1.14.1"
 }
}

El cambio ocurre en la línea 7,  “start”: “webpack-dev-server”.

Guardamos todos los archivos y en nuestra terminal dentro del directorio del proyecto ejecutamos:

npm start

Nuestro servidor correrá en el puerto 3333 como lo indicamos en el archivo de webpack.config.js.

Abrimos nuestro navegador en:

http://localhost:3333

y deberíamos ver algo como:

Componente ReactJS

Si hacemos click en el botón nos debería mostrar un número aleatorio del 1 al 6.

Si cambiamos algo nuestro servidor debería recargar automáticamente, puedes probar cambiado la palabra lanzar en el botón en App.js por otra cosa y deberías verlo en el navegador sin necesidad de hacer click en botón de recargar.

Eso es todo por ahora, tenemos una base para nuestros futuros proyectos.

Cualquier duda o sugerencia puedes dejar un comentario.

Durante el último año se ha hablado mucho acerca de ReactJS, ha generado una gran cantidad de artículos, posts, discusiones, comentarios tanto negativos como positivos. Y muchos aún se preguntarán por que tanta discusión al respecto, y es que ReactJS viene a cambiar mucho de lo que se consideran “mejores prácticas” y la forma en que se hacen las cosas, y como todo cambio puede producir rechazo.

Cada vez es mayor la adopción de ReactJS en el mundo del desarrollo web y móvil (con react native), no sólo es usada por Facebook, Instagram y Whatsapp sino por compañías como Airbnb, Asana, Uber, Periscope, Khan Academy, Reddit, entre muchas otras.

Si quieres saltar la teoría y ver el código haz click aquí

¿Qué es React?

Antes que nada hay que definir que es ReactJS, es simplemente una librería de Javascript para crear interfaces de usuarios, es decir sería la V del MVC, o lo que mostramos al usuario, no más ni menos que eso.

Es una librería creada y hecha open source por Facebook y la hicieron para resolver los problemas que se les presentaban al hacer una aplicación tan grande como lo es Facebook y poder facilitar la creación de componentes interactivos, reusables y actualizables.

Los principios en los que React se basa son los siguientes:

Simple
Si le indicas a React como se debe ver tu aplicación en un momento determinado, React se encargará de actualizar tu Interfaz cuando los datos cambien, lo que ahorra mucho trabajo y esfuerzo a la hora de optimizar y mejorar tu aplicación.

Declarativo
Cuando los datos cambian, React actualiza tu Interfaz y sólo actualiza las partes que deben ser cambiadas. En la programación declarativa tu le dices al programa como quieres que se vea o que haga cuando tiene ciertos estados y el programa resuelve como hacerlo, esto es distinto a la programación imperativa tu le dices al programa como hacer las cosas.

Componentes Reusables
React se basa en construir componentes, cada componentes es totalmente encapsulado por lo que es fácil reutilizarlos y probarlos. Además puedes colocar varios componentes juntos, o uno dentro de otros.

Imagina un típico post de blog como este donde tienes el contenido, una sección de comentarios, la lista de comentarios, cada uno de estos elementos puede ser un componente e inclusive tener subcomponentes por ejemplo las estrellas de rating de los comentarios.

Todo en React se trata de los componentes.

Virtual DOM

El Virtual DOM es exactamente lo que dice el nombre un DOM (esctructura de las páginas HTML) virtual, se puede pensar como una capa de abstracción. Esto tiene varios beneficios entre ellos que se pueda “mostrar” o hacer render de la página mucho más eficiente, además como es una capa de abstracción puedes cambiar el Virtual DOM por casi cualquier cosa como por ejemplo Node en el servidor y tener SSR (Server Side Rendering), o por una implementación de componentes nativos móviles (como se hace con React Native).

Dale 5 minutos
Basado en este artículo, darle 5 minutos se refiere a que al principio React parece que va en contra de todo lo que sabes, cambia mucho de los paradigmas y “mejores prácticas” que conocemos, pero todo es cuestion de darle un poco de tiempo y acostumbrarse después empezarás a entenderlo mejor y ver los beneficios. Creeme era el primero que salió corriendo al ver HTML, CSS y JS mezclado en un solo archivo.

JSX

Aunque React se puede escribir en Javascript puro, es recomendado y se ha convertido la norma escribir los componentes en JSX.

JSX te permite crear objetos de Javascript usando sintaxis de HTML. Por ejemplo para hacer un link en React en Javascript puro sería algo como:

React.createElement(‘a’, {href: ‘https://facebook.github.io/react/’}, ‘Hola!’)

Con JSX se transforma en:

<a href=”https://facebook.github.io/react/”>Hola!</a>

Los archivos JSX tienen extensión .jsx en vez de .js, como estamos acostumbrados y tienen varias peculiaridades que veremos en los ejemplos.

El archivo JSX al final es transformado automáticamente en Javascript, y creanme que aunque al principio cuesta entenderlo hace la vida más fácil para escribir los componentes de React.

Más información y opiniones de JSX la pueden encontrar aqui y aquí.

Bueno ya basta de hablar de teoría pasemos a un poco de código para entender como se ve React.

Dirección de los Datos

Esto también es muy importante en React, la dirección de los datos es un sólo sentido, viaja a traves de state y props al componente, por lo que cuando tenemos varios componentes usualmente tenemos un componente padre que maneja el estado y le pasa a los hijos datos a través de los props.

Supongamos nuevamente el ejemplo de los comentarios, tenemos dos componentes un componente padre que representa la lista de los comentarios y luego cada comentario es un componente, posiblemente en el componente padre tendremos la candidad de comentarios además de la lista de los comentarios, pero al comentario hijo solo le interesaría el texto y autor de un comentario individual por lo que eso se lo pasaríamos de padre a hijo a través de props.

Además imaginemos que tenemos una función de ordenar en el padre donde se pueden ordenar los cometarios por fecha, el único que manejaría el estado del orden sería el padre los hijos no tienen porque saber nada acerca del orden. Esta separación permite hacer componentes muy específicos, fácil de probar y de manejar, a diferencia de tener cientos de lineas de código difíciles de entender.

Empezando con un simple Componente

Como esto es una introducción vamos a utilizar jsFiddle para ver los ejemplos, en futuros artículos veremos como configurar React en nuestro computador.

Vamos a crear un componente muy sencillo el típico Hola Mundo

const Hola = React.createClass({
  render() {
    return <div>Hola {this.props.nombre}</div>;
  }
});

React.render(<Hola nombre="Mundo" />, document.body);

Así es como se ve un componente (muy simple) en React.

Primero declaramos el Componente Hola a través de React.createClass, dentro de esta función tenemos render que es el que crea el componente como tal.

Aquí estamos utilizando JSX, como ven usamos una sintaxis muy parecida a HTML con el <div>.

Luego tenemos un atributo los {…} indican que React tiene que cambiar esto por el atributo que le estamos pasando en este caso this.props.name. Los Props son una de las forma que tiene React para pasar atributos o datos a los componentes y lo accedemos en el componente a través de this.props.

Por último llamamos a React.render el cual toma dos argumentos:

  1. El nombre del componente, en este caso le pasamos el componente con el prop ‘nombre’ definido como “Mundo”.
  2. Donde se debe mostrar o montar el componente, en este caso lo hacemos directamente en el body.

En jsFiddle puedes probar cambiando el nombre a otra cosa o cambiando el div por un H1, por ejemplo.

Un Componente con Estado

Todo componente en React tiene un objeto state y un objeto props. En el ejemplo anterior vimos como utilizar los props a través de this.props, el Estado (State) es lo que nos va a permitir la intereactividad de nuestro componente.

Los estados se manejan a través de los siguientes mecanismos:

  • setState, para colocar el valor de un estado
  • this.state, para acceder a los valores de los estados
  • getInitialState, es un método para colocar el estado inicial que queremos que esté nuestro componente.

Otra característica de nuestros componentes son los Eventos, los eventos están asociados a nuestros componentes como propiedades y pueden disparar métodos, por ejemplo cuando presionamos un botón, hacemos scroll, entre otros.

Vamos a hacer un ejemplo de un componente que es un contador que se incrementa cada vez que hacemos click sobre un botón.

 

const Contador = React.createClass({
  getInitialState() {
    return {
      contador: 0
    }
  },
  incrementarContador() {
    this.setState({
      contador: this.state.contador + 1
    });
  },
  render() {
    return (
      <div className="mi-componente">
        <h1>Contador: {this.state.contador}</h1>
        <button type="button" onClick={this.incrementarContador}>Incrementar</button>
      </div>
    );
  }
});

React.render(<Contador/>, document.body);

Los pasos a seguir serían:

  1. Crear un componente Contador con React.createClass.
  2. Colocamos un estado inicial del contador a 0 con getInitialState.
  3. Creamos un método incrementarContador() que aumenta el contador en 1 cada vez que lo llamamos.
  4. Llamamos a render() que se encarga de mostrar nuestro componente, aquí tomamos el valor del contador con this.state.contador y llamamos el método con onClick dentro del botón.
  5. Por último llamamos a React.render para mostrar nuestro componente.

Ahora cada vez que hacemos click sobre el botón el contador se incrementa en 1.

Puedes modificarlo en jsFiddle aquí http://jsfiddle.net/n5yx2bpy/1/

Conclusión

React es una librería que nos sirve para manejar nuestra interfaz de usuario a través de componentes, aunque es un cambio en la forma de pensar de construir aplicaciones, también tiene una serie de ventajas que nos ayuda a tener aplicaciones más fáciles de manejar, que se pueden probar fácilmente y escalables.

Dicho esto React no es para todo tipo de aplicaciones, si tienes una aplicación muy pequeña o estás haciendo sólo un prototipo, React puede ser demasiado. Lo bueno de React es que no tienes que cambiar toda tu aplicación de una vez, puedes ir cambiando pequeños elementos por componentes poco a poco y donde más lo necesites, así lo hizo Facebook con muchas de sus aplicaciones.

Ahora queda mucho por aprender y por avanzar, React está actualmente por la versión 0.14.7 al momento de escribir este artículo, fue puesta como código abierto en 2013 y especialmente en 2015 fue cuando comenzar a ganar mucha más atención. Todo el tiempo están saliendo nuevas mejoras y funcionalidades.

En próximos artículos veremos más en profundidad como usar React y haremos una pequeña aplicación.

Por ahora si quieres aprender más de React te recomiendo ver la página principal de React https://facebook.github.io/react/index.html y hacer el tutorial.

Si quieres ver ejemplos de componentes puedes visitar https://js.coach/

Si tienes alguna duda o sugerencia puedes dejar un comentario.

 

 

 

Este es un tutorial muy corto de  como cambiar la imagen de fondo aleatoriamente de un div o cualquier elemento con JQuery.

Suponiendo que tenemos una estructura de directorio como esta:

-misitio
  --imagenes
      imagen1.jpg
      imagen2.jpg
      ...
  estilos.css
  index.html

Y que nuestro index.html es algo como:

<html>
<body>
<div id="fondo"></fondo>
</body>
</html>

Y queremos cambiar aleatoriamente la imagen del div con id fondo seguimos los siguientes pasos.

En estilos.css deberíamos una propiedad como esta con la imagen que queramos en caso de que JQuery falle por alguna razón:

#fondo {
   background: url('imagenes/imagen1.jpg');
}

El código de jQuery para hacer el cambio aleatorio es el siguiente:

<script type="text/javascript">
$(function() {
  var imagenes = ['imagen1.jpg', 'imagen2.jpg', 'imagen3.jpg', 'imagen4.jpg', 'imagen5.jpg'];
  $('#fondo').css({'background-image': 'url(imagenes/' + imagenes[Math.floor(Math.random() * imagenes.length)] + ')'});
});
</script>

Vamos a explicar estas dos líneas de código:

1. En la primera línea tenemos un arreglo (array) con los nombres de las imágenes que queremos ir rotando.

2. En la segunda línea cambiamos la propiedad de background-image de #fondo a una de las imágenes que tenemos en el arreglo. Usamos dos funciones matemáticas de JavaScript Math.floor que redondea un número flotante hacia abajo al entero más cercano, por ejemplo 4.3 lo redondea a 4, y Math.random que nos da un número aleatorio, lo multiplicamos por la longitud de imagenes para que nos dé un número que esté dentro de ese arreglo.

Listo eso es todo con esto irá cambiando la imágen de fondo cada vez que regarguemos la página.

Espero que les sirva este tutorial, cualquier duda o sugerencia por favor dejen un comentario.

En este tutorial vamos a ver como instalar y configurar un servidor LEMP para Ubuntu, aunque en este caso estoy utilizando la versión de Ubuntu 14.04, este tutorial sirve para cualquier versión de Ubuntu desde la 12.04.

Si quieres saber como instalar un Servidor LAMP en Ubuntu con Apache puedes ver este tutorial.

Un servidor LEMP se refiere a un conjunto de aplicaciones que por sus siglas es Linux+(Engine X)nginx+MySQL+PHP y en este caso vamos a instalar y configurar un servidor con los siguientes componentes:

nginx – Servidor Web muy versatil y rápido, muy utilizado y un buen sustituto para Apache. Se suele pronunciar Engine X por eso la E de LEMP.

MySQL 5 – Uno de los servidores de base de datos más populares y utilizados en sitios y aplicaciones web

PHP 5 – Es un lenguaje interpretado utilizado para construir aplicaciones y páginas web

Concepto: Un servidor no es más que un PC que presta algún servicio (como mostrar páginas web).

Pasos previos:

 

  • Obtener e Instalar Ubuntu: lo pueden obtener desde la página Oficial de Ubuntu, si el servidor Web LEMP sólo lo van a utilizar como servidor les aconsejo descargar la versión de servidor. Igualmente se puede hacer la instalación sobre la versión de Escritorio de Ubuntu.
  • El servidor debe tener al menos 256 MB de memoria RAM, si no saben cuanta memoria tiene su PC simplemente ejecuten free -m en el terminal si donde dice total es mayor a 256 están bien. Yo personalmente recomiendo tener al menos 512 MB de memoria RAM
  • También pueden probar instalando el servidor en una máquina virtual ya sea con virtualbox, vmware, kvm o el manejador de máquinas virtuales de su preferencia.
  • Si van a hacer la administración del servidor LEMP de manera remota les aconsejo instalar openssh-server (sudo aptitude install openssh-server).

Les aconsejo también seguir el tutorial paso a paso, he tratado de hacer los pasos lo más concretos y cortos posibles, para que así no se pierdan de nada y tampoco les aburra el tutorial.

Bueno ya tenemos todo listo para empezar así que abran un Terminal y pongámonos a trabajar.

1. Actualizar nuestro sistema

Es siempre aconsejable realizar la actualización de nuestro sistema antes de llevar a cabo cualquier instalación simplemente ejecuten lo siguiente en el terminal

sudo apt-get update && sudo apt-get upgrade

Con este comando se actualiza nuestra lista de repositorios y los paquetes que tengamos instalados si hay alguna actualización disponible. Si les hace cualquier pregunta acerca de actualizar algún paquete pueden contestar que sí.

2. Instalar NGINX

La forma más fácil de instalar nginx es ejecutar el siguiente comando:

sudo apt-get install nginx

Cuando pregunte si quieres continuar simplemente responde Y y enter y espera que finalice la instalación.

Para probar que la instalación se hizo correctamente en tu navegador ve a http://localhost  o http://tudireccionIP y deberías ver un mensaje como este:

nginx

3. Instalar MySQL

MySQL es una de las base de datos open source más popular y utilizadas en innumerables páginas web y aplicaciones tanto gratuitas como comerciales. Es una base de datos bastante robusta y flexible, fácil de configurar y lo bastante rápida para la mayoría de las aplicaciones comunes.

Para instalar el servidor de MySQL debemos ejecutar el siguiente comando:

sudo apt-get install mysql-server

Esto instalará todos los paquetes y librerias necesarios para que funcione el servidor MySQL

Durante la instalación les aparecerá la siguiente pantalla solicitando la clave de root para el servidor MySQL, aquí deberán colocar una clave para el administrador de la base de datos, no es recomendable colocar la misma clave del usuario de Ubuntu, se recomienda también que tenga una longitud mayor a 8 caracteres y que mezclen letras, símbolos y números, no son permitidos los espacios en blanco.

Nota: No confundir esto con el usuario root de Linux, este es el usuario root de MySQL

Para comprobar el funcionamiento del servidor MySQL ejecuten el siguiente comando:

mysql -u root -p

Deberá pedirles la clave que colocaron en el paso anterior y aparecerles el prompt  mysql> algo parecido a esto:

vensign@lemp-vensign:~$ mysql -u root -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 40
Server version: 5.1.37-1ubuntu5 (Ubuntu)

Type 'help;' or 'h' for help. Type 'c' to clear the current input statement.

Vemos que nos muestra la versión del MySQL que acabamos de instalar. Para salir del prompt de mysql y volver al terminal de Linux simplemente escriban exit y presionen Enter o Intro.

Los comandos para administrar MySQL son:

Función Comando Comando Corto
Iniciar MySQL sudo /etc/init.d/mysql start sudo service mysql start
Detener MySQL sudo /etc/init.d/mysql stop sudo service mysql stop
Reiniciar MySQL sudo /etc/init.d/mysql restart sudo service mysql restart
Estatus MySQL sudo /etc/init.d/mysql status sudo service mysql status

 

El archivo de configuración de mysql se encuentra en /etc/mysql/my.cnf

4. Haciendo Seguro MySQL

Si vamos a utilizar nuestro servidor para producción queremos que sea lo más seguro posible, en el caso de MySQL nos proporciona un script que podemos ejecutar para realizar algunas configuraciones de seguridad.

Para esto ejecutamos el siguiente comando:

sudo mysql_secure_installation

Primero nos preguntará la contraseña de root de MySQL que establecimos en el paso anterior.

Luego nos preguntará si queremos cambiar nuestra contraseña de usuario root de MySQL si estás contento con tu contraseña puedes decir que N a este paso.

Luego nos hará una serie de preguntas a las cuales lo más fácil y seguro es responder que Si a todas. Coloco un comentario sobre cada pregunta para explicar un poco de que trata.

By default, a MySQL installation has an anonymous user, allowing anyone
to log into MySQL without having to have a user account created for
them.  This is intended only for testing, and to make the installation
go a bit smoother.  You should remove them before moving into a
production environment.

// Quitar cualquier usuario anónimo
Remove anonymous users? [Y/n] y                                            
 ... Success!

Normally, root should only be allowed to connect from 'localhost'.  This
ensures that someone cannot guess at the root password from the network.

// Que el usuario root de MySQL no se pueda loguear remotamente
Disallow root login remotely? [Y/n] y
... Success!

By default, MySQL comes with a database named 'test' that anyone can
access.  This is also intended only for testing, and should be removed
before moving into a production environment.

// Quitar la base de datos test que crea por defecto MySQL
Remove test database and access to it? [Y/n] y
 - Dropping test database...
 ... Success!
 - Removing privileges on test database...
 ... Success!

Reloading the privilege tables will ensure that all changes made so far
will take effect immediately.

// Recargar los privilegios para que hagan efecto los cambios.
Reload privilege tables now? [Y/n] y
 ... Success!

Cleaning up...

Con esto tendremos un MySQL un poco más seguro.

5. Instalar PHP

PHP es un lenguaje interpretado que es utilizado para crear páginas web dinámicas y aplicaciones, de una manera rápida y flexible. Entre las plataformas que utilizan PHP está WordPress, Drupal y Joomla.

Para instalar PHP 5 junto con el soporte para MySQL ejecutamos el siguiente comando en el terminal:

sudo apt-get install php5-fpm php5-mysql

Igual que en los pasos anteriores responde S cuando te pregunte que quieres instalar los paquetes.

Nota: Como vemos instalamos la versión FPM de PHP ((PHP5 FastCGI Process Manager), esta es la versión ideal para utilizar con nginx.

Los comandos para administrar PHP son:

Función Comando Comando Corto
Iniciar PHP sudo /etc/init.d/php5-fpm start sudo service php5-fpm start
Detener PHP sudo /etc/init.d/php5-fpm stop sudo service php5-fpm stop
Reiniciar PHP sudo /etc/init.d/php5-fpm restart sudo service php5-fpm restart
Estatus PHP sudo /etc/init.d/php5-fpm status sudo service php5-fpm status

6. Configurar NGINX y PHP para que funcionen juntos

Ahora que tenemos todos los componentes instalados nos falta configurar PHP y NGINX para que trabajen juntos para estos hacemos los siguientes pasos:

Primero editamos el archivo de configuración de PHP-FPM que está ubicado en /etc/php5/fpm/php.ini. Abrélo con tu editor de texto favorito, en este caso yo voy a utilizar nano:

sudo nano /etc/php5/fpm/php.ini

Y cambiamos la línea cgi.fix_pathinfo=1 por, si el parámetro tiene un ( ; ) adelante lo eliminamos ya que quiere decir que está comentado :

cgi.fix_pathinfo=0

Nota: Si este parámetro lo dejamos en 1, el intérprete de php hará todo lo posible para procesar el archivo más cercano al archivo solicitado, lo que es un riesgo de seguridad. Colocando el parámetro a 0 sólo se procesará el archivo solicitado.

Guardamos el archivo y reiniciamos PHP ejecutando:

sudo service php5-fpm restart

Ahora vamos a modificar el archivo de configuración del sitio por defecto de nginx que es el que vamos a utilizar y que está ubicado en /etc/nginx/sites-available/default, una vez más utilizando nano:

sudo nano /etc/nginx/sites-available/default

Debemos descomentar las líneas que comienzan con # que se indican a continuación para que el archivo quede de la siguiente forma:

 location ~ \.php$ {
         fastcgi_split_path_info ^(.+\.php)(/.+)$;
 #       # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
 #
 #       # With php5-cgi alone:
 #        fastcgi_pass 127.0.0.1:9000;
 #       # With php5-fpm:
         fastcgi_pass unix:/var/run/php5-fpm.sock;
         fastcgi_index index.php;
         include fastcgi_params;
 }

Guarda el archivo y reiniciamos nginx ejecutando:

sudo service nginx restart

7. Verificando que todo funciona

Por último debemos verificar que todo funciona y que nuestra configuración está correcta.

En Ubuntu el directorio por defecto donde estarán nuestros archivos para el sitio es /usr/share/nginx/html. Por lo que crearemos un archivo ahí que llamaremos prueba.php, creamos el archivo ejecutando:

sudo nano /usr/share/nginx/html/prueba.php

Y dentro de ese archivo escribimos la siguiente línea:

<?php phpinfo(); ?>

Ahora abrimos en nuestro navegador http://localhost/prueba.php o http://tudireccionip/prueba.php

Y nos debería aparecer algo como:

php-nginx

Si no te aparece esto o produce algún error entonces verifica tu configuración o deja un comentario y veré como puedo ayudarte.

Eso es todo ya tenemos un servidor LEMP funcionando, no olvides borrar el archivo de prueba.php una vez que hayas terminado de probar el servidor, ya que este archivo da mucha información de tu servidor que no queremos que sea pública.

Cualquier duda o sugerencia por favor deja un comentario y si te gustó este artículo puedes suscribirte al blog dejando tu dirección de correo en la barra de la izquierda y recibirás un correo semanal con los últimos artículos que tenemos.

La última vulnerabilidad que ha aparecido en SSL es POODLE un acrónimo para Padding Oracle On Downgraded Legacy Encryption (CVE-2014-3556) que fue nombrada por los investigadores de google que la descubrieron Bodo Möller, Thai Duong, y Krzysztof Kotowicz.

POODLE es una falla en como los navegadores manejan el cifrado, el atacante negocia el cifrado hasta llegar a SSL 3.0, un protocolo viejo y que ha sido abandonado hace mucho pero que aún es soportado, al conseguir esto permite al atacante decifrar información, incluyendo las cookies secretas de sesión, lo que permite hacerse pasar por el usuario.

Esto solo afecta a sitios que usan conexiones seguras con certificados SSL, para verificar si tu sitio es vulnerable puedes ir a este sitio y correr el test:

http://poodlebleed.com/

Para corregir esto en Apache necesitas hacer los siguientes pasos:

1. Actualizar openssl a su última versión

2. Colocar esto en el archivo de configuración de apache para deshabilitar SSL v2 y v3:

SSLProtocol all -SSLv2  -SSLv3

3. Reiniciar tu servidor apache.

Eso es todo después de estos pasos vuelve a correr el test para asegurarte que tu sitio no es vulnerable.

Actualización:

Si además de evitar la vulnerabilidad quieres hacer SSL más seguro en Apache agrega estás otras líneas a tu configuración de Apache:

SSLCipherSuite AES256+EECDH:AES256+EDH
SSLCompression off
SSLHonorCipherOrder On
SSLUseStapling on
SSLStaplingCache "shmcb:/var/run/ocsp(1500000)"
Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains"
Header always set X-Frame-Options DENY
Header always set X-Content-Type-Options nosniff

Casi todas requieren Apache >= 2.4 y el módulo de headers activado.

Aquí nos aseguramos de utilizar cifradores seguros, activamos StaplingCache (puedes aparender más aquí) y además nos aseguramos que el navegador siempre utilice HTTPS no importa qué.

Y esta es una gran herramienta para verificar la seguridad y configuración de nuestro SSL:

https://www.ssllabs.com/ssltest/index.html

Espero que les sirva.

Normalmente cuando creamos un WP_Query en WordPress lo podemos ordenar por algún campo del post por ejemplo por el título o por la fecha de publicación pero que pasa cuando hemos creado un valor meta y queremos ordenarlo por ese valor, WP_Query viene al rescate.

Supongamos que tenemos dos meta valores, uno que se llama arquitecto y otro que se llama año.

Si queremos ordenar alfabéticamente por el meta valor de arquitecto nuestro WP_Query quedaría de la siguiente forma:

$args = array('post_type' => 'post', 'meta_key' => 'arquitecto', 'orderby' => 'meta_value', 'order' => 'ASC');
$query = new WP_Query($args);

Aquí estamos diciendo:

  • $pos_type=post, todos las entradas tipo post, aquí tambien puede ser page o algún tipo de entrada personalizado que tengamos.
  • $meta_key, es el nombre de nuestro meta en este caso arquitecto.
  • $orderby, es por qué parámetro vamos a ordenar aquí le decimos que ordene por el valor meta que seleccionamos anteriormente.
  • $order, el sentido del order puede ser ASC de menor a mayor o DESC de mayor a menor.

Ahora si queremos ordenar por el meta valor de año que es un valor numérico tenemos que hacer un pequeño cambio:

$args = array('post_type' => 'post', 'meta_key' => 'año', 'orderby' => 'meta_value_num', 'order' => 'ASC');
$query = new WP_Query($args);

Vemos que dejamos los parámetros casi igual lo único que cambia es ‘meta_key’=>’año’ para seleccionar el meta que queremos filtrar y  ‘orderby’ => ‘meta_value_num’ para indicarle a WordPress que este valor es numérico.

Eso es todo luego podemos usar nuestro loop como siempre lo hacemos:

while ($query->have_posts()) {

...

}

Así vemos que es muy fácil ordenar un loop a través de un meta valor.

Aunque la mayoría de las veces prefiero el terminal para manejar mis servidores, a la hora de manejar base de datos y realizar Querys prefiero utilizar MySQL Workbench, no siempre funciona de lo mejor pero la mayoría de las veces hace un gran trabajo.

Aquí vamos a ver como conectarnos con nuestra base de datos RDS de Amazon a través de MySQL Workbench con un tunel SSH. Esto nos ahorrará una gran cantidad de trabajo.

Los pasos son:

1. Abrir MySQL Workbench y crear una nueva Conexión

Hay dos formas o haces click en el botón de + al lado de MySQL Conections o vas al menú de Database>Manage Connections y seleccionas new abajo a la derecha a la izquierda tendrás varias pestañas selecciona Connection. Verás una ventana como esta y en el Connection Method seleccionamos Standard TCP/IP over SSH

Connection Name: Colocamos como queremos que se llame la conexión para indentificarla en MySQL Workbench.

Nueva Conexión MySQL Workbench

2. Crear la conexión con la Base de Datos

Cómo nos vamos a conectar a través de nuestra instancia de EC2 debemos colocar en SSH Hostname el Public DNS de la instancia de EC2.

Para encontrar este Public DNS debemos ir a la consola de Amazon  https://console.aws.amazon.com/ abrir el menú de instancias EC2 y seleccionar la instancia con la que nos conectamos normalmente vía SSH abajo veremos un campo de Public DNS parecido a este:

Public DNS EC2 Amazon

Copiamos el Public DNS y lo colocamos en SSH Hostname.

SSH Username: colocamos el nombre del usuario que utilizamos para conectarnos a la instancia de EC2, si por ejemplo es una instancia Ubuntu el usuario por defecto es ubuntu.

SSH Key File: Vamos  utilizar el archivo PEM que usamos como Key para conectarnos a EC2, en SSH Key File hacemos click en … para buscar el archivo y seleccionamos el archivo PEM (nuestra llave privada) que descargamos a la hora de crear la instancia de EC2.

MySQL Hostname: Aquí debemos colocar el Endpoint, que sería la instancia de base de datos creada en Amazon RDS. Para encontrar este Hostname debemos ir a la consola de Amazon  https://console.aws.amazon.com/ abrir el menú de instancias de RDS y seleccionar la instancia con la que nos queremos conectar veremos algo como esto:

Endpoint RDS Amazon

Copiamos toda esa dirección sin los :3306

MySQL Server Port: El puerto por defecto es 3306. Si lo cambiaste en tu configuración debes poner el nuevo puerto aquí.

Username: Es el nombre del usuario Master de la base de datos cuando creaste la instancia de RDS. Aparece en el Username de la consola de Amazon en la instancia de RDS por si lo olvidaste.

Password: Es la clave del usuario Master de la base de datos cuando creaste la instancia de RDS Amazon.

Una vez que llenemos todos los datos presionamos el botón de Test Connection y deberíamos ver un mensaje como el siguiente:

Untitled window_013

Luego presionamos OK y estamos listos para empezar a utilizar nuestra conexión.

3. Manejar la instancia con MySQL Workbench (Opcional)

Si queremos ser capaces de detener, iniciar y ver los logs de la instancia desde Workbench debemos hacer un paso adicional.

Vamos al menú de Database>Manage Connections, seleccionamos la conexión que acabamos de crear y vamos a la pestaña de Remote Managment y ya debería estar casi lleno comprobamos que:

Hostname: es el Public DNS de nuestra instancia EC2.

Username: El usuario que utilizamos para conectarnos vía SSH a nuestra instancia EC2.

Marcamos la opción de Authenticate Using SSH Key y buscamos el archivo .pem de clave privada de nuestra instancia EC2.

Manage Server Connections_017

Cuando este listo hacemos click en Close y ahora podemos ver habilitadas las opciones de nuestra instancia RDS:

Selection_018

Ten cuidado con estas opciones ya que si detienes la instancia puedes hacer que deje de funcionar tu aplicación Web.

Eso es todo, espero que les sirva, cualquier duda o sugerencia por favor deja un comentario.

 

 

Este es otro mini tutorial de git, en este caso cómo podemos “descargar” o hacer pull de una rama remota. Supongamos que queremos descargar una rama que se llama rama_nueva para esto se necesita sólo una línea:

git checkout -b rama_nueva origin/rama_nueva

Con esto ya se descargará nuestra rama_nueva y ya estaremos listo para editarla localmente.

Si da un error de este estilo:

fatal: git checkout: updating paths is incompatible with switching branches/forcing
Did you intend to checkout ‘origin/‘ which can not be resolved as commit?’

Entonces es que necesitas ejecutar primero:

git pull

Y luego la línea de arriba.

Eso es todo espero que les sirva, cualquier duda deja un comentario.

Es muy sencillo eliminar una rama en git con una simple línea de comandos:

Eliminar Rama Local

git branch -D nombre_rama

Por supuesto sustituyendo nombre_rama por la rama a eliminar. La opción -D elimina la rama sin importar el estatus en que se encuentre el merge, así que utilizalo con cuidado.

Eliminar Rama Remota

git push origin --delete nombre_rama

Se eliminará la rama en nuestro repositorio remoto. Eso es todo, cualquier duda pueden escribir un comentario.