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

 

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();?>.

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 un instalador de OSX El Capitan en una unidad USB

Con la reciente aparición de la nueva versión de OSX tal vez estés pensando en hacer una instalación limpia, desde cero.

Para ello vamos a crear un instalador de OSX El Capitan en un unidad USB, tras esto, tan solo tendrás que arrancar el ordenador manteniendo pulsada la tecla ALT con lo que se te abrirá un menú pudiendo, desde él, escoger la unidad raíz desde la que instalar así como la unidad destino.

Para la instalación limpia deberás acceder a la utilidad de discos y formatear la unidad destino.

Pasemos pues a la creación de la unidad, necesitarás una unidad con al menos 8Gb libres ya que el instalador ocupa unos 6Gb. Descárgalo antes desde la Mac App Store.

El instalador se descarga directamente a la carpeta de Aplicaciones, nota que al finalizar la descarga este se abrirá así que ciérralo sin mas.

Preparando la unidad USB

Abre la Utilidad de Discos escribiéndolo en Spotlight mediante CTRL + P o Aplicaciones > Utilidades > Utilidad de Discos.

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

Selecciona tú unidad USB y bórrala poniéndole como nombre ‘ElCapInstaler’. Deja el formato por defecto ‘OS X Plus (con registro)’.

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

Creando el instalador

Ahora abre el Terminal desde Spotlight mediante CTRL + P o Aplicaciones > Utilidades > Terminal y escribe el siguiente comando:

sudo /Applications/Install\ OS\ X\ El\ Capitan.app/Contents/Resources/createinstallmedia --volume /Volumes/ElCapInstaller --applicationpath /Applications/Install\ OS\ X\ El\ Capitan.app --nointeraction

Trás pedirte la contraseña se iniciará el proceso, cuando finalice has de ver algo parecido a esto:

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

Y ya está, ya tienes tú unidad preparada.

 

 

Mejorando la apariencia del Terminal de Mac OSX

Vamos a explicar como mejorar el diseño del Terminal de Mac OSX haciendo mas agradable a la vista en unos sencillos pasos.

Instalar iTerm

Para empezar descarga e instala iTerm2. Esta aplicación es un emulador de Terminal para Mac con montones de características; si quieres consultarlas puedes hacerlo desde su web.

Instalar Homebrew

Seguidamente descarga e instala Homebrew, éste es un muy útil administrador de paquetes para Mac OSX, si quieres aprender más acerca de él puedes visitar su sitio web. Para instalarlo abre Terminal y escribe el siguiente comando:

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

Deberías ver algo parecido a esto:

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Instalacion-de-Homebrew.png” alt=”Instalación de Homebrew” align=”center” lightbox=”off” caption=”Instalación de Homebrew” captionposition=”center”]

 

Instalar oh-my-zsh

Ahora instalaremos oh-my-zsh. Zsh es un shell alternativo (y lenguaje de scripts también) y oh-my-zsh es un framework open source para manejar su configuración. Este framework te permite usar temas, plugins, funciones y otras muchas cosas. Si quieres aprender más pues hacer click en este link.

Antes de instalar oh-my-zsh necesitamos instalar zsh utilizando Homebrew:

brew install zsh

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Instalacion-de-zsh.png” alt=”Instalación de zsh” align=”center” lightbox=”off” caption=”Instalación de zsh” captionposition=”center”]

 

Trás esto instalaremos oh-my-zsh, para hacerlo abriremos iTerm2 y escribiremos el siguiente comando de Terminal:

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Instalacion-de-oh-my-zsh.png” alt=”Instalación de oh-my-zsh” align=”center” lightbox=”off” caption=”Instalación de oh-my-zsh” captionposition=”center”]

 

Pasaremos ahora a cambiar el tema de oh-my-zsh editando el archivo .zshrc. Ve al Terminal y escribe:

vim ~/.zshrc

Busca la línea ZSH_THEME=”robbyrussell”

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/09/Cambiando-el-tema-de-oh-my-zsh.png” alt=”Cambiando el tema de oh-my-zsh” align=”center” lightbox=”off” caption=”Cambiando el tema de oh-my-zsh” captionposition=”center”]

Entra en el modo de edición pulsando la tecla i y cambia el tema a ZSH_THEME=”agnoster”

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

Para salir del modo edición simplemente pulsa ESC y para guardar los cambios escribe “:x” y ENTER. Reinicia iTerm para aplicar los cambios.

Instalar la fuente Sauce Code Powerline

Dirígete a este link y descarga las 7 fuentes marcadas. Para hacerlo haz click en una de ellas y presiona el botón Raw que te aparecerá.

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

Una vez descargadas necesitas instalarlas, click en cada una de ellas y presiona el botón Instalar tipo de letra.

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

Repite el proceso para cada una de ellas.

Configurando tú nuevo Terminal

Ahora que lo tenemos todo vamos a hacer que nuestro Terminal luzca como nunca.

Click aquí para descargar el tema Solarized Dark para Zsh.

Abre las preferencias de iTerm.

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

Dirígete a Profiles > Colors > Load presets y escoge Import para seleccionar el tema solarized-dark.itermcolors descargado previamente.

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

Ve de nuevo a Load presets y escoge solarized-dark y trás cargarlo comprueba que está como defecto seleccionando Other Actions > Set as Default. Finalmente deselecciona la opción Smart cursor color.

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

Ahora escogeremos la fuente Powerline como fuente por defecto. Asegúrate de cambiar la Regular Font  y la Non-ASCII en Change Font en la pestaña Text de las preferencias. Escoge el tipo Normal a un tamaño de 13 o 14 de la Source Code Pro for Powerline.

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

 

Podemos dar un toque final también cambiando el color del cursor. Para ello ve a la pestaña Colors de las Preferencias y selecciona Magenta para el campo Cursor.

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

 

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”]

OSX – Como forzar la salida de otro usuario iniciado en el sistema

En OSX, como en otros sistemas operativos podemos tener uno, dos o varios usuarios disponibles con sus correspondientes sesiones iniciadas.

Como administradores del sistema podemos desconectar otras sesiones de usuario abiertas desde nuestra cuenta y sin necesidad de entrar en ellas y realizar el cierre.

Esto, entre otras cosas puede resultar interesante si no conocemos las contraseñas personales de inicio de sesión de los usuarios.

  • Para ello, iniciaremos el Monitor de actividad desde Aplicaciones/Utilidades o bien desde Spotlight CONTROL + ESPACIO.

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

  • En el campo de búsqueda introduciremos el nombre del proceso ‘loginwindow‘ y se nos desplegaran tantos como usuarios hayan iniciados. En mi caso pretendo desconectar el usuario guest o invitado.
  • Presionaremos el botón con la X para cerrar el proceso.

[aesop_image imgwidth=”100″ img=”https://tonidg.es/wp-content/uploads/2015/08/Monitor-de-actividad-Forzar-salida.png” alt=”Monitor de actividad – Forzar salida” align=”center” lightbox=”off” caption=”Monitor de actividad – Forzar salida” captionposition=”center”]

  • Por último, el sistema nos solicitará confirmación, presionamos pués ‘Forzar salida‘.

Y eso es todo, forzaremos la salida de sesión iniciada por otro usuario sin necesidad de entrar en su cuenta y cerrarla manualmente.