Social Lego icons

JMiur [E]

Social Lego
	Contiene 20 íconos de 256x256, en formato PNG. descargar

Otro cambio en el botón Google +1

Según anuncian en su blog oficial, Google ha realizado otro cambio en su botón +1 para permitir que las entradas puedan enviarse y compartirse, de manera similar al botón compartir de Facebook.

Como en casos anteriores, los cambios sólo son accesibles desde la página de opciones siempre que se seleccione el idioma inglés y, por ahora, sólo se aplican a quienes se hayan registrado en Google+ Platform Preview sin embargo, nada impide modificar el código de nuestros botones para que ya estén preparados.

En Blogger, por lo general, usamos algo similar a esto:

<b:if cond='data:blog.pageType == "item"'>
  <g:plusone size='medium' />
</b:if>

simplemente, debemos agregarle un nuevo atributo:

<g:plusone size='medium' annotation='inline' />

Hay que recordar que en este ejemplo, el botón sólo se visualiza en las páginas individuales y si alguien quiere que también sea visible en el home, es imprescindible que se añada la URL ya que en ese caso, no habrá un botón en la página sino varios y en cada uno de ellos se debe indicar de manera explícita, la dirección de la entrada.

En esos casos, el código debería ser algo así:

<g:plusone size='medium' annotation='inline' expr:href='data:post.url' />

Eso que se comparte, Google lo denomina snippet, que no es otra cosa que un resumen de la página acompañada por una imagen. Estos snippets pueden ser personalizados pero, en Blogger, no sé si será posible ya que para eso se necesitan agregar unas etiquetas META, similares a las que utiliza Facebook (la verdad, podrían ponerse de acuerdo y unificarlas para no molestarnos con sus guerras empresariales) pero, imagino que tendrán las mismas restricciones; al no poder acceder a los datos necesarios, es probable que nos veamos privados de esa posibilidad. Habrá que ver si el servicio lo hace de modo automático o no.

De todos modos, Google dice que para usar este tipo de cosas, deberíamos agregar un atributo (otro más) a la etiqueta HTML:

<html itemscope itemtype='http://schema.org/Article' .................................. >

Y definir los datos a mostrar con estas etiquetas:

<meta itemprop='name' content='el título de la entrada' />
<meta itemprop='description' content='la descripción o resumen de esa entrada' />
<meta itemprop='image' content='la imagen que acompaña ese resumen' />

Por lo que ahora veo. Parecería que existe una foram de personalizar eso en Blogger y en Customize +Snippet, seleccionar:

Markup Location:
Inside the page's <head> tag.
Inside the page's <body> tag.

De ese modo, en luagr de usar etiquetas META usamos etiquetas SPAN e imagino yo que podrán colocarse dentro del LOOp de las entradas:

<span itemprop='name'>el título de la entrada</span>
<span itemprop='description'>la descripción o resumen de esa entrada</span>

Efecto Flip Page con CSS

Pure CSS3 Page Flip Effect es un experimento más de Román Cortés que, por la fecha de su realización, sólo funcionaba en Chorme pero, que con algunos pequeños agregados, también funcionará en otros navegadores.

Las reglas de estilo son bastante complejas aunque no usan propiedades sofisticadas así que no se pueden explicar demasiado; sólo hay que poner manos a la obra, hacer algunos calculos aritméticos e ir probando poco a poco porque el resultado es espectacular y permitiría hacer muchas otras cosas.

En este ejemplo, me he limitado a agregar las propiedades para Firefox y he simplificado un poco la idea.

Pure CSS3 Page Flip Effect

<style type="text/css">
#page-flip {
  height: 450px;
  overflow: hidden;
  padding: 30px 0 0 320px;
  position: relative;
  width: 300px;
}
#r1 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p1 > div {
  background-image: url(URL_primera_imagen);
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1030px, 500px) rotate(32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1030px, 500px) rotate(32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p1 > div > div {
  height: 388px;
  width: 10px;
}
 #p2 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  height: 388px;
  position: absolute;
  width: 285px;
  z-index: 1;
}
#r3 {
  position: absolute;
  z-index: 2;
  -webkit-transform-origin: 1315px 500px;
  -webkit-transform: translate(-1030px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 1315px 500px;
  -moz-transform: translate(-1030px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#s3 {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: 70px 500px;
  -webkit-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 70px 500px;
  -moz-transform: translate(215px, -500px) rotate(-32deg) translate(40px, 0);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#page-flip:hover #s3 {
  -webkit-transform-origin: 325px 500px;
  -webkit-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
  -moz-transform-origin: 325px 500px;
  -moz-transform: translate(-40px, -500px) rotate(0deg) translate(40px, 0);
}
#sp3 {
  height: 1000px;
  overflow: hidden;
  width: 25px;
  -webkit-transition-property: width;
  -webkit-transition-duration: 1s;
  -moz-transition-property: width;
  -moz-transition-duration: 1s;
}
#page-flip:hover #sp3 {
  width: 11px;
}
.s {
  height: 388px;
  position: absolute;
  overflow: hidden;
  width: 285px;
  z-index: 3;
}
#s2 {
  position: absolute;
  -webkit-transform-origin: 45px 500px;
  -webkit-transform: translate(240px, -500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 45px 500px;
  -moz-transform: translate(240px, -500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#sp2 {
  height: 1000px;
  overflow: hidden;
  width: 15px;
}
#s4 {
  opacity: 1;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
}
#page-flip:hover #s4 {
  opacity: 0;
}
#page-flip:hover #s2 {
  -webkit-transform-origin: 300px 500px;
  -webkit-transform: translate(-15px, -500px) rotate(0deg);
  -moz-transform-origin: 300px 500px;
  -moz-transform: translate(-15px, -500px) rotate(0deg);
}
#p3 {
  height: 1388px;
  overflow: hidden;
  width: 1285px;
}
#p3 > div {
  background-image: url(URL_segunda_imagen);
  box-shadow: 0 0 11px rgba(0, 0, 0, .5);
  overflow: hidden;
  height: 388px;
  width: 285px;
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1255px, 500px) rotate(-32deg);
  -webkit-transition-property: -webkit-transform, -webkit-transform-origin;
  -webkit-transition-duration: 1s;
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1255px, 500px) rotate(-32deg);
  -moz-transition-property: -moz-transform, -moz-transform-origin;
  -moz-transition-duration: 1s;
}
#p3 > div > div {
  float: right;
  height: 500px;
  width: 9px;
}
#page-flip:hover #r1 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p1 > div {
  -webkit-transform-origin: 285px 0;
  -webkit-transform: translate(1285px, 500px) rotate(0deg);
  -moz-transform-origin: 285px 0;
  -moz-transform: translate(1285px, 500px) rotate(0deg);
}
#page-flip:hover #r3 {
  -webkit-transform-origin: 1570px 500px;
  -webkit-transform: translate(-1285px, -500px) rotate(0deg);
  -moz-transform-origin: 1570px 500px;
  -moz-transform: translate(-1285px, -500px) rotate(0deg);
}
#page-flip:hover #p3 > div {
  -webkit-transform-origin: 0 0;
  -webkit-transform: translate(1000px, 500px) rotate(0deg);
  -moz-transform-origin: 0 0;
  -moz-transform: translate(1000px, 500px) rotate(0deg);
}
#enlace {
  color: #FFF;
  display: block;
  font-family: Verdana;
  font-size: 32px;
  height: 320px;
  margin: -20000px 0 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 3px 1px #000;
  width: 250px;
  z-index: 3;
  -webkit-transition-duration: 0.01s;
  -webkit-transition-property: margin;
  -moz-transition-duration: 0.01s;
  -moz-transition-property: margin;
}
#enlace:hover {
  border: 1px dotted #CCC;
}
#page-flip:hover #enlace {
  margin: 30px 0 0 15px;
  -webkit-transition-delay: .8s;
  -moz-transition-delay: .8s;
}
</style>

