<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Sentido Web &#187; background</title>
	<atom:link href="http://sentidoweb.com/tag/background/feed" rel="self" type="application/rss+xml" />
	<link>http://sentidoweb.com</link>
	<description>Desarrollo web, HTML, CSS, Javascript, PHP, MySQL</description>
	<lastBuildDate>Mon, 16 Jan 2012 10:16:20 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Backgrounds animados con jQuery</title>
		<link>http://sentidoweb.com/2008/09/23/backgrounds-animados-con-jquery.php</link>
		<comments>http://sentidoweb.com/2008/09/23/backgrounds-animados-con-jquery.php#comments</comments>
		<pubDate>Tue, 23 Sep 2008 20:45:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2008/09/23/backgrounds-animados-con-jquery.php</guid>
		<description><![CDATA[Interesante script para jQuery que usa el plugin para modificar la posición del background y que nos permite hacer efectos con el background similares a los que se suelen hacer con Flash. Mediante un fondo de mayor tamaño que el elemento y con una forma irregular (esquinas, ondas, degradado, &#8230;) se trata de que al [...]]]></description>
			<content:encoded><![CDATA[<p>Interesante script para jQuery que usa el <a href="http://plugins.jquery.com/project/backgroundPosition-Effect">plugin para modificar la posición del background</a> y que nos permite hacer <a href="http://snook.ca/technical/jquery-bg/">efectos con el background</a> similares a los que se suelen hacer con Flash.</p>
<p>Mediante un fondo de mayor tamaño que el elemento y con una forma irregular (esquinas, ondas, degradado, &#8230;) se trata de que al mover el fondo, el efecto que se produzca sea el de una animación.</p>
<p>El script sería algo así:</p>
<pre><code><pre class="javascript">$<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'#nav a'</span><span style="color: #66cc66;">&#41;</span>
.<span style="color: #006600;">css</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">&#123;</span>backgroundPosition: <span style="color: #3366CC;">"0 0"</span><span style="color: #66cc66;">&#125;</span> <span style="color: #66cc66;">&#41;</span>
.<span style="color: #006600;">mouseover</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">stop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">animate</span><span style="color: #66cc66;">&#40;</span>
<span style="color: #66cc66;">&#123;</span>backgroundPosition:<span style="color: #3366CC;">"(0 -250px)"</span><span style="color: #66cc66;">&#125;</span>,
<span style="color: #66cc66;">&#123;</span>duration:<span style="color: #CC0000;">500</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>
.<span style="color: #006600;">mouseout</span><span style="color: #66cc66;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
$<span style="color: #66cc66;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">stop</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">animate</span><span style="color: #66cc66;">&#40;</span>
<span style="color: #66cc66;">&#123;</span>backgroundPosition:<span style="color: #3366CC;">"(0 0)"</span><span style="color: #66cc66;">&#125;</span>,
<span style="color: #66cc66;">&#123;</span>duration:<span style="color: #CC0000;">500</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>
<span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span></pre></code></pre>
<p><a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/">Using jQuery for Background Image Animations</a></p>
<p>Vía / <a href="http://scriptandstyle.com/submissions/using-jquery-for-background-image-animations">Script &#038; Styles</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2008/09/23/backgrounds-animados-con-jquery.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Laboratorio: calcular fondo de imagen con PHP</title>
		<link>http://sentidoweb.com/2006/06/09/laboratorio-calcular-fondo-de-imagen-con-php.php</link>
		<comments>http://sentidoweb.com/2006/06/09/laboratorio-calcular-fondo-de-imagen-con-php.php#comments</comments>
		<pubDate>Sat, 10 Jun 2006 00:45:00 +0000</pubDate>
		<dc:creator>displaynone</dc:creator>
				<category><![CDATA[How to]]></category>
		<category><![CDATA[Laboratorio]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[imágenes]]></category>
		<category><![CDATA[php background para imagenes]]></category>

		<guid isPermaLink="false">http://sentidoweb.com/2006/06/09/laboratorio-calcular-fondo-de-imagen-con-php.php</guid>
		<description><![CDATA[Hace tiempo contábamos como rotar imágenes aleatoriamente, algo que se puede utilizar para la cabecera del blog (como hace mucha gente). El problema es cuando las imágenes son completamente distintas y hay que buscar un fondo que le convenga. Para ello nada mejor que un script PHP que te calcule el fondo según los colores [...]]]></description>
			<content:encoded><![CDATA[<p>Hace tiempo contábamos como <a href="http://sentidoweb.com/2006/04/05/rotar-imagenes-aleatoriamente.php">rotar imágenes aleatoriamente</a>, algo que se puede utilizar para la cabecera del blog (como hace mucha gente). El problema es cuando las imágenes son completamente distintas y hay que buscar un fondo que le convenga. Para ello nada mejor que un script PHP que te calcule el fondo según los colores de la imagen, ya sea calculando la media o la mediana (el que más aparece). Como veréis en el ejemplo, la media (arriba) y la mediana (abajo) devuelven valores distintos.
<img alt="backgrounds.png" src="http://sentidoweb.com/img/2006/06/backgrounds.png" width="261" height="403" class="center"/></p>

<span id="more-286"></span>
<p>Primero declararemos variables y cargaremos la imagen.</p>
<pre><code>// url de la imagen
$imagen = $_GET["imagen"];
// media = 1; mediana = 0
$media = $_GET["media"];
// Cargamos la imagen y calculamos el ancho y el alto
$im = imagecreatefromjpeg (getcwd().'/'.$imagen.'.jpg');
$ancho = imagesx($im);
$alto = imagesy($im);
// Definicion de variables
$color = ""; // variable auxilar
$r = 0;  // para sumar los componentes R (rojo)
$g = 0;  // para sumar los componentes G (verde)
$b = 0;  // para sumar los componentes B (azul)
// un array que guarda los valores para la mediana
$mediana = array();
// Valor por defecto
$RGB = "FFFFFF";</code></pre>
<p>El array <em>$mediana</em> tendrá como clave los colores de la imagen y como valor el número de veces que aparece en la imagen.</p>
<p>El siguiente paso es leer los colores para ir calculando la media y la mediana, para la media voy sumando los componentes RGB y para la mediana cuento las veces que aparece un color.</p>
<pre><code>// Leemos los colores y almacenamos tanto para la media como para la mediana
for ($i = 0; $i<$ancho; $i++) {
for ($j = 0; $j<$alto; $j++) {
// obtengo el color
$color = imagecolorat($im, $i, $j);
// Calculo componentes RGB
$raux = ($color >> 16) &#038; 0xFF;
$gaux = ($color >> <img src='http://sentidoweb.com/wp-includes/images/smilies/icon_cool.gif' alt='8)' class='wp-smiley' /> &#038; 0xFF;
$baux = $color &#038; 0xFF;
// Sumo valores para la media
$r += $raux;
$g += $gaux;
$b += $baux;
// Añado valor para la mediana
$rgb = ((strlen(dechex($raux))==1)? "0":"") . dechex($raux) .
((strlen(dechex($gaux))==1)? "0":"") . dechex($gaux) .
((strlen(dechex($baux))==1)? "0":"") . dechex($baux);
$mediana[$rgb] = $mediana[$rgb]+1;
}
}</code></pre>
<p>Y por último calculamos la media o la mediana, según hayamos elegido.</p>
<pre><code>if (isset($media) &#038;&#038; $media == '1') {
// Es media
// Calculo la media
$r = $r / ($ancho*$alto);
$g = $g / ($ancho*$alto);
$b = $b / ($ancho*$alto);
// Lo paso a notacion hexadecimal
$RGB = ((strlen(dechex($r))==1)? "0":"") . dechex($r) .
((strlen(dechex($g))==1)? "0":"") . dechex($g) .
((strlen(dechex($b))==1)? "0":"") . dechex($b);
} else {
// Es mediana
$val = 0;
// Reordeno la tabla
asort($mediana);
// Veo cual es el que más se repite
foreach ($mediana as $clave => $valor) {
if (max($valor, $val)) {
$RGB = $clave;
}
}
}</pre><code>
<p>Te puedes bajar un ejemplo <a href="http://sentidoweb.com/img/2006/06/background.zip">aquí</a></p>
]]></content:encoded>
			<wfw:commentRss>http://sentidoweb.com/2006/06/09/laboratorio-calcular-fondo-de-imagen-con-php.php/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

