Un GIF espaciador es una imagen GIF pequeña y transparente que se utiliza en diseño web y codificación HTML. Se utilizaron para controlar el diseño visual de los elementos HTML en una página web, en un momento en que el estándar HTML por sí solo no lo permitía. Se volvieron en su mayoría obsoletos después de las guerras de navegadores, alimentadas por la adición de atributos de diseño a las etiquetas de tabla HTML 2.0, y en su mayoría no se usaron cuando las hojas de estilo en cascada se adoptaron ampliamente.
Historia
El libro de 1996 de David Siegel , Creando sitios web asesinos, fue el primero conocido en publicar la técnica Spacer GIF. Según Siegel, inventó el truco en su sala de estar. [1] [2]
El estándar de hojas de estilo en cascada (CSS) disminuyó el uso de GIF espaciadores para diseñar páginas web. CSS puede lograr los mismos efectos de varias maneras, como cambiando el margen o el relleno en un elemento dado o estableciendo explícitamente una posición relativa.
Uso
Desde el principio se reconoció que, aunque el tamaño de las celdas de la tabla no se podía establecer directamente, cada celda podía contener una imagen a través de una IMG
etiqueta. El tamaño de las etiquetas de imagen se puede establecer de forma independiente, con sus atributos WIDTH
y HEIGHT
. La celda de la tabla se redimensionaría automáticamente para contener esta imagen y, por tanto, se redimensionaría. También se advirtió que el tamaño mostrado estaba controlado completamente por los atributos y era independiente del tamaño real del archivo de imagen utilizado (aunque todavía se necesitaba un archivo de imagen real [nota 1] ). En consecuencia, el mismo archivo de imagen podría usarse para todas las imágenes espaciadoras necesarias en una página web. El único requisito era que esta imagen fuera invisible, ya sea por ser del mismo color que la página o por ser transparente.
Los GIF espaciadores en sí mismos eran pequeños archivos de imágenes transparentes. Se utilizaron archivos GIF ya que era un formato común que admitía transparencia , a diferencia de JPEG . Estos archivos se denominaron comúnmente spacer.gif
, transparent.gif
o 1x1.gif
. Antes de la adopción generalizada de las hojas de estilo en cascada (CSS), los GIF espaciadores se usaban para controlar el espacio en blanco dentro de una página web , que se puede cambiar de tamaño de acuerdo con los atributos HTML que se le dan. La razón por la que un GIF espaciador es invisible es para que un desarrollador HTML pueda crear una celda de tabla y rellenar el fondo con un color específico que se pueda ver a través del GIF espaciador transparente. Por ejemplo, un desarrollador que busque crear un cuadro azul cuadrado de 500 píxeles en un lado podría usar un gráfico azul de 500 × 500 por separado a expensas de un ancho de banda adicional. En su lugar, el desarrollador puede especificar el color de fondo de la celda de la tabla y especificar las dimensiones de un GIF espaciador transparente preexistente.
Inconvenientes
Los diseños producidos a menudo se veían perfectos en la pantalla del diseñador, pero podían verse completamente diferentes en la pantalla del lector. Las diferentes resoluciones de pantalla, los motores de renderizado del navegador y las preferencias de fuente del usuario podrían cambiar considerablemente el diseño del diseño. Muchos diseños se volvieron simplemente ilegibles, especialmente cuando las pantallas pequeñas y los dispositivos móviles se hicieron populares.
Implementar un diseño con GIF espaciadores puede resultar extremadamente tedioso, especialmente cuando se realizan pequeños cambios en un diseño existente.
Obsolescencia
La técnica era obsoleta para diseñar páginas web alrededor de 1998. La implementación de CSS permitió que los tamaños de los objetos HTML se establecieran directamente. Aunque la adopción de CSS fue lenta, debido a las malas implementaciones del navegador y la inercia del desarrollador, la capacidad básica de controlar la ubicación de los elementos habilitada por el uso de GIF espaciadores ya se podía utilizar alrededor de 1997.
Además, los diseños basados en tablas y cuadrículas fueron reemplazados [ cita requerida ] por diseños fluidos en un intento de responder al creciente uso de dispositivos móviles para acceder al contenido web . Estas metodologías de diseño abandonaron el intento de controlar el diseño bidimensional entre elementos. [ cita requerida ] En cambio, los elementos se ofrecerían al navegador del lector y el navegador los colocaría lo mejor que pudiera, de acuerdo con el tamaño de la ventana de navegación del lector. Los diseños de diseño fluidos hicieron que la configuración de los tamaños de los elementos de la página en el navegador del usuario fuera menos importante. [ cita requerida ] Esto fue particularmente evidente cuando eliminó la necesidad de establecer tamaños en unidades absolutas como píxeles. Como el diseñador web nunca había podido controlar el tamaño de la ventana de la pantalla del lector, el intento de establecer tamaños rígidamente siempre había sido un error.
Referencias
- ^ sic - en realidad un documento de imagen- no se necesitaba un archivo, pero se usaba invariablemente.
- ↑ Rønn-Jensen, Jesper (3 de marzo de 2006). "Justaddwater: quién inventó el GIF espaciador" . Justaddwater . Consultado el 26 de noviembre de 2006 .
- ^ Siegel, David (2 de octubre de 1997). "La Web está arruinada y yo la arruiné" . XML.com . O'Reilly Media . Consultado el 8 de julio de 2015 .
enlaces externos
- Truco GIF de un solo píxel @ CKWS, por David Siegel
- Ejemplo de GIF espaciador
- Especificación del modelo de caja CSS2, World Wide Web Consortium
- Ejemplo de PHP para generar programáticamente el GIF más pequeño posible
- representaciones de espaciador como URL de archivos y datos en formato GIF y PNG
- El GIF más pequeño de todos
- Módulo nginx ngx_http_empty_gif_module