Haciendo de Sublime Text un editor realmente increíble

Esta guía te mostrará cómo configurar Sublime Text 3 para sacar lo mejor de él.

Por default, este editor viene sin plugins y con un tema que probablemente en un tiempo terminará por aburrirte. Con estas configuraciones este editor te volverá a fascinar.

Package Control

Instala este gestor de paquetes que te servirá para buscar, instalar y mantenerlos actualizados.

La mejor forma para instalarlo es desde la consola de Sublime Text, dentro del editor dirígete a View > Show Console, tendrás que ingresar un código el cual podrás obtener de la página oficial https://packagecontrol.io/installation, presiona Enter y a continuación reinicia el editor.

package_control

Para acceder al gestor de paquetes presiona las teclas CTRL + SHIFT + P y busca Package Control: Install Package, te mostrará una lista de todos los plugins disponibles.

package_control_install_package

Tema Material

Existen muchísimos temas que puedes instalar pero uno de los mejores es Material Theme lo puedes encontrar en GitHub https://github.com/equinusocio/material-theme junto con su manual de instalación.

Dentro de Sublime Text accede al gestor de paquetes (CTRL + SHIFT + P), selecciona Install Package y busca Material Theme.

material_theme_install

Para configurarlo requieres editar nuestro archivo de configuración de Sublime Text, dentro del editor dirígete a Preferences > Settings – User, copia el siguiente código al final del archivo antes de la llave, como se muestra en la imagen.


"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

material_theme_user_config

Al guardar el archivo el tema quedará configurado.

Color Scheme

Los esquemas de color definen los colores utilizados para resaltar el código fuente y el estilo de los elementos que se encuentran en el área de edición como: fondo, selección y otros.

Instala Colorsublime con el gestor de paquetes, después de instalarlo, busca dentro del mismo gestor Colorsublime: Install Theme, puedes navegar entre todos los temas y descargar el que más te guste, en este caso selecciona Facebook.

instalar_colorsublime

facebook_theme

Para modificar el fondo del tema y que coincida con la barra donde se muestran los archivos y carpetas que se encuentran abiertos, selecciona Preferences > Browse Packages …, se abrirá una carpeta en la cual tendrás que editar el archivo Colorsublime – Themes/Facebook.tmTheme con Sublime.

Dentro de este archivo con formato XML notarás que se encuentra la configuración del tema Facebook, edita la línea 23 la cual contiene el código hexadecimal de fondo. Sustituye el código con #263238, guarda el archivo y reinicia el editor, al abrirlo notarás que el fondo del tema habrá cambiado.

modificar_background_facebook_theme

La fuente perfecta

FiraCode es una de las mejores fuentes para escribir código, para empezar descarga la fuente desde GitHub https://github.com/tonsky/FiraCode, una vez que la instales en tu computadora. En Sublime Text, dirígete a Preferences > Settings – User, agrega la siguiente línea:


"font_face": "Fira Code",

A continuación, guarda el archivo para ver el cambio.

instalar_fuente_sublime

Bloques de comentarios

Comúnmente los programadores documentan su código, (si no, hazlo por el bien de tu “yo” del futuro), el plugin DocBlockr te ayudará al momento de redactar comentarios dentro de una clase de php. Puedes instalarlo desde el gestor de paquetes.

docblockr foo_class

Cómo migrar un sitio web en WordPress de local a remoto

En este artículo te mostraré cómo migrar un sitio web desarrollado en WordPress de tu equipo local a remoto.

Antes de empezar, debemos de contar con las siguientes herramientas: un editor de código, phpMyAdmin (o equivalente), un cliente FTP.

Exportar la base de datos

Si tenemos instalado phpMyAdmin, generalmente se encuentra en la URL localhost/phpmyadmin, una vez que entremos buscamos la base de datos donde se instaló WordPress.

exportar_bd

Se nos mostrará otra pantalla en la que elegiremos el método rápido en formato SQL.

metodo_formato_exportar

Reemplazar la URL del sitio local por remoto

