23oct

2012

Seguimiento de descargas

JMiur [E]

Algunas personas que tienen sitios desde donde se descargan archivos de distinto tipo, han preguntado si hay una forma de mantener un registro de esas descargas, algo que muchos servicios donde se alojan esos archivos permiten o incluyen pero otro nos y, desde Blogger, no hay muchas alternativas.

Una de ellas es usar Google Analytics que es un servicio que se integra desde la misma Configuración del blog o manualmente, copiando y pegando el script que ellos proveen.

Teniéndolo incluido, podemos, ellos nos dan la posibilidad de hacer un seguimiento de cualquier enlace en particular aunque las explicaciones que ahora nos muestran son poco claras; más fácil es entender el método leyendo la ayuda "vieja" aunque esté en inglés ya que la metodología no ha cambiado.

¿Qué nos dicen? Que si tenemos un enlace de cualquier tipo:

<a href="URL_archivo">descargar</a>

bastaría agregarle un evento onclick que llame a la función de Google Analytics y, de ese modo, las descarga del archivo será registrada por el servicio:

<a href="URL_archivo" onclick="_gaq.push(['_trackPageview','URL_archivo']);">descargar</a>

o bien:

<a href="URL_archivo" onclick="_gaq.push(['_trackEvent','URL_archivo']);">descargar</a>

Usar uno u otro sistema dependerá de la forma en que quisiéramos que se registraran los datos y las diferencias entre _trackPageview y _trackEvent quedan para ser estudiadas por cada uno ya que, además poseen parámetros opcionales.

Si quisiéramos automatizar esto y agregarlo a los enlaces sin tener que escribirlos manualmente, deberías usar alguna clase de script. Por ejemplo, usando jQuery podríamos usar una clase para identificar los archivos:

<a class="descarga" href="URL_archivo">descargar</a>

y poner una función así:

$('.descarga').click(function () {
  _gaq.push(['_trackPageview', $(this).attr('href').replace('http://','')]);
});

o así:

$('.descarga').click(function () {
  _gaq.push(['_trackEvent', 'MISdescargas']);
});

Y para quien no quiera complicarse la vida, llegado el caso, pueden usar entourage.js que es un script que agregamos antes de </head> o antes del código de Google Analytics y hará todo eso de modo automático.

Muchos íconos en blanco y negro

Loop icons Contiene 106 íconos de 16x16 en formato PNG. descargar Windows phone Contiene 1482 íconos de 48x48 en formato PNG. descargar …

21oct

2012

TinyScroller: Simple y personalizable

TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con …

16oct

2012

TinyScroller es un script muy sencillo que no requiere librerías extras y nos permite mostrar mucho contenido en un espacio pequeño tal como normalmente hacemos cuando usamos un contenedor con cierta altura dimensionada y le aplicamos la propiedad overflow para que se pueda ver utilizando una barra de desplazamiento.

El script es realmente pequeño, uno poco más de 50 líneas sin comprimir aunque el ZIP que lo contiene también incluye una versión minimizada.

Lo agregamos como cualquier otro, alojándolo en un servidor o directamente, antes de <head>:

<script type='text/javascript'>
//<![CDATA[
var TINY={};
function T$(id){return document.getElementById(id)}
function T$$$(){return document.all?1:0}
TINY.scroller=function(){
  return{
    init:function(a,c,b,s,d){
      a=T$(a); a.c=c; a.s=s; c=T$(c); b=T$(b); s=T$(s); a.n=d||0;
      b.style.display='block'; a.style.overflow='hidden';
      var h=a.offsetHeight, t=c.offsetHeight;
      if(t<h){
        b.style.display='none'
      }else{
        a.m=h-t; a.d=t/h; s.style.height=(h*(h/t))+'px'; s.style.top=b.style.top=0;
        s.onmousedown=function(event){TINY.scroller.st(event,a.id); return false};
        s.onselectstart=function(){return false}
      }
      a.l=b.offsetHeight-s.offsetHeight
    },
    st:function(e,f){
      var a=T$(f), s=T$(a.s); a.bcs=TINY.cursor.top(e); a.bct=parseInt(s.style.top);
      if(a.mv){this.sp(f)}
      a.mv=function(event){TINY.scroller.mv(event,f)};
      a.sp=function(){TINY.scroller.sp(f)};
      if(T$$$()){
        document.attachEvent('onmousemove',a.mv); document.attachEvent('onmouseup',a.sp)
      }else{
        document.addEventListener('mousemove',a.mv,1); document.addEventListener('mouseup',a.sp,1)
      }
      if(a.d){s.className+=' '+a.n}
    },
    mv:function(e,f){
      var a=T$(f), m=TINY.cursor.top(e)-a.bcs+a.bct, s=T$(a.s), c=T$(a.c);
      if(m>=0&&m<a.l){
        s.style.top=m+'px'; c.style.top=(m*-1*a.d)+'px'
      }else if(m<0){
        s.style.top=0; c.style.top=0
      }else if(m>a.l){
        s.style.top=a.l+'px'; c.style.top=a.m+'px'
      }
    },
    sp:function(f){
      var a=T$(f), s=T$(a.s); if(a.d){s.className=s.className.replace(' '+a.n,'')}
      if(T$$$()){
        document.detachEvent('onmousemove',a.mv); document.detachEvent('onmouseup',a.sp)
      }else{
        document.removeEventListener('mousemove',a.mv,1); document.removeEventListener('mouseup',a.sp,1)
      }
      a.mv=0;
    }
  }
}();
TINY.cursor=function(){
  return{
    top:function(e){
      return T$$$()?window.event.clientY+document.documentElement.scrollTop+document.body.scrollTop:e.clientY+window.scrollY
    }
  }
}();
//]]>
</script>

Y lo usarmemos de este modo:

<div id="ejemplo-scroll" class="scroll">
  <div id="ejemplo-scrollcontent" class="scrollcontent">
    ....... acá pondremos nuestro contenido .......
  </div>
  <div id="ejemplo-scrollbar" class="scrollbar">
    <div id="ejemplo-scroller" class="scroller"></div>
  </div>
</div>

e inmediantamente debajo, llamamos a la función que en este caso, sería así:

<script type="text/javascript">TINY.scroller.init('ejemplo-scroll','ejemplo-scrollcontent','ejemplo-scrollbar','ejemplo-scroller','buttonclick');</script>

Eso, lo haremos siempre del mismo modo, con la misma sintaxis, colocando en la función los cinco parámetros que son los IDs que hemos elegido:

el ID del contenedor que en este caso llamé ejemplo-scroll
el ID del contenido que llamé ejemplo-scrollcontent
los IDs de lso DIVs auxiliares que mostrarán la barra de desplazamiento y el botón: (ejemplo-scrollbar y ejemplo-scroller)
y la clase de ese botón (buttonclick)

Por último, necesitamos el CSS que es lo que podemos personalizar y que en este caso, rearmé agregando clases par que, de esa forma, pudieran mostrarse con distintos tamaños y detalles gráficos:

<style>

  /* las reglas genéricas */
  .scroll { /* el contenedor */
    overflow: auto;
    position: relative; 
  }
  .scrollcontent { /* el contenido */
    position: absolute;
    z-index: 200;
  }
  .scrollbar { /* la barra de desplazamiento es una imagen */
    background:url(URL_scroll-bg.gif);
    display: none;
    float: right;
    position: relative;
    width: 15px;
    z-index: 100;
  }
  .scroller  { /* el botón de desplazamiento también es una imagen */
    background-color: #CCC;
    background-image: url(URL_scroll-arrows.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    width: 15px;
  }
  .buttonclick { background-color:#BBB; }

  /* y defino los anchos, altos y otros detalles de cada uno de elllos */
  #ejemplo-scroll { /* 
    background-color: #000;
    margin: 0 auto;
    height: 200px; /* el ancho */
    width: 300px; /* el alto */
  }
  #ejemplo-scrollcontent {
    width:275px; /* el ancho del contenedor menos el ancho de la barra de desplazamiento */
  }
  #ejemplo-scrollbar {
    height: 200px; /* el mismo alto que el contenedor */
  }

</style>

