Como todos saben, Budget es una marca reconocida mundialmente por el alquiler de autos sin chofer (Rent a Car). El sitio toma en cuenta los colores en la marca de Budget  y está programado en HTML5. También utiliza Twitter Bootstrap un framework de CSS que nos permitió muy rápidamente armar el sitio para que responda a los diferentes dispositivos.

También usamos un par de técnicas para que el sitio sirva las imágenes al tamaño correcto dependiendo del dispositivo movil que lo llame.

Los invitamos a verlo y que nos dejen su opinión.

También estamos haciendo un pequeño backend para el manejo de tarifas. Será un experimento para usar Kohana 3.1.1 espero traer novedades pronto.

Visiten el sitio alquilen autos y disfruten.

Se hizo un rediseño integral y se transformó de un sitio estático a un wordpress.

La idea es mostrar un sitio con todas las actividades que se pueden realizar en Bariloche y zona de influencia.

Usamos wordpress con varios plug-ins entre los cuales uno multiidioma. Los invitamos a visitarlo y que nos cuenten que les parece.

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.

Mirar lo que hicieron otros

Lo primero que pueden hacer para prepararse para el HTML 5 es mirar como lo estan usando otras personas. Una visita a la galería HTML 5 les mostrará como varios sitios ya están usando los nuevos elementos HTML 5. ¡Usa la fuente Luke!

Ahora hacelo vos.

Podés mirar los sitios, leer todos los artículos aquí y en cualquier parte, hasta podés leer las especificaciones – pero nada de todo este te ayudará a entender HTML 5 como el hecho de usar los nuevos elementos.  Podés modificar parte de un sitio existente o experimentar creando nuevas páginas. Yo lo hice actualizando el relato de un viaje que hice para mis amigos y familia. (Nunca fue pensado para ser mostrado en público, pero ahí lo tienen)

Haciendo esto, te darás cuenta que funciona y que no. Por ejemplo, descubrí  esto mientras escribía que, Firefox 3.5 maneja los elementos como article y section como display:inline, y tuve que asignarles los a display:block para que funcionen como se esperaba.

La X marca el lugar

Si sos como la mayoría de los diseñadores, probablemente no escribas tu código a mano. Pero hasta que las herramientas habituales se actualicen a los nuevos elementos en (X)HTML 5, deberás hacer algo de la codificación a mano mientras aprendés. Hay algo de confusión (¡y controvercia!) acerca de la relación entre HTML 5, XHTML 1.0/1.1, and XHTML 5. Clarifiquemos esto ahora mismo.

HTML 4.0 (el código que todos conocemos y amamos) está basado en un “reglamento” llamado SGML. En el reglamento del SGML, los nombres de los elementos no tomaban en cuenta como se escribían (mayúsculas o minúsculas) podés tener elementos que opcionalmento deben ser cerrados (como <p>) y se puede poner valor a los atributos sin tener que “envolverlos” entre comillas. XHTML 1.0 y 1.1 están basados en XML. En XML, los nombres de los elementos y atributos son sensibles a la manera de escrinirlos (mayúsculas y minúsculas) y cada tag abierto, debe tener un cierre y los valores de los atributos deben estar entre comillas.

HTML 5 define una demarcación que no está basada en ninguna de las anteriores, pero puedes ser escrito en un “formato tipo HTML” (o serializarlo, como dicen las especificaciones ) o en un “formato XHTML” .

Cuando uno escribe código HTML, estás autorizado a dejar afuera algunas de las tags de cierre (¡y algunas de apertura!) no necesitas entrecomillar los valores de los atributos si estos no tienen espacios, y los elementos y los nombres de los atributos no diferencian mayúsculas y minúsculas. También obtenemos algo de la codificación XML; podemos poner una “barra” en elementos tales como <img /> or <hr />.

Cuando usamos la serialización XHTML, debemos seguir las reglas del XML mencionadas anteriormente.

Te sugiero que escribas el código en XHTML 5, o, si usas HTML 5, escribas como si hicieras XHTML. Hay que quedarse lejos del standard XML que pide cerrar los tag de cada tag abierto en lugar de perder el tiempo optimizando el código cerrando tags que tienen cierres opcionales y/o aperturas. Igualmente, entrecomillá todos los valores de los atributos en lugar de ponerte a pensar cuales llevan y cuales no. Como agregado el evitar pensar en todas estas cosas no sólo hará que sufras menos dolores de cabeza, sino que además tu código será mas consistente.

