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.
Ciudad Blogger
Buena observación esta Potro yo siempre lo que hago es meterla en photoshop y allí la redimensiono y santas pascuas.
ResponderEliminarSi solo aplicas un atributo de tamaño (width o height) el otro cambia proporcionalmente, y adiós matemáticas xD
ResponderEliminarTodo un genio, no conocia esa faceta de ti :)
ResponderEliminarguillemaro, también suelo hacerlo así cuando tengo Ps abierto, pero cuando no prefiero hacerlo con la ecuación para no alentar la computadora.
ResponderEliminarSDK, eso sería bueno siempre y cuando todos los navegadores fueran igual y/o todos los contenedores y estilos se comportaran de igual forma, pero como no siempre es así entonces hay ocasiones que es necesario especificar una medida proporcional.
@rielCastellanos, ni yo :P
muy bueno, pero no lo hare me da pereza hacer los calculos, jaja
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarprácticamente todo se reduce a:
ResponderEliminar1.- la regla de tres (es el caso que nos ocupa)
2.- una onda sinusoidal
de un físico y matemático licenciado :D
Creo que sí.
ResponderEliminarDe un simple aficionado a Blogger :P
Muy buena potro
ResponderEliminary que bien que ya hiciste la pagina para facebook de Ciudad Blogger, ahora despues haces la URL más corta cuando tengas 25 fans.
y yo acabo de abrir el youtube de curiosidades del mundo y la verdad que no se que videos subir
Nos vemos
oh genial ahora se como yo lo uso mucho pero siempre hago el calculo al tanteo mi técnica es que si le reste 500px al ancho le restaba 500px al alto jajaja, a veces no se veían mal pero otras si, no se me ocurro usar una simple regla de 3.
ResponderEliminarmaestro!!!
ResponderEliminarAlexG,ya lo hice, sólo que no quedé muy contento con el nombre pero ya antes había ocupado el nombre para mi cuenta personal :S
ResponderEliminarMo, acá entre nos, cuando no quiero sacar la calculadora también las modifico al tanteo :D
Javierdealmagro, ni siquiera buen alumno :P
capooo
ResponderEliminarpotro el "matematico" gracias por el tips y es verdad muchas veces odio abris el Ps solo pàra redimencionar una imagen.
ResponderEliminarpd: me gusta lo de "inicio" en tu pagina espero un tutorial sobre eso y sobre ese codigo html o fbml.
Gracias Potro, yo para hacer esto me metía en un editor de imagenes. Me gusta mucho tu blog y no sabes la de veces que me he metido, espero saldar las cuentas contigo con un agradecimiento gigantesco. jajaja Es que llevo poco tiempo ebn esto de los blogs y gracias a gente como tú, me voy soltando.
ResponderEliminarYo uso el paint, abro la imagen en paint y si deseo que una imagen de 500x325 pasarla a 200x130 solo le hago clic derecho - cambiar de tamaño - en la configuración me voy a pixeles en el primer cuadrito y el primer cuadrito que dice Horizontal escribo el ancho que desee y automáticamente en la vertical me arroja la los pixeles verticalmente quedando la imagen proporcionada. :D
ResponderEliminarnEjO, claro, en estos días hago uno aunque sea para explicarlo de manera breve.
ResponderEliminarNadie, creo que la mayoría usa editores de imágenes para cambiarlas y está bien, el problema es que luego con las prisas no hay tiempo de abrir programas. Te agradezco tu comentario, es un gusto saber que he contribuido para que vayas creciendo con tu blog.
Franco Paravecino, suena práctico, pero con mi equipo que se ha vuelto tan lento prefiero seguir con las ecuaciones :P
Qué tal Potro! Oh quizás deba decir en esta ocasión, Profe Potro (ja, ja!).
ResponderEliminarEstuvo bueno este recordatorio sobre la importancia de las Matemáticas. En realidad, la regla de tres la aprendí como en cuarto grado de la escuela primaria (o elemental), y desde entonces, a Dios gracias, no se me ha olvidado y la uso cada vez que me sea necesario en la vida diaria:
desde medidas de recetas en la cocina, dibujo lineal (a lápiz y papel, a la antiguita), en proporciones de medicamentos según el peso (para mis animalitos cuando han enfermado), en distancias vs tiempo, en medidas de telas, etc. Incluso, hasta en música (al usar "transpose" de acordes, cuando se quiere tocar una canción y cambiarla de un tono a otro); es que la música es, en esencia, también matemática aplicada.
Bueno, creo que ya me inspiré demasiado por ahora (ja, ja). Saludos a ti y a todos los ciudadanos y gracias por tus siempre atinados consejos!
Hola MASTER! Te cuento que apliqué tu método de resumen de entradas con imágenes en miniatura y tengo un par de cuestiones para resolver. La primera es que me quedan en la página principal y a la vista el post footer y las entradas vinculadas. La pregunta es ¿como hago para que ambas queden dentro del post, o sea ANTES DEL LEER MÁS?
ResponderEliminarOtro problemita que tengo es que cuando quiero usar scriptáculus no me funciona el gadget de seguidores.
Te agradeceré enormemente que me des una mano con esto.
(tengo un botón de enlace tuyo en mi blog)
http://mitecladoyyo-lils.blogspot.com
Este comentario ha sido eliminado por el autor.
ResponderEliminarPotro , el gusto es mío, creo que si no hubiera dado con tu blog el mío se hubiese quedado en proyecto, así poquito a poquito vamos aprendiendo. Tengo guardado hasta tu indice , fíjate si me has ayudadojajajaja. Gracias. Y perdona que he borrado sin querer el comentario.
ResponderEliminarVicky, vaya pues no se me había ocurrido darle tantos usos a las matemáticas pero tienes toda la razón, es aplicable para todo eso y más. Creo que tendrás que hacer un post sobre todo ello :D
ResponderEliminarLils, mira esta entrada para que puedas localizar esos enlaces que deseas ocultar. Luego mira esta otra entrada y encierra los códigos anteriores con la condicional que hará que sólo se muestren en las entradas. Gracias por el enlace :D
Nadie, no te preocupes por el comentario borrado ;)
Hola potro, yo pienso hacer un blog solo para mis amigos, pero como le pongo una contraseña al blog para que solo lo vean ellos?
ResponderEliminarMuuuuuuuuuuuchas gracias a vos, quedó per-fec-to!
ResponderEliminaradrian86924, contraseña no se puede, pero puedes hacer que sólo las personas que tú invites puedan verlo. Para hacerlo ve a Configuración > Permisos, y abajo dice '¿Quién puede ver este blog?', selecciona 'Sólo a los usuarios que yo elija' y agrega los correos de las personas que podrán ver el blog.
ResponderEliminarLils, no hay nada qué agradecer, me da gusto que esté quedando como deseabas :)
Merci Potro
ResponderEliminarMás de una vez me ha pasado y aqui esta la solución clara y sencilla.
Saludos
Ésta entrada tuya, por muchas posibilidades que puedan aparecer en los programas, es para enmarcarla, Potro, con marco de oro a ser posible.
ResponderEliminarLos avances técnicos no deberían impedir que nuestro cerebro funcionase, o aún peor, que nos invadiera la vagancia y no nos esforzáramos en ponerlo a funcionar, sino todo lo contrario, que es el mal de nuestros días, y tú, permítemelo que te lo exprese así, ERES MI HÉROE.
MIL GRACIAS
Y además, me la llevo a mi perfil de facebook con el siguiente título "Pensar no está reñido con la inteligencia", ;).
Un beso ENORME
potro no te kiero liar pero tengo un problema con el menú vertical desplegable ya k en un sitio me deja ponerlo y en otro no. te envío las direcciones pa k lo veas.
ResponderEliminarhttp://elrincondemario6.blogspot.com
http://www.rm6pruebas.blogspot.com
saludos
Gildo Kaldorana, más que sencillo y sin necesidad de recurrir a algún programa o al azar.
ResponderEliminarSofía Serra Giráldez, mejor dicho imposible, le dejamos todo a las máquinas y nos olvidamos de la máquina más potente que existe y que todos poseemos. ¡Otro beso enorme para ti!
mariocrack6, no veo que tengas el último código para mostrar el menú. Verifica que esté todo bien y si continúa el problema deja los detalles en la entrada que corresponde.
A eso se le llama: Regla de 3 simple. Sirve
ResponderEliminarAsí es como se le ha llamado ;)
ResponderEliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEl comentario anterior ha sido detectado como SPAM y fue eliminado de la entrada.
ResponderEliminarPotro: antes que nada, deseaba felicitarte y agradecerte por la gran ayuda que nos das, ahora te cuento que tengo un problema enorme en mi blog, y me gustaria si podes me des una mano, paso a contarte,,, el tema es que tengo en mi blog un gran problema con la resolusion, (y algunos user la ven desproporcionada) a tal punto que llegue a poner uqe para visulaizar bien la pagina deberian aplicarles 1024 x 768, me gustaria que esto no me ocurra,,, bien espero puedas darme una mano te adjunto el nombre de mi blog, si lo consideras spam solo lo borras, no es mi intencion, desde ya te agradesco el tiempo que nos dededicas. Salu2
ResponderEliminarhttp://www.elrinconrmvbdemadryn.blogspot.com/
PD: Mil Gracias
Potro, me olvide de comentar, que este problema se da en los monitores wild screams, la verdad lo intente todo, pero bueno, el que no sabe es como que no ve, te dejo mi correo, asi quieres te paso una copìa de la plantilla para que lo analices tranquilo. Gracias un abrazo
ResponderEliminarAca mi correo y una imagen de alguien que lo ve mal, para que te des una idea de lo que digo, disculpa tantos mensajes, en realidad estoy preocupado, por favor espero ayuda. Saludos. Gracias de antemano.
ResponderEliminarMarcos, Correo: madryndvd@hotmail.com
la imagen que menciono: http://s2.subirimagenes.com/otros/previo/thump_5442628dibujo.jpg
Potro me gustaría cambiar el diseño de los comentarios en mi blog como lo hago?.
ResponderEliminarhttp://cdvillanuevadelarzobispo-javier.blogspot.com/
zaipoc, pues no creo que sea un problema, el ancho de tu blog está especificado en porcentajes y es por eso que es "autoajustable". Podrías especificar estas medidas en pixeles pero no creo que sea necesario.
ResponderEliminarJavier, ¿exactamente qué quieres cambiar?
MaG@S RaDioMuSiC, pues el mismo que usa Blogger es bueno, Picasa; ahí se alojan todas las imágenes que subimos al blog.
El fondo sea diferente al del blog, quitar la imagen de blogger y el formulario de comentarios
ResponderEliminarPotro: Gracias pòr responder tan pronto hermano,, pero aun sigo con mi duda,,, me das a entender que en realidad se ve bien? por que esta gente hasta me envio una foto...que te adjunte, de como lo ve. Nuevamente gracias
ResponderEliminarJavier, mira esta entrada de Oloblogger que habla sobre ese tema justamente: http://oloblogger.blogspot.com/2009/08/blogger-modificar-el-formulario-de.html
ResponderEliminarzaipoc, pues yo lo veo perfectamente bien y tengo un monitor de 1280 x 800
San Potro,,, nada mejor que la opinion de un experto, si tu me lo afirmas asi se queda, mil gracias. Salu2
ResponderEliminarDe cualquier modo podrías establecer un ancho al #outer-wrapper para evitar que se expanda en los monitores de alta resolución.
ResponderEliminarSólo hay que agregar un ancho similar al del #content-wrapper por ejemplo:
width: 1020px;
cuando no el potro jejeje yo tengo un "monitor" 320x240
ResponderEliminarPotro si eso es lo mejor lo haré, mi duda es:,, Dónde coloco esto? disculpame que siga molestando. Gracias
ResponderEliminarnEjO, saliste con más ventaja porque en mi teléfono no se navega muy bien :P
ResponderEliminarzaipoc, justo debajo de #outer-wrapper {
jajajaja pense que no captarias lo de la pantalla del cel... creo que ahora ya entiewndo lo de tu otra pagina "fondos 240"
ResponderEliminarSí, justo es por eso el nombre; de cualquier forma no me quejo, no uso mucho el teléfono para navegar :P
ResponderEliminarMil Gracias potro, ojala esta sea la solución, en realidad eres grande y valoro muchisimo lo que nos das.Salu2
ResponderEliminarEsto del redimensionamiento proporcional de las imágenes es lo que llevo años tratándo de hacerle entender a mis amigos, sobre todo porque les gusta pasar mucho imágenes a sus celulares, pero no lograba hacerles captar bien la idea o cómo lo hicieran para evitar deformaciones en las fotos.
ResponderEliminarAqui tú lo explicaste de manera perfecta Potro, les voy a mandar el link del post. Saludos.
Gracias LMGuillermo, qué bueno que lo has encontrado útil, espero que tus amigos también lo hallen así :)
ResponderEliminarSaludos.
¿No seria mas facil poner asi?
ResponderEliminar'width:500px; height:auto;'
Si se trata de una imagen con la etiqueta IMG con sólo poner el width se ajusta automáticamente el alto de la imagen. Pero hay casos en los que es necesario especificar la medida exacta de la imagen, por ejemplo cuando se trata de un script.
ResponderEliminarEntré a tu blog, y en la entrada 'Ver Peru vs México en VIVO - Copa America 2011 gratis' la medida de la foto corresponde a la medida que estipulaste en ella, en este caso es de 120px de ancho y 90px de alto. Así que no veo inconvenientes con ello. ¿Tienes otra entrada donde tengas el problema?
ResponderEliminarEn eso sí no sabría decirte, al menos ya publicado está bien. Desconozco si por ahí Blogger tenga un problema con las imágenes en la Vista Previa.
ResponderEliminarhOLA, una pregunta, me gustaria que las imagenes que pongo en el post, antes de leer mas, aparte de que me salgan mas pequeñas, que ya me salen asi, me salgan con la imagen en miniatura pero porporcionada sin distrosion de la misma, solo quiero cambiar eso, me puedes decir como, gracias.
ResponderEliminarHola CGT-València,
ResponderEliminarHay una versión de Leer más que arregla el problema de la distorsión de las miniaturas:
http://ciudadblogger.com/2011/01/leer-mas-con-imagenes-en-miniatura.html
muchas gracias potro, ya lo hice y quedo bien.
ResponderEliminarPero me surgio un error nuevo, ahora las imagenes del resumen del post tiene una url erroenea :
http://www.cgtvalencia.org/undefined
y clicas en la imagen y vas a ese error y no a la noticia.
supongo que puse algo mal, o sobra un codigo, si fueras tan amable de poder decirme que codigo esta erroneo te lo agradeceria.
Si no puedes, otra solucion seria que me dijeras como quitar el enlaze de la imagen del resumen... y se acabo el problema.
Muchas gracias espero tu respuesta.
Tienes que cambiar todo el Leer más, no sólo el primer script sino todo, de lo contrario te dará ese error.
ResponderEliminargracias, era lo que tu decias, gracias
ResponderEliminarExcelente. Siempre tus consejos son sencillos, muy sencillos, pero enormemente útiles.
ResponderEliminarGracias :)
EliminarPotro que buen truco nomas quisiera saber como puedo cambiar el formato de los comentarios asi como el tuyo que es diferente si me pudieras decir te lo agradeceria mucho te mando un abrazo
ResponderEliminarHola Onyss, mira esta entrada de Oloblogger:
Eliminarhttp://www.oloblogger.com/2012/01/insertar-respuestas-replies-blogger-en.html
Te salio el profe de matematica jajaja Aunque es obvio mucha gente no lo sabe, buen aporte potro, como todos los que hacen en la web. Saludos!
ResponderEliminarY eso que no me llevo muy bien con las matemáticas :D
EliminarEste comentario ha sido eliminado por un administrador del blog.
ResponderEliminarHola TheX, recuerda lo que dice el aviso al final de la página, si tienes material protegido por derechos de autor sólo debes dejar el nombre del blog para que tu comentario no sea eliminado.
EliminarBusca esta parte de la plantilla:
.post {
float:left;
width:179px;
height: auto;
font-size:11px;
margin:15px 0 15px 15px;
padding:0;
overflow:hidden;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
}
#port {
width:149px;
height: 235px;
margin: 0;
box-shadow: 0 2px 3px #fff;
}
#port:hover {
width:149px;
height: 235px;
margin: 0;
box-shadow: 0 2px 3px rgba(34, 25, 25, 0.4);
}
Los valores en negrita son los que debes modificar.
Saludos.
Potro hay alguna manera que pueda modificar los tamaños de blogger para las imagenes. para las chicas, medianas,grande y extragrande. por ejemplo yo en mi blogger siempre pongo el tamaño 480*366 y quisiera que el tamaño grande pusiera esa medida por defecto a las imagenes.
ResponderEliminarAl momento de subirlas no Albeertho, pero una vez que se han subido puedes modificarlas poniéndole dentro del código de la imagen el ancho que quieras, por ejemplo:
Eliminarwidth="600"
como puedo modificar el tamaño de las fotos que puse con el jquery??
ResponderEliminarquiero agrandar el tamaño del contenedor pero no puedo, alguna ayuda?
no donde tocarle en css para agrandar el tamaño...
¿De cuáles fotos hablas? o.O
EliminarExcelente
ResponderEliminarHola Potro, me sale es de esta forma, hago la ecuacion, la modifico y me sale igual,
ResponderEliminar<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-jywr0yXuUnw/UW1h8tvbDhI/AAAAAAAAAms/h1Z3z5M2TDI/s1800/1.1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="363" src="http://1.bp.blogspot.com/-jywr0yXuUnw/UW1h8tvbDhI/AAAAAAAAAms/h1Z3z5M2TDI/s640/1.1.jpg" width="640" /></a></div>
Hola Potro, por favor necesito de tu ayuda, no se que malo hice y modifique creo que mi plantilla, y no se en donde, ya las imagenes de miniatura no se ve, y se ve todo el articulo completo, como hago para volver a como estaba antes, que se veia, una imagen en miniatura y cuando le dabas clip, se abre el articulo completo, aqui te dejo el enlace.
ResponderEliminarhttp://asusmarcaslistosfuera.blogspot.com/
otra pregunta: porque no se actualiza el gadget de "quizas tambien le interese"
Hola Alam, no sé qué modificaciones hayas hecho, pero sólo tienes que revertir los cambios o en su defecto aplicar nuevamente el truquillo del "leer más" que es el que parece que has quitado.
Eliminarlo arregle por ensayo y error, ya esta como es la plantilla original, y el gadget de "Quizas tambien le interese" opte por quitarlo, no se actualizaba y siempre daba los mismos enlances. Respecto al tamaño de las fotos, no logro modicarlas, le coloco los nuevos valores, haciendo la ecuación y sigue apareciendo del mismo tamaño.
Eliminar¿te refieres a las fotos de las entradas? ¿me puedes mostrar una entrada donde hayas modificado los valores?
EliminarPor ejemplo esta la modifique, tenia como valores estos: height="458" y width="640", realice la ecuacion y puse height="500" y puse width="700" y la foto se sigue viendo del mismo tamaño, quiero que se vea mas grande.
ResponderEliminarhttp://asusmarcaslistosfuera.blogspot.com/2013/07/dayron-robles-es-la-principal-estrella.html
Gracias por los detalles adicionales. Eso es porque tu plantilla tiene estilos que dicen que las imágenes de las entradas no deben medir más de 515px de ancho. Si quitas ese valor (o si lo modificas) podrás poner un tamaño más grande en las entradas. Si lo quitas también tendrás que quitar el height:auto
Eliminar.pagepost img{max-width:515px;padding: 3px;
border: 1px solid #DDD;
-webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
height:auto;}
Gracias Potro, solucionado. Otra pregunta como hago para posicionar la imagen en el centro, ya que esta muy al borde de la derecha
EliminarEso es por los estilos que se incluyen en el código de la imagen, específicamente el margen izquierdo, si lo quitas se eliminará ese espacio que "empuja" la imagen:
Eliminarstyle="margin-left: 1em; margin-right: 1em; text-align: center;"
Necesito ayuda, se me desconfiguran las imágenes en lightbox, no logro corregir el html. Saludos
ResponderEliminarNo veo ningún problema con el Lightbox, el único problema que sí vi es que la imagen de fondo de tu #main-wrapper ha sido eliminada:
Eliminarhttp://1.bp.blogspot.com/_t9JjmICsjcg/SnouMpIuRKI/AAAAAAAABYE/55tXalZUE9E/s1600/photoplus-alpha-bg.png
Si cambias esa URL por otra, o si eliminas ese background se resolverá el problema.
Hola Potro! estuve tocando mi plantilla y metí la pata.......me quedaron las imágenes de dos gadget (Consultas y Novedades) muy mal.....pero como no sé qué agregar lo dejé así y vine a pedirte ayuda!!! espero me puedas dar una mano así corrijo esto en la plantilla........saludos!!!!
ResponderEliminarHola Maria Mercedes, entré a tu blog pero veo bien las imágenes de esos gadgets, no sé si es algo que ya arreglaste o no comprendí el problema, ojalá pudieras confirmarme si está resuelto. Saludos.
EliminarGenial post! justo lo que andaba buscando para hacer más grandes las imágenes de la entrada de hoy sin desproporcionarlas ^^ millones de gracias y enorme blog.
ResponderEliminarSaludos!
Gracias a ti Sonya por tu visita y comentario. Saludos!
EliminarGracias!
ResponderEliminar