Dime con quién andas y te diré quien eres

Hay una serie de cosas que podemos hacer para optimizar nuestro blog y que este sea "amigable" para los buscadores (ergo Google) tales como agregar un sitemap o bien optimizar los títulos; cuando preguntan "¿por qué mi blog no aparece en los buscadores?" o "¿por qué no se indexa correctamente?", suelo quedarme sin respuestas así que nada mejor que lo conteste Matt Cutts, uno de los popes de Google.

Le preguntan: "¿Cómo hacer para que se indexen rápido mis páginas nuevas?" y la respuesta es tan sencilla como brutal:

Obtener más enlaces.

Podemos indexar en cuestión de segundos, si encontramos, por ejemplo, que CNN te está enlazando, te rastrearemos en seguida. Así que podemos encontrar contenido nuevo muy rápido. Si tienes un blog o algo así, rastrearemos a menudo. Pero lo mejor es asegurarte de que tienes suficientes enlaces que consideran un sitio útil y volveremos a rastrearte a menudo.

Moraleja: No funciona de modo muy distinto a tantas otras cosas donde lo que se produce es una retro-alimentación basada en el status o, si quiere, se hace realidad aquel dicho de "cuida los centavos que los billetes se cuidan solos". Podrá ser bueno o malo pero, así funcionan y eso no significa que todo lo demás sea inútil sino que son condiciones mínimas necesarias pero de ninguna manera implican que el resultado sea el deseado; en todo caso impiden que sea peor.

Finalmente, aunque repetido, hay algunas respuestas que sí pueden darse:

• es FALSO que Google sólo indexe sitios que tengan colocado el código de Google Analytics
• es FALSO que Google sólo indexa sitios que usen AdWords o AdSense
• es FALSO que Google indexa páginas visitadas a través de su Toolbar
• es FALSO que sólo se indexen páginas si se utiliza el atributo nofollow
• es FALSO que sólo se indexen páginas si se usan sitemaps

Este script de jQuery, crea un reloj muy especial al que han llamado tzineClock y es muy sencillo de agregar.

Podemos descargar el ejemplo completo en formato ZIP desde la web del autor y obviamente, lo primero es tener la librería y lo más simple es usar las AJAX Libraries API de Google:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>

Luego, el script en si mismo llamado jquery.tzineClock.js que podemos alojar en un servidor:

<script type='text/javascript' src='URL_jquery.tzineClock.js'/>

o agregar a la plantilla utilizando CDATA:

<script type='text/javascript'>
//<![CDATA[
  ... aquí colocamos el contenido del script ...
//]]>
</script>

y por último el CSS que también está en el demo y donde podemos configurar algunas cosas; por ejemplo:

.clock { /* aquí podemos establecer el color del fondo y el tamaño */ }
.clock .bg, .clock .front { /* aquí podemos establecer el color del fondo y los tamaños de cada sector */ }

/* esto, deberemos cambiarlo, alojar las tres imágenes (o cualquier otra) y colocar la URL */
.orange .bg.left { background: url(URL_bg_orange.png) no-repeat left top; }
.green .bg.left { background: url(URL_bg_green.png) no-repeat left top; }
.blue .bg.left { background: url(URL_bg_blue.png) no-repeat left top; }
.orange .bg.right { background: url(URL_bg_orange.png) no-repeat right top; }
.green .bg.right { background: url(URL_bg_green.png) no-repeat right top; }
.blue .bg.right { background: url(URL_bg_blue.png) no-repeat right top; }

¿Cómo hacemos que funcione? Agregamos un DIV donde nos guste verlo y ejecutamos el script cuando la página haya termiando de cargarse:

<div id="fancyClock"></div>
<script type='text/javascript'> $(document).ready(function(){ $('#fancyClock').tzineClock(); }); </script>

REFERENCIAS:Tutorialzine

Se vacía la papelera de reciclaje por decimoquinta vez hasta que ya no hay nada y uno hace copias de cualquier cosa sólo para luego poder eliminarlas y vaciar la papelera por decimosexta vez.

Se busca una pomada que calme la tortícolis porque el cuello se resiente de tanto inclinarse hacia la izquierda para ver si el modem muestra las bellas lucecitas parpadentes pero no, siguen semi-apagadas, con ese color ambar que tanto se parece a la agonía.

