Un minuto de historia

JMiur [E]

Este es un menú desplegable que usa las características del CSS3 y que sólo requiere de una imagen. Lo interesante es que funcionará tambien en navegadores como Internet Explorer, aún cuando estos no soporten las nuevas propiedades; la única diferencia es que no se verán ni sombra ni bordes redondeados ni sombras.

Como siempre, el estilo hay que ponerlo antes de </head> y allí, podremos cambiar los detalles.

<style>
/* el menú es una lista */
#nav {
  background: #678 url(URL_gradient.png  ) repeat-x 0 -110px;
  line-height: 100%;
  margin: 0;
  padding: 7px 6px 0;
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
#nav li { /* cada item de esa lista */
  float: left;
  list-style: none;
  margin: 0 5px;
  padding: 0 0 8px;
  position: relative;
}

/* las definiciones del Nivel Principal */
#nav a {
  color: #DDD;
  display: block;
  font-weight: bold;
  margin: 0;
  padding:  8px 20px;
  text-decoration: none;
  -webkit-border-radius: 1.6em;
  -moz-border-radius: 1.6em;
  text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
  background: #000;
  color: #FFF;
}

/* efecto hover en el Nivel Principal */
#nav .current a, #nav li:hover > a {
  background: #468 url(URL_gradient.png  ) repeat-x 0 -40px;
  color: #444;
  border-top: solid 1px #F8F8F8;
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);
  box-shadow: 0 1px 1px rgba(0,0,0, .2);
  text-shadow: 0 1px 0 rgba(255,255,255, 1);
}

/* los subniveles */
#nav ul li:hover a, #nav li:hover li a {
  background: none;
  border: none;
  color: #333;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#nav ul a:hover {
  background: #456 url(URL_gradient.png  ) repeat-x 0 -100px !important;
  color: #fff !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

/* el efecto de desplegar */
#nav li:hover > ul {
  display: block;
}

/* las definiciones de los submenues */
#nav ul {
  background: #DDD url(URL_gradient.png  ) repeat-x 0 0;
  border: solid 1px #B4B4B4;
  display: none;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 35px;
  width: 185px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
  box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#nav ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#nav ul a {
  font-weight: normal;
  text-shadow: 0 1px 0 #FFF;
}

/* las definiciones de los submenues internos */
#nav ul ul {
  left: 181px;
  top: -3px;
}

/* bordes redondeados del primer y  último item */
#nav ul li:first-child > a {
  -webkit-border-top-left-radius: 9px;
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
}

/* definiciones generales */
#nav:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
#nav { display: inline-block; } 
html[xmlns] #nav { display: block; }
* html #nav { height: 1%; }
</style>

Inicio
Menu 1
Menu 2
Menu 3
Menu 4

El HTML es una serie de listas anidadas y alli, sólo debemos tener cuidado para que las etiquetas queden correctamente cerradas. El código del ejemplo es el siguiente:

<ul id="nav">
  <li class="current"><a href="javascript:void(0);">Inicio</a></li>
  <li>
    <a href="javascript:void(0);">Menu 1</a>
    <ul>
      <li>
        <a href="javascript:void(0);">Sub Menu 1.1</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:void(0);">Sub Menu 1.2</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
      <li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);">Menu 2</a>
    <ul>
      <li>
        <a href="javascript:void(0);">Sub Menu 2.1</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
      <li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
      <li>
        <a href="javascript:void(0);">Sub Menu 2.4</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Menu 3</a></li>
  <li><a href="javascript:void(0);">Menu 4</a></li>
</ul>

REFERENCIAS:webdesignerwall.com

CSS

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

blogs

Un reloj muy colorido con jQuery

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

JQuery

Llueve sobre mojado

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 ...

personal

Las etiquetas AUDIO y VIDEO

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>

Un ejemplo de un archivo de audio:

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

HTML

Entre tu y yo

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

REFERENCIAS:fromkeetra.com

curiosidades

Otros cinco packs de íconos


GP Icons by myspace4art
	Contiene 23 íconos de 320x320 en formato PNG.descargar


Sixpack Status
	Contiene 25 íconos de 32 x 32, 64 x 64, 128 x 128 y 256 x 256, en formato PNG.descargar


Feed Icons
Contiene 66 íconos de 16x16 y 32x32 en formato PNG.descargar


Kitty icons
	Contiene 18 íconos de 48x48 y 128x128 en formato PNG.descargar


IiconShock by lboi
	Contiene 6 íconos 256x256, en formato PNG.descargar

iconos

Botones con CSS

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 Button Green Button Blue Button Red Button Orange Button Yellow Button

CSS: La imagen no se encuentra

Por defecto, en Firefox, cuando una imagen no se encuentra no pasa nada, el espacio que debería ocupar no se muestra. En Internet Explorer y Chrome, por ejemplo, esto es diferente, si la imagen no pudo ser cargada, se muestra un ícono

y, eventualmente, el texto del atributo ALT.

Según Mozilla, si la imagen tiene definidos un ancho y un alto, deberíamos ver un ícono

pero, eso no ocurre siempre. También dicen que hay una propiedad que controla eso, llamada -moz-force-broken-image-icon; un valor de 1 forzaría a que se muestre ese ícono y tampoco veo que funcione en todos los casos.

Lo que suele ocurrir son cosas así:

En este es un ejemplo: <img src="nada.jpg" alt="" />

como esa imagen no existe, en Firefox no vemos nada a menos que le pongamos el atributo ALT, en cuyo caso, lo que veremos será el texto de ese atributo:

<img src="nada.jpg" alt="aqui deberia verse la imagen" />

Con CSS, hay algunas particularidades de los navegadores de Mozilla que podemos utilizar para cambiar esto.

El pseudo-elemento -moz-broken nos permite agregar propiedades que se aplicarán a las imágenes que no puedan ser cargadas; por ejemplo, podríamos agregarles un borde y un color:

img:-moz-broken { border: 1px solid red; color: red }

Este es el mismo ejemplo anterior, una imagen sin el atributo ALT:

y este con el atributo ALT aqui deberia verse la imagen

esta imagen, en cambio existe: aqui deberia verse la imagen

Lo mismo, podría hacerse con casi cualquier otra propiedad, por ejemplo, una imagen de fondo alternativa o podríamos crear dos definiciones, una para las imágenes en general:

img:-moz-broken { color:#C6211A; font-family: Tahoma; font-weight: bold; }

y otra para las imágens que no tengan el atributo ALT:

img[alt=""]:-moz-broken:after {
  background: transparent url(URL_imagen) no-repeat 0 0;
  content: "error" !important;
  padding-left :20px;
  text-decoration: blink;
}

Estos son los mismos dos ejemplos anteriores:

CSS

Gradientes en CSS

Otra de las nuevas características del CSS3 es la que nos permite crear gradientes de color para utilizar como fondos. Como todas las otras, hay diferentes instrucciones dependiendo del navegador:

en Firefox 3.6 usamos -moz-linear-gradient y -moz-radial-gradient
en Google Crome y Safari -webkit-gradient linear y radial
en Internet Explorer filter: progid:DXImageTransform.Microsoft.Gradient más información
en Opera no está implementada

La mayor parte de los ejemplos siguientes sólo se verán Firefox porque resulta complejo aplicar todas las propiedades en esta entrada

Las utilizamos como si fueran un color dentro de la propiedad background y las explicaciones de cada parámetro son bastante complicadas aunque puede intentarse de manera instintiva y ver qué ocurre:

-moz-linear-gradient(inicio angulo, color1, color2);
-moz-radial-gradient(inicio angulo, shape, color1, color2);

inicio es la posición desde donde comenzará a ser generada; pueden ser valores expresdos en pixeles, porcentajes o palabras clave como left, top, right, bottom o center.
angulo obviamente, indica el ángulo del gradiente
shape puede ser circle o ellipse y define la forma de una gradiente

Todas son optativas así que podemos obviarlas.

colorX es la más importante e indica los distintos colores que se utilizarán y como mínimo colocaremos dos aunque puede haber más. Lo más sencillo sería usarlos de este modo:

background-image: -moz-linear-gradient(#123, #789); /* una gradiente lineal */
background-image: -moz-radial-gradient(#123, #789); /* una gradiente radial */

Ver/Ocultar Ejemplo [+]

Otro ejemplo similar, utilizando varios colores, le agregamos amarillo:

background-image: -moz-linear-gradient(#123, #789, #BB0); /* una gradiente lineal */
background-image: -moz-radial-gradient(#123, #789, #BB0); /* una gradiente radial */

Ver/Ocultar Ejemplo [+]

La cantidad de colores no parece tener limitaciones y se distribuyen de manera proporcional pero también podemos controlar eso, agregando un porcentaje o una longitud. Esta longitud indicará en que posición comenzará a utilizarse ese color. En el primer ejemplo, los cinco colores se distribuyen parejos y en el segundo, el color verde (#00FF00) comienza 100 pixeles a la izquierda:

background-image: -moz-linear-gradient(0deg, #000000, #FF0000, #00FF00, #0000FF, #FFFFFF)
background-image: -moz-linear-gradient(0deg, #000000, #FF0000, #00FF00 100px, #0000FF, #FFFFFF)

Ver/Ocultar Ejemplo [+]

Le hemos agregado un valor más, el ángulo expresado en grados, eso permite establecer la dirección del gradiente:

background-image: -moz-linear-gradient(0deg, #FF0, #0FF);
background-image: -moz-linear-gradient(90deg, #FF0, #0FF);
background-image: -moz-linear-gradient(180deg, #FF0, #0FF);
background-image: -moz-linear-gradient(270deg, #FF0, #0FF);

Ver/Ocultar Ejemplo [+]

0 grados

90 grados

180 grados

270 grados

La opción es realmente intersante aunque parece compleja, sobre todo, nos permite generar gradientes que se verán bastante bien en distintonas navegadores si es que nos limitamos a usar las carcterísitcas maas elementales es decir, establecer una gradiente lineal ya sea horizontal y vertical con sólo dos colores.

Estos dos último ejemplos, deberían verse en todos los navegadores indicados al incio de la entrada:

background-image: -moz-linear-gradient(#AAAAAA, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#AAAAAA,endColorStr=#000000);"

background-image: -moz-linear-gradient(0deg,#AAAAAA, #000000);
background-image: -webkit-gradient(linear, left bottom, right top, from(#AAAAAA), to(#000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#AAAAAA,endColorStr=#000000);

CSS

Insertar Google Buzz con jQuery

Este es un widget desarrollado por moretechtips.net/ que utiliza jQuery para incrustrar Google Buzz en cualquier sitio web. El proyecto está lojado en Google Code y podemos descargarlo desde allí o bien, insertarlo de modo directo.

Para esto, agregamos lo siguiente antes de </head>:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://google-buzz-widget.googlecode.com/files/jquery.google-buzz-1.0.min.js"></script>

Y luego, con una serie de definiciones CSS podemos personalizarlo:

<style type="text/css">
  div.google-buzz { /* es el contenedor principal */ }
  ul.gbw { /* será una lista */
    padding:0;
    margin:0;
  }
  ul.gbw li { /* cada item de la lista será el buzz a mostrar */
    float: left;
    list-style-type: none;
    height: 48px;
    margin: 2px 0;
    overflow: hidden;
    padding: 5px 10px;
    width: 500px;
  }
  ul.gbw span.gbw-meta { /* los datos de la fuente y la fecha */ }
  ul.gbw span.gbw-meta a { /* los enlaces */ }
  ul.gbw a.gbw-link { /* podemos personalizar los difentes tipos de enlaces y datos */ }
  ul.gbw a.gbw-date { /* la fecha*/ }
  ul.gbw a.gbw-source { /* fuente del buzz */ }
  ul.gbw a.gbw-at  { /*@nombre */ }
  ul.gbw a.gbw-hashtag { /* hashtags */ }
</style>

Por último, lo agregando un DIV donde quisieramos mostrarlo:

<div class="google-buzz" options="{username:'nombre',n:valor,show_n:valor,animate:'valor'}"> cargando ... </div>

options="{}" es una secuencia de parámetros separados con comas; las opciones son estas:

username es el nombre de usuario tal como aparece en Google Profile y es el único argumento obligatorio
debug si se establece en 1 permite verificar errores (por defecto es 0)
n es la cantidad de buzzes a leer (máximo 100 y por defecto 10)
show_n es la cantidad máxima de buzzes a mostrar simultáneamente (un cero deshabilita el efecto de transición y por defecto es 1)
stay_time es el tiempo que permanecen visibles expresado en milisegundos (por defecto es 5000)
enter_time y exit_time definen la velocida de las transiciones (por defecto es 200)
animate define el modo de la animación, puede ser opacity (el valor por defecto), height, width, fontSize o lineHeight
header es el contenido HTML a colocar como título del widget
snippet si es 1 se muestra un resumen del buzz (es el valor por defecto) y si es 0 se muestra completo
show_source si es 1 muestra la fuente del buzz (desde donde fuen enviado)
show_date si es 1 muestra la fecha del buzz
info es un enlace opcional a la página principal del autor del plugin

JQuery

Compartir entradas en diferentes servicios

Estamos acostumbrados a agregar gadgets para cualquier cosa y si bien a veces es una forma cómoda de resolver algo, hay circunstancias en que son inacecuados y hacerlo a mano es más provechoso.

Los botones de suscripción o bookmarks son un ejemplo de ellos. Blogger mismo tiene un elemento llamado Enlaces de Suscripción, muy pobre y limitado. Otros son mejores pero, generalmente son excesivos y poco configurables, están en inglés y uno siempre duda si alguien los usa ya que incluyen servicios de los que jamás hemos escuchado hablar.

Agregar ese tipo de botón es bastante sencillo ya que sólo se trata de enlaces que envian a algún servicio la dirección URL de una entrada y el título de esta y ambos datos son accesibles. En entradas recientes, Mamanunes explica la forma de agregar un gadget y Gem@ nos explica el método a seguir para incluir esos botones en nuestra plantilla.

No es demasiado complicado crear uno mismo su propia botonera, de hecho, algo similar fue de los primeros hacks que existieron para Blogger y creo que aún podrían tener vigencia o por lo menos, ser una altdeernativa viable.

En todos los casos, necesitamos la URL a donde se envia, algo que varía con cada servicio. Además, necesitamos dos datos más que varian y a los que Blogger nos permite acceder: la dirección de la entrada (data:post.url) y su título (data:post.title). Con esas tres cosas, construiremos los enlaces a los que podremos personalizar a gusto, ya sea con textos o con imágenes y los pondremos en la plantilla, por ejemplo, en el footer de cada entrada donde suele haber una serie de sectores llamados post-footer-line post-footer-line-1, post-footer-line post-footer-line-2, etc así que, dependiendo de dónde nos guste verlos, incluiremos al botonera en uno de ellos o crearemos otro. Aquí un ejemplo haciendo que se alineen a la derecha:

<p class='post-footer-line post-footer-line-4'>
  <span style="float: right; margin: 0 10px 0 0;">
    ... el código de los enlaces a cada servicio ...
  </span>
</p>

Esta son algunas de las posibles alternativas:

del.icio.us

<a expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title'> texto/imagen </a>

Facebook

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title'> texto/imagen </a>

FriendFeed

<a expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'> texto/imagen </a>

Orkut

<a expr:href='&quot;http://promote.orkut.com/preview?nt=orkut.com&amp;du=&quot; + data:post.url + &quot;&amp;tt=&quot; + data:post.title' target='_blank'> texto/imagen </a>

Plurk

<a expr:href='&quot;http://www.plurk.com/m?content=&quot; + data:post.url + &quot;&amp;qualifier=shares&quot;'> texto/imagen </a>

StumbleUpon

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+data:post.url + &quot;&amp;title=&quot; + data:post.title'> texto/imagen </a>

Technorati Favs

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url'> texto/imagen </a>

Twitter

<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot;: &quot; + data:post.url'> texto/imagen </a>

Google Buzz

<a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'> texto/imagen </a>

o bien:

<a expr:href='&quot;http://www.google.com/reader/link?srcURL=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'> texto/imagen </a>

Incluso, podría agregarse una muy simple para enviar las entradas por correo:

<a expr:href='&quot;mailto:?subject=MIBLOG&amp;body=&quot; + data:post.title + &quot; : &quot; + data:post.url'> texto/imagen </a>

Como se ve, todos los enlaces tienen más o menos el mismo esquema:

<a expr:href='&quot;URL_servicio&quot; + data:post.title + &quot;: &quot; + data:post.url'>

Este esquema base lo podemos ampliar agergándole atributos, por ejemplo, así no los indexamos (que sería lo lógico), les colocamos un título y los abrimos en una nueva ventana:

<a expr:href='&quot;URL_servicio&quot; + data:post.title + &quot;: &quot; + data:post.url' rel='nofollow' target='_blank' title='mi titulo'>

Blogger

Electropolis

animacion

Iconos de San Valentín


San Valentin Icon Set
	Contiene 12 íconos de 96×96, 128×128 y 256×256 en formato PNG.descargar

GRACIAS:Sonieta

iconos

Zanorg Player: Excelente reproductor de audio

Zanorg Player es un reproductor de MP3s muy simple y liviano. Descargamos el SWF desde la página de los desarrolladores y luego, lo alojamos en un servidor, Fileden, Google Siete, ImageShack, etc.

Para usarlo, basta incrustar el objeto donde se nos ocurra:

<object type="application/x-shockwave-flash" data="URL_zplayer.swf?mp3=URL_archivo.mp3" width="200" height="20"/>
<param name="movie" value="URL_zplayer.swf?mp3=URL_archivo.mp3" />
</object>

Todo eso, en una sola línea si se trata de una entrada.

Además, dispone de varios parámetros que podemos adicionar:

mp3=url es el archivo a reproducir y es el único obligatorio
vol=valor lo usamos para establecer el volumen inicial (0 a 100)
autoplay=1 lo usamos si queremos que comience a reproducirse de manera automática (por defecto es cero)
down=1 lo usamos para que se agregue un mini ícono que permte descargar el archivo de audio (por defecto es cero)

Para personalizar los colores hay tres parámetros más:

c1=rgb define el color de fondo
c2=rgb define el color de los controles
c3=rgb define el color de los botones

Los parámetros los agregamos mediante el carácter & así que, la URL a colocar podría tener este formato:

URL_zplayer.swf?mp3=URL_archivo.mp3&c1=577bf8&c2=bde1e9&c3=effcfe&down=1&autoplay=1&vol=75

herramientas

Alinear verticalmente

A diferencia del centrado horizontal, alinear algo verticalmente no es tan sencillo o, mejor dicho, no parece tan evidente. No hay una solución universal para alinear cosas, todo depende

Lo más simple es centrar verticalmente los textos de una etiqueta. En cualquier bloque (DIV P LI ), si establecemos una altura con height, basta colocar la propiedad line-height con el mismo valor para que el texto quede centrado:

<div style="height: 100px; font-size:20px; line-height: 100px;"> ....... </div>

Cum sociis natoque penatibus et magnis dis parturient montes.

Valores inferiores a la altura (line-height: 50px;) harán que el texto se muestre arriba y esto es lo que ocurre normalmente ya que el valor estandard de sesa propiedad es normal y eso significa que es más o menos igual a una vez y media la altura de la fuente del texto.

Valores superiores a la altura (line-height: 150px;) harán que el texto se muestre abajo:

Cum sociis natoque penatibus.

Cum sociis natoque penatibus

Para centrar elementos que tienen diferentes alturas, lo más común es usar la propiedad vertical-align con un valor de middle. Por ejemplo:

<div style="text-align: center; vertical-align: middle; ">
  <span style="font-size: 22px;">malesuada sed</span>
  <span style="font-size: 32px;">malesuada sed</span>
  <span style="font-size: 16px;">malesuada sed</span>
</div>

malesuada sed malesuada sed malesuada sed

Pero esto no centrará demasiado bien, la propiedad, deberíamos colocarla en cada una de las etiquetas internas y no en el contenedor:

<div style="text-align: center;">
  <span style="vertical-align: middle; font-size: 22px;">malesuada sed</span>
  <span style="vertical-align: middle; font-size: 32px;">malesuada sed</span>
  <span style="vertical-align: middle; font-size: 16px;">malesuada sed</span>
</div>

malesuada sed malesuada sed malesuada sed

Esto, es aplicable tanto a textos como a imágenes:

<div style="font-size: 16px; text-align: center;">
  texto texto texto 
  <img style="vertical-align: middle;" src="URL_imagen" />
  texto texto texto 
</div>

Ut et justo sem

quisque aliquam ultrices libero id mattis.

Con varias líneas, se vería algo así:

Praesent purus velit, pharetra at dictum ac, ornare vitae lectus. Cras libero lorem, rutrum fermentum elementum nec, ultrices vel odio?

Donec consequat porttitor fringilla. In nec odio quis elit vehicula aliquet ac in enim.

Si las cosas son más complicadas, nada impide usar una tabla:

<table style="margin: 0 auto; padding: 10px; width: 500px;">
<tbody>
  <tr>
    <td> ... un texto corto ... </td>
    <td> <img src="unaImagenGrande" /> </td>
    <td> ... un texto largo ... </td>
    <td> <img src="otraImagenPequeña" /> </td>
  </tr>
</tbody>
</table>

Nulla a risus in diam gravida mollis in sed velit.

Donec consequat porttitor fringilla. In nec odio quis elit vehicula aliquet ac in enim. Nam sit amet purus non sapien imperdiet consectetur sed vel ligula. Donec libero dui.

En los navegadores modernos, incluyendo IE8, hay una posibilidad extra, el uso de la propiedad display con valores denominados table y table-cell. Vamos a crear unas definicones de estilo para no escribir mucho:

<style>
  #mitablita {display: table; margin: 0 auto; width: 500px;}
  #mitablita p {display: table-cell; padding: 5px; vertical-align: middle;}
</style>

<div id="mitablita">
  <p> ... un texto corto ... </p>
  <p> <img src="unaImagenGrande" /> </p>
  <p> ... un texto largo ... </p>
  <p> <img src="otraImagenPequeña" /> </p>
</div>

Nulla a risus in diam gravida mollis in sed velit.

Donec consequat porttitor fringilla. In nec odio quis elit vehicula aliquet ac in enim. Nam sit amet purus non sapien imperdiet consectetur sed vel ligula. Donec libero dui.

CSS

jotabl: Otra forma de integrar Twitter al blog

jotabl es un servico que integra Twitter con nuestro blog, permitiendo que los visitantes se comuniquen en tiempo real, ya sea, dejando mensajes que se publican en sus respectivas cuentas o bien usando la direccion URL de nuestra aplicación.

No tiene muchas opcones así que es muy simple de agregar, basta ir a Get Started, loguearse de manera segura en Twitter, autorizar el acceso, ingresar una dirección de email y la dirección del sitio donde vamos a agregar la aplicación.

Si queremos, podemos personalizarlo un poco (no demasiado), definiendo colores y estableciendo algún tipo de filtro. Una vez creada nuestra cuenta, accediendo a jotabl podremos tener alguna clase de control sobre los mensajes enviados e incluso, bloquear usuarios.

Para integrarlo, basta agegar el código que nos dan, allí donde querramos que se muestre:

<iframe src="http://jotabl.com/XXXX" width="265" height="395" frameborder="0" scrolling="no"><a href="http://jotabl.com/XXXX">Visit our shoutbox</a></iframe>

REFERENCIAS:wwwhatsnew.com

Twitter

Aspiraciones

Click para ampliar.

imagenes

Efectos para oscurecer e iluminar las ventanas

Esta es otra entrada a modode respuesta. Esta vez es Alex quien consulta por un efecto que oscurece la pantalla, dejando ciertos elementos visibles, algo que puede utilzarse, por ejemplo, para resaltar los videos.

Para que funcione necesitamos JavaScript y si bien podría ser posible hacerlo sin librerías adicionales, lo mejor es emplearlas para que el efecto sea más interesante. Vamos entonces a ver ejemplos tanto para JQuery (que son los scripts originales) como para Prototype + Script.aculo.us.

Para el primer ejempo usaremos jQuery así que debemos tener cargada la librería y luego, el script cuyo contenido se encuentra en este archivo de texto

. Por último, las definciiones de CSS. Colocamos todo eso antes de </head>:

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

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#lightsoff-background  {
height: 100%;
left: 0;
margin:0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 20;
}
</style>

Para utilizarlo en cualquier parte de nuestro blog, simplemente, agregamos un enlace de este modo:

<div id="lightsoff"><a href="#"> texto o imagen </a></div>

Un ejemplo online de esto, puede verse AQUÍ; oprimiendo el botón, la pantalla se oscurecerá dejando visible el video y haciendo click en cualquier parte de la pantalla, resturaremos la página a su estado original.

El segundo ejemplo también requiere jQuery y es una idea de Emanuele Feronato. Como en el caso anterior, requerimos tener la librería, el script cuyo contenido está en este archivo de texto

y las definiciones de CSS, todas ellas las colocamos antes de </head>:

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

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

<style>
#the_lights{
background-color: #000;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#standout{
background-color: white;
padding: 5px;
position: relative;
z-index: 1000;
}
</style>

Por último, requerimos agregar un DIV extra en nuestro sitio así que lo agregamos al final, justo antes de </body>:

<div id='the_lights'></div>

A diferencia del caso anterior, lo que hace este script es preservar un área y oscurecer el resto; lo utilizamos de modo similar al anterior pero, en este caso, hay tres botones que sirven de enlace que colocamos dentro de un DIV donde también colocaremos todo eso que queremos resaltar:

<div id = "standout">
<div id="turnoff"> LUCES NO </div>
<div id="soft"> A MEDIA LUZ </div>
<div id="turnon"> LUCES SI </div>
... y aquí ponemos lo que queremos que sea visible, por ejemplo un video ...
</div>

El ejemplo puede verse AQUÍ; y allí, son esos tres botones los que controlan la opacidad del la ventana.

Por último, si lo que usamos es Prototype + Scriptaculous, la solución es un poco menos profesional pero, se me ocurrió que podría hacerse de modo similar, mezclando un poco de las dos anteriores. Agregamos el script que puede descargarse desde este archivo de texto

. También lo ponemos antes de </head>:

<script type='text/javascript'>
//<![CDATA[
... y aquí pegamos el contenido del archivo de texto ...
//]]>
</script>

Allí veremos tres funciones:

function getPageSize() es la misma que se usa para el primer ejemplo y es la que nos permite calcular la altura de la ventana a oscurecer
function lightsOFF() es la función que oscurecerá la pantalla
function lightsON() es la función que restaurará la pantalla

Luego, el estilo CSS:

<style>
#OSCURECER { /* este es el div inferior, que ocupará toda la ventana */
background-color:#000;
opacity:0.9;
filter:alpha(opacity=90);
position: absolute;
margin:0;
padding: 0;
z-index: 20;
left: 0;
top: 0;
}
#lightsONOFF { /* este es el enlace que eprmutará el estado de esa ventana */
display: block;
opacity: 1 !important;
filter:alpha(opacity=100);
position: relative;
z-index: 30 !important;
/* cualquier propiedad de estilo */
}
object,embed {
opacity = 1 !important;
filter:alpha(opacity=100);
}
</style>

Como en el segundo caso, agregaremos un DIV al final de nuestro sitio, antes de </body>:

<div id='OSCURECER' style='display:none;'/>

Y lo uilizaremos creando un enlace así:

<a href="javascript:lightsOFF();" id="lightsONOFF"> APAGAR LAS LUCES </a>

Al hacer click en ese enlace, se ejecutará la función lightsOFF() y allí, se establecerán las propiedades CSS faltantes del DIV OSCURECER que estaba oculto (width y height) y se lo mostrará, usando Effect.Appear. Además, cambiaremos el atributo href del enlace llamado lightsONOFF para que podamos restaurar la ventana y su texto.

La función lightsON() hace lo contrario, restaura la ventana con Effect.Fade ocultando el DIV y vuelve a cambiar el atributo href y el texto del enlace lightsONOFF.

Este es el ejemplo que puede verse funcionando en esta entrada.

APAGAR LAS LUCES

JavaScript

Detectar el navegador de los visitantes

En principio, detectar el navegador que utiliza un visitante es sencillo si se usa JavaScript; por lo general, cualquier ejemplo que vemos en la web se limita a determinar si se una Internet Explorer o no y para eso, basta que verifiquemos un dato llamado navigator.appName por ejemplo, algo así:

<script>
  var NAV = navigator.appName;
  if (NAV=="Microsoft Internet Explorer") {
    ... está usando Internet Explorer y hacemos algo ...
  } else {
    ... está usando cualquier otro navegador ...
  }
</script>

navigator.appName:

¿Que hacer con eso? Dependerá de cada uno. Como esta entrada tiene como fin tratar de responder la pregunta de Lagarto y su intención es detectar el navegador de nuestros lectores y si usan IE sugerirles que usen otros; ese tipo de script sería suficiente

¿Cómo mostrarlo? hay muchas formas y lo más sencillo, sería colocarlo en un elemento HTML; por ejemplo:

<script>
  if (navigator.appName=="Microsoft Internet Explorer") {
    document.write("Estás usando Internet Explorer blabla blabla un texto cualquiera")
  }
</script>

Pero, ese no es el único dato accesible, el objeto navigator tiene muchas más propiedades y eso que, en algún tiempo fue suficiente, hoy ya no lo es así que si queremos detectar el navegador correctamente, hay otros datos que deberíamos leer; por ejemplo:

navigator.appCodeName nos devuelve el nombre real:

navigator.appCodeName:

navigator.appVersion la versión:

navigator.appVersion:

y sobre todo, navigator.userAgent que nos devuelve un texto bastante largo con la información completa:

navigator.userAgent:

Es esta última la que permite el control más riguroso pero es muy larga así que simplemente, vamos a verificar si dentro de ella hay algún texto específico; podemos buscar:

MSIE para detectar Internet Explroer
Firefox para detectar Firefox
Chrome para detectar Google Chrome
Opera para detectar Opera

y así seguimos, incluso, podemos detectar móviles como iPhone o Android.

La estructura elemental podría ser algo así:

<script>
  var navegador = navigator.userAgent;
  if (navigator.userAgent.indexOf('MSIE') !=-1) {
    document.write('está usando Internet Explorer ...');
  } else if (navigator.userAgent.indexOf('Firefox') !=-1) {
    document.write('está usando Firefox ...');
  } else if (navigator.userAgent.indexOf('Chrome') !=-1) {
    document.write('está usando Google Chrome ...');
  } else if (navigator.userAgent.indexOf('Opera') !=-1) {
    document.write('está usando Opera ...');
  } else {
    document.write('está usando un navegador no identificado ...');
  }
</script>

Llegado el caso, si lo que nos interesa es detectar sólo un navegador como Internet Explorer, también podemos hacerlo con CSS tal como se muestra en una vieja entrada aunque ese método no funcionará en Opera.

JavaScript

Acrobots again

Acrobots no es un juego pero es un juguete. Una forma de perder el tiempo (o de ganarlo).

Esta es la nueva versión de vectorpark.com donde también pueden verse muchas otras de sus ... bueno, lo que sean: Spider, Park, Feed the head o Park.