Bastaría establecer otros valores para crear otro modelo y usarlo en la misma página:

#otro-scroll{
  background-color: #222;
  border: 2px solid #000;
  height: 270px;
  margin: 0 auto;
  outline: 1px solid #666;
  width: 600px;
}
#otro-scroll{width: 575px;}
#otro-scroll{height: 270px; }

El atributo required

El atributo required es otra de las nuevas alternativas que se agregan al HTML5 y lo que hace es indicar que cierto campo debe ser "llenado" y evitar que un formulario se envíe sin contenido. Aunque …

11oct

2012

Agregar fullscreen a distintos elementos

Mostrar contenido en pantalla completa no es algo exclusivo de los videos incrustados ya que puede hacerse sobre cualquier otro contenido aunque siempre veremos la advertencia del navegador que nos …

9oct

2012

simpleWeather: El tiempo en el blog con jQuery

5oct

2012

simpleWeather es un plugin de jQuery que sirve para mostrar informacion sobre el estado del tiempo del tiempo en un lugar definido y que para eso, utiliza el API Weather feed de Yahoo.

El script es muy simple porque, en realidad, no genera la salida sino que simplemente obtiene los datos así que la parte complicada del asunto es que nosotros debemos armar el HTML correspondiente.

Una vez que agregamos el script a la plantilla, deberíamos crear la función que es lo que mostrará el resultado; básicamente es algo así:

$.simpleWeather({
  location: 'xxxxxxxxxxx',
  unit: 'c',
  success: function(weather) { ... },
  error: function(error) { ... }
});

donde location es la ciudad y unit indica la unidad de la temperatura.

Este es un ejemplo simple:

<script type="text/javascript">
//<![CDATA[
$(function() {
  $.simpleWeather({
    location: 'xxxxxxxxxxx',
    unit: 'c',
    success: function(weather) {
       html = '<h2>'+weather.city+'</h2>';
       html += '<img src="'+weather.image+'"/>';
       html += '<p>'+weather.temp+'° '+weather.units.temp+'<span>'+weather.currently+'</span></p>';
       $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
});
//]]>
</script>

Así que ahora, bastaría colocar el DIV de salida allí donde quisiéramos mostrarlo:

<div id="weather"></div>

Y un poco de CSS:

<style>
#weather {
  background-color: #456;
  border: 4px solid #ABC;
  overflow: hidden;
  padding: 10px 20px 0;
  position: relative;
  text-align: center;
  width: 185px;
}
#weather h2 {
  color: #DEF;
  font-family: Century Gothic;
  font-size: 28px;
  font-weight: normal;
  letter-spacing: -3px;
  margin: 0;
  text-align: center;
}
#weather img {
  margin-top: 10px;
}
#weather p {
  color: #DEF;
  font-family: Times New Roman;
  font-size: 48px;
  left: 80px;
  letter-spacing: -6px;
  margin: 0;
  position: absolute;
  top: 140px;
}
#weather p span {
  color: #ABC;
  display: block;
  font-size: 20px;
  letter-spacing: 0;
  text-transform: lowercase;
}
</style>

Bordes, listas, el primero y el último

Esta es una solución sencilla a un problema común. Tengo una lista cualquiera y quiero ponerle un borde o separador a cada uno de los items que la componen:<div id="demobordes"> <ul> …

3oct

2012

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 …

1oct

2012

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:

Suscribirse a la entradas

Vagabundia

Seguimiento de descargas

Muchos íconos en blanco y negro

TinyScroller: Simple y personalizable

El atributo required

Agregar fullscreen a distintos elementos

simpleWeather: El tiempo en el blog con jQuery

Bordes, listas, el primero y el último

Una curiosidad: Logos de GMail con CSS3

últimas entradas

Hogar, dulce hogar

Unos cuantos íconos especiales

Notas desde el navegador

El futuro y la propiedad @supports

Los comentarios de Google+ en cualquier página

la puerta abierta

las etiquetas

Páginas

Loop icons
	Contiene 106 íconos de 16x16 en formato PNG. descargar

Windows phone
	Contiene 1482 íconos de 48x48 en formato PNG. descargar