Se busca qué hacer porque las ganas siguen pero resulta que ese datito que falta está en alguna parte de la web y es tan inaccesible como si estuviera en un cráter de la luna.

Se toma el teléfono y se marca ese número que uno ya sabe de memoria y se está ahí un rato largo, escuchando la musiquita de espera hasta que alguien atiende y claro, como siempre es alguien diferente, las respuestas no son las mismas, de esa manera, uno puede elegir la que mejor se acomode al grado de hartazgo que se tenga.

Y como la papelera sigue vacía, mejor ordenar el desorden.

Y se graban cosas, se hacen backups, se verifican y entonces sí, uno puede borrarlos sin problemas para luego volver a vaciar la papelera por vigésima vez.

Y uno piensa: "antes, yo me entretenía igual ¿qué demonios me pasa? ¿Por qué ahora necesito algo que antes no necesitaba?" La electricidad es supérflua, Gauguin pintaba igual a la luz de un par de candelabros; Shakespeare escribía, Miguel Angel esculpía el David y yo no puedo caminar por mi propia casa sin tropezarme con los muebles.

Pero la luz vuelve y la lámpara me ilumina ... sólo me falta internet y sigo tan perdido como si el mundo hubiera colapsado ... y para colmo, la papelera de reciclaje está vacía.

Dia dos: Juguemos algo, listo, ya me aburrí.

Terminemos eso pendiente y ... no, me falta una imagen, pucha, lo que tengo no me alcanza porque nunca me alcanza. Soy un agujero negro que se ha acostumbrado a absorber más y más y más y más y ahora ... no hay nada.

Y el modem sigue muerto, y no hay más archivos que ordenar, y la musiquita de espera repite su letanía y la papelera de reciclaje sigue vacía ...

¿Adicto a internet? No, qué va, eso no existe ¿Adicto? No, no me hagan reir.

¡Qué suerte!, acá encontré algo que puedo borrar. Listo, ahora, podré vaciar la papelera de reciclaje por quincuagécima vez ...

El HTML5 y el CSS3 están conmocionando la web, sobre todo, a quienes nos gusta experimentar un poco. El primero de ellos viene con una idea que, de ser aceptada, cambiará significativamente las cosas, permitiendo que los sitios se liberen de códigos engorrosos y permisos de uso de ciertas herramientas.

Hay dos etiquetas propuestas que ya funcionan en algunos navegadores y pretenden generar un nuevo standard para la reproducción de audio y de video, algo que aún se discute y que se enfrenta con varias contras, los usos y costumbres y los intereses comerciales de muchas empresas (Apple, Microsoft, Adobe) ya que estamos hablando de formatos de distribución libre como los son los codecs Ogg/Theora.

Ya está disponible en Opera, Chrome, Firefox, etc y lo que permite es agregar contenido multimedia sin necesidad de reproductores de Flash ni instalar codecs adicionales. La pelea recién empieza, Vimeo y Youtube anunciaron que usarán la nueva etiqueta como alternativa pero no lo hacen con el codec libre; por el contrario, Dailymotion optó por ellos y su demo es muy interesante.

"La web no sería lo que es hoy si cada blogger tuviera que pagar por una licencia para publicar imágenes y texto en una página. Los vídeos tampoco tendrían que requerir el pago de licencias." Asa Dotzler

Las etiquetas en cuestión son tan simples de utilzar como esto:

<audio src="URL_archivo.ogg"></audio>

<video src="URL_archivo.ogg"></video>

Ambas tiene algunos atributos opcionales:

autoplay se agrega si queremos que comience a reproducirse apenas se abre la página
controls permite que sean visibles los controles de reproducción (volumen, pausa, etc)
height y width indican el tamaño en pixeles

En Firefox 3.6, el atributo poster permite indicar una imagen que se mostrará hasta que el video comienza a ser reproducido (más información video y audio). Un ejemplo:

<video width="320" height="240" src="URL_archivo.ogg" autoplay controls poster="URL_imagen"></video>

Lo que se aconseja es usarlas agregando alguna advertencia que se muestre en los navaegadores que no las soportan:

<video src="URL_archivo.ogg" >Su navegador no soporta la etiqueta VIDEO</video>

La fuente del video también se puede agregar con etiquetas especiales como source e incluso, indicar varias de estas para que el navegador utilice la más adecuada:

<video controls>
<source src="URL_archivo.ogg" type="video/ogg">
<source src="URL_archivo.mp4">
Su navegador no soporta la etiqueta VIDEO
</video>

o bien combinar esto con Flash para que funcione en Internet Explorer:

<video controls src="URL_archivo.ogg">
<object data="URL_archivo.swf" type="application/x-shockwave-flash">
<param value="URL_archivo.swf" name="movie"/>
</object>  
</video>

Estas etiquetas tienen múltiples alternativas e incluso, la posibilidad de ser controladas utilizando JavaScript (más información).

Para nosotros los usuarios, estas peleas de las superestructuras del poder en internet sólo nos confunden y en realidad, que se opte por esto o no también dependerá de nosotros, de lo que hagamos o de lo que decidamos. En realidad, sólo nos interesa ver un video o escuchar un audio, compartirlo, mostrarlo de la manera más simple posible y ellos, nos lo complican.

Por el momento, una de las limitaciones es ¿cómo convierto un video a formato OGG? Algunas heramientas online permiten hacerlo con bastante facilidad pero ¿dónde alojar esos archivos? Si bien son aceptados en muchos sitios (Google Sites, Fileden, etc), no todos ellos los identifican correctanmente y por lo tanto, no pueden ser reproducidos. Algunos audios pueden ser descargados desde Wikipedia, desde vorbis.com o desde otros servicios.

Por si alguien quiere probar, esas son algunas URLs que pueden usarse:

AUDIO: http://01audiovideo.free.fr/ogg/1vs0_JuniorGroove.ogg

VIDEO: http://v2v.cc/~j/theora_testsuite/320x240.ogg

1 | 2 | 3 | 4 | 5 | 6 | 7

REFERENCIAS:fromkeetra.com

Usando técnicas simples y las posibilidades que da utilizar el formato de color RGBA() y algunas otras del CSS3, The ZURBlog muestra una forma de generar botones con relieve.

Sólo necesitamos una imagen que tiene una cierta tranasparencia y que usaremos de fondo llamada overlay.png y una serie de definiciones globales:

.button, .button:visited { /* botones genéricos */
background: #222 url(URL_overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #FFF;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor:pointer
}
.button:hover { /* el efecto hover */
background-color: #111
color: #FFF;
}
.button:active{  /* el efecto click */
top: 1px;
}

/* botones pequeños */
.small.button, .small.button:visited {
font-size: 11px ;
}

/* botones medianos */
.button, .button:visited,.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

/* botones grandes */
.large.button, .large.button:visited {
font-size:14px;
padding: 8px 14px 9px;
}

/* botones extra grandes */
.super.button, .super.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}

Por útimo, definimos los colores, aquí algunos ejemplos:

.pink.button { background-color: #E22092; }
.pink.button:hover{ background-color: #C81E82; }

.green.button, .green.button:visited { background-color: #91BD09; }
.green.button:hover{ background-color: #749A02; }

.red.button, .red.button:visited { background-color: #E62727; }
.red.button:hover{ background-color: #CF2525; }

.orange.button, .orange.button:visited { background-color: #FF5C00; }
.orange.button:hover{ background-color: #D45500; }

.blue.button, .blue.button:visited { background-color: #2981E4; }
.blue.button:hover{ background-color: #2575CF; }

.yellow.button, .yellow.button:visited { background-color: #FFB515; }
.yellow.button:hover{ background-color: #FC9200; }

¿Cómo usarlos, agregando las clases a cualquier enlace:

<a href="#" class="small button orange"> botón naranja pequeño </a>
<a href="#" class="medium button blue"> botón azul mediano </a>
<a href="#" class="large button red"> botón rojo grande </a>
<a href="#" class="super button pink"> botón rosa exra grande </a>

Pink ButtonGreen ButtonBlue ButtonRed ButtonOrange ButtonYellow Button

Pink Button Green ButtonBlue ButtonRed ButtonOrange ButtonYellow Button

Cuando se cargan las imágenes de una página, estas quedan almacenadas en el caché. Por lo tanto, si una de ellas se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen para los botones, los íconos, las barras de separación, etc.

leer artículo actualizado