EstadoBeta

CSS: ¿Dónde van las imágenes?

Visita este artículo en http://www.estadobeta.com/2007/01/30/css-donde-van-las-imagenes/

Por Ismael en CSS, artículos, tips

Métodos para organizar imágenes en sitios diseñados con CSS

Imaginemos una página web con imágenes. Una galería de fotos, un reporte lleno de gráficos o una receta de cocina con fotos de los platos terminados. Además, imaginemos pequeños bullets para las listas, sombreados de color para los bordes y una imagen que se repite como patrón de fondo. Esta página imaginaria debe ser construída con la más estricta separación de contenidos y diseño según los estándares XHTML y CSS.

¿Dónde pongo las imágenes?

La etiqueta img de HTML me permite incluír imágenes de todo tipo como parte del documento. Pero además sabemos que en CSS podemos usar background-image para el mismo efecto.

Ambas opciones son técnicamente legítimas. Como siempre, la decisión pasa por una cuestión de objetivos, y la idea fundamental debe ser aprovechar al máximo las virtudes de cada tecnología.

El propósito de HTML es estructurar el contenido del documento, es decir todo aquello que informa al lector sobre el tema de la página. Junto al texto, los gráficos del reporte, o las fotos de la receta de cocina, claramente son parte de esa información. Si efectuáramos una busqueda de imágenes en Google para la frase “Pato a la Naranja“, probablemente querríamos encontrar fotos del suculento plato y sus ingredientes. La forma de lograr eso es incluír esas imágenes en el contexto de los textos que la complementan.

Por otro lado, tenemos aquellas imágenes que son eminentemente decorativas, ya sea para ayudar al formato visual del documento (bordes, bullets) o por mera estética (fondos, sombreados). Esas imágenes son ornamento, y por lo tanto debieran ser agregadas por medio de CSS, ya que el propósito de esa tecnología es dar formato y diseño a los contenidos estructurados en HTML.

Considerados estos dos tipos de imágenes (contenido y diseño), falta decidir dónde se ubicarán en la estructura del sitio. Métodos hay muchos, pero yo suelo crear un directorio para las imágenes-contenido en la raíz del sitio (llamado “medios”, o “imagenes”) donde, además de las gráficos, logos y fotos, van los flash y otros elementos que pueden ser considerados contenidos no dependientes del diseño.

/
    index.html
    medios/
        logo.png
        grafico.gif
        banner.swf

Además, creo un directorio llamado “CSS” o “estilos”, donde guardo los archivos .css. Dentro de este último directorio, creo una subcarpeta para las imágenes que van incluídas en las hojas de estilos (normalmente la llamo “i” o “bitmaps”). Esta estructura me permite aprovechar una cualidad de CSS: las imágenes referenciadas por background-image (o cualquier atributo que soporte el comando url()) son relativas a la hoja de estilos, no al documento HTML. De esta forma puedo “empaquetar” los CSS junto con sus imágenes a la manera de “skins” o “temas” que puedo intercambiar o actualizar. Al mantener las imágenes-contenido en su propio directorio, no importa qué estilos CSS ocupe mi sitio, no perderé los gráficos, logos o fotos.

/
    medios/
    css/
        master.css
        i/
            body-fondo.gif

Para sitios más grandes, es recomendable profundizar esta estructura para mantener el orden y la modularidad del proyecto. EL siguiente ejemplo usa subdirectorios para los distintos diseños de un sitio a lo largo de los años:

/
    medios/
        logo.png
        grafico.gif

    css/
        2005/
            master.css
            i/
                body-bg.gif
                sombreado-izq.jpg
         2006/
             master.css
             i/
                 body-1-bg.gif
                 body-2-bg.gif
                 header-bg.gif

¿Cómo nombro las imágenes?

Otra pregunta importante y dos respuestas posibles: para las imágenes-contenido (las que van en el directorio “medios”) es importante que los nombres tengan relación con el contenido, para aumentar su visibilidad en buscadores. Por lo mismo, es recomendable separar palabras por guiones (Google reconoce los guiones como separadores de palabras, y así se potencia la visibilidad de cada palabra). Por ejemplo: “grafico-estadisticas-2007.jpg”.

Por otra parte, las imágenes-diseño (esas que van en los subdirectorios de la carpeta “css”) deben ser, ante todo, fáciles de encontrar y organizar. Para esto yo he llegado a la convención de nombrar, primero, el elemeno HTML donde van posicionadas y luego la función que cumplen (”header-titulo-bg.gif”, “body-sombra-izq.jpg”). Para sitios más grandes defino más directorios para las secciones del proyecto.

/
    css/
        master.css
        header/
            header-bg.gif
            main-nav-border.png
         content/
            content-border-izq.gif
            content-border-der.gif
         footer/
            footer-col1-bg.jpg
            footer-col2-bg.jpg

En master.css usaría las imágenes de la siguiente manera:

Code (css)
 
#header {
  background: url(header/header-bg.gif) left top repeat-x;
}
#footer .column1 {
  background: url(footer/footer-col1-bg.jpg) left top repeat-y;
}
#footer .column2 {
  background: url(footer/footer-col2-bg.jpg) left top repeat-y;
}
 

¿Qué convenciones usan los lectores de EstadoBeta? ¿De qué forma se puede optimizar aún más el trabajo con CSS e imágenes?

Este artículo fue publicado en 30/1/2007 a las 5:01 pm y está archivado bajo CSS, artículos, tips. Puedes seguir esta discusión a través de su canal RSS 2.0. También puedes enviarlo a Digg para compartirlo con más lectores.

12 comentarios para “CSS: ¿Dónde van las imágenes?”

acido69 Dice:
1/30/2007 at 6:45 pm
project
|__css[stilo.css, …]
| …
|__graphs
| |__bg [bgBody.jpg, …]
| |__txt[txtTitulo.gif, …]
| |__logo[loMiLogo.png, …]
| |__btn[btnEnviar.gif, …]
| |__photo[ptNinosDeLaCalle.jpg, …]
|__index.htm
Ismael Dice:
1/30/2007 at 6:56 pm
El problema que veo con ese esquema es que, por ejemplo si quieres cambiar el estilo tienes que recordar qué imágenes pertenecen a CSS y cuales a HTML. Puede ser difícil de mantener. Pero claro, esas es sólo mi opinión.
acido69 Dice:
1/30/2007 at 8:41 pm
si, tienes razón pero bg, btn, txt siempre son de css. photo y logo son comodines, por eso no te interesa borrarlas ya que puedes utilizarlas en cualquier momento.
el problema(que yo veo) de crear directorio dentro de la carpeta es:
“url(header/header-bg.gif)” un directorio por cada Wrap; en caso de hacer algún cambio tienes que saber a que wrap corresponde. En caso de usar png, tendrás que poner una ruta demasiado extensa.

Reconozco que muchas veces pensé en hacer esto que tu has mencionado pero no me atreví a dar el paso. También hago un poco mal en no mantener las versiones de css, pero al ritmo que tengo que hacer cambios simplemente reemplazo el anterior.
pablo Dice:
2/12/2007 at 2:23 am
Hola chicos quería consultarles lo siguiente, he terminado un trabajo de web y enfirefox ningun problema, pero en explorer7 me salen en el index unas rallitas negras pequeñas ( - ), son varias y me sale solo en un html, a demas que no se me ve el background en ningun html…. pliss espero sus comentarios, gracias desde ya .
Diego Díaz Dice:
2/20/2007 at 8:56 am
Buen tema. Personalmente creo algo difícil estandarizar estructuras en el orden de las imagenes para un proyecto.
Recordemos que hace algunos años la cosa era a la que te criaste, tan solo subiendo imagenes en la raíz o los más “educados”, creaban la respectiva carpeta /img, /images/ /imagenes/ etc etc…
En cierta empresa, vi ligeramente el esquema que propones en tu articulo Ismael, y a primera vista no me agradó. Si bien es ordenado, creo que los niveles de directorios pueden engorrosos al momento de tomar un proyecto grandote. No sé, es mi perspectiva.
En mi sitio tengo un verguero de carpetas y precisamente, este mes estoy haciendo el rediseño y un ordenamiento en los directorios.
Me gustaria dejar algo asi:
/imagenes/html /imagenes/fotos
En el directorio /html todas las imagenes que esten enlazadas desde mi hoja de estilos (fondos, cabeceras, iconos, bullets, etc..) y en /fotos meter imagenes que probablemente estén en duro dentro de mi XHTML.
RetroFOX Dice:
3/18/2007 at 11:24 pm
Creo que no es difícil definir una única estructura en general. Creo que depende en particular de cada aplicación. Si bien hay patrones comunes, cada proyecto tiene su particularidad. Por ejemplo, para un theme simplemente bastaría con un único directorio.
Ismael Dice:
3/18/2007 at 11:36 pm
Si te refieres a los themes de Wordpress, la verdad es que pienso lo contrario. Es una pésima idea que la estructura por defecto de los temas de WP sea tan desordenada. Es una de las tantas razones de mi relación de amor/odio (con grandes dósis de odio) con Wordpress.
Jose Dice:
3/20/2007 at 12:05 am
Excelente Yo aplico algo similar pero no tan estructurado. Gracias por las recomendaciones, voy a aplicar lo que he leído.
CardinalDash Dice:
9/10/2008 at 4:37 am
Hola,

Tal y como lo veo yo personalmente la estructuras de los datos fisicos si es un problema… Dispongo de mas de 1500 themes para Wordpress (Por ejemplo) y practicamente ninguno esta estructurado igual, a consecuencia cada uno en el momento de ser reajustado a las necesidades requerira de una edicion especial para dicho theme. Unos tienes las IMG en un solo directorio a igual que los archivos html y demas, otros disponen de estructuracion de graficos pero no de archivos, otros ni se sabe que logica tienen…

En mis diseños tanto nuevos como adaptados realizo una estructuracion por partes:

Home
|
|-css
| |
| |-style.css
| |
| |-extended.css // Estilos Opcionales y complementarios
|
|-img
| |
| |-css
| |
| |-home
| |
| |-gry (Gallery)
| |
| |-alb (Albums)
|
|-lib
| |
| |-class (Clases y funciones)
| |
| |-js
| |
| |-oth (Otros)
|
|-html
| |
| |-index.php
| |
| |-…
|
|-index.php
una mujer Dice:
5/23/2009 at 9:44 am
llevo varios días intentando aclarme aquí en la webera, pero no sé si cuando hablan de css se refieren a estilos.css o a estilo-general.css, y qué diferencia existe entre ambos o cuál debo dejar de utilizar.
Coto Dice:
5/25/2009 at 3:54 pm
@una mujer: Cuando hablan de CSS se refieren a todo lo que tenga que ver con el diseño de un sitio (tamaños, formas, ubicaciones, colores, imaganes de diseño - no de contenido - )

PS: Ismael estás en sequía de post
un abrazo.
odzsdibjyh Dice:
4/23/2010 at 2:50 pm
I can’t ead wws.estadobeta.com in IE 1.9, I just thougut I might let you know.

great videoess

desarrollo web con estándares

CSS: ¿Dónde van las imágenes?

¿Cómo nombro las imágenes?

12 comentarios para “CSS: ¿Dónde van las imágenes?”

Categorías

Subscripción (?)