Firefox 16: Sin prefijos en el CSS

A partir de la versión 16 de Firefox, ya resulta innecesario agregar prefijos en la mayoría de las propiedades de CSS3 que se utilicen en este navegador con lo cual, poco a poco, nos vamos acercando a la estandarización mínima que requiere el diseño web: hablar el mismo idioma.

Así el -moz- puede desaparecer de las propiedades animation, transition, transform y de las gradientes:

• animation, animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes
• transition, transition-property, transition-delay, transition-duration, transition-timing-function
• CSS3 Transforms transform, transform-origin, transform-style, backface-visibility, perspective, perspective-origin
• CSS3 Image Values linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient()

Es de esperar que la gente de Chrome haga lo mismo rápidamente y aliviarnos la tarea de estar tecleando y tecleando.

REFERENCIAS:hacks.mozilla.org

Esta es una traducción aproximada de un artículo publicado en The Real Blogger Status que me llamó la atención:

Blogger no censurará comentarios o aceptará reportes sobre comentarios abusivos

En los Foros de Ayuda de Blogger, muchas veces se pregunta ¿Por qué Blogger no me da la opción de bloquear a un comentarista abusivo?

Esta es una petición que simplemente no se pueden cumplir ya que:

• es técnicamente imposible
• es contrario a la política de Blogger

Porque cualquier persona puede crear varias cuentas de Google sin esfuerzo y Blogger no van a perder tiempo en desarrollar funciones de bloqueo que sólo darían una falsa sensación de seguridad ya que no tendría efectos a largo plazo.

Si usted realmente siente que un comentarista representa una amenaza legal o física, debe reportar la amenaza a las autoridades locales. Si se trata de otro tipo de "molestia", Blogger considera que es "libertad de expresión" y por lo tanto, la publicación de ese tipo de comentarios es de quien los hace y quien los permite ya que el administrador de un blog, usted puede elegir qué comentarios publicar y qué comentarios rechazar para lo cual existe la opción de moderarlos.

Si cualquier comentario lo ofende, modérelos o elimínelos lo antes posible. Concéntrese en la publicación de su blog y pase por alto estos abusos. Con el tiempo, la persona abusiva se aburrirá y seguirá adelante.

A simple vista, la explicación parece razonable pero mezcla verdades, mentiras y excusas.

En primer lugar, es cierto que la responsabilidad de lo publicado es nuestra; tanto si somos administradores de un blog como si somos comentaristas pero, es completamente falso que Blogger no pueda implementar técnicamente este tipo de función, que sea una opción inútil o que sea algo contrario a sus políticas. Por favor, no traten de enarbolar banderas para justificar lo injustificable.

De hecho, Blogger TIENE varias opciones de denuncia. En la navbar (Informar sobre mal uso), en los comentarios (marcar como spam); cada tanto, aparecen direcciones para reclamar por violaciones al copyright.

Muchos otros servicios de Google tienen opciones de bloqueo o filtros diversos, GMail, YouTube ... casi cualquier sistema de redes sociales posee lo mismo (y un blog es una red social). Es algo casi elemental.

Todas esas herramientas nada tienen que ver con la censura ni limitan la libertad de expresión de nadie porque libertad de expresión es defender dos derechos: el de cualquiera a decir lo que se le de la gana y el mio a decidir si quiero o no quiero escucharlo; si no se defienden ambos derechos no hablamos de libertad de expresión.

A veces, parecería que cuando se trata de la web, el concepto de la libertad está un poco tergiversado. Una cosa es que yo acepte, admita o defienda la libertad de cualquiera, de hacer de su propio espacio el sitio que quiera y otra cosa es que yo permita que aquello que no me gusta, se traslade al mio. Ese concepto es tan elemental como eso de que cada hogar es un mundo ... pero el mio es mio.

Poner límites no significa coartar la libertad de nadie porque no creo que nadie pueda ser feliz haciendo infelices a otros a menos que sea alguna especie de psicótico. Respetar y ser respetado, las reglas son muy sencillas.

Cuando me dejo de sentir cómodo en cierto lugar porque no me gustan sus reglas, lo que debo hacer es irme silbando bajito y a otra cosa. Lo mismo pasa si lo que veo no es de mi agrado o si no cubre mis expectativas ¿Qué voy a hacer? ¿Decirle al otro que eso no me gusta? ¿A quién le puede importar? ¿Qué aporto? ¿Qué cambiará? ¿Acaso debo ser el juez de todo? ¿Acaso los otros deben darme explicaciones? Sería mejor utilizar el viejo criterio y callarse a menos que se tenga algo bueno que decir. Ser sincero no es decir siempre lo que uno piensa, sobre todo, cuando nadie nos ha preguntado nuestra opinión.

La máscara que nos provee la web es un arma de doble filo. Por un lado, nos permite re-inventarnos a nosotros mismos y despojarnos de timideces, traumas y miedos. Por el otro, parece habilitar a que algunos saquen lo peor de si.

La máscara provoca embriaguez, aguza los sentidos, destraba la lengua (o los dedos) pero nos enfrenta al riesgo de sentirnos omnipotentes, de hacernos creer que nuestra voz debe ser escuchada a como de lugar.

Estos son algunos plugins que requieren jQuery para funcionar y que me han parecido interesantes para ir probando aunque se trata de cosas demasiado específicas como para intentar mostrar ejemplos concretos para cada uno de ellos así que ... a arremangarse e intentarlo.

Tinycon

No sé que utilidad puede tener aplicado a Blogger pero este plugin cambia el favicon agregándole una burbuja con algún tipo de dato variable.

jQuery Corner

Es un plugin que permite generar decenas de bordes distintos, simples o complejos ya predefinidos y, obviamente no funcionará en los navegadores que no admitan CSS3.

jPages

Un plugin muy completo que sirve para generar contenido paginado, algo que normalmente está reservado para lenguajes que se ejecutan del lado del servidor.

MediaElement.js

Complejo sistema que permite crear reproductores de audio y video utilizando sólo HTML y CSS e incluye soporte para Flash y Silverlight por lo que funciona incluso en navegadores que no soportan HTML5.

jCarousel

Un plugin para controlar el orden de cualquier lista que pueden ser estáticas o bien ser cargadas usando AJAX.

fitvidsjs

Un plugin muy liviano que permite transformar los videos incrustados en objetos fluidos que se adapten a cualquier contenedor.

infinity

Genera código que ayuda a controlar la forma en que se ven listas muy largas, usando animaciones suaves.

rotate3Di

Plugin para crear efectos 3D con rotaciones y animaciones

imagesLoaded

Una forma sencilla de determinar si una o varias imágenes se han cargado y actuar en consecuencia.

tooltipster

Un sistema completo para generar tooltips en cualquier tipo de etiqueta que incluso, funciona en viejas versiones de Internet Explorer.

Hay quien aún se preocupa porque su sitio se vea en ciertos navegadores como Internet Explorer 6 por ejemplo, cosa que, a esta altura del siglo 21, carece de todo sentido práctico. Incluso, hay quienes se preocupan por IE7 que parecería más moderno pero en realidad, sólo fue una prueba fallida que trajo más problemas que soluciones.

Claro que, cada cuál puede hacer lo que quiera pero, si se usa Blogger, hay que saber que ninguno de esos navegadores es soportado por el sistema mismo y, si bien por ahora podemos acceder al servicio sin restricciones usando cualquier tipo de navegador, Blogger nos advierte que no se responsabiliza por los resultados y, cualquier cosa es posible.

En su página de ayuda Blogger and browser compatibility no da la lista de los navegadores soportados:

Y en el caso de IE8 y 9, nos advierte que debemos deshabilitar la opción de compatibilidad

Todo muy lindo, todo muy razonable pero si todo es así ¿por qué demonios Blogger sigue agregando automáticamente esta etiqueta en las platillas?

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

Ya que, lo que hace eso es justamente lo contrario, indicarle a IE que debe usar el modo compatibilidad, es decir, si estamos usando IE8 o IE9 el blog se mostrará como si usáramos IE7. Moraleja, a la ridiculez de Microsoft se le suma la de Google así que, ya sabemos en manos de quien estamos XD

Lo primero que debe hacerse en una plantilla de Blogger es sobrescribir esa etiqueta y abandonar de una buena vez esta locura de pretender compatibilidad absoluta con todo navegador y todo dispositivo a costa de nosotros, los usuarios, que debemos hacer malabares para resolver los problemas que ellos generan así que hay que agregar lo siguiente inmediatamente después de <head>

<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>

Nosotros, sólo debemos entender que un blog con cierto diseño, no se verá igual en un móvil con una pantallita de 320 pixeles de ancho que en un monitor widescreen salvo que pensemos ese diseño con anterioridad y adaptemos las cosas para que ello ocurra. Los límites existen siempre, basta saber cuáles son para usarlos a nuestro favor o ... hacer cualquier cosa menos ignorarlos.

Según me contaba Roudy Capella, Pinterest ahora permite verificar el sitio web que hayamos agregado en nuestro perfil. Esa opción se realiza mediante un archivo que uno debe alojar en su sitio pero, claro, quienes usan Blogger, aparentemente no pueden hacerlo ya que no hay manera de subir un archivo a un servidor que no existe.

Ellos dicen que por el momento, servicios de blogs quedan excluidos excepto Tumblr y prometen ir agregando otras opciones

Sin embargo, en la misma ayuda, se encuentran enlaces a métodos alternativos para WordPress e incluso para Blogger mismo así que es cosa de probar y ver.

El procedimiento parece algo raro pero funciona así que trataré de mostrarlo paso a paso tal como lo hice por si alguien no entiende inglés que es el idioma original de la ayuda.

Lo primero que debemos hacer es entrar en nuestra cuenta de Pinterest y allí, ir a Configuracióndonde veremos la dirección de nuestro sitio (si lo hemos agregado) y un botón Verificar sitio web:

Hacemos click en el botón y aparecerá una ventana de advertencia donde nos dice que no podremos verificar un dominio de blogspot pero, lo ignoramos y ... click here:

Descargamos el archivo que nos den que tendra como nombre pinterest-xxxxx.html y que será personal por lo que incluirá números y letras diversas:

Y dejamos esa página abierta.

Ahora, nos vamos a Blogger y creamos una página estática nueva a la que le damos cualquier nombre. Abrimos el archivo previamente descargado con cualquier editor como el block de notas, copiamos su contenido y lo pegamos en nuestra nueva página, verificando que estemos en el modo HTML. Luego, publicamos la página y tomamos nota de su dirección url que será algo así:

http://nombre.blogspot.com/p/titulo-de-la-pagina.html

Vamos a la Configuración de Blogger y en el apartado Preferencias de búsqueda, elegimos Redireccionamiento personalizado, Editar.

En el item De: colocaremos la dirección url tal como la esperaría Pinterest que es el nombre del archivo descargado:

/pinterest-xxxxx.html

y en el item Para: colocaremos la dirección url de la página que hayamos creado:

/p/titulo-de-la-pagina.html

y marcamos Permanente, sin olvidar que las direcciones son relativas y comienzan con una barra:

Ya terminamos, podemos volver a la página de Pinterest y decirle que todo esta listo Haz click aquí para completar el proceso; si hicimos las cosas bien, nos dirá que el sitio fue verificado:

Y podremos ver ese dato en nuestro Perfil:

prefix-free es un script que habría que tener muy en cuenta ya que nos ayuda a resolver uno de los problemas más molestos a la hora de escribir reglas de estilo "modernas" ya que lo que hace es agregar de modo automático, los prefijos correspondientes para cada navegador de tal modo que no sería necesarios escribir algo así:

.una-regla {
  background-image: -moz-linear-gradient(#000,#FFF);
  background-image: -webkit-linear-gradient(#000,#FFF);
  background-image: -o-linear-gradient(#000,#FFF);
  background-image: -ms-linear-gradient(#000,#FFF);
  background-image: linear-gradient(#000,#FFF);
}

y todo ese exceso de líneas (que, inevitablemente uno termina equivocando u olvidando) se transformaría en es esto:

.una-regla {
  background-image: linear-gradient(#000,#FFF);
}

es decir, sólo deebría usarse la propiedad especificada por la w3.org y del resto, se encargará el script.

¿En que navegadores funcionará? En todos aquellos que usen ese tipo de prefijos, Firefox, Chrome, Safari, Opera, IE9 en adelante y las versiones móviles más comunes. Obviamente, como IE8 no soporta la mayoría de las propiedades CSS3, nada ocurrirá allí pero tampoco tendrá influencia alguna, todo seguirá como antes.

¿Funciona en Blogger? Si, no debería haber problemas ya que el script se ejecuta tanto sobre etiquetas <style> </style>, estilos externos agregados con la etiqueta LINK o incluso, en estilos agregados inline con el atributo style en la misma etiqueta.

¿Cómo lo usamos? Descargamos el script desde la página del desarrollador (es muy pequeño) y lo alojamos en un servidor:

<script src='URL/prefixfree.min.js' type='text/javascript'/>

o simplemente lo copiamos y pegamos en la plantilla entre etiquetas

<script type='text/javascript'>
//<![CDATA[
  ....... acá pegamos el contenido del archvo js .......
//]]>
</script>

y, en ambos casos, conviene hacerles caso a los desarrolladores y agregarlo justo antes de </head>

Tres ejemplo rápidos:

/* un fondo con gradiente */
#pf1{background-image:linear-gradient(#000,#FFF);}

/* una transición */
#pf2{font-size: 0;line-height: 100px;border-radius:0;background-color: #000;transition:all 1s;}
#pf2:hover{background-color:#F0F8FF;border-radius:50px;background-color: #F00;font-size: 80px;}

/* una animación*/
#pf3{background-color:#000;animation: recrojo 1s infinite alternate;}
@keyframes recrojo {from {background-color:#000;} to {background-color:#F00;}}

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.