2011

feliz

Y no, nada nada nos impide soñar ...

Deliremos, pues, por un ratito. El mundo, que está patas arriba, se pondrá sobre sus pies ...

Todos los penitentes serán celebrantes, y no habrá noche que no sea vivida como si fuera la última, ni día que no sea vivido como si fuera el primero.

Eduardo Galeano - Fragmento de El derecho de soñar

Esta es una de las tantas formas de crear botones sin imágenes, utilizando sombras, gradientes y otras características del CSS3 que, con ciertas limitaciones, funcionarán en cualquier navegador.

<style>
  ul.demobotones a {
    color: #FFF;
    float: left;
    font-size: 26px;
    height: 40px;
    line-height: 40px;
    margin: 0 5px;
    text-align: center;
    text-shadow: 1px 1px 1px #000;
    width: 120px;
    -moz-border-radius: 9px; /* Firefox */
    -webkit-border-radius: 9px;
    border-radius: 9px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#65A5ED", endColorstr="#AEEAFF"); * Internet Explorer */
    background: #65A5ED;
    background: -moz-linear-gradient(center bottom,rgb(150,238,255) 11%,rgb(131,178,229) 41%,rgb(85,155,229) 54%,rgb(194,204,234) 94%); /* Firefox */
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0.11, rgb(150,238,255)),color-stop(0.41, rgb(131,178,229)),color-stop(0.54, rgb(85,155,229)),color-stop(0.94, rgb(194,204,234))); /* Chrome y Safari */
    background: linear-gradient(top, #65A5ED, #AEEAFF); /* W3C */
    -moz-box-shadow: 0 0 4px #000; /* Firefox */
    -webkit-box-shadow: 0 0 4px #000; /* Chrome y Safari */
    box-shadow: 0 0 4px #000; /* W3C */
  }
  ul.demobotones a:hover{
    border-color: #000062;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=”#DBDBDB”, endColorstr=”#FFFFFF”); * Internet Explorer */
    background: #DCDCDC;
    background: -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(214,214,214) 50%,rgb(235,235,235) 71%,rgb(248,248,248) 85%); /* Firefox */
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.5, rgb(214,214,214)),color-stop(0.71, rgb(235,235,235)),color-stop(0.85, rgb(248,248,248))); /* Chrome y Safari */
    background: linear-gradient(top, #dbdbdb, #fff);-moz-box-shadow: 0 0 6px #000;-webkit-box-shadow: 0 0 6px #000;box-shadow: 0 0 6px #000; /* W3C */
  }
  ul.demobotones a:active{
    -moz-box-shadow: 0 0 2px #000; /* Firefox */
    -webkit-box-shadow: 0 0 2px #000; /* Chrome y Safari */
    box-shadow: 0 0 2px #000; /* W3C */
  }
</style>

<ul class="demobotones">
  <li><a href="#">Blogger</a></li>
  <li><a href="#">RSS</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

• Blogger
• RSS
• Contacto

REFERENCIAS:Martin Ivanov

No. Esto no es para usar, sólo para divertirse un rato y asombrarse con la imginación ajena.

REFERENCIAS:dhteumeuleu.com

Algunos ejemplos del uso de la propiedad text-shadow, ideales para hacer títulos raritos aunque es algo que no fucionará en Internet Explorer.

retro

<style>
  #vintage {
    background-color: #EEE;
    color: #707070;
    font-family: Times New Roman;
    font-size: 160px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
  }
</style>

<h1 id="vintage">retro</h1>

Neon

<style>
  #neon {
    background-color: #000;
    color: #FFF;
    font-family: Garamond;
    font-size: 160px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #FF00DE, 0 0 70px #FFF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE, 0 0 150px #DD00DE;
  }
</style>

<h1 id="neon">neon</h1>

Inset

<style>
  #inset {
    background-color: #474747;
    color: #222;
    font-family: Helvetica;
    font-size: 200px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 2px 3px #666;
  }
</style>

<h1 id="neon">Inset</h1>

Arial

