Preparate para el HTML 5

Este es un texto publicado en la edición 291 del 1 de Septiembre de 2009 de Alist apart versión en inglés http://www.alistapart.com/articles/get-ready-for-html-5/por J. David Eisenberg para A list apart.
Traducido al español por Federico Reinoso para IMGDigital

Con el soporte en Chrome, Firefox 3.5, Opera, y Safari, el HTML 5 está llegando a Uds como un tren desbocado. Aquí hay algunas sugerencias para ayudarlos a prepararse para subirse, antes que este deje la plataforma y los deje.

Continue reading

Felices 200 años Argentina

Si bien este es un blog sobre sitios web, no queremos estar ausentes en los festejos del Bicentenario.

Esperemos que estos 200 años nos sirvan de ejemplo para las cosas buenas y evitar las malas.

Por todo esto.

¡Feliz Bicentenario Argentina!

Reemplazo dinámico de texto con Imágenes

Este es un texto publicado en la edición 183 del 15 de junio del 2004 de Alist apart versión en inglés http://alistapart.com/articles/dynatext/ por Stewart Rosenberger para A list apart.
Traducido al español por Federico Reinoso para IMGDigital

El manejo del texto es un verdadero dolor de cabeza en el diseño web. Hay sólo un puñado de fuentes (fonts) que están universalmente disponibles, y los efectos sofisticados son casi imposibles de lograr usando sólo standards como CSS y HTML. Mantenerse con las tradicionales cuerpos tipográficos está bien para el texto en general, pero cuando nos referimos a los titulares — pequeños bloques de texto captadores de atención — sería bueno tener algunas opciones. Nos hemos acostumbrados a este problema y aprendimos a convivir con esto haciendo lo mejor que podemos con las pocas fuentes que tenemos, o reemplazando enteramente los titulares de texto con imágenes.

La mayoría de los sitios reemplaza el texto con imágenes haciéndolo a mano, lo cual no es tan terrible cuando hay un número determinado de titulares, pero rápidamente se pone inmanejable en un sitio que es actualizado varias veces por día. De esta manera los reemplazos se efectúan, cada imagen necesita conectarse con el texto que reemplaza. Esa conexión generalmente puesta en el tag , en un estilo en cascada embebido o un atributo de un id. Y a través del tiempo, los cambios de diseño y rediseño, esas conexiones deben ser manejadas por alguien

Podemos olvidarnos de toda esa tontería. No más tags o , no más atributos a los id o pérdidas de tiempo en el Photoshop, y no más complejos trucos con CSS.

Usando JavaScript y PHP, podemos generar imágenes de titulares usando cualquier fuente que queramos. Y no debemos cambiar la estructura de nuestro HTML o CSS. Vea la demostración para ver el Reemplazo de Texto Dinámico en acción. Luego lea lo que sigue para averiguar como ud. puede agregar esta funcionalidad a su sitio

PHP

Este pequeño script PHP (disponible aquí) entrega un imagen PNG dinámica a nuestro navegador cada vez que es pedida. Antes de ponerlo a trabajar, es necesario modificar algunos parámetros. Las primeras siete líneas de código en el script sirven para este propósito:

  $font_file = 'font.ttf' ;
  $font_size = 56 ;
  $text_color = '#ffffff' ;
  $background_color = '#000000' ;
  $transparent = true ;
  $cache_images = true ;
  $cache_folder = 'cache' ;
  • La variable $font_file debe ser dirigida en un camino local (no una URL) de una fuente True Type (TTF) o Open Type (OTF) en su servidor web. Esta es la fuente con las que se crearán sus imágenes; Ud. necesita subir este archivo al servidor web desde su computadora.
  • $font_size, como es obvio, se refiere al tamaño de la fuente en puntos.
  • $text_color y $background_color son códigos de color en formato hexadecimal que indican el color del texto y el del fondo (background) respectivamente.
  • Cuando la variable $transparent es puesta en true, los bordes del texto de la imagen serán fundidos con el color de fondo ( $background_color ) y de esta manera prevenir el borde dentado y una vez esto el color de fondo será completamente invisible.
  • Colocando $cache_images en true, y que la variable de $cache_folder apuntada a un directorio local de su servidor web con permisos de escritura, el script guarda cada imagen que cree, guardándolas para usarlas para su uso posterior. Esto acelerará significativamente el envío de imágenes a sus visitantes, y es particularmente importante en los servidores compartidos y de mucho tráfico.

