Yo Soy Libre: Tu portal de Divx

Yo soy libre es una especie de clon de menéame. Una comunidad de DivX online, totalmente libre, sin publicidad y sin necesidad de registrarse desde donde podemos ver y descargar películas.

Yo no soy un delincuente por no pagar
Yo decido que aparece en portada
Yo no acepto publicidad intrusiva
Yo no quiero ni registros ni spam
Yo Soy Libre, tu portal de divx…

Podemos encontrar Películas, Series, Anime, Películas Subtituladas, Series Subtituladas, Anime Subtitulado, Documentales y Videoclips.

El sitio recién está en comienzos pero es una iniciativa para aplaudir.

REFERENCIAS:

MicroZulo

Las propiedades CSS que permiten posicionar un elemento en un lugar distinto al que naturalmente le corresponde son left y top pero, para que funcionen, debemos también el valor de la propiedad position como absolute o relative.

Lo habíamos visto, un código como este:

<img style="position: relative; left: 50px; top: 80px;" src="imagen" />
<div style="background-color: LightSteelBlue; color: black;">Lorem ipsum dolor sit ...</div>

Genera esto:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

La imagen que, normalmente estaría arriba a la izquierda, se desplaza y, queda arriba del DIV.

Pongamos más elementos, por ejemplo, cuatro imágenes con diferentes parámetros:

<img src="imagen_1" style="position: relative; top: 50px; left: 20px;"/>
<img src="imagen_2" style="position: relative; top: 60px; left: 50px;"/>
<img src="imagen_3" style="position: relative; left: 100px; top: -110px;"/>
<img src="imagen_4" style="position: relative; left: -30px; top: -180px;"/>

Las coordenadas left y top mueven la imagen pero la primera quedará debajo y la cuarta arriba, es decir, cada una de ella se superpondrá con la otra porque ese es el orden que le damos en el código. El navegador lee la primera, la muestra, lee la segunda, la coloca encima, y así sucesivamente. En términos simple, las apila; en términos sofisticados, les da un número de orden en el stack; un número menor implica una posición inferior (está abajo), un número mayor implica una posición superior (está arriba).

Esta posición puede ser modificada utilizando CSS, para eso, existe una propiedad específica llamada z-index y que, al igual que las otras, sólo funciona cuando se establece la propiedad position como absolute o relative.

Con esta propiedad, podemos determinar el orden en que se apilan los elementos y acepta valores tanto positivos como negativos:

Usemos el mismo código pero agreguemos valores la propiedad z-index a la imagen 2 para que aparezca por encima de las otras:

<img src="imagen_1" style="position: relative; top: 50px; left: 20px;"/>
<img src="imagen_2" style="z-index: 1; position: relative; top: 60px; left: 50px;"/>
<img src="imagen_3" style="position: relative; left: 100px; top: -110px;"/>
<img src="imagen_4" style="position: relative; left: -30px; top: -180px;"/>

¿Por qué un valor de 1? Simplemente porque si la propiedad no está establecida (si no la ponemos) no se tiene en cuenta, es como fuera cero.

Usemos dos imágenes y coloquemos el valor de z-index en ambas:

<img  src="imagen1" style="z-index:1; position: relative; top: 50px; left: 50px;" />
<img  src="imagen2" style="z-index:2; position: relative; top: 0px; left: 0px;" />

Y al revés:

<img  src="imagen1" style="z-index:2; position: relative; top: 50px; left: 50px;" />
<img  src="imagen2" style="z-index:1; position: relative; top: 0px; left: 0px;" />

Los valores del z-index pueden ser cambiados utilizando JavaScript utilizando cualquier evento:

onclick="getElementById('nombre').style.zIndex=valor;"

En este ejemplo, haciendo click sobre las mismas cuatro imágenes, la ponemos en primer plano:

¿Acaso con estas propiedades se podría construir un menú desplegable con sencillez?

• PRIMERO
  • Item 1
  • Item 2
  • Item 3
• SEGUNDO
  • Item 1
  • Item 2
  • Item 3
• TERCERO
  • Item 1
  • Item 2
  • Item 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Sólo un adelanto:

El código CSS:

<style type="text/css">
.demoLista {
  background-color: CornflowerBlue;
}
.demoLista ul {
  list-style: none;
  position: relative;
}
.demoLista ul li {
  display: inline;
  position: relative;
}
.demoLista ul li a {
  color: black;
  font-size: 16px;
  padding: 0 10px;
  text-align: center;
} 
.demoLista ul li ul {
  background-color: RoyalBlue;
  border: 1px solid #6495ED;
  display: none;
  left: 0px;
  position: absolute;
  top: 8px;
  width: 120px;
}
.demoLista ul li:hover ul {
  display: block;
}
.demoLista ul li ul li {
  color: white;
  display: block;
  padding: 2px 10px;
}
</style>

El código HTML:

<div class="demoLista">
  <ul>
    <li>
      <a href="javascript:void(0);">PRIMERO</a>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">SEGUNDO</a>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">TERCERO</a>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </li>
  </ul>
</div>

Nadie duda que el pez grande se come al chico. De lo que dudo es de tanta información:

En Infobae:

1. Microsoft pedirá un préstamo para comprar Yahoo!
2. Google quiere frenar la venta de Yahoo!
3. Despido masivo en Yahoo!
4. Yahoo analiza la oferta de Microsoft por u$s44.600 M
   

En google.dirson:

• Google tiene miedo de la adquisición de Yahoo! por parte de Microsoft
• Ya es oficial: Microsoft se hará con Yahoo! para competir con Google
  

En todos lados:

• Yahoo! adquiere FoxyTunes
• Could Google Save Yahoo from Microsoft?
  

Mientras tanto, algunos usuarios de Flickr se rebelan en un mural:

MICROSOFT: KEEP YOUR EVlL GRUBBY HANDS OFF OF OUR FLICKR

En CSS, las propiedades left y top controlan la posición de los elementos y con ellas podemos modificar los valores que se establecen por defecto. Para que funcione, sólo se requiere una cosa: debe agregarse la propiedad position. Esta, puede tener el valor static (ninguna en especial), absolute (se refiere a la posición con respecto al elemento contenedor) o relative que indica la posición relativa a la que ocupa el elemento en si mismo y que, por defecto es left:0 y top:0.

Es más simple de lo que parece. Veamos este código:

<img src="imagen1"/>
<div style="background-color:LightSteelBlue;color:black;">contenido</div>

Mostará la imagen arriba y un recuadro con texto abajo de ella:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

La posición se dice relativa al lugar en donde el elemento se ubica por defecto y es su coordenada superior izquierda. Quiere decir que si queremos que, en lugar de aparecer donde se muestra normalmente, la queremos poner más abajo y a la izquierda, bastaría establecer esas propiedades con el valor respectivo:

El código sería este:

<img style="position: relative; left: 100px; top: 80px;" src="imagen1"/>
<div style="background-color: LightSteelBlue; color: black;">contenido</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Establecimos la posición de IMG como relativa para poder "moverla" pero, ¿qué pasa si el DIV también tiene la propiedad position?:

<img style="position: relative; left: 100px; top: 80px;" src="imagen1"/>
<div style="position: relative; background-color: LightSteelBlue; color: black;">contenido</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

Si ambos elementos tienen la propiedad relative, se muestran como lo harían normalmente, siguiendo el orden en que fueron creado: se pone la imagen, se mueve, se pone el bloque de texto, como la imagen está abajo, queda semi-tapada. Si sólo el elemento que vamos a re-posicionar posee esa propiedad relative, tiene "prioridad" sobre los otros y, por lo tanto, aunque se haya dibujado primero, aparece en primer plano, por delante del texto.

El valor puede ser expresado en diferentes unidades (cm, mm, in, pt, pc, px, em, ex) o como porcentajes (%) y pueden ser valores positivos o negativos.

Para ponerse a escribir algo en el blog, es ...

No. ¿A ver? ... mmm ... Escribir no es ... ¿es o no es? ¡Se pueden callar que no me puedo concentrar!

Es así. No siempre pero generalmente es así. Escribir requiere pensar, organizarse, tener un mínimo de continuidad. Dejar una frase a la mitad para salir corriendo a contestar el teléfono es lo mismo que no empezarla. Al volver, ya no sabemos que estábamos intentando decir. Suele pasarme que, cuando me levanto para hacer otra cosa, se me ocurren las frases justas y cuando vuelvo, ya las olvidé; con suerte, me quedó la idea dando vueltas pero no logro expresarlas como las imaginé. De alguna manera, el teclado inhibe, es un ogro celoso que siempre quiere más y más.

Lo mejor, en todos los casos sería relajarse y tratar que el mundo dejara de girar por un rato pero, es imposible así que sólo nos resta seguir algunos de los consejos de Kabytes para evitar las distracciones:

• Cerrar todos los programas de mensajería: nada de "no disponible", "no estoy" o "salí a comer"; cerrarlos completamente.
• Cerrar los programas de email: el cartelito "tienes un nuevo correo" es demasiado tentador ¿Quién será? ¿quién será? ¿quién será?
• Música pero con auriculares: el mundo no se detiene pero queda en estado de letargo. El volumen, lo más alto posible mientras que no nos taladre el cerebro y sólo podamos escribir la-la-la-la pirí-pirí-pirí.
• Lectores de feeds afuera: no hay noticias de último momento que valgan la pena leer. Si un meteorito va a destruir el mundo, ya nos enteraremos mañana y si Apple sacó un nuevo I-algo, no podremos comprarlo.
• Gadgets en el cajón: alejarse de celulares, Palms y cualquier otro aparatejo. Es recomendable colocarlos en un cajón, en otro cuarto, en otra casa, en otra ciudad.
• Un ambiente de trabajo ordenado: bueno ... eso ya es mucho pedir.
  

Una vez que todo eso está listo, sólo resta empezar ... mmm




¿Qué estaba diciendo? No me acuerdo; lo mejor será seguir otro día, tanta concentración me desconcentra.

Todos los elementos de una página web son rectángulos. Cuando agregamos alguno, lo que hacemos es decirle al navegador que cree un área rectangular con un cierto contenido. Algunos de esos elementos son bloques, es decir, se separan del elemento inferior con un salto de línea (se apilan) y otros no lo son (inline), no se separan, se colocan uno al lado del otro.

Por ejemplo, si agregamos dos imágenes y escribimos:

<img src="imagen1" /><img src="imagen2" />

Se mostrarán una al lado de la otra porque IMG es un elemento inline.

Sin embargo, si colocamos cada una dentro de un DIV, se mostrarán una debajo de la otra porque DIV es un elemento de tipo block.

<div><img src="imagen1" /></div><div><img src="imagen2" /></div>

Usando la propiedad display, podemos establecer el comportamiento de un elemento así, que, podríamos hacer que una etiqueta que normalmente es inline se comporte como block:

<img style="display:block;" src="imagen1" /><img style="display:block;" src="imagen2" />

Y viceversa:

<div style="display:inline;"><img src="imagen1" /></div>
<div style="display:inline;"><img src="imagen2" /></div>

Esto no es cierto, puede decir alguien; puse dos imágenes comunes y sin agregar propiedades, aparecieron una debajo de otra ¿hay algún un error?

No, no es un error, lo que ocurre es que, si el espacio necesario para contener ambas imágenes es menor que la suma del ancho de las mismas, el navegador empuja la segunda hacia bajo.

Veamos una simulación de ejemplo. Estas dos imágenes tienen 120x90 pixeles. Las coloco dentro de un bloque DIV que tiene 400 pixeles de ancho con un código así:

<div style="width:400px;">
<img src="imagen1" /><img src="imagen2" />
</div>

Ahora, voy a hacer lo mismo pero el bloque DIV será más chico, digamos 200 pixeles de ancho:

<div style="width:200px;">
<img src="imagen1" /><img src="imagen2" />
</div>

Como la segunda no tiene lugar, se desplaza hacia abajo:

Pero ¿y si quiero que se superpongan? ¿acaso en una página web dos elementos pueden ocupar el mismo espacio contradiciendo las leyes de la física? La respuesta es sí. En CSS hay propiedades que controlan la posición de los elementos; para eso, primero lo debemos indicar agregando position:relative; y luego, con las propiedades left y top podemos modificar la posición ... pero eso será mañana.