Ciudad Blogger

Inicio » Archivos de octubre 2010

Cambiar el tamaño de las imágenes proporcionalmente

Recuerdo que cuando estudiaba nunca faltaba el que protestaba diciendo que los temas que veíamos en matemáticas no eran trascendentes ya que no nos serían útiles en la vida cotidiana. Bueno, esto no es del todo cierto, y aquí veremos un claro ejemplo de cómo aplicar las matemáticas para solucionar lo que puede resultar un problema con la presentación del blog.

Cuando hemos subido una imagen y deseamos cambiarle el tamaño aplicando las propiedades width y height (ancho y alto respectivamente) podemos correr el riesgo de que la imagen quede desproporcionada y dé una apariencia de deformación.

Esto sucede porque aplicamos un ancho sin saber cuál es la medida proporcional que debe tener el alto de la imagen.

Por lo que, si aplicamos las medidas correctas tendremos una imagen en proporción de medidas, pero sino el resultado puede verse muy mal.

Imagen en proporción

Imagen desproporcionada

Por ejemplo, supongamos que tenemos una imagen de mide 1024px de ancho por 768px de alto y queremos reducir su tamaño. Si quiero que el nuevo ancho de la imagen sea de 500px ¿cuál deberá ser el alto de la imagen?

Si bien podemos gastar una hora atinando las medidas hasta que se ajuste al tamaño más parecido, también podemos solucionarlo de una manera rápida y precisa; y para hacerlo usaremos la tan conocida regla de tres.

Es una ecuación simple en la cual, para conocer la medida de X deberemos multiplicar A por B y dividirlo entre Y

Ok, ok, ahora en palabras cristianas que todos entendamos. Lo único que haremos será, multiplicar el ancho deseado por el alto original de la imagen. El resultado lo dividimos entre el ancho original de la imagen y el resultado será el alto que estamos buscando.

Siguiendo el ejemplo anterior entonces multiplicamos el ancho deseado que será de 500px por el alto original de la imagen que es de 768px. Eso nos da 384,000px y lo dividiremos entre el ancho original de la imagen que es de 1024px. El resultado es 375px.

Esto significa que si cambiamos la imagen a 500px de ancho entonces el alto de la imagen deberá ser de 375px de alto para que quede a proporción. Fácil ¿no?

#divImagen img {
width:500px;
height:375px;
}

Y si por el contrario, quisiéramos saber el ancho de la imagen se sigue el mismo procedimiento pero a la inversa, es decir, multiplicamos el alto deseado por el ancho original. El resultado lo dividimos entre el alto original de la imagen, y lo que obtendremos será el ancho que estamos buscando.

Quizá puede parecer difícil por el miedo natural que les tenemos a las matemáticas, pero es una ecuación que con la práctica será fácil de aprender y nos ayudará a tener imágenes en tamaños precisos.

Fuego en el blog

Orbit: Slider de imágenes con jQuery

Cursores de Halloween II

Fantasmas en el blog

Para quienes les gusta disfrazar su blog en Halloween, o para quienes les gusta tener adornos macabros en el blog, este script les ayudará a darle ese aspecto de terror con unos fantasmas volando por todo el blog.

Puedes ver el ejemplo en este blog ~~poseído~~ de pruebas.

Ponerlo en el blog es sumamente sencillo, sólo basta entrar en Diseño | Elementos de la página | Añadir gadget | HTML/Javascript y ahí pegar este código:

<script language="JavaScript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){

//Configuracion

var numberOfGhosts = 10; /* Numero de fantasmas */
var ghostSpeed = 0.9; /* Velocidad */
var inTheFace = 5;
var setTimeOutSpeed = 50; /* Velocidad a la que desaparecen */

//Fin de la configuracion

var h,y,cy,cx,sy,sx,ref,field,oy1,oy2,ox1,ox2,iy1,iy2,ix1,ix2;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi1 = 180/3.14;
var pi2 = 3.14/180;
var y = [];
var x = [];
var strs = [];
var gro = [];
var dim = [];
var dfc = [];
var vel = [];
var dir = [];
var acc = [];
var dtor = [];
var xy2 = [];
var idx = document.getElementsByTagName('div').length;
var zip = [];
var pix = "px";