Para instalar este script, súbalo a sus servidor web que tenga una configuración PHP. Específicamente ud. necesita PHP versión 4.3 o superior, compilado con las bibliotecas GD versión 1.6 o superior. Si nada de esto significa algo para ud, mande un email con estos requerimientos a su proveedor de alojamiento y ellos le dirán si es compatible.

Si bien usamos PHP para construir las imágenes en esta implementación, su sitio web no necesariamente debe ser un sitio hecho en PHP para poder usar esta técnica. Sin importar como ud. genera sus páginas HTML, hechas a mano o a través de un CMS, ud. puede usar esta técnica siempre que pueda insertar un tag

Asegurese que el atributo src en esa línea apunte a la ubicación del JavaScript que subió antes. Eso es todo lo que necesita para hacer un reemplazo dinámico de texto; podemos detenernos aquí si quiere. Pero hay un par de mejoras opcionales que podríamos querer antes de terminar.

Versiones de Impresión

Como previamente vimos (en alistapart, proximamente aquí), muchos sitios están empleando estilos especiales para el momento de imprimir, para darle a sus visitantes una mejor copia de sus contenidos. En muchos casos esto implica volver hacia atrás el proceso del reemplazo de imágenes, asi la copia de de impresión usa las fuentes en lugar de las imágenes, que pueden ap;arecer en baja resolución en impresoras de alta definición. Desafortunadamente, JavaScript se queda un poco corto para resolver este problema.

Una vez reemplazado nuestro texto con una imagen, es imposible revertir el proceso específicamente para la impresión, entonces debemos encontrar otra solución. En lugar de tratar de revertir nuestro proceso de reemplazo, podemos tomar algunos recaudos. Junto a la inserción del tag en los titulares, podemos insertar un tag que contenga el texto original. Y podemos setear las propiedades del span a ninguna (none), entonces no será mostrado en la pantalla. Ahora tenemos dos copias de nuestro texto original: Una en la imagen visible, y otra en un invisible span. Dándole a cada uno de estos elementos un atributo de class (“reemplazo” e “impresion”, respectivamente), y agregandolos en el estilo de impresión , podemos cambiar lo que se muestra al momento de imprimirlo. El siguiente estilo (baje el ejemplo de CSS aquí) puede ser usado para generar la versión apropiada para la impresión:

  span.print-text {
    display: inline !important;
  }
  img.replacement {
    display: none;
  }

Una vez que hayamos subido su página a su servidor web, sólo necesitamos cambiar dos líneas en nuestro JavaScript para que funcione:

  var doNotPrintImages = false;
  var printerCSS = "replacement-print.css";

Al setear doNotPrintImages a true, y printerCSS a la URL del estilo de impresión que hemos creado, el script automáticamente inserta el CSS apropiado en el tag

Libre de parpadeo

Porque nuestro script no puede empezar a reemplazar elementos hasta que el documento se haya cargado, se verá un pequeño parpadeo del texto sin el gráfico, hasta que el navegador espera hasta que el proceso del reemplazo comience. Esto es menos que un pequeño problema, más cercano a una molestia, pero como es evitable podemos solucionarlo.

Con la ayuda de otro pequeño estilo, podemos hacerlo. Antes que el cuerpo del documento comience a ser cargado, podemos insertar dinámicamente un estilo que esconda estos elementos por completo. Ya que el estilo linkeado se aplica a medida que el documento es mostrado, nada será visible en ese período. Una vez que nuestra técnica de reemplazo termine de ser ejecutada, podemos desactivar este estilo y los titulares serán visibles otra vez. Por ejemplo, si nuestra página fuie seteada para reemplzar los tags

