Editando apunte: Colores

Editando apunte: Colores cerrar apuntes

ID: 30 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Caricatos, Vicisitudes de un Webmaster, Programación
Etiquetas: bitácora, blog, diario, diseño, php, webmaster
Extras: bitácora, blog, diario, diseño, php, webmaster
apunte: - - - - - - - -

<p>
	<a href="diario.ficha.php?id=50&PHPSESSID=okk7tqq8egou4j1ro9lpr40r42" title="Colores"><img src="diario.imagen.php?id=50&max=300" alt="Colores" longdesc="diario.ficha.php?id=50" style="float: right; margin: 0 -1em .5em 1em" /></a>
	[rss]Es bueno tener la facilidad de aplicar la gama completa de colores en nuestros proyectos, pero sin olvidarnos que siempre será más importante el contenido que la estética. La información tiene que leerse bien, por lo que debemos dar un buen uso a la gama de colores que apliquemos en los párrafos; considerando que suelen ser suficientes los colores predeterminados del navegador o sistema.[/rss]
</p>
<p>
	En la mayoría de páginas que hablan de selección de colores se necesita ejecutar código javascript; un buen ejemplo de ello lo encontramos en la sección "Otras páginas del dominio", en concreto la página "<a href="colores/index.php?PHPSESSID=okk7tqq8egou4j1ro9lpr40r42">Todo sobre los colores</a>"; y aunque este lenguaje sea popular puede estar desactivado, así que propondremos alternativas.
</p>
<p>
	Una alternativa es sencillamente el uso del control select que, como puede verse en la página antes mencionada, pueden modificar los estilos de fondo y texto de cada opción, y simplemente se necesita poner el campo value de cada una de éstas con el color correspondiente.
</p>

<h3 class="subtitulo">
	RGB
</h3>
<p>
	Las siglas <a href="http://es.wikipedia.org/wiki/Modelo_de_color_RGB">rgb</a> son las iniciales de los tres componentes necesarios para crear la paleta de color: red, green, blue (rojo, verde y azul); y en concreto la paleta de colores web, que se puede apreciar en la imagen adjunta, es la combinación de algunos de esos valores (en notación <a href="http://es.wikipedia.org/wiki/Hexadecimal">hexadecimal</a>: "00", "33", "66", "99", "CC", "FF"). Hemos obtenido la paleta para la animación de las letras de este título con el código:
</p>
<pre class="codigo">codigos = "0369CF";
function array_colorines()	{
	respuesta = [];
	for (i = 0; i < 6; i++)
		for (j = 0; j < 6; j++)
			for (k = 0; k < 6; k++)
	respuesta.push(
		codigos.charAt(i) + codigos.charAt(i) +
		codigos.charAt(j) + codigos.charAt(j) +
		codigos.charAt(k) + codigos.charAt(k)
	);
	return respuesta;
}
colores = array_colorines();</pre>

<p>
	El array generado es simplemente las cadenas que representan los colores en formato RRGGBB, y es fácilmente transcribible a otros lenguajes como php, así que con muy poquito esfuerzo podemos crear un control de formulario que no dependa de javascript.
</p>

<pre class="codigo"><select name="color">
<?php
$codigos = "0369CF";
for ($i = 0; $i < 6; $i++)
	for ($j = 0; $j < 6; $j++)
		for ($k = 0; $k < 6; $k++)	{
			$color = $codigos{$i}.$codigos{$i}.$codigos{$j}.$codigos{$j}.$codigos{$k}.$codigos{$k};
			echo "<option value='$color' style='background-color: $color'>$color</option>";
}
?>
</select></pre>

<p>
	Hemos visto que con pocas líneas podemos crear un selector de colores sencillo y que funciona sin necesidad de lenguajes del navegador. También sería fácil la selección de colores predeterminados, o de sistema; pero ¿podríamos acaso tener menos código?
</p>

<h3 class="subtitulo">
	Capturar colores
</h3>
<p>
	La imagen de la paleta de colores que encontramos en este apunte, puede usarse también de otra manera: tenerla como un control type="image", y en destino leer el color del pixel de la imagen donde se pulsó. Parece algo complejo, pero es muy sencillo y eficiente si sabemos hacerlo.
</p>
<form action="diario.jocker.php" style="text-align: center" target="oculto"><input type="hidden" name="PHPSESSID" value="okk7tqq8egou4j1ro9lpr40r42" />
	<fieldset>
		<legend>
			Captura de colores
		</legend>
		<label for="imagen_captura" >
			imagen:
		</label>
		<input type="text" name="imagen" id="imagen_captura" value="colores/colores.gif" readonly="readonly" />
		<br/>
		<input type="image" src="colores/colores.gif?PHPSESSID=okk7tqq8egou4j1ro9lpr40r42" />
		<br/>
		<input type="hidden" name="extra" value="jocker.capturaColor" />
		<br/>
		<iframe name="oculto" style="width: 292px; height: 30px" src="diario.jocker.php?imagen=colores%2Fcolores.gif&x=103&y=139&extra=jocker.capturaColor"></iframe>
	</fieldset>
</form>
<br/>
<p>
	En el formulario encontramos solo una imagen y un campo que indica donde se encuentra la imagen (que evidentemente podría obviarse), junto con un recuadro que muestra el color obtenido de la imagen (sus coordenadas x, y). Esa zona es la ventana hacia donde se envía ese formulario, cuyo código para obtener ese dato es este:
</p>
<pre class="codigo">$img1 = imagecreatefromstring(file_get_contents($_GET["imagen"]));
$ancho = imagesX($img1);
$alto = imagesY($img1);
$img2 = imagecreatetruecolor($ancho, $alto);
imagecopy($img2, $img1, 0, 0, 0, 0, $ancho, $alto);
$captura = imagecolorat($img2, $_GET["x"], $_GET["y"]);
$color = strtoupper(dechex($captura));
while (strlen($color) < 6) $color = "0$color";</pre>

<form action="diario.jocker.php" style="float: right" target="oculto" ><input type="hidden" name="PHPSESSID" value="okk7tqq8egou4j1ro9lpr40r42" />
		<input type="hidden" name="imagen" value="dibujos/miemoticon.gif" />
		<input type="hidden" name="extra" value="jocker.capturaColor" />
		<input type="image" src="dibujos/miemoticon.gif?PHPSESSID=okk7tqq8egou4j1ro9lpr40r42" />
	</form>
<p>
	Para terminar diremos que evidentemente es posible usar cualquier imagen para un selector de colores (pueden probar pinchando sobre mi emoticón).
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación