Node.js – Instalación en OSX El Capitan 10.11

Node.js - Instalación en OSX El Capitan

Node.js usa el motor de JavaScript V8 de Google: una VM tremendamente rápida y de gran calidad escrita por gente como Lars Bak, uno de los mejores ingenieros del mundo especializados en VMs. No olvidemos que V8 es actualizado constantemente y es uno de los intérpretes más rápidos que puedan existir en la actualidad para cualquier lenguaje dinámico. Además las capacidades de Node para I/O (Entrada/Salida) son realmente ligeras y potentes, dando al desarrollador la posibilidad de utilizar a tope la I/O del sistema.

Instalando Node.js

Para instalar Node.js en OSX puedes descargar un paquete pre-compilado desde https//nodejs.org mediante el cual podrás hacerlo de forma rápida y sencilla. Haz click y consigue la última versión estable.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Descargando-Node.png” alt=”Descargando Node” align=”center” lightbox=”off” caption=”Descargando Node” captionposition=”center”]

Con la instalación además conseguiremos npm. Npm es un administrador de paquetes para Node el cual nos facilita obtener paquetes adicionales.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Instalando-Node.png” alt=”Instalando Node” align=”center” lightbox=”off” caption=”Instalando Node” captionposition=”center”]

Al final de la instalación te recordará que te asegures de que /usr/local/bin está en tú $PATH. Para hacerlo abre el Terminal y escribe el siguiente comando:

echo $PATH

Deberías ver algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-PATH.png” alt=”Comprobando $PATH” align=”center” lightbox=”off” caption=”Comprobando $PATH” captionposition=”center”]

Después de la instalación podemos comprobar que todo ha ido bien abriendo una sesión JavaScript de Node. Escribe en el Terminal:

node

y después:

console.log('hello node');

Deberás ver algo como esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-Node.png” alt=”Comprobando Node” align=”center” lightbox=”off” caption=”Comprobando Node” captionposition=”center”]

Para salir de una sesión de Node puedes presionar CONTROL + C.

Recuerda que para actualizar simplemente descarga la última versión y sobreescribe la anterior. Puedes consultar tú versión con:

node -v

Instalando paquetes para Node

Existen multitud de paquetes como por ejemplo el popular Grunt.js, puedes utilizar el comando npm para obtener un listado completo:

npm search

Para instalar un paquete ejecuta:

npm install easyimage

Para listar paquetes desde un directorio de proyecto:

npm ls

Para actualizar paquetes npm:

npm update

Y eso es todo, te recomiendo buscar ayudas o realizar algún tutorial si te estás iniciando en Node.

Sass – Instalar y actualizar en OSX 10.11 El Capitan

Instalar y actualizar Sass en OSX

Sass es una herramienta de pre-procesado CSS que nos permite escribir código usando variables, selectores, herencias, etc, para posteriormente compilarlo en una salida de CSS regular.

Los beneficios de la utilización de Sass son notorios en proyectos de tamaño medio – grande manteniendo su estructura modular y con sencillos elementos re-utilizables.

Trabajar con Sass ayuda al proceso de actualización de código gracias a la utilización de variables, tan solo necesitarás modificar las instancias de estas al inicio del proyecto y ellas se cambiaran a lo largo de todo el CSS.

Codificamos primero a un formato .scss y luego compilamos a un archivo de CSS regular .css, puedes consultar las ayudas del sitio oficial de Sass para más información.

Comprobando Ruby

Sass se ejecuta bajo el lenguaje de programación Ruby el cual viene incluido en OSX, abre el terminal y ejecuta el siguiente comando:

ruby -v

La salida debería ser algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-Ruby.png” alt=”Comprobando Ruby” align=”center” lightbox=”off” caption=”Comprobando Ruby” captionposition=”center”]

Instalando

La instalación es de lo mas sencilla, simplemente escribe en el Terminal el comando:

sudo gem install sass

Te pedirá la contraseña de administrador, tras esto procederá a la instalación y una vez terminado deberías ver algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Instalando-Sass.png” alt=”Instalando Sass” align=”center” lightbox=”off” caption=”Instalando Sass” captionposition=”center”]

Comprobando la versión

Teclea en el Terminal:

sass - v

Y la salida debería ser la siguiente:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/11/Comprobando-la-version-de-Sass.png” alt=”Comprobando la versión de Sass” align=”center” lightbox=”off” caption=”Comprobando la versión de Sass” captionposition=”center”]

 

Compilando a CSS

Hay dos formas de compilar archivos .scss a CSS regular .css, estáticamente o dinámicamente. En el primer caso tu le pasas el nombre de archivo o archivos en un directorio a compilar y genera las salidas respondiendo al comando. En el segundo, Sass monitoriza un archivo o directorio que contiene varios archivos y realiza el compilado según se hagan cambios en estos.

Compilado estático de un solo archivo

Para compilar un archivo simple teclea el siguiente comando en el Terminal:

sass --update archivocss.scss

O para compilar un directorio que contiene múltiples archivos:

sass --update /directorio/

Lo cual produce los nuevos archivo archivocss.css

Monitorizar un simple archivo

sass --watch sass archivocss.scss

Te informará que está a la espera de cambios en el archivo. Puedes presionar CONTROL + C para finalizar el monitorizado.

Monitorizar un directorio que contiene múltiples archivos

sass --watch /directorio/

Puedes cancelar la monitorización o finalizarla presionando CONTROL + C.

Actualizando Sass

Por último, para actualizar a la última versión de Sass en OSX ejecuta el comando:

sudo gem update sass

Como instalar WordPress con Hobo

Activar TRIM

WordPress es a criterio de la mayoría la mejor plataforma de blogs existente hoy en día en el mercado. Para su desarrollo en local necesitamos correr plataformas Apache con PHP en nuestro propio ordenador, existen multitud de formas de crearlas y una de ellas es utilizando un entorno virtual de desarrollo con Vagrant.

Vagrant es una herramienta para desarrolladores que facilita la creación de entornos virtuales para desarrollo. En Vagrant podemos instalar y configurar software en una máquina virtual para que podamos simular que estamos en el servidor en el que se alojará la aplicación Web. La principal ventaja que encuentro es que si queremos desarrollar una aplicación Web, no tenemos que configurar nada en nuestro ordenador y llenarlo de programas como Apache, Nginx, PHP, MySQL, etc. Vagrant tiene “cajas” con sistemas operativos para desarrollar directamente en ellos. Si por ejemplo queremos una máquina virtual con LAMP o Node.js, podemos descargarla y configurarla en un momento para tener todo listo y ponerse a programar.

Hobo es la mejor y más sencilla forma de manejar cajas Vagrant y editar Vagrantfiles, puedes rápidamente iniciar, parar y recargar tus máquinas Vagrant así como crear nuevos Vagrantfiles.

Vamos entonces a explicar como crear una instalación local de WordPress utilizando Hobo. Para ello, lo primero será adquirir la aplicación desde su web oficial, tienes una versión de prueba que puedes descargar desde aquí.

Iniciamos la App y nos dirigimos a ‘Explore our gallery of user-submitted Hobo documents‘ en la pantalla de inicio.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Inicio-de-Hobo.png” alt=”Inicio de Hobo” align=”center” lightbox=”off” caption=”Inicio de Hobo” captionposition=”center”]

Se nos abre un repositorio de Git en nuestro navegador, navegamos al final de la página, a la sección ‘Directory of Hobo Files‘ y abrimos ‘Click on Tyler WordPress’.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Directory-of-Hobo-files.png” alt=”Directory of Hobo files” align=”center” lightbox=”off” caption=”Directory of Hobo files” captionposition=”center”]

Nos dirigimos al enlace ‘WordPress’, hacemos click derecho del ratón y escogemos ‘Descargar archivo enlazado como…‘ y guardamos el archivo WordPress.hobo en el escritorio.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Descargando-archivo-Hobo.png” alt=”Descargando archivo Hobo” align=”center” lightbox=”off” caption=”Descargando archivo Hobo” captionposition=”center”]

Elimina la extensión txt que se habrá añadido al archivo descargado, crea una carpeta en el escritorio llamada ‘WordPress‘, mete en ella el archivo WordPress.hobo y haz click en el.

Se abrirá una ventana de Hobo, haz ahora click en en ícono ‘Export Vagrantfile’.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Export-Vagrantfile1.png” alt=”Export Vagrantfile” align=”center” lightbox=”off” caption=”Export Vagrantfile” captionposition=”center”]

 

Una vez terminada la exportación haz click en el ícono ‘Up’ para ejecutar tú Vagrantfile.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Up-Vagrantfile.png” alt=”Up Vagrantfile” align=”center” lightbox=”off” caption=”Up Vagrantfile” captionposition=”center”]

 

Si no tenías Vagrant instalado previamente te pedirá que lo descargues e instales.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Install-Vagrant.png” alt=”Install Vagrant” align=”center” lightbox=”off” caption=”Install Vagrant” captionposition=”center”]

En este punto tenemos que hacer un alto en el camino.

Vagrant necesita un proveedor de cajas o boxes, esto son unas imágenes base para clonar rápidamente máquinas virtuales, si quieres más información haz click aquí.