<div id="page-flip">
  <div id="r1">
    <div id="p1"><div><div></div></div></div>
  </div>
  <div id="p2"><div></div></div>
  <div id="r3">
    <div id="p3"><div><div></div></div></div>
  </div>
  <div class="s">
    <div id="s3"><div id="sp3"></div></div>
  </div>
  <div class="s" id="s4">
    <div id="s2"><div id="sp2"></div></div>
  </div>
  <a id="enlace" href="URL_enlace" title="" target="_blank">texto del enlace</a>
</div>

Vísteme despacio que estoy apurado

Que optimizar los sitios es algo que debería ser una tarea constante, no cabe la menor duda. Si lo hacemos o no lo hacemos, es otra historia pero, nadie en su sano juicio diría que es mejor algo que funciona mal que algo que funciona bien.

Sin embargo, esta constante presión de Google sobre aquellos que administran sitios web se está volviendo un tema que, en algún momento explotará porque se basa en conceptos erróneos o simplemente arbitrarios que dejan de lado particularidades que son, en definitiva, eso que le da sabor a las cosas de este mundo.

A la extensión llamada Page Speed donde nos daban discutibles sugerencias para hacer que las páginas web analizadas mejoran su velocidad de carga, le han agregado lo que ellos denominan el Servicio Page Speed que asceleraría la carga de esas páginas de modo automático para lo cual uno debe "registrarse y apuntar la entrada de DNS de tu sitio a Google."

El servicio Page Speed recupera contenido de los servidores pertinentes, reescribe las páginas aplicando las prácticas recomendadas para mejorar el rendimiento de páginas web, y las sirve a los usuarios finales a través de los servidores de Google en todo el mundo. Los usuarios continuarán accediendo al sitio web tal como lo hacían antes, pero con tiempos de carga menores. Ahora ya no es necesario preocuparse de concatenar CSS, comprimir imágenes, almacenar contenido en caché, comprimir recursos en gzip, ni de otras prácticas recomendadas para lograr el máximo rendimiento en web.

Obviamente, todo eso nada tiene que ver con servicios como Blogger que, seguramente, no deben haberse registrado aún porque el sistema sigue siendo muy lento y está muy poco optimizado pero, ya se sabe que en casa de herrero, cuchillo de palo; además ... no es un servicio gratuito.

De todas maneras, es posible hacer la prueba y ver el resultado; entramos a su página, colocamos la URL del sitio a verificar y esperamos (unos 5/6 minutos promedio).

Una vez terminado, los resultados son muchos, pueden ser navegados hasta el hartazgo y hasta incluyen un video comparativo.

Todo lindo pero uno que es un simple mortal se pregunta ¿en qué cambiara mi vida si cierto sitio tarda un segundo más o un segundo menos? ¿Seré más feliz? ¿Aprovecharé ese segundo para algo más útil que parpadear? ¿Valdrá la pena cederle el control de la web a una empresa monopólica a cambio de destellos de tiempo que no llegan a ser un tic-tac del reloj?

No, no se trata de hacer las cosas mal o conformarse; se trata de diferenciar lo importante de lo intrascendente y dejar de pensar como si fuéramos maquinitas que deben funcionar con exactitud milimétrica y de seguir a rajatabla las reglas que se nos pretenden imponer.

La mejor heramienta, para esto y para cualquier otra cosa es el sentido común y para usarla, no hay que registrarse y es gratuita.

Dudas y errores cuando se usa CSS

Interensante artículo de CSS Tricks donde se muestran las diferencias que suelen confundirnos cuando creamos reglas de estilo; algo que no sólo ocurre con los principiantes sino con todos nosotros.

Un pequeño resumen de ese artículo.

¿Cuál es la diferencia entre estas dos reglas?

.demo { color: red; }
p.demo { color: red; }

