shareNice: Una alternativa para compartir entradas

shareNice se presenta como una variante del gadget AddThis con la diferencia de ser de código abierto lo que permite descargarlo y usarlo libremente aunque esto no es necesario ya que también es posible utilizar el script que ellos proveen y por lo tanto, no necesitamos hacer ningún tipo de instalación extra.

La idea es permitir que cada usuario lo adapte a sus necesidades o gustos personales de manera sencilla y, de ese modo disponer de un botón genérico para compartir entradas en las redes sociales.

Hasta ahí todo parece bien y es una alternativa razonable ya que es mucho más flexible que otros sistemas y mucho menos intrusivo pero ... cuando uno trata de probarlo, algo parece fallar en alguna parte; incluso, en algunos de los sitios que ellos mismos sugieren ver para probar sus características, tampoco parece andar. Me da la impresión que lo han armado basándose en algún concepto de diseño erróneo o que no tiene en cuenta las distintas alternativas que puede tener una página web y por lo tanto, ciertas propiedades del CSS que utilizan hacen que las cosas se nos compliquen aunque, bastaría cambiar un par de detalles para hacerlo operativo. En realidad, desconozco si eso es un error en si mismo tal como imagino pero, como usuario, tampoco me importa a sí que me limito a tratar de solucionarlo porque la idea me sigue pareciendo interesante.

Lo usamos fácilmente, bastaría poner esto antes de </head>

<script src="http://sharenice.org/code.js" type="text/javascript"></script>

y luego, poner un DIV allí donde quisiéramos que se mostrara el botón:

<div id="shareNice"></div>

Así, sin opciones extras, veríamos el ícono y al poner el cursor encima, se mostraría la ventana con los íconos por defecto:

Lamentablemente, esa ventana se muestra en cualquier parte así que acá le he agregado dos reglas de estilo; en la primera, le agrego position:relative porque la ventana modal con los íconos tiene definida una posición absoluta y por lo tanto, se abrirá en cualquier parte, dependiendo de cuál sea el contenedor; también le agrego display: inline-block pra que no ocupe todo el ancho y que pueda alinearse con otros contenidos; la segunda regla, cambia las posiciones absolutas de tal modo que la ventana se abra encima del botón:

<style>
  #shareNice {
    display: inline-block  !important;
    position: relative;
  }
  #shareNice-wrapper {
    left: 0 !important;
    top: -35px !important;
  }
</style>

allí, con distintos valores de left y top, podemos ubicarla donde nos guste, teniendo en cuenta que la posición 0 0 es el botón en si mismo.

Ahora, las opciones que se agregan como atributos en el DIV:

data-services es la lista de los dominios de las redes sociales que queremos incluir y se separan con comas
data-share-label nos permite establecer el texto a mostrar o no poner ninguno
data-color-scheme define el color base y puede ser black, blue, green, orange, pink, red o cualquier otro color
data-icon-size es el tamaño el botón y puede ser 16 o 32
data-panel-bottom es el logo inferior, si no queremos que se ve, ponemos plain
data-share-zindex solo lo usaremos para colocar un valor en la propiedad z-index si es que se requiere

Aquí hay un ejemplo concreto:

<div id="shareNice" data-share-label="" data-color-scheme="black" data-icon-size="16" data-panel-bottom="plain" data-services="blogger.com,email,evernote.com,facebook.com,google.com,linkedin.com,plus.google.com,stumbleupon.com,www.tumblr.com,twitter.com">
</div>

¿Cuáles son los dominios a poner? ¿Dónde está la lista? Acá algunos de los que encontré y vi que funcionaban; hay más pero los desconozco:

bit.ly,blogger.com,delicious.com,digg.com,email,evernote.com,facebook.com,google.com,linkedin.com,myspace.com,plus.google.com,reddit.com,stumbleupon.com,www.tumblr.com,twitter.com

Transiciones y paneles deslizantes

Aunque es algo experimental, la idea del diseñador Sergio Camalich es válida y tal vez muestre una alternativa en el uso de las transiciones entre páginas usando sólo CSS sobre la que habrá que seguir trabajando.

Los ejemplos pueden verse en estos demos 1 2 3 y acá veremos si son aplicables a una entrada cualquiera del blog con las limitaciones del caso.

En este ejemplo, coloco todo en un DIV al que debo darle una dimensión precisa; en el ejemplo original eso se resuelve agregando overflow: hidden al body de la página y haciendo que la página tenga siempre una altura precisa de tal modo que no se vea el efecto indeseado del salto que se produce cuando se usa target, algo que acá es inevitable (o no tengo la menor idea si hay alguna forma de evitarlo).

inicio

Nunc nulla purus, malesuada ut vehicula et, suscipit sit amet eros? Duis lacinia luctus erat; nec venenatis nibh lobortis in.

Morbi tempor quam ac nibh sollicitudin rutrum. Sed ornare pretium libero vel viverra. Pellentesque tincidunt purus nulla, ullamcorper mattis risus. Maecenas commodo; massa a adipiscing lacinia, arcu nibh vulputate turpis, sit amet tristique enim ligula sit amet quam. Sed id eros diam; nec sagittis nisl.

Praesent ultrices, dui at egestas dictum posuere.

Cras cursus nulla nec enim euismod posuere. Cras eu leo et lorem dignissim commodo non at enim. Quisque consequat nisl id metus tempor bibendum. Proin eget dolor turpis. Curabitur vitae est erat.

imágenes

• 
• 
• 
• 
• 
• 

otra más

Ut nec nibh quis sapien congue sagittis sit amet at lorem? Nam tellus purus; suscipit non imperdiet in, lobortis sed odio. Proin eget odio non nibh semper massa nunc.

última

Donec elementum scelerisque massa, at accumsan orci fringilla sed. Nunc sed leo at turpis consequat accumsan. Maecenas non augue ac felis varius facilisis. Pellentesque interdum pharetra vestibulum!

seleccionar

• inicio
• imágenes
• otra más
• última

El HTML tiene esta estructura:

<div id="pageTrans">

  <!-- el contenido de cada uno de los "paneles" -->
  <!-- el primero (el visible) es levemente distinto al resto -->
  <div id="panel1" class="content">
    <h4>PANEL 1</h4>
    <!-- cualquier contenido -->
  </div>

  <!-- los otros (los ocultos)  tienen la misma estructura -->
  <div id="panel2" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel3" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>
  <div id="panel4" class="panel">
    <div class="content"> <!-- cualquier contenido --> </div>
  </div>

  <!-- la navegación a la izquierda -->
  <div id="selector">
    <h5> seleccionar </h5>
    <ul id="navigation">
      <li><a id="link-panel1" href="#panel1"> texto 1 </a></li>
      <li><a id="link-panel2" href="#panel2"> texto 2 </a></li>
      <li><a id="link-about" href="#about"> texto 3 </a></li>
      <li><a id="link-contact" href="#contact"> texto 4 </a></li>
    </ul>
  </div>

</div>

Y ahora el CSS que es donde hay que trabajar y ersonalziar proque todo depende de esas reglas:

<style>
  #pageTrans { /* elcontenedor */
    height: 490px;
    margin: 0 auto;
    position: relative;
    width: 580px;
  }

  /* la navegación izquierda */
  #selector {
    position: absolute;
    top: 20px;
    width: 135px;
    z-index: 2000;
  }
  #selector h5 { /* el texto "seleccionar" del ejemplo */ }
  #navigation {
    display: block;
    list-style: none;
    margin: 10px 0 0;
    z-index: 3;
  }
  #navigation a {
    border: 1px solid #FFFF;
    box-shadow: 0 0 15px #FFF inset;
    color: #FFF;
    display: block;
    font-size: 16px;
    line-height: 45px;
    margin: 0 0 10px;
    padding: 0 10px;
    text-align: center;
    text-transform: uppercase;
  }
  #navigation a:hover { background: Crimson; }

  /* las reglas de los paneles */
  .content {
    left: 180px;
    position: absolute;
    top: 0;
    width: 400px;
  }
  .content h4 { /* el título de cada panel */ }
  .panel {
    -moz-transition: all 0.6s ease-in-out 0s;
    -webkit-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    background-color: #101921;
    height: 100%;
    margin-left: -610px;
    position: absolute;
    width: 580px;
    z-index: 2;
  }
  .panel:target { margin-left: 0px; }

</style>

Crear un instalador personal de Firefox

Firefox Addon Maker es un sotfware que nos facilita la instalación de Firefox, permitiéndonos crear un instalador personal que podría incluir todas las extensiones y plugins que normalmente usamos, así como los marcadores, contraseñas y la mayoría de las opciones de configuración que tengamos. De ese modo, las actualizaciones serán menos traumáticas y más rápidas.

La aplicación es portable por lo que no requiere instalación basta descomprimir el ZIP y usar el archivo exe.

Se nos abrirá una ventana con todas las opciones y allí seleccionaremos la versión a incluir que podemos no tener y se descargará desde Mozilla, el idioma y cualquier otro tipo de plugin. Si queremos usar los datos guardados, dejamos todo como está y si queremos crear un instalador limpio, podemos crear un perfil nuevo.

El resultado final, será otroa archivo Firefox_XX_es-ES_Silent.exe que estará alojado en al misma carpeta donde hayamos guardado el programa y que podemos usar cuando se nos ocurra.

REFERENCIAS:ghacks.net

Algunas librerías para manejar la etiqueta Canvas

Estas son algunas librerías que podrían ayudar a manejar la etiqueta canvas de modo más simple, entendiendo que simple no significa fácil.

EaselJS es una de las más completas y modernas, enfocada básicamente a la parte gráfica. En la página de los autores se pueden ver muchos demos online como este.

Artisan JS es más sencilla y las funciones son limitadas pero bastante intuitivas. Puede verse un ejemplo de su funcionamiento en este generador de wallpapers.

jCanvaScript provee muchos métodos y funciones que permite generr contenido en cualquier plataforma incluyendo móviles aunque, como en todos estos casos, para Internet Explorer se requieren librerías extras como ExCanvas. Incluye animaciones drag and drop y manejo de eventos tanto del mouse como del teclado.

