Meteor Docker container restarting every 30 seconds

I had a really weird problem today deploying to production using mup.  After deployment the docker container was reseting itself every 30 seconds or so.  Alarm! Achtung!

After inspecting the container with docker logs containerName I've been able to conclude that the problem was due to two node packages: bcrypt and unicode.

I've solved the first problem removing the bcrypt node package.  It's not optimal but at least it's working because meteor already provides a slower but fully functional bcrypt package.

The second problem with Unicode was really weird.  This is the log:

make: Entering directory '/bundle/bundle/programs/server/npm/node_modules/buffertools/build'
  CXX(target) Release/obj.target/buffertools/buffertools.o
  SOLINK_MODULE(target) Release/obj.target/buffertools.node
  COPY Release/buffertools.node
make: Leaving directory '/bundle/bundle/programs/server/npm/node_modules/buffertools/build'

> unicode@0.6.1 postinstall /bundle/bundle/programs/server/npm/node_modules/unicode
> node install.js

try to read file /usr/share/unicode/UnicodeData.txt …
/usr/share/unicode/UnicodeData.txt not found.
try to read file /usr/share/unicode-data/UnicodeData.txt …
/usr/share/unicode-data/UnicodeData.txt not found.
try to read file UnicodeData.txt …
UnicodeData.txt not found.
try to download …
GET unicode.org:80/Public/UNIDATA/UnicodeData.txt

It looked like the package couldn't get the unicode data from unicode.org. I was able to install the package in my local machine so I'm afraid this problem can be related to my server being blocked (not sure why).

What I did to solve it was to log in to the docker machine and install the unicode data using the package manager: apt-get install unicode-data  and that solved the issue since npm is smart enough to not request that data if it's already present in the system.

I know both solutions are actually hacks but I have my client's website working again and now I have time to think about those errors more carefully and try to find the root of the problem.  I will probably add the apt-get command to my docker image but I am not sure why all of a sudden bcrypt has stopped working (I have not updated the bcrypt recently).

Nginx: upstream sent too big header while reading response header from upstream

After updating my server with Meteor version 1.4.3.1 I've been experiencing some problems with Nginx.

All services looked fine but when requesting a page I was getting the response:

*12 upstream sent too big header while reading response header from upstream

That problem caused requests not being served correctly and the Nginx server returning 502 Bad Gateway.

After some reading about what the problem was and how to solve it these changes to the Nginx configuration have solved my problem and everything is working fine again.

server {
    listen 80;
    proxy_buffering on;
    proxy_buffer_size 128k;
    proxy_buffers 4 256k;
    proxy_busy_buffers_size 256k;
}

This post really helped me to understand what the problem and the solution were:  https://talk.plesk.com/threads/nginx-error-upstream-sent-too-big-header.338232/

frameworks de desarrollo web en javascript

Durante el último año he estado probando diversos frameworks de desarrollo web.  Todos ellos tenían en común que estaban desarrollados en Javascript.

Javascript va a ser a partir de ahora mi lenguaje principal de desarrollo tanto en el lado cliente como en el lado servidor.  Desde el año 2005 estaba desarrollando en Ruby por lo que el cambio es importante pero estoy convencido de que el esfuerzo merecerá la pena.

Desde la aparición de Node.js creo que todas las herramientas de desarrollo web interesantes se están realizando en Javascript y hay muchos y muy buenos frameworks tanto en el lado cliente como en el servidor o combinando ambos.

Tras estar evaluando unos cuantos el framework que más me ha gustado es Meteor.

Se trata de un framework muy bien concebido, basado en Node.js y que aprovecha las ventajas de las nuevas tecnologías, sobre todo la potencia de html5 y el propio Node.js.  Todavía no han llegado a la versión 1.0 (tiene previsto hacerlo durante los primeros meses de 2014).

Meteor trae por defecto MongoDB como gestor de base de datos lo que para mi es otro aliciente ya que siempre he querido ponerme a aprender MongoDB a fondo y por restricciones de proyectos o por pura pereza acababa utilizando siempre MySql.

Te recomiendo que visites la web de Meteor y veas los vídeos de ejemplo, seguro que te sorprenden.

Según vaya familiarizandome más con Meteor iré publicando artículos con todo lo que voy aprendiendo.

 

Utiliza el API de Google Analytics de forma sencilla

Ariadna Google Analytica API for developersEl API de Google Analytics nos permite utilizar directamente toda la información que Google Analytics almacena sobre nuestra página web.  Al tener acceso de forma directa a los datos, podemos cruzarlos, agruparlos y segmentarlos de formas que la herramienta web de Google Analytics no permite.

Cuando tenemos que realizar informes complejos o necesitamos cruzar datos de forma no prevista por la herramienta web de Google Analytics tenemos dos opciones.  Armarnos de paciencia y realizar complejas hojas de cálculo difíciles de actualizar y de mantener libres de errores, o bien realizar un programa que recolecte y procese la información por nosotros y nos la muestre automáticamente.

El API de Google Analytics es una herramienta que nos permite recolectar "en bruto" los datos que Google tiene almacenados sobre nuestro sitio para posteriormente poder tratarlos a nuestro gusto.  Pero, como cualquier API, su función es intercambiar información de forma ágil entre ordenadores, no entre humanos.

Para que podamos consumir la información que Google Analytics nos proporciona de forma sencilla y cómoda, he creado una librería que te ayudará a utilizar y sacar todo el partido de dicha API.  El nombre de la librería es Ariadna, está programada en Ruby y puedes utilizarla y/o descargar el código fuente y modificarla a tu gusto.

Ariadna extrae toda la información de Google Analytics y te la presenta en forma de objetos que puedes utilizar.

Ariadna utiliza como forma de autentificación Oauth2 que es la forma recomendada por Google para acceder a su API.

Veamos un ejemplo:

results  = profile.results.select(
      :metrics    => [:visits, :bounces, :timeOnSite],
      :dimensions => [:country]
    )
    .where(
      :start_date => Date.today,
      :end_date   => 2.months.ago,
      :browser    => "==Firefox"
    )
    .order([:visits, :bounces])
    .all

Esta consulta pide a Google todas las visitas, tasa de rebote, tiempo en el sitio y país de todas las visitas a nuestra web desde hace dos meses hasta hoy y que hayan empleado el navegador Firefox.  Además nos muestra los resultados ordenados por visitas y tasa de rebote.

Para conocer todos los resultados solo tenemos que iterar sobre el objeto results donde toda la información enviada por Google está disponible en forma de atributos.

results.each do |result|
  puts result.visits
  puts result.bounces
  puts result.timeOnSite
  puts result.country
end

Además de consultar datos, también podemos conocer toda la información de cuentas, propiedades y perfiles disponibles.

Ariadna::Analytics.new(access_token)
accounts    = analytics.accounts.all
properties = accounts.first.properties.all
profiles    = properties.first.profiles.all

Cualquier duda o comentario sobre la gema es bienvenido y por supuesto contribuciones y mejoras.

Datos de uso de Internet - comScore Septiembre de 2011

internet usage september 2011comScore ha presentado un resumen del uso de Internet en Europa durante el mes de septiembre de 2011.  El informe ha sido realizado teniendo en cuenta 49 paises y proporcionando información detallada de 18 de ellos.  Sobre una población de 373,4 millones de visitantes únicos que  pasan en Internet 26,4 horas de media.

Empleo y Formación areas emergentes

Un 30% de usuarios (108,4 millones) han visitado webs de empleo y formación.  La formación ha sufrido un incremento del 28% mientras que la búsqueda de empleo ha crecido un 21%.

De entre los portales Moster Inc. ha recibido 9,4 millones de visitantes, Indeed.com 8,3 millones, con un crecimiento del 39% respecto al mes anterior y Jobrapido un agregador de ofertas de empleo que ha sido tercero con 7,7 millones de visitantes únicos.

Webs más vistas

Los portales de Google continúan liderando el ranking con 341,1 millones de visitantes únicos, alcanzando a mas del 91% de la audiencia europea de Internet.

Los portales de Microsoft ocupan el segundo lugar con 263,3 millones de visitantes y una cobertura del 70,5% de la población internauta.  Le sigue muy de cerca Facebook.com con 250 millones de visitantes y un 66,9% de cobertura.

Como curiosidad, comentar que la red social rusa VKontakte tiene la media de uso mas alta entre sus visitantes con una media de uso de 7,1 horas.

De entre las webs que más han crecido desde agosto hasta septiembre tenemos a Populis con un 44% de crecimiento, el portal de juegos EA Online con un 16% y la organización Mozilla con un 14% de crecimiento.

Top 15 Fastest Growing Properties in Europe by Total Unique Visitors (000) September 2011 vs. August 2011 Total Europe Audience, Age 15+, Home and Work Locations Source: comScore Media Metrix
Properties Total Unique Visitors (000)
Aug-2011 Sep-2011 Percent Change
Total Internet : Total Audience 372,066 373,433 0%
Populis 12,162 17,533 44%
Seznam.cz AS 11,358 14,151 25%
EA Online 13,267 15,336 16%
WIND Telecomunicazioni 15,363 17,653 15%
The Mozilla Organization 58,041 66,428 14%
Vivendi 16,659 18,796 13%
Opera Software 16,720 18,763 12%
Gameforge Sites 12,738 14,293 12%
New York Times Digital 17,304 19,351 12%
RCS Media Group 13,744 15,347 12%
WordPress 60,339 67,219 11%
Ask Network 56,547 62,932 11%
Ucoz Web Services 28,219 31,162 10%
LinkedIn.com 24,834 27,296 10%
Rakuten Inc 13,301 14,564 9%

Uso de Internet por país - comScore Septiembre 2011

Estos son los datos de uso de Internet en los 18 paises en lso que comScore proporciona información individualizada.

Rusia adelanta a Alemania como el país con mayor número de visitantes únicos.  El Reino Unido es el país en el que más horas pasan conectados sus usuarios con una media de 36 horas.

Overview of European Internet Usage by Country Ranked by Total Unique Visitors (000) September 2011 Total Europe Audience, Age 15+, Home and Work Locations Source: comScore Media Metrix
Total Unique Visitors (000) Average Hours per Visitor Average Pages per Visitor
World-Wide 1,420,316 24.0 2,292
Europe 373,433 26.4 2,805
Russian Federation 50,810 22.4 2,439
Germany 50,139 24.4 2,750
France 42,349 27.2 2,780
United Kingdom 37,197 35.6 3,272
Italy 23,748 18.5 1,986
Turkey 23,167 32.2 3,807
Spain 21,046 27.1 2,373
Poland 18,193 24.8 2,947
Netherlands 11,913 33.4 3,303
Sweden 6,208 24.9 2,489
Belgium 6,026 19.4 2,072
Switzerland 4,738 18.7 1,947
Austria 4,722 14.1 1,586
Portugal 4,239 21.8 2,191
Denmark 3,671 22.2 2,298
Finland 3,374 24.9 2,455
Norway 3,257 27.8 2,516
Ireland 2,343 20.2 1,979

Schema.org y su impacto en el SEO y las búsquedas

Qué es Schema.org

Bing, Google y Yahoo han lanzado una iniciativa llamada Schema.org que tiene como objetivo definir unos estándares de uso de metadatos comunes que sirvan indistintamente para cualquier buscador.

Los metadatos (información sobre los datos) son muy necesarios para los buscadores ya que les ayudan a aclarar el contenido de la página y a disambiguar posibles problemas de interpretación.  En determinados contextos es complicado saber si cuando buscamos Jaguar queremos saber sobre el animal o sobre la marca de coches.

Añadiendo esta información a nuestras páginas ayudamos al buscador a indexar mejor nuestro contenido.  Y no solo eso sino que al hacer más listo al buscador podremos realizar consultas más precisas y recibir resultados relevantes.  Por ejemplo, si buscamos hoy en día "vuelos Bilbao Londres" o incluso "vuelos Bilbao Londres hastas 100 euros" no encontraremos los vuelos directamente en los resultados sino que la mayoría de las veces acabaremos en la página de un operador en la que tendremos que volver a realizar la búsqueda.

Como usar los metadatos

Veamos un ejemplo.  Supongamos que tenemos una tienda online de venta de vinos.  Nos gustaría que el buscador que nos visite al indexar nuestras páginas de producto sepa con claridad de que va nuestro producto, el precio, la marca, etc... para poder devolver resultados más relevantes a quien consulta.

La sintaxis html de una página de producto podría ser más o menos así:

<div class="product">

  <h1>Vino Tinto Reserva de CondeDuque</h1>

  <h2>Cosecha de 2006 - 90% tempranillo 10% mazuelo</h2>

  <h3>Bodegas Conde Duque</h3>

  <p>Este vino ha sido elaborado y bla bla bla.......</p>

  <p>Precio.- 23.99 euros IVA Incluido botella de 75cl.</p>

  <p>Artículo en stock</p>

</div>

Si le aplicamos la información de metadatos nos quedaría algo así:

<div class="product" itemscope itemtype="http://schema.org/Product">

  <h1 itemprop="name">Vino Tinto Reserva de CondeDuque</h1>

  <h2 itemprop="model">Cosecha de 2006 - 90% tempranillo 10% mazuelo</h2>

  <h3 itemscope itemtype="http://schema.org/Organization"><span itemprop="name">Bodegas Conde Duque</span></h3>

  <p itemprop="description">Este vino ha sido elaborado y bla bla bla.......</p>

  <p>Precio.- <span itemprop="price">23.99 euros</span> IVA Incluido botella de 75cl.</p>

  <p itemprop="availability">Artículo en stock</p>

</div>

De esta forma le estamos indicando claramente a los navegadores cual es el nombre del producto, la descripción, el precio, la empresa que lo fabrica, etc...  Estamos ayudando al buscador a entender mejor la información que proporcionamos en nuestra web.

En la web Schema.org hay un listado detallado de todas las especificaciones y la información disponible para cada una de ellas.

El impacto de Schema.org en el SEO

Si los buscadores tienen información detallada y relevante de los productos que se venden o fabrican podrán devolver resultados más fiables y precisos.  Si conocen la localización de la empresa que las vende podrán respondernos a preguntas como "tienda más cercana con stock de Whisky Chic Reserva 12 años".

Se calcula que el 40% de las búsquedas tienen caracter local lo cual es un mercado muy importante del total de búsquedas y los metadatos jugarán un papel fundamental en ayudar a los buscadores a devolver resultados certeros.

La relevancia y la calidad de los contenidos seguirá siendo fundamental.  En la información de metadatos también se pueden incluir factores que afectan a la calidad de los contenidos como por ejemplo las reviews o los rankings.

Un factor a tener en cuenta es si al buscar "vuelo madrid barcelona" y recibir una lista de productos que cumplen ese criterio, podría ordenar los resultados por precio.  En ese caso una simple centésima de menos en el precio de mi producto podría auparle a las primeras posiciones lo que nos lleva a una interesante reflexión sobre la estrategia a seguir para el posicionamiento.

Las búsquedas sociales

Cuando hablamos de búsquedas sociales todos pensamos en botones de +1, me gusta o en sitios como Facebook.  

Creo que los buscadores, muy inteligentemente, han trasladado el componente social a las propias páginas de las empresas.  Con metadatos como Event, Recipe, Review, AggregateRating, Offer o AggregateOffer podemos ofrecer información "social" de calidad y que aporta valor a nuestros visitantes.  Además los buscadores serán conscientes de ello y podrán indexarnos mejor.

Por ejemplo si la web de Apple ha combinando información de Event con Person podríamos buscar "irá Steve Jobs al próximo Webdevelopers Conference" o preguntar por cualquier otro asistente/ponente.  No solo eso sino que podríamos saber la puntuación de sus anteriores ponencias y las opiniones de los usuarios.

Resumen

Creo que Schema.org es una jugada muy inteligente y apropiada no solo para ofrecer resultados de mejor calidad a los usuarios sino para competir con ventaja contra posibles nuevos competidores en el mercado de las búsquedas, como podría ser Facebook que por sus características ya posee una detallada información de eventos, personas, valoraciones y comentarios.

Además, a corto plazo, puede ser una estrategia de diferenciación para quienes implementen desde ya estos metadatos en sus webs.  Sobre todo para las pymes que tienen aquí una ventaja estratégica importante frente a las lentas y pesadas grandes corporaciones.

 

 

 

El SEO es para los mediocres

Hace aproximadamente un año y medio escribí un artículo titulado Porqué no debes hacer SEO  Todo lo que dije allí sigue siendo válido y esta plenamente vigente.  Hoy intentaré profundizar un poco más en el tema.

Piensa en tus usuarios

Aunque parezca una perogrullada no hacemos webs para máquinas ni para robots, hacemos webs para personas.  Queremos que otras personas lean nuestros artículos, compren nuestros productos, contacten con nosotros, les guste lo que hacemos.

Por lo tanto cualquier decisión que tomes en una web debe ir encaminada a mejorar la experiencia de uso de las personas.  Cuando vayas a realizar un cambio en tu web piensa siempre como beneficiará eso a quienes la visitan.   Si no se te ocurre ningún motivo, ese cambio es absolutamente prescindible.

Escribe contenido relevante

Esta es la parte más difícil y complicada de todas.  Aportar valor con tu web.  Escribir contenido que interese a quienes te visitan.  Eso será lo que haga que tu web cumpla con su función: Que genere contactos, que convierta a visitantes en clientes, que compren tus productos o que se suscriban a tu newsletter....

Olvídate de tonterías como la densidad de keywords.  No escribas pensando en como te van a encontrar o si una determinada palabra que es clave en tu artículo se repite suficientes veces.  Escribe pensando en quienes te leen, que tu lenguaje sea claro, sencillo, comprensible, que tu página les transmita el mensaje para el que fue creada.

Yo tengo dos opciones: Escribir un post donde repita las palabras SEO, posicionamiento, mejorar posicionamiento, aparecer primero en google, etc... un número determinado de veces buscando atraer visitantes o bien escribir un post donde trato de explicar lo que pienso con claridad y sencillez (que lo consiga o no es otra historia, pero lo intento).  En este segundo caso el número de apariciones de las palabras consideradas "clave", los enlaces, etc... dependerán exclusivamente de si son o no necesarias para que se entienda mejor lo que quiero decir.  No me importan las palabras, me importa el mensaje.

Veamos un ejemplo de la importancia del contenido:

Hace 3 meses lancé un proyecto personal llamado Buxmi.com y tanto Wwwhatsnew como Loogic fueron tan amables de comentarlo en sus webs.  Si buscamos en Google por el título exacto del post, que en Loogic es: Buxmi y los anuncios clasificados a demanda  y en Wwwhatsnew es: Pide lo que necesitas y Buxmi.com lo buscará por ti vemos como hay multitud de webs que se limitan a copiar su contenido, simples clones, zombies del copy/paste.

Si tuviésemos una mentalidad SGAE gritaríamos de rabia y de dolor viendo nuestra propiedad intelectual vulnerada y mancillada y presionaríamos a ministras mediocres para que cambiasen las leyes a nuestro gusto, para acabar con este expolio que pone en peligro la cultura, la creatividad y la paz en oriente medio.

Pero como no somos gilipollas pues debemos pensar que en el fondo eso es bueno.  Las personas tendemos a copiar y reproducir lo que nos gusta.  Así que que existan muchos clones solo confirma que lo que hacemos es bueno.  La gente no es idiota y aunque lleguen a la web clon antes que a la original enseguida se darán cuenta de que aquello no es mas que un copy/paste y al poco tiempo acabaremos en la web original.

Mirando las estadísticas de tráfico veo que además tampoco las webs clon aportan una cantidad de tráfico relevante hacia mi web.  Google tampoco es idiota y aunque al principio pueda caer en la trampa enseguida sabe reconocer el contenido original del clonado y mostrará primero a quien verdaderamente se lo merece.

Visitantes sí, pero de calidad

A veces ocurre que una empresa contrata a otra para que mejore su posicionamiento.  Esta otra empresa empieza a pensar única y exclusivamente en Google y cambia todo los contenidos de nuestra web pensando en Google. Lo que se dice, como está redactado, que textos se enlazan y a donde se enlazan... Todo se enfoca bajo la óptica del SEO y pasados unos meses:  El número de visitantes aumenta.  Victoria, prueba superada, el SEO funciona y tú Jorge eres idiota por escribir un artículo como éste.

Analicemos esto mas detenidamente:

Es cierto, y lo reconozco, que hay veces en que el SEO logra atraer más visitantes a nuestra web.  Lo que ocurre es que esto, de por sí, no es ninguna ventaja.  No queremos tener más visitantes a cualquier precio.  Queremos visitantes de calidad, gente que busca lo que nuestra web ofrece.  Esto es como poner un puesto de venta de estampitas de santos en la Meca.  Seguro que cada año millones de personas pasan por delante de tu tienda, pero no son tu publico objetivo, la verdad.

Para saber si tenemos visitas de calidad lo mejor es analizar el comportamiento de nuestros visitantes.  Consulta las estadísticas de tu web de forma frecuente.  Mide el comportamiento de quienes te visitan y olvídate del total de visitantes y el número de páginas vistas.  Son datos que no aportan ningún valor cualitativo.  Consulta la tasa de rebote de tu web (gente que ha llegado a tu web ha visto una única página y se ha ido).  Establece objetivos y analiza su cumplimiento ( un objetivo es que se suscriban a nuestra newsletter, que rellenen el formulario de contacto, que hagan un pedido online, que descarguen un folleto de nuestro producto, etc....)

Resumen

Piensa siempre en tus visitantes.  Tu web esta ahí para y por ellos.  Escribe pensando en ellos, enlaza pensando en ellos, modifica pensando en ellos.   

Genera contenidos de calidad, bien explicados y conseguirás visitantes de calidad.

Analiza lo que pasa en tu web.  Es la mejor manera de saber si lo estás haciendo bien.

Google es el número uno porque es capaz de devolver resultados de calidad cuando hacemos una búsqueda.  Sabe separar el grano de la paja.  Si tu web es estándar, relevante y de calidad aparecerá bien posicionada.  Deja el SEO para los mediocres, para los que no pueden aportar valor, ellos lo necesitan, tú no.

HTML 5 - Nuevos elementos: Header y Footer

Nuevos elementos: Header y Footer

HEADER

El elemento header permite definir contenido que servirá como introducción al contenido principal.   Header puede aparecer más de una vez pero nunca dentro del mismo elemento "padre".  

Contenido susceptible de aparecer como header son: Títulos identificativos, logotipos, menús de navegación, índices o formularios de búsqueda

Ejemplo:

<body>
  <header>
    <h1>Mi maravilloso blog</h1>
    <nav>
      <ul>
        <li>Artículos</li>
        <li>Acerca de</li>
        <li>Contactar</li>
      </ul>
    </nav>
  </header>
  <article>
    <header>
      <h1>Título de mi maravilloso post</h1>
      <time datetime=”2011-01-04T22:04:49+01:00” pubdate>

        Martes, 4 de Enero de 2011

        </time>

      </header>

 .... resto de la página


FOOTER


El elemento footer permite vincular información del tipo enlaces adicionales, información de copyright, autoría del documento y similares, al contenido principal.


Footer puede aparecer más de una vez pero nunca dentro del mismo elemento "padre".  


<body>

....contenido principal

  <footer>

  <small>

    © 2011 Metaleros sin fronteras | Diseño web Tom araya

  </small>

  <nav>

    <ul> 

      <li>Conciertos</li>

      <li>Entrevistas</li>

      <li>Noticias</li>

      <li>Contactar</li>

    </ul>

  </nav>

 </footer> 

</body>

HTML 5 - Marcado semántico

Marcado semántico

Una de las grandes mejoras que incorpora HTML5 es un mejor y más completo marcado semántico.  

Gracias al marcado semántico cuando creamos una página web no solo estamos poniendo un contenido (mediante html) y dotandolo de una apariencia (mediante css) sino que además estamos ayudando a los robots de búsqueda (si, estoy pensando en Google, el resto hoy por hoy son irrelevantes) a entender mejor de que va nuestra web, como está organizada, que contenido es importante y cual secundario, cual es el menú de navegación, el pié de página, etc.....

Mejorará HTML5 mi posicionamiento en Google?

La respuesta larga es NO y la respuesta muy larga es PUEDE, veamos porqué.

Google hace muy bien una cosa: Analizar páginas web, determinar su contenido y devolvernos páginas lo suficientemente relevantes para la pregunta que nosotros le hemos hecho.  La calidad de tu contenido no va a verse afectada por usar un marcado semántico, los post de tu blog, los artículos de la web de tu empresa, sus productos, etc... no van a ser mejores ni más relevantes solo por usar marcado semántico.  

Por otro lado, el marcado semántico va a ayudar a los robots a determinar con mayor precisión que parte es contenido, que parte es navegación, que secciones son más importantes que otras, etc... es decir, a entender mejor tu web y lo que contiene.  Quizás, fruto de esa mejora en entender mejor tu web, detecte contenido relevante que antes no había indexado correctamente y tus páginas se muestren en consultas en las que antes no aparecían.

Podemos usar hoy en día HTML5 y el marcado semántico?

Mi opinión es que si.  El soporte de las nuevas etiquetas en los navegadores modernos (Firefox, Chrome, Safari y Opera) es bueno y con unos pequeños trucos (javascript ó css) podemos emplearlas incluso en navegadores antiguos como Internet Explorer 8 o anteriores.

Una opción muy cómoda es emplear Modernizr que nos permite emplear estas etiquetas semánticas en Internet Explorer y además detectar el soporte, en todos los navegadores, de otras funciones avanzadas que incorpora HTML 5 y CSS 3

Mañana empezaremos a ver los nuevos elementos de HTML 5 :

Header, Footer, Section, Article, Aside, Nav, Hgroup y Figure

HTML 5 - Elementos obsoletos

Inicio hoy una serie de posts sobre HTML5 tomando como base la charla que dí en Aspgems el día 12/1/11 y en los que intentaré profundizar en los principales aspectos de la especificación HTML 5.

Al ser una especificación que está siendo debatida, modificada y actualizada inevitablemente algunas de las cosas que en estos posts se mencionen acabarán siendo incorrectas y/o incompletas.  Intentaré mantener los posts actualizados y te invito a utilizar los comentarios para indicarme cualquier cambio o mejora. 