[aesop_content color=”#FFFFFF” background=”#333333″ columns=”1″ position=”none” imgrepeat=”no-repeat” floaterposition=”left” floaterdirection=”up”]Los proveedores pueden ser varios como Parallels, VMware, VirtualBox, etc. Cualquiera de ellos puede ser instalado mediante plugins pero si quieres evitarte muchos problemas te recomiendo tener instalado VirtualBox. Vagrant tiene la propiedad de que al ser instalado junto a VirtualBox creará el box automáticamente y te evitará, te lo digo por experiencia propia, complicaciones.

[/aesop_content]

Hobo hará el resto preparando la máquina virtual y descargando WordPress.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Upping-Wordpress.hobo_.png” alt=”Upping WordPress.hobo” align=”center” lightbox=”off” caption=”Upping WordPress.hobo” captionposition=”center”]

Si abres la carpeta WordPress que has creado anteriormente en tú escritorio verás los archivos descargados.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Carpeta-Wordpress.png” alt=”Carpeta WordPress” align=”center” lightbox=”off” caption=”Carpeta WordPress” captionposition=”center”]

Y ahora, si apuntas a localhost en tú navegador web se te abrirá la instalación de WordPress.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Wordpress-en-localhost.png” alt=”Wordpress en localhost” align=”center” lightbox=”off” caption=”Wordpress en localhost” captionposition=”center”]

Ahora y para finalizar podemos aplicar SSH a nuestro WordPress.

[aesop_content color=”#FFFFFF” background=”#333333″ columns=”1″ position=”none” imgrepeat=”no-repeat” floaterposition=”left” floaterdirection=”up”]SSH es un protocolo que facilita las comunicaciones seguras entre dos sistemas usando una arquitectura cliente/servidor y que permite a los usuarios conectarse a un host remotamente. A diferencia de otros protocolos de comunicación remota tales como FTP o Telnet, SSH encripta la sesión de conexión, haciendo imposible que alguien pueda obtener contraseñas no encriptadas.

[/aesop_content]

Para ello nos dirigimos al ícono de Hobo en la barra de menús y accedemos a la opción de la lista desplegable Hobo > WordPress > SSH

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/SSH.png” alt=”SSH” align=”center” lightbox=”off” caption=”SSH” captionposition=”center”]

Entra en la carpeta /var/www con el comando siguiente:

cd /var/www

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Carpeta-varwww.png” alt=”Carpeta var/www” align=”center” lightbox=”off” caption=”Carpeta var/www” captionposition=”center”]

Ejecuta:

ls -l

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/ls-l.png” alt=”ls -l” align=”center” lightbox=”off” caption=”ls -l” captionposition=”center”]

Ahora entra de la carpeta html:

cd html

Y vuelve a ejecutar:

ls -l

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/ls-l-dentro-de-html.png” alt=”ls -l dentro de html” align=”center” lightbox=”off” caption=”ls -l dentro de html” captionposition=”center”]

Y eso es todo, recordar que desde la lista de opciones desplegable del ícono de la barra de menús de Hobo podemos apagar, iniciar, re-inicar incluso destruir las diferentes máquinas virtuales que podemos ir teniendo para nuestro trabajo.

Actualizando a PHP 5.6 o 7 en Mac OSX El Capitan

Instalando todas las Google Web Fonts en Mac

Mac OSX El Capitan trae preinstalada la versión 5.5.27 de PHP, en esta entrada veremos como actualizar a versiones más recientes de un modo sencillo y desde el Terminal.

La última versión estable que instalaremos en esta guía está sacada del listado de versiones mantenidas para Mac OSX, puedes consultarlas desde aquí.

Descargando e instalando PHP 5.6

Abre el Terminal desde Aplicaciones > Utilidades > Terminal o bien CTRL + ESPACIO para abrir Spotlight y tecleando Terminal.

Escribe el siguiente comando:

curl -s http://php-osx.liip.ch/install.sh | bash -s 5.6

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/10/Instalando-PHP-5.6.png” alt=”Instalando PHP 5.6″ align=”center” lightbox=”off” caption=”Instalando PHP 5.6″ captionposition=”center”]

Eso es todo, se descargará e instalará la versión 5.6 en /usr/local/php5. El script además desactivará la versión 5.5 del archivo httpd.conf de Apache y activará en él la más reciente.

Puedes testear la nueva versión creando un archivo en la raíz web llamado phpinfo.php con la simple función <?php phpinfo();?>.

Diferencias de diseño Apple-Samsung en una sola imagen

Diferencias de diseño Apple - Samsung

[aesop_image imgwidth=”100%” img=”https://tonidg.es/wp-content/uploads/2015/04/Alineacion-inferior.png” alt=”Diferencias de diseño” align=”center” lightbox=”off” caption=”Diferencias de diseño” captionposition=”center”]

Lo dicho, la comparación de los dos últimos diseños de terminales de Apple y Samsung es odiosa. En el de este último, el terminal inferior, hay una total ausencia de alineamiento entre los diferentes elementos.

Cuando vas a aprender a cuidar de estos detalles Samsung? La suma de estos pequeños detalles es lo que te hace estar a remolque de Apple.