<style>
  #anaglyphic {
    background-color: #FFF;
    color: rgba(0,168,255,0.5);
    font-family: Arial;
    font-size: 200px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 8px 8px 0 rgba(255,0,180,0.5);
  }
</style>

<h1 id="anaglyphic">Arial</h1>

Fire

<style>
  #fire {
    background: #000;
    color: #FFF;
    font-family: Courier;
    font-size: 200px;
    margin: 200px auto;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 20px #FEFCC9, 10px -10px 30px #FEEC85, -20px -20px 40px #FFAE34, 20px -40px 50px #EC760C, -20px -60px 60px #CD4606, 0 -80px 70px #973716, 10px -90px 80px #451B0E;
  }
</style>

<h1 id="fire">Fire</h1>

Game

<style>
  #boardgame {
    background-color: #EEE;
    color: #FFF;
    font-family: Arial;
    font-size: 170px;
    margin: 200px auto;
    padding: 10px 0 50px 35px;
    text-align: left;
    text-transform: uppercase;
    text-shadow: 10px 10px 0 #FFD217, 20px 20px 0 #5AC7FF, 30px 30px 0 #FFD217, 40px 40px 0 #5AC7FF;
  }
</style>

<h1 id="boardgame">Game</h1>

REFERENCIAS:line25.com

En un comentario reciente, Ariane hablaba sobre la forma de utilizar Json para generar una plantilla novedosa donde se mostrarán las entradas resumidas de ciertas categorías (ver demo) y se basaba en un código publicado por simplexdesign pero, el problema que se le presentaba era que ese código no funcionaba en Internet Explorer.

El error, en realidad, no tiene sentido explicarlo y las soluciones para evitarlo deben ser varias pero, como no soy versado en esto del JavaScript, se me ocurre que lo más simple es lo más seguro aunque no sea demasiado profesional así que, cumplo con Ariane y trataré de explicar la idea general que podría aplicarse en cualquier modelo de diseño ya que esto es posible agregarlo en la plantilla, en un widget de tipo HTML, en una página estática o incluso en un post.

Primero el script que podemos poner antes de </head>:

<script language="JavaScript">
//<![CDATA[
imgr = new Array();
var contarlabels = 0;

// esto es lo que deberíamos configurar
imgr[0] = "URL_imagenxdefecto"; // establecer la imagen por defectoq euse va a utilizar
showRandomImg = true; // poner false si no se quiere que la imagen sea aleatoria
summaryPost = 60; // cantidad de caracteres del resumen
summaryTitle = 25; // cantidad de caracteres del título
numposts = 5; // cantidad de entradas a ser mostradas

// la lista de etiquetas que queremos mostrar; acá hay dos pero puede haber mas
// siempre entre comillas y separadas por una coma
labelname = new Array("iconos","Twitter"); // los nombres de las etiquetas a mostrar
labeltitle = new Array("iconos","Twitter"); // los títulos a mostrar

// esta es la función general que elimina las etiquetas HTML
function removeHtmlTagEtiquetas(strx,chop){
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }    
  }
  s =  s.join("");
  s = s.substring(0,chop-1);
  return s;
}