Una forma sencilla de desplazarse con jQuery

Este sería un método genérico de agregar la posibilidad de animar el desplazamiento interno ha cualquier parte de una página web. En palabras simples, hacer click en alguna parte y que la página se mueva y nos ubique allí.

Hay muchos plugins de jQuery que lo hacen pero para un uso normal, suelen ser excesivos porque están pensados para adaptarse a situaciones y necesidades diversas y, al final de cuentas, uno siempre los usa de modo bastante más elemental.

¿Cómo hacer esto? Basta saber dos cosas: la posición de la etiqueta donde se hace click y la posición de la etiqueta a donde queremos ir; luego, bastaría usar la propiedad scrollTop para mover la página esa distancia.

Por ejemplo, este enlace nos desplazaría hasta el footer de la página:

<a class="moverse" href="#footer-wrapper">ir al footer</a>

El script es sencillo, asociamos una clase cualquiera (en este caso la llamo moverse) a un evento onclick:

$('.moverse').live('click', function(e) { 
  // con esto, impedimos que se ejecute (más información)
  e.preventDefault();
  // leemos el atributo href de la etiqueta que es el ID a donde queremos ir
  var adonde = $(this).attr('href');
  // guardamos su posición en la página (más información)
  var posicion_donde = $(adonde).offset();
  // y calculamos la distancia entre donde estamos y donde queremos ir
  var distancia = posicion_donde.top;
  // por último, nos movemoss usando una animación (más información)
  $('body,html').animate({scrollTop: distancia}, 500);
});

Otro ejemplo: ir al inicio de la página

<a class="moverse" href="#outer-wrapper">ir al inicio de la página</a>

O a cualquier parte

Listas y bullets

Cuando se crean listas HTML, por defecto, estas incluyen un bullet (etiqueta UL) o un número (etiqueta OL) que se muestra a la izquierda del texto de cada item y cuyo estilo es controlado por la propiedad list-style-type cuyos valores básicos son disc y decimal respectivamente. Si no queremos que se vean, usamos el valor none y desaparecen.

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

Una característica de las listas es que ese bullet o número comparten el estilo gráfico del contenido es decir, de la etiqueta LI; si esta tiene una fuente "grande" o cierto color, esas propiedades también se aplican a la "decoración" por lo tanto, de modo normal, no es posible diferenciarlas:

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

En Firefox hay dos pseudo-clases especiales que puede usarse para controlar eso:

::-moz-list-bullet permite establecer el estilo del bullet de las etiquetas LI en una lista desordenada (UL)
::-moz-list-number permite establecer el estilo del número o texto de las etiquetas LI en una lista ordenada (OL)

Por ejemplo:

ul li {color: #FFF; font-size: 16px;}
ul li::-moz-list-bullet{color: Yellow; font-size: 25px; vertical-align: middle;}
ol li {color: #FFF; font-size: 16px;}
ol li::-moz-list-number{font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

En cualquier otro navegador, no queda más remedio que agregar una etiqueta extra:

<li><span>item 1</span></li>

Y crear reglas de etilo diferentes:

ul li {color: Yellow; font-size: 25px; line-height: 0.9;}
ul li span {color: #FFF; font-size: 16px;}
ol li {font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
ol li span {color: #FFF; font-size: 16px; font-style: normal; font-family:Trebuchet MS;}

• item 1
• item 2
• item 3
• item 4
• item 5

1. item 1
2. item 2
3. item 3
4. item 4
5. item 5

Paneles deslizantes con CSS

Esto que llaman paneles deslizantes es, en realidad, otra forma de crear un slideshow con textos añadidos y efectos varios, desarrollado por codrops y que hace uso extremo del CSS3.

Tal vez pueda ser un poco engorroso pero los resultados son interesantes y hay varios demos 1, 2, 3, 4, que difieren en las animaciones porque, esencialmente, tienen la misma estructura.

Sólo muestro las variantes de uno de ellos que, por supuesto, no será visible en Internet Explorer. El HTML es el siguiente:

<div class="cr-container">
  <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
  <label for="select-img-1" class="cr-label-img-1">1</label>
  <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
  <label for="select-img-2" class="cr-label-img-2">2</label>
  <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
  <label for="select-img-3" class="cr-label-img-3">3</label>
  <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
  <label for="select-img-4" class="cr-label-img-4">4</label><div class="clr">
</div>
<div class="cr-bgimg">
  <div>
    <span>Slice 1 - Image 1</span>
    <span>Slice 1 - Image 2</span>
    <span>Slice 1 - Image 3</span>
    <span>Slice 1 - Image 4</span>
  </div>
  <div>
    <span>Slice 2 - Image 1</span>
    <span>Slice 2 - Image 2</span>
    <span>Slice 2 - Image 3</span>
    <span>Slice 2 - Image 4</span>
  </div>
  <div>
    <span>Slice 3 - Image 1</span>
    <span>Slice 3 - Image 2</span>
    <span>Slice 3 - Image 3</span>
    <span>Slice 3 - Image 4</span>
  </div>
  <div>
    <span>Slice 4 - Image 1</span>
    <span>Slice 4 - Image 2</span>
    <span>Slice 4 - Image 3</span>
    <span>Slice 4 - Image 4</span>
  </div>
  </div>
  <div class="cr-titles">
    <h3>
      <span class="big"> titulo panel 1 </span>
      <span class="small"> texto inferior panel 1 s</span>
    </h3>
    <h3>
      <span class="big"> titulo panel 2 </span>
      <span class="small"> texto inferior panel 2 </span>
    </h3>
    <h3>
      <span class="big"> titulo panel 3 </span>
      <span class="small"> texto inferior panel 3 </span>
    </h3>
    <h3>
      <span class="big"> titulo panel 4 </span>
      <span class="small"> texto inferior panel 4 </span>
    </h3>
  </div>
</div>

Si esto les parece muy largo ... ni miren el CSS.

<style>
  .cr-container { /* el contenedor */
    border: 10px solid #FFF;
    height: 400px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 600px;
  }
  .cr-container br {display:none;}
  .cr-container label { /* la navegación inferior */
    color: #98541C;
    cursor: pointer;
    float: left;
    font-size: 30px;
    height: 32px;
    line-height: 30px;
    margin-top: 350px;
    position: relative;
    text-align: center;
    width: 150px;
    z-index: 1000;
  }
  .cr-container label:before { 
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
    content: "";
    height: 32px;
    left: 50%;
    margin-left: -16px;
    position: absolute;
    width: 32px;
    z-index: -1;
  }
  .cr-container label:after { /* una línea vertical que separa los paneles */
    background: -moz-linear-gradient(#FFF,#000,#FFF);
    background: -webkit-linear-gradient(#FFF,#000,#FFF);
    background: linear--linear-gradient(#FFF,#000,#FFF);
    bottom: -20px;
    content: '';
    height: 400px;
    position: absolute;
    right: 0px;
    width: 1px;
  }
  .cr-container label.cr-label-img-4:after { width: 0px; }
  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2,
  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3,
  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4{
    color: #000;
  }
  .cr-container input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
  .cr-container input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
  .cr-container input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
  .cr-container input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
    background: #FFF;
    box-shadow: 0 0 0 4px rgba(0,0,0, 0.5);
  }
  .cr-container input { display: none; }

  /* las imagenes son fondos */
  .cr-bgimg {
    background-repeat: no-repeat;
     background-position: 0 0;
    height: 400px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 600px;
    z-index: 1;
  }
  .cr-bgimg div {
    background-repeat: no-repeat;
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 150px;
  }
  .cr-bgimg div span {
    height: 100%;
    left: 150px;
    position: absolute;
    text-indent: -9000px;
    top: 0px;
    width: 100%;
    z-index: 2;
  }
  .cr-bgimg div:nth-child(odd) span { left: -150px; }

  /* cada una de ellas */
  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1) { background-image: url(URL_IMAGEN_1); }
  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2) { background-image: url(URL_IMAGEN_2); }
  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3) { background-image: url(URL_IMAGEN_3); }
  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4) { background-image: url(URL_IMAGEN_4); }
  /* los panales tiene 150 pixeles de ancho */
  .cr-bgimg div:nth-child(1) span { background-position: 0px 0px; }
  .cr-bgimg div:nth-child(2) span { background-position: -150px 0px; }
  .cr-bgimg div:nth-child(3) span { background-position: -300px 0px; }
  .cr-bgimg div:nth-child(4) span { background-position: -450px 0px; }

  /* las animaciones */
  .cr-container input:checked ~ .cr-bgimg div span {
    -moz-animation: slideOutRight 0.6s ease-in-out;
    -webkit-animation: slideOutRight 0.6s ease-in-out;
  }
  @-webkit-keyframes slideOutRight{
    0%{ left: 0px; }
    100%{ left: 150px; }
  }
  @-moz-keyframes slideOutRight{
    0%{ left: 0px; }
    100%{ left: 150px; }
  }
  .cr-container input:checked ~ .cr-bgimg div:nth-child(even) span {
    -moz-animation: slideOutLeft 0.6s ease-in-out;
    -webkit-animation: slideOutLeft 0.6s ease-in-out;
    animation: slideOutLeft 0.6s ease-in-out;
  }
  @-webkit-keyframes slideOutLeft{
    0%{ left: 0px; }
    100%{ left: -150px; }
  }
  @-moz-keyframes slideOutLeft{
    0%{ left: 0px; }
    100%{ left: -150px; }
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
  .cr-container input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
  .cr-container input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
  .cr-container input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) {
    -moz-transition: left 0.5s ease-in-out;
    -webkit-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
    -moz-animation: none;
    -webkit-animation: none;
    animation: none;
    left: 0px;
    z-index: 10;
  }

  /* los textos en geenral */
  .cr-titles h3 { font-weight: normal; }
  .cr-titles h3 span {
    left: 0px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: 10000;
  }
  /* el texto superior más grande */
  .cr-titles h3 span.big {
    color: #FFF;
    font-family: Helvetica;
    font-size: 60px;
   left: 0px;
    letter-spacing: -2px;
    text-shadow: 1px 2px 1px #000;
    top: 230px;
    -moz-transition: opacity 0.8s ease-in-out, -moz-transform 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  }
  /* el texto inferior más pequeño */
  .cr-titles h3 span.small {
    background: rgba(255, 255, 255, 0.7);
    color: #000;
    font-family: Tahoma;
    font-size: 14px;
    letter-spacing: 0;
    margin-top: 100px;
    opacity: 0;
    padding: 5px 0;
    text-shadow: 1px 1px 1px #FFF;
    -moz-transition: opacity 0.8s ease-in-out;
    -webkit-transition: opacity 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out;
  }

  /* animaciones de los textos */
  .cr-container input:checked ~ .cr-titles h3 span:nth-child(1) {
    opacity: 0;
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1) {
    opacity: 1;
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .cr-container input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
  .cr-container input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
  .cr-container input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
  .cr-container input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
     opacity: 1;
  }
</style>

1234

Slice 1 - Image 1Slice 1 - Image 2Slice 1 - Image 3Slice 1 - Image 4

Slice 2 - Image 1Slice 2 - Image 2Slice 2 - Image 3Slice 2 - Image 4

Slice 3 - Image 1Slice 3 - Image 2Slice 3 - Image 3Slice 3 - Image 4

Slice 4 - Image 1Slice 4 - Image 2Slice 4 - Image 3Slice 4 - Image 4

esta es la imagenUn ejemplo de paneles deslizantes

algunos efectosLorem ipsum dolor sit amet, consectetuer adipiscing elit.

usando CSS3wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

personalizabledefiniendo estilos para cada panel

Cómo instalar Xampp en Windows

Una de las formas más prácticas de trabajar con WordPress y con muchos otros de estos servicios, es utilizarlos offline, instalándolos en nuestra PC y experimentar a gusto sin temor a destruir nada.

Para eso, la mejor opción es XAMPP, un soft gratuito que nos permite instalar una distribución de Apache que contiene MySQL, PHP y todo lo necesario para correr y gestionar un sitio web.

Hay versiones para casi todos los sistemas operativos. La última versión para Windows incluye:

• Apache 2.4.2
• MySQL 5.5.25a
• PHP 5.4.4
• phpMyAdmin 3.5.2
• FileZilla FTP Server 0.9.41

Una vez descargado, procedemos a la instalación que es muy simple, similar a la de cualquier otro programa.

Terminado esto, lo ejecutamos y se abrirá el panel de control. Si no están iniciados los servicios, hacemos click en Start, tanto de Apache como de MySQL que son los dos imprescindibles. Cerramos el panel que permanecerá como ícono en la barra de tareas.

Para entrar al servidor abrimos el navegador y escribimos localhost en la barra de direcciones, nos llevará a una página similar a esta:
http://localhost/xampp/splash.php

Seleccionamos el idioma que nos resulte cómodos y vamos a crear una base de datos. En la izquierda, dentro de Herramientas hacemos click en phpMyAdmin:
http://localhost/phpmyadmin/

Una vez allí, colocamos el nombre (por ejemplo "wordpress" sin comillas), elegimos utf8_unicode_ci y click en Crear.

Con eso ya estamos casi listos, nos falta instalar Wordpress, así que descargamos la última versión o la que nos guste, la descomprimimos y la debemos copiar y pegar en la carpeta \\xampp\\htdocs\\ que es donde se agregarán todos nuestros archivos.

Lo que sigue es similar a instalar WorPress en un hosting. Vamos a la carpeta \\xampp\\htdocs\\wordpress que es la raiz de nuestro sitio y buscamos el archivo wp-config-sample.php. Hacemos una copia del mismo y lo renombramos como wp-config.php. Lo editamos y colocamos nuestros datos:

[php]
define(''DB_NAME'', ''wordpress''); // el nombre de la base de datos que acabamos de crear
define(''DB_USER'', ''root''); // nuestro nombre de usuario para MySQL (no cambiar)
define(''DB_PASSWORD'', ''''); // la contraseña (la dejamos en blanco)
define(''DB_HOST'', ''localhost'');
define(''DB_CHARSET'', ''utf8'');
define(''DB_COLLATE'', '''');
[/php]

Para terminar, vamos a esta dirección:

http://localhost/wordpress/wp-admin/install.php

y seguimos el proceso normal, poner el título del blog, un email, nos dará un nombre de usuario (admin) y una contraseña aleatoria y nos llevará a la pantalla de login:

http://localhost/wordpress/wp-login.php

que es la que usaremos de ahí en adelante para entrar en nuestro sitio.

El resto, será igual que administrar WordPress desde un hosting. Podemos agregar temas, plugins (aunque algunos no funcionarán), exportar la base de datos de nuestro blog e importarla a Xampp, crear otras, etc.

Una de las ventajas es que no es necesario utilizar el editor interno y podemos usar cualquier otro como Notepad++ o el que nos resulte más cómodo. abrimos los archivos, los editamos y los guardamos. Todo se hace más sencillo, más rápido y no necesitamos conectarnos a internet.

Si bien el proceso detallado se refiere a a WordPress, en realidad, la utilidad de software como Xampp no se limita a este tipo de servicios ya que podemos hacer lo mismo con cualquier otro CMS: Joomla, Drupal, o no usar ninguno de ellos y experimentar con el lenguaje PHP de manera directa.

Tooltips animados con CSS

Esta es una forma de generar tooltips animadas, desarrollada por Alessio Atzeni y no sólo requiere CSS3 para ser implementada en cualquier sitio. Obviamente, como muchas de estas cosas, la animación no funcionará en todos los navegadores aunque el tooltip será visible sin problemas.

El HTML es sencillo, sólo es una lista ordenada dentro de un DIV:

<div id="masterpanel">
  <ul id="mainpanel">
    <li><a href="#" class="picasa"><small>abrir Picasa</small></a></li>
    <li><a href="#" class="stumble"><small>enviar a Stumble</small></a></li>
    <li><a href="#" class="twitter"><small>compartir en Twitterr</small></a></li>
    <li><a href="#" class="youtube"><small>el canal de YouTube</small></a></li>
    <li><a href="#" class="facebook"><small>compartir en Facebook</small></a></li>
  </ul>
</div>

Cada etiqueta LI contiene un enlace con una clase distinta y el contenido es el texto será el que vamos a ver en el tooltip.

Lógicamente, la clave es el CSS:

<style>
#masterpanel { /* este es contenedor principal */ }
#masterpanel ul { /* la lista */
  list-style: none;
  padding: 0;
  margin: 0;
}
#masterpanel ul li { /* cada item de la lista */
  padding: 0;
  margin: 0;
  position: relative;
}

/* este es el enlace */
#masterpanel ul li a {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 0;
  text-decoration: none;
  margin: 0 5px; /* la separación entre ellos */
  float: left; /* uno al lado del otro */
  position: relative;
  padding: 0 20px;
  /* el tamaño de las imágenes */
  height: 60px;
  width: 60px;
}

/* las imágenes son los fondos de esos enlaces */
a.tpicasa {background-image: url(imagen1);}
a.tstumble {background-image: url(imagen2);}
a.ttwitter {background-image: url(imagen3);}
a.tyoutube {background-image: url(imagen4);}
a.tfacebook {background-image: url(imagen5);}

/* el texto del tooltip permanecerá oculto */
#masterpanel a small {
  background-color: Brown;
  border-radius: 10px;
  color: #FFF;
  display: none;
  font-size: 11px;
  line-height: 1;
  padding: 5px;
  text-align: center;
  width: 90px; /* es el ancho real del enlace */
}

/* el efecto hover hace visible al tooltip */
#masterpanel a:hover small { 
  display:block; 
  left: 0; 
  margin-top:-35px; 
  position:absolute; 
  top: 0;
  z-index:9999;
  /* la animación para Firefox y Chrome/Safari */
  -moz-animation:mymove .25s linear;
  -webkit-animation:mymove .25s linear; 
}

/* las reglas de la animación para cada uno de los navegadores */
@-moz-keyframes mymove {
  0%{ -moz-transform: scale(0,0); opacity:0;}
  50%{ -moz-transform: scale(1.2,1.2); opacity:0.3; }
  75%{ -moz-transform: scale(0.9,0.9); opacity:0.7;}
  100%{ -moz-transform: scale(1,1); opacity:1;}
}
@-webkit-keyframes mymove {
  0%{ -webkit-transform: scale(0,0); opacity:0;}
  50%{ -webkit-transform: scale(1.2,1.2); opacity:0.3;}
  75%{ -webkit-transform: scale(0.9,0.9); opacity:0.7;}
  100%{ -webkit-transform: scale(1,1); opacity:1;}
}
</style>

• abrir picasa
• enviar a stumble
• compartir en twitter
• el canal de youtube
• compartir en facebook

Iconos: Color y oscuridad

Koloria
	Contiene 165 íconos de varios tamaños, en formato PNG. descargar

Pixeden dark social
	Contiene 129 íconos de 32x32, y 64x64, en formato PNG. descargar

¿Google no funciona? Cargar una librería alterna

Cargar las librerías desde los repositorios de Google usando las Google AJAX Library API es algo que se ha generalizado a tal punto que incluso los sitios "más grandes" utilizan ese método, transfiriéndoles a ellos la responsabilidad de mantener el sistema funcionando.

Pero ¿qué pasaría si un dia dejan de funcionar?

Seguramente, sería el pre-anuncio de un apocalipsis o algo por el estilo pero, de todos modos, en net.tutsplus.com nos muestran una alternativa que permitiría cargar un archivo alterno alojado en otro servidor y que deberíamos tener como respaldo ante eventuales catástrofes. En el caso de jQuery, sería algo así:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="URL_ARCHIVO"><\/script>')</script>

Dudo mucho que tal cosa sea necesaria pero ... por las dudas ...

Jugando con el botón de Pinterest

Una de las modas de estos nuevos tiempos es el uso de redes sociales, pseudo-sociales y todos esos sitios donde se comparten cosas. Algunos son exitosos porque "los usuarios los usan" y otros pasan al olvido rápidamente; hacia donde vamos o cuál será el modelo de internet que tendremos en unos años vaya uno a saber, por ahora seguimos caminando, probando y viendo de que se trata todo esto.

Uno de esos servicios que se está imponiendo es Pinterest y el botoncito para compartir ya se ve en muchos sitios.

Colocarlo es sencillo, se hace del mismo modo que con cualquiera de ellos, copiando y pegando el código que ofrecen y listo, funcionará sin problemas aunque , para mi gusto, es muy lento.

La forma de aplicarlo a Blogger la pueden ver en dos artículos escritos por Oloman donde se explica detalladamente su uso y las variantes que pueden elegirse: Pinterest, botón que se ve y funciona y Otras opciones para instalar el botón de Pinterest.

