Mostrando entradas con la etiqueta development. Mostrar todas las entradas
Mostrando entradas con la etiqueta development. Mostrar todas las entradas

Nautilus: abrir terminal en el directorio actual

Si necesitas abrir una terminal en un directorio, es muy cómodo hacerlo desde Nautilus con "click derecho → abrir terminal aquí". Sobre todo a cuanta más profundidad esté el directorio.



El problema es que si reinstalas el sistema operativo, a veces no aparece. Pero no te preocupes, la solución es bien fácil. Abrimos un terminal e instalamos el paquete nautilus-open-terminal.

La instalación variará según nuestro gestor de paquetes:
  • Ubuntu: $ sudo apt-get install nautilus-open-terminal
  • Fedora: $ sudo dnf install nautilus-open-terminal
En principio debe de funcionar al abrir una instancia nueva de Nautilus. Si no os aparece simplemente lo cerramos desde la terminal con:

$ nautilus -q

Y ya debe de aparecernos dicha opción.

¡Feliz año!

Linux - mpi : no se encontró la orden

Los sistemas linux, como Ubuntu o Fedora, normalmente vienen con muchas aplicaciones y librerías, entre ellas está OpenMPI.
Si usas Ubuntu probablemente no necesitarás esto porque el directorio donde están los ejecutables de OpenMPI ya viene incluido en la variable de entorno 'PATH'.

¿ Cómo se si están incluidos o no?

Muy sencillo, abre una terminal y ejecuta
mpicc
o mpirun o cualquier otra orden de mpi.
Si obtienes el mensaje " ... : No se encontró la orden... " tienes que añadirlo al PATH.

¿ Cómo puedo añadirlo ?

Primero abre un terminal ( o usa el que abriste antes ) y ejecuta:
find /usr -name "mpirun"
Aquí estamos buscando el ejecutable "mpirun" que sabemos que es parte de la librería. Yo obtengo la siguiente salida:
/usr/lib64/openmpi/bin/mpirun
Normalmente siempre están en el directorio '/usr/lib64/openmpi/bin' si tu sistema es de 64bits o solamente "lib" si no lo es.
Ahora sólo tienes que añadirlo con:
export PATH=$PATH:/usr/lib64/openmpi/bin/
Si usas la orden 'export' tendrás que ejecutarla por cada terminal que abras o reinicies. Si no quieres tener que hacerlo cada vez hay que incluirlo en el archivo ".bashrc".

Abre una terminal y ejecuta:
cd ~
gedit .bashrc
Yo uso gedit, tú puedes usar tu editor favorito.

Y añadimos al final la orden 'export' usada anteriormente:

Linux - Command mpi not found

Linux systems, such as Ubuntu or Fedora, usually come with a lot of libraries or applications, and OpenMPI is among them.
If you use Ubuntu you probably won't need this because it includes the openmpi binaries folder in the environment variable 'PATH'.

How I know if I it's included or not?


It's quite simple, open a terminal and run:
mpicc
or mpirun or any other mpi command.
If you obtain the message " ... : Command not found... " you have to add it to PATH.

How can I add it?

First open a terminal ( or use the one you opened before ) and run:
find /usr -name "mpirun"
Here we are looking for the executable "mpirun" which we know it's part of the library. I obtain the following output:
/usr/lib64/openmpi/bin/mpirun
Normally it is always under '/usr/lib64/openmpi/bin' if your system is 64bits or only "lib" if not.
Now you only have to add it:
export PATH=$PATH:/usr/lib64/openmpi/bin/
If you use the export command you have to use it for every terminal you open / restart. If you don't want to do this only add it to your ".bashrc" file.

Open a terminal and run:
cd ~
gedit .bashrc
Use gedit or other text editor you like.

And at the end of the file add the previous export command:

CSS: 100% width - padding



El problema surge cuando tenemos un elemento que hace de contenedor. Si a los elementos que contienen les asignamos estas dos propiedades:
  • width: 100%;
  • padding-left: x ;

Dichos elementos primero adquieren el width (ancho ) de su padre y después se le aplica el padding, por tanto el elemento se desplaza fuera del padre.

Vamos a verlo con un ejemplo en JsFiddle:



La solución es agregar esta propiedad

 box-sizing:border-box; 

a los elementos que están dentro del contenedor y que causan el problema, tal y como podemos ver en el ejemplo, así este obstáculo queda resuelto.

¡ Saludos !

C / C++: Generar números aleatorios en un intervalo con rand()

A veces es probable que necesitemos generar números aleatorios en un intervalo determinado.

Para ello vamos a hacer uso de la función rand() incluida en la biblioteca / stdlib.h .

#include <cstdlib>

int main(){

  int fin_intervalo = 7;

  int numero = rand() % fin_intervalo;

}

El operador de módulo nos permite generar números en el intervalo [ 0, fin_intervalo - 1 ].

Por tanto sabiendo esto simplemente hay que ajustarlo en función del intervalo que queramos obtener.

El único inconveniente del módulo ( % ) es que no genera números distribuidos uniformemente.

Otro inconveniente es que, al ser siempre la misma semilla ( seed ) siempre que ejecutemos el código vamos a obtener el mismo resultado.

Si queremos solucionarlo tenemos que usar srand( int seed ). En la mayoría de los casos con usar el tiempo del sistema como semilla será suficiente (si no siempre podéis gestionarlo vosotros manualmente ).

Para hacerlo usando el tiempo del sistema usaremos time( NULL ) de la librería

#include <cstdlib>
#include <time.h>

int main(){

  int fin_intervalo = 7;

  // Generamos una semilla
  srand( time( NULL ) );

  int numero = rand() % fin_intervalo;

}



Aquí os dejo mi función para generar un número aleatorio en un intervalo.

#include <iostream>
#include <cstdlib>
#include <ctime>

int RandomNumber( int inicio, int fin ){
/*
Genera un número aleatorio entre
inicio y fin.
*/

int resultado = 0;

// Calculamos el margen entre inicio y fin
int margen = fin - inicio;

// Establecemos el comienzo del intervalo
int comienzo = inicio;

// Comprobamos si el intervalo está al revés
if( inicio > fin ){

// Cambiamos el comienzo
comienzo = fin;

// Cambiamos el signo de la diferencia
margen = margen * -1;
}

/*
* Añadimos uno al margen ya que la función
* rand calcula entre el 0 y uno menos que
* el margen.
*/
margen++;

/*
Si el intervalo no comienza y acaba en el
mismo número.
*/

// Generamos el número aleatorio.
resultado = comienzo + (rand() % margen);

return resultado;
}

int main(){

int inicio;
int fin;

/////// ENTRADA DE DATOS \\\\\\\

std::cout << "Introduce el inicio del rango: ";
std::cin >> inicio;

std::cout << "Introduce el final del rango: ";
std::cin >> fin;

std::cout << std::endl;

/////// SALIDA DE DATOS \\\\\\\

// Inicializamos la semilla
srand( time( NULL ) );

// Calculamos 10 números aleatorios
for(int i = 0; i < 10; i++ ){
std::cout << "Número aleatorio: " << RandomNumber(inicio, fin) << std::endl;
}

}

Ubuntu: instalar y configurar Git con GitHub



Git es un software de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando estas tienen un gran número de archivos de código fuente. - Wikipedia

Instalación

Procedemos a instalarlo de la forma más sencilla, desde los propios repositorios de Ubuntu.
sudo apt-get update


sudo apt-get install git

Configuración

Para configurarlo escribimos (como siempre, en un terminal):
git config --global user.name ""
git config --global user.email ""
Podemos ver la configuración con el comando:
git config --list
Si nos hemos equivocado o queremos modificarlo, editamos el fichero:
gedit ~/.gitconfig

Clave SSH

Para poder conectar con el servidor de GitHub necesitamos generar una clave SSH, para ello:
ssh-keygen
La terminal nos responderá con la frase "Enter file in which to save the key (/home/carlos/.ssh/id_rsa)".
Si no queremos modificarlo pulsamos enter.

Ahora nos pedirá una "passphrase", que añade una capa de seguridad extra. Así que escribimos y confirmamos una contraseña.

Instalamos 'xclip' que nos permite copiar contenido al portapapeles.
sudo apt-get install xclip

Ahora ejecutamos este comando para copiar la clave en el portapapeles. Si habéis cambiado el directorio de generación modificadlo en el comando.
xclip -sel clip < ~/.ssh/id_rsa.pub

Una vez listo nos dirigimos a GitHub y en "Configuración -> SSH Keys" pulsamos "Add SSH Key".



Ahora le ponemos un título y donde pone "Key" pulsamos "Ctrl+V". Pulsamos el botón "Add key".
Para comprobar que funciona ejecutamos:
ssh git@github.com
Nos dirá que si queremos conectarnos, escribimos "yes" y pulsamos enter. Si pusimos una passphrase nos la pedirá, la escribimos y confirmamos.

Si todo ha ido bien nos saldrá "PTY allocation request failed on channel 0
Hi <usuario>! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.".

En el próximo tutorial aprenderemos a trabajar con repositorios.

¡Un saludo!

Sublime Text 2 : Destacar operadores en color [ C++ ]

En Sublime Text 2, el conocido editor de texto para código, en los programas en C++ si os habéis fijado los operadores en el código aparecen del color genérico del tema que tengáis seleccionado ( por defecto es el blanco ).
Si queréis que éstos resalten en algún color sólo tenemos que sustituir una línea en un fichero del programa. Directorio del archivo:
 ** Directorio de Sublime Text ** /Pristine Packages/C++.sublime-package
Hacemos doble click en dicho archivo y se nos abrirá el gestor de archivos. Dentro abrimos este otro archivo:
C++.tmLanguage
Buscamos este código o uno parecido ( para ello buscad: "keyword.operator" y fijaros en el que tenga la etiqueta "<string>"):
<dict>
   <key>match</key>
   <string>=|==|&lt;&gt;|:=|&lt;|&gt;|\*|\/|\+|:|\?|\-|!=|.=||\|\|</string>
   <key>name</key>
   <string>keyword.operator.c++</string>
  </dict>
Sustituimos la etiqueta "<string> ... </string>" por esta otra:
<string>\[|\]|;|%|=|==|&lt;&gt;|:=|&lt;|&gt;|\*|\/|\+|:|\?|\-|!=|.=||\|\||&amp;&amp;</string>
Tal que así:
Guardamos y ¡listo!
Si alguno no conoce el editor aquí tiene su web desde donde puede descargárselo. ( Enlace )

Programando en C++: Tipos de datos (primitivos)

Los tipos de datos primitivos son aquellos que están definidos dentro del lenguaje. De todas formas vamos a ver los más usados, si queréis más información (enlace).

El problema en C/C++ es que el tamaño de las variables depende únicamente del compilador. Así si trabajamos en un ordenador de 64 bits: short <= int <= long <= long long <= 64.
Por tanto podemos usar el operador sizeof( tipo_dato ) para saber el tamaño. De todas formas vamos a ver los tamaños orientativos:

Tipos de datos numéricos enteros

  • short : 2 bytes (16 bits)
  • int : 4 bytes (32 bits)
  • long : 4 bytes (32 bits)
  • long long : 8 bytes (64 bits)
  • char : 1 bytes (8 bits)
El dato tipo char almacena caracteres (según el tipo de codificación) como números. Aquí (enlace) tenéis una lista de los valores.

Tipos de datos numéricos reales

  • float : 4 bytes (32 bits)
  • double : 8 bytes (64 bits)
Estos datos nos permiten almacenar números muy grandes, pero nos ofrecen poca precisión (de aproximadamente unos 15 dígitos). Más información del sistema 'coma flotante' (enlace).

Tipo de datos lógico

El dato bool puede ser true ( != 0 ) o false ( 0 ). Tiene 1 byte.

Sigend / Unsigned

Básicamente nos permiten almacenar más numeros pero sin signo. Por ejemplo, un int normal se considera 'signed', por tanto su rango estaría en el intervalo (suponiendo que es de 32 bits) [-2^16, 2^16-1]. El menos uno se debe a que incluimos el 0 en alguno de ellos.
En cambio un unsigned int iría desde el 0 hasta 2^32.

Comentad cualquier problema, si os ha sido de ayuda o no y lo que queráis tratar en la próxima entrega.
¡Saludos!

Processing: capturar pantalla usando Robot (java.awt)

Lo primero es saber qué es Processing (según Wikipedia):
Processing es un lenguaje de programación y entorno de desarrollo integrado de código abierto basado en Java, de fácil utilización, y que sirve como medio para la enseñanza y producción de proyectos multimedia e interactivos de diseño digital.
Es muy interesante ya que tiene librerías muy interesantes sobre todo para comunicar el PC con Arduino mediante el serial.
En este caso vamos a ver cómo utilizar la clase Robot de Javapara capturar la pantalla. Código:
//Importamos las librerías necesarias para el tratamiento de la imagen
import java.awt.*;
import java.awt.image.*;
import javax.imageio.ImageIO;

//Creamos los objetos para guardar la imagen
Robot robot;
//Este es el buffer donde se guardaran los datos
BufferedImage screenshot = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
//Area de la region a capturar. Podeis cambiar la region:
// Rectangngle rect = new Rectangle(width, height);
Rectangle rect = new Rectangle( Toolkit.getDefaultToolkit().getScreenSize() );
//Formato de la imagenguardada, ruta del archivo y nombre
String formato = "png";
String ruta = "/home/usuario";
String nombre_archivo = "screenshot";

//La funcion setup() se ejecuta al iniciar
void setup(){
  //Comprobamos que podemos crear el objeto
  try {
    robot = new Robot();
  }
  catch (AWTException e)
  {
    println("Robot class not supported by your system!");
    exit();
  }
  //Capturamos pantalla con el area del rectangulo
  screenshot = robot.createScreenCapture(rect);
  //Creamos el arvhico donde se guardara
  File archivo = new File(ruta + nombre_archivo + "." + formato);
  
  try {
    //Guardamos la imagen
    ImageIO.write(screenshot, formato, archivo);
    println("Imagen guardada");
  } catch(IOException e) {
    System.out.println("Write error for " + archivo.getPath() + ": " + e.getMessage());
  }
  //Salimos del programa
  exit();
}
Este código es muy sencillo. Luego vosotros podéis crear un bucle para tomar una captura cada cierto tiempo o hacer lo que necesitéis.
Espero que os sirva de ayuda y si os es útil compartid y comentad que es gratis!
¡Saludos!

Obtener Feed en JSONP de Blogger/Feedburner

¿Qué es JSONP? (Wikipedia):
JSONP o JSON con padding es una técnica de comunicación utilizada en los programas JavaScript para realizar llamadas asíncronas a dominios diferentes. JSONP es un método concebido para suplir la limitación de AJAX entre dominios, que únicamente permite realizar peticiones a páginas que se encuentran bajo el mismo dominio y puerto por razones de seguridad.
Es decir, podemos obtener con JQuery o JS datos de otro dominio (en este caso el 'post feed') evitando así el error de 'Cross Domain' y cumpliendo la 'Política del mismo origen' (Same origin policy, wikipedia). A grandes rasgos una medida de seguridad para evitar que las peticiones AJAX accedan a datos como las cookies o credenciales para suplantar (por ejemplo) una identidad.
Una vez entendido esto pasamos a ver cómo podemos acceder al 'Feed' del blog. Primera forma:
http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=100&q=http://feeds.feedburner.com/nombre_blog_feedburner
O la segunda forma:
http://tudominio.com/feeds/posts/default?orderby=published&max-results=10&alt=json-in-script&callback=nombre_funcion
Podéis cambiar el número de 'post' que queréis que devuelva (cambiando 'num=X' o 'max-results=X'). Usando la segunda forma necesitaremos crear una función con el nombre indicado en el callback, y nos devolverá los datos (JSONP).
Espero que os sirva de ayuda :)

Cómo añadir estilos CSS en HTML

Vamos a ver cómo podemos añadir hojas de CSS a nuestra página web/blog.

Desde un archivo

Si tenemos nuestras hojas de estilo en un archivo llamado 'style.css' incluiremos dentro de la etiqueta <head> lo siguiente:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
Si tenemos la URL del archivo sustituiremos 'style.css' por la dirección web, o si está dentro de una carpeta '/carpeta/style.css'.

Dentro del documento HTML

Tan sencillo como escribir los estilos dentro de estas etiquetas, situadas (de nuevo) dentro de la etiqueta <head>:
<style media="screen" type="text/css">



</style>

Dentro de una eqtiqueta

Sólo tenemos que añadir el atributo 'style' y dentro nuestras reglas CSS:
<p style="color:blue;">Párrafo de color azul</p>

Importar un archivo dentro de CSS

También podemos importar un arhivo CSS desde otro archivo (que puede ser una URL) CSS utilizando @import:
@import 'archivo.css';
Más información sobre '@import'.

How to add CSS to HTML

Let's see how we can add CSS to our website / blog page.

From a file

If you have our style sheets in a file called 'style.css' you'll add the following inside the tag <head>:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
You can replace the file 'style.css' with a URL, or if you have it inside a folder: '/ folder / style.css' .

Inside the HTML document

As simple as writing styles inside these tags, located (again) within <head>:
<style media="screen" type="text/css">



</style>

Within a tag

We just have to add the 'style' attribute and our CSS rules:
<p style="color:blue;">Blue paragraph</p>

Importing CSS file

We can also import a CSS stylesheet from another file (which can be a URL) using @import:
 @ import 'file.css'; 
More about 'import '.

Problemas HTML acentos y eñes: caracteres de escape y codificación

La codificación de las páginas web puede llegar a ser un problema a la hora de mostrar acentos, eñes, o caracteres especiales. Si no vamos a utilizar dichos caracteres la codificación nos da igual ya que en un momento concreto podemos utilizar los caracteres de escape, pero si no lo más cómodo es establecer correctamente la codificación de la página.

Caracteres de escape

Un carácter que de otro modo se interpretaría como una construcción de lenguaje sin escape, se debe interpretar literalmente.
Por ejemplo si estamos editando una página web y queremos mostrar el caracter '<' sería un problema ya que sirve para delimitar las etiquetas.

Algunos ejemplos son:
á -> &aacute;
é -> &eacute;
í -> &iacute;
ó -> &oacute;
ú -> &uacute;
ñ -> &ntilde;
Pero si queremos transformar una cadena y no ir uno a uno, o queremos consultar alguno en concreto, podemos usar esta fantástica web que lo automatiza (enlace aquí).

Codificación

Los documentos transmitidos con HTTP que son de tipo texto, como text/html, text/plain, etc., pueden enviar un parámetro charset en el encabezado de HTTP para especificar la codificación de caracteres del documento. Es muy importante etiquetar siempre los documentos web en forma explícita. HTTP 1.1 dice que el charset predeterminado es ISO-8859-1. Sin embargo, existen demasiados documentos sin etiquetar en otras codificaciones. Por lo tanto, los exploradores utilizan la codificación preferida del lector cuando no exista ningún parámetro charset explícito.
Una vez definido vamos a ver como podemos anunciar el encoding que estamos utilizando:

Html

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
(para el español utilizaremos el 'UTF-8')

No olvidéis configurar también vuestro servidor Apache o a las bases de datos MySQL.

Project Euler


Project Euler es una interesante página web donde se planean diferentes retos matemáticos que, más allá de requerir conocimientos de matemáticas, necesita de conocimiento informático para poder conseguir resolver los problemas.

Es bastante interesante ya que algunos no son nada fáciles, y si realmente os gusta y tenéis un rato libre os animo a ver cuantos problemas sois capaces de resolver.


Twitter: @Pirobtumen

Metatag - Un poco de html

Un metatag o "meta" son etiquetas html que sirven para que los robots encargados de encontrar una página web incluya esta información y facilite su búsqueda, aunque no modificará la apariencia del sitio.
Concretamente se utilizan para especificar información sobre el propio documento.

El lugar donde se ubican es entre las etiquetas de "<head> </head>" y la forma de introducirlo es:

<meta name="" content=""/>


Donde "name" contiene el tipo de etiqueta, y "content" el contenido de dicha etiqueta. Aquí algunos ejemplos:


<meta name='Description' content='Descripcion breve que aparecerá en la búsqueda'/>
<meta name='Keywords' content='blog, metadatos, html'/>
<meta name='Author' content='Nombre'/>

Generador de colores

Es un generador de colores RGB o Hexadecimal que puede ser muy útil cuando se quiere cambiar un color dentro de un plantilla de un blog, por ejemplo.
Sólo tenéis que pinchar en la tabla y elegir el tono, la intensidad....



Tabla obtenida de aquí

Si queréis que enseñe como cambiar el color de las letras (por ejemplo) de tu plantilla de blogger, ¡Nada más que comentarlo por aqui!