Presentación y contenido

HTML 5 hace especial hincapié en separar presentación y contenido.  Para ello convierte en obsoletos muchos elementos y atributos que todavía encontramos frecuentemente en gran parte de las páginas web.  La gran mayoría de editores web wysiwyg hacen uso y abuso de estos elementos.
Separar presentación y contenido es una norma básica y un indicador de la calidad de una página web.  Aquellas webs que lo mezclan presentan 3 problemas fundamentales:

Mala accesibilidad

Cuando hablamos de accesibilidad tendemos a pensar que esto solo afecta a los usuarios con alguna discapacidad física sin darnos cuenta de que todos nos convertimos en discapacitados muchas veces a lo largo del día.  Navegar sin volumen porque estamos en una sala compartida, navegar utilizando mal el puntero porque vamos en el metro o andando por la calle, tipos de letra ilegibles en un smartphone, webs en flash que no se ven en los ipad, iphone, etc....
Mayor coste de mantenimiento
Las webs que mezclan el contenido y la presentación son mas caras de crear y de mantener.  Si queremos cambiar el color de un texto, el tamaño de letra de un menú, etc... debemos repasar y modificar todas las páginas del sitio web mientras que hacer lo mismo en una web bien hecha requiere modificar un único fichero CSS.

Mayor tamaño de página
Al incluir la presentación en el contenido nos vemos obligados a escribir código redundante que detalle la apariencia de los elementos en cada una de las páginas donde aparecen.

La gran mayoría de elementos empleados para la presentación se han eliminado de HTML 5, excepto el elemento style y el atributo style.  Otros han cambiado su significado y ya no denotan la apariencia sino que definen el tipo de contenido que incluyen.  Estos son los elementos obsoletos:

Listado de elementos obsoletos

basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, dir, align, link, vlink, alink, 
bgcolor, height, width, scrolling, valign, hspace, vspace, cellpadding, cellspacing, border, target, longdesc

Elementos que cambian su significado

small

Desde ahora el elemento small se debe emplear para hacer referencia a condiciones legales, informaciones de copyright, exenciones de responsabilidad, etc..   Normalmente en España denominamos a eso como "letra pequeña" por lo que resultará muy sencillo para nosotros aplicarlo de forma correcta.

Ejemplo:

<small>(c) 2011 Nuestra empresa.  Nuestra empresa no se hace responsable de los comentarios realizados en nuestro blog.  Siendo estos, responsabilidad de quien lo realiza</small>

b

El elemento b se empleará cuando deseemos resaltar algún aspecto de un parrafo pero sin otorgarle importancia semántica al elemento resaltado.   La norma indica que b debe usarse como último recurso y emplear los encabezados (h1..h6), el elemento em, strong o mark en función del tipo de contenido a resaltar.

i

Emplearemos i cuando queramos indicar algun aspecto diferenciador en el parrafo actual.  Por ejemplo: un nombre propio, una frase en otro idioma, una idea, un pensamiento.  Al igual que b debe ser usado en último recurso cuando otros elementos como em o como dfn, por ejemplo, no encajen.

s

El elemento s indicará contenidos en un párrafo que ya no son relevantes y/o fiables.

Por ejemplo:

<p>Visitanos</p>
<p><s>Dirección antigua: Avda. de las Acacias, 22</s></p>
<p><strong>Nueva dirección:  Avda. de las Acacias, 666</strong></p>

style

Tanto el elemento style como el atributo style permanecen en la especificación.  Si bien se desaconseja su uso y se recomienda utilizar las hojas de estilo siempre que sea posible, pueden existir situaciones específicas donde esto no sea posible o recomendable.  Es en estas situaciones excepcionales donde podremos aplicar estilos a los elementos utilizando su atributo style.

Dos elementos que me han sorprendido que desaparezcan son target y longdesc.

El primero, porque la única alternativa que se propone para abrir contenido en nuevas ventanas es mediante javascript y el segundo ya que era muy empleado y útil para mejorar la accesibilidad de las webs.  Seguramente en breve veremos cambios en la especificación que propongan alternativas a ambos elementos.

Resumen

HTML 5 define unas bases muy acertadas para la creación y desarrollo de webs, obligando a separar el contenido de la presentación.  Esta forma de trabajo nos llevará a ser desarrolladores web más eficientes y a crear páginas de mayor calidad y a menor coste.

El uso de elementos que HTML 5 define como obsoletos es un síntoma de que nuestro proceso de desarrollo debe mejorar.  Incluso con el soporte incompleto de HTML 5 por parte de los navegadores actuales, la mayoría de elementos marcados como obsoletos son fácilmente reemplazables por estilos incluidos en hojas CSS y por elementos que aportan un mayor valor semántico a nuestras webs.

En un próximo post hablaremos de semántica y veremos las nuevas etiquetas y elementos definidos por la especificación.

Introducción al HTML 5

Estas son las diapositivas de la charla de introducción al HTML 5 que
ofrecí en Aspgems el 12/01/11

Durante los próximos días publicaré los contenidos mucho más
desarrollados y detallados.

Acabaremos todos programando en Javascript?

Javascript
Javascript

Cada día nos acercamos un poco más al futuro, para comprobar que es exactamente igual que el pasado.

Por qué digo esta tontería, pues porque esta claro que el futuro próximo pasa por volver a usar terminales tontos, dotados exclusivamente de un navegador que se encarga de cargar todas las aplicaciones que usamos y que están en servidores remotos.

Yo creo que ese modelo está lleno de ventajas ya que permite independencia tanto de localización física como de dispositivo.  Está claro que siempre quedarán irreductibles galos que preferirán todo en local, pero cuando salió el automóvil también había gente que prefería ir a los sitios a lomos de su caballo.

Pero para que este modelo funcione debemos proporcionar a los usuarios de las aplicaciones una mejor experiencia de uso que las aplicaciones instaladas localmente en sus ordenadores.  Para conseguir esta mejor experiencia de uso creo que hay dos tecnologías que van a jugar un papel fundamental:

HTML 5

y

Javascript

.

El HTML 5 porque definitivamente deja de ser un Lenguaje de Marcado para convertirse en una herramienta de desarrollo de aplicaciones web "serias": Las nuevas pautas para la creación de formularios, la integración del multimedia, los websockets, etc.....  La web ya no es solamente una serie de páginas de texto enlazadas entre sí (dejo de ser eso hace mucho tiempo).  Algunos dicen que HTML 5 traerá la web semántica aunque en mi opinión eso de la web semántica es el nuevo hype absurdo, más humo que poder vender.

El otro pilar en que se fundamenta esta mejora en la experiencia de usuario es el javascript.  Hace 8 años era inviable utilizar javascript para desarrollar aplicaciones web.  Las diferencias entre el javascript de Netscape Navigator e Internet Explorer eran muy grandes y existía gran cantidad de gente que no lo tenía habilitado.  Por lo tanto debías asegurarte que tu aplicación web funcionaba sin javascript si querías que fuese vista y usada por el máximo de personas.

Luego llegaron las librerías como P

rototype

y

JQuery

que simplificaban el uso de javascript y encapsulaban esas diferencias (algunas todavía existentes).  Los nuevos navegadores se toman muy en serio javascript e incluyen unos motores de ejecución optimizados y eficientes lo que permite su uso intensivo.   Y cada día nos encontramos con nuevas y sorprendentes mejoras que dotan a los navegadores de nuevas funcionalidades que ayudarán a crear más y mejores aplicaciones web como por ejemplo la

integración de un API para gráficos 3D

.

Hoy en día es posible crear aplicaciones web en las que toda la lógica (o la mayor parte) reside en ficheros javascript lo que evita que el usuario esté realizando constantes peticiones al servidor.  Otros usos, como

Node.js

permiten la creación de aplicaciones web mucho más complejas y dinámicas.  Además empleando el API de almacenamiento en local que define HTML5 permitiré que mi aplicación te funcione cuando no estás conectado a la red y se sincronice automáticamente cuando vuelvas a estar online.

Y si tengo que programar gran parte de la lógica de mi aplicación en javascript, porqué no programarla toda, incluso en la parte de servidor y así no tengo que estar tratando con lenguajes diferentes según donde resida dicha lógica.

Resumen:  

Hoy en día javascript es una parte muy importante en el desarrollo de aplicaciones web y la tendencia es que lo sea cada vez más.  Los navegadores modernos como Safari, Chrome o Firefox permiten un uso eficiente de javascript con independencia del dispositivo utilizado.

Además existen librerías que nos ayudan a programar javascript de forma agradable e incluso herramientas como

CoffeeScript

que es un lenguaje que permite una sintaxis más amigable y que luego se compila a javascript.

Otras como JavascriptMVC nos permiten utilizar paradigmas aceptados y empleados en el desarrollo web.

La tendencia es aumentar la lógica en el lado cliente para poder permitir el uso de las aplicaciones web en entornos en los que no hay conectividad.  Por lo tanto no parece descabellado pensar que si toda la lógica de una aplicación web en el lado del cliente está programada en javascript, también pueda estarlo la del lado servidor.

La paginación y el SEO

Actualizado el 23-11-2011 La paginación es una parte muy importante de sitios web que contienen gran cantidad de información ya que permite dividir cantidades muy grandes de datos en partes más pequeñas y manejables por los usuarios.  Además puede servir también como una herramienta de navegación ya que si, por ejemplo, vemos un listado de productos ordenados por precio de menor a mayor, visitando la última página encontraremos los de mayor precio.

Cómo debemos organizar la paginación de nuestra web?

En primer lugar y como en cualquier cosa que hagamos en nuestra web debemos pensar en nuestros usuarios.  Y después veremos como conseguir que aquello que es lo mejor para nuestros usuarios sea también accesible y útil para los buscadores que visitan nuestra web.

Amazon
Amazon

Elementos de una buena paginación

Los elementos principales de una buena paginación son:

  • Una lista ordenada y numerada correlativamente
  • Un indicador de en que página nos encontramos
  • Unos enlaces a las páginas siguiente y anterior

Con estos tres elementos tenemos más que suficiente para conseguir una buena paginación.  Clara y sencilla de usar.  Veamos en detalle cada uno de ellos.

Una lista ordenada y numerada correlativamente.

Es el elemento principal de nuestra paginación.  Dicha lista sirve para que el usuario sepa de forma sencilla la cantidad de resultados que tiene a su disposición.  Dependiendo de la búsqueda el usuario sabrá que o bien hay muchos resultados y le conviene refinar un poco mejor su búsqueda o bien era esto precisamente lo que quería.

