| Picon Social | |
 | Contiene 480 íconos de 16x16, 24x24, 32x32, 56x56, 64x64, 128x128, 256x256 y 512x512, en formato PNG. descargar |
 | |
La propiedad text-overflowUna de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa … |
29sep 2011
|
Una de las características más interesantes del diseño web es que uno no debe preocuparse por conocer previamente la dimensión de los elementos que vamos agregando. Sin embargo, algunas veces, esa ventaja se vuelve un problema si no tenemos en cuenta que si el contenido es más grande que el contenedor puede desbordarse y ocupar espacios indeseados.
Cómo crear una ventana modal propia (3)Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en … |
28sep 2011
|
Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.
Jugando a superponer contenidosNo 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 … |
26sep 2011
|
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
hiperurl: Un enlace para múltpes direccioneshiperurl.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 … |
23sep 2011
|
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 problemasEl 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 … |
22sep 2011
|
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 :hoverLas 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 … |
21sep 2011
|
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)Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en … |
19sep 2011
|
Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.
Eliminar el nuevo LightBox de BloggerDesde 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 … |
16sep 2011
|
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 indivisiblesEs 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í … |
16sep 2011
|
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 otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en … |
15sep 2011
|
Una ventana modal no es otra cosa que un contenedor HTML como cualquier otro que tiene una característica básica, permanecer oculta hasta que se hace click en algún botón. En principio, nada en particular y podrían diseñarse cientos de modelos gráficos pero digamos que lo más usual es que al abrirse, la pantalla se oscurece y sobre la página se muestra un elemento con cierto contenido que luego, podemos cerrar.
Mejorar la indexación del blogCuando 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 … |
14sep 2011
|
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 CSSEste 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 … |
12sep 2011
|
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 webgalrun(400,400); REFERENCIAS:designbeep.com … |
11sep 2011
|
HTML aleatorio con randomtext.merandomtext.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 … |
9sep 2011
|
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 jQueryFitVids 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 … |
8sep 2011
|
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 etiquetasCondicionar 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 … |
7sep 2011
|
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 BitdefenderBitdefender 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 … |
5sep 2011
|
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.
Cinco y un par de diasDesde 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. … |
2sep 2011
|
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 ataqueDesde 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 … |
1sep 2011
|
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.