// esta es la función que analiza las entradas y las muestra
function showrecentpostsetiquetas(json) {

  var salida = "";
  var salidainner= "";
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    if (i == json.feed.entry.length) break;

   // el titulo de la entrada
    var posttitle = entry.title.$t;

    // buscamos al url del post
    var posturl;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == "alternate") {
        posturl = entry.link[k].href;
        break;
      }
    }

    // buscamos el contenido del post
    if ("content" in entry) {
      var postcontent = entry.content.$t;
    } else
      if ("summary" in entry) { var postcontent = entry.summary.$t; }
    else var postcontent = "";

    // aquí se busca entre las imágenes y se selecciona una
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"",a);
    c = s.indexOf("\"",b+5);
    d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    // terminada la lectura de cada post, se crea el HTML del contenido
    var trtd = "";
    trtd += '<a href="' + posturl + '"><img src="' + img[i] + '"></a>';
    trtd += '<a class="tlabel" href="' + posturl + '">' + removeHtmlTagEtiquetas(posttitle,summaryTitle) + '</a><br/>';
    trtd += removeHtmlTagEtiquetas(postcontent,summaryPost);
    trtd += ' ...<div class="botline"></div>';

   // y continuamos con el siguiente
    salidainner += trtd;
    j++;
  }

  // una vez que se lee la cantidad de posts indicada en numposts, se crea el HTML del DIV y se muestra
  salida += '<div class="featured">';
  salida += '<h3>' + labeltitle[contarlabels] + '</h3>';
  salida += salidainner;
  salida += '<a class="morelabels" href="http://vagabundia.blogspot.com/search/label/' + labelname[contarlabels] + '?max-results=10">ver otras entradas de  '+ labelname[contarlabels] +'</a>';
  salida += '</div>';
  document.write(salida);
  contarlabels ++;

}
//]]>
</script>

El script ese ha sido modificado un poco del original pero el concepto general es el mismo que con todos los scripts que utilizan Json; leemos, guardamos los datos que vamos a usar y leugo, creamos el HTML que es lo que se mostrará; en este caso, elimino etiquetas como <b></b> y le pongo clases a los diferentes sectores ya que de ese modo es mucho más fácil controlar el diseño mediante CSS que es lo que haremos a continuación de lo anterior:

<style>
  .featured { /* es el rectángulo contendor de cada etiqueta */
    float: left;
    font-size: 11px;
    height: 390px;
    margin: 0 10px;
    overflow: hidden;
    padding: 10px;
    width: 270px;
  }
  .featured h3 { /* el título general */
    background-color: #555;
    border-bottom: 1px solid #888;
    color: #BBB;
    margin: 0 0 10px;
    padding: 5px 0;
    text-align: center;
  }
  .featured img { /* las miniaturas */
    background-color: #555;
    float: left;
    height: 50px;
    margin: 0 8px 0 0;
    padding: 2px;
    width: 50px;
  }
  .featured .botline { /* la línea divisoria */
    border-bottom: 1px dotted #555;
    clear: both;
    margin-bottom: 5px;
    padding: 0 0 5px;
  }
  .featured a.tlabel { /* el título de cada post */
    font-size: 11px;
    display: block;
    float: left;
    max-width: 205px;
    overflow: hidden;
    white-space: pre;
  }
  .featured a.morelabels { /* el enlace final a las etiquetas */
    background-color: transparent;
    color: #AAA;
    display: block;
    padding: 4px 0;
     text-align: center;
  }
  .featured a.morelabels:hover {background-color: #555;}
</style>

Hecho todo eso no pasará nada; nos falta llamar a laa función tantas veces como etiquetas querramos ver y eso, lo hacemos con otro script tal como lo hacemos en todos los ejemplos anteriores y colocamos esos scripts exactamente allí donde quisiéramos que se mostraran; por ejemplo:

<div id="miejemplo">
  <script src="http://miblog.blogspot.com/feeds/posts/default/-/UNA_ETIQUETA?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <script src="http://miblog.blogspot.com/feeds/posts/default/-/OTRA_ETIQUETA?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostsetiquetas"></script>
  <!-- y seguimos agregando todos los que se nos ocurra mostrar -->
</div>
<div style="clear:both;"></div>

Allí, solo debemos poner la URL de nuestro sitio e ir cambiando el nombre de la etiqueta que siempre, debe ser escrita con exactitud ya que es sensible a mayúsculas y minúsculas.

FEIGN es un juego raro, perturbador, aparentemente muy simple donde todo lo que debemos hacer es buscar 9 "personas" que están allí, en alguna parte pero las perspectivas son engañosas, se hace muy pero muy difícil orientarse en esos laberintos y es normal que, luego de entusiasmarnos con nuestro avance, nos encontremos otra vez en el punto de partida, confundidos y desorientados.

Vale la pena mirarlo.

REFERENCIAS:arturogoga.com