Todos para uno y HTML5 para todo (parte 3)

Pues después de los dramas que siguieron a la presentación del logo para HTML5 y su propósito que sería agrupar toda una serie de tecnologías dispares bajo el único término HTML5, aunque no fueran parte de la especificación, ahora la W3C recula y dice HTML5 es nada más para HTML5. Lo demás se supone que tendrá su propio nombre, aunque para lo único que especifica es para CSS3 aunque suponemos, o queremos creer, que también se extenderá a lo demás: JavaScript, WOFF, geolocalización, etc.

Claro, ahora HTML5 no es HTML5 sino simplemente HTML. El WHATWG va a seguir desarrollando la especificación pero en vez de decir de vez en cuando “Ok, esto va a ser HTML5” o “esto va a ser HTML” simplemente irá actualizándola de modo continuo, si acaso con una fecha de última revisión, pero siempre será HTML.

Por otra parte, el W3C puede decidir tomar esta especificación en algún punto en el tiempo para su implementación en distintos navegadores. Ellos tal vez le llamarán a esto HTML5 o HTML6. Sepa la bola.

Como nos afectará a los desarrolladores aún está por verse. Por el momento se puede decir que podemos desarrollar usando la especificación del WHATWG (lo que era HTML5 que ahora es HTML).

A fin de cuentas, de todos modos vas a tene que seguir haciendo pruebas en distintos navegadores.

Flash por debajo de los menús

Esta es una duda con la que todavía me topo muchas veces a pesar de estar bien documentada. El caso es que muchas veces cuando tenemos algún contenido en flash, como un video, banner interactivo, menú, etc. y queremos que otro contenido en html se expanda sobre él nos encontramos con que no importa qué hagamos el flash siempre se ve encimado y tapa lo que queremos que se muestre.

Para comprender lo que está pasando necesitamos tener en cuenta que los plugins siempre se ejecutan independiente de la página a menos que le digamos otra cosa. A pesar de que nosotros lo vemos como parte de la página lo que el navegador hace es crear una ventana encima de nuestra página pero que no es parte de ella, y le pasa el control al plugin de flash o lo que sea para dibujar ahí todo lo que quiera. Es como poner una pintura en un cuadro sobre la pared.

Lo que nosotros queremos hace es que raye las paredes en vez de poner este cuadro encima. Para lograr esto flash reconoce una variable que se llama wmode. Esta variable puede tener los valores transparent, opaque o window. Si no le indicamos nada wmode toma el valor window y éste es el que causa que flash se ejecute en su propia ventana independiente.

O sea que la solución que buscamos es poner wmode en transparent u opaque. La diferencia entre estos dos es que transparent te permitirá tener áreas transparentes en el flash, que permitirán que se vea el fondo de la página. Por ejemplo, puedes dibujar una dona con un hoyo por el que se vea lo que está abajo en la página html. El modo opaque no se transparenta hasta la página, sino que la cubre (pero le puedes poner cosas encima).

Aunque Adobe recomienda el uso de transparent, este método ocupa más capacidad de procesamiento y puede hacer más lento tu flash en algunas computadoras. Es mejor ponerlo en opaque, hacer pruebas y si algo no funciona bien entonces cambiarlo a transparent.

Para cambiar el valor de wmode simplemente tienes que indicarlo en el <object> y <embed> que estés usando para llamara a tu película:

<object bla bla ... >
...
<param name="wmode" value="opaque" />
...
<embed bla bla ... wmode="opaque" ... />
</object>

¡Y ya!

Los usos y desusos de blockquote

Una de las ventajas más grandes de usar los elementos de html de manera correcta está en que puedes identificar rápidamente las diferentes secciones de texto y a que parte corresponden. Sin embargo no todos los desarrolladores conocen la manera correcta de usarlos.

Entre los elementos más incomprendidos está blockquote. Muchos, muchos desarrolladores lo usan para darle un margen mayor a un párrafo, siendo que en realidad este elemento debe servir para indicar que un párrafo proviene de una cita textual de otra fuente.

Por ejemplo, si estamos citando de un libro:

En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lantejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.

Es importante que la diferencia quede clara porque, sí, si no aplicamos estilos habrá un margen mayor del lado izquierdo en casi todos los navegadores, pero aplicándole estilos a blockquote podemos hacer que ese bloque de texto tenga cualquier característica:

El resto della concluían sayo de velarte, calzas de velludo para las fiestas, con sus pantuflos de lo mesmo, y los días de entresemana se honraba con su vellorí de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera.

Lo más importante es que en el código estos párrafos siguen identificados como una cita textual y la podemos tratar como corresponde e identificarlas rápidamente. Un elemento adicional que pertenece dentro de este elemento es cite. Con éste hacemos la aclaración de donde proviene la cita:

Frisaba la edad de nuestro hidalgo con los cincuenta años; era de complexión recia, seco de carnes, enjuto de rostro, gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada, o Quesada, que en esto hay alguna diferencia en los autores que deste caso escriben; aunque por conjeturas verosímiles se deja entender que se llamaba Quijana. Pero esto importa poco a nuestro cuento: basta que en la narración dél no se salga un punto de la verdad.
El ingenioso hidalgo Don Quijote de la Mancha

El último elemento es la simple y sencilla q. La q la usamos cuando queremos hacer una cita corta dentro del mismo párrafo. Internet Explorer no agregará comillas automáticas, todos los demás navegadores sí. Como el viejo decía: Si las cosas que valen la pena se hicieran fácilmente, cualquiera las haría. Esto distingue el texto citado del resto tanto de manera visual como en el código. Incluso la podemos usar dentro de otra cita:

…porque la claridad de su prosa y aquellas entricadas razones suyas le parecían de perlas, y más cuando llegaba a leer aquellos requiebros y cartas de desafíos, donde en muchas partes hallaba escrito: La razón de la sinrazón que a mi razón se hace, de tal manera mi razón enflaquece, que con razón me quejo de la vuestra fermosura.
El ingenioso hidalgo Don Quijote de la Mancha

¿Qué hacemos entonces si necesitamos distinguir un párrafo que no es una cita textual? Simplemente creamos una clase para ese párrafo y le aplicamos estilos. En estos ejemplos estoy creando estilos en la línea, pero lo mejor es aplicarlos en una hoja de estilos separada. Recuerda que es preferible que los nombres de las clases digan porqué es importante el elemento, no como se va a ver.

Correcto: class="nota", class="advertencia", class="pocoImportante"
Incorrecto: class="fondoRojo", class="orilladoalaorilla", class="fonditoAzulChiclamino"

Este párrafo no es una cita, pero su importancia, relevancia, agudo ingenio y encanto precisan que se le dé una presentación especial de buen gusto y mejor vestir.

Finalmente la importancia de mantener el buen uso de blockquote, cite y q está en que estos elementos de html nos permiten mantener nuestro código limpio y fácil de leer, y eso lo apreciaremos a la hora de hacer cambios.

Imágenes que se estiran

Una de las cosas agradables de programar usando diseños flexibles es que las cosas se ajustan al tamaño de la ventana del usuario, independientemente de la resolución de su monitor. Pero a veces las imágenes dan problemas… De Robertobaca.Net

Las imágenes suelen tener una sola resolución y si tienes una imagen que debe ocupar 200 pixeles en tu encabezado de 800 pixeles para que se vea bien y no rompa el diseño puede ser difícil hacer un diseño flexible que se ajuste.

Por lo general nuestro código se verá así:

<div id='encabezado' style='width: 100%;'>
<img src='imagen' align='left' width='200' />
Bienvenidos a mi sitio
</div>

Y eso puede funcionar bien a cierta resolución, pero si hacemos la pantalla más chica o más grande, la imagen ocupará un área mayor o menor de la que queremos. Pero hay una manera de solucionarlo:

<div id='encabezado' style='width: 100%;'>
<div id='imagen' style='width: 25%; float: left;'>
<img src='imagen' style='width: 100%;' />
</div>
Bienvenidos a mi sitio
</div>

Como ves, he puesto la imagen dentro de otro div que tiene un ancho de 25% flotado a la izquierda y la imagen tiene un ancho de 100%, y el 100% de 25% es 25%.

Patos

Claro, para mejores resultados ocupa una imagen cuya resolución original sea lo bastante grande para verse bien incluso en tamaños grandes. Sin exagerar para que no sea demasiado pesada.

Tipografía en HTML

Un buen tipo de letra puede hacer que tu sitio se vea más interesante, dinámico y original, pero no siempre es fácil usar el que más te gusta. De Robertobaca.Net

El asunto de la tipografía en las páginas de internet es uno de los más complicados. Por lo general, para una página web en html sólo puedes usar los tipos de letra que la computadora de tu visitante tenga instaladas y como no sabes que tipos de letras ha instalado cada quien lo más seguro es usar la tipografía incluida en los sistemas operativos.

Son los más seguros porque casi todo mundo los tiene. Si deseas usar otros que no estén en la lista lo puedes hacer, pero el navegador va a revertirse a uno que sí tenga disponible.

No es necesario usar Arial para todo. Los sistemas operativos actuales incluyen muchos tipos interesantes.

Esto no quiere decir que tengas que usar Arial para todo o que todas los sitios tengan que verse iguales. Como puedes ver en la lista de arriba hay muchas opciones que bien usadas pueden darle a tu sitio más vitalidad y originalidad.

Si aún así esos tipos te parecen limitados o has encontrado la tipografía perfecta para tu sitio pero no es una que sea de las comunes una solución es usar flash. Por lo general flash hace al sitio poco flexible, no estándar e ilegible para quienes no lo tienen y además difícil de encontrar para los robots de google o yahoo.

Pero, puedes usar una técnica llamada sIfr que combina javascript y flash para reemplazar dinámicamente el texto de tu página con tipografía flash. Así puedes usar cualquier tipo de letra que tengas en tu propia computadora.

La ventaja de esta técnica es que si el visitante no tiene flash seguirá viendo el texto de siempre, o sea que puede ser usado por cualquiera sin detrimento y los buscadores lo pueden seguir indexando.