, el siguiente estilo (disponible aquí) los escondería haste que la técnica de reemplazo haya terminado:

  h2 {visibility: hidden;}

Hay un pequeño problema en este aspecto. Toda nuestra técnica depende que se cargue el archivo de testeo, para indicar que el navegador puede manejar imágenes. Si esta imagen nunca carga, la técnica de reemplazo nunca se activará. Y si nuestra técnica no se activa, el estilo que mantiene ocultos nuestros titulares nunca se desactivará.

Por esto, nuestros visitantes, que han desactivado la muestra de imágenes en sus navegadores, pero que aún pueden ver CSS y JavaScript, verán sólo un espacio vacío donde deberían estar nuestros titulares. Haremos lo mejor de nuestra parte para mejorar esta pequeña dificultad, agregando un pequeño valor de timeout al script. Si la imagen de testeo no fue exitosamente cargada luego de uno o dos segundo (o el tiempo que crean conveniente), el script automáticamente desactivará la hoja de estilos, y los titulares reaparecerán. Esos uno o dos segundo son un mínimo inconveniente para esta excepcionalmente rara persona, pero resuleve el problema del parpadeo para el otro 99,99% de nuestros visitantes. Lo más importante aquí es que mantenemos la accesibilidad para todos. Para activar esta opción, y remover el pequeño parpadeo del contenido sin estilo, ud. debe editar tres líneas en el código JavaScript:

  var hideFlicker = false;
  var hideFlickerCSS = "replacement-screen.css";
  var hideFlickerTimeout = 1000;

Coloque hideFlicker = true, y hideFlickerCSS apuntando a la URL del estilo CSS que haya creado para ocultar sus titulares. hideFlickerTimeout debe ser seteado en el máximo número en milisegundos (ej: 1/1000 segundos) que debe esperar el script antes de desactivar ese estilo.

Notas y Sugerencias

Versiones viejas de Mozilla, incluyendo Netscape 6.2, tienen un bug donde el navegador bajará ls imágenes aún si el usuario ha pedido que no lo haga. Esto, no tiene mucho sentido, y ha sido solucionado desde la versión 1.4. Sin embargo esta técnica funcionaría sin problemas en estos navegadores, incorrectamente pensará que debe mostrar las imágenes y fallará cuando los visitantes usando estos navegadores tengan las imágenes desactivadas. No vamos a tomar en cuenta esta extremadamente rara situación como un impedimento grave, pero no hay que pecar de incompletos. No hay actualmente una solución a este problema. Si usa esta técnica con traductores automáticos, como Google o Babelfish de Altavista. Mientras su fuente soporte los caracteres extranjeros, las imágenes serán traducidas también. El texto que quiera reemplazar, no debe necesariamente estar dentro de los tags principales (

,

, etc.); puede ser cualquier elemento de la página. Con algunos simples ajustes, y un poco de manipulación de los valores, esta técnica puede producir capiteles dinámicos para cualquier párrafo al que quiera aplicarlo. También puede reemplazar los tags , dándoles a su página reemplazo para sus hipervínculos, pero obtener rollovers requerirían una mayor modificación. También, en lugar de reemplazar dinámicamente el contenido con tags , esta técnica puede evitar el uso del PHP y en su lugar insertar archivos de animación Flash

Agradecimientos

Peter-Paul Koch, por su técnica de reemplazo por imágenes con JavaScript. Simon Willison, por su función getElementsBySelector. Stuart Langridge, por sus técnicas de JavaScript no intrusivo.

Traducciones
Alemán (webdesign.weisshart.de)

Discusión

¿Esto fue interesante? Discuta este artículo en inglés

Nuevo Sitio, diseño temporal

Hola a todos, me cansé un poco del diseño anterior que estaba viejo y perimido.

Luego de muchas idas y vueltas decidí que era hora de un cambio que reflejara mi nuevo “amor” que es WordPress, si, me pasé al lado oscuro, ¡je!

El diseño es temporario, y es sólo un template bajado y simple como para poner en funcionamiento el nuevo sitio, pero seguramente será cambiado en algún momento.

Espero les guste y nos estamos viendo