Herramientas para desarrolladores en Firefox 12

Uso Firefox el 95% del tiempo que paso con un navegador de Internet, y es que creo que como navegador es muy buena la integración con herramientas y su funcionamiento en el desarrollo de sitios web. Dicen que Chrome funciona mejor, pero a mi la verdad es que ha llegado un momento en el que es todo tan simple que no acabo de entenderlo.

Hace días que ya tenemos disponible Firefox 12 (en versión alpha, que conste) y, además de estar disponible para máquinas de 64 bits (algo que me atrae bastante) hay cambios bastante importantes en lo que herramientas para desarrolladores se refiere.

NOTA: si quieres ver las últimas versiones para probar, puedes visitar la página de Firefox Nightly version.

Antes de entrar en detalle sobre los cambios que va a traer el propio navegador, me gustaría destacar la colección de Mozilla de herramientas para desarrolladores. Aquí podemos ver algunos addons como Firebug, la Web Developer, Colorzilla o Show IP.

Lo primero que sorprende es que el F12 ha dejado de funcionar para dividirse en varias herramientas y combinaciones de teclas, como se puede ver en el menú de opciones.

Web Console

Es lo más parecido a la antigua consola que teníamos antes. Básicamente controla la red y los errores generados por CSS y JavaScript. De cada una de las peticiones podemos ver su “ficha” con las cabeceras, cookies y respuesta por parte del servidor, además de, petición a petición, los errores que van generando cada una de ellas a la hora de maquetar la página.

Inspect

Quizá es de las herramientas sobre las que más cambios visibles se pueden ver. La opción de inspección de los distintos bloques del código de la web se han hecho mucho más sencillos y en la parte inferior podemos ver en path completo, en la parte inferior el código HTML y en la parte lateral el CSS que se le está aplicando. Además, cuando vayamos seleccionando el código, veremos la etiqueta y clases que se le están aplicando de un vistazo rápido.

JavaScript Scratchpad

Aunque muy simple, esta pantalla nos permitirá hacer y revisar funciones de JavaScript para analizarlas. Como digo, por ahora bastante sencillo.

Style Editor

Aunque en este caso me parece una herramienta muy sencilla sin duda es bastante potente en cuanto puedes hacer cambios en tiempo real sobre los CSS y añadir o eliminar estilos cargando otros ficheros. En aquellos sitios que usen varios ficheros CSS puede venir muy bien para crear la hoja de estilos en tiempo real e ir viéndola aplicada en todo momento.

En estos momentos todavía quedan 4 versiones hasta que se lance la 12, por lo que es de prever que esto es sólo el principio en cuanto a cambios que se van a implantar en el navegador, cambios que hace tan sólo un par de años tal vez ni pensábamos tener como herramientas integradas.

Ancho de banda, latencia y tenerla grande (la conectividad)

El tamaño importa, ¿pero cuánto? Pues las pruebas que se han hecho dicen que tener una conexión a 5 Mbps es suficiente para que un sitio web funcione de forma bastante razonable siempre desde el punto de vista del cliente, claro. Y es que Internet, como en muchas ocasiones dice Jaime Ferré es como un milagro que funcione, pero tiene limitaciones físicas, porque la velocidad de la luz es la que es.

En muchas ocasiones hablamos que una web ha de cargar rápido y que cargue rápido significa que ha de tardar entre 1,5 y 2,5 segundos. En este tiempo hemos de incluir el tiempo desde que el usuario pulsa “Intro” en su navegador hasta que la página se muestra por pantalla. Y en la mayor parte de veces nos paramos a revisar los pequeños detalles de la carga del propio sitio: que si unir y minimizar CSS y JavaScript, hacer la menor cantidad de peticiones, CSS Sprites… pero hay una limitación física sobre la que la mayor parte de gente no piensa: la distancia.

