|

Post2PDF 1.2: 3 correcciones y 1 novedad

ByLuis

Post2PDFNueva versión Post2PDF, el plugin para WordPress que exporta a PDF los contenidos de nuestros posts. En esta ocasión corregimos tres pequeños defectos e incluimos una pequeña novedad.
Aunque los errores no eran críticos, dos de ellos si hacía que algúnos amigos de Sentido Web tuvieran problemas para poder usarlo.
El primero de los casos se daba cuando en la administración de WordPress se tenía como codificación de los caracteres de salida un formato UTF-8 (gracias Víctor). Para solucionarlo ha sido necesario incluir la función mb_convert_encoding para convertir el texto obtenido de la BD en UTF-8 y así luego poder pasárselo al plugin. Aunque TCPDF (la librería usada para crear PDFs) admite codificación distinta a UTF-8, el problema no se solucionaba mediante esta libería.
El segundo problema se daba cuando se usaba una imagen jpeg en la cabecera del documento PDF (gracias Evolutionibus). Aquí debo reconocer que no era capaz de reproducir el error que le daba a un visitante de Sentido Web, hasta que cosas de la buena suerte, di con ello.
La novedad que menciono se trata de la inclusión de multilenguaje en la pantalla de administración del plugin. Por ahora solo existe la versión en español, inglés y francés (gracias Belcha), pero me gustaría que existiera traducción para distintos idiomas (sobre todos para los existentes en la Península Ibérica: catalán, euskera, gallego, portugués, …), pero mientras que la programación no es lo mío, los idiomas tampoco ;).
Post2PDF

|

Laboratorio: crea tu propio CSS Evolution

ByLuis

El otro día hablábamos sobre CSS Evolution, una forma de ver paso a paso el efecto de las CSS sobre nuestra página. Algo que supongo que a la mayoría nos ha gustado y que puede que queramos verlo en nuestra propia web.

cssevolution.png

Os paso el javascript necesario para hacerlo, el cual es posible que no sea del todo eficiente, pero bueno, la falta de tiempo no me ha permitido hacer más, entre otras cosas solo funciona para Firefox.

Lo primero es tener los estilos en un link:

<link rel="stylesheet" type="text/css" media="screen" href="sw-large.css" />

Una vez cargada la página, mostrándose con estilos, se desactivará la etiqueta link y luego se recuperará el texto de todos lo estilos, para volver a activar la etiqueta e ir añadiendo los estilos uno a uno cada cierto tiempo.

// Donde almaceno los estilos para luego ir incluyéndolos uno a uno
var antiguas;
function ini() {
// Se podría hacer para que cogiera todos los links
var link = document.getElementsByTagName("link")[0];
link.disabled = true;
// Avisa para que no te pille despistado
alert("COMENZAR");
// Recupera los textos de todos los estilos
var reglas = document.styleSheets[0].cssRules;
antiguas = new Array();
for (var i=0; i<reglas.length; i++) {
antiguas[i] = reglas[i].cssText;
}
// Quita todos los estilos
for (var i=0; i<reglas.length; i++) {
document.styleSheets[0].deleteRule(0);
}
// Inserta todos los estilos uno a uno
setTimeout("insertaCSS(0)", 500);
link.disabled = false;
}
// Añade los estilos
function insertaCSS(i) {
document.styleSheets[0].insertRule(antiguas[i], i);
if (i+1<antiguas.length) {
setTimeout("insertaCSS("+(i+1)+")", 500);
} else {
alert("FIN");
}
}
window.onload = function() {
ini();
};

Es posible que estéis algún rato sin ver cambios, depende de si vuestros estilos son generales o algo concretos, por lo que no afectarán a ciertas partes de la página.

Por cierto, he encontrado un fallo a la hora de recuperar el texto de los estilos, que cuando el texto es algo así:

p {
color: blue;
}

Debido a la línea vacía, devuelve un estilo undefined. Bueno, tampoco lo he mirado con detenimiento, pero creo que si se da ese error.

Ejemplo

|

Post2PDF 1.1: corrección de dos pequeños errores

ByLuis

Post2PDFNos hubiera gustado tardar tan poco como la gente de Mozilla, pero problemas con la conexión y demás, no hemos podido subirlo antes.

Hemos creado una nueva versión de Post2PDF en la que se solucionan un par de errores:

  • Error: problemas en la selección del título cuando el prefijo de la BD de WordPress no es el que viene por defecto.
  • Error: se mostraba incorrectamente el icono de PDF en ciertos casos.

Hubiera estado bien haber podido añadir algúna novedad que tenemos pensada, pero era necesario subir la corrección del error.

Gracias Francisco por encontrar uno de los errores y avisarnos.

Post2PDF

| | |

Laboratorio: carga de combos

ByLuis

Ayer nos preguntaban cómo cargar combos según lo que se seleccione en otro combo, y aunque no me quedó muy claro la duda que tenía, pues para intentar ayudarle, voy a explicar cómo hacerlo mediante tres posibilidades.

Primeramente explicaremos cómo hacerlo mediante el uso de iframes ocultos. Sí, no es nada web 2.0, pero no a todo el mundo se le da bien el desarrollo web, o no le gusta el uso de Ajax, o simplemente, como me pasa a mí, no nos dejan usar Ajax en los desarrollos del cliente (¡vete a saber por qué!).

Después lo haremos mediante Ajax (¡viva la web 2.0!), pero instanciando nosotros mismos el objeto XMLHttpRequest, para que los conceptos de Ajax no se pierdan dentro del uso de librerías, es importante conocer la base para luego usar una librería que te lo haga todo más fácil.

Y por último, ya no solo en plan web 2.0, sino en plan lo último de lo último, lo haremos usando la librería Prototype. Que la verdad sea dicha, no se trata de reinventar la rueda.

Read More “Laboratorio: carga de combos”

| |

Laboratorio: cómo hacer un plugin para WordPress

ByLuis

Post2PDFAlgo que nos gusta hacer en Sentido Web es explicar cómo se hacen las cosas, no solo mostrar scripts que encontramos o que inventamos, para así que quienes estén interesados, puedan aprender cómo hacerlo ellos mismos.

El otro día sacamos a la luz el plugin para WordPress Post2PDF y hoy vamos a explicar que es lo que hicimos para desarrollarlo.

El plugin consta de dos archivos principales (a parte de los de la librería), el plugin en sí y un script que es llamado por el plugin que es el que se encarga de la exportación a formato PDF.

Read More “Laboratorio: cómo hacer un plugin para WordPress”

|

Post2PDF: plugin de WordPress para exportar a PDF

ByLuis

Post2PDF

Os presentamos el primer plugin para WordPress realizado por Sentido Web.

Qué es

Post2PDF es un plugin desarrollado por Sentido Web para WordPress el cual permite exportar una entrada (post) a formato PDF de Adobe. Post2PDF está basado en la librería de PHP TCPDF que permite crear documentos PDF, exportando contenido HTML.

Características

Su principal característica es exportar los post de WordPress (HTML) a formato PDF, pero además incluye las siguientes opciones:

  • Cofiguración de cabecera: imagen y dos líneas para la cabecera
  • Configuración del pie de página: pudiendo indicar el número de página actual sobre el total de páginas.
  • Respeta el formato HTML en gran medida: cabeceras, enlaces, imágenes, …
  • Tipos de letra y colores para la cabecera, para el cuerpo del documento y para el pie de página.
  • Posibildiad de exportar fuentes de letra gracias a la aplicación TTF2UFM.

Post2PDF solo exportará imágenes contenidas en el mismo servidor, no podrá exportar imágenes enlazadas a otros servidores.

Instalación

Se instala como cualquier otro plugin de WordPress, descomprime el archivo zip dentro del directorio /wordpress/wp-content/plugins, después entra en la administración de WordPress y en el apartado Plugins en Plugins Management tendremos que activar el plugin pulsando en Activate.

Una vez activado el plugin, veremos que dentro de las opciones de Plugins (Plugins, Plugins Editor, …) aparecerá una nueva opción llamada Post2PDF, la cual nos permitirá modificar las opciones de nuestro plugin.

Configuración