Ahora bien, para jugar un poco, me puse a ver si era posible hacer lo mismo pero de modo más específico, es decir, ver si podía agregarse ese botón a determinadas cosas y no a los posts en general; por ejemplo, adosar ese botón sólo en ciertas imágenes que uno quisiera que fueran compartidas y para ello, recurro a jQuery porque no se me ocurre nada más fácil.

El resultado, será algo como esto:

¿Cómo se identifica qué imagen quiero compartir y cuál no? Simplemente, le agrego una clase a la etqiueta IMG que, en este caso, será class="pin":

<img class="pin" src="URL_IMAGEN" />

Obviamente, lo primero que debo hacer es colocar el script del servicio que va al final de la plantilla, antes de </body>:

<script src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>

Y para que esto funcione, el botón también lo voy a crear con JavaScript cuyo código colocaré antes de </head> o antes del script anterior.

Los datos que debemos enviar son tres:

url es la drección desde donde se envía es decir, nuestra página
media es la dirección de la imagen
description es un texto alternativo

Quiero enviarle esos tres datos y además, que al hacer click en el botón, no se abra la página de Pinterest en otra pestaña sino en una ventana tipo pop-up así que armo algo como esto:

<script type='text/javascript'>
//<![CDATA[

// esto evitará que el enlace se abra en otra pestaña
$(document).on('click', '.pin-it-button', function(e){
  e.preventDefault();
})

// esto hará que el enlace se abra en una ventanita de tipo pop-up
$(document).on('click', '.pinimg', function(e){
  var url = $(this).attr('rel');
  window.open(url,"pinshare","toolbar=0,status=0,width=620,height=320");
})

// y cuando se cargue la página
$(document).ready(function(){

  // buscaremos todas las imágenes de los posts que tengan la clase "pin"
  $('.post-body img.pin').each(function() {

    // con estos datos vamos a armar la dirección url que debe enviarse a Pinterest
    var post = location.href; // la dirección de nuestra página
    var src = $(this).attr('src'); // la imagen a compartir
    var texto = document.title; // la descripción será el título de la página
    if($(this).attr('alt')) {
      // y si colocamos el atributo alt en la imagen, allí podríamos mostrar un texto especial; si existe, lo usamos
      texto = $(this).attr('alt') + " : via MIBLOG";
    }

    // verifico si la imagen flota
    var cssflotar = $(this).css('float');

    // y creamos el botón con esos datos 
    var boton ="<a count-layout='none' class='pin-it-button' href='#'><img title='Pin It' src='//assets.pinterest.com/images/PinExt.png' class='pinimg' rel='http://pinterest.com/pin/create/button/?url="+post+"&amp;media="+src+"&amp;description="+texto+"' /></a>";
    // la etiqueta A tiene un href vacio justamente para evitar que se abra
    // el dato a enviar está en el atributo rel de la etiqueta IMG

    // rodeamos nuestra imagen con una etiqueta SPAN
    $(this).wrap('<span class="pinwrap"></span>');
    // que tiene la misma propiedad flaot que la imagen
    $(this).parent().css('float',cssflotar);
    // y le adosamos el botón 
    $(this).after(boton);
    // y si tiene, le sacamos la flotación a la imagen
    $(this).css('float','none');
  })

})

//]]>
</script>

Un poco de CSS para que el botón se superponga a la imagen y pueda aplicarse a cualquier imagen, centrada o flotante:

<style>
  .pinwrap {
    display: inline-block;
    position: relative;
  }
  .pin-it-button{
    bottom: 10px;left: 10px;
    position: absolute;
  }
</style>

Y terminamos.

Acá abajo, la imagen de la derecha puede compartirse y la de la izquierda no:

Varios métodos para diferenciar los enlaces

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado

Y un dia ... Google se comió al mundo

¿Será un error temporal o el hambre del gigante crece de tal manera que quiere que todos seamos parte de su merienda?

Este mensaje aparece cuando uno entra a Blogger utilizando Opera, sin importar si es la última versión o no. Efectivamente, puede "ignorarse" pero volverá a aparecer una y otra vez.

Tal vez, estadísticamente no sea algo que afecte a muchos usuarios pero, las estadísticas sólo son numeritos abstractos a menos que se coloquen en cierto contexto. Es verdad, los usuarios que usan este navegador son porcentualmente pocos pero hablamos de un universo con cientos de millones de usuarios así que aún un porcentaje pequeño implica DECENAS DE MILLONES de personas.