Imagina que tienes tu servidor web en Estados Unidos, en Boston, por ejemplo. Tú vives en Madrid. Cada vez que hagas una petición a tu sitio web has de ir de tu casa al centro de datos de Madrid, de este a París, Londres, Nueva York, Boston, y volver. En total más de 7.700 kilómetros de cable con varios routers de por medio. Teniendo en cuenta que la velocidad de la luz por cables de fibra óptica es de 200.000 km/h (a diferencia de los 300.000 km/h que tiene en el vacío), sólo por la distancia de cable ya tenemos un tiempo de espera de 38ms, que en ida y vuelta son el doble, 76ms. Y este tiempo es sin contar con los routers y la electrónica que pueda haber, sin tener en cuenta pérdidas y suponiendo que la conexión es directamente con fibra de punto a punto yendo un bit a la máxima velocidad. Esto significa que, prácticamente, 1 décima de segundo se pierde en la conectividad en sí.

Ahora pongamos un ejemplo más práctico. Tenemos una imagen en el servidor que pesa 25KB. Hacer la petición a esa imagen desde Madrid hasta Boston implicaría unos 45ms en la petición, otros 45ms en la respuesta y unos 5ms en traer la información. Esto sería con una conexión de 5 Mbps sin pérdidas. Esto significa que de los 95ms que tarda en hacerse todo el proceso, más del 90% de la información se reduce a tiempos de latencia de la red.

Y ahora que sabes esto… ¿aún te preguntas porqué tu sitio web carga lento? Recuerda que es importante que tus servidores estén cerca (físicamente) de tus usuarios, y si no puede ser así, utilizar sistemas como BGP para conseguirlo.

Navigation Time API en Google Analytics

Una de las API más interesantes que nos trae el W3C en los últimos tiempos y que han implementado algunos navegadores es la Navigation Time API. Si queréis ver una prueba de datos, podéis probar la página de Navigaton Timing de la Guía de WPO.

Pero claro, estos datos dependen de los usuarios y en la mayoría de ocasiones no los tenemos disponibles… así que, ¿por qué no añadirlos a Google Analytics? Sí, como he dicho no estarán en todas las páginas y tendremos información parcial ya que sólo está disponible en algunos navegadores, pero al menos tendremos cierta información.

La información que propongo guardar es la siguiente:

  • DNS: es el tiempo que se dedica a hacer peticiones DNS.
  • Connect: es el tiempo que se dedica a procesos propios de TCP; esto puede implicar colas en peticiones por problemas de paralelización.
  • Petición: es el tiempo que se tarda desde que se hace la petición (enviamos el primer byte) hasta que se devuelve el contenido (recibimos el último byte).
  • DOM: es el tiempo que tarda el navegador en maquetar la página con sus elementos.
  • Carga: es el tiempo que se tarda desde que se empiezan han recibido los contenidos hasta que la página se ha cargado completamente (incluye el tiempo DOM).

Una vez tenemos caros los distintos tiempos que vamos a tomar como medida, vamos a guardarlos como Eventos en Google Analytics.

function getPerformanceTiming() {
  var timing = window.performance.timing;
  dns = timing.domainLookupEnd - timing.domainLookupStart;
  connect = timing.connectEnd - timing.connectStart;
  peticion = timing.responseStart - timing.connectEnd;
  dom = timing.domComplete - timing.domLoading;
  carga = timing.loadEventEnd - timing.responseEnd;
  return {
    dns, connect, peticion, dom, carga
  };
}

Y ahora que ya tenemos estos datos guardados en variables, tan sólo hay que enviarlos a Google Analytics mediante las funciones de eventos:

window.onload = function() {
  if (window.performance && window.performance.timing) {
    var tiempos = getPerformanceTiming();
    _gaq.push(["_trackEvent", "Navigation Timing API", "DNS", undefined, tiempos.dns, true]);
    _gaq.push(["_trackEvent", "Navigation Timing API", "Connect", undefined, tiempos.connect, true]);
    _gaq.push(["_trackEvent", "Navigation Timing API", "Peticion", undefined, tiempos.peticion, true]);
    _gaq.push(["_trackEvent", "Navigation Timing API", "DOM", undefined, tiempos.dom, true]);
    _gaq.push(["_trackEvent", "Navigation Timing API", "Carga", undefined, tiempos.carga, true]);
  }
};

Aunque todavía supongo que se puede mejorar bastante, aquí os dejo un ejemplo de datos:

Series de esta temporada que no debes dejar pasar

Estas últimas semanas cierran muchas series la temporada o hacen el parón de invierno y, en lo que va de temporada se han estrenado unas cuantas series que, la verdad, no te puedes perder. Y es que este año todavía no había hablado de series, y aunque sigo viendo varias decenas de ellas (no, no me lío entre personajes ni tramas) me gustaría destacar unas cuantas de estreno que has de ver.

American Horror Story

Sin duda na de las que me tiene más enganchado… es básicamente la historia de una casa de principios del siglo pasado y la historia de sus inquilinos… así con eso no parece muy molona, pero ¿y si os digo que los que mueren en a casa se quedan allí en plan fantasmas? No es una serie de miedo, pero sí de intriga que a veces da asquito porque salen cosas que no deben salir. En ocasiones puede ser un poco lenta, pero al final es situar los personajes y… mejor no os digo cómo acaba la temporada porque ¡vas a flipar, palabra!

Hell on Wheels

Esta serie tampoco es que sea de engancharse a lo loco, pero es de trama y tiene su punto, a que está muy muy bien ambientada. Se sitúa sobre 1890 y trata de la construcción del ferrocarril en Estados Unidos que va de costa a costa. El protagonista es un bastante peculiar y, como digo, quizá no es la serie del año pero la ambientación está muy lograda y sirve para pasar el rato.

Homeland

Esta es otra de las series de la temporada. La protagonista es una agente de la CIA que ha estado tiempo en Afganistan y a la que le chivan que hay un estadounidense que ha sido convertido. La relación de los personajes es muy potente y el hecho de que ella no esté del todo bien de la cabeza lo acaba de apañar. Otra serie de trama que la verdad es que no puedo desengancharme.

Terra Nova

Aunque se suponía que iba a ser la gran serie de la temporada, la verdad es que me ha decepcionado un poco. Está bien porque salen dinosaurios y cosas de la época prehistórica, pero la verdad es que los personajes son bastante flojos y la trama un poco simple. Aunque hay trama de fondo, los capítulos son bastante cerrados en cuanto a que cada capítulo tiene un algo que hay que solucionar. Además tiene un rollo familiar excesivo que no me acaba de molar.

En fin, series y más series que se añaden a otras como Dexter (que tiene un final de temporada que, en fin, spoilers no!), a The Big Bang Theory que sigue en su línea, Fringe, que creo que ha perdido un poco de tirón, aunque sigue molándome mucho, How I Met Your Mother, tan grandes como siempre y viendo desvelarse algunas cosas… Y aquí, un poco de cuñita… para los que sigáis series y queráis enteraros de todo, recordad que tenéis Todo Series para estar al día.

Saber decir que no

Hace ahora un mes que comencé una nueva serie de proyectos. Al cabo de un mes ya vas viendo aquellos que van a un ritmo distinto del que habías previsto, aquellos que aportan distinto de lo que habías previsto, aquellos que te queman a un ritmo distinto del que habías previsto. Creo que en mi caso todo ha sido al revés de lo que había previsto ( que conste que eso no significa que esté mal, en algunas cosas, casi me alegro).

Ahora mismo mi tiempo se reparte en un 40%-40%-20. El primer 40% va dedicado a Keep It Simple Lab, es decir, a todos los clientes que tenemos, consultoría SEO, WPO, etc… el siguiente 40% va dedicado a proyectos en Grupo ITnet, principalmente TopDomainer, temas internos en la empresa, y principalmente a mucha I+D en Sistemas, donde estoy haciendo unas historias con servidores DNS que llevábamos varios años queriendo hacer y nunca encontrábamos el momento. El resto del tiempo, ese 20% lo dedico a mi.

Aquí entran en juego varios temas, el principal es el del quemamiento. Cuando lanzas algo, aunque sea en alpha, beta o delta, pero en producción y falla, teniéndote que dedicar a arreglar cosas en las que en muchas ocasiones no tienes el control porque dependes de otros te quemas. Otro es el del desgaste mental; y es que pensar cansa, es algo que quién tiene un trabajo bastante metódico no entiende, pero es una situación que he hablado con bastante gente (familiares, amigos, conocidos…) y de tanto en tanto encuentro a alguien que lo entiende. Cuando llevas 4 semanas sin parar ni puentes ni fines de semana, acabas petado. Normalmente en 24 horas soy capaz de recuperarme; ahora, no sé si es que ya me estoy haciendo mayor, pero cada vez más me cuesta volver a la normalidad (o eso, o es que cada vez fuerzo más la máquina y cuando se engancha, no hay quien la despegue).

Lo malo de todo esto es que aunque quieres abarcar más, ya lo dice el sabio refranero español: quien mucho abarca, poco aprieta. Así que voy a empezar a dejar temas, proyectos, historias que tengo ahí en el aire y que el coste dedicatorio no parece compensar el esfuerzo de arrancar. Todo lo que se salga de horas de dedicación a “empresa” han de ir volviendo progresivamente hacia mi persona.

Después de una semana “casi de vacaciones forzadas” (y que afectan a los que me rodean) vuelvo a la normalidad, con resaca, pero vuelvo. Este fin de semana tocará acabar temas pendientes, el martes tengo viaje a Madrid, el resto de la semana compromisos y el próximo fin de semana supongo que algo de familia (espero que no mucha) y el resto sí que lo voy a dedicar a mi, a no hacer nada, a aburrirme, a hacer cosas simples como salir a pasear o ir al cine, en definitiva, a ejercer de ser humano.

SEO básico a tener siempre controlado

El SEO puede evolucionar, puede cambiar para bien o para mal, pero hay algunos elementos que nunca podemos despreocupar y sobre los que tenemos que tener siempre un control absoluto.

robots.txt

Es básico tener el fichero de robots.txt bien controlado. Primero, ha de existir. Segundo, debe tener como mínimo la línea User-Agent: *. Tercero, debería tener siempre, al principio de todo, la línea indicando el Sitemap.

Código 404

Todo dominio tiene que tener su propia página de error. Si entras en example.com/0123456789 debe devolver una página (sin hacer redirecciones o cosas intermedias) un código 404. La página resultante es recomendable que tenga el diseño del resto del dominio.

rel-canonical

Hoy en día es casi obligatorio que todos los sitios usen el rel-canonical. Y también es importante que este sea calculado en base a los datos internos, y no simplemente replicar lo que llega por URL. Eso sí, hay que poner atención es nunca combinarlo con el meta-noindex.

sitemap.xml

Si queremos que los buscadores descubran nuestros nuevos contenidos hay que tener un fichero de sitemap.xml que informe de los nuevos contenidos. Este fichero, si es un nuevo sitio o se cambia la arquitectura o se rehace el sitio, está bien que se le mande el 100% de las URL de contenidos. Repito, contenidos, nada de categorías y similares… eso ya lo descubre el propio robot de rastreo. Una vez veamos en Webmaster Tools que ya hay un 80%-90% indexado, es mejor sólo pasarle un 10% de los últimos contenidos generados (por fecha inversa).

Paneles para Webmasters

Hay que estar dado de alta (recomendada la verificación por DNS) en Google Webmaster Tools, Bing Webmaster Tools y Yandex Webmasters. Es muy recomendable configurar el sistema de alertas por correo. Como detalle, Yandex, una vez pasa un tiempo, da muy buena información con respecto a errores de rastreo.

Rich Snippets

Si tienes la posibilidad de incorporar elementos del Schema en tu sitio web, ponlos. Por ejemplo libros, películas, eventos, negocios locales

Títulos, Descripciones…

Cada página del sitio ha de tener su propio título “title”, su propia descripción “meta-description” y sus propias palabras clave “meta-keywords”.

Contenidos

Como siempre, contenidos únicos, intentando no paginarlos…

Sé que es básico, pero a partir de aquí ya todo es seguir con elementos no tan básicos. Lo siguiente es revisar la arquitectura de la información y evitar contenidos duplicados.

Grupo ITnet cumple 15 años

Aún recuerdo el día que llegué a ITnet por primera vez. Creo que ahora mismo, de los que pisamos las oficinas habitualmente, soy de los pocos que ha estado en todas ellas. Y es que 15 años en Internet son muchos años. El próximo año yo los haré en lo que yo llamo “mis conexiones diarias” que comenzaron en verano de 1997, aunque desde 1995 que me conectaba en casa de un amigo que, cada viernes por la tarde, navegábamos media hora sin saber bien bien hacia donde.

En septiembre de 2003 conocí a Carlos Blanco. Le habían hablado de mi, diciéndole que era buen programador, yo había acabado mi temporada sabática y allí me planté, dos semanas antes del cambio de oficinas. Cuando ese cambio llegó allí empecé a montar ordenadores, a gestionar los 3 servidores que teníamos y a comenzar a desarrollar algunas aplicaciones de SMS.

Unos pocos meses después entró como director de operaciones Jaime Ferré. Con él comenzamos a montar la base de lo que luego fueron las webs de juegos y el CMS que se usa en OcioMedia. Fueron tardes de escuchar sin parar los Black Eyed Peas, él haciendo cosas en SQL Server y yo montando webs en XHTML y CSS con capas, floats y cosas que no habíamos usado ninguno hasta el momento.

Desde aquellos momentos ITnet sólo ha hecho que crecer y crecer, y es que aunque sólo he pasado la mitad de su vida allí, yendo y viniendo, comenzando con las webs de juegos, ideando y entretenido con Googlemania que luego pasó a ser OJObuscador, dejando la empresa para lanzarme a la aventura y volviendo tiempo después donde fui de nuevo acogido y comenzando proyectos renovados como Ethek, dejando finalmente OJO y Ethek para concentrarme en nuevos proyectos, desde mi vuelta hace algo más de medio año incorporado como uno más de la empresa colaborando como mejor puedo, poniendo orden en la parte de la cartera de dominios con el nuevo proyecto TopDomainer o echando una mano a la gente de sistemas en la medida de lo posible.

Pero si he de quedarme con algo es con la gente que ha pasado por ITnet. Sigo en contacto con muchas de las personas que han ido y venido, algunos de ellos incluso los considero amigos míos además de compañeros, y bien saben los que me conocen que siempre digo que a la oficina no voy a hacer amigos.

No voy a alargarme más, sólo felicitar a Carlos por el trabajo que ha hecho estos últimos años no sólo con la empresa sino impulsando Internet en España, y también felicitar al resto de personas, socios y trabajadores, que son los que han conseguido que una empresa como esta llegue a sus 15 años en algo tan extraño como es la red de redes.

Pirámide de Maslow del internauta

El ser humano tiene unas necesidades, y eso es lo que el Señor Maslow puso en formato gráfico en una pirámide… pero Internet también tiene su público y esas necesidades no son tan personales sino que te las da el sitio web que estás visitando. Y es que la pirámide del internauta es muy sencilla.

En la parte más baja de la pirámide, en la base encontramos algo muy simple: el sitio web ha de funcionar. Y es que si un sitio web no funciona, apaga y vámonos. Ya digo que puede parecer una tontería, pero que un sitio web esté caído creo que es de las cosas más duras que te puede pasar. De ahí todo el tema del “cloud” y la virtualización, distribución de cargas, etc… es importante que un proyecto en Internet siempre esté en línea. En resumen: infraestructura.

El siguiente escalón es el de conseguir que el sitio cargue rápido. Si ya has conseguido que el usuario llegue a tu sitio web, es importante que tenga una sensación de velocidad para que se sienta a gusto y pueda navegar por el sitio con tranquilidad. Esto, ya personalmente, partiendo de unas conexiones a Internet mínimas. Para mi, por ahora, me baso en conexiones de 3 Mbps, algo mínimo en todos los países de Europa, Norte América y parte de Sud América. En resumen: Web Performance Optimization.

El siguiente escalón, ya por encima de la mitad, tenemos algo que hará que el proyecto sobreviva: que sea útil. En Internet hoy en día prácticamente tenemos de todo, pero lo que nunca sobra son herramientas y servicios de utilidad. La mayoría de los sitios web de Internet que duran más de un año es porque son útiles, ya sea como Google (buscador), Facebook (red social), Twitter (comunicación), Amazon (compras), eBay (mercadillo / subastas)… ejemplos hay muchos, proyectos que duren mucho no tantos.

Y para acabar, en lo alto de la pirámide, encontramos algo que puede ser un poco feo de decir, pero el sitio web ha de ser “cool”. Está bien que sea útil, que cargue rápido, que funcione, pero una vez tienes todo eso… ¿no debe ser cool? Debe tener ese punto que lo haga accesible a todos pero a la vez con su punto de exclusividad. Recuerdo cuando tener una cuenta en GMail era difícil y si lo tenías, “molabas”. Lo mismo pasa en Facebook, que como todo el mundo lo tiene, tú has de tenerlo, tiene aplicaciones, permite hacer muchas cosas…

  1. “cool”
  2. utilidad
  3. velocidad
  4. ¡está en línea!

Y ahora que has visto esa pirámide… ¿en qué escalón está tu sitio web y qué escalón quiere tu usuario?

Lanzamiento de TopDomainer

De tanto en tanto me cae un proyecto nuevo desde Grupo ITnet y, aunque ya hacía varios años que monté algo parecido, ahora he tenido la ocasión de ponerme manos a la obra en la parte más de idea del producto que no en la de maquetación (donde pierdo mucho tiempo). Este nuevo proyecto se llama TopDomainer.

ITnet tiene una cartera de más de 10.000 dominios a la venta, dominios que en su mayoría estaban en SEDO, y muchos de ellos penalizados y con cosas raras. El objetivo de hacer esta plataforma de venta de dominios más sencilla era, por un lado dejar de tener aparcados los dominios y tener un control mayor sobre qué ocurre en ellos. Esto hace que se convierta en algo bastante entretenido ver el Google Analytics Real Time de todos los dominios simultáneos.

Ha habido varios retos en este proyecto, a diferencia de casos anteriores. El primero de ellos era el de gestionar las DNS. Para ello hemos montado, tras muchísimos años, nuestros propios servidores DNS. Esto ha sido algo sencillo… lo que no lo ha sido tanto es buscar un sistema que, desde el panel de gestión de TopDomainer actualice la base de datos del BIND, tanto en los master como en los slave. La parte buena de haberle dedicado horas y oras a esto es que, otro proyecto que teníamos en mente desde hacía varios años ya está encaminado para hacerse realidad, ya que aprovechando gran parte del trabajo realizado podremos lanzarlo (algún día, cuando tengamos tiempo). Sin duda esta parte de I+D y dolores de cabeza de pensar ¿qué puede estar pasando? es de las más divertidas.

En la parte web había dos divisiones. Por un lado la página “oficial” que no deja de ser algo sencillo, hecho con WordPress y sin muchos problemas, y luego está la parte que gestiona los más de 10.000 dominios de la cartera, donde existe una ficha sobre el dominio, dominios relacionados, información del whois… Para que os hagáis una idea, el proceso que calcula los dominios relacionados de la cartera dura más de 5 horas, y eso que es un proceso relativamente sencillo pero largo.

Otra cosa entretenida es el tema de los whois. Los .com y .net lo tienen bastante sencillo, pero cuando empiezas a tener que buscar los servidores whois de los más de 250 cTLD la cosa ya se empieza a complicar… lo bueno de esto es que salen herramientas muy interesantes tras investigar e investigar muchas horas.

Y, para acabar, una de las cosas que más ilusión me hace que es la de poder añadir carteras de dominios de otras personas o empresas. La plataforma está pensada para tener clientes y no ser una plataforma cerrada sólo para los dominios de ITnet. Aún falta mucho en este tema, pero poco a poco se va avanzando y ya hemos empezado a integrar dominios de otros allí. Espero estos próximos días añadir unos pocos dominios que tengo para vender. Si te interesa esto último de que te gestione TopDomainer tu cartera de dominios, escríbenos o me lo decís que lo revisamos, ya que el ponerlo en la plataforma es algo gratuito, sólo cobramos comisión cuando se vende.

Así que nada, para los que me habéis preguntado estos días sobre que voy haciendo que estoy bastante desaparecido, ya lo sabéis.