CSS Page-Break, Orphans & Widows, versión XHTML friendly para impresión

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
Page-break-before
Page-break-inside
Orphans
Widows

Sin Comentarios

Ie6fixer, adapta tu CSS a Internet Explorer 6 mediante hacks

Ie6fixer, adapta tu css al internet explorer 6 mediante hacks de forma automática

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

Sin Comentarios

MyStockLogo, galería de logos vectoriales gratuitos

MyStockLogo, galería de logos vectoriales gratuitos
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

Sin Comentarios

Cómo dar height: 100% a un DIV con CSS en Firefox3 e IE7

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).

1 Comentario

Monitorización web, recibe un aviso cuando tu web esté caída

Monitorización web, recibe un aviso cuando tu web esté caída a través de tu e-mail, twitter o sms

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

1 Comentario

UrlRate, herramienta online que analiza tu página web o blog

UrlRate, herramienta online que analiza tu página web o blog

UrlRate es otra herramienta online que nos ofrece un pequeño análisis de nuestra página web o blog. Tiene una escala del 1 al 10 que se calcula mediante varias variables: edad del dominio, pagerank, enlaces provenientes de otras páginas, ranking de tráfico en Alexa y finalmente una valoración económica de tu web que se calcula en base a los campos anteriores. Finalmente nos dan la opción de implementar en nuestro website un pequeño banner con la puntuación obtenida.

No estoy seguro de que funcione correctamente. No sólo por que mi nota no llegue al 2, si no porque hay datos que no recoge bien, como los inbound links, que en mi caso no aparece ninguno y tengo unos cuantos. De todos modos creo que hay herramientas mucho más completas y con información más precisa. Últimamente estamos experimentando un aumento de webs de este tipo y creo que es hora de empezar ir haciendo una selección, eso sí, lo que más me ha gustado de UrlRate es su diseño, aunque me recuerda mucho al site de Firefox.

Más info | http://www.urlrate.com

Sin Comentarios