Una vez que los programas se pongan al día con su generación de código, vas a preferir que generen XHTML5 en lugar de HTML 5. El uso del XML es mirar hacia el futuro; sus características te permiten a generar “documentos políglotas” que consisten en múltiples formatos más allá de RDFa, MathML, y SVG de HTML 5. También puedes usar herramientas como  XPath, XSLT, y XQuery en tu código basado en XML, usando cualquier procesador XML (aunque hay un procesador en Java que trabaja con HTML 5).

Por su puesto, no todo son buenas noticias. Si te abocas al HTML 5, acordate que tu servidor debe devolver los documentos en el formato MIME de application/xhtml+xml o text/xml. Esto puede que tengas que negociarlo con tu compañía de hosting. También, cuando recibas un archivo XML, cualquier error de sintáxis va a causar un mensaje de error.

Fig. 1. Error de proceso XML por tags desparejas.

Si estás escribiendo tu código a mano, tomá estos mensajes como una manera de mantenerte en orden. Si estás usando algún programa que crea XHTML, entonces no hay problema; estas herramientas siempre suelen producir XML bien nivelado.

Expresiones Regulares

El HTML 5 extiende el elemento input dándole nuevos atributos que te permiten especificar que datos vas a permitir como entrada. Estos atributor incluyen min y max (para dar un rango numérico), y HTML 5 también ofrece nuevos valores para el atributo type, como url, email, date (fecha), y time (hora)

Si ninguno de estos nuevas clases se adapta a tus necesidades, HTML 5 provee del atributo pattern para los elementos input con el type="text". El valor para el atributo  pattern es una expresión regular, como las definidas en ECMAScript y usadas en JavaScript. Las Expresiones Regulares son una manera consistente y quizás algo crípticas de hacer un pattern de caractéres. Por ejemplo si necesitás hacer coincidir un grupo de cinco dígitos o nueve dígitos del código postal de USA o el de seis caracteres de Canadá, puedo usar el siguiente pattern:

([0-9]{5}(-[0-9]{4})?)|([A-Z][0-9][A-Z]\s+[0-9][A-Z][0-9])

Las nuevas capacidades de los formularios web han sido parcialmente implementadas en Safari y Chrome y por completi en Opera (mirar este sitio para ver las posibildades de cada navegador). No te preocupes si u navegador no soporta las extensiones a HTML 5 al form; podés descargar el Google’s Web Forms 2 y estás listo para hacerlo andar!

Aca hay un ejemplo de un formulario que valida la fecha y el código postal:

Y aquí el código correspondiente:

<p>
Enter a date: <input type="date" name="day"
required="required"
title="Use format yyyy-mm-dd" />
</p>

<p>
Enter a US or Canadian Postal Code:
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&#160;B2C" />
</p>

Aprender Expresiones regulares es algo que bien vale la pena tomarse el tiempo de aprender. Muchos editores de texto ofrecen expresiones regulares integradas en su sistema de búsqueda y reemplazo, y cuando empezás a usarlas, te vasa preguntar como fuiste capaz de vivir sin ellas.

Arte estático con SVG

Fig. 2. Imagen de SVG mostrando formas coloreadas.

Si lo que buscas es dibujos vectoriales de bordes definidos, HTML 5 les permite poner  SVG (Scalable Vector Graphics) en sus documentos. Colocar SVG embebido está parcialmente implementado en Firefox, Safari, y Opera, de acuerdo con este sitio.

Podés linkear a un archivo SVG en Firefox 3.5. Ese gráfico es un poquito complejo —acá hay uno mucho más simple (vea Fig. 2) mostrando algunas formas coloreadas.

Y aquí está el SVG que genera:

<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 100"
width="200px" height="100px">

<circle cx="50" cy="50" r="30"
    style="stroke:none; fill:#ff0000;"/>

<g transform="translate(100, 20) scale(1.65)">
    <polygon points="36 25, 25 36, 11 36, 0 25,
        0 11, 11 0, 25 0, 36 11"
        style="stroke:none; fill:#0000ff;" />
</g>

<rect x="60" y="20" height="60" width="60"
    style="stroke:none; fill:#00ff00;
    fill-opacity: 0.5;" />
</svg>

