Archive for the ‘ Programación ’ Category

Cómo integrar Open Graph de Facebook en WordPress

El año pasado si no me equivoco fue cuando el poderoso añadió soporte para en su API. Con lo que añadiendo unas pequeñas cabeceras a tu página podrás obtener toda una serie de información y control a través de Facebook o de sus widgets.

Para ir más el grano pondré el código que hay que añadir al header. del tema de tu :

 

<!– Facebook Opengraph –>

    <meta property="fb:app_id" content="El_ID_de_tu_aplicación" />

    <meta property="fb:admins" content="ID_de_usuario" />

    <meta property="og:url" content="<?php the_permalink() ?>"/>

<?php if (is_single()) { ?>

<meta property="og:title" content="<?php single_post_title(''); ?> | MisRincones.com" />

<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />

<meta property="og:type" content="article" />

<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />

<?php } else { ?>

<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />

<meta property="og:description" content="<?php bloginfo('description'); ?>" />

<meta property="og:type" content="website" />

<meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />

<?php } ?>

<!– Facebook Opengraph –>

Hay 2 datos qhe hemos de modificar nosotros para la correcta integración del código que he añadido.

 - fb:app_id : Es el ID de la aplicación que has de crear en la página de desarrolladores. Este valor lo llaman "App ID/API Key"

 - fb:admins : En este campo podemos añadir todos los administradores que consideremos apropiado y evidentemente este dado de alta como admin en la aplicación. Pero ¿cómo obtenemos el ID de un usuario? Muy sencillo, nos vamos al perfil que corresponda y nos metemos en la opción de Fotos, al pinchar sobre cualquier cualquier foto y miramos la URL buscamos la cadena "&set=t.". Los números que hay a continuación es el ID de usuario.

Manejo de imágenes mediante GD

La programación a veces puede ser hasta divertido y muestra de ello es poder crearnos imágenes simples o con cierta complegidad; para ello vamos a usar las librerías que nos permite tratar imágenes tanto JPEG, GIF o PNG. Para empezar lo primero es comprobar que esta instalado y configurado en el , para ello simplemente haciendo un phpinfo() lo podemos ver.

Creo que la mejor forma de entenderlo es hacer un ejemplo sencillito, para ello vamos a crear un botón con un texto personalizable (al final del ejemplo pondré el código entero).

Comenzamos definiendo el texto que queremos introducir en el botón: en nuestro caso será "HOLA" y haremos que este centrado.

$tamano_fuente = 3;
$nombre = "HOLA";
$cantidadCaracteres = strlen($nombre);
$textoAltura = imagefontheight($tamano_fuente) * $cantidadCaracteres;
$textoAncho = imagefontwidth(
$tamano_fuente) * $cantidadCaracteres;

El primer paso que hemos realizado ha sido definir tanto el tamaño de la fuente (va desde el 1 al 10) y luego el texto que vamos a querer utilizar, a continuación como vamos a crear un botón de forma dinámica y el tamaño puede variar lo que hacemos es calcular cuanto espacio va a ocupar el texto. Todavía no vamos a pintarlo en pantalla ya que la forma de tratar todo las librerías GD es sobreponiendo, es decir si pones 2 objetos estando el uno sobre el otro, el que se verá es el último que se ha programado.

Una vez sabemos el tamaño del texto, lo que haremos será crear el fondo sobre el que escribiremos el texto, para ello usaremos la herramienta que te permite dibujar rectángulos.

$ancho = $textoAncho + 20;
$alto = $textoAltura  + 10;

// Para crear una imagen desde 0 usaremos:
$imagen = imagecreatetruecolor($ancho, $alto); 

// Para crear una imagen desde un archivo usaremos:
$
imagen = imagecreatefromjpeg('la_ruta_del_archivo');

imagefilledrectangle($imagen, 0, 0, $ancho, $alto, 'color_que_deseamos_de_fondo');

En este paso lo que hemos realizado es definir el ancho y el alto de la imagen final, para ello como vamos a meter el texto centrado lo que hacemos es darle un poco más de tamaño (hay que tener en cuenta que ese espacio de más que se da hay que dividirlo entre 2 para saber cuanto margen habrá entre el borde la imagen y el principio/fin del texto por cada lado).

Otra peculiaridad de GD es que podemos trabajar con una imagen en vacío o bien usar una imagen externa; en el caso de un fondo vacio habría que usar imagecreatetruecolor pero para usar una imagen usaremos imagecreatefromjpeg. En este último caso dependiento del tipo de imagen que usemos, hablando en plata el formato, habría que usar imagecreatefromjpeg, imagecreatefromgif o imagecreatefrompng.

Y ya como último paso para definir el fondo es crear el rectángulo con el mismo tamaño de la imagen. Los campos qe hay que definir por orden son: identificador de la imagen, posición X inicial, posición Y inicial, posición X final, posición Y final, color en formato RGB. Para el color, podemos definir una variable antes llamada $color por ejemplo y se definiría así:

$color = ImageColorAllocate($imagen, 255, 0, 0);
$color_texto = ImageColorAllocate($imagen, 255, 255, 255);

Ya casi hemos terminado el ejemplo, sólo nos queda pintar el texto y fin.

 

$xCentrado = ($ancho – $textoAncho) / 2;
$yCentrado = 
($alto – $
textoAltura) / 2;

imagestring($imagen, $tamano_fuente, $xCentrado, $yCentrado, $nombre, $color_texto);

 

Poca explicación hace falta no? lo importante es calcular en qué posición exacta ha de empezar el texto tanto en coordenadas X como en Y y poco más.

Con esto la imagen en si ya esta terminada y solo nos queda enviar las cabeceras adecuadas para pintarlo en el . En nuestro ejemplo, nosotros vamos a mostrarlo como un archivo PNG así que lo que hay que colocar al final del código es lo siguiente:

 

header("Content-type: image/png");
imagepng(
$imagen);
imagedestroy(
$imagen);

Bien pues eso ha sido todo para generar una imagen muy sencillita que en nuestro caso será un botón con un texto en el centro pero se pueden hacer verdaderas casi obras de arte.

Ah! esta imagen que hemos creado, la podemos almacenar en el disco duro del servidor de la siguiente forma para así no sobrecargarlo al tener que hacer esta operación muchas veces.

imagepng($imagen, 'ruta_completa_con_nombre_de_archivo_y_extenxión_incluida');

Si hacemos esto último, debemos añadirlo junto antes de destruir la imagen porque sino mal lo llevamos ;)

No todo son patentes y copyright. Aprender de otros es posible y necesario

En los momentos en los que nos encontramos con continuas demandas por patentes y ya no solo entre grandes empresas sino que cualquiera se esta intentando sumar al carro de patentes chorras de ideas o asuntos "genéricos" nos estan haciendo perder el norte. Desde que empecé a estudiar programación hace ya unos 9 años siempre me he dedicado a mirar el código de los demás para aprender y mejorar en lo que hago.

Una ley no escrita es el famoso copy&paste, copia y pega o simplemente "fusilamos" código; yo soy partidario de si alguna vez uso el código de otra persona, empresa o entidad siempre pongo su referencia a parte de luego intentar adaptar el código para mis necesidades. También estoy de acuerdo en que se pueda "patentar" un sistema concreto programado de forma exclusiva pero de ahí a que patento una forma genérica de cualquier tema y luego a vivir del cuento pues como que no va conmigo.

Para mi el mejor aliado es el código ajeno, a veces cuando revisamos el código de un compañero o de cualquier otra persona, me sirve para coger mis propias ideas y sobre todo para ampliar mis horizontes. De esa misma manera hoy me considero mejor programador que el día en el que empecé.

Dejemonos de tonterías con patentes estúpidas (algunas si tienen sentido) y en lugar de gastar recursos en ese tema, dediquemos ese esfuerzo a mejorar y a aprender.

Por cierto, ¿quién no ha usado algo de código de alguna persona o que se ha encontrado por foros o webs?

Convertir un PDF a imagen en Ubuntu / Linux

Para los que trabajamos en el mundo de , muchas veces nos encontramos que un cliente nos facilita un cartel publicitario o similar mostrarlo en la web pero eso tal cual no es posible así que hemos de convertirlo en imagen. También se puede necesitar para cualquier otro asunto jajaj.

En fin al grano. Lo primero que hemos de hacer es tener instalado es imagemagick y para asegurarnos que lo tenemos podemos ejecutar lo siguiente:

sudo apt-get install imagemagick

Llegados a este punto vamos a realizar la conversión y para ello tenemos 2 opciones, la primera será para extraer todo del tirón y luego tenemos otra en la que podemos seleccionar el rango de páginas del PDF queremos ir convirtiendo en imagen.

Para extraer todo del tirón usaríamos el comando:

convert -density 150 nombre_archivo.pdf nombre_destino.png

Y para utilizar usar un rango de páginas haríamos (ojo, las páginas empiezan a contar desde el 0, no desde el 1):

convert -density 150 nombre_archivo.pdf[0-9] nombre_destino.png

Versiones ligeras de los portales para smartphones

Cada día que pasa más y más usuarios navegan o trastean por mediante su y sobre todo gracias a las redes sociales en las que las personas publican enlaces continuamente. Lo malo es que nos encontramos con webs muy pesadas, cargadas de contenidos que para una pantalla de 4" se hace casi infumable, teniendo que estar continuamente jugando con el zoom para poder leer lo que realmente le interesa, el contenido.

Una de las posibles excusas para no desarrollar portales adaptados a estos dispositivos es la inclusión de publidad pero si se planifica correctamente siempre puedes usarla, quizás en menor medida ya que en una noticia no les vas a meter 10 banners o no le vas a poner un intersticial pero usando creatividad puedes conseguir cosas realmente atractivas para el usuario tanto como para la empresa.

Leer mas

Página 1 de 212