En la red existen diversos scripts en PHP para generar documentos Word o Excel siguiendo el formato y código de estas aplicaciones de ofimática. Sin embargo, hay formas más sencillas de generar estos documentos que requieren menos conocimientos técnicos y prácticamente nada de programación.

Tanto el Word como el Excel son capaces de leer documentos en HTML. Prueba a crear una página en HTML con el bloc de notas, guarda el fichero con extensión .doc ó .xls. Comprobarás que el contenido puede visualizarse sin problemas.

Creando un Word o Excel a partir de HTML

Sabiendo esto, podemos recuperar la información de las consultas a la base de datos y pintarla en HTML, aplicándo el formato y distribución que deseemos, ya sea mediante tablas, párrafos, divs e incluso podremos aplicar estilos y colores.

Una vez hemos generado el documento en HTML sólo nos queda descargarlo. La opción básica es ir al menú Archivo, pulsar en Guardar Como e indicar la extensión correcta, sin embargo, esta medida es poco práctica, además de exigir ciertos conocimientos técnicos. Existe otro método que facilita esta tarea y permite forzar la descarga automáticamente. Para ello, podemos utilizar los headers de PHP.

header(“Content-Type: application/vnd.ms-excel”);
header(“content-disposition: attachment;filename=mifichero.xls”);

El Content-type especifica qué tipo de datos contiene el fichero a través del código MIME correspondiente (Multipurpouse Internet Mail Extensions, serie de especificaciones dirigidas al intercambio transparente de todo tipo de archivos a través de Internet). Cada tipo de fichero tiene uno o varios MIMEs. En Glosarium.com puedes encontrar el catálogo completo de códigos MIMEs. Por ejemplo, un fichero Excel tiene varios MIMEs (application/vnd.ms-excel, application/excel, application/x-excel, application/x-msexcel)

En la segunda línea especificamos el nombre del fichero que se va a descargar. Debemos indicar nombre y extensión.

¿Cómo cambio los margenes del documento Word con CSS?

Un truco para modificar los márgenes es crear un fichero con el Word, establecer los márgenes que deseemos y guardarlo Como Página Web. Abrimos el fichero con un editor HTML y recuperamos las CSS que ha generado automáticamente el Word. Tras limpiar un poco el código (tanto HTML como CSS), tendremos a nuestra disposición una plantilla para el Word con los márgenes que hemos especificado.

Una de las partes del proyecto en el que ando liado actualmente requiere crear documentos dinámicamente a partir de una BBDD, pintarlos en HTML y exportarlos a PDF o Word.

El principal problema con el que nos encontramos a la hora de desarrollar la idea es cómo hacer que el contenido no quede cortado entre página y página. Una fórmula es crear una plantilla con varios contenedores con un tamaño determinado, de forma que cada contenedor quepa sin problemas en un A4 (o el tamaño del documento deseado) y la información no quede fraccionada.

Otro método mucho más sencillo y limpio de usar es con CSS. Existen varias clases que nos permiten establecer cuándo debe producirse un salto de página y cómo deben tratarse los párrafos para evitar que queden huérfanos o viudos.

CSS Page-break-[after, before, inside]

Al asignar una de estas clases a cualquier elemento de una página forzará el salto de página. Por ejemplo, si no queremos que ninguna tabla quede cortada, podemos definir que para todas las tablas del documento se produzca un salto de página antes de pintarlas (table { page-break-before:always } ).  Pueden tener varios valores:  auto (sólo si es necesario), always, avoid, left y right.

• Page-break-after: después de un elemento se fuerza el salto de página.
• Page-break-before: antes de un elemento se fuerza el salto de página.
• Page-break-inside: dentro de un elemento se fuerza el salto de página. La W3C recomienda no abusar de esta clase y evitar utilizarla dentro de contenedores como tablas o divs.

CSS Orphans & Widows

Los términos Orphans (huérfano) y Widows (viudo) se utilizan cuando un párrafo se ha cortado al producirse un salto de página, cambio de columna o se ha insertado una imagen de por medio y el texto del párrafo ha quedado fraccionado en dos partes, quedando una de ellas con una sóla línea. Normalmente lo ideal es que si nos vemos forzados a cortar un párrafo por la mitad es dejar al menos dos líneas como mínimo en cada sitio.

• Orphans: permite espeficar el número de líneas que debe mantener un párrafo al final de la página.
• Widows: permite espeficiar el número de líneas en la parte superior de la página.

Más información

Page-break-before | http://www.w3schools.com/css/pr_print_pagebb.asp
Page-break-before | http://www.w3schools.com/css/pr_print_pageba.asp
Page-break-inside | http://www.w3schools.com/css/pr_print_pagebi.asp
Orphans | http://webdesign.about.com/blsporphans.htm
Widows | http://webdesign.about.com/blspwidows.htm

Los estilos CSS que asignemos al diseño de nuestra página web podrán verse afectados por el navegador que utilicen nuestros usuarios y la versión de éste. La familia de Internet Explorer viene arrastrando multitud de incompatibilidades con muchos estándares web, por lo que es necesario aplicar varios estilos a un mismo elemento para que, dependiendo del navegador, el diseño se muestre de forma correcta.

Ie6Fixer es una herramienta diseñada para debuggear de forma rápida y sencilla nuestras hojas de estilo CSS para que funcionen correctamente en Internet Explorer 6. La herramienta todavía está en fase de pruebas, por lo que es posible que puedan generarse errores o que el proceso no se haga de forma correcta; además, el código que nos devuelve no estará formateado, ni indentado, por lo que nos tocará retocarlo si queremos que tenga un aspecto más “visual”.

El funcionamiento es sencillo, pegamos nuestro código CSS en el textarea y seleccionamos las opciones que deseemos que sean aplicadas en la conversión de la CSS. El código que nos devuelve el sistema incluirá diversos hacks allí donde sea necesario especificar el tipo y versión del navegador.

Más info | http://www.onderhond.com/tools/ie6fixer/
Fuente | http://www.anieto2k.com/ie6fixer-aplicacion-hacks-css

Hace tiempo publiqué una entrada sobre LogoInstant, un portal con una interesante colección de logotipos gratuitos para Photoshop. Vía Blog And Web hoy he encontrado MyStockLogo, que pone a disposición de cualquier usuario un completo catálogo de logotipos en formato vectorial compatibles con Adobe Illustrator (.ai) para descargar de forma totalmente gratuita. Los logotipos están organizados en paquetes según formas, colores, fuentes, elementos, etc. Al estar en formato vectorial nos permiten modificarlos sin perder calidad e incluso podremos aprovecharlos para trabajos de papelería, donde la resolución es el handicap de cualquier imagen.

Las únicas pegas de este recurso son, por un lado, que las descargas están externalizadas en un servidor gratuito de carga de archivos (que a mí personalmente ni me ofrece confianza ni seguridad) y que, como bien indican en Blog And Web, si bien los autores de MyStockLogo permiten utilizar sus logotipos en cualquier proyecto sea comercial o no, también hay una nota en la que declaran que tienen todos los derechos reservados.

Más info | http://mystocklogo.com
Fuente | http://blogandweb.com

Charlando con un colega nos ha surgido la duda de cómo podríamos crear un DIV que fuese el wrapper de la página y tuviese el height 100%, de forma que se adapte a la altura del navegador. La solución, que reconozco que hemos tardado en dar con ella, es muy sencilla y se resuelve con unas pocas líneas en el CSS:

html,body{

margin:0px;
height:100%;

}

#wrapper{

height: 100%

}

De todos modos, sigo pensando que dar un height automático al contenedor principal  de una página es antiestético y muchas veces nos encontraremos con problemas al visualizar la página en determinados navegadores. Lo ideal sería poner un height fijo cuando sabemos que la altura de la página nunca va a variar (típicas páginas básicas de empresas con pocos textos).

Hace unas semanas tuve que migrar una página a otro proveedor de hosting y después del traslado tuvimos una serie de problemas que provocaron la parada del servidor durante unas horas. Nos percatamos demasiado tarde, cuando nos avisaron varios usuarios vía mail de lo que estaba sucediendo y nos pusimos en contacto con el soporte para que lo reiniciasen cuanto antes.

Que la página esté caída puede influir muy negativamente en la promoción de la página web, ya que ni si quiera existe una página de aviso que advierta a los usuarios de los problemas que se están produciendo (las DNS están apuntando a un server que no existe). Por un lado, si los bots de los buscadores van a recorrer nuestra página y ésta no se encuentra disponible, es muy probable que repercuta negativamente en el volumen de páginas indexadas o la valoración de las que ya lo estaban y ya no se encuentran en la red. Además, tendremos un problema con los usuarios nuevos, que al acceder al site verán que éste no existe y lo abandonarán sin ni siquiera volver a pasarse en un futuro. Los usuarios recurrentes se mosquearán al ver que no pueden entrar en la web y si disponen del mail del administrador, se pondrán en contacto con él, si no, buscarán alternativas y darán un plazo para que se recupere la página, de forma que si ésta se activa antes, perderemos sus visitas durante unos días u horas. Por ello, es muy importante tener algún servicio de monitorización de la página web que en caso de que ésta tenga algún problema, nos avise para que podamos solucionarlo lo antes posible.

Hay diversos medios de pago que nos ofrecen un completo paquete de monitorización web, sin embargo, también existen alternativas gratuitas que prestan el mismo servicio sin necesidad de pagar. Es el caso de Ding It’s Up, que a través de un sencillo formulario de registro, podremos recibir una alerta vía mail, twitter o SMS (según el país) cuando nuestra web esté caída.

Más info | http://www.dingitsup.com
Fuente | http://blogandweb.com