for (i = 0; i < numberOfGhosts; i++){
document.write('<div id="ghosts'+(idx+i)+'"'
+' style="position:absolute;top:0px;left:0px;'
+'width:40px;height:40px;background-color:transparent;'
+'font-size:0px;"><img src="http://1.bp.blogspot.com/_dsEG33PDaHw/TLUwy8cYCsI/AAAAAAAAAZ0/kWv1B3tlak4/s1600/ghost.gif" class="ghost" width="70"/></div>');
}

if (domWw) ref = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
ref = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
ref = d.body;
}
}

function win(){
var mozBar = ((domWw) &&
ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight;
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
cy = Math.floor(h/2);
cx = Math.floor(w/2);

oy1 = (75 * h / 100);
oy2 = (oy1 / 2);
ox1 = (75 * w / 100);
ox2 = (ox1 / 2);

iy1 = (18 * h / 100);
iy2 = (iy1 / 2);
ix1 = (18 * w / 100);
ix2 = (ix1 / 2);

field = (h > w)?h:w;
}

function rst(s){
var cyx;
sy = (domSy)?ref.pageYOffset:ref.scrollTop;
sx = (domSy)?ref.pageXOffset:ref.scrollLeft;
acc[s] = 0;
dim[s] = 1;
xy2[s] = 0;
cyx = Math.round(Math.random() * 2);
if (cyx == 0){
y[s] = (cy - iy2) + Math.floor(Math.random() * iy1);
x[s] = (cx - ix2) + Math.floor(Math.random() * ix1);
}
else{
y[s] = (cy - oy2) + Math.floor(Math.random() * oy1);
x[s] = (cx - ox2) + Math.floor(Math.random() * ox1);
}
dy = y[s] - cy;
dx = x[s] - cx;
dir[s] = Math.atan2(dy,dx) * pi1;
dfc[s] = Math.sqrt(dy*dy + dx*dx) ;
zip[s] = 10 * (dfc[s] + inTheFace) / 100;
vel[s] = ghostSpeed * dfc[s] / 100;
dtor[s] = (field - dfc[s]);
if (dtor[s] < 1) dtor[s] = 1;
gro[s] = 0.003 * dtor[s] / 100;
}

function animate(){
for (i = 0; i < numberOfGhosts; i++){
y[i] += vel[i] * Math.sin(dir[i] * pi2);
x[i] += vel[i] * Math.cos(dir[i] * pi2);
acc[i] = (vel[i] / (dfc[i] + (vel[i] * zip[i])) * vel[i]);
vel[i] += (acc[i]);
dim[i] += gro[i] + acc[i] / zip[i];
xy2[i] = dim[i] / 2;
if (y[i] < 0 + xy2[i] ||
x[i] < 0 + xy2[i] ||
y[i] > h - xy2[i] ||
x[i] > w - xy2[i]){
rst(i);
}
strs[i].top = (y[i] - xy2[i]) + sy + pix;
strs[i].left = (x[i] - xy2[i]) + sx + pix;
strs[i].width = (strs[i].height = (Math.round(dim[i])) + pix);
}
setTimeout(animate,setTimeOutSpeed);
}

function init(){
win();
for (i = 0; i < numberOfGhosts; i++){
strs[i] = document.getElementById("ghosts"+(idx+i)).style;
rst(i);
}
animate();
}

if (window.addEventListener){
window.addEventListener("resize",win,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",win);
window.attachEvent("onload",init);
}
})();
}//End.

</script>

<style>
.ghost {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
-khtml-opacity: 0.3;
}
html {
overflow-x:hidden;
}
</style>

Con eso ya tendrán los fantasmas merodeando el blog. Se pueden modificar algunos valores de velocidad al gusto, esos se modifican en las anotaciones que he puesto en color verde.

