Consejos Blogger

viernes, 2 de diciembre de 2011

Miles de Imágenes Gratis para Descargar

No se si ya la conozcas, pero hay una página de Microsoft en donde puedes buscar entre miles de imágenes y están listas para ser descargadas. Entre ellas fotografías, fondos, marcos para fotografías, bordes, animaciones, etc.

También tienen plantillas para targetas, invitaciones, calendarios, currículos, entre otras, y puedes abrir y personalizar por medio de sus distintos programas como Word o Excel; en cada plantilla se especifica el programa que necesitas.

Si no lo has hecho, echa un vistazo, hay muchas cosas interesantes ;)

Enlace| Microsoft Office

Solucionar el alto de los contenedores con flotación

¿Te haz fijado que al usar el atributo "float" en algún contenedor dentro de otro se deforma el que lo contiene?
Esto pasa lamentablemente muy seguido, y es importante saber el por qué. Si estás empezando a crear tus propias plantillas es mejor que lo manejes y sepas como enfrentante a este error que te hará perder demasiado tiempo y paciencia.

Para que se entienda mejor el error basta con observar el siguiente ejemplo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra.

Como es posible apreciar, cada contenedor está alineado hacia una dirección, pero esto afecta al que se los incluye (No se respeta el alto del contenido). Además, algo que no se puede percibir es que deforma el contenido externo también, lo que se encuentra debajo del contenedor también se verá afectado, yo lo corregí parcialmente para que no me deformara la entrada, pero básicamente ese es todo el error.

¿Cómo corregir este problema?

Para ello usaremos el atributo clear, el cual nos permite corregir cada elemento y evitar que se sobrepongan unos de otros.

Observemos el código fuente:

<div id="contenedor-general-ejemplo">
   <div class="elemento-izquierda">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
       Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
       posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
       Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
       pharetra.
   </div>

   <div class="elemento-derecha">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
           Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
           Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
           posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
           Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
           pharetra.
   </div>
</div>

Ahora su hoja de estilos:

#contenedor-general-ejemplo {
width:80%;
background:#222;
padding:10px;
margin:0 auto;
}

.elemento-izquierda {
background:orange;
color:white;
width:40%;
float:left;
padding:5px;
}

.elemento-derecha {
background:#be4545;
color:white;
width:40%;
padding:5px;
float:right;
}

No hay ningún problema, todo está correctamente atribuído, pero el error siempre estará.

El elemento clear es un atributo que se encarga de despejar un elemento con flotación, se utiliza un contenedor con este elemento y se asigna en la parte inferior dentro del que queremos corregir, es decir:

<div id="contenedor-general-ejemplo">
   <div class="elemento-izquierda">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
       Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
       Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
       posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
       Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
       pharetra.
   </div>

   <div class="elemento-derecha">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
           Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing.
           Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
           posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl.
           Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing
           pharetra.
   </div>
<div style="clear:both;" />
</div>

Ahora veamos cómo se comporta:

El clear se añade a un elemento extra, NO a los contenedores que existen. Lo que hace el clear:both es hacer que esa capa tenga un despejamiento y el contenedor general podrá detectarlo.

¿Cómo insertarlo?

En el ejemplo mostré una sóla forma, pero puedes hacerlo de 2 formas (Obviando el atributo con javascript):

Método 1: Creando la clase "clear":

Este método consiste en crear una class llamada .clear, y a esta deberás aplicarle el atributo clear:both, para ello hazlo de la siguiente forma:

.clear {clear:both;}

Ahora para usar un clear, lo haces de la siguiente forma:

<div class="clear" />

Nota: El primer código va antes de ]]></b:skin>

Método 2: Usando un div con la tag style:

Este método es igual de sencillo que el anterior, pero para los que les sea mas cómodo usar los atributos dentro del div puede ser mas útil:

<div style="clear:both;" />

Extensión y botón de Buffer para hacer más fácil programar tweets

Buffer, el servicio que nos permite programar la publicación de tweets posee una extensión para Chrome que nos hace la tarea más fácil. Al instalar la aplicación, te genera un icono en la barra de tarea que solo tendrás que pulsar para compartir la pagina que estas visualizando a la hora que tengas programado en tus opciones de Buffer.

También han lanzado un botón que puedes insertar en cualquier página web para facilitar a los usuarios compartir inmediatamente o programar un tweet.

jueves, 1 de diciembre de 2011

Scriptaculous sliders demos

Un slider es un control que permite "mover" cosas. Lo hemos visto muchas veces, por ejemplo, son lo que manejan el volumen de un video o audio y agregarlos a una web no es sencillo así que las librerías de JavaScript suelen incluir funciones especiales para que, manipularlos, se algo un poco menos dramático.

En script.aculo.us Slider Demos hay varios ejemplos de su uso que no es mucho y, tal vez, los más interesantes son aquellos que utilizan imágenes que sirven como botones para desplazarse.

<style>
  #track1-left { /* el límite izquierdo */
    background-color: #BDB76B;
    height:  12px;
    position:absolute;
    top:- 5px;
    left: 0;
    width: 1px;
  }
  #track1-right { /* el límite derecho */
    background-color: #BDB76B;
    height: 12px;
    position: absolute;
    top: -5px;
    left: 199px;
    width: 1px;
  }
  #track1 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track1" style="width:200px; height:2px;">
    <div id="track1-left"></div> <!-- el limite izquierdo -->
    <div id="track1-right"></div> <!-- el limite derecho -->
    <!-- el botón con la imagen -->
    <div id="handle1" style="width:15px; height:20px;">
      <img src="URL_slider" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle1', 'track1', { 
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

<style>
  #track2-top { /* el límite superior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 0;
    width: 12px;
  }
  #track2-bottom { /* el límite inferior */
    background-color: #BDB76B;
    height: 1px;
    left: -5px;
    position: absolute;
    top: 199px;
    width: 12px;
  }
  #track2 { /* el área de desplazamiento */
    background-color: #BDB76B;
  }
</style>

<div style="position:relative;">
  <!-- el slider -->
  <div id="track2" style="width:2px; height:200px;">
    <div id="track2-top"></div> <!-- el limite superior -->
    <div id="track2-bottom"></div> <!-- el limite inferior -->
    <!-- el botón con la imagen -->
    <div id="handle2" style="width:19px; height:15px;">
      <img src="URL_slider.gif" style="float: left;" />
    </div>
  </div>
</div>

<script>
  new Control.Slider('handle2', 'track2', {
    axis: 'vertical',
    onSlide: function(v) {
      // se detecta que se desplaza
    }, 
    onChange: function(v) {
      // se detecta que cambió de posición
    } 
  });
</script>

Complicadito ... en fin, no es algo que tenga mucho uso; tal vez, una posibilidad interesante es la de poder cambiar las barras de desplazamiento que se ven en en cualquier elemento al que hemos dimensionado y cuyo contenido es muy grande. En Internet Explorer, las barras de desplazamiento pueden ser personalizadas utilizando CSS pero, lamentablemente, no pasa lo mismo en otros navegadores.

Phasellus nec urna nulla, quis cursus ante. Nullam luctus dapibus auctor!
Aliquam odio purus, tempus eu gravida vel, scelerisque quis mauris.
Vivamus viverra convallis lectus ut porttitor.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque hendrerit sollicitudin elit, vitae venenatis arcu imperdiet nec.
Suspendisse sit amet lorem tortor.
Nulla congue porttitor leo, ac porttitor purus ultricies id?
Aliquam erat volutpat.
Sed ut magna sed tellus euismod lacinia eu at turpis.
Quisque risus arcu, sodales vitae sodales vitae, venenatis vitae diam.
Aliquam sagittis, quam ultrices interdum pulvinar, arcu purus ullamcorper erat, et aliquet sapien magna a velit!
Praesent vehicula risus eu est congue et vulputate ante egestas.
Aliquam posuere.

Usando Prototype + Scriptaculous y su plugin Slider que ya se carga de modo predeterminado si es que utilizamos las librerías de Google, es posible generar ese tipo de barra personalizada ... aunque no se si valdrá la pena.

De todos modos, acá hay un ejemplo:

<style>
  #scrollable2 {
    border-top: 2px solid #BDB76B;
    border-left: 2px solid #BDB76B;
    height: 120px;
    overflow: hidden;
    white-space: nowrap;
    width: 260px;
  }
  #wrap3 {
    border-left: 2px solid #BDB76B;
    height: 122px;
    left: 262px;
    position: absolute;
    top: 0;
    width: 10px;
  }
  #track3 { height: 120px; position: absolute; width: 15px; }
  #handle3 { height: 15px; width: 19px; }
  #wrap4 {
    border-top: 2px solid #BDB76B;
    height: 15px;
    left: 0;
    position: absolute;
    top: 120px;
    width: 262px;
  }
  #track4 { height: 10px; position: absolute; width:260px; }
  #handle4 { height:20px; width:15px; }
</style>

<div style="position:relative;">
  <div id="scrollable2">
    ....... acá colocaremos el contenido a mostrar  .......
    <div id="wrap3">
      <div id="track3">
        <div id="handle3"><img src="URL_imagen_slider_vertical" /></div>
      </div>
    </div>
    <div id="wrap4">
      <div id="track4">
        <div id="handle4"><img src="URL_imagen_slider_horizontal" /></div>
      </div>
    </div>
  </div>
</div>

<script>
  var slider3 = new Control.Slider('handle3', 'track3', {
    axis: 'vertical',
    onSlide: function(v) { scrollVertical(v, $('scrollable2'), slider3); }, 
    onChange: function(v) { scrollVertical(v, $('scrollable2'), slider3); }
  });
  var slider4 = new Control.Slider('handle4', 'track4', {
    onSlide: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); },
    onChange: function(v) { scrollHorizontal(v, $('scrollable2'), slider4); }
  });
  function scrollVertical(value, element, slider) {
    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
  }
  function scrollHorizontal(value, element, slider) {
    element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
  }
  if ($('scrollable2').scrollHeight <= $('scrollable2').offsetHeight) {
    slider3.setDisabled();
    $('wrap3').hide();
  }
  if ($('scrollable2').scrollWidth <= $('scrollable2').offsetWidth) {
    slider4.setDisabled();
    $('wrap4').hide();
  }
</script>

Internet está cambiando, ¿quién será el próximo .algo?

Actualmente las direcciones web terminan con extensiones conocidas como .com o .net. Esto muy pronto va a cambiar y podría haber cientos de extensiones disponibles por Internet que constarían de un punto y algo más; pero ¿por qué cientos de extensiones?, bueno, esto se debe a un nuevo programa de la ICANN, con el cual marcas y organizaciones podrán adquirir los llamados dominios genéricos de primer nivel o gTLDs como lo son por ejemplo .com y .org.

Actualmente solo hay 22 dominios genéricos o gTLDs, prepárate para ver por la red cientos o quizás miles de extensiones nuevas o dominios genéricos de primer nivel.

Adquirir y operar un negocio de TLD , pudiera ser muy lucrativo, ya que un comprador pudiera ofrecer a la venta registros de dominios de segundo nivel y venderlos al precio que elija, aunque también puede solo otorgarlos.

¿Será que próximamente en lugar de ser .blogspot.com seamos .blogger? o ¿.google?, pues quien sabe, para saber eso, habrá que esperar.

Pues si ya hay interesados, tu marca deberá contar con un buen capital, ya el costo de un gTLD según explican, será de unos 185,000 dólares estadounidenses o más y es un proceso que requerirá una evaluación por parte de la ICANN y que pudiera tardar varios meses.

Estos cambios seguramente los veremos hasta el 2013, ya que desde enero hasta abril del 2012 empezarán a recibirse las solicitudes, y un gTLD nuevo no estará disponible para los usuarios de Internet hasta un año después de que se acepte la solicitud, según explican.

Pero mejor veamos este interesantísimo video creado por la ICANN, donde explican claramente como funcionan los nombres de dominio, y cuales serán los cambios importantes que veremos muy próximamente por Internet y lo que esto implica ;)

Visto en | Conversaciones en linea con Lito Ibarra

Facebook, solo un 7% genera contenido diariamente y porque van a sacar su propio teléfono

La Jefe de Operaciones de Facebook, Sheryl Sandberg, ha dado esta mañana una conferencia en Nueva York donde ha dejado caer algunos detalles que nos han llamado la atención, leyendo entrelineas podemos saber porque Facebook quiere sacar su propio teléfono y un dato sorprendente solo un 7% de usuarios genera contenidos diariamente como media.

Cuando le han comentado sobre la posibilidad de que Facebook sacara su propio teléfono ha contestado que lo que querían era asegurarse de que los usuarios pudieran compartir y subir fotos a Facebook

"Si usted compra un teléfono, usted debería ser capaz de compartir fotos y subir tus fotos a Facebook, nos preocupamos de que Android funciona y haga eso"

Están en conversaciones con los fabricantes de teléfonos para asegurarse que la aplicación de Facebook para hacerlo funciona correctamente, pero vemos que habla claramente de Android y además, cuando le han insistido, ha comentado

"Android ha hecho un compromiso público de apertura, y queremos ver que el compromiso se mantiene"

esta muy claro que no se fían de Android, es decir de Google y de ahí su intención de sacar su propio teléfono aunque eso no lo haya admitido, si contesto, sin embargo, que se querían asegurar que todos los usuarios pudieran compartir y subir fotos a Facebook.

La otra cosa que nos llama la atención es la cifra que ha dado sobre la generación de contenidos, solo un 7% de usuarios, 35 millones, realizan esta acción de media. •5 millones puede parecernos mucho pero si vemos su número de usuarios, 800 millones, es una cifra muy baja ¿que hace la gente en Facebook si no actualiza su muro?

Este dato provoca que nos volvamos a hacer la misma pregunta ¿es Facebook una red social o una plataforma de juegos?

Quien esta usando Google Plus

Flowtown ha publicado esta infografía con interesantes datos demográficos de Google+.