Youtube
Youtube

Muchas veces, debido al gran número de resultados, es inviable mostrar la lista con todas las páginas disponibles.  En estos casos lo mejor es mostrar las 8 ó 10 primeras páginas una elipsis (...) y las 2 ó 3 últimas páginas.

No siempre es necesario utilizar números correlativos.  Si, por ejemplo, nuestro sitio muestra recetas de cocina y dichas recetas están ordenadas alfabéticamente es mejor sustituir los números por las letras del alfabeto, que aportan mayor información al usuario y le permiten navegar hasta la receta de su interés de forma más rápida.

Si mostramos elementos ordenados cronológicamente podemos sustituir los números por los nombres de los meses, por años, etc...

También recomendamos que las páginas que ya hemos visitado se presenten en otro color distinto que facilite al usuario saber si ya había estado en dicha página antes.

Readwriteweb
Readwriteweb

Un indicador de en que página nos encontramos

Es un elemento fundamental ya que al navegar por una web empleando la paginación perdemos fácilmente la referencia de en que página nos encontramos.

Google

Enlaces a las páginas siguiente y anterior

Son muy empleados por los usuarios ya que facilitan la navegación.  Si queremos avanzar en lugar de tener que prestar atención a la página en la que nos encontramos y pulsar en el número siguiente, vamos directamente al enlace de siguiente y lo pulsamos.

Es recomendable añadir unas flechas indicadoras a las palabras siguiente >> y << anterior que también sean clickables.

Si nuestra paginación no muestra un enlace a las últimas páginas puede ser interesante añadir unos enlaces de primero / último.  Si bien no es imprescindible y solo merecen la pena si aportan valor y por el tipo de ordenación el usuario puede tener interés en  ir directamente a la última o últimas páginas.

Accesibilidad

No hay una normativa específica para la paginación ( ni la norma 508 ni las WCAG 2.0 dicen nada específicamente ) pero parece claro que al tratarse de una lista lo mejor es emplear la etiqueta ul o bien si mostramos todas las páginas podemos emplear ol.

Los elementos de esta lista deberán ser accesibles mediante teclado.

SEO

Existe gente que recomienda etiquetar los enlaces de la paginación como "nofollow" y delegar en el sitemap el acceso de los buscadores a todas las páginas.  L

Elpais
Elpais

o cierto es que esta no es una buena práctica ya que impedimos que el Page Rank "fluya" a través de nuestra web desde las páginas de resultados hacia las páginas con contenido.

En las etiquetas title y description de nuestro head deberemos indicar que se trata de una paginación mostrando la página en la que nos encontramos y si es relevante el total de resultados/páginas disponibles.

Búsquedas muy parecidas o diferentes ordenaciones de los resultados pueden hacer que nuestro contenido se presente de muchas formas, siendo realmente el mismo contenido y como sabemos a Google no le gusta que dupliquemos contenido innecesariamente.  Para evitar mostrar contenido duplicado lo mejor es emplear la opción de personalizar parámetros que nos ofrece la herramienta Webmaster Tools.

Si, por ejemplo, nuestra paginación permite ordenar a los usuarios por fecha, tanto ascendente como descendente, desde Webmaster Tools podemos decirle a Google que solo tenga en cuenta la ordenación ascendente e ignore la descendente ya que el contenido es exactamente el mismo.

Webmastertools

Conviene aclarar que Google entiende perfectamente que ver unos resultados ordenados por fecha o bien ordenados por nombre no son los mismos resultados y esto no afecta al hecho de tener contenido duplicado.

Resumen

Siguiendo unas pequeñas normas básicas es posible realizar una paginación que no solo permita a nuestros visitantes encontrar lo que buscan de forma más eficiente sino que además ayudará a mejorar la indexación de nuestro sitio por parte de Google.

Actualización: 23-11-2011

Google ahora entiende y soporta el uso de rel="prev" y rel="next" en las paginaciones, que como bien indica @supercoco9 en los comentarios es una forma estándar y sencilla de añadir contexto y semántica a los enlaces de paginación.

Además y en determinados casos Google comenta que para mejorar la experiencia del usuario intentará mostrar una página con todo el contenido en caso de que exista tanto la versión paginada como la versión con todo el contenido (en un artículo largo, por ejemplo).  En este caso debemos usar la etiqueta canonical para apuntar desde las distintas páginas con el contenido paginado a la página con todo el contenido.

pagination_view_all
pagination_view_all

Conferencia Rails 09

Ya está en marcha y a pleno rendimiento la Conferencia Rails 2009.  Este es el calendario de talleres y conferencias y aquí teneis más información sobre las charlas. Ya podéis apuntaros en http://app.conferenciarails.org. Para ello primero debéis registraros y, a continuación, realizar el pago por transferencia bancaria o por PayPal (novedad este año). Tened en cuenta que hasta que el pago no se realiza y confirma, la plaza no está asegurada.

El precio este año es 120€ (IVA incluido). Pero, atención, el precio incluye:

  • 2 días de conferencia con ponentes como Nathaniel Talbott, David A. Black, Yehuda Katz, Obie Fernández o Scott Chacon.
  • Un día de talleres (HAML, Chef, Capistrano y Cucumber)
  • Los cafes y comidas de los días de conferencia
  • La cena del día 26
  • La famosa camiseta
  • Las chapitas para el speed-dating

El número de plazas es limitado así que apúntate rápido.