Dentro de la opción Plugins de la administración de WordPress, podemos acceder a la configuración de Post2PDF pinchando sobre el submenú con el mismo nombre.

Las opciones se dividen en 4 partes: cabecera, cuerpo, pie de página y opciones varias.

PDF Header

Configura la cabecera del documento HTML, permite incluir una imagen (localizada en el propio servidor web, tanto en url web como en path absoluto), indicar el formato del texto y el contenido de las dos líneas que forman la cabecera.

  • Title: Es la línea principal que forma la cabecera. Permite el valor __TITLE__ y __BLOGNAME__ para mostrar el título del post y el nombre del blog respectivamente.
  • Subtitle: Es la línea secundaria de la cabecera, admite también los valores __TITLE__ y __BLOGNAME__.
  • Font size: Tamaño de letra del título de la cabecera, la subcabecera tendrá un tamaño de dos terceras partes del tamaño del título.
  • Font: Nos muestra un desplegable con las fuentes disponibles.
  • Font color (R, G, B): Indica el color de la letra, en notación decimal (por ejemplo, 255 – 0 – 0 será rojo.
  • Image: Es la imágen que se mostrará en la cabecera. Solo admite los formatos JPEG y PNG y se recomienda que se encuentre disponible mediante una url en el propio servidor web.
  • Image width: Establece el ancho de la imágen.

PDF Body

Modifica las opciones del cuerpo del documento.

  • Font size: Tamaño de letra del cuerpo del documento.
  • Font: Nos muestra un desplegable con las fuentes disponibles.
  • Font color (R, G, B): Indica el color de la letra, en notación decimal (por ejemplo, 255 – 0 – 0 será rojo.

PDF Footer

Modifica las opciones del pie de página del documento.

  • Footer: Texto que aparece en el pie de página, admite los valores __PAGE_NUMBER__ y el valor __TOTAL_NUMBER_OF_PAGES__ para mostrar la página actual y el número de páginas totales.
  • Font size: Tamaño de letra del cuerpo del documento.
  • Font: Nos muestra un desplegable con las fuentes disponibles.
  • Font color (R, G, B): Indica el color de la letra, en notación decimal (por ejemplo, 255 – 0 – 0 será rojo.

Miscellaneous

Opciones varias que no tienen una categoría específica.

  • Author (PDF file): Corresponde al valor del autor que aparece en el documento PDF.
  • PDF icon: URL a la imagen que se mostrará cuando incluimos en icono de llamada al plugin Post2PDF en la plantilla de WordPress.

Cómo usarlo

Para incluir el icono para exportar la entrada a PDF tan solo hay que incluir el siguiente código en la zona de la plantilla de WordPress que queramos:

if(function_exists(“Post2PDF”)) Post2PDF();

Otras características

  • Debido a la librería TCPDF, Post2PDF tiene dos versiones distintas, una para PHP4 y la otra para PHP5, dependiendo de que versión de PDF tengas instalada en tu servidor, deberás descargarte una u otra versión de Post2PDF.
  • TCPDF incluye la utilidad ttf2ufm, la cual nos permite incluir la fuente TTF que queramos en nuestro PDF, tan solo deberemos seguir las instrucciones contenidas en el archivo README.TXT.

Post2PDF

Ejemplo de documento PDF

Realizado con la versión 2.0.3 de WordPress

|

Internacionalización mediante PHP

ByLuis

Yo creo que el hecho de usar multilenguaje en un sitio web puede ser algo muy importante, sobre todo si deseas que tenga bastante repercusión. En Sentido Web ya hay entradas que trata el tema del multi-idioma ya sea mediante Apache o aportando recursos.

Esta vez vamos a hablar sobre un método que nos muestran en PHPBuilder. Se trata de tener varios ficheros para almacenar los textos traducidos, un fichero para cada idioma admitido (en.php, es.php, fr.php, de.php …) en el cual tendremos un array que contendrá código-traducción. En este caso, también hay un array para las imágenes, por si hay botones con texto que son realmente imágenes:

<?php
// Textos a traducir
$dicc['text'] = array (
'welcome' => 'Bienvenidos',
'thanks' => 'Gracias por participar',
...
);
// Imágenes especificas para idiomas
$dicc['imgsrc'] = array (
'title' => 'graphics/title.es.png',
'footer' => 'graphics/footer.es.jpg',
..
);
?>

Ahora solo falta obtener el idioma o asignar uno por defecto, importar el script específico del idioma seleccionado y usarlo.

// Buscamos si el idioma está especificado en la URL
if (isset($_GET['lang'])) {
// Si lo está, lo introducimos en una coockie para tenerlo la próxima vez
$lang = $_GET['lang'];
setcookie('lang', $lang, time()+(3600*24*365));
} else if (isset($_COOKIE['lang'])) {
// Miramos si lo está en una cookie
$lang = $_COOKIE['lang'];
} else {
// Por defecto en inglés
$lang = 'en';
}
// Obtenemos las traducciones
require_once "{$lang}.php"
echo $dicc['text']['welcome'];

Claro, que a parte de un diccionario/traductor se puede usar un directorio específico para cada idioma que contenga el contenido en ese idioma. Por ejemplo en un sitio de noticias no puedes tener un diccionario para introducir todo el texto de la noticia.

Afortunadamente los frameworks actuales como Seagull ya nos ofrencen módulos que nos facilitan esta labor.

Localizing a Web Page for Different Languages

Vía / dzone

|

Laboratorio: descargas múltiples consecutivas mediante AJAX

ByLuis

Quizás el título parece un tanto extraño, pero quizás no es fácil resumirlo. Se trata de seleccionar varios archivos para bajar y que en vez de bajarlos todos a la vez, se vayan descargando de forma consecutiva, uno detrás de otro.

Para ello vamos a usar AJAX, para ir comprobando qué archivo es el que se está bajando. También usaremos un fichero que contendrá que archivos están en proceso de descargarse, siendo la primera fila del fichero el archivo actual. Cuando finalicen las descargas, se realizará una llamada para borrar el fichero auxiliar.

Cuando se termina de enviar un fichero, mediante el método que ya explicamos, se borrará del fichero auxiliar la primera fila (fichero acabado de enviar), por lo que el proceso AJAX encontrará que el fichero actual y el primero del fichero auxiliar son distintos, por lo que solicitará bajar el nuevo archivo.

Cuando un fichero se descarga, se deselecciona de la lista y se resalta para hacer ver al usuario el cambio de estado.

Read More “Laboratorio: descargas múltiples consecutivas mediante AJAX”

|

Laboratorio: directorio con búsquedas

ByLuis

Los directorios suelen ser muy útiles para tener organizada la información, pero también puede ser un poco complicado encontrar lo que buscamos si es que existen muchas entradas en el directorio. Por eso, en esta entrada, vamos a explicar cómo añadirle un buscador para que solo nos muestre las entradas que coinciden con un texto (para ser más precisos, con una expresión regular).
listado.png

Esta vez quiero hacerlo usando JSON, normalmente lo hago usando Javascript sencillo porque como no sé si la gente que mira nuestras entradas es entendido o viene buscando a través de Google, pues cuanto más sencillo de entender, mejor, y si luego la persona quiere hacerlo mediante JSON, pues que sepa cómo se hace normalmente. Lo importante es entenderlo, luego si se quiere que se haga un copiar/pegar.

Read More “Laboratorio: directorio con búsquedas”

| |

Laboratorio: borrar filas de una tabla en HTML y en la BD

ByLuis

Ayer contábamos como borrar una fila de una tabla en HTML, y en los comentarios, Escael nos preguntaba cómo se podría hacer para que también se borrara de la base de datos.

Pues siguiendo con el modo en que se hace en la administración de WordPress, primero haremos el difuminado del color actual de la fila al color rojo y mientras se realiza el borrado en la tabla de la base de datos, haremos que parpadee el color de la fila. Cuando se haya realizado el borrado en la tabla de la base de datos, se eleminará la fila de la tabla HTML y se mostrará un mensaje de aviso de que se ha borrado de la BD.

Read More “Laboratorio: borrar filas de una tabla en HTML y en la BD”