martes, 26 de noviembre de 2013

Uso de la etiqueta @Font-face en CSS para importar tipografía a nuestra pagina


Uno de los problemas que tenemos al tratar de desarrollar una pagina mas los que vamos empezando es que la tipografía que yo tengo en mi computadora muchas veces va acorde a lo que tengo programando, pero recordemos que estas tras un mundo de posibles clientes a tu, por lo que puede ser que tu cliente no tenga el estilo de fuente que tu ves que en tu sitio es el adecuado, por lo que en la parte de CSS 3 tenemos la siguiente etiqueta font-face para importar la tipografía directamente el servidor o directamente desde un servicio publico.

Buena para eso su uso viene especificado directamente en la referencia CSS3 de la siguiente manera:

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

Por ejemplo en la imagen que estoy utilizando manejo un tipo de letra FiraSansOT-RegularItalic para el texto y para encabezado chango. La primera de ellas la traigo directamente de la carpeta de mi servidor y la otra la vinculo al servicio de google fonts

Primero voy a crear mi pagina
<!DOCTYPE html>
<html>
<head>  
   <title> Probando Css Externo</title>
   <link href="theme.css" rel="stylesheet" type="text/css"></link>
   <link href="http://fonts.googleapis.com/css?family=Chango" rel="stylesheet" type="text/css"></link>
</head>
<body>
   <h1>
Pagina de prueba </h1>
<p>
Esta es una pagina para probar etiquetas con
formato en css en un archivo externo  para mejor
acomodo</p>
</body>
</html>


Notemos la linea

 <link href='http://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'>

Esta linea hace referencia a que se manejara un servicio de google fonts para poder hacer la llamada, con eso ya tengo activado chango

Por ultima creamos nuestra hoja de estilo css



@font-face {
 font-family: Propia;
 src: url(FiraSansOT-RegularItalic.otf) format("opentype");
}

p{
 font-family: Propia;
}

h1{
 font-family: 'Chango', cursive;
}

Una interfaz sencilla utilizando GTK 3.0, Bluez y C

En el post anterior estuvimos viendo como crear una interfaz de una forma sencilla de la siguiente forma nuestra intención es que podamos controlar un mini-robot y podamos activar los motores para su movimiento.


Lo primero que vamos a necesitar es un chasis para mini robot proposito general, arduino, un puente H, pilas, bluetooth shield para arduino y algunos cables para las conexiones. (No abarcaremos las conexiones puesto que el objetivo del post es la programación)

Estamos utilizando en este ejemplo una versión de Linux en este caso Mint para poder hacer toda la programación, para eso necesitamos las librerías estándar de programación y en este caso bluez que ya viene prácticamente ya viene instalado solo necesitamos las librerías que usaremos.

Pues vamos a instalarlo lo primero que debemos hacer es poner el siguiente comando:

$ sudo apt-get install libbluetooth-dev

Una vez que tenemos instalado las librerias, vamos a trabajarlo directamente en el codigo que estamos utilizando para la interfaz por lo que para este ejemplo el arduino tiene programado que cuando reciba una "a", prenda los motores para que avance el carro, cuando recibe una "r" hacia atrás, "i" a la izquierda y "d" a la derecha.

Empezaremos por declarar el socket para podernos comunicarnos por bluetooth

    struct sockaddr_rc addr = { 0 };
    int status;
    char dest[18] = "00:13:03:19:00:50";
    s = socket(AF_BLUETOOTH, SOCK_STREAM, BTPROTO_RFCOMM);
    addr.rc_family = AF_BLUETOOTH;
    addr.rc_channel = (uint8_t) 1;
    str2ba( dest, &addr.rc_bdaddr );
    status = connect(s, (struct sockaddr *)&addr, sizeof(addr));

Donde en el arreglo de "dest" tenemos la dirección tarjeta por ultimo con status(si es  0 se conecto) revisamos que realmente se haya podido dar la conexión.

Una vez que todo haya salido correcto, añadiremos los cuatro metodos para que puedan mover el carro:

//methods
static void go(GtkWidget *widget, gpointer data){
    int status = write(s,"a",6);
    if( status < 0 ) perror("uppps error");
    //printf("avanzo");
}

static void back(GtkWidget *widget, gpointer data){
    int status = write(s,"r",6);
    if( status < 0 ) perror("uppps error");
}

static void left(GtkWidget *widget, gpointer data){
    int status = write(s,"i",6);
    if( status < 0 ) perror("uppps error");
}