NOTA: En las plantillas del diseñador de Blogger no funciona muy bien. Raro ¿no?

Cursores de Halloween

Acortadores de URLs para todos los gustos

Efecto de zoom en las imágenes con jQuery

Ocultar sidebar en las páginas estáticas para plantillas nuevas

Cambiar el ancho del blog y de la sidebar en las plantillas del Diseñador de Plantillas de Blogger

Una de las pocas y contadas ventajas que tienen las plantillas nuevas hechas a través del Diseñador de plantillas de Blogger es poder elegir desde el momento de su creación, el ancho del blog así como de la sidebar.

Esto se hace cuando se elige la plantilla por primera vez, sólo nos situamos en la pestaña Plantilla luego en Personalizar, y elegimos Ajustar ancho.

Ahí podemos redimensionar el ancho del blog y de la(s) sidebar(s) al tamaño que queramos.

Pero si a la plantilla ya le hemos hecho varias modificaciones entonces la situación cambia, pues realizar ese procedimiento implicaría reinstalar la plantilla y por ende se anularían la mayoría de los cambios que hayamos hecho.

Así que en esos casos vamos a cambiar el ancho del blog directamente desde los códigos de la plantilla.

Primero entra a Plantilla | Edición de HTML y busca un código similar a este:

<b:variable default='930px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='360px' name='main.column.right.width' type='length'/>

Este código tiene tres variables:
La primera línea es el ancho total del blog, y determina tanto el ancho total del blog como el ancho de las entradas.
La segunda línea es el ancho de la sidebar izquierda, pero aunque no tengamos una, esta variable aparecerá de todas formas.
Y la tercera es el ancho de la sidebar derecha.
Así que en el ejemplo tenemos que el blog mide 930px de ancho total y la sidebar tiene 360px de ancho.

Reconociendo esas tres variables podemos cambiar el ancho del blog, de las entradas y de la sidebar.
Sólo hay que agregar antes de la diagonal que se encuentra al final de cada línea, esto, value='000px' que indica el valor que tendrá el ancho del contenedor.

Por ejemplo, veamos cómo quedaría el código de una plantilla que mide 930px de ancho y su sidebar de 360px de ancho.

<b:variable default='930px' name='content.width' type='length' value='990px' />
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='370px' />

En el ejemplo vemos que el ancho del blog cambió de 930px a 990px y la sidebar cambió de 360px a 370px

Cabe mencionar que el ancho de las entradas es autoajustable, es decir, al cambiar el ancho total del blog también cambiará el ancho de las entradas automáticamente.

En otro ejemplo veamos cómo quedaría el código si tuvieras dos sidebars.

<b:variable default='930px' name='content.width' type='length' value='960px' />
<b:variable default='0' name='main.column.left.width' type='length' value='200px' />
<b:variable default='360px' name='main.column.right.width' type='length' value='230px' />

Ahí vemos que el ancho total del blog pasó de 930px a 960px, la sidebar derecha que no tenía ningún valor definido cambió a 200px y la sidebar izquierda cambió de 360px a 230px.

De este modo podemos manipular el ancho del blog sin tener que reinstalar la plantilla de nuevo y así evitar perder los cambios que hayamos hecho antes.

Es posible que tu plantilla ya tenga esos valores agregados al final de cada variable, eso sucede cuando desde la primera vez que instalamos la plantilla ajustamos el ancho del blog.

En esos casos no se agrega nada, sólo se cambia donde dice value el número que tenga en pixeles y lo modificamos por otro número que será el nuevo ancho.

Cambiar el tamaño de las imágenes proporcionalmente

Fuego en el blog

Orbit: Slider de imágenes con jQuery

Cursores de Halloween II

Fantasmas en el blog

Cursores de Halloween

Acortadores de URLs para todos los gustos

Efecto de zoom en las imágenes con jQuery

Ocultar sidebar en las páginas estáticas para plantillas nuevas

Cambiar el ancho del blog y de la sidebar en las plantillas del Diseñador de Plantillas de Blogger

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog