Efectivamente, uno no puede dejar de apreciar y admirar el trabajo de Román Cortés, y, al mismo tiempo, sentir cierta envidia sana por la cantidad de cosas que este hombre está capacitado para hacer. Podría poner aquí algunos ejemplos, pero, la bitácora del artista es digna de leerse entera de arriba a abajo, merece la pena hacerlo, y sería vano por tanto sacar una u otra entrada a colación.

Así que no dejes de echar un vistazo por ti mismo, verás como pasas un rato agradable y divertido, cuando menos. Es fácil, sólo tienes que visitar: romancortes.com

Si en la celda de una tabla existía una imagen, por ejemplo, Internet Explorer no mostraba la tabla en cuestión hasta que la imagen estuviera cargada completamente. Hoy no se utilizan tablas para "maquetar" (¿cómo? ¿que todavía hay algún caso?) pero, sigue siendo necesario tener algunas cosas en cuenta a la hora de dar salida a nuestro código HTML. En esta entrada voy a hablar de una de ellas: la necesidad de incluir el estilo de una página antes de cualquier otra cosa, si puede ser.

Si usas hojas de estilo en tus páginas (que será lo más normal) y también usas código JavaScript, como pueda ser la biblioteca jQuery, pongamos por caso, sitúa en la cabecera del documento HTML, en primer lugar, las hojas de estilo, y, a continuación, el código JavaScript. No conviene hacerlo al revés, por lo que he mencionado más arriba: el navegador, que es el encargado de procesar el código HTML, podría mostrar parte o toda la página "sin estilo", precisamente, porque se encuentra cargando el código JavaScript necesario.

Como la página se muestra al usuario sin estilo, pero, sólo por un par de segundos, en el mejor de los casos, se causa una especie de "flash": el usuario verá la página sin estilo durante un segundo o dos y, luego, ¡zas!, el navegador aplica el estilo que faltaba y la página "cambia" en un momento a la vista del usuario. Todo esto se evita, como queda dicho, añadiendo antes los estilos que el código JavaScript, para que, cuando el navegador muestre la página, esta ya cuente con su estilo correspondiente, aunque quede por cargar aún su código JavaScript.

Hoy, gracias a los comentarios de Óscar, dizque lector de esta bitácora, tengo que reconocer (y no me pesa en absoluto) que estaba equivocado. No sólo la plantilla en cuestión es un error, sino que debería replantearme el uso de ciertas clases en mis "hojas de estilo", puesto que no estoy utilizándolas correctamente, y puede ser que, en lugar de ahorrarme trabajo, me lo den en un futuro.

Bien. Pues a ver si se me ha metido en la cabeza lo que Óscar a tenido a bien informarme. Ciertamente, creo que desde su primer comentario intuí que yo estaba equivocado, aunque, insistí en el asunto, porque, no terminaba de verlo claro, no porque me negara a ver mi error, sino porque, sinceramente, no conseguía ver claro el asunto.

Pero ahora sí que lo veo claro, o por lo menos más claro, o por lo menos me doy cuenta de que la plantilla de clases CSS en cuestión, ni tiene razón de ser, ni es correcto su uso. Me quedan sin duda muchas cosas que aprender sobre este y sobre otros temas, por eso quiero agradecer una vez más a Óscar por sus comentarios.

Me va a tocar el trabajo de repasar las hojas de estilo de ciertos proyectos que tengo en marcha, pero, será un trabajo que no me cueste trabajo, si vale la redundancia, porque procuraré ahora seguir ciertas directrices que antes, simplemente, no estaba teniendo en cuenta. Tú, si quieres, revisa la plantilla en cuestión, y luego los comentarios de Óscar, porque, quién sabe si también podrás aprender algo.

Me estoy refiriendo a cierta plantilla con clases CSS (Cascading Style Sheet, lo mismo te quedas igual) que he publicado en una página de esta bitácora, y, que igual te resulta útil, o curioso, o una tontería, yo qué sé, si no me dices nada. Copio aquí la plantilla por ocupar espacio y porque queda bonita, me parece a mí, vamos.