static void right(GtkWidget *widget, gpointer data){
    int status = write(s,"d",6);
    if( status < 0 ) perror("uppps error");  
}


Por ultimo verificamos que cuando salgamos de la ventana se cierre la conexión 

static gboolean delete_window(GtkWidget *widget, GdkEvent *event, gpointer data){
     close(s);
     gtk_main_quit();
     return FALSE;
}


Aquí muestro el código completo no hay separación por lo que basta seguirlo de la siguiente manera 

///Bluetooth Library 
#include 
#include 
#include 
#include 

#include 
//variables
int s; 

//methods
static void go(GtkWidget *widget, gpointer data){
    int status = write(s,"a",6);
    if( status < 0 ) perror("uppps error");
    //printf("avanzo");
}

static void back(GtkWidget *widget, gpointer data){
    int status = write(s,"r",6);
    if( status < 0 ) perror("uppps error");   
}

static void left(GtkWidget *widget, gpointer data){
    int status = write(s,"i",6);
    if( status < 0 ) perror("uppps error");
}


static void right(GtkWidget *widget, gpointer data){
    int status = write(s,"d",6);
    if( status < 0 ) perror("uppps error");    
}

static gboolean delete_window(GtkWidget *widget, GdkEvent *event, gpointer data){
     close(s);
     gtk_main_quit();
     return FALSE;
}

static void close2(GtkWidget *widget, gpointer data) {
    close(s);
}

int main (int argc, char *argv[]) {

    //manager bluetooth
    struct sockaddr_rc addr = { 0 };
    int status;
    char dest[18] = "00:13:03:19:00:50";
    s = socket(AF_BLUETOOTH, SOCK_STREAM, BTPROTO_RFCOMM);
    addr.rc_family = AF_BLUETOOTH;
    addr.rc_channel = (uint8_t) 1;
    str2ba( dest, &addr.rc_bdaddr );
    status = connect(s, (struct sockaddr *)&addr, sizeof(addr));
    //A program that has a window and four buttons to control the mini-robot    

    //Declaration of variables or components 
    GtkWidget *window; 
    GtkWidget *buttonUp;
    GtkWidget *buttonDown;
    GtkWidget *buttonLeft;
    GtkWidget *buttonRight;
    GtkWidget *grid;
    GtkWidget *label;
    GtkWidget *cerrar; 
    //initialization 
    gtk_init (&argc, &argv);
    /// create a new Window 
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    // Set title for window
    gtk_window_set_title (GTK_WINDOW (window), "Control automatico");
    // Set window resize 
    gtk_window_set_default_size(GTK_WINDOW(window), 385, 395);
    // Method for destroying the window    
        g_signal_connect(window,"delete_event",G_CALLBACK(delete_window),NULL);
    if(status==0){ 
    //create grid
        grid = gtk_grid_new();
        gtk_grid_set_row_homogeneous(GTK_GRID(grid),TRUE);
        gtk_grid_set_column_homogeneous(GTK_GRID(grid),TRUE);
    //add container 
        gtk_container_add(GTK_CONTAINER(window),grid);    
    //Create buttons and append in to Grid
        buttonUp = gtk_button_new_with_label("Avanzar");
        g_signal_connect(buttonUp,"clicked",G_CALLBACK(go),NULL);
        gtk_grid_attach(GTK_GRID(grid),buttonUp,2,0,1,1);        
        buttonDown = gtk_button_new_with_label("Atras");
        g_signal_connect(buttonDown,"clicked",G_CALLBACK(back),NULL);
        gtk_grid_attach(GTK_GRID(grid),buttonDown,2,2,1,1);
        buttonLeft = gtk_button_new_with_label("Izquierda");
        g_signal_connect(buttonLeft,"clicked",G_CALLBACK(left),NULL);
        gtk_grid_attach(GTK_GRID(grid),buttonLeft,1,1,1,1);
        buttonRight = gtk_button_new_with_label("Derecha");
        cerrar = gtk_button_new_with_label("Read");
        gtk_grid_attach(GTK_GRID(grid),cerrar,0,0,1,3);
        g_signal_connect(cerrar,"clicked",G_CALLBACK(close2),NULL);
        g_signal_connect(buttonRight,"clicked",G_CALLBACK(right),NULL);
        gtk_grid_attach(GTK_GRID(grid),buttonRight,5,1,1,1);    
    //show the widgets
    }else {
        label = gtk_button_new_with_label("No se encontro Device");
        g_signal_connect(label,"clicked",G_CALLBACK(delete_window),NULL);
        gtk_container_add(GTK_CONTAINER(window),label);
    }
    gtk_widget_show_all (window);
    gtk_main ();

}


Lo guardamos con extensión .c (en mi caso carro.c) y lo compilamos de la siguiente manera

$ gcc carro.c -o carro `pkg-config --cflags --libs gtk+-3.0` -lbluetooth

Una vez que tenemos ya nuestro programa lo ejecutamos y probamos

$ ./carro

Funcionamiento:

miércoles, 20 de noviembre de 2013

Una interfaz sencilla utilizando GTK 3.0


Vamos a realizar un simple interfaz con cuatro botones a puro código utilizando GTK, que posteriormente nos servirá para controlar un pequeño mini-robot por medio de bluetooth. 


El código esta programado en C y utilizando las librerías de GTK 3.0 compilado y ejecutado en un entorno de Linux Mint por lo que comente el codigo  de lo que fui entendiendo: 

  //Autor : José Luis Cobian
// @cobymotion
// Work with GTK 
//noviembre 2013

#include 
//method for window destroy 
static gboolean delete_window(GtkWidget *widget, GdkEvent *event, gpointer data){
     gtk_main_quit();
     return FALSE;
}

int main (int argc, char *argv[]) {

    //A program that has a window and four buttons to control the mini-robot
    //Declaration of variables or components 
    GtkWidget *window; 
    GtkWidget *buttonUp;
    GtkWidget *buttonDown;
    GtkWidget *buttonLeft;
    GtkWidget *buttonRight;
    GtkWidget *grid;
    //initialization 
    gtk_init (&argc, &argv);
    /// create a new Window 
    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    // Set title for window
    gtk_window_set_title (GTK_WINDOW (window), "Control automatico");
    // Set window resize 
    gtk_window_set_default_size(GTK_WINDOW(window), 385, 395);
    //create grid
    grid = gtk_grid_new();
    //Expand the window across the grid
    gtk_grid_set_row_homogeneous(GTK_GRID(grid),TRUE);
    gtk_grid_set_column_homogeneous(GTK_GRID(grid),TRUE);
    //add container 
    gtk_container_add(GTK_CONTAINER(window),grid);
    // Method for destroying the window    
    g_signal_connect(window,"delete_event",G_CALLBACK(delete_window),NULL);
    //Create buttons and append in to Grid
    buttonUp = gtk_button_new_with_label("Avanzar");
    gtk_grid_attach(GTK_GRID(grid),buttonUp,1,0,1,1);
    buttonDown = gtk_button_new_with_label("Atras");
    gtk_grid_attach(GTK_GRID(grid),buttonDown,1,4,1,1);
    buttonLeft = gtk_button_new_with_label("Izquierda");
    gtk_grid_attach(GTK_GRID(grid),buttonLeft,0,2,1,1);
    buttonRight = gtk_button_new_with_label("Derecha");
    gtk_grid_attach(GTK_GRID(grid),buttonRight,4,2,1,1);    
    //show the widgets
    
     gtk_widget_show_all (window);
     gtk_main ();

}


Para compilarlo utilizamos: 

gcc carro.c -o carro `pkg-config --cflags --libs gtk+-3.0`


Espero les sirva 




viernes, 1 de noviembre de 2013

[Mint] Error: Your Firefox profile cannot be loaded. It may be missing or inaccessible


Uno de los mejores navegadores que hay, si no que el mejor es Firefox, pero en las semanas pasadas los que tenemos equipos con ubuntu o en su caso tenemos equipos con Mint hemos tenido un pequeño problema, en la actualizacion de firefox 25. 

Si después de actualizar tienes el problema siguiente: 

Your Firefox profile cannot be loaded. It may be missing or inaccessible

La forma de solucionarlo es sencilla el problema principal es que en el cache de la carpeta de firefox no se ha podido acceder al perfil, por lo que solo hay que dar los permisos, para esto primero entramos a la carpeta: 

cd ~/.mozilla/firefox/

Estando ahí borraremos el de profiles.ini

Despues nos cambiaremos de carpeta a la de cache por lo que entramos con el comando 

cd ~/.cache

Estando ahí solo daremos permisos al usuario para que pueda acceder y posteriormente pueda crear un perfil nuevo. 

sudo chown -R coby:coby ./mozilla

Teniendo en cuenta que mi usuario se llama Coby, únicamente ingresamos el password y listo, puedes abrir tu firefox espero les haya servido. 

Saludos!