Una curiosidad: Logos de GMail con CSS3

Es probable que a nadie se le ocurra usar algo como esto pero, no deja de ser una curiosidad y bien armada.

Digo que sería raro que alguien quisiera utilizarlo porque está armado exclusivamente con CSS3, no se vería en todos los navegadores y la cantidad de reglas es ... bueno, muchas.

.gmail-logo, .gmail-logo *, .gmail-logo *:before, .gmail-logo *:after{margin:0;padding:0;background:transparent;border:0;outline:0;display:block;font:normal normal 0/0 serif;}
.gmail-logo{margin:0 auto;background:rgb(201, 44, 25);width:600px;height:400px;border-top:4px solid rgb(201, 44, 25);border-bottom:4px solid rgb(201, 44, 25);border-radius:10px;}
.gmail-logo .gmail-box{overflow:hidden;float:left;width:440px;height:400px;margin:0 0 0 80px;background:white;border-radius:5px;}
.gmail-logo .gmail-box:before{position:relative;content:'';z-index:1;background:white;float:left;width:320px;height:320px;border:100px solid rgb(201, 44, 25);margin:-310px 0 0 -40px;border-radius:10px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);}
.gmail-logo .gmail-box:after{content:'';float:left;width:360px;height:360px;border:2px solid rgb(201, 44, 25);margin:10px 0 0 40px;-o-transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);}
.gmail-logo:after{content:'';position:relative;z-index:2;content:'';float:left;margin-top:-404px;width:600px;height:408px;display:block;background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.1)));}
.gmail-logo:hover{background:#313131;border-color:#313131;}
.gmail-logo:hover .gmail-box:before{border-color:#313131;}
.gmail-logo:hover .gmail-box:after{border-color:#313131;border-bottom-color:#fff;border-right-color:#fff;}

Sólo son ejemplos que muestran la versatilidad de estas nuevas propiedades y además, en este caso, Irham Kendeni, que es su desarrollador, se ha esmerado en darnos as explicaciones paso a paso lo que permite tratar de entender la idea y de ese modo, poder aplicar esas cosas ara resolver nuestras propias necesidades que, seguramente, serán mucho más modestas.

Y si alguno cree que eso fue excesivo, es porque no vieron este otro:

     

Internet: Una historia de amores y odios

REFERENCIAS:thedoghousediaries.com

CSSload: Gráficos de carga con CSS

CSSload es un sitio donde podemos generar "imágenes" de carga que no son imágenes sino gráficos creados con CSS, aprovechando de ese modo, las facilidades que nos dan estas nuevas propiedades que nos permiten animar casi cualquier cosa y que funcionan en Firefox, Chrome, Safari y otros navegadores modernos.

No hay mucho que explicar. Basta entrar en la página y seleccionar alguno de los modelos disponibles y luego, establecer los parámetros de color y velocidad. Todos los cambios pueden ser previsualizados y una vez que nos hemos decidido, el botón Get code nos mostrará el código necesario para insertarlo en cualquier página web.

Ese código contiene dos partes, el estilo que es todo lo que está entre <style> </style> que podemos agregarlo en una entrada o en la misma plantilla y el HTML que son una serie de DIVs que deberemos ubicar allí donde quisiéramos mostrarlo.

Como no requiere librerías de ningún tipo y no usa JavaScript, podemos modificarlo a gusto y a mi entender, es una buena manera de aprender cómo funcionan estas cosas que a simple vista, son raras.

Ver/Ocultar otro ejemplo:

Muchos feeds y un solo script para mostrarlos (2)

Tengo muchas direcciones de feeds y ahora, lo que quiero hacer es mostrarlos pero sin tener que escribir códigos especiales para cada uno de ellos y además quiero que se vean en un mismo lugar así que me aprovecho de jQuery y modifico un poco el script que se mostraba en esta entrada.

Allí, agregaré un par de funciones extras, una, llamada FEED_eliminartags() para que los contenidos puedan ser "recortados" y verlos como sumarios y otra para detectar la primera imagen que tengan FEED_primerimagen(); ambas cosas, son similares a cualquier otra función que interprete json que es el formato en que leeremos los feeds.

Agrego las funciones antes de </head>

<script type='text/javascript'>
//<![CDATA[
function FEED_primerimagen(cual) {
  var t = "", s, a, b, c, d;
  s = cual;
  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!="")) {t = d;}
  return t;
}

function FEED_eliminartags(cual,longitud){
  var r = cual.split("<");
  for(var i=0;i<r.length;i++){
    if(r[i].indexOf(">")!=-1){
      r[i] = r[i].substring(r[i].indexOf(">")+1,r[i].length);
    }
  }
  r = r.join("");
  var sss = "", p;
  var r2 = r.split(" ");
  for(var i=0;i<r2.length;i++){
    p = sss + r2[i] + " "
    if(p.length>=longitud) {break;}
    sss = p;
  }
  sss = $.trim(sss);
  if(sss) {sss += " …" }
  return sss
}

(function ($) {
  $.fn.FeedEk = function (lasopciones) {
    var opciones = {url: '', clase: '', cantidad: 3, lenres: 120};
    if (lasopciones) {$.extend(opciones, lasopciones)}
    var elID = $(this).attr('id');
    if (opciones.url == null || opciones.url == '') {
      $('#' + elID).empty();
      return
    }
    $.ajax({
      url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=' + opciones.cantidad + '&output=json&q=' + encodeURIComponent(opciones.url) + '&callback=?',
      dataType: 'json',
      success: function (data) {
        $('#' + elID).empty();
        $.each(data.responseData.feed.entries, function (i, entry) {
           var laimagen = FEED_primerimagen(entry.content);
           var contenido = FEED_eliminartags(entry.content,opciones.lenres);
           var salida = "<div class='ItemFeed "+opciones.clase+"'>";
           salida += "<div class='ItemTitle'><a href='" + entry.link + "' target='_blank' >" + entry.title + "</a></div>";
           salida += "<div class='ItemContent'>";
           if(laimagen){
             salida += "<img src='"+ laimagen +"' />";
           }
           if(contenido){
             salida += "<p>" + contenido + "</p>";
          }
          salida += "</div>";
          salida += "</div>";
          $('#' + elID).append(salida);
        })
      }
    })
  }
})(jQuery);
//]]>
</script>

Y en un elemento HTML, entrada, página estática o donde quiera que se muestren, el HTML que no es otra cosa que un DIV vacío y una serie de enlaces:

<div id="divRss"></div>

<div id="fenlaces">
  <a href="#" rel="1" class="ftwitter"> Twitter usuario </a>
  <a href="#" rel="2" class="ftwitter"> Twitter favoritos </a>
  <a href="#" rel="3" class="ftwitter"> Twitter menciones </a>
  <a href="#" rel="4" class="fyoutube"> YouTube usuario </a>
  <!-- coloco todos los enlaces que quiera -->
  <a href="#" rel="14" class="fstumble"> StumbleUpon blog </a>
</div>

Ahora, faltaría definir una lista de direcciones urls con los distintos feeds; uso un array o cualquier otro sistema:

<script type="text/javascript">
  var lista_feeds=new Array();
  lista_feeds[0] = "";
  lista_feeds[1] = "https://twitter.com/statuses/user_timeline/usuario.rss";
  lista_feeds[2] = "https://api.twitter.com/1/favorites/usuario.rss";
  lista_feeds[3] = "http://search.twitter.com/search.rss?q=to:@usuario";
  lista_feeds[4] = "https://gdata.youtube.com/feeds/api/users/usuario/uploads";
  // ....... sigo agregando las direcciones que quiera usar
  lista_feeds[14] = "http://www.stumbleupon.com/rss/stumbler/nombre/likes";

  // y el evento de jQuery apra detectar el click en esos enlaces
  $('#fenlaces a').live('click', function(e) {
    e.preventDefault(); // evito qe se ejecuta el href del enlace
    var url = lista_feeds[$(this).attr('rel')]; // leo el número de orden de la lista (1, 2, 3, 4, etc)
    var clase = $(this).attr('class'); // leo la clase de ese enlace
    // y ejecuto la función para leer los feeds
    // donde cantidad es el número de entradas a leer y lenres es la longitud máxima
    $('#divRss').FeedEk({url:url, clase:clase, cantidad: 3, lenres:200 });
  });

  // y por defecto, muestro el primero de la lista
  $(document).ready(function() {
    $('#fenlaces a').first().click();
  });
</script>

Por último, como siempre, el CSS que es lo que termina de personalizar las cosas:

<style>
  #divRss { /* el contenedor */
    background-color: #EEE;
    border: 1px solid #000;
    margin: 0 auto;
    outline: 3px solid #ABC;
    padding: 10px;
    width: 350px;
  }
  #divRss .ItemFeed { /* cada entrada */
    border-bottom: 1px dotted #000;
    color: #666;
    padding: 5px 0;
  }
  #divRss .ItemFeed:last-child {border: none;}
  /* y los detalles (título, contenido e imagen)
  #divRss .ItemTitle { }
  #divRss .ItemTitle a { }
  #divRss .ItemContent { }
  #divRss .ItemContent p { }
  #divRss .ItemContent img {height: auto;   width: 100%;}
</style>

Como los datos que nos muestran esos feeds pueden ser variables, la clase que se envia a la función, permite que los mostremos con alguna diferencia; por ejemplo:

#divRss .ItemFeed.ftwitter { }
#divRss .ItemFeed.fyoutube { }
#divRss .ItemFeed.fyoutube .ItemTitle { }
#divRss .ItemFeed.fstumble img { }

Muchos feeds y un solo script para mostrarlos (1)

Hace ya unos cuantos días, en labnol.org publicaban un artículo donde enumeraba una larga serie de direcciones de feeds a los que podía accederse o leer su contenido; feeds de distintos servicios que, como casi todos ellos, son públicos y por lo tanto, podemos mostrarlos.

Para hacer eso, como los feeds suelen tener formatos diferentes, un método efectivo es usar la idea que se mostraba en esta entrada que no es otra cosa que un pequeño script que utiliza jQuery para enviar esa dirección de feeds a un API de Google que nos devuelve siempre un formato único; de tal modo, podremos emplearlo sin tener que tener en cuenta esas diferencias o andar averiguando en que etiquetas están los distintos datos.

Es cierto que el API no es muy flexible pero, lo que nos devuelve es más que suficiente para armar un gadget que nos permita mostrar una lista de feeds de distinto tipo en en el mismo espacio.

Empezamos con algunas de las direcciones de la lista de feeds:

las últimas actualizaciones de Twitter:
https://twitter.com/statuses/user_timeline/usuario.rss

los favoritos de Twitter:
https://api.twitter.com/1/favorites/usuario.rss

las menciones de Twitter:
http://search.twitter.com/search.rss?q=to:@usuario

cualquier búsqueda o hashtags) de Twitter:
http://search.twitter.com/search.rss?q=palabra

los últimos videos subidos a YouTube:
https://gdata.youtube.com/feeds/api/users/usuario/uploads

videos de YouTube con cierta etiqueta:
https://gdata.youtube.com/feeds/api/videos/-/etiqueta

cualquier búsqueda en YouTube:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=relevance

lo mismo pero ordenadas por fecha:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=published

lo mismo pero ordenadas según visitas:
https://gdata.youtube.com/feeds/api/videos?q=palabra&orderby=viewCount

últimas actualizaciones de una página de Facebook:
https://www.facebook.com/feeds/page.php?format=atom10&id=ID_pagina

imágenes subidas a Pinterest:
http://pinterest.com/usuario/feed.rss

imágenes subidas a Flickr:
http://api.flickr.com/services/feeds/photos_public.gne?id=ID_usuario

imágenes de Flickr con cierta etiqueta:
http://api.flickr.com/services/feeds/photos_public.gne?tags=etiqueta

imágenes de Instagram con cierta etiqueta:
http://instagr.am/tags/etiqueta/feed/recent.rss

cualquier búsqueda de Picasa:
http://photos.googleapis.com/data/feed/base/all?alt=rss&kind=photo&q=palabra

últimas entradas en Tumblr:
http://nombre.tumblr.com/rss

últimas entradas en WordPress.com:
http://nombre.wordpress.com/feed/

últimas actualizaciones en StumbleUpon:
http://www.stumbleupon.com/rss/stumbler/usuario/likes

En todos los casos, lo que debe hacerse es cambiar el dato en amarillo por el que corresponda, ya sea nuestro nombre de usuario, ID, etiqueta o palabra a buscar.

Y lo que faltaría es ver cómo se podrían usar ...

Instant WordPress: Una instalación portable

Instant WordPress es un programa que nos permite instalar WordPress en nuestra PC sin necesidad de software extra.

Una vez descargado el ejecutable, hacemos doble click en él, seleccionamos la carpeta o unidad USB donde queramos instalarlo y nada más; funcionará de modo independiente como cualquier otro programa portable.

Incluye WordPress 3.2, Apache 2.2.15, PHP 5, MySQL 5 y una serie de posts y páginas demo donde pueden probarse plugins o temas.

En el sitio del desarrollador hay una abundante documentación (en ingles) que puede ayudar a quien quiera jugar un poco y ver de que se trata uno de los sistemas de blogs más utilizados en el mundo.

REFERENCIAS:blogtecnia.com

Monitorizar sitios con Google Docs

Hay varios sitios en la web como Pingdom que ofrecen servicios gratuitos para monitorizar que nuestro servidor o página esté funcionando y sea accesible; en general, son sencillos de usar pero, para quien quiera otra alternativa, en un artículo de Digital Inspiration explican como hacer algo similar, usando Google Docs con dos ventajas; por un lado, pueden montorizarse varios dominios simultáneamente y segundo, puede establecerse la opción de recibir mensajes de alerta SMS en un móvil.



El sistema es muy sencillo, debemos hacer una copia de la plantilla click acá y si estamos logueados en Google, nos pedirá autorización:

Hecho eso, la plantilla se agregará a nuestros documentos y veremos que el menú superior tiene un item extra llamado Website Monitor. Lo desplegamos y hacemos click en Initialize. Nuevamente, se nos mostrarán varias ventanas de autorización que debemos aceptar y terminado eso, aparecerá la plantila lista para ser editada (ver captura)



El siguiente paso es modificar los datos colocando la dirección de nuestro sitio en la celda B2 (si queremos agregar varios, los separamos con comas y en la celda B3 escribimos nuestra dirección de mail. Finalmente, en la celda B4 ponemos Yes si queremos recibir alertas SMS o No si no queremos.



Hay que tener en cuenta que si queremos esas alertas deberemos configurar Google Calendar con el número del móvil.

Cuando todo está listo, en el menú Website Monitor hacemos click en Start Monitoring y listo.



Para quien esté interesado en el tema, el código fuente del Google Apps Script se puede ver en esta página y, si por cualquier motivo no queremos eliminar la plantilla pero necesitamos deshabilitarla, basta editarla otra vez y dejar en blanco la celda B3 que es la que contiene nuestra dirección de mail.