CSS eficientes, según Mozilla

Desde hace ya un tiempo que vengo revisando con frecuencia mi forma de escribir los CSS y comparándolo con las cosas que se comentan en el artículo Writing efficient CSS donde se habla de cómo crear CSS eficientes.

Para empezar, existen 4 tipos de identificadores: ID, class, tags y universales. Cada uno de ellos tienen ciertas particularidades… y se pueden anidar. Así que según vayamos anidando y se vaya haciendo más complejo, la lectura y desarrollo también lo será.

Hacer algo de este estilo no sería muy útil:

table .fila td #enlace { ... }

Lo idel sería intentar reducir al máximo esta cadena a la menor cantidad posible de identificadores. A veces es mejor crear un class que no aprovechar la anidación de tags.

Regla 1: hay que intentar reducir la complejidad de los identificadores y evitar descendientes

Una vez se tienen claras estas cosas, también hay que tener presente otro detalle: cuanto más concreto sea un cambio en el CSS, mejor. Esto significa que hemos de intentar evitar tocar los identificadores universales ya que hacen cambiar todos los elementos, lo que implica una ralentización.

[hidden="true"] { ... }

Regla 2: hay que evitar cambiar los identificadores universales

Otra cosa importante a recordar es que los ID son elementos únicos por página, lo que significa que no tiene sentido que aparezcan al final de una serie de identificadores. Para poner un ejemplo:

table .fila td #enlace { ... }

sería lo mismo que esto:

#enlace { ... }

ya que sólo puede haber un #enlace por página…

Regla 3: los identificadores ID no han de tener padres en los CSS ya que son elementos únicos

Otra cosa a tener en cuenta es la nomenclatura de los identificadores. Normalmente las class e ID se utilizan para dar formato a la página, y esto podría llevarnos a utilizar palabras como “rojo” o “azul” cuando realmente queremos decir “alerta” o “información”. Si en un futuro se decide que una alerta no es de color rojo sino naranja, podría llevar a confusión a la hora de rediseñar el sitio.

Regla 4: los identificadores deben tener nombres semánticos y flexibles

A parte de estas recomendaciones, hay otras tantas que pueden ser de utilidad, y que son las que normalmente revisan los sistemas de compresión de CSS, como por ejemplo CSS compressor. Eliminar espacios innecesarios, reducir los colores web, ordenar los elementos…

Regla 5: reducir el tamaño de los CSS hace que se carguen y apliquen antes

En fin… unos simples consejos a tener en cuenta cuando se crean CSS desde cero o vamos a revisar algunos que ya hayamos hecho anteriormente.

Macroeconomía de los buscadores

Uno de los últimos artículos que publiqué días atrás fue el de los cambios a la hora de buscar en Internet; este artículo, sumado a lo que ha publicado Jaume estos días, y al “excel” de información que llevo trabajando sobre Evolución de las Búsquedas me han hecho reflexionar en varias cosas.

NOTA 1: las gráficas hay que leerlas de “derecha a izquierda” ya que los datos van de más nuevos a más antiguos…

NOTA 2: hay bastantes vacíos en las gráficas, y es que encontrar datos no es tan sencillo como parece… aun así, sigo añadiendo según encuentro.

Google Suggest cambió la forma de buscar

Esta es quizá una de las mayores conclusiones que he podido sacar. Según el análisis de datos hace 3 años hacíamos más consultas de 2-3 palabras que de 1 palabra… en cambio, desde que apareció Google Suggest a nivel internacional sumado a las mejoras que se hicieron en él y a la ultrageolocalización (principalmente en Estados Unidos), se puede ver que ha provocado un cambio radical en la forma de buscar, y que el concepto del long-tail para búsquedas cortas ha cambiado… eso sí, el long-tail sigue aumentando y creciendo lentamente, pero creo que a unas cifras muy mínimas.

Quizá lo más curioso que ese cambio hizo reducir las consultas de más de 3 palabras a favor de las de una palabra, pero ha vuelto la tendencia a buscar información concreta. Ahora queda esperar a Google Instant, que no deja de ser un Google Suggest con esteroides…

Internet crece a base de subdominios

Después de la burbuja .com del 2000 y tras unos años de registro masivo de dominios, los proveedores de sitios web han comenzado a dar página alojadas en subdominios… En la gráfica se pueden ver datos de crecimiento de “hosts” versus “dominios genéricos”. La caída que hay en 2009 se debe a que QQ.com cerró el perfil de sus usuarios de golpe, haciendo caer unos 30 millones de hosts.

Es probable que muchos usuarios nuevos de Internet en estos últimos años hayan decidido no comprarse un dominio y utilizar herramientas para blogs/webs del tipo WordPress.com o Blogger.com que permiten la creación de sitios basados en subdominios.

Los nuevos usuarios usan Google, pero ¿el resto?

Siempre que se ven gráficas y estudios se dice que Google está creciendo un montón y tal… pero si dejamos de mirar cuota de mercado y vemos cantidad de búsquedas realizadas veremos un panorama muy distinto.

Básicamente mi observación es que Yahoo! se mantiene en un número de usuarios concreto de búsquedas, por muchos años que pasen… es decir, tienen un punto de asentamiento en usuarios interesante. Con Microsoft pasa más de lo mismo, hasta que a principios de 2009 se ve el lanzamiento de Bing. Aunque el crecimiento es muy reducido, se nota que Bing va aumentando el número de consultas y que coincide el momento en el que Bing aparece en escena que el crecimiento de Google cambia… no quiero decir que Bing haya afectado a Google, pero sí que el número de búsquedas en los últimos tiempos se ha reducido (como si cada vez buscásemos menos).

Algo que me parece curioso es que desde 2010 las búsquedas han parado de crecer (al ritmo que lo hacían) y las gráficas se han aplanado… Facebook, que se ve muy poco, de golpe ha dejado de crecer en búsquedas, y hay una pequeña bajada tanto en Bing como en Yahoo! que Google compensa ligeramente… pero la suma total no crece.

Parece que la gente busca menos

Me falta encontrar unos datos que estaría bien comparar que es el número de usuarios de Internet en todo el mundo relacionado con el número de búsquedas que se hacen y el número de sitios web… creo que de esa forma veríamos que en los últimos meses ha habido un estancamiento… no sé si por la tan aclamada crisis de la que tanto se habla…

Eso sí, lo que me está quedando claro es que, según hablo con gente que invierte en Adwords, Google Instant está provocando cambios bastante importantes… aunque quiero esperarme unos días más para analizar mejor los datos…

Crear un efecto “desbloquear” de iPhone

Seguro que en alguna ocasión te gustaría hacer una versión de tu web para dispositivos móviles y añadir un toque iPhone. Es por esto que Chris Coyier ha creado un efecto “slide to unlock” en el que podemos apreciar, sobretodo en motores WebKit, el efecto a todo rendimiento.

Entre otras cosas, hay ese efecto degradado y gracias a jQuery también la posibilidad de hacer ese efecto slide.

El sistema aprovecha códigos CSS como el -webkit-animation: slidetounlock 5s infinite; y la función -webkit-keyframes slidetounlock.

El ejemplo funciona en motores Webkit al 100% (Safari y Chrome), aunque se pueden analizar los códigos del CSS y JavaScript.

Código CSS


* { margin: 0; padding: 0; }
html { background: black; }
body {
  font: 14px Georgia, serif;
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b3b3b),color-stop(1, #000000));
  background-repeat: no-repeat;
  min-height: 350px;
}
#page-wrap { width: 720px; margin: 0 auto; padding-top: 100px; }
#well {
  padding: 14px 20px 20px 20px;
  -webkit-border-radius: 30px;
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
  border: 2px solid #454545;
  overflow: hidden;
}
h2 {
  font-size: 80px;
  background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  padding: 0;
  width: 200%;
}
h2 img {
  vertical-align: middle;
}
@-webkit-keyframes slidetounlock {
  0% {
    background-position: -720px 0;
  }
  100%{
    background-position: 720px 0;
  }
}

Código JavaScript


$(function() {
  $("h2 img").draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(event, ui) {
      if (ui.position.left > 550) {
        $("#well").fadeOut();
      }
    },
    stop: function(event, ui) {
      if (ui.position.left < 551) {         $(this).animate({           left: 0         })       }     }   }); });

Punto y seguido; adiós OJO internet SL

Ayer, tras varios meses acabando de cerrar documentación, estuve en el notario para vender OJO internet S.L.. Finalmente otro de los socios, ITnet, se ha quedado con la compañía y los proyectos, y tanto David como yo nos salimos del mismo para dedicarnos a otros proyectos en los que estamos más involucrados.

Como ya sabéis algunos, OJO está buscando un nuevo jefazo, así que si alguien quiere convertirse en el nuevo CEO de la compañía tiene una oportunidad ahora. Lo que no tengo muy claro (tampoco es que sea responsabilidad mía) es lo que pasará con los productos actuales, aunque supongo que si entra un nuevo CEO podrá decidir la nueva dirección de todo. Sé que Carlos tiene algunas ideas interesantes que planteamos en su momento que finalmente no se hicieron.

Con respecto a los que me habéis comentado sobre el tema de OJObuscador, ya habéis visto que desde hace meses no se actualiza, y que, aunque ya no doy información diaria sobre lo que se mueve en el mundo de los buscadores, sigo escribiendo sobre SEO y WPO en mi blog (o sea, aquí) junto a lo que voy publicando en mi twitter.

En fin, comienza una nueva época para mi y me dedicaré principalmente a los clientes de Kisslab y a otros productos que estamos preparando. Además, tengo previsto irme a Estados Unidos (concretamente a Miami) a hacer algo de desarrollo de negocio y ver qué tal es la cosa allí en cuanto a Latinoamérica y al marketing online en español. Punto y seguido con muchas ganas.

Analítica Web en tiempo real

Aunque muchas veces utilizamos Google Analytics para saber el tráfico que tenemos, existen otra gran cantidad de servicios similares (sencillos, simplemente para analizar datos de visitas y no de comercio electrónico) que pueden ser de mucha utilidad.

En algunas ocasiones es interesante disponer de un segundo sistema de seguimiento básicamente por el tiempo real, para poder controlar en cualquier momento si hay un pico de tráfico y a qué se debe… también, si no tenemos mucho tráfico en nuestro sitio, podremos ver y seguir la información en tiempo real, lo que nos dará una visión completa. Incluso, aquellos que publican mucho en Twitter o Facebook podrían llegar a ver la influencia que supone publicar algún tipo de información en esas redes.

  • Chartbeat: Se basa mucho en comparativas entre días y puedes ver si vas mejor o peor.
  • Clicky: De los más populares. La información se refresca cada minuto.
  • DaCounter: Bastante simple a priori, pero muy bien presentado.
  • Feedjit: Muy pensando para bloggers. Tiene un feed de tráfico en tiempo real.
  • Have a Mint: Autogestionable (PHP y mySQL) personalmente la mejor solución (con addons y todo) para sitios pequeños.
  • Histats: Visualmente muy atractivo y muy sencillo de utilizar.
  • Performancing Meters: Sencillito y sólo permite ver los últimos 31 días.
  • Piwik: Autogestionado (necesita PHP y mySQL) es muy adaptable y permite gestionar todas las cuentas que quieras.
  • Reinvigorate: Muy completo. Puede analizar usuarios reales, crear grupos…
  • ShinyStat: Se puede ver información de varios sitios a la vez.
  • SiteMeter: Muy 1.0, con datos bastante básicos.
  • Spotplex: Permite comprar tu sitio con otros similares y tiene un “top artículos”.
  • StatCounter: De toda la vida. Gratis limitado a 250.000 paginas vistas/mes.
  • TraceWatch: Tiene información bastante detallada y que se puede profundizar.
  • W3Counter: Para menos de 5.000 páginas vistas… muy simple a mi gusto.
  • Whos.Amung.Us: Permite ver los usuarios, las URL y los lugares desde donde navegan.
  • Woopra: De los más sencillos visualmente hablando. Limitado a 10.000 páginas vistas y chat con los usuarios.