El diario de Pepe Molina (Caricatos)

Como caso de estudio, vamos a insertar una imagen sin tratarse de una imagen (vaya la redundancia).

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

Si al pleno acierto aspiras, une la utilidad con el deleite

Tomás de Iriarte, escritor español (1750-1791).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

Imágenes sin imágenes

Publicado el día 29 de septiembre de 2011
id=43; categorías: Vicisitudes de un Webmaster, Programación

Como caso de estudio, vamos a insertar una imagen sin tratarse de una imagen (vaya la redundancia).

En la página de un buen amigo (véase en el apartado Mis Amigos Informáticos, el enlace titulado "Utilidades para Webmasters"), encontré un tema que me recordó un viejo ídem de los Foros del Web; la página en cuestión trata sobre Como transformar imágenes a CSS; y la referencia de los foros donde había participado: Impresionante uso de CSS.

En aquellos tiempos empezaba a "encontrarle el gustillo" al tratamiento de las imágenes desde el servidor, realizando miniaturas para mis galerías de caricaturas, y se me ocurrió que también podría realizar una imagen solo con elementos que no sean imágenes de una página web (etiquetas y estilos), así que me puse manos a la obra, y surgió esta página: Pixelator.

La imagen que acompaña este apunte es el resultado de usar la página de destino del formulario del anterior enlace con otros parámetros: pixelar logo.png, pero para adaptarla al formato de este diario, hemos hecho unas leves modificaciones y el resultado sería:

<?php
	function hexa($n)	{
		$digitosHexa = "0123456789ABCDEF";
		return $digitosHexa[$n / 16].$digitosHexa[$n % 16];
	}
	$correcto = true;
	if (isset($_GET["imagen"]))	{
		$imagen = $_GET["imagen"];
		if (isset($_GET["escala"])) $escala = (int) $_GET["escala"];
		else $escala = 1;
		$img = imagecreatefromstring(file_get_contents($imagen));
		if ($img)	{
			$ancho = imagesx($img);
			$alto = imagesy($img);
			$inline = array();
			array_push($inline, "<div style=\"position: relative; width: ".($ancho * $escala)."px; height: ".($alto * $escala)."px\">");
			for ($i = 0; $i < $ancho; $i ++)
				for ($j = 0; $j < $alto; $j ++)	{
					$pixelxy = imagecolorat($img, $i, $j);
					$rgb = imagecolorsforindex($img, $pixelxy);
					$_color_ = hexa($rgb["red"]).hexa($rgb["green"]).hexa($rgb["blue"]);
					array_push($inline, "<div style=\"position: absolute; background-color: #$_color_; left: ".($i * $escala)."px; top: ".($j * $escala)."px; width: {$escala}px; height:{$escala}px\"></div>");
				}
			array_push($inline, "</div>");
		}// fin if ($img)
		else
			$correcto = false;
	}// fin if (isset())
	else
		$correcto = false;
?>
<html>
<head>
<title>
	Pixelator
</title>
</head>
<body>
<?php
	if ($correcto)
		echo implode("\n", $inline);
?>
</body>
</html>

Si probamos el código, podemos ver que se generan los elementos con los estilos aplicados inline (en la misma etiqueta), así no necesitamos usar los estilos en una sección style aparte.

Divide y vencerás

Hemos comentado que adaptamos el código para generar las etiquetas necesarias para incrustar directamente las pseudo-imágenes directamente en el cuerpo (body) de una página web; pero el resultado, aunque satisfactorio, ha incrementado notoriamente el tamaño del código, entre otras cosas por las redundancias (valores de los estilos relativos al tamaño, solo es necesario usarlo una vez)... y ¿Cómo evitar los estilos de posicionamiento?

<< primer apunte < apunte anterior apunte siguiente > último apunte >>