Y la clave de todo el asunto es responder la pregunta inicial ¿se trata de un error o tendremos que terminar usando sólo lo que a ellos se les ocurra? ¿Empezarán a aparecer cartelitos similares en el resto de los navegadores?

La verdad, no me sorprendería, Google ya lo hace con otros servicios como YouTube y es una costumbre bastante arraigada en muchos otros sitios, incluyendo blogs que muestran mensajes diciendo que está optimizado para tal o cual navegador y que sólo se verá bien en esos así que si uno es de esos tontos que no los usa ... ¿qué?

¿Qué queremos decir cuando ponemos un mensaje de ese tipo? ¿Que no eres bienvenido? ¿Que eres un tonto? ¿Que nosotros "sabemos" y tu eres un ignorante que has elegido usar un navegador "obsoleto"? ¿Que si uso Chrome soy cool? ¿Que lo que yo hago está perfecto y todos los demás están equivocados?

Hay cartelitos de todo tipo, la mayoría son "sutiles" pero hay otro que son casi burlones ¿Será necesario hacer eso?

Yo creo que no, de ninguna manera.

La esencia de este mundo es el OTRO. El OTRO no es otra cosa que UNO MISMO visto desde otro lado. La diversidad es básica para la evolución de cualquier cosa; los gustos son subjetivos y no discutibles. Si el sitio no se ve razonablemente bien en un navegador específico, la responsabilidad es mía. Si puedo o quiero resolver el asunto es un tema distinto; obviamente, no habrá forma de complacer a todos pero habrá que intentarlo o por lo menos, ser consciente de esas limitaciones.

Si un sitio no funciona correctamente en un navegador standard, más que un cartelito diciendo que cambies, debería haber un cartelito pidiendo disculpas. Es una simple cuestión de respeto.

REFERENCIAS:Planeta Botch

Blogs, webs: Todo depende

Todos los scripts se deben colocar antes de </head>
NO, no es cierto

Todos los scripts se deben colocar antes de </body>
NO, no es cierto

Entonces ¿dónde demonios se colocan TODOS los scripts?
La respuesta es la más fácil y la más difícil: DEPENDE

¿De qué depende? De lo que hagan, de cómo funcionen, de cada caso particular.

UFA!!! Ahí se acabó la sencillez del diseño web

¿No es que era fácil? Ahora, resulta que ¿DEBO APRENDER PENSAR SABER LEER?

Lo lamento, si creyeron en la publicidad de los distintos servicios que ofrecen el oro y el moro me temo que deberán re-plantearse las cosas porque aún no se ha inventado el botón donde hacer click-click-click y solucionar TODOS los problemas en un abrir y cerrar de ojos.

Hace años que me repito lo mismo y si alguna vez lo escribí, fue de puro atrevido: el diseño web y sobre todo, los blogs, no son ni arte ni técnica: son artesanías. Ahora, sigo siendo un atrevido pero esa intuición prematura se ha vuelto una convicción. Todo esto que hacemos se arma a fuerza de empeño, de pruebas y errores; son una mezcla singular de instinto y pura casualidad. El resultado final, jamás es idéntico, todo depende de muchas cosas. Copio y pego algo y todo está OK, lo hago otra vez y no funciona ¿por qué? No hay una respuesta única, obviamente, algo es distinto, no sabemos qué y eso es lo que hay que buscar y para buscar eso hay que ... aprender, pensar y rogar que nos demos cuenta.

¿Eso significa que esto es algo reservado sólo para ciertos "talentoso"? NOOOOOOO en absoluto pero, si está reservado para quienes son pacientes, perseverantes, curiosos y algo atrevidos.

Atreverse es intentar sabiendo de antemano que todo puede fallar. Si no se está dispuesto a perder es mejor no apostar. Hay que tomar recaudos, hay que guardar backups, hay que marcar un límite, hasta acá llegué, hasta ahora todo está bien pero quiero seguir adelante: OK, guardo, marco, señalo, recuerdo de tal forma de poder retroceder y empezar otra vez. Porque empezar otra vez será inevitable. No pasará hoy, no pasará mañana pero alguna vez ocurrirá, sin la menor duda.

Hay que aprender a decir "esto me supera". Por lo menos, por ahora, con lo que sé, con lo que aprendí, no puedo hacer más; tal vez en un tiempo le encuentre la vuelta o descubra que no era tan complicado como me parecía y pueda volver a intentarlo. Eso no es resignación, eso no es abandonar, eso es saber que tenemos limitaciones y descubrir esas limitaciones es lo que nos permite superarlas.

Que alguien pueda hacer algo y yo no pueda no me califica; no me hace ser menos y obviamente, lo inverso tampoco es cierto.

Los blogs son un TODO DEPENDE permanente y esa es la única regla que existe.

El selector universal

En CSS, un selector es un vínculo entre el HTML y la hoja de estilo. Todas las etiquetas son selectores y cada uno de ellas posee un conjunto de propiedades generales y particulares. Pero como esto es insuficiente, también existen selectores especiales que nos permiten crear reglas muy específicas.

leer artículo actualizado