logo El diario de Pepe Molina (Caricatos)

yo

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

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

El cerebro no para de trabajar hasta que hablamos en público

Albert Einstein, científico estadounidense (1879-1955).


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


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


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


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


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


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


botón pay-pal

Imágenes sin imágenes

emoticón de Caricatos 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?

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.43) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 3057 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=75&amp;max=300
¡Felix Navidad!
¡Felix Navidad!
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio