More entries

_posts/2016-07-06-virtualbox-lubuntu-y-sus-guest-additions.md

@@ -0,0 +1,76 @@
+---
+title: VirtualBox, Lubuntu y sus Guest Additions
+description: Como manejar las guest additions de virtual box con sistemas Linux
+author: inazense
+date: 2016-07-06 15:54:00 +0100
+categories: [Sistemas Operativos]
+tags: [virtualbox, linux]
+image:
+  path: /assets/pictures/posts/sistemasoperativos_logo.jpeg
+  alt: Sistemas Operativos post
+---
+
+Desde siempre me ha gustado trastear con Linux, más concretamente con Fedora y, por motivos de trabajo, con Ubuntu. Como en mi portatil tengo un Windows y no me apetece hacer una instalación dual, siempre he funcionado con máquinas virtuales, pero odio que aunque le asigne 2GB de RAM vayan absurdamente lentas, y más con las nuevas versiones de estos dos sistemas (aunque bueno, Fedora 24 es bastante pasable en cuanto a requisitos se refiere).
+
+El caso es que en la ONG donde estoy como voluntario, Reciclaje Tecnológico, quería enseñar a un chico a hacer una instalación desde cero con un Ubuntu, pero los equipos que disponemos son de bajas prestaciones (rondan los 512MB de RAM y Pentium IV de procesador), así que nos decantamos por una distro que consumiera pocos recursos.
+
+Probé varias en mi máquina virtual y la que más me enamoró fue Lubuntu, que puede funcionar con un Pentium II y 128MB de RAM y cuenta con un escritorio LXDE.
+Me he descargado la última versión liberada, la 16.04 LTS y la he montado en VirtualBox para trastear con ella antes de llevarsela al chico. Curiosidad profesional.
+
+Es una distro ligera, funciona muy bien en una emulación con 512MB de RAM y usando un único núcleo de mi CPU (Intel I5), pero hay que decir que así de entrada, viene muy pelada de software sobre todo en comparación con su bien nutrido hermano Ubuntu. Eso me viene al pelo porque así aprovecharé y le puedo enseñar al chico a instalar software necesario desde la terminal, pero hubo una cosa que me molestó mucho al realizar la virtualización.
+
+Las Guest Additions.
+
+Por defecto, en mi portatil el SO se veía tal que así
+
+![lubuntu en virtual box 1](/assets/pictures/posts/vbox_1.png)
+
+Si os fijais no puedo visualizar el escritorio completo, tengo que usar los scrollbars tanto verticales como horizontales. Es una porquería, pero basta con instalar las Guest Additions de VirtualBox yendo a Dispositivos - Instalar Guest Additions y la cosa queda solucionada.
+
+El problema viene cuando tu sistema operativo está tan pelado que no incluye los paquetes necesarios para instalarlas.
+
+Y ahí es donde quería llegar yo.
+
+## ¿Cómo instalar Guest Additions en Virtual Box con una máquina virtual de Lubuntu?
+
+Lo primero es irnos a `Dispositivos - Instalar Guest Additions` (¡sin instalarlas!)
+
+![lubuntu en virtual box 2](/assets/pictures/posts/vbox_2.png)
+
+Después de eso, deberemos abrir una terminal e instalar el compilador C++ y el paquete Make.
+Eso se hace con los siguientes comandos
+
+```bash
+sudo apt-get install gcc
+sudo apt-get install make
+```
+
+Una vez que estén instalados, solo nos quedará ejecutar el paquete de las Guest Additions desde la terminal, en mi caso. Debemos acceder a la ruta `/media/nombreDeTuUsuario/VBoxAdditions`... 
+y ejecutaremos el paquete de instalación de la siguiente forma
+
+```bash
+sudo ./VBoxLinuxAdditions.run
+```
+
+En mi máquina virtual por ejemplo quedaría tal que así:
+
+```bash
+inazio@lubuntuVirtual:/media/inazio/VBOXADDITIONS_%.0.24_108355$ sudo ./VBoxLinuxAdditions.run
+```
+
+Hecho ese último paso, solo nos queda reiniciar la máquina virtual y podremos disfrutar del resultado final a pantalla completa
+
+![lubuntu en virtual box 3](/assets/pictures/posts/vbox_3.png)
+
+Esta entrada no tiene mucho que ver con las anteriores de programación, pero considero basatnte útil saber personalizar y estar a gusto en tu máquina virtual. Espero que os haya servido
+
+**Editado:**
+
+Como ha dicho Anónimo en los comentarios, hay alguna vez que también es necesario instalar los fuentes del kernel para poder usar las Guest Additions correctamente.<br>
+Para ello debemos escribir en la terminal la siguiente línea
+
+```bash
+sudo apt-get install linux-source
+```
+
+**¡Salud y coding!**

_posts/2016-08-21-instalacion-y-configuracion-de-git-en-windows.md

@@ -0,0 +1,118 @@
+---
+title: Instalación y configuración de Git en Windows
+description: Cómo instalar y configurar git en Windows paso a paso
+author: inazense
+date: 2016-08-21 00:26:00 +0100
+categories: [Git]
+tags: [git, windows]
+image:
+  path: /assets/pictures/posts/git_logo.jpeg
+  alt: Git post
+---
+
+**Git** es un programa de control de versiones diseñado por Linus Torvalds - AKA ese señor creador del kernel Linux - que fue pensado para tener una gran eficiencia y confiabilidad del mantenimiento de versiones de nuestras aplicaciones.
+
+Es decir, **Git** lo usaremos para tener control y registrar los cambios realizados sobre uno o varios archivos a lo largo del tiempo, de modo que si la fastidias o necesitas recuperar alguna versión antigua nos resulte más sencillo que gestionando copias de nuestro código "a pelo".
+
+**Git** está basado en un sistema de control de versiones distribuido (**DVCS** en inglés). En un **DVCS** los clientes, aparte de descargar la última instantánea de los archivos, también pueden replicar completamente el repositorio. De este modo, si un servidor muerte y los sistemas están colaborando a través de él, cualquiera de los repositorios clientes podrá copiarse en el servidor de nuevo y restaurarlo.<br>
+Es decir, cada vez que hacemos una instantánea realmente estamos haciendo una copia de seguridad completa. Eso, mezclado con la enorme velocidad de **Git**, hace que trabajar sea mucho más seguro, eficiente y mantengamos siempre un control sobre nuestro software.
+
+Para hacernos una mejor idea, observa la siguiente imagen que lo resume.
+
+![instalación de git en windows 1](/assets/pictures/posts/git_install_1.png)
+
+## ¿Cómo instalo Git en Windows?
+
+Lo primero será acceder a la página oficial de Git para Windows [(https://git-for-windows.github.io/)](https://git-for-windows.github.io/) y descargarnos el ejecutable pulsando en Download.
+
+Cuando se lance la instalación y después de haber aceptado la licencia de términos de uso y haber elegido una ruta donde instalarlo, veremos la pantalla de los componentes a instalar.
+
+![instalación de git en windows 2](/assets/pictures/posts/git_install_2.png)
+
+Deja todo por defecto. De esta manera se instalará **Git** en dos formatos, consola e interfaz gráfica (aunque personalmente esta última no me gusta mucho) y se asociarán los archivos de configuración `.git` a el editor de texto por defecto, además de poder ejecutar los .sh con la consola de Bash. Sí, aunque no tengamos Linux **Git** lo trabajaremos con **Bash**.
+
+Pulsamos Next y pasaremos a la sección donde configuraremos como usar la consola de comandos de **Git**.
+
+![instalación de git en windows 3](/assets/pictures/posts/git_install_3.png)
+
+En este caso yo quiero usar **Git** tanto desde **Bash** como desde **CMD**, así que elijo la segunda opción. Si quieres usarlo únicamente desde **Bash**, deberás marcar la primera.
+
+De nuevo le damos a Next y procederemos a configurar como tratará Git los finales de línea en los archivos de texto.
+
+![instalación de git en windows 4](/assets/pictures/posts/git_install_4.png)
+
+Dejamos la opción por defecto simplemente, para no complicarnos. Pulsamos `Next` para elegir que emulador queremos para poder usar Bash.
+
+![instalación de git en windows 5](/assets/pictures/posts/git_install_5.png)
+
+Elijo MinTTY, la terminal por defecto. Es más sencillo de configurar y no tiene tantas limitaciones.
+
+Y por último habilito las dos opciones extra que me ofrece **Git**, habilitar el cache en los archivos de sistema y el administrador de credenciales.
+
+![instalación de git en windows 6](/assets/pictures/posts/git_install_6.png)
+
+Con estos pasos, y después de pulsar Install, ya tendremos listo en nuestra máquina **Git**. Vayamos a la segunda parte, su configuración básica.
+
+## Cómo configurar Git
+
+Una vez que tenemos instalado **Git**, vamos a querer hacer algunas configuraciones para personalizar su entorno. Sólo necesitamos configurarlo una vez, aunque podremos cambiarlo en cualquier momento simplemente volviendo a ejecutar los mismos comandos.
+
+La herramienta que usaremos se llama `git config`, que nos permitirá obtener y establecer variables de configuración para el aspecto y funcionamiento de *Git*.
+Dichas variables se almacenarán en sistemas Windows en _C:\Users\$USUARIO_ en un archivo llamado _.gitconfig_.
+
+Yo me voy a centrar en configurar mi identidad, pero hay otras muchas cosas que se pueden modificar.
+
+Lo primero será abrir nuestro **Git Bash** recién instalado.
+
+![instalación de git en windows 7](/assets/pictures/posts/git_install_7.png)
+
+Se nos abrirá una nueva terminal, y ya que estamos vamos a comprobar que versión de **Git** tenemos instalada escribiendo `git --version`
+
+```bash
+$ git --version
+git version 2.9.3.windows.1
+```
+
+Bien, hecho esto vamos a indicarle nuestro nombre y correo electrónico. Esta parte es importante porque todos los **commits** de **Git** usarán esta información.
+
+Escribiremos lo siguiente
+
+```bash
+git config --global user.name "Inazio Claver"
+git config --global user.email inazio@programando.apasitos
+```
+
+Con la variable `--global` **Git** usará esta información para todo el sistema. Si en un momento determinado necesitas cambiar esta información para un proyecto en concreto, basta con lanzar el mismo comando sin esa variable cuando estés dentro del proyecto.
+
+Aparte de eso también puedes configurar tu editor de texto por defecto con el siguiente comando:
+
+```bash
+git config --global core.editor MiEditor
+```
+
+Y la herramienta para diferencias por defecto, que usaremos para resolver los conflictos en los merge (cuando unamos las ramas). Se hace así
+
+```bash
+git config --global merge.tool MiHerramienta
+```
+
+Ahora sólo nos queda comprobar la configuración. Escribe el siguiente comando
+
+```bash
+git config --list
+```
+
+Veremos algo así
+
+```bash
+credential.helper=osxkeychain
+init.defaultbranch=main
+user.name=Inazio Claver
+user.email=inazio@programando.apasitos
+```
+
+Y esto sería una configuración básica para Git. Ya estamos listos para usar nuestra herramienta de control de versiones.
+
+Aquí no vas a aprender a manejar Git, no es el fin de este blog porque no soy un experto y, sobre todo, porque hay un libro facilitado por la propia plataforma que lo explica a las mil maravillas, **Pro Git**. Es gratuito, traducido al español, y podéis visitarlo pulsando [aquí](https://git-scm.com/book/es/v2).
+
+**¡Salud y coding!**

_posts/2016-09-19-zen-coding-con-emmet.md

@@ -0,0 +1,172 @@
+---
+title: Zen coding con Emmet
+description: Tutorial de Emmet desde cero
+author: inazense
+date: 2016-09-19 00:31:00 +0100
+categories: [Web development]
+tags: [html, css, emmet, web]
+image:
+  path: /assets/pictures/posts/web_logo.jpg
+  alt: Web developer post
+---
+
+Cada vez que desarrollo una página web lo que más pesado se me hace es escribir siempre la estructura básica de la misma, y tener que abrir y cerrar etiquetas constantemente. Puede parecer una tontería, pero siento como que se pierde un montón de tiempo en algo tan banal como crear dos listas anidadas en **HTML**, definir la estructura de un **HTML5**, etc.
+
+Dispuesto a encontrar una manera de agilizar ese proceso, hace unos meses, mientras desarrollaba mi proyecto final de ciclo, descubrí el **Zen coding**, y junto a él, **Emmet**.
+
+¿Y qué es el **Zen coding**? Es la mejora de la productividad en la creación de páginas web, a base de la generación de abreviaturas para escribir código **HTML** y **CSS**. Y en Emmet encontré su máximo exponente.
+
+Emmet son sintaxis de abreviaturas ya predefinidas que nos permite, en una sola línea, escribir estructuras complejas **HTML**, añadiendole atributos, clases, identificadores y contenido.
+
+Imaginemos, por un suponer, que queremos generar el siguiente contenido en **HTML**:
+
+```html
+<!DOCTYPE html>
+<html lang="es">
+<head>
+ <meta charset="UTF-8">
+ <title>Programando a pasitos</title>
+</head>
+<body>
+
+</body>
+</html>
+```
+
+Pues bien, con Emmet podemos generar esta sintaxis escribiendo esta única línea y después pulsar la tecla de tabular.
+
+```html
+html:5
+```
+
+¿Rápido y sencillo, verdad? Entonces, entremos un poco más al trapo
+
+## ¿Dónde y como usar Emmet?
+
+Emmet lo encontraremos como plugin para multitud de editores de código e IDEs. Es tan sencillo como buscar la extensión e instalarla, a poco que sea un programa que se precie el que emplee, seguro lo tendrá. **Brackets** (el que yo empleo), **Atom**, **Sublime Text**, **Notepad++**, **Eclipse** y **Netbeans**, todos ellos, cuentan con el susodicho paquete para ser instalado. Pero recuerda, no viene por defecto.
+
+Para usar **Emmet** tendremos que aprendernos las sintaxis de sus atajos. Son muy sencillas, y simplemente con practicar un poco no tendremos problemas en recordar los métodos más sencillos.<br>
+Y para generar el elemento simplemente escribiremos el atajo pertinente y pulsaremos la tecla tabular. Sencillo y eficaz.
+
+## Atajos
+
+La lista completa de atajos la podemos encontrar en la documentación oficial de Emmet, que aparte de multitud de explicaciones contiene una sección que actúa como chuleta, muy eficaz cuando quieres consultar algún atajo.
+
+[Documentación oficial de Emmet](https://docs.emmet.io/)<br>
+[Chuleta de atajos](https://docs.emmet.io/cheat-sheet/)
+
+Aquí voy a tratar de incluir los casos más comunes. Si tienes cualquier consulta que no encuentras en la documentación o deseas alguna explicación concreta o atajo, puedes usar los comentarios para ello.
+En la primera línea encontraremos el atajo Emmet y en las siguientes la estructura que generará en HTML.
+
+Para generar una etiqueta basta con escribir su nombre, sin agregar paréntesis, y nos creará tanto la etiqueta de apertura como la de cierre
+
+```html
+div
+
+<div></div>
+```
+
+Si, por ejemplo, queremos crear una etiqueta dentro de otra, bastará concatenar las dos etiqueta con el símbolo mayor que.
+
+```html
+div>p
+
+<div>
+ <p></p>
+</div>
+```
+
+Podremos hacer tantos anidamientos como deseemos, no hay límite para ello. Además, podemos crear varios elementos en el mismo nivel. Si quieremos construir un párrafo y una imagen dentro del mismo div, por ejemplo, haremos lo siguiente
+
+```html
+div>p+img
+
+<div>
+ <p></p>
+ <img src="" alt="">
+</div>
+```
+
+¿Y si ahora quisieramos volver a un nivel superior? Tenemos dos formas de actuar en este caso. La primera es hacer grupos de etiquetas entre paréntesis y luego crear fuera de él un elemento en el mismo nivel. O la segunda opción, subir un nivel con el símbolo ^ y escribir directamente la etiqueta. El resultado es igual en ambos casos. Veámoslos
+
+```html
+(div>p+img)+h1
+
+div>p+img^h1
+
+<div>
+ <p></p>
+ <img src="" alt="">
+</div>
+<h1></h1>
+```
+
+**Emmet** también nos permite duplicar elementos sin necesidad de volver a escribirlos agregándolos con el +. Si queres escribir una lista de cinco elementos, podemos usar el operando * para hacer referencia a la cantidad de elementos que deseemos.
+
+```html
+ul>li*5
+
+<ul>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+</ul>
+```
+
+Empezándonos a adentrar en las propiedades de las etiquetas debemos ver las dos fundamentales, clases e id.
+
+Las clases las asignaremos escribiendo la etiqueta, un punto y a continuación la clase que queramos. Podemos agregar tanto como nos apetezca, concatenando una detrás de otra con puntos, y siempre sin espacios.
+
+```code
+div.container
+div.container.container-fluid
+
+<div class="container"></div>
+<div class="container container-fluid"></div>
+```
+
+Y con los id el proceder es muy similar. Concatenar etiqueta, símbolo # y el id
+
+```html
+div#principal
+
+<div id="principal"></div>
+```
+
+Si deseamos agregar el resto de atributos, deberemos hacerlo entre corchetes, definiendo la propiedad, igual a, y posteriormente entre dobles comillas su valor.
+
+```html
+img[src="/path/miImagen.jpg" alt="Programando a pasitos" title="Programando a pasitos"]
+
+<img src="/path/miImagen.jpg" alt="Programando a pasitos" title="Programando a pasitos">
+```
+
+Y no todo es HTML, el texto a mostrar dentro de las etiquetas también es importante. Si queremos escribir texto dentro de una etiqueta, con emet podemos hacerlo después del nombre de la etiqueta y sus atributos, entre llaves {}.
+
+```html
+p{Programando a pasitos rocks!}
+
+<p>Programando a pasitos rocks!</p>
+```
+
+Emmet también nos permite generar numeradores automáticos, útiles por ejemplo para diferenciar entre clases, personalizar enlaces, diferenciar texto... Por ejemplo, vamos a generar una lista en la que el contenido de sus elementos sean distintos uno de otro.
+
+```html
+ul>li{Elemento $}*5
+
+<ul>
+ <li>Elemento 1</li>
+ <li>Elemento 2</li>
+ <li>Elemento 3</li>
+ <li>Elemento 4</li>
+ <li>Elemento 5</li>
+</ul>
+```
+
+Hay muchos más ejemplos, para ello recomiendo mirarse la documentación que he ofrecido más arriba. Esto es una introducción que te permitirá funcionar en gran parte del trabajo de tus páginas web, pero se queda en eso, en una breve explicación. Puedes profundizar mucho más si lo deseas, o conforme te vayan surgiendo necesidades y dudas.
+
+Como he dicho, **Emmet** se consigue dominar a base de práctica constante, llegará un momento que sale más natural que abrir y cerrar etiquetas. Pruébalo y notarás como podrás codificar **HTML** y **CSS** mucho más rapida y eficazmente que antes.
+
+**¡Salud y zen coding!**