/* 
Usefull CSS classes
Under GNU LGPL license
(C) 2008 David Esperalta
http://www.davidesperalta.com
 
Please, dont remove this note
You can remove the legend if
you want a minor file size
*/
 
/* Leyend
fr = Float Left
fr = Float Right
cb = Clear Both
cl = Clear Left
cr = Clear Right
tc = Text Cursor
wc = Wait Cursor
hc = Help Cursor
dc = Default Cursor
pc = Pointer Cursor
cc = Crosshair Cursor
dn = Display None
db = Display Block
di = Display Inline
vh = Visibility Hidden
vv = Visibility Visible
ao = Auto Overflow
ho = Hidden Overflow
so = Scroll Overflow
vo = Visible Overflow
fp = Fixed Position
sp = Static Position
ap = Absolute Position
rp = Relative Position
al = Align Left
ar = Align Right
ac = Align Center
aj = Align Justify
bf = Bold Font
if = Italic Font
nf = Normal Font
af = Arial Font 
vf = Verdana Font  
of = Overline Font
uf = Underline Font
sf = Strike Font
wr = White and Red
rw = Red and White
wb = White and Black
bw = Black and White
*/
.fl{float:left}                   
.fr{float:right}                  
.cb{clear:both}
.cl{clear:left}
.cr{clear:right}
.tc{cursor:text}
.wc{cursor:wait}
.hc{cursor:help}
.dc{cursor:default}
.pc{cursor:pointer}
.cc{cursor:crosshair}
.dn{display:none}
.db{display:block}
.di{display:inline}
.vh{visibility:hidden}
.vv{visibility:visible}
.ao{overflow:auto}
.ho{overflow:hidden}
.so{overflow:scroll}
.vo{overflow:visible}
.fp{position:fixed}
.sp{position:static}
.ap{position:absolute}
.rp{position:relative}
.al{text-align:left}
.ar{text-align:right}
.ac{text-align:center}
.aj{text-align:justify}
.bf{font-weight:bold}
.if{font-style:italic}
.nf{font-weight:normal}
.af{font-family:Arial}
.vf{font-family:Verdana}
.of{text-decoration:overline}
.uf{text-decoration:underline}
.sf{text-decoration:line-through}
.wr{background:#fff;color:red}
.rw{background:red;color:#fff}
.wb{background:#fff;color:#000}
.bw{background:#000;color:#fff}

Ahora bien, ya que has visto de qué va el asunto, más o menos por encima, te invito a informarte un poco mejor, si es que lo encuentras lo suficientemente interesante: Usefull CSS classes. Esta entrada la dejaré tal cual, quiero decir, si tengo algo que actualizar o decir acerca de la "plantilla CSS" en cuestión, lo haré en la página de esta bitácora, que acabo de enlazar.

Actualización importante: Los comentarios de Óscar, que puedes leer más abajo, me dejan claro que usar una plantilla como la que presento arriba, lejos de ser útil, puede resultar perjudicial, y, sobre todo, no es la forma correcta de hacer las cosas. Lee los comentarios a esta entrada, sobre todo los de Óscar, pero también los míos, intentando enterarme del asunto, y creo que también tú comprenderás que el uso de una plantilla así sería un error. Ah, ¡y agradece a Óscar la información al respecto! Aquí una entrada sobre esto último.

La que uso con CMS es una escrita en PHP, y, basta que "visite" cierta URL para que se eliminen los espacios en blanco al final de las líneas de todos los archivos del proyecto.

Tratando con PHP, HTML, etc., no es ninguna tontería. Raro es el día que "paso la herramienta CleanLines" y no se eliminan varios miles de espacios.

Eso significan un par de KB. Un par de KB (como mínimo) no es ninguna tontería, hablando de HTML, JavaScript, CSS... de PHP no estoy tan seguro.

Pero, en todo caso: es que odio los espacios y los quitaría de todos modos. :P