Gulp – Instalación en OS X 10.11

Gulp

Gulp.js es un sistema de construcción que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más.

No solamente nos soluciona el problema de tener que utilizar múltiples herramientas en nuestro flujo de trabajo sin que nos permite ejecutarlo todo desde un único lugar.

Instalando globalmente Gulp

Gulp requiere Nodejs y Npm (administrador de paquetes de Node) por lo que debes tenerlos instalados antes. Aquí tienes un tutorial para hacerlo.

Abre el Terminal ( + ESPACIO para abrir Spotlight y escribe terminal) y dispara el siguiente comando:

npm install -g gulp

Instalando localmente – package.json

Para un proyecto local necesitas preparar primero un archivo package.json para configurar tus paquetes y dependencias Node/npm. Desde el Terminal cambia el directorio a tú carpeta de proyecto y dispara el siguiente comando para crear el archivo package.json:

npm init

Esto te ayuda a crear el archivo, aquí tienes la salida generada:

tonidg@[~/Desktop]: npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (Desktop) mi_proyecto
version: (1.0.0) 0.0.1
description: ejemplo de mi proyecto
entry point: (index.js)
test command:
git repository:
keywords:
author: Toni DG
license: (ISC)
About to write to /Users/tonidg/Desktop/package.json:
{
"name": "mi_proyecto"
"version": "0.0.1"
"description": "ejemplo de mi proyecto"
"main": "index.js"
"scripts":
"test": "echo \"Error: no test specified\" && exit 1
}
"author": "Toni DG"
"license": "ISC"
}

Tu solo tienes que añadir los valores para Nombre, Versión, Descripción y Autor. Mantén los demás campos en blanco y el archivo será escrito en la carpeta de tú proyecto. Tras esto puedes eliminar algunos de los campos en blanco en un editor de texto, obteniendo algo así:

{
"name": "mi_proyecto",
"version": "0.0.1",
"description": "ejemplo de mi proyecto",
"author": "Toni DG"
}

Fíjate en que la última coma ha sido eliminada.

Una vez tenemos nuestro archivo json situado podemos instalar el paquete Gulp localmente desde la linea de comandos en nuestro proyecto, esto escribirá a nuestro archivo package.json por lo que asegúrate de estar en el directorio del proyecto. Instala mediante:

npm install gulp --save-dev

Ahora nuestro package.json debería ser algo así:

{
"name": "test_proyecto",
"version": "1.0.0",
"description": "test",
"author": "Toni DG",
"devDependencies": {
"gulp": "^3.9.1"
}
}

Para añadir mas plugins, como por ejemplo el de recarga en vivo del navegador utiliza la siguiente sintaxis:

npm install browser-sync --save-dev

El parámetro -save-dev guardará el paquete como una dependencia del proyecto así que escribirá en el archivo package.json. Ahora mostrará algo así:

{
"name": "test_proyecto",
"version": "1.0.0",
"description": "test",
"author": "Toni DG",
"devDependencies": {
"gulp": "^3.9.1",
"browser-sync": "^2.11.1"
}
}

gulpfile.js

Nuestro último archivo de configuración es gulpfile.js el cual le dice a Gulp que debe hacer. Añade este archivo a la raíz de tú proyecto e inserta:

var gulp = require('gulp');

Como tenemos el plugin browsersync instalado vamos a crear una tarea que nos permita ver el proyecto web en el navegador y que este se recargue automáticamente cada vez que cambiemos el CSS. Ahora nuestro gulpfile.js será así:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('sync', function() {
browserSync.init({
proxy: "my_project.dev",
files: "*.css,*.php,css/*css"
});
});

Ahora ejecutamos nuestra tarea desde la linea de comandos usando:

gulp sync

Eso es todo, esta es una guía básica de inicio y no pretende más que eso, preparar tú entorno. Existen multitud de plugins  disponibles, repásalos y comprueba todo lo que pueden hacer por ti mejorando tus flujos de trabajo.

Instalando PEAR en OS X

Pear

PEAR, o PHP Extension and Application Repository, es un entorno de desarrollo y sistema de distribución para componentes de código PHP. El proyecto fue fundado por Stig S. Bakken en 1999 para promover la reutilización de código que realizan tareas comunes.

El proyecto tiene como metas:

  • Promover una biblioteca de código bien estructurada.
  • Mantener un sistema de distribución y mantenimiento de paquetes de código.
  • Promover un estilo de codificación estándar.

En definitiva consiste en una lista bastante grande de bibliotecas de código PHP que permiten hacer ciertas tareas de manera más rápida y eficiente reutilizando código escrito previamente por otras personas. Generalmente las bibliotecas contienen clases en archivos PHP que luego se incluyen y usan sin muchas complicaciones. Aunque el proyecto está orientado hacia la comunidad, existe un Grupo que ejerce de gobierno y toma cuenta de las tareas administrativas. Cada paquete de código comprende un proyecto independiente bajo el paragüas común de PEAR. Estos paquetes disponen de su propio equipo de desarrollo, control de versiones y documentación.

Instalando PEAR

Antes de nada deberías comprobar si dispones ya de alguna instalación. Desde el Terminal muévete a tú directorio de inicio.

cd

Chequea si lo tienes.

pear version

Si no es así obtenla mediante el comando:

curl -O http://pear.php.net/go-pear.phar

Y ahora instálala:

php -d detect_unicode=0 go-pear.phar

La instalación te sugiere las localizaciones de los archivos, estas estarán basadas en tú directorio raíz. Solamente presiona .

Añadir PEAR a tú PATH

Puedes añadirlo en tú .bash_profile el cual es un archivo invisible en el directorio raíz.

cd
nano .bash_profile

Añadir a tú variable PATH o ruta:

/users/USERNAME/pear/bin

Así que la variable PATH se verá algo como esto, cada PATH está separado por dos puntos y termina con la variable $PATH. En el siguiente ejemplo el path PEAR es la segunda.

export PATH="/usr/local/mysql/bin:/Users/USERNAME/pear/share/pear/:$PATH"

Refresca el perfil

source .bash_profile

Y ahora verifica

pear version

La salida obtenida debería ser algo parecido a esto:

PEAR Version: 1.10.1
PHP Version: 5.5.5
Zend Engine Version: 2.5.0
Running on: Darwin 192-168-1-9.tpgi.com.au 15.3.0 Darwin Kernel Version 15.3.0: Thu Dec 10 18:40:58 PST 2015; root:xnu-3248.30.4~1/RELEASE_X86_64 x86_6

Pear está instalado y preparado, ahora necesitas añadir el path Pear a tú instalación PHP.

Añadir PEAR a PHP

Del mismo modo que has añadido Pear a la ruta del Shell ahora debes añadir la ubicación de Pear a PHP para que pueda ejecutar los binarios, esto se hace a través del archivo PHP.ini

Si tú instalación de OS X no ha sido personalizada él estará situado en /etc y podría llamarse php.ini.default el cual tendrás que duplicar y renombrar a únicamente php.ini. Si PHP está en otra parte deberás encontrarla con el comando:

php --ini

En este ejemplo tengo una ruta o Path PHP diferente

Configuration File (php.ini) Path: /usr/local/php5/lib
Loaded Configuration File: /usr/local/php5/lib/php.ini

Cuando lo tengas ábrelo y bajo ‘Paths and Directories’ añádelo al PHP.ini

include_path = ".:/Users/YOURUSERNAME/pear/share/pear/"

Ahora ya puedes trabajar con tus paquetes PEAR, a continuación tienes algunos comandos útiles.

Para listar tus paquetes:

pear list

La salida debería ser similar a esto:

Installed packages, channel pear.php.net:
=========================================
Package Version State
Archive_Tar 1.4.0 stable
Console_Getopt 1.4.1 stable
PEAR 1.10.1 stable
Structures_Graph 1.1.1 stable
XML_Util 1.3.0 stable

Para instalar un paquete Pear, por ejemplo PHP_codesniffer, ejecuta:

pear install PHP_codesniffer

Para actualizar PEAR:

pear upgrade pear

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.

Instalar mcrypt para PHP en Mac OSX El Capitan

Escritorio MAC

mcrypt es un método de encriptado de archivos que usa técnicas seguras de intercambio de datos. Estas son requeridas para algunas web apps como Magento o un framework PHP como Laravel.

mcrypt para PHP, proceso para la instalación

Command Line Tools

Lo primero que necesitas es tener instaladas las herramientas de comandos en línea.

Ya sabes, abre el Terminal desde Aplicaciones > Utilidades > Terminal o bien CTRL + ESPACIO para abrir Spotlight y tecleando Terminal.

Ejecuta lo siguiente:

xcode-select --install

Desactivar SIP/rootless

Ahora necesitas desactivar el SIP de OSX El Capitan para poder instalar en algunos directorios protegidos del sistema. Tienes más información sobre el SIP y como desactivarlo en mi anterior artículo, consúltalo aquí.

Resumiendo, para desactivarlo reinicia el ordenador y entra en el modo de Recuperación. Seguidamente abre el Terminal y ejecuta el siguiente comando:

csrutil disable

Obteniéndolo en OS X El Capitan 10.11

Lanza el Terminal, cambia de directorio (cd) a la cuenta de inicio y crea un directorio en el que trabajarás llamado crypt

cd ~ ; mkdir mcrypt ; cd mcrypt

Obtén libmcrypt 2.5.8 desde Source Forge, es una descarga directa.

Obtén el código PHP en formato tar.gz o .bz2 (OSX El Capitan viene con la versión 5.5.27)

Mueve ambos archivos a tu directorio de trabajo mcrypt y vuelve al Terminal, escribe el siguiente comando para entrar en el:

cd ~/mcrypt

Expande ambos archivos desde el Terminal (también puedes hacer doble click desde el Finder):

tar -zxvf libmcrypt-2.5.8.tar.gz
tar -zxvf php-5.6.13.tar.gz

Elimina los archivos comprimidos:

rm *.gz

Configurando libmcrypt

Entra al directorio libmcrypt:

cd libmcrypt-2.5.8

Libmcrypt necesita ser configurado:

./configure
make
sudo make install

Con libmcrypt configurado y las librerías instaladas es hora de crear la extensión mcrypt para PHP.

Instalando Autoconf

Instala autoconf desde el Terminal:

cd ~/mcrypt
curl -O http://ftp.gnu.org/gnu/autoconf/autoconf-latest.tar.gz
tar xvfz autoconf-latest.tar.gz
cd autoconf-2.69/
./configure
make
sudo make install

Compilando las extensión mcrypt para PHP

cd ../php-5.6.13/ext/mcrypt/
/usr/bin/phpize

La salida debería ser algo parecido a esto:

Configuring for:
PHP Api Version: 20121113
Zend Module Api No: 20121212
Zend Extension Api No: 220121212<./configure

make
sudo make install

El resultado debería ser algo así:

Installing shared extensions: /usr/lib/php/extensions/no-debug-non-zts-20121212/

Si obtuvieras algún error es que no has desactivado SIP.

cp: /usr/lib/php/extensions/no-debug-non-zts-20121212/#INST@17000#: Operation not permitted

Activando la extensión mcrypt.so para PHP

Abre /etc/php.ini y añade la siguiente linea al final:

extension=mcrypt.so

Si no existiera un archivo php.ini, necesitarás crear uno desde php.ini.default en la misma localización:

sudo cp /etc/php.ini.default /etc/php.ini

Y permitir acciones de escritura:

sudo chmod u+w /etc/php.ini

Entonces añade la linea de arriba con tu editor de textos:

sudo nano /etc/php.ini

o

sudo vi /etc/php.ini

Asegúrate que las extensiones dinámicas están activadas:

extension_dl = On

Y añade la línea:

extension=mcrypt.so

Re-iniciar Apache

sudo apachectl restart

Eso es todo ya tienes instalado mcrypt para PHP, crea una página PHP con la instrucción phpinfo(); para ver que se carga correctamente.

Instalar Homebrew en OSX El Capitan

Código CSS

La forma más sencilla de instalar software open source y herramientas Unix a nuestro Mac OSX es mediante un administrador de paquetes. Desafortunadamente OSX no viene con uno pero hay gente que se cuida de ello y nos lo traen desde Homebrew.

Homebrew no es la única opción pero si la más nueva y popular. Si deseas investigar otras opciones puedes consultar MacPorts y Fink.

Obtener XCode

El primer paso y previo a la instalación de Homebrew es obtener y aceptar la licencia de Xcode. Puedes descargarlo si no lo tienes desde la App Store.

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

Trás esto, abre la aplicación y acepta las condiciones de la licencia.

Por último, instala las Herramientas de comandos en linea con el siguiente comando desde Terminal:

xcode-select --install

Instalando Homebrew

Para ejecutar el script de instalación teclea el siguiente comando desde Terminal:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

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

Así de simple. Ya lo tenemos instalado, ahora podemos consultar si ha habido algún inconveniente durante la instalación con:

brew doctor

Para buscar una aplicación:

brew search

Para instalar:

brew install <nombre-de-la-aplicación>

Para listar todas las apps instaladas por Homebrew:

brew list

Para borrar una app instalada:

brew remove <nombre-de-la-aplicación>

Para actualizar Homebrew:

brew update

Para ver lo que puedes hacer:

man brew

 

Desactivando el sistema de protección de integridad SIP de OS X EL Capitan

iMac escritorio editando hosts

Con la llegada de OS X El Capitan Apple nos trae un nuevo modo de protección del sistema frente a ataques externos y / o malos usos por parte del usuario. El System Integrity Protection o SIP añade nuevas funciones a las ya implementadas en Yosemite que afectan a todos los procesos del sistema.

El sistema SIP de OS X El Capitan protege sobre todo a usuarios no avanzados de ataques malware o usos incorrectos del sistema impidiendo instalar cualquier cosa en una serie de carpetas, las pone por decirlo de alguna manera en cuarentena para todos a excepción del propio sistema.

Puede modificarse parcialmente el comportamiento de SIP mediante la aplicación ‘csrutil’ desde el Terminal, activándolo, desáctivandolo o aplicando diferentes configuraciones.

Tal vez, como usuario avanzado estés interesado por diferentes razones desactivar el sistema. Para ello deberás reiniciar el ordenador y entrar en el modo de recuperación presionando CMD + R durante el arranque. Tras esto deberás iniciar el Terminal y tan solo escribir lo siguiente:

csrutil disable; reboot

Con ‘reboot’ reiniciaremos automáticamente el sistema con SIP desactivado.

Puedes activarlo de nuevo con:

csrutil enable

Y eso es todo. Te aconsejaría no manipular el SIP si no eres un usuario avanzado o no estás completamente seguro de lo que estás haciendo.

Crear una simple webapp para OSX

Si dispones de un sitio web y tienes la necesidad de crear una aplicación para OSX basada en dicho sitio no es necesario complicarse en exceso con ella, puede bastar simplemente con crear una App con una WebView.

Vamos pues a crear una simple webapp para OSX con Xcode y unos sencillos pasos.

Paso 1, abriendo Xcode. Si no lo tienes instalado puedes hacerlo desde la App Store.

Crea un nuevo proyecto y selecciona OSX > Application > Cocoa Application

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

Dale un nombre, en mi caso la llamaré ‘Toni DG’.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Las-opciones-para-nuestro-proyecto.png” alt=”Las opciones para nuestro proyecto” align=”center” lightbox=”off” caption=”Las opciones para nuestro proyecto” captionposition=”center”]

Paso 2, importando el framework WebKit.

Haz click en (+) dentro de la sección Linked Frameworks and Libraries, haz una búsqueda con el texto ‘webkit‘ y añádelo.

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

Paso 3, empezar a codificar.

No te asustes por el título del paso, no hay nada complicado.

Haz click sobre AppDelegate.m en la barra lateral izquierda y añade la siguiente linea debajo de #import “AppDelegate.h”, Esto hará una llamada al framework WebView importado anteriormente, puedes ver la captura de pantalla.

#import <WebKit/WebKit.h>

Tras esto añade la siguiente línea entre @property (weak) IBOutlet NSWindow *window;@end para crear una variable objeto webview.

@property (strong) IBOutlet WebView *webview;

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

Paso 4, diseñando la App.

Haz click en MainMenu.xib y selecciona y selecciona el ícono con el nombre de tú App a la izquierda.

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

Ahora presiona CMD + ALT + 0 para abrir las utilidades en la barra derecha (si no las tienes ya abiertas) y busca Webview dentro del ícono Show the Object Library. Ahora arrastralo a tú ventana, puedes centrarlo utilizando las guías de ayuda.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Insertando-webview-en-la-vista.png” alt=”Insertando webview en la vista” align=”center” lightbox=”off” caption=”Insertando webview en la vista” captionposition=”center”]

No necesitas escalar el objeto más tarde lo haremos mediante código.

Ahora haz click derecho sobre el ícono App Delegate (a la izquierda), se abrirá una ventana emergente. Apunta el ratón sobre el círculo (cuando aún no tienes el puntero encima) o (+) cuando ya lo tienes dentro, de la sección Outlets > Webview. Ahora arrástralo hasta el objeto en el centro de la vista.

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

Paso 5, volviendo al código.

Después de acabar con el diseño vamos a codificar algunas cosas.

Vuelve a seleccionar AppDelegate.m en la barra izquierda e inserte el siguiente código dentro de – (void)applicationDidFinishLaunching:(NSNotification *)aNotification {

NSURL*url=[NSURL URLWithString:@”https://tonidg.es"];
NSURLRequest*request=[NSURLRequest requestWithURL:url];
[[_webview mainFrame] loadRequest:request];

La primera parte carga la URL en la webview (cámbiala poniendo la dirección de tú sitio). Ten especial cuidado con las comillas dobles en el momento de hacer un copiar y pegar.

Seguidamente inserta la siguiente línea.

[self.window setContentView:self.webview]; // webview == tamaño de ventana

Esta segunda parte hace que tú webview aparezca a tamaño completo dentro de la ventana de la App.

Por último y a continuación inserta:

[self.window setCollectionBehavior:
NSWindowCollectionBehaviorFullScreenPrimary]; // Permitir pantalla completa

Esta tercera parte permite a la App redimensionar a pantalla completa.

Ahora deberías tener algo parecido a la siguiente captura de pantalla.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Todo-el-codigo.png” alt=”Todo el código” align=”center” lightbox=”off” caption=”Todo el código” captionposition=”center”]

 

Por último vamos a cambiar el tamaño por defecto de la ventana de la App, dirígete a MainMenu.xib en la barra lateral izquierda, haz click derecho y selecciona Open As > Source Code.

Navega al final del código y busca la línea <rect key=”contentRect” x=”335″ y=”390″ width=”480″ height=”360″/>

Cámbiala por:

<rect key=”contentRect” x=”0" y=”0" width=”1200" height=”700"/>

Los parámetros x e y dan las coordenadas de la parte superior izquierda de la ventana y width y height el ancho y alto de esta.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Cambiando-el-tamanio-de-la-ventana-de-la-App.png” alt=”Cambiando el tamaño de la ventana de la App” align=”center” lightbox=”off” caption=”Cambiando el tamaño de la ventana de la App” captionposition=”center”]

 

Y esto es todo, pulsaremos el ícono Play de la barra de herramientas de Xcode y podremos ver nuestra App.

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

Instalando todas las Google Web Fonts en OSX

Instalando todas las Google Web Fonts en OSX

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/02/Instalando-todas-las-Google-Web-Fonts-en-Mac.png” alt=”Instalando todas las Google Web Fonts en Mac” align=”center” lightbox=”off” caption=”Instalando todas las Google Web Fonts en Mac” captionposition=”center”]

Todo diseñador web ha oído hablar de las fuentes de texto que Google pone a libre disposición para incrustarlas en proyectos, puedes verlas en Google Fonts aunque también tenemos un modo de instalarlas todas en OSX , tan solo necesitaremos el siguiente comando en Terminal:

curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/install.sh | sh

No obstante, esto son alrededor de 1600 en el momento de escribir este Post. Si eres usuario de Photoshop podrías considerar desactivar su ‘Previsualización de fuentes’.

Para desinstalarlas tenemos el comando:

curl https://raw.githubusercontent.com/qrpike/Web-Font-Load/master/uninstall.sh | sh

Por último, decir que actualizar la lista será algo tan sencillo como volver a ejecutar el comando.