| Picon Social | |
 | Contiene 480 íconos de 16x16, 24x24, 32x32, 56x56, 64x64, 128x128, 256x256 y 512x512, en formato PNG. descargar |
 | |
La propiedad text-overflow |
A partir de su actualización a la reciente versión 7, los usuarios de Firefox ya tienen disponible una nueva propiedad CSS que también es aceptada por el resto de los navegadores. Se trata de text-overflow que nos permite cortar un texto y agregarle un elipse de modo automático.
Un elipse no es otra cosa que un carácter especial (tres puntitos) que también podemos escribir de manera manual utilizando entities como …
Usamos los puntitos: … … … … … … … …
No es una propiedad nueva, fue inventada por Microsoft hace tiempo y ya funcionaba en IE6 pero ya es universal así que funciona en cualquier navegador: Internet Explorer, Safari|Chrome, Opera y ahora Firefox.
No tiene muchos misterios, es sencilla y se aplica a casi cualquier etiqueta siempre y cuando esta posea otras propiedades extras. Por ejemplo, así defino una clase:
Un elipse no es otra cosa que un carácter especial (tres puntitos) que también podemos escribir de manera manual utilizando entities como …
Usamos los puntitos: … … … … … … … …
No es una propiedad nueva, fue inventada por Microsoft hace tiempo y ya funcionaba en IE6 pero ya es universal así que funciona en cualquier navegador: Internet Explorer, Safari|Chrome, Opera y ahora Firefox.
No tiene muchos misterios, es sencilla y se aplica a casi cualquier etiqueta siempre y cuando esta posea otras propiedades extras. Por ejemplo, así defino una clase:
.elipse {
text-overflow: ellipsis;
overflow: hidden;
width: valorpx;
white-space: nowrap;
word-wrap: normal;
}Los requisitos son que la propiedad overflow sea cualquier valor excepto visible, white-space tenga el valor nowrap o pre, que la etiqueta tenga un ancho establecido y yo agregaría que word-wrap tenga el valor normal ya que si es break-word, en IE no funciona bien.
Eventualmente, hay quienes agregan dos propiedades más pero, son innecesarias:
Eventualmente, hay quienes agregan dos propiedades más pero, son innecesarias:
-o-text-overflow: ellipsis; /* para versiones de Opera inferiores a la 11*/ -ms-text-overflow: ellipsis; /* para IE8*/
¿Cómo funciona? Este es un DIV donde hay un texto:
Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.
Ahora establezco un ancho:
Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.
Si quisiera cortarlo, debería darle una altura y ocultar lo que sobra con overflow: hidden:
Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.
Usando text-overflow, lo puedo hace de manera más simple y agregar los puntitos al final:
Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.
Lo mismo con otro ancho:
Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.
A partir de ahí, con un poco de JavaScript, podemos crear contenedores que se expandan y contraigan con un click:
Donec vel neque purus, et suscipit augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc dignissim laoreet nulla nec eleifend. Quisque vehicula, turpis at dictum volutpat.
Cómo crear una ventana modal propia (3) |
Esto se complica, se hace retorcido, hay mucha cosa y poca sustancia pero me parece elemental entender el por qué de las cosas, es un vicio que vale la pena cultivar porque a la larga, simplifica la vida y en este caso de las ventanas modales hará que el resultado final sea un código muy corto y sin cosas raras; algo que uno pueda entender y adaptar a sus propias necesidades sin tener que seguir un curso avanzado en la NASA.
Si una de las claves de las ventanas modales es lograr que se muestren en el centro mismo de la página, sea cual sea el navegador que se usa y sea cual sea su tamaño o dónde nos encontremos dentro de ella, la segunda de las claves es poder aplicarlas a una etiqueta cualquiera sin tener que escribir mucho código.
Es lo que hace la mayoría de ellas, nos dicen pongan una clase XXX o un atributo REL o decenas de variantes similares; y todo el truco está ahí, hacer que algo que aparentemente no hace nada, haga algo.
Si una de las claves de las ventanas modales es lograr que se muestren en el centro mismo de la página, sea cual sea el navegador que se usa y sea cual sea su tamaño o dónde nos encontremos dentro de ella, la segunda de las claves es poder aplicarlas a una etiqueta cualquiera sin tener que escribir mucho código.
Es lo que hace la mayoría de ellas, nos dicen pongan una clase XXX o un atributo REL o decenas de variantes similares; y todo el truco está ahí, hacer que algo que aparentemente no hace nada, haga algo.
Jugando a superponer contenidos |
No me canso de repetir lo mismo porque es la clave para entender cómo funciona una página web: todas las etiquetas son rectángulos y todo su contenido esta en alguna etiqueta lo sepamos o no lo sepamos, lo hayamos indicado o no.
Esto es algo sencillo de comprobar, basta aplicar alguna propiedad CSS a todas las etiquetas de cierta clase para verlo; por ejemplo, si le agregamos un borde rojo con outline:
Esto es algo sencillo de comprobar, basta aplicar alguna propiedad CSS a todas las etiquetas de cierta clase para verlo; por ejemplo, si le agregamos un borde rojo con outline:
No importa cuáles sean ni importa si las dimensionamos o no, tampoco importa si definimos estilos, siempre serán rectángulos que se a acomodan solos de acuerdo a dos reglas, las etiquetas de tipo bloque se ubican una debajo de la otra (por ejemplo: DIV o P) y las de tipo inline, una al ado de la otra (por ejemplo A o SPAN). Esta es la forma "natural" con que se va armando la página; cada rectángulo se ubica según esas reglas, de arriba hacia abajo y de izquierda a derecha.
El CSS nos permite (y a veces obliga) cambiar ese orden natural, estableciendo propiedades espaciales. Una de las más simples de usar es tratar de romper la ley que dice que jamás, dos etiquetas, ocupan el mismo lugar es decir, que una esté encima de la otra ocupando el mismo espacio.
Suponiendo que dentro de un DIV contenedor al que dimensiono con height y width, coloco otros dos del mismo tamaño, lo que veré es uno debajo del otro:
El CSS nos permite (y a veces obliga) cambiar ese orden natural, estableciendo propiedades espaciales. Una de las más simples de usar es tratar de romper la ley que dice que jamás, dos etiquetas, ocupan el mismo lugar es decir, que una esté encima de la otra ocupando el mismo espacio.
Suponiendo que dentro de un DIV contenedor al que dimensiono con height y width, coloco otros dos del mismo tamaño, lo que veré es uno debajo del otro:
<div> <div> ....... el contenido superior ....... </div> <div> ....... el contenido inferior ....... </div> </div>
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.abajo
Si invertimos el orden, pasará lo mismo; el que esté primero se verá arriba y el otro abajo:
arriba
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.Superponer ambos es algo bastante simple, lo fundamental es que al contenedor le agreguemos la propiedad position: relative y a los contenidos la propiedad position: absolute con valores cero en left y top:
.demos {
height: 100px;
margin: 0 auto;
position: relative;
width: 250px;
}
.demos div {
left: 0;
height: 100px;
top: 0;
width: 250px;
position:absolute;
}Puestos de este modo, los forzamos a que ocupen el mismo espacio pero claro, sólo veremos uno de ellos, el último. Parece tonto sin embargo, eso es justamente lo que necesitamos para crear efectos y permutar entre el de abajo y el de arriba cuando ponemos el puntero del ratón encima.
Ese tipo de efecto se puede hacer de muchas maneras, por ejemplo, permutando la opacidad:
Ese tipo de efecto se puede hacer de muchas maneras, por ejemplo, permutando la opacidad:
<style>
.elvisible { opacity: 1; z-index: 2; }
.elvisible:hover { opacity: 0; }
eloculto { z-index: 1; }
</style>
<div class="demos">
<div class="elvisible"> ....... el contenido visible ....... </div>
<div class="eloculto"> ....... el contenido oculto ....... </div>
</div>Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.abajo
Usamos z-index para invertir el orden natural (para que por defecto se vea el de arriba) pero podemos hacer lo contrario, mostrar por defecto el de abajo y así, no necesitamos establecer el valor de z-index:
<div class="demos"> <div> ....... el contenido oculto ....... </div> <div class="elvisible"> ....... el contenido visible ....... </div> </div>
arriba
Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.En estos ejemplo, tambien se aplica una transición que indicamos en el DIV visible por defecto:
elvisible {
-moz-transition: opacity 1s;
-webkit-transition: opacity 1s;
-o-transition: opacity 1s;
}Fácilmente, podríamos usar otros efectos, por ejemplo, haciendo que el que está debajo "suba"; este sería el ejemplo concreto:
<style>
#toptop {
background-color: #000;
border: 2px solid #465;
color: #FFF;
font-family: Tahoma;
font-size: 16px;
height: 100px;
margin: 0 auto;
overflow: hidden;
padding: 10px;
position: relative;
width: 250px;
}
#toptop div {
height: 100px;
left: 10px;
position: absolute;
top: 10px;
width: 250px;
}
#toptop #arriba {
background-color: #000000;
-moz-transition: top 1s ease 0s;
-webkit-transition: top 1s ease 0s;
-o-transition: top 1s ease 0s;
top: -100px;
}
#toptop #abajo {
-moz-transition: top 1s ease 0s;
-webkit-transition: top 1s ease 0s;
-o-transition: top 1s ease 0s;
top: 120px !important;
}
#toptop:hover #arriba {
top: -120px !important;
}
#toptop:hover #abajo {
top: 10px !important;
}
</style>
<div id="toptop">
<div id="arriba"> ....... el contenido visible ....... </div>
<div class="eloculto" id="abajo3" style="top:10px;"> ....... el contenido oculto ....... </div>
</div>Vestibulum in ipsum quis diam convallis accumsan et sit amet eros.abajo
Aubade |
hiperurl: Un enlace para múltpes direcciones |
hiperurl.com es unsitio que nos permite generar una dirección URL combinada, es decir, una dirección web que contendrá varios enlaces distintos.
No requiere registro de ninguna clase así que basta entrar al sitio y agregar hasta un máximo de cinco direcciones, hacer click en Generar enlace y voilá, nos mostrará la dirección que será de tipo:
http://hiperurl.com/?s=XXXY que podemos podemos poner en cualquier enlace como este que nos llevará a una página especial:
Eso es todo.
REFERENCIAS:wwwhatsnew.com
Twitvid: Alojar imagenes y videos sin problemas |
El servicio de Twitvid me ha gustado porque es sencillo de usar y no parecen andar molestando con restricciones a la hora de subir videos ya que se trata de eso, un sitio que nos permite subir fotos o videos y para utilizarlo, no hace falta crear una cuenta o registrarse, basta entrar utilizando nuestra cuenta de Twitter o Facebook.Hecho eso, simplemente tendremos todo disponible y unas pocas opciones de configuración incluyendo la posibilidad de establecer cierta privacidad en eso que subimos ¿Limitaciones? Sólo en el tamaño de los videos que pueden tener hasta un máximo de 2GB.
El servicio, funciona tanto en una PC como en distintos móviles e incluso en ciertos clientes como Echofon además de admitir que podamos enviar imágenes o videos vía email o SMS.
Cada usuario posee su propia página donde puede ver las estadísticas y editar o eliminar eso que ha subido; establecer títulos, descripción, categoría, etiquetas o seleccionar el thumbnail a mostrar.
Al subir un archivo podemos decidir si queremos que se envíe como tweet o se publique en nuestro perfil o page de Facebook. Esto no es obligatorio, simplemente, podemos desmarcar esas opciones y luego, usar la URL que ellos nos proveen o incrustar el reproductor en cualquier página web copiando y pegando el código correspondiente.
Para quien quiera hacer experimentos, posee un API pública bastante bien documentada.
Para los simples mortales, incluye la posibilidad de insertar un gadget animado; un SWF que muestra los últimos videos publicados.
Transiciones sin usar :hover |
Las transiciones son efectos que podemos agregar fácilmente a cualquier etiqueta y funcionarán en todos los navegadores excepto en Internet Explorer que aún no las ha implementado ni siquiera en las versiones más recientes.
Son simples, no dan problemas pero tienen una limitación, el CSS no reacciona a eventos como clicks, y en principio, sólo disponemos de la posibilidad de usar :hover, es decir, podemos cambiar algo cuando ponemos el cursor del ratón encima y hacer que ese cambio se anime.
En este ejemplo, hacemos que el ancho (width) cambie:
Son simples, no dan problemas pero tienen una limitación, el CSS no reacciona a eventos como clicks, y en principio, sólo disponemos de la posibilidad de usar :hover, es decir, podemos cambiar algo cuando ponemos el cursor del ratón encima y hacer que ese cambio se anime.
En este ejemplo, hacemos que el ancho (width) cambie:
.demo {
background-color: #456;
color: #EEE;
display: table-cell;
font-size: 40px;
height: 50px;
text-align: center;
padding: 10px;
vertical-align: middle;
width: 200px;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
.demo:hover {
width: 500px;
}HOLA
En impressivewebs.com nos dan otras ideas, para tratar de usar transiciones con otro tipo de eventos y algunos de ellos son muy interesantes; por ejemplo, usando :active en lugar de :hover.
:active es una pseudo-clase que podríamos decir que funciona de manera similar a un onclick ya que se ejecuta justamente cuando pulsamos el botón del ratón y se desactiva cuando lo soltamos.
Modificamos entonces un poco las reglas anteriores para que cambie el ancho, el alto y ya que estamos, también el tamaño de la fuente:
:active es una pseudo-clase que podríamos decir que funciona de manera similar a un onclick ya que se ejecuta justamente cuando pulsamos el botón del ratón y se desactiva cuando lo soltamos.
Modificamos entonces un poco las reglas anteriores para que cambie el ancho, el alto y ya que estamos, también el tamaño de la fuente:
.demo {
.......
-moz-transition: width 1s, height 1s, font-size 1s;
-webkit-transition: width 1s, height 1s, font-size 1s;
-o-transition: width 1s, height 1s, font-size 1s;
transition: width 1s, height 1s, font-size 1s;
}
.demo:active {
font-size: 100px;
height: 300px;
width: 500px;
}¿Cómo funcionará? Si hacemos click en el elemento y mantenemos pulsado el botón del ratón, este se irá ampliando hasta el máximo que hayamos establecido; si soltamos el botón, volverá a su estado natural.
HOLA
Algo similar se puede lograr en los formularios usando la pseudo-clase :focus que se activará cuando ingresemos un dato:
input.demo {
background: #FFF;
border: 2px solid #ABC;
font-size: 20px;
height: 30px;
text-align: left;
padding: 0 30px;
width: 90px;
-moz-transition: width 1s;
-webkit-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;
}
input.demoI:focus {
width: 300px;
}¿Y qué pasará en Internet Explorer? Nada; funcionarán perfectamente excepto que los cambios no se animarán así que son propiedades que pueden utilizarse sin generar conflictos.
Cómo crear una ventana modal propia (2) |
Si bien JavaScript nos da los valores del ancho y el alto de la pantalla del monitor, ese dato no nos sirve de mucho a la hora de tratar de crear una ventana modal porque este tipo de ventanas se deben mostrar centradas en el navegador y este puede ser redimensionado. Pero, aún más, aunque no sea redimensionado, el tipo de navegador que usamos nos mostrará un espacio distinto ya que algunos tienen bordes, otros tienen varias barras de herramienta, menús, barras de estado, etc, etc, etc.
Ryan Larkin |
Ryan Larkin es un animador de origen canadiense, creador de un estilo psicodélico que lo llevó a ser nominado varias veces al Oscar por films como Street musique y Ryan.
Eliminar el nuevo LightBox de Blogger |
Desde ayer, Blogger ha estado insertando nuevo código a la fuerza en todos los blogs. Como siempre, lo hace sin informar nada, sin explicaciones y de prepo, olvidándose que del otro lado hay usuarios a los que les gustaría poder decidir qué quieren hacer con su sitio.
Obviamente, cualquier servicio, pago o gratuito, tiene derecho a modificar su sistema o incluso cerrarlo. Lo que no tiene derecho es a hacer las cosas a escondidas, provocando problemas en sus clientes que son quienes le dan de comer todos los días.
Es un problema de sentido común comercial y de respeto humano.
Ahora, se les ha ocurrido que seria maravilloso que todos los blogs dispusieran de una forma de mostrar las imágenes con una especie de LightBox pero claro, eso no lo hacen permitiendo que cada uno decida si lo necesita o si le interesa y encima lo hacen mal, insertando un script de terror que, aún minimizado, tiene unos 400KB y que incluye decenas de funciones que no sé si alguna vez estarán implementadas o son cosas que les han sobrado. Funciones para etiquetar, comentar y enviar (probablemente a Google+)
El código resultante es uno de esos engendros que suele hacer Google en sus sitios donde se ven DIVs por todos lados y lo que hace este regalito es abrir ese coso cada vez que uno hace click en una imagen, mostrando abajo, la miniaturas de todas la imágenes de la página y permitiendo que se muestren en una especie de galería.
Habrá a quien le guste, eso es lo de menos; lo malo es que lo que hace, destruye blogs porque se superpone a otras cosas, impide que ciertas imágenes sean enlaces y sobre todo, afecta a quienes usan ventanas modales de otro tipo.
No hay información oficial sobre este nuevo engendro. Probablemente, los desarrolladores están tan excitados que necesitan tomar una ducha de agua fría antes de decirnos nada. Lo único que se ve es preguntas en los foros e insultos varios.
Desde ayer que vengo siguiendo el hilo de uno de ellos que encontré a través de un tweet de Ariane, y por fin, a última hora de la noche, un usuario dio una solución que puse en práctica porque la cosa ya me estaba perturbando.
El código en cuestión fue publicado por Code from an English Coffee Drinker y hace un rato, vi que Ariane también lo publica en su sitio, Templates Novo Blogger.
Para implementarlo, basta copiar lo siguiente, justo antes de </head>:
Obviamente, cualquier servicio, pago o gratuito, tiene derecho a modificar su sistema o incluso cerrarlo. Lo que no tiene derecho es a hacer las cosas a escondidas, provocando problemas en sus clientes que son quienes le dan de comer todos los días.
Es un problema de sentido común comercial y de respeto humano.
Ahora, se les ha ocurrido que seria maravilloso que todos los blogs dispusieran de una forma de mostrar las imágenes con una especie de LightBox pero claro, eso no lo hacen permitiendo que cada uno decida si lo necesita o si le interesa y encima lo hacen mal, insertando un script de terror que, aún minimizado, tiene unos 400KB y que incluye decenas de funciones que no sé si alguna vez estarán implementadas o son cosas que les han sobrado. Funciones para etiquetar, comentar y enviar (probablemente a Google+)
El código resultante es uno de esos engendros que suele hacer Google en sus sitios donde se ven DIVs por todos lados y lo que hace este regalito es abrir ese coso cada vez que uno hace click en una imagen, mostrando abajo, la miniaturas de todas la imágenes de la página y permitiendo que se muestren en una especie de galería.
Habrá a quien le guste, eso es lo de menos; lo malo es que lo que hace, destruye blogs porque se superpone a otras cosas, impide que ciertas imágenes sean enlaces y sobre todo, afecta a quienes usan ventanas modales de otro tipo.
No hay información oficial sobre este nuevo engendro. Probablemente, los desarrolladores están tan excitados que necesitan tomar una ducha de agua fría antes de decirnos nada. Lo único que se ve es preguntas en los foros e insultos varios.
Desde ayer que vengo siguiendo el hilo de uno de ellos que encontré a través de un tweet de Ariane, y por fin, a última hora de la noche, un usuario dio una solución que puse en práctica porque la cosa ya me estaba perturbando.
El código en cuestión fue publicado por Code from an English Coffee Drinker y hace un rato, vi que Ariane también lo publica en su sitio, Templates Novo Blogger.
Para implementarlo, basta copiar lo siguiente, justo antes de </head>:
<script type='text/javascript'>
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
}
}
}
if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>Hasta donde he probado y logré verificar, funciona bien y deja todo como estaba por lo que las ventanas modales propias, seguirá funcionando. Soluciona los problemas si se usa LightWindow, PopBox, iBox, Lytebox o Floatbox.
Sin embargo, seguirán los problemas en cualquier otro script que agregue eventos a las imágenes sin importar si estas son o no son enlaces o si están o no están alojadas en Blogger/Picasa.
¿Será posible que alguna vez tengan la cortesía de preguntar? ¿Creerse el ombligo del universo es el destino inevitable de los poderosos? Mientras trato de responder lo que no tiene respuesta sólo puedo gritarles:
Sin embargo, seguirán los problemas en cualquier otro script que agregue eventos a las imágenes sin importar si estas son o no son enlaces o si están o no están alojadas en Blogger/Picasa.
¿Será posible que alguna vez tengan la cortesía de preguntar? ¿Creerse el ombligo del universo es el destino inevitable de los poderosos? Mientras trato de responder lo que no tiene respuesta sólo puedo gritarles:
Blogger: Get out of my blog!
Los pixeles son unidades indivisibles |
Es muy común ver que en las reglas de estilo se usen valores en pixeles con decimales; esto no es algo que vaya a provocar un error pero es inútil ya que los pixeles son unidades indivisibles.
Así que si algo mide 200 pixeles, 200.5 o 200.8 es indistinto pero ... alguien puede decir "no, si yo pongo un decimal se ve más grande que si no lo pongo" y eso es verdad pero no es cierto. Lo que ocurre es que los navegadores interpretan esos decimales de distintas formas. Es más, no estoy seguro si los mismos procesadores de cada PC no influyen en estas cosas.
De todas maneras, en términos generales:
Así que si algo mide 200 pixeles, 200.5 o 200.8 es indistinto pero ... alguien puede decir "no, si yo pongo un decimal se ve más grande que si no lo pongo" y eso es verdad pero no es cierto. Lo que ocurre es que los navegadores interpretan esos decimales de distintas formas. Es más, no estoy seguro si los mismos procesadores de cada PC no influyen en estas cosas.
De todas maneras, en términos generales:
- en Firefox los decimales superiores a .5 serán redondeados hacia arriba
- en IE los decimales serán redondeados hacia arriba
- en Chorme el decimal será ignorado
Para colmo de males, veremos una cosa pero la aritmética nos engañará.:
200
200.2
200.5
200.8
201
Obviamente, son sutilezas pero, un pixel de diferencia puede significar mucho ya que si colocamos dos elementos uno al lado del otro y uno de ellos supera el ancho del contenedor, se mostrará debajo.
Un ejemplo; tengo dos contenidos que flotan y miden 200.5 pixeles; hago cuentas y llego a la conclusión que necesito un contenedor de 401 pixeles ... es fácil pero:
Un ejemplo; tengo dos contenidos que flotan y miden 200.5 pixeles; hago cuentas y llego a la conclusión que necesito un contenedor de 401 pixeles ... es fácil pero:
200.5
200.5
En Firefox e IE no se verán uno al lado del otro y en Chorme si.
Moraleja: Para evitar un problema, lo mejor es no generarlo así que, simplemente, no debemos usar valores decimales y listo ¿Para qué complicarse la vida?
Moraleja: Para evitar un problema, lo mejor es no generarlo así que, simplemente, no debemos usar valores decimales y listo ¿Para qué complicarse la vida?
Cómo crear una ventana modal propia (1) |
Una ventana modal no es algo tan sofisticado como uno cree. Bueno, en realidad, muchas de ellas lo son pero, el concepto básico para generar una ventana modal es sencillo y si no queremos nada excesivamente complejo ni con muchas opciones, crear una propia no es cosa de magia negra sino de entender dos o tres conceptos elementales y ... probar a ver qué sale.
Cuando hablamos de ventanas modales no debemos confundirnos con las ventanas de tipo pop-up que se generan con JavaScript y que no son otra cosa que una instancia del mismo navegador al que abrimos en una ventana nueva con cierta dimensión y en cierta posición.
Algo así, abriría Google en una ventana de 800x450 ubicada a 100 pixeles del ángulo superior izquierdo de la pantalla:
Cuando hablamos de ventanas modales no debemos confundirnos con las ventanas de tipo pop-up que se generan con JavaScript y que no son otra cosa que una instancia del mismo navegador al que abrimos en una ventana nueva con cierta dimensión y en cierta posición.
Algo así, abriría Google en una ventana de 800x450 ubicada a 100 pixeles del ángulo superior izquierdo de la pantalla:
window.open("URL", "", "width=800,height=400,menubar=0,toolbar=0,directories=0,scrollbars=no,resizable=no,left=100,top=100");Seguramente, en la web podran verse muchos scripts que crean este tipo de ventanas y allí suelen agregar algo más, la posibilidad de centrar esa ventana, calculando los valores de left y top:
x = (screen.width / 2) - (ancho/2);
y = (screen.height / 2) - (alto/2);
window.open("URL", "", "width=800,height=400,menubar=0,toolbar=0,directories=0,scrollbars=no,resizable=no,left= "+ x + ",top=" + y +"");Pero, una ventana modal no es igual, es algo muchísimo más ... ¿simple? Una ventana modal es ... un DIV, es decir, un rectangulo que contiene cosas, una etiqueta HTML como cualquier otra de nuestro sitio.
¿Y que la hace aparentemente distinta? Nada en particular, no hay propiedades especiales, simplemente, se agrega al final de la página y permanece allí, oculta, hasta tanto se la requiere así que voy a empezar a crear mi ventana modal colocando el HTML justo antes de </body>:
¿Y que la hace aparentemente distinta? Nada en particular, no hay propiedades especiales, simplemente, se agrega al final de la página y permanece allí, oculta, hasta tanto se la requiere así que voy a empezar a crear mi ventana modal colocando el HTML justo antes de </body>:
<div id='MVM'>
<div id='MVM-inner'>
<div id='MVM-contenido'> </div>
</div>
</div>Sí, Ya sé, dije un DIV y ahi hay tres pero eso es sólo para ya tener preparado todo y luego poder agregarle contenidos diversos con más facilidad.
Puesto eso, no pasará absolutamente nada, no veremos nada porque no hay ninguna clase de contenido y, salvo que nosotros hayamos indicado lo contrario, las etiquetas DIV no poseen propiedades de estilo por defecto así que le pondremos algunas.
Puesto eso, no pasará absolutamente nada, no veremos nada porque no hay ninguna clase de contenido y, salvo que nosotros hayamos indicado lo contrario, las etiquetas DIV no poseen propiedades de estilo por defecto así que le pondremos algunas.
<style>
#MVM {
position: absolute;
left: 0;
top: 0;
visibility: hidden;
z-index: 10000;
}
#MVM-inner {
position: relative;
}
#MVM-contenido {
height: 100%;
width 100%;
}
</style>Seguimos sin ver nada porque no hay nada que ver así que para probar, provisoriamente, le agregaré un color de fondo y le daré una dimensión cualquiera:
#MVM-contenido {background-color:#FFF; height:200px; width:300px; }Y usaré un script para mostrarla con un click:
<script>
function mostrarMVM() {
MVM.style.visibility = "visible";
}
</script>
<a href="javascript:mostrarMVM()"> mostrar ventana modal </a>¿Han hecho click y no pasa nada? Pués no es así, la ventana modal está arriba.
¿Por qué está arriba y a la izquierda? Porque eso es lo que hemos definido, que su posición sea absoluta y, como no está contenida dentro de otra etiqueta excepto el body mismo, left y top cero son el ángulo superior izquierdo de la ventana del navegador.
Entonces, ¿podemos centrarla igual que una ventana pop-up? Vemos qué pasa si usamos el ancho y alto de la pantalla y un poco de aritmética para establecemos los valores de left y top:
¿Por qué está arriba y a la izquierda? Porque eso es lo que hemos definido, que su posición sea absoluta y, como no está contenida dentro de otra etiqueta excepto el body mismo, left y top cero son el ángulo superior izquierdo de la ventana del navegador.
Entonces, ¿podemos centrarla igual que una ventana pop-up? Vemos qué pasa si usamos el ancho y alto de la pantalla y un poco de aritmética para establecemos los valores de left y top:
var ancho = 300; var alto=200; var x = (screen.width / 2)-(ancho / 2); var y = (screen.height / 2) - (alto / 2); MVM.style.left = x + "px"; MVM.style.top = y + "px";
¿Y tampoco se ve? Pués, allí está, sigue arriba aunque, esta vez, se ha centrado bien horizontalmente si el navegador está a pantala completa pero no verticalmente; y si el navegador no está en pantalla completa, se verá descentrada horizontalmente (corrida hacia la derecha).
En realidad, se ha centrado pero ese centro es el centro de la pantalla del monitor y no el centro de la ventana del navegador; nosotros, no estamos en la parte superior de la página sino bastante más abajo salvo que tengamos un monitor con una resolución gigante y, como decía antes, si el navegador no ocupa toda la pantalla, su ancho es otro.
Como en tantos otros casos de diseño web, el ancho es sencillo de resolver y JavaScript nos provee de ese dato pero, el alto siempre es un problema porque depende pura y exclusivamente del contenido. La altura del BODY no suele coincidir con la altura de la ventana del navegador y por lo general es mucho mayor, por eso aparece una barra de desplazameinto vertical, para que podamos hacer scroll a lo largo del documento, es decir, a lo largo del BODY de nuestra página.
Una de las claves de las ventanas modales es conseguir justamente eso, determinar la posición de la página donde estamos y mostrarse centrada allí, sin importar si estamos arriba, abajo o en cualquier parte.
Es verdad que si yo cambiara la propiedad position: absolute; por position: fixed; la altura no sería un inconveniente pero el ancho seguiría siendo erróneo si el navegador no está maximizado. Además, dependiendo del contenido, esto podría llegar a ser molesto ya que la ventana quedaría "clavada" así que seguiremos buscando otras forma de conseguir lo mismo.
En realidad, se ha centrado pero ese centro es el centro de la pantalla del monitor y no el centro de la ventana del navegador; nosotros, no estamos en la parte superior de la página sino bastante más abajo salvo que tengamos un monitor con una resolución gigante y, como decía antes, si el navegador no ocupa toda la pantalla, su ancho es otro.
Como en tantos otros casos de diseño web, el ancho es sencillo de resolver y JavaScript nos provee de ese dato pero, el alto siempre es un problema porque depende pura y exclusivamente del contenido. La altura del BODY no suele coincidir con la altura de la ventana del navegador y por lo general es mucho mayor, por eso aparece una barra de desplazameinto vertical, para que podamos hacer scroll a lo largo del documento, es decir, a lo largo del BODY de nuestra página.
Una de las claves de las ventanas modales es conseguir justamente eso, determinar la posición de la página donde estamos y mostrarse centrada allí, sin importar si estamos arriba, abajo o en cualquier parte.
Es verdad que si yo cambiara la propiedad position: absolute; por position: fixed; la altura no sería un inconveniente pero el ancho seguiría siendo erróneo si el navegador no está maximizado. Además, dependiendo del contenido, esto podría llegar a ser molesto ya que la ventana quedaría "clavada" así que seguiremos buscando otras forma de conseguir lo mismo.
<script>
function toggleMVM() {
var MVM = document.getElementById("MVM");
if(MVM.style.visibility == "visible") {
MVM.style.visibility = "hidden";
} else {
MVM.style.visibility = "visible";
}
}
</script>
<a href="javascript:toggleMVM()"> toggle ventana modal </a>
Mejorar la indexación del blog |
Cuando se habla de indexar, estamos refiriéndonos a agregar una página web a la lista de resultados que mostrará un buscador. Quienes usan Blogger, no necesitan hacer nada para que esto ocurra; el servicio lo hace de modo automático a menos que indiquemos lo contrario en Configuración | Básico:
¿Deseas permitir que los motores de búsqueda encuentren tu blog?
Si seleccionas "Sí" incluiremos tu blog en la búsqueda de blogs de Google y haremos ping en Weblogs.com. Si seleccionas "No", todo el mundo podrá seguir viendo tu blog, pero los motores de búsqueda recibirán instrucciones de no rastrearlo. Si existen enlaces a tu blog en otros sitios web, es posible que los motores de búsqueda sigan sugiriéndolo en respuesta a una consulta.
Si seleccionas "Sí" incluiremos tu blog en la búsqueda de blogs de Google y haremos ping en Weblogs.com. Si seleccionas "No", todo el mundo podrá seguir viendo tu blog, pero los motores de búsqueda recibirán instrucciones de no rastrearlo. Si existen enlaces a tu blog en otros sitios web, es posible que los motores de búsqueda sigan sugiriéndolo en respuesta a una consulta.
También puede hacerse manualmente, ingresando en los distintos buscadores y siguiendo los pasos que ellos indican. Por lo general, basta completar un formulario indicando la URL del home del sitio y nada más. En el caso de Google, eso se hace en esta página.
Como dije al principio, en Blogger, nada de esto es necesario y además, podemos ayudar a esa indexación, agregando un sitemap a las Herramientas para Desarrolladores de Google ya que está integrado al servicio. Sin embargo, pese a que esa indexación automática nos facilita la tarea, también tiene su contrapartida negativa ya que nos vemos lógicamente limitados por una sencilla razón: no es cierto que TODAS las páginas de un sitio deben ser indexadas; hacer eso, es un error.
En términos generales, en un blog, sólo deberían indexarse la página principal, las entradas individuales y, eventualmente, alguna página estática que contenga información que consideremos importante; todo lo demás, debe ser ignorado y deberíamos evitar que sea indexado.
¿Que es todo lo demás?
En cualquier blog, se crean páginas dinámicas de distinto tipo. Si observamos la dirección URL del navegador, veremos cosas como estas:
Como dije al principio, en Blogger, nada de esto es necesario y además, podemos ayudar a esa indexación, agregando un sitemap a las Herramientas para Desarrolladores de Google ya que está integrado al servicio. Sin embargo, pese a que esa indexación automática nos facilita la tarea, también tiene su contrapartida negativa ya que nos vemos lógicamente limitados por una sencilla razón: no es cierto que TODAS las páginas de un sitio deben ser indexadas; hacer eso, es un error.
En términos generales, en un blog, sólo deberían indexarse la página principal, las entradas individuales y, eventualmente, alguna página estática que contenga información que consideremos importante; todo lo demás, debe ser ignorado y deberíamos evitar que sea indexado.
¿Que es todo lo demás?
En cualquier blog, se crean páginas dinámicas de distinto tipo. Si observamos la dirección URL del navegador, veremos cosas como estas:
http://vagabundia.blogspot.com/search/label/Blogger
http://vagabundia.blogspot.com/search?updated-max=2011-08-31T00%3A00%3A00-03%3A00
http://vagabundia.blogspot.com/2011_09_01_archive.html
http://vagabundia.blogspot.com/search?updated-max=2011-08-31T00%3A00%3A00-03%3A00
http://vagabundia.blogspot.com/2011_09_01_archive.html
Son páginas que se generan de manera automática y muestran las entradas de cierta etiqueta, las entradas anteriores o posteriores o las de cierta fecha. Todo ese tipo de página, no debería ser indexada.
¿Por qué? Porque es información irrelevante, son páginas duplicadas que contienen lo mismo que contienen las entradas individuales y por lo tanto, de alguna manera, "compiten" con ellas, restándoles importancia y haciendo que su posición "baje" en los resultados que muestra un buscador.
En el artículo donde se habla del efecto Google Panda, Alejandro, de SpamLoco, comparte algunas ideas interesantes sobre la forma en que podemos hacer pequeñas mejoras en nuestro blog y, por lo menos, saber que hemos hecho todo lo técnicamente posible; obviamente, el resto dependerá del contenido y ... la suerte.
La primera sugerencia es poner un noindex a las páginas generadas por el sistema de Archivos:
¿Por qué? Porque es información irrelevante, son páginas duplicadas que contienen lo mismo que contienen las entradas individuales y por lo tanto, de alguna manera, "compiten" con ellas, restándoles importancia y haciendo que su posición "baje" en los resultados que muestra un buscador.
En el artículo donde se habla del efecto Google Panda, Alejandro, de SpamLoco, comparte algunas ideas interesantes sobre la forma en que podemos hacer pequeñas mejoras en nuestro blog y, por lo menos, saber que hemos hecho todo lo técnicamente posible; obviamente, el resto dependerá del contenido y ... la suerte.
La primera sugerencia es poner un noindex a las páginas generadas por el sistema de Archivos:
http://vagabundia.blogspot.com/2011_09_01_archive.html
Para eso, bastaría usar los condicionales de Blogger y poner en alguna parte del HEAD, lo siguiente:
<b:if cond='data:blog.pageType == "archive"'> <meta content='noindex' name='robots'/> </b:if>
A esto, se le podría sumar algo que parecería un poco absurdo ya que, en teoría las páginas que poseen la palabra /search/ no son indexadas porque están bloqueadas; sin embargo, aún así, suelen aparecer en los resultados. Entonces, podríamos hacer lo mismo, será redundante pero, bien dicen que lo que abunda no sobra.
A este tipo de página se la reconoce como index pero, acá hay que tener cuidado ya que el home del sitio también es una página de tipo index así que el condicional debe contemplar ambas cosas:
A este tipo de página se la reconoce como index pero, acá hay que tener cuidado ya que el home del sitio también es una página de tipo index así que el condicional debe contemplar ambas cosas:
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta content='noindex' name='robots'/>
</b:if>
</b:if>Hay que recordar que las etiquetas META no son órdenes que se les da a los buscadores sino sugerencias y por lo tanto, que sean o no sean tenidas en cuenta, depende de su buena voluntad.
Indicar que la página se indexe es innecesario pero, de todos modos, podemos hacerlo y si se quiere resumir todo lo anterior, el código sería algo así:
Indicar que la página se indexe es innecesario pero, de todos modos, podemos hacerlo y si se quiere resumir todo lo anterior, el código sería algo así:
<b:if cond='data:blog.pageType == "archive"'>
<!-- las páginas de tipo Archivo no serán indexadas -->
<meta content='noindex' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- las páginas de Etiquetas y Navegación no serán indexadas -->
<meta content='noindex' name='robots'/>
<b:else/>
<!-- el home será indexado -->
<meta content='all,index,follow' name='robots'/>
</b:if>
<b:else/>
<!-- las páginas individuales y las páginas estáticas serán indexadas -->
<meta content='all,index,follow' name='robots'/>
</b:if>
</b:if>
Pop-Up sólo con CSS |
Este es otro intento de CSS-tricks para tratar de controlas el evento click con CSS, usando, como en el ejemplo publicado hace unos días, etiquetas que normalmente están reservadas para la creación de formularios tales como INPUT y LABEL.
Aquí, se trata de crear un pop-up; una ventanita con cierto contenido, que se abra cuando hacemos click en alguna clase de botón y que, en principio, podría contener cualquier cosa.
En este ejemplo, he jugado un poco, eliminado cosas, agregando otras, probando a ver qué salía y lo primero que debería aclarar es que no funciona en versiones anteriores a IE9 y no sé si lo hace en esa versión. Lo segundo es que no he encontrado la forma de poder controlar cuando se intenta poner dos o más en lugar de una salvo repitiendo el CSS y usando IDs en lugar de clases cosa que no tiene mucho sentido así que esa parte, quedará pendiente y si alguien tiene una idea, soy todo oidos.
Aquí, se trata de crear un pop-up; una ventanita con cierto contenido, que se abra cuando hacemos click en alguna clase de botón y que, en principio, podría contener cualquier cosa.
En este ejemplo, he jugado un poco, eliminado cosas, agregando otras, probando a ver qué salía y lo primero que debería aclarar es que no funciona en versiones anteriores a IE9 y no sé si lo hace en esa versión. Lo segundo es que no he encontrado la forma de poder controlar cuando se intenta poner dos o más en lugar de una salvo repitiendo el CSS y usando IDs en lugar de clases cosa que no tiene mucho sentido así que esa parte, quedará pendiente y si alguien tiene una idea, soy todo oidos.
Este sería el HTML:
<input type="checkbox" id="popup" class="popUpControl">
<label class="elboton" for="popup">
<span class="click">mostrar</span>
<span class="hiddenbox">
.......
</span>
</label>La etiqueta INPUT que es del tipo checkbox, permanecerá oculta siempre pero, es la que no permitirá usar sólo CSS ya que podemos saber si está "marcada" ya que, cuando hacemos click, cambia la propiedad llamada checked.
La etiqueta LABEL se asocia a la primera y es lo que veremos. Un SPAN es el pseudo-botón y otro SPAN el contenido que permutará, haciéndose visible u ocultándose, con alguna clase de animación.
El CSS:
La etiqueta LABEL se asocia a la primera y es lo que veremos. Un SPAN es el pseudo-botón y otro SPAN el contenido que permutará, haciéndose visible u ocultándose, con alguna clase de animación.
El CSS:
<style>
/* la etiqueta LABEL */
.elboton {
background-color: #AAA;
border-radius: 10px;
box-shadow: 0 0 10px #222 inset;
color: #FFF;
cursor: pointer;
display: inline-block;
font-size: 20px;
margin: 0;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px 1px #000;
}
/* en un post de Blogger. oculto los saltos de línea internos para no volverme loco */
.elboton br {display:none;}
/* el contenedor con lo lo que queremos mostrar */
.hiddenbox {
background-color: #FFF;
border-radius: 10px;
box-shadow: 0 0 15px #000 inset;
left: 0;
line-height: 0;
margin: 25px 0;
opacity: 0;
padding: 15px;
position: absolute;
text-align: center;
top: 100%;
z-index: 100;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
}
/* se muestra el contenido oculto */
.popUpControl:checked ~ label > .hiddenbox {
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
/* el CHECKBOX lo mantenemos siempre oculto */
.popUpControl {display: none;}
/* cambiamos el texto del pseudo-botón */
.popUpControl:checked ~ label > span.click {display: none;}
.popUpControl:checked ~ label:before {content: "ocultar";}
</style>Ah. Me olvidaba. Tampoco tengo idea de cómo hacer que pop-up se anime cuando aparece; sólo lo hace cuando se oculta.
T-Shirts para diseñadores web |
HTML aleatorio con randomtext.me |
randomtext.me es otro sitio que permite generar textos aleatorios pero, bastante más sofisticado que muchos de los ya existentes ya que no sólo genera los típicos párrafos con Lorem Ipsum sino también otro tipo de textos como listas y títulos en formato HTM. También admite que los textos sean mostrados en formato Gibberish con lo que el resultado no será algo que parece latín sino escritura en idioma inglés:
Crassly and that the nonchalant a empirically energetic one darn this naively overheard flew keenly jaguar porcupine unlike far depending jellyfish goldfinch that red-handedly tortoise where goose much woodpecker hey darn.
Todas esas opciones se van seleccionando y el resultado, puede ser previsualizado usando el botón Generate. Luego, podemos copiarlo o descargarlo como archivo de texto o html y usarlo libremente.
- Vel rhoncus tellus ante lobortis porttitor donec eleifend dui et iaculis dictumst diam luctus
- Ultricies quisque dictum risus dolor sit bibendum rhoncus nostra id viverra sagittis volutpat proin
- Cras accumsan lacus vestibulum eget aliquam accumsan felis gravida pretium consequat mi habitant mi
- Aenean aptent nisi nam taciti amet semper litora varius primis gravida rutrum
- Lectus aptent ante feugiat lobortis lacinia ut volutpat placerat egestas
Para quienes quieran, dispone de un API que genera esos textos y que puede integrarse a cualquier sitio usando este tipo de URL:
http://www.randomtext.me/api/lorem/parametros/
http://www.randomtext.me/api/gibberish/parametros/
donde los parámetros se separan con barras, primero el tipo de elemento (p u ol h1 h2 etc) y su cantidad de y luego el rango de palabras; por ejemplo:
http://www.randomtext.me/api/lorem/ul-5/10-15/
generaría una lista de 5 elementos donde cada item tendría entre 10 y 15 palabras.
http://www.randomtext.me/api/lorem/ul-10/5-10
http://www.randomtext.me/api/gibberish/p-7/30-50/
http://www.randomtext.me/api/lorem/h2/6-10/
pero, como el resultado es una variable en formato Json, requerimos scripts extras o usa librerías como jQuery para interpretar el dato enviado y mostrarlo.
http://www.randomtext.me/api/lorem/parametros/
http://www.randomtext.me/api/gibberish/parametros/
donde los parámetros se separan con barras, primero el tipo de elemento (p u ol h1 h2 etc) y su cantidad de y luego el rango de palabras; por ejemplo:
http://www.randomtext.me/api/lorem/ul-5/10-15/
generaría una lista de 5 elementos donde cada item tendría entre 10 y 15 palabras.
http://www.randomtext.me/api/lorem/ul-10/5-10
http://www.randomtext.me/api/gibberish/p-7/30-50/
http://www.randomtext.me/api/lorem/h2/6-10/
pero, como el resultado es una variable en formato Json, requerimos scripts extras o usa librerías como jQuery para interpretar el dato enviado y mostrarlo.
REFERENCIAS:wwwhatsnew.com
Videos de tamaños fluidos con jQuery |
FitVids es un pequeño plugin para jQuery que nos permite agregar videos y establecer su tamaño de tal manera que se adapte al espacio disponible, manteniendo su proporción y sin necesidad de tener que calcular nada previamente por lo que basta escribir el código de inserción tal como nos lo dan los distintos servicios y dejar que el script se encargue del resto.
Para usarlo, debemos tener la librería de jQuery agregada antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Y debajo, agregamos el script jquery.fitvids.js que podemos descargar desde github.
Para usarlo, debemos tener la librería de jQuery agregada antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Y debajo, agregamos el script jquery.fitvids.js que podemos descargar desde github.
<script type='text/javascript'>
//<![CDATA[
(function( $ ){
$.fn.fitVids = function() {
var div = document.createElement("div"), ref = document.getElementsByTagName("base")[0] || document.getElementsByTagName("script")[0];
div.className = "fit-vids-style";
div.innerHTML = "<style>.fluid-width-video-wrapper {width:100%;position:relative;padding:0;} .fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style>";
ref.parentNode.insertBefore(div,ref);
return this.each(function(){
var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://www.kickstarter.com']", "object", "embed"];
var $allVideos = $(this).find(selectors.join(","));
$allVideos.each(function(){
var $this = $(this), height = this.tagName == "OBJECT" ? $this.attr('height') : $this.height(), aspectRatio = height / $this.width();
$this.wrap("<div class='fluid-width-video-wrapper' />").parent(".fluid-width-video-wrapper").css("padding-top", (aspectRatio * 100)+"%");
$this.removeAttr("height").removeAttr("width");
});
});
}
})( jQuery );
//]]>
</script>Por último, ejecutamos la función donde sólo deberemos establecer el nombre de la clase CSS que usaremos como contenedor:
<script>
$(document).ready(function(){ $(".elvideo").fitVids(); });
</script>¿Cómo lo aplicamos a nuestro sitio? Colocando el IFRAME del video dentro de un DIV con esa clase que hayamos elegido:
<div class="elvideo">
<iframe width="425" height="349" src="http://www.youtube.com/embed/lzN5fbFlFJs" frameborder="0" allowfullscreen></iframe>
</div>Tal como está, funcionará con sitios de videos que utilicen un IFRAME como código para compartir videos: YouTube, Vimeo, Kickstarter, etc. Ellos también hablan de blip.tv o Viddler pero, ninguno de esos está contemplado sin embargo, podemos agregarlos si editamos esta línea:
var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://www.kickstarter.com']", "object", "embed"];
por ejemplo, así agrego blip.tv y elimino kickstarter.com:
var selectors = ["iframe[src^='http://player.vimeo.com']", "iframe[src^='http://www.youtube.com']", "iframe[src^='http://blip.tv']", "object", "embed"];
Condicionar widgets según etiquetas |
Condicionar algo significa que en función de cierto dato, ocurrirán ciertas cosas o no. En Blogger, las condiciones están limitadas a que ese dato a evaluar sea alguno a los que ellos nos permiten acceder y no cualquier otro de allí que ciertas ideas no puedan ser aplicadas de manera simple porque carecemos de esa información y por lo tanto, debemos usar JavaScript que es el otro método disponible.
No es lo mismo en absoluto ya que, cuando se condiciona usando las etiquetas propias de Blogger, la página web resultante se crea en función de esas condiciones, si por ejemplo, decidimos que tal parte no forme parte de ella, el código fuente resultante, eso que muestra el navegador, no lo incluirá. Por el contrario, usando JavaScript, sólo podemos "ocultar" cosas pero eso que ocultamos, será parte de la página y se ejecutará aunque no lo veamos.
Partiendo de la idea de colocar una imagen asociada a una etiqueta en la sidebar, Adrián J. Messina preguntaba si era posible que, en lugar de mostrar una imagen, lo que se condicionara fuera un widget o gadget.
Como para hacer eso necesitamos conocer la etiqueta de esa entrada y este dato sólo es accesible dentro del LOOP que muestra los posts, no queda otro remedio que usar JavaScript lo que implica que sólo podremos mostrarlo u ocultarlo pero siempre estará allí así que su contenido será cargado por lo que es aconsejable que sean cosas relativamente livianas.
Hacer esto implica varios pasos. Para empezar, vamos a guardar en alguna variable, el dato que necesitamos; hay que ir a la plantilla y buscar:
No es lo mismo en absoluto ya que, cuando se condiciona usando las etiquetas propias de Blogger, la página web resultante se crea en función de esas condiciones, si por ejemplo, decidimos que tal parte no forme parte de ella, el código fuente resultante, eso que muestra el navegador, no lo incluirá. Por el contrario, usando JavaScript, sólo podemos "ocultar" cosas pero eso que ocultamos, será parte de la página y se ejecutará aunque no lo veamos.
Partiendo de la idea de colocar una imagen asociada a una etiqueta en la sidebar, Adrián J. Messina preguntaba si era posible que, en lugar de mostrar una imagen, lo que se condicionara fuera un widget o gadget.
Como para hacer eso necesitamos conocer la etiqueta de esa entrada y este dato sólo es accesible dentro del LOOP que muestra los posts, no queda otro remedio que usar JavaScript lo que implica que sólo podremos mostrarlo u ocultarlo pero siempre estará allí así que su contenido será cargado por lo que es aconsejable que sean cosas relativamente livianas.
Hacer esto implica varios pasos. Para empezar, vamos a guardar en alguna variable, el dato que necesitamos; hay que ir a la plantilla y buscar:
<b:includable id='post' var='post'>
Allí, en alguna parte, veremos un código de Blogger que es el que muestra las etiquetas de la entrada y que tiene distintos formatos pero, básicamente, dice algo así:
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop>
donde data:label.name es la etiqueta de la entrada; allí es donde deberemos guardar ese dato; por ejemplo:
<b:loop values='data:post.labels' var='label'>
<script>var etiquetaPOST='<data:label.name/>';</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>Esto está pensado para entradas donde sólo hay una etiqueta, si son varias, empieza a carecer de sentido y debería pulirse el método, usar arrays o cualquier otro sistema.
Ahora, necesitamos agregar lo widgtes, uno, dos, los que queramos. Lo hacemos como lo hacemos siempre y luego, los buscamos; cualquiera sea siempre tendrá un ID que los identifica:
Ahora, necesitamos agregar lo widgtes, uno, dos, los que queramos. Lo hacemos como lo hacemos siempre y luego, los buscamos; cualquiera sea siempre tendrá un ID que los identifica:
<b:widget id='XXXXX' locked='false' title='XXXXXXXX' type='XXXX'> ....... </b:widget>
Por defecto, los ocultaremos; suponiendo que uno de ellos es un elemento HTML cuyo id es HTML7 y el otro es una lista de enlaces cuyo id es LinkList3, pondremos lo siguiente antes de </head>
<style>
#HTML7 {display:none;}
#LinkList3 {display:none;}
</style>Con esto, ya estamos listos para condicionar la visibilidad de los gadgets y se me ocurre que lo mejor es agregar el script dentro de cada uno de ellos. Suponiendo que el elemento HTML sólo se mostrará cuando la etiqueta sea "Fotos"; haríamos algo así:
<b:widget id='HTML7' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
<script>
//<![CDATA[
if(etiquetaPOST=="fotos") {
document.getElementById("HTML7").style.display = "block";
}
//]]>
</script>
.......
</b:includable>
</b:widget>Esto, sólo es uno de muchos métodos que deberán ser adaptados a cada situación; como dije antes, si las entradas poseen varias etiquetas habría que buscar variantes como usar arrays o variables auxiliares en el LOOP, por ejemplo:
<script>
etiquetaPOST='<data:label.name/>';
if(etiquetaPOST==#39;Fotos#39;) {
flagFotos = 1;
} else if (etiquetaPOST==#39;Videos#39;) {
flagVideos = 1;
}
</script>y en el widget colocaríamos:
if(flagFotos==1) {
document.getElementById("HTML7").style.display = "block";
}Sea como sea, siempre hay que tener en cuenta que mostrar ese widget oculto es algo que deberá hacerse una vez que se haya creado así que, si la sidebar está a la izquierda y se genera ANTES que los posts, la condición deberá colocarse en otro lado, al final de la plantilla o en el mismo LOOP de los posts, caso contrario, no funcionará porque estaremos evaluando un dato que aún se desconoce.
Claro, todo se resolvería si Blogger nos permitiera acceder a ese dato desde cualquier parte de la plantilla pero, eso es pedirle peras al olmo.
Claro, todo se resolvería si Blogger nos permitiera acceder a ese dato desde cualquier parte de la plantilla pero, eso es pedirle peras al olmo.
Proteger Facebook y Twitter con Bitdefender |
Bitdefender es un conocido anti-virus que incluye versiones gratuitas y no gratuitas, además de otros servicios de seguridad como la posibilidad de scanear la PC online. A esto, se le había sumado un servicio extras llamado Safego que también es gratuito y que nos permiten proteger nuestra cuenta de Facebook.Tal como dicen en SpamLoco, la aplicación trabaja en segundo plano y no molesta en absoluto.
Ahora, ghacks.net anuncia la llegada de un servicio más para ser agregado a Twitter.
Como en el caso anterior, basta ir a la página darle autorización y listo. Una vez dentro, podremos configurar las alertas, analizar a quienes seguimos y mantenernos razonablemente seguros.
Invention of love |
Cinco y un par de dias |
Desde el inicio de los tiempos ... de los de este blog, digo, no desde Adán y Eva, he tenido la costumbre de hacer una entrada cada año, más o menos de manera sistemática, cuando terminaba agosto. Una entrada que pretendía no sé si celebrar o recordar o reafirmar el paso de un nuevo año en la existencia de este blog; un cumpleblog o como quiera llamarse. Algo así como un punto y seguido.
Esta vez, la fecha se pasó. Se pasó porque no tenía ganas, se pasó porque estaba ocupado con otras cosas ... se pasó porque se pasó.
Tampoco la demora ha sido significativa; sólo un par de días desde el 30 de agosto hasta hoy; apenas un instante pero, lo que en la vida es nada más que un suspiro, en la web es mucho pero mucho tiempo. Y cinco años son: una eternidad. Acá, las cosas pasan tan rápido que apenas las vemos desaparecen, lo que hoy es top, mañana es demodé; lo que hoy nos fascina, mañana nos aburre.
Pero el tiempo en la web y el tiempo de un blog no se rigen por los calendarios; los días no tienen 24 horas y los años no tienen 365 días. Acá, todo es efímero y a la vez, todo es infinito. Siempre hay alguien para quien lo viejo es novedad y la novedad siempre tiene algo de viejo. Eso es la web. Un lugar sin tiempos; una red que nos entrecruza, nos comunica y nos distancia pero que a la vez, es el germen de ese nuevo mundo que vendrá, que es inevitable y nos contendrá a todos, con nuestras diferencias.
5Si ahora me pongo a escribir esto es porque de alguna manera me siento obligado. Obligado sin obligación. Obligado porque los blogs son para eso, para dejar salir lo que uno tiene atravesado en al garganta.
Obligado porque un comentario del amigo Jabba me recordaba el aniversario y sus palabras me dejaron asombrado: ¿Dónde está el post del quinto cumpleblog? preguntaba sabiendo que no había ninguno.
Y me quedé pensado ¿cuál es la magia que hace que alguien se acuerde de una fecha como esta? Una fecha que bien podría pasar desapercibida porque no significa demasiado y aún así, sabiendo que es una nimiedad, se acerca desde la distancia y celebra y festeja y deja felicitaciones.
Sí eso no es magia qué alguien me explique qué es la magia.
Magia es eso. Magia es la distancia sin distancias. Magia es la realidad de lo virtual. Magia es cruzar los límites sin culpa ni disculpas. Magia es que un blog persista y se apropie de nuestra vida para multiplicarnos; que nos maneje, nos domine y nos moldee. Magia es eso que no se ve y no debe ser explicado. Qué está o no está. Que es o no es.
Obviamente, no puedo traer orquesta ni champan aunque no es por razones de "ajustes presupuestarios" sino más bien por razones de logística pero, de todas maneras, la imaginación podría llegar a servir para cubrir los faltantes.
Y entonces, acá estamos. Cumpliendo con las tradiciones auto-impuestas y sonriendo un poco. Feliz porque a uno lo recuerdan. Triste por lo que se ha perdido. Melancólico, ilusionado, todo al mismo tiempo, igual que frente a cualquier aniversario donde uno se para frente al espejo y se dice a si mismo:
Cinco años ... pensar que yo era tan joven!!!!!!!!!!!
Esta vez, la fecha se pasó. Se pasó porque no tenía ganas, se pasó porque estaba ocupado con otras cosas ... se pasó porque se pasó.
Tampoco la demora ha sido significativa; sólo un par de días desde el 30 de agosto hasta hoy; apenas un instante pero, lo que en la vida es nada más que un suspiro, en la web es mucho pero mucho tiempo. Y cinco años son: una eternidad. Acá, las cosas pasan tan rápido que apenas las vemos desaparecen, lo que hoy es top, mañana es demodé; lo que hoy nos fascina, mañana nos aburre.
Pero el tiempo en la web y el tiempo de un blog no se rigen por los calendarios; los días no tienen 24 horas y los años no tienen 365 días. Acá, todo es efímero y a la vez, todo es infinito. Siempre hay alguien para quien lo viejo es novedad y la novedad siempre tiene algo de viejo. Eso es la web. Un lugar sin tiempos; una red que nos entrecruza, nos comunica y nos distancia pero que a la vez, es el germen de ese nuevo mundo que vendrá, que es inevitable y nos contendrá a todos, con nuestras diferencias.
5Si ahora me pongo a escribir esto es porque de alguna manera me siento obligado. Obligado sin obligación. Obligado porque los blogs son para eso, para dejar salir lo que uno tiene atravesado en al garganta.
Obligado porque un comentario del amigo Jabba me recordaba el aniversario y sus palabras me dejaron asombrado: ¿Dónde está el post del quinto cumpleblog? preguntaba sabiendo que no había ninguno.
Y me quedé pensado ¿cuál es la magia que hace que alguien se acuerde de una fecha como esta? Una fecha que bien podría pasar desapercibida porque no significa demasiado y aún así, sabiendo que es una nimiedad, se acerca desde la distancia y celebra y festeja y deja felicitaciones.
Sí eso no es magia qué alguien me explique qué es la magia.
Magia es eso. Magia es la distancia sin distancias. Magia es la realidad de lo virtual. Magia es cruzar los límites sin culpa ni disculpas. Magia es que un blog persista y se apropie de nuestra vida para multiplicarnos; que nos maneje, nos domine y nos moldee. Magia es eso que no se ve y no debe ser explicado. Qué está o no está. Que es o no es.
Obviamente, no puedo traer orquesta ni champan aunque no es por razones de "ajustes presupuestarios" sino más bien por razones de logística pero, de todas maneras, la imaginación podría llegar a servir para cubrir los faltantes.
Y entonces, acá estamos. Cumpliendo con las tradiciones auto-impuestas y sonriendo un poco. Feliz porque a uno lo recuerdan. Triste por lo que se ha perdido. Melancólico, ilusionado, todo al mismo tiempo, igual que frente a cualquier aniversario donde uno se para frente al espejo y se dice a si mismo:
Cinco años ... pensar que yo era tan joven!!!!!!!!!!!
Google Panda al ataque |
Desde que Google cambió el algoritmo que establece la forma en que se muestran los resultados en su buscador, se ha producido un revolución en muchos sitios ya que eso ha significado que sus páginas aparezcan en posiciones menos privilegiadas y por lo tanto, la cantidad de visitas se ha reducido de manera significativa, con caídas que muchas veces, superan el 50%.
Este nuevo sistema, llamado Google Panda, hace tiempo que ya estaba en funcionamiento pero sólo en idioma inglés; sin embargo, a partir del 12 de agosto, se ha extendido a todos los idiomas.
La explicación de Google, siempre excitado con la imagen que le devuelve su propio espejo, es que quieren ofrecer mejores resultados cuando alguien busca algún tipo de información y privilegiar los contenidos originales sobre las copias pero ... el resultado final es más que dudoso. Google Panda dice premiar a sitios con contenido original, integrado a redes sociales y poca publicidad; Google Panda dice penalizar el contenido copiado, los artículos con escasa información pero esta imagen hurtada del Foro de SpamLoco lo desmiente; tal como se ve, el artículo original no es el primero sino ¡el séptimo!
Seguramente, algo similar nos debe estar pasando a cualquiera de nosotros; no hablo de personas que deben mantener un blog ya que tal vez, no han sido afectados sino de personas que usan el buscador y sin duda, habrán notado que los resultados que se muestran tienden a ser ... raros.
La verdad, las recomendaciones de Google para construir sitios de alta calidad son ... incalificables; como todos los consejos genéricos, son abstractos, discutibles y, en lo personal, van a contrapelo de lo que yo entiendo que debería ser internet. Hablan de "importancia", de "autoridad" pero ¿quién define la importancia o establece la autoridad? Hablan mucho de "originalidad" y si fuera sarcástico, me preguntaría: ¿Google eliminará de sus resultados las alevosas copias que ellos mismos hacen de otros servicios?
Algo que dicen es clarito: "Por supuesto, no vamos a develar los auténticos indicadores que usamos para la clasificación en nuestros algoritmos porque no queremos que nadie juegue con los resultados de las búsquedas" lo que traducido al español significa que, al no ser públicas, al carecer de controles independientes, son reglas tan arbitrarias como ellos quieran y simplemente, nos piden que confiemos en su bondad, su sabiduría y su buena fe cosa que, obviamente, cualquier sociedad civilizada debería repudiar; no porque uno dude (yo dudo) sino porque en ciertos casos, no solo se debe ser sino también parecer y la no regulación de cualquier tipo de monopolio sólo lleva al desastre.
Este nuevo sistema, llamado Google Panda, hace tiempo que ya estaba en funcionamiento pero sólo en idioma inglés; sin embargo, a partir del 12 de agosto, se ha extendido a todos los idiomas.
La explicación de Google, siempre excitado con la imagen que le devuelve su propio espejo, es que quieren ofrecer mejores resultados cuando alguien busca algún tipo de información y privilegiar los contenidos originales sobre las copias pero ... el resultado final es más que dudoso. Google Panda dice premiar a sitios con contenido original, integrado a redes sociales y poca publicidad; Google Panda dice penalizar el contenido copiado, los artículos con escasa información pero esta imagen hurtada del Foro de SpamLoco lo desmiente; tal como se ve, el artículo original no es el primero sino ¡el séptimo!
Seguramente, algo similar nos debe estar pasando a cualquiera de nosotros; no hablo de personas que deben mantener un blog ya que tal vez, no han sido afectados sino de personas que usan el buscador y sin duda, habrán notado que los resultados que se muestran tienden a ser ... raros.
La verdad, las recomendaciones de Google para construir sitios de alta calidad son ... incalificables; como todos los consejos genéricos, son abstractos, discutibles y, en lo personal, van a contrapelo de lo que yo entiendo que debería ser internet. Hablan de "importancia", de "autoridad" pero ¿quién define la importancia o establece la autoridad? Hablan mucho de "originalidad" y si fuera sarcástico, me preguntaría: ¿Google eliminará de sus resultados las alevosas copias que ellos mismos hacen de otros servicios?
Algo que dicen es clarito: "Por supuesto, no vamos a develar los auténticos indicadores que usamos para la clasificación en nuestros algoritmos porque no queremos que nadie juegue con los resultados de las búsquedas" lo que traducido al español significa que, al no ser públicas, al carecer de controles independientes, son reglas tan arbitrarias como ellos quieran y simplemente, nos piden que confiemos en su bondad, su sabiduría y su buena fe cosa que, obviamente, cualquier sociedad civilizada debería repudiar; no porque uno dude (yo dudo) sino porque en ciertos casos, no solo se debe ser sino también parecer y la no regulación de cualquier tipo de monopolio sólo lleva al desastre.
Un reciente artículo de Ayuda Wordperss intenta ayudar a entender los problemas prácticos o por lo menos, hecha algo de luz sobre lo que es y lo que debería ser. Dice: "parece ser que está valorando de manera excesiva el ratio de rebote, el tiempo de permanencia en el sitio y la marca del sitio", de allí que frente a cualquier búsqueda, suelen verse muchos resultados de Wikipedia, YouTube, ¡¡¡Taringa!!!! o sitios "grandes" en detrimento de sitios "pequeños". No sería extraño, es el resultado lógico de la concentración
¿Qué puede hacerse si un sitio se ve afectado por esta "mejora"? Insultar, rezar, pero, también se pueden tener en cuanta algunas ideas expresadas en el articulo al que me refería y que trataré de resumir en lo que considero que puede ser aplicado de modo genérico, sin importar el servicio o tipo de sitio que uno tenga:
¿Qué puede hacerse si un sitio se ve afectado por esta "mejora"? Insultar, rezar, pero, también se pueden tener en cuanta algunas ideas expresadas en el articulo al que me refería y que trataré de resumir en lo que considero que puede ser aplicado de modo genérico, sin importar el servicio o tipo de sitio que uno tenga:
- crear contenido original, indicar las fuente y evitar las copias
- evitar los artículos cortos que aporten poco más allá de un enlace a la fuente original
- usar siempre texto alternativo (ALT) para las imágenes
- incitar a la lectura completa de las entradas
- añadir contenido que fomente la permanencia en el sitio
- facilita que los lectores compartan las entradas en redes sociales
- eliminar la publicidad excesiva
- revisar los enlaces rotos
- fomentar el debate en los comentarios siempre que estos sean relevantes
- reducir la cantidad de categorías o etiquetas
- evitar que se indexen las páginas secundarias, Archivos, Etiquetas, Búsquedas, etc.