Aunque es posible usar JavaScript para dinámicamente modificar un gráfico SVG, HTML 5 provee una solución mejor:

El canvas (lienzo) en blanco

El elemento  canvas es uno de las mas exitantes  caracaterísticas del HTML 5, y es soportado por Firefox, Safari, Opera, y Chrome—pero no por Internet Explorer. (que raro…) El elemento canvas es verdaderamente una característica avanzada. Puedes usar Javascript para dibujar lo que quieras (literalmente) en este lienzo en blanco.

Aquí va el gráfico SVG del ejemplo, usando sólo canvas:

Y aquí está el JavaScript que lo fabrica (con multiples estadíos por línea para ahorrar espacio):

function drawSimpleCanvas() {
  var canvas =
    document.getElementById("simpleCanvas");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");

    ctx.beginPath(); // the circle
    ctx.fillStyle = "#ff0000";
    ctx.arc(50, 50, 30, 0, 2*Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.save();

    // move and resize the octagon
    ctx.translate(100, 20);
    ctx.scale(1.65, 1.65);
    ctx.fillStyle = "#0000ff";
    ctx.beginPath();
    ctx.moveTo(36, 25); ctx.lineTo(25, 36);
    ctx.lineTo(11, 36); ctx.lineTo(0, 25);
    ctx.lineTo(0, 11); ctx.lineTo(11, 0);
    ctx.lineTo(25, 0); ctx.lineTo(36, 11);
    ctx.closePath();
    ctx.fill();

    // restore graphics as they
    // were before move and resize
    ctx.restore();
    ctx.fillStyle = "#00ff00";
    ctx.globalAlpha = 0.5;
    ctx.beginPath();
    ctx.rect(60, 20, 60, 60);
    ctx.closePath();
    ctx.fill();
  }
}

Acá hay un <canvas> que demuestra el uso de una simple interacción del usuario:

Normalmente, vas a usar un canvas para mostrar gráficos que acompañen tu contenido.  Por ejemplo, decir “el propos” For example, saying “la media de un grupo de números es el ‘centro de gravedad’ de este grupo” está bien, pero usar un elemento  canvas con un JavaScript que le permite al lector ingresar un grupo de números y mostrarle que significa el “punto de inflección” es mucho más efectivo.

Sorry, but your browser does not support
<canvas>

Igrese números, separados por comas o espacios:

Estos ejemplos ni siquiera empiezan a mostrar la finalidad  y capacidad del elemento canvas. Vea el  Tutorial de Canvas en el sitio de Mozilla para una introducción mas profunda como asi también links de ejemplos.

¿Qué estás esperando?

Así como algunos desarrolladores tienen sus reservas acerca de la dirección en la que el HTML 5 está tomando en la web (y aunque comparto estas reservas), HTML 5 tiene suficientes razones para que valga la pena esplorarlo. Entonces, empezá a mirar lo que otras personas han hecho, experimentá vos mismo, y volvete un poco loco con las nuevas medidas de validación de formularios y las ventajas del canvas.

Hace ya un par de años que hicimos este sitio y estamos proyectando un nuevo diseño.

Por ahora vean los trabajos de Emilio.El sitio usa 960 grid, jquery, y singapore gallery con un template personalizado al máximo.

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

Por todo esto.

¡Feliz Bicentenario Argentina!

Esta pequeña hostería que se ubica en las afueras de san carlos de bariloche necesitaba un rediseño asi que en junto con la fotografía de Palmiro Bedeschi, armamos la nueva imagen del sitio.Para el armado del sitio tuvimos en cuenta las nuevas tendencias en el diseño web junto con la imagen clásica que los dueños de la hostería quieren brindar.

El sitio cuenta con un área autoadministrable para la parte de tarifas y promociones; y una galería de fotos que funciona sobre el excelente script de Singapore Gallery. Además  se utilizó jquery, aquí y allá para darle ese toque 2.0 que tanto se usa estos días.

Los esperamos pronto.

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 <img>, 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 <img> o <span>, 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 <script> dentro del tag <head> de sus documenteos. Le explicaremos esto en detalle luego. Por favor tome nota que si bien esto puede ser hecho con PHP también puede realizarse con otras herrmientas. Perl, ASP, Java servlets y cualquier otro lenguaje que se ejecute en el servidor puede ser un buen candidato para generar imagenes automatizadas. PHP es una plataforma excelente por su gran aceptación, independencia de plataforma y fácil aprendizaje. Considere las alternativas si ud. necesita algo que PHP no pueda hacer o si ud elige hacer de cero su propio generador de imágenes. Pero es más simple, adaptar el código PHP presentado aquí. Una cosa que la modificación del script no incluye es el texto que debe ser generado en nuestras imágenes. Esto es porque el texto que usaremos para producir estas imágenes será pasado por el script via la URL. Por ejemplo, llamando a la URL heading.php?text=URLs%20Son%20Divertidas producirá un gráfico que diga “URLs Son Divertidas” Y eso es todo. Pero no deberemos escribirlo nosotros mismos porque JavaScript lo hará por nosotros.

JavaScript

Baje el código JavaScript aquí Esta técnica tomada principalmente del código de Peter-Paul Koch Reemplazo de imágenes con JavaScript (JIR en inglés) . La premisa del JIR es muy simple: Muchos codificadores de CSS explotan los bugs del navegador para ocultar los estilos CSS para esos navegadores. Estas técnicas son preparadas para el uso limitado y condicional en el código, transformando el CSS en sólo crudo del lenguaje de programación. En lugar de usar este “lenguaje de errores” para compensar las diferencias de los navegadores, Koch y otros pusieron su esfuerzo en que JavaScript — un lenguaje real — al ser más inteligente y accesible, haga lo mismo. Esto es maravilloso para nuestros propósitos porque JavaScript también nos dá una mayor flexibilidad. Específicamente, vamos a usarlo para reemplazar el texto con imágenes que ni siquiera existen aún.

Cuando la página empieza a cargar, el script trata de cargar una pequeña imagen de testeo (1×1 pixel). Si el test es exitoso, podemos concluir que el navegador del visitante a nuestro sitio soporta el muestreo de imágenes, sino no vale la pena el gasto de ancho de banda cargándolas. Esta es la piedra fundamental del JIR: Testeando si se pueden ver las imágenes, podemos determinar cuando nuestros visitantes pueden o no ver las imágenes estilizadas. Si no pueden mostralas, el script se detiene ahí mismo. Asumamos que el navegador del visitante puede mostrar las imágenes, el script espera hasta que la página se cargue completamente, porque no se puede reemplazar el texto que no ha sido cargado aún.

Cuando el HTML termina de cargar, nuestro srcipt busca por elementos específicos (<h2>, <span>, etc.) y lo reemplaza el texto dentro de ellos con un tag <img>. El tag <img> creado dinámicamente tiene su atributo alt seteado al texto original, y el atributo src seteado a la URL del script PHP que hemos instalado. El script PHP luego envía devuelta una imagen PNG modificada y voilá: titulares a pedido. Pesando unos saludables ocho kilobytes, ocuren muchas cosas en este rincón del ring, pero son sólo dos líneas que necesitan ser modificadas antes de que el script funcione.

  replaceSelector("h2","heading.php",true);
  var testURL = "test.png";

La función replaceSelector acepta tres parámetros: El primero es el estilo CSS que indica que elementos deben ser reemplazados. Este selector puede ser casi cualquier selector CSS, incluyendo id, class, elementos y selectores de atributos. El segundo parámetro es la URL de nuestro script PHP El tercer parámetro es de verdadero y falso (true/false) que indica si el texto debe fluir o no con el ancho de la columna. Cuando está activado (true) los titulares se parten en múltiples imágenes, una por cada palabra. Cuando es desactivado (false) sólo una imagen es generads por cada titular. replaceSelector debe ser llamado una vez por cada grupo de elementos que querrasmos reemplazar.

Las URL en estas lineas pueden tener rutas absolutas (http://…) o relativas a nuestro archivo HTML (path/filename). La variable testURL necesita ser dirigida a la dirección de la pequeña imagende testeo (1×1 pixel). Una vez que esta líneas fueron seteadas correctamente, ud. puede subir el archivo JavaScript a su servidor web, y usarla en sus páginas agregando lo siguiente al tag <head>

  <script
    type="text/JavaScript"
    src="replacement.js">
  </script>

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 <img> en los titulares, podemos insertar un tag <span> 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 <link> apropiado en el tag <head>

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 <h2>, 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 (<h1>, <h2>, 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 <a>, 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 <img>, 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