La primera, hará que el texto de cualquier etiqueta que tenga como atributo la clase demo, se vea de color rojo:

<div class="demo"> el texto es rojo </div>
<span class="demo"> el texto es rojo </span>

La segunda, sólo funcionará en las etiquetas P que tengan ese atributo, cualquier otra, no será afectada.

<div class="demo"> el texto será de cualquier color </div>
<p class="demo"> el texto es rojo </p>

¿Y cuál es la diferencia entre estas dos reglas?

.demo p { color: red; }
p.demo { color: green; }

La primera, hará que los textos de las etiquetas P que estén dentro de algún contenedor que tenga como atributo la clase demo, se vea de color rojo:

<div class="demo">
  <p> el texto es rojo </p>
  <span> el texto será de cualquier color </span>
</div>

La segunda, hará que se vean rojos los textos de cualquier etiqueta P que tenga definida esa clase, tal como en el caso anterior.

¿Cuál es la diferencia entre un ID y una clase?

¿Da lo mismo usar uno que otro? Definitivamente no (más información). Los IDs deben ser únicos, sólo una etiqueta en toda la página debe tener ese nombre y se los entiende como "más importantes"; si se usan IDs y clases en al misma etiqueta, las reglas definidas para el ID tienen preponderancia sobre las de la clase porque las propiedades poseen un orden de prioridades:

#demoID { color: red; }
.demoCLASE { color: green; }

<div id="demoID" class=demoCLASE""> el texto será rojo </div>

¿Puede usarse hover para modificar una etiqueta interna?

<div class="demo">
  <p> Sed vitae tortor turpis. <span>Nullam blandit</span> ornare urna vitae rhoncus. </p>
  <p> Nam lacinia lacinia risus, sed <span>elementum libero</span> imperdiet non. </p>
</div>

Con estas reglas, cuando ponemos el cursor sobre ese rectángulo, el texto será amarillo:

.demo { color: red; }
.demo:hover { color: yellow; }

Sed vitae tortor turpis. Nullam blandit ornare urna vitae rhoncus.

Nam lacinia lacinia risus, sed elementum libero imperdiet non.

Con esta otra, lo que cambiará es el color de las etiquetas SPAN que estén dentro del DIV:

.demo { color: red; }
.demo:hover span { color: yellow; }

Sed vitae tortor turpis. Nullam blandit ornare urna vitae rhoncus.

Nam lacinia lacinia risus, sed elementum libero imperdiet non.

¿Los espacios y los puntos y comas son obligatorios?

Los espacios son obligatorios cuando separan palabras claves. Estas dos cosas son lo mismo:

.demo{color:red;}
.demo {      
      color :       red;
}

Estas dos no son lo mismo:

.demo{background:trasnparent url() no-repeat left top;}
.demo{background:trasnparent url()no-repeat left top;}

La primera, funcionará correctamente en cualquier navegador, la segunda, no se aplicará en IE porque falta el espacio entre el cierre del paréntesis y la palabra no-repeat

El punto y coma es obligatorio siempre, excepto en la última propiedad:

Esto es correcto

.demo {
  color: red;
  font-size: 12px
}

Esto es incorrecto:

.demo {
  color: red
  font-size: 12px
}

Es mejor tener la costumbre de agregarlo siempre:

.demo {
  color: red;
  font-size: 12px;
}

¿Qué propiedad se aplica cuando se definen varias veces?

.demo {
  color: red;
  font-size: 18px;
  color: green;
}

La última; siempre la última; en este caso, el color a usar será el verde.

html5media: Audio y video sin complicaciones

Reproductor alternativo para YouTube

Suscribirse a la entradas

Vagabundia

Social Lego icons

Otro cambio en el botón Google +1

Efecto Flip Page con CSS

Vísteme despacio que estoy apurado

Dudas y errores cuando se usa CSS

html5media: Audio y video sin complicaciones

Reproductor alternativo para YouTube

últimas entradas

la puerta abierta

las etiquetas

Páginas