Una vez que hemos descargado la base de datos de nuestro sitio, lo siguiente es reemplazar la URL local por la remota, (por ejemplo http://127.0.0.1:8000/www/rgluis a https://www.rgluis.com), la manera más simple para hacerlo es con un editor de código como Sublime Text. Abrimos nuestro archivo .sql en el editor y seleccionamos la opción del menú Find > Replace… (CTRL + H), damos clic en el botón Replace All.

reemplazar_url_con_sublime

Instalación de WordPress en servidor remoto

Para poder continuar, se requiere instalar WordPress en el servidor remoto, esto con el fin de asegurarnos de que la instalación cree el archivo wp-config.php y .htaccess que contendrá la configuración del sitio web.

Nota:  No importa qué datos registres en la instalación de WordPress (título del sitio, correo de contacto, usuario y contraseña) ya que van a ser sustituidos por los datos de nuestro archivo SQL que previamente editamos.

Copiar archivos locales a remoto

Nuestro siguiente paso es subir las carpetas del template, plugins y uploads a nuestro servidor remoto, los cuales se encuentran en la ruta: wp-content/themes/tu-template, wp-content/plugins, wp-content/uploads. Puedes utilizar cualquier cliente FTP con una conexión segura (SFTP), te recomiendo utilizar FileZilla.

Nota: Tienes que borrar las carpetas de plugins y uploads del servidor remoto y subir las de tu equipo local.

Eliminar e importar la base de datos en servidor remoto

Por último necesitamos eliminar las tablas de la base de datos donde se instaló WordPress en el servidor remoto y después importar las tablas del archivo .sql que editamos previamente, puedes hacerlo también con phpMyAdmin.

importar_bd

Espero te sea útil esta guía, si tienes dudas o algún aporte no dudes en dejarlo en los comentarios.

Cómo instalar LAMP (Linux, Apache, MySQL, PHP) stack en Ubuntu

El término LAMP es el acrónimo de el sistema operativo Linux, el servidor web Apache, el gestor de bases de datos MySQL / MariaDB y de los lenguajes de programación Perl, PHP o Python. Es el entorno de desarrollo más utilizado para programar aplicaciones.

Esta guía te mostrará cómo instalar un servidor LAMP (Linux, Apache, MySQL, PHP) en una de las distribuciones Linux más famosa, Ubuntu.

Paso 1: Actualizar el sistema

Antes de comenzar a instalar los paquetes, no esta de más actualizar nuestro sistema operativo:


sudo apt-get update
sudo apt-get upgrade

Paso 2: Instalar Tasksel

Tasksel es una herramienta que proporciona una interfaz sencilla, la cual agrupa los paquetes de software por tareas y hace más fácil su instalación. Lo instalamos de la siguiente manera:


sudo apt-get install tasksel

Paso 3: Ejecutar Tasksel para instalar LAMP server

Ejecutamos Tasksel en la terminal con permisos de administrador:


sudo tasksel

A continuación nos muestra los distintos paquetes de software que podemos instalar. Seleccionamos con la barra espaciadora “LAMP server, Basic Ubuntu server, OpenSSH server”:
tasksel_lamp_server

Después nos pedirá que ingresemos una contraseña para el usuario root (administrador) de MySQL:

tasksel mysql

Paso 4: Instalar phpMyAdmin

Una vez que haya terminado, procedemos a instalar phpMyAdmin que nos servirá para administrar MySQL desde una interfaz web:


sudo apt-get install phpmyadmin

Tenemos que elegir el servidor web que se debería configurar automáticamente para que ejecute phpMyAdmin. Seleccionamos la opción “apache2”:

seleccionar_apache2

Nos pedirá configurar una base de datos para phpMyAdmin y una contraseña para que se registre con el servidor de base de datos:

contrasena_phpmyadmin

Paso 5: Probar la instalación de Apache y phpMyadmin

Para probar que el servidor Apache está corriendo, abre la siguiente URL http://localhost en tu navegador, deberías de ver la siguiente pantalla:

prueba_apache_ubuntu

Una vez que comprobamos que Apache esta corriendo, verificamos que phpMyAdmin también se haya instalado correctamente. Abre esta URL http://localhost/phpmyadmin/ en tu navegador:

prueba_phpmyadmin

Espero que esta guía te sea útil. Si tienes algún aporte o pregunta que hacer no dudes en comentar.

Botón “Me gusta” de corazón en Twitter con CSS y jQuery

Twitter reemplazó su botón de favorito por uno nuevo de corazón. Me gustó la manera en que implementaron este efecto de animación. Este artículo te explicará paso a paso cómo implementarlo utilizando CSS3 y jQuery.

Código HTML


<div class="feeds">
    <div class="feed">
        <p>Click on the heart</p>
        <div class="actions">
            <div class="heart"></div>
        </div>
    </div>
</div>

Imagen de fondo para el botón

Haz clic en la imagen para verla en grande

web_heart_animation

Código CSS


.heart {
    background-image: url(web_heart_animation.png);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 1450px;
    cursor: pointer;
    display: inline-block;
    height: 50px;
    width: 50px;
}
.heart:hover
{
    background-position: right;
}

Animación CSS


@-webkit-keyframes heartTransition
{
    0% {background-position: left;}
    100% {background-position: right;}
}

@keyframes heartTransition
{
    0% {background-position: left;}
    100% {background-position: right;}
}

.heart_animate
{
    -webkit-animation-duration: .8s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: heartTransition;
    -webkit-animation-timing-function: steps(28);
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-iteration-count: infinite;
    animation-name: heartTransition;
    animation-timing-function: steps(28);
    background-position: right;
}

Código JavaScript


$(document).ready(function(){
    $('.heart').on('click',function(){
        $(this).toggleClass("heart_animate");
    });
});

Descarga el código fuente aquí