Como semantizar textos – Parte 1 – (Los formatos RDF)

Cada vez se hace más evidente que aportar textos enriquecidos a nuestras web trae muchas ventajas. Actualmente los robots intentar deducir un dato basándose en el contenido que lo rodea, pero con semántica seremos nosotros quien le digamos a los robots que tipo de información es. Obtendremos así búsquedas más precisas y mejoradas aumentando también la experiencia de usuario, porque las búsquedas en Yahoo y Google mejoran su apariencia con contenidos semantizados.

Actualmente la información semántica puede aparecer en la web de las siguientes formas:

  • Ficheros RDF
  • Meta etiquetas
  • Utilizando vínculos relacionales
  • Etiquetas HTML semánticas
  • Microformatos
  • Microdatos

Dejando de lado algunas etiquetas muy concretas HTML4 y el uso de metadatos en la cabecera de los documentos HTML, el primer paso firme para la adopción de textos enriquecidos fueron los eRDF (estándar para XHTML 1.0) y los RDFa (para XHTML1.1). Estas semánticas las explicaremos con más detalle en este artículo.

Texto enriquecido mediante RDF (Resource Description Framework)

Se trata de es un framework para metadatos recomendado por la W3C en 1999. Bajo una sintaxis XML, está pensado para dar semántica a la información y generar metadatos sobre dicha información. Esto permite que los datos puedan ser integrados y reutilizados.

RDF constituye una tecnología fundamental dentro de la Web Semántica, cuyo funcionamiento se resume en una conversión de recursos de la Web en expresiones compuestas que se estructuran en tres partes:

  • Lo que se describe.
  • La propiedad del recurso que se desea definir.
  • El valor de la propiedad con el que se define la relación.

Ejemplo de RDF

La frase: “La semántica y la web 3.0 – Parte 1, está escrito por Jorge López en el blog círculo de maquetadores”, se representa en RDF de esta manera:

<rdf:RDF>
  <rdf:Description about="http://www.circulodemaquetadores.com/semantica-RDF-RDFa">
  <s:Creator>Jorge López</s:Creator>
  <dc:title> La semántica y la web 3.0 - Parte 1</dc:title>
  <dc:publisher>Cículo de maquetadores</dc:publisher>
  </rdf:Description>
</rdf:RDF>

El resto de información y gramáticas formales sobre RDF la podrás encontrar en la correspondiente especificación de la W3C.

RDFa (Resource Description Framework-in-attributes)

Se trata de extensiones específicas de XHTML 1.1, (a la espera de su implementación en HTML 5) propuestas por W3C. Este método enriquece los textos a través de los atributos y anotaciones de las etiquetas XHTML invisibles para el usuario. Se validan mediante la DTDDocument Type Definition- XHTML1.1+RDFa. Aunque todo esto parezca muy complicado, en realidad de lo que se trata de extender el manejo de los atributos “rel”, “content” y “property“.

Para estandarizar su uso utilizaremos diccionarios predefinidos como Dublin Core. Para indicar en RDFa que estamos utilizando un diccionario, lo haremos de la siguiente manera:

<body>
  <div class="articulo">
    <h2> Como semantizar textos - Parte 1 </h2>
    <p>Texto del artículo.</p>
    <p>Autor: <span property="dc:author" content="Jorge lópez"> Jorge lópez </span></p>
    <p>Fecha: <span property="dc:date" content="2011-12-14">14 de diciembre de 2011</span></p>
  </div>
</body>

En el diccionario Dublin Core vienen especificados los términos author y date. Para buscar otros términos solo tendremos que buscarlos en el diccionario.

Como vemos la ventaja de RDFa es que sus reglas son genéricas, lo que facilitará la labor de muchos autores. Las páginas que no contienen RDFa se visualizan igual que las que tienen, ya que de lo que se trata es de aportar riqueza semántica a la información, no de cambiar ni el contenido ni de la disposición de los elementos.

Nuevamente, la mejor manera de completar la información sobre RDFa es hacer referencia al borrador de trabajo sobre RDFa de la W3C. El blog para webmasters de google también recomienda utilizar marcado RDFa para mejorar los resultados y además proporciona algunos ejemplos.

eRDF (Embedded RDF)

El formato eRDF fue creado en 2005 por Ian Davis inspirado por los microformatos. Se trata de una sintaxis para extraer la información del documento ya sea por medio de un Parser o una Hoja de estilos XSLT. eRDF solo está parcialmente apoyado por la W3C.

Para que un documento HTML le sea reconocido la existencia de eRDF se debe declarar la adhesión a un perfil especial. Esto se logra sumando el atributo profile en el head del documento:

  <head profile="http://purl.org/NET/erdf/profile">

Toda la información sobre eRDF en el blog de Ian Davis.

La semántica de los enlaces: definiciones de atributo rev y rel

Con la aparición de los microformatos y más recientemente de los microdatos de HTML5, se ha desatado un enorme interés por la semántica. Hay muchas maneras de enriquecer texto para ayudar a los buscadoras a entender e indexar mejor la información que generamos. Un método clásico, pero no muy extendido, para generar metadados es a través de los enlaces.

Repasemos algunos atributos básicos de los enlaces. Como veremos, algunos de ellos ya aportan información extra sobre el contenido enlazado:

Definiciones de atributos

  • href: Especifica la localización de un recurso de la Web. La ruta generada podrá ser absoluta o relativa respecto a la web.
  • hreflang: Ester atributo sólo puede utilizarse junto con href, porque especifica el idioma del recurso enlazado.
  • title: Añade información sobre un vínculo. Esta información puede ser utilizada de manera opcional por los agentes de usuario o dependiendo de la versión de navegador, puede ser representada mediante un tool-tip.
  • name: Asigna un nombre a un enlace de modo que éste pueda actuar como destino de otro vínculo a modo de ancla.
  • type: Especifica qué tipo de contenido es el contenido enlazado con href. Por ejemplo, podemos especificar que lo que enlazamos es un documento PDF. Si es un tipo de contenido no soportado por los agentes de usuario, pueden optar por no mostrarlo. En este artículo repasamos algunos de los tipos de contenido registrados.
  • charset: Este atributo especifica la codificación de caracteres de la página o recurso enlazado con el atributo href.

Para enriquecer semánticamente los enlaces, los atributos más interesantes y puede que más útiles son rev y rel. Ahora veremos su función y sus valores.

Atributos rev y rel

  • rel: Permite definir la relación entre la página actual y la enlazada.
  • rev: Define la relación que tendrá la página enlazada con la actual.

Valores de los atributos de rev y rel

  • alternate: Indica que es una versión alternativa al documento actual. Cuando se utiliza conjuntamente con el atributo “hreflang”, significa que enlaza a una versión traducida del documento. Si es utilizada con el atributo “media”, implica que esa versión está preparada para un medio diferente (como una impresora)
  • stylesheet: Indica que se ha enlazado una hoja de estilos externa. Se puede utilizar junto con “Alternate” para ofrecer hojas de estilo alternativas seleccionables por el usuario.
  • start: Indica a los motores de búsqueda que el documento actual es considerado por el autor como el punto de inicio de un conjunto de documentos. Por ejemplo la primera página de una paginación o el primer capítulo de un manual…etc.
  • next – prev: Indica que es el documento que enlazados es anterior o siguiente al actual dentro de una secuencia lógica de documentos. En una paginación estos valores pueden sernos muy útiles.
  • index: Es el documento que hace la función de índice en una secuencia de documentos.
  • copyright: Se refiere al aviso de copyright del documento actual.
  • help: Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)

La especificación oficial de HTML define la lista completa de tipos de relaciones que se pueden utilizar.

Como microformatos

Se han creado varios microformatos para ser utilizados como valor de estos atributos. Algunos de estos microformatos son tan útiles y se han hecho tan populares que incluso han sido recomendados por google para no ser penalizados, a continuación veremos unos pocas aplicaciones:

  • nofollow: Sin duda es el más popular de todos. Fue propuesto por algunos buscadores para indicar qué enlace no debe ser considerado por los algoritmos de posicionamiento y de este modo para luchar más eficazmente contra los spammers. Su aplicación más común, es para aplicarlo a respuestas y comentarios en blogs. Enlace a documentación.
  • license: Indicar el tipo de licencia que tiene el contenido. Lo podemos utilizar para indicar que el destino del enlace es la licencia del contenido de la página actual. Enlace a documentación
  • tag: sirve para agregar etiquetas en los post de los blogs. Así podrá categorizar nuestras webs mediante la adopción de este tipo de etiquetas. Enlace a documentación

Archivos HTC – HTML Components

¿Qué son los componentes HTC?

Los componentes HTC, fueron desarrollados por Microsoft para implementarlos en Internet Explorer 5.5 y posteriores. La idea era proporcionar un mecanismo alternativo para encapsular código y comportamiento DHTML en un componente de script.

En realidad los HTC son archivos XML que contienen secuencias de comandos y elementos específicos, como propiedades, métodos y eventos que definen dicho componente. Luego se guarda con extensión .htc.

¿Cómo se ejecutan?

Los archivos HTC se ejecutan en la hoja de estilo, con la propiedad behavior, de esta manera:

img {
  behavior: url(iepngfix.htc);
}

La propiedad behavior permite utilizar CSS para fijar un script a un elemento específico y aplicar a ese elemento componentes dinámicos, como los mencionados archivos .HTC.

Ten en cuenta que behavior es una propiedad no estándar que solo soporta Internet explorer. Por esta razón y para prevenir errores de validación, es conveniente aplicarla en una hoja de estilo exclusiva para explorer.

¿Para qué se utilizan?

Actualmente su utilización es muy limitada. Lo más normal es utilizarlos como hacks para IE o para replicar características que otros navegadores tienen y Explorer no puede reproducir de forma nativa.

¿Cómo modificarlos?

No hay mucho que decir en cuanto a desarrollo y modificación de archivos de HTC. Son básicamente estándar de Javascript, con un pequeño envoltorio XML. Por lo que si sabes Javascript, no deberías tener demasiados problemas modificar un HTC. De todas formas, Microsoft ha publicado documentación al respecto en HTC Reference

¿Por qué deberías utilizarlos?:

Como he dicho antes, solo tendría sentido utilizarlos si vas a escribir o modificar un hack para IE. Para prácticamente todo lo demás Javascript es la mejor opción.

La tabla periódica del SEO

Search Engine Land Periodic Table of SEO Ranking Factors

Imagen de Search Engine Land

El portal Search Engine Land, ha creado una imprescindible infografía que organiza como si de una tabla periódica se tratase, algunos factores que impactarán de manera positiva o negativa en el posicionamiento de una web.

Hay disponibles dos versiones de la tabla para descarga: la versión en formato extendido (con las descripciones y leyenda completa) y en formato reducido (solo el esquema).

En este artículo podréis encontrar un breve resumen y sobretodo el significado de las abreviaturas de la tabla para poder decodificarla correctamente.

Factores internos de posicionamiento

Factores On page:
Area Abreviatura Significado Importancia del factor
Contenido Cq Calidad de contenido +3
Cr Investigación de las palabras clave +3
Cw Inserción de las palabras clave en el contenido +3
Ce Contenido participativo +2
Cf Contenido fresco y original +2
Código HTML Ht Título de la página +3
Hd Descripción de la página +2
Hh Encabezados de la página +1
Arquitectura Ac Página fácilmente rastreable +3
As Velocidad de carga +2
Au Construcción de la URL +1

Factores externos de posicionamiento

Factores Off page:
Area Abreviatura Significado Importancia del factor
Enlaces Lq Calidad de los enlaces entrantes +3
Lt Texto de los enlaces +3
Ln Número de enlaces que apuntan a tu sitio +2
Social Sr Reputación del sitio +2
Ss Con cuántos usuario se comparte el sitio +1
Confianza Ta Reputación del sitio +3
Th Antigüedad del dominio +1
Personal Pc País de origen de la visitas +3
Pl Ciudad de origen de la visitas +3
Ph Fidelidad de las visitas +2
Ps Opinión de tus amigos sobre el sitio +1

Factores con posible penalización

Violaciones
Abreviatura Significado Importancia del factor
Vt Contenido superficial y sin sustancia -2
Vs Utilización excesiva de palabras clave -1
Vh Ocultación de contenido -1
Vc Engañar a los robots de búsqueda -3
Vp Uso de enlaces de pago -3
Vi Creación de spam -1

Tipos de bloqueos

Bloqueos
Abreviatura Significado Importancia del factor
Bp Bloqueos personalizados -1
Bt Bloqueos masivos o totales -3

Tecnologías propietarias en el desarrollo web

Las Innovaciones patentadas por los fabricantes de software son algo muy común. Algunas se han convertido en tecnologías básicas para el devenir del desarrollo web y han sido ampliamente aceptadas, otras han fracasado miserablemente y han caído en el olvido.

Software propietario

En algunos casos, estas tecnologías solo funcionan en un entorno concreto, en otros solo funcionan mediante un plugin específico que no tiene por qué estar instalado junto al navegador, incluso hay tecnologías que se debe pagar licencia para poder ser utilizadas.

En este artículo repasaremos brevemente algunas de las más importantes.

VML – Vector Markup Language

  • Desarrolladores: Autodesk, Hewlett- Packard, Macromedia, Microsoft y Visio.
  • Características: VML es un lenguaje XML para la creación de gráficos vectoriales. Fue presentado para su estandarización al W3C en 1998 compitiendo con PGML. Tras de un largo examen, el W3C decidió combinar esos dos formatos originando el formato SVG.
  • Inconvenientes: Sólo las aplicaciones de Microsoft soportan este lenguaje.

PGML – Precision Graphics Markup Language

  • Desarrolladores: Adobe Systems, IBM, Netscape, y Sun Microsystems
  • Características: Otro lenguaje basado en XML para la representación de gráficos vectoriales. Se presentó a la W3C no siendo aprobado para su recomendación.

Adobe Flash

  • Desarrollador: Adobe systems
  • Características: Se trata de la tecnología de creación y edición de animaciones vectoriales más popular. Es actualmente la herramienta más utilizada para la reproducción de video en la red, aunque con la implantación progresiva de HTML5 y CSS3, puede que esta situación cambie en poco tiempo.
  • Inconvenientes: Es necesario que el navegador tenga instalado el plugin correspondiente para poder visualizar el contenido generado en Flash.

Silverlight

  • Desarrollador: Microsoft
  • Características: Silverlight fue lanzado en 2007 para competir con Flash en la creación de contenido multimedia para la web. Por ahora no ha conseguido una implantación muy profunda.
  • Inconvenientes: Esta tecnología no utiliza el estándar SVG, además el contenido introducido en la red mediante Silverlight, solo podrá ser actualizado y modificado desde la plataforma Windows.

Applets de Java

  • Desarrollador: Sun Microsystems
  • Características: Un applet es un programa precompilado que se puede incrustar en un HTML. La idea es que deben ser descargados y ejecutados por el navegador, lo que permite crear programas que se puedan ejecutar solo cargando una web. Se pueden utilizar en cualquier sistema que tenga instalada una Java Virtual Machine.
  • Inconvenientes: Del mismo modo que Flash, los applets requieren un plugin específico que no está disponible por defecto en los navegadores.

Controles ActiveX

  • Desarrollador: Microsoft
  • Características: Fueron la respuesta de Microsoft a los applets de Java. Están construidos sobre el modelo de componentes de Windows.
  • Inconvenientes: Sólo operan oficialmente en Internet Explorer (aunque existen opciones para ejecutarlos en otros navegadores) y en el sistema operativo Windows.

Fuentes OPEN TYPE

  • Desarrolladores: Microsoft, Adobe systems
  • Características: OpenType es un formato de fuente basado en TrueType. La especificación continúa en desarrollo y en la actualidad se encuentra en proceso de convertirse en un estándar abierto. Debido a su su versatilidad es ampliamente utilizado en la mayoría de los navegadores y sistemas operativos.

Fuentes EOT – Embedded OpenType

  • Desarrollador: Microsoft
  • Características: Es una variación de los formatos TrueType y OpenType.
  • Inconvenientes: Es compatible exclusivamente con Internet Explorer.

Formato GIF – Graphics Interchange Format

  • Desarrollador: CompuServe
  • Características: Es un formato de imagen sin pérdida que comprime los archivos usando un algoritmo llamado LZW. Fué muy utilizado en los noventa sobre todo para mostrar pequeñas animaciones, al tratarse del único formato soportado por multitud de navegadores que permita dicho efecto.
  • Inconvenientes: Solo puede contener 256 colores. En la mayoría de los casos tiene un rendimiento de compresión inferior respecto al formato libre PNG

Tecnología ASP – Active Server Pages

  • Desarrollador: Microsoft
  • Características: ASP es un lenguaje de servidor que permite el uso de diferentes scripts y componentes ya desarrollados junto con HTML para mostrar páginas dinámicas.
  • Inconvenientes: Solo funciona con servidores que utilizan el sistema operativo Microsoft.

VBScript – Visual Basic Script

  • Desarrollador: Microsoft
  • Características: Fue un lenguaje de programación de scripts basado en Visual Basic desarrollado para competir, con poco éxito, con Javascript en entornos de cliente. Microsoft decidió abandonar esta tecnología en favor de .NET.
  • Inconvenientes: Era compatible exclusivamente con Internet Explorer.

¿Destacarías alguna tecnología propietaria más?

Una mirada sobre la mejora progresiva y la degradación elegante


desarrollo multidispositivo. Imagen recogida del blog del desarrollador noruego Jørn Kinderås

Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?

Existen dos estrategias para afrontar este reto: la degradación elegante (graceful degradation) y la mejora progresiva (progressive enhancement).

Estas dos filosofías de desarrollo coinciden en varios puntos:

  • Un sitio web debe funcionar correctamente ante la multiplicidad de navegadores y dispositivos.
  • Hay que separar en varias capas el contenido, la presentación y la funcionalidad de los proyectos.
  • Lo más importante es el marcado semántico y la extensión de los estándares web.

En el fondo tienen un enfoque radicalmente distinto. La clave está en el afecto que tienen estos puntos en el flujo de trabajo.

Degradación elegante

La degradación elegante es un concepto importado de la ingeniería desarrollado por el psicólogo David Courtenay Marr. La traslación al diseño web viene a significar que un sitio debe funcionar y visualizarse de forma básicamente parecida independientemente del navegador o dispositivo utilizado. Paliando en la medida de lo posible el empobrecimiento de un diseño que se producirá por las limitaciones técnicas de los navegadores más anticuados.

En la práctica esta técnica se reduce a utilizar sólo aquellas características que sean soportadas correctamente por navegadores obsoletos o muy limitados técnicamente como Internet Explorer 6 o 7. Esto relega a otras tecnologías más avanzadas, como CSS3 a un indefinido futuro en el que serán ampliamente soportadas por la mayoría de los navegadores y dando lugar a anacronismos como que sigan utilizándose navegadores de más de diez años de antigüedad. Al fin y al cabo ¿para que los usuarios se van a actualizar de navegador, si las páginas no van a ofrecer una mejora visual de un navegador a otro?

Asegurar que nuestras webs se vean igual en navegadores de dos, tres y hasta cuatro generaciones de antigüedad, no resuelve el problema de cómo implementar nuevos estándares y tecnologías sin que la experiencia de usuario se vea mermada.

La técnica de la degradación elegante conlleva un tiempo extra de optimización para cada navegador (Cross-browser). Como es de suponer, es necesario albergar un sólido conocimiento de cada navegador y tener todo un catálogo de soluciones para contrarrestar las posibles limitaciones que nos vallamos encontrando. Las enormes dificultades para poder comprobar nuestras páginas en los cada vez más numerosos y variados dispositivos y navegadores están provocando que algunos maquetadores adopten la solución más radical posible, proponer al usuario que simplemente se descargue la última versión del navegador.

Como desarrolladores web no tenemos derecho a decidir por los usuarios que navegador deben utilizar, sobretodo porque muchos de ellos quizá no tengan ni el control, ni las capacidades, ni el software necesario para soportar estas últimas versiones. Lo que sí que podemos hacer es adoptar otras filosofías de desarrollo.

Mejora progresiva

El concepto de mejora progresiva fue acuñado por Steven Champeon, en su conferencia Inclusive Web Design for the Future en 2003.

Esta filosofía implica que los sitios web dispondrán de las características más avanzadas a medida que el navegador que las ejecuta sea más avanzado. Esto permite aprovechar todas las posibilidades CSS sin perjudicar a los navegadores obsoletos o limitados. De este modo se premia al usuario por la utilización de un navegador más moderno, y los usuarios desactualizados no tendrán quebranto alguno al acceder al contenido de una web.

Si suponemos que los navegadores más anticuados tienden a desaparecer a medida que los usuarios los van actualizando, es lógico ir introduciendo tecnologías más modernas para que nuestros desarrollos estén mejor preparados para soportar los estándares del futuro. ¿Tanto daño hace que unos usuarios vean los bordes redondeados y otros los vean cuadrados?

Para encarar la mejora progresiva de un proyecto propongo que la maquetación web se realice siguiendo los siguientes puntos:

  • La maquetación debe permitir el correcto acceso a la información de una página, independientemente del tipo de navegador o dispositivo utilizado por el usuario.
  • Utiliza aquellas características que aunque sólo los navegadores modernos puedan visualizar, los navegadores antiguos puedan ofrecer una alternativa viable (esta es una manera conservadora de afrontar este paradigma).

Algunos ejemplos de mejora progresiva pueden ser:

  • La utilización de una API de tipografías (como Google) para aquellos navegadores que pueden soportarlas.
  • Propiedades CSS3 como text-shadow, border-radius o Gradient para los navegadores habilitados.
  • Animaciones y fotografías en formato SVG.
  • Fotografías en formato PNG con transparencia.

De este modo, los desarrolladores nos dotaremos de una base para la experimentación y la innovación respetando los estándares y el diseño universal sin excluir a ningún usuario. Eso es lo que a mi modo de ver, hace a la mejora progresiva un paradigma más acertado y ajustado al cambiante mundo del desarrollo web. Es por eso que en Yahoo lo adoptaron rápidamente y lo han utilizado para crear su estrategia de soporte de navegador gradual.

Mas información:

Aclaraciones sobre el PageRank

El PageRank es un algoritmo secreto patentado por google, que mide la relevancia de una página en base al número y calidad de las páginas que la referencian. Durante algunos años el posicionamiento giraba alrededor del PageRank, hasta que el desarrollo de técnicas para modificarlo acabaron con su supremacía. En la actualidad, el PR se sigue utilizando como criterio de posicionamiento, pero su peso es mucho menor de lo que fue en su tiempo. En todo caso puede ser un buen indicador de la popularidad de una web. Sigue leyendo

Los codec de video en HTML 5

Cualquier persona que haya visitado YouTube sabe que se puede incrustar vídeo en una página web. Antes de html 5, no había forma basada en estándares para hacerlo, porque hasta ahora la mayoría de los videos en la web se han visualizado a través de plug-ins de terceros como QuickTime, RealPlayer o Flash. Pero esto cambiará a medida que se valla implementando html 5 en la web.

Logotipos de los codecs de video de HTML 5 más conocidos

Imagen de www.anexom.es

Todavía se están definiendo algunas de las especificaciones de html 5. Según dichas especificaciones, los navegadores deben ser capaces de decodificar vídeo por sí mismos, sin ningún tipo de plug-in. Por ello es muy importante seleccionar un códec estándar para ese propósito. Esto a generado una gran controversia y una guerra de entre empresas del sector para intentar imponer su codec.

La web no sería lo que es hoy si cada blogger tuviera que pagar por una licencia para publicar imágenes y texto en una página. Los vídeos tampoco tendrían que requerir el pago de licencias.
Asa Dotzler:

¿Pero qué es un códec y porque es necesario para visualizar un video?, ¿es lo mismo un códec y un formato de video?, ¿Cuáles son los formatos de video más importantes?, ¿por qué no interesa a algunos de qué futuro estándar sea un códec libre?, ¿nos afectara en algo que el codec que se imponga sea libre o propietario?

En este artículo intentaremos explicar de manera resumida, todas estas preguntas.

Formatos de video contenedor

Un formato de video es usado para agrupar distintos tipos de información (generalmente vídeo y sonido) en un único archivo. Hay un montón de formatos contenedores de vídeo. Algunos de los más populares para la web son:

  • MPEG-4 (.mp4): este formato se basa en el QuickTime (.mov) de Apple. Los trailers en el sitio web de Apple siguen usando este formato, pero las películas alquiladas desde iTunes se basan en el más actual MPEG-4.
  • Flash Video (.flv): lógicamente es utilizado por Adobe Flash. Las versiones más recientes de Flash también incluyen soporte para MPEG 4.
  • Ogg (.ogv): es un estándar abierto, por lo tanto no sujeto a ninguna patente conocida.
  • WebM es un formato nuevo. Técnicamente es similar a Matroska. Está diseñado para ser utilizado exclusivamente con el códec de vídeo VP8.
  • Audio Video Interleave (.avi): El formato contenedor AVI fue inventado por Microsoft No es oficialmente compatible con la mayoría de los modernos codecs en uso hoy en día.

Codec de video para la web

Un códec de vídeo es un algoritmo mediante el cual se codifica una secuencia de vídeo. Esto es descifrar la secuencia de acuerdo con el códec y a continuación mostrar una serie de imágenes, o “cuadros”, en la pantalla.

Hay codecs de vídeo con pérdida y sin pérdida. Los códec sin pérdida, generan un tamaño de archivos tan grande, que son inútiles para la web, por lo que nos centraremos en los codecs con pérdida. Estos códec para generar archivos más pequeños, degradan la calidad del video cada vez que lo codifican, por lo que se pierde información. Hay muchos codecs de vídeo, pero el futuro del video en la red pasa por solo tres: H.264, Theora, y VP8.

Consorcios enfrentados

  • WHATWGs: es una fundación que empezó a escribir las especificaciones de HTML5. Años más tarde, la W3C lo eligió como el siguiente estándar a apoyar. A pesar de que su comunidad está abierta a todo el mundo, lo cierto es que los principales navegadores ejercen su influencia, por ello no es raro que Apple presionase para que Theora no fuera el estándar elegido inicialmente.
  • MPEG-LA: Es un consorcio de compañías entre ellas Apple y Microsoft, que desarrollaron la patente de H.264. Su función es otorgar licencias y velar por que sus patentes no se vulneren. Está permitido el uso de este codec hasta 2016, pero a partir de esa fecha se podrán cambiar los términos de uso y cobrar a todo el que quiera utilizarlo.

Los códec en conflicto

Códec H.264

  • Navegadores soportados: Safari, Google Chrome y el futuro Internet Explorer 9.
  • Compatibilidad: es algo es algo generalizado se utiliza tanto en el vídeo para la web como para fuera de la red.
  • Ventajas: está muy consolidado. Tiene una calidad aceptable con ficheros pequeños, además tiene múltiples usos.
  • Inconvenientes: es propietario.
  • Enlace a la página oficial de H.264 (en inglés)

Códec OGG Theora

  • Navegadores soportados: Firefox, Opera y Google Chrome soportan de fábrica este códec.
  • Compatibilidad: los dispositivos digitales que permiten crear contenidos en Theora son prácticamente nulos.
  • Ventajas: es libre.
  • Inconvenientes: necesita un 25% más recursos que H.264, además ofrece una calidad menor y los ficheros generados son mucho más grandes.
  • Enlace a la página oficial de OGG Theora(en inglés)

Códec WebM

  • Navegadores soportados: Google Chrome, Firefox y Opera soportarán de fábrica. Internet Explorer 9 añadirá soporte, pero solo si el usuario tiene instalado ese códec. Y como Safari utiliza Quicktime como base, podrá soportar también este códec.
  • Ventajas: es libre y de una calidad similar a H.264, además sus ficheros que pesan la mitad.
  • Inconvenientes: las cámaras actuales no soporten este formato, por lo que tendremos que convertir los vídeos que grabemos.
  • Enlace a la página oficial de WebM (en inglés)

Empresas e intereses cruzados

  • Mozilla y Opera: defienden que los estándares web se tienen que estar basados en tecnologías libres, por ello apoyan a tanto a Theora como a WebM.
  • Google: Apoya todos los códecs porque le interesa que cualquier usuario pueda visualizar youtube. Pero es un formato que no controla, por lo que su solución ha sido coger un formato de eficiencia comparable a H.264 y liberarlo. Esa es la principal razón para lanzar WebM.
  • Apple: Es la empresa que más ha invertido en H.264, de echo sus productos están optimizados para ese formato. Lo único que le obligaría a cambiar de opinión es que Youtube deje de soportar H.264.
  • Microsoft: Internet Explorer 9 soportará WebM, si el usuario lo tiene previamente instalado en su equipo, aunque H.264 estará instalado de fábrica. Esta posición contradictoria se explica porque por un lado, forma parte de la MPEG-LA y le interesa que H.264 triunfe. Pero también, no le conviene que este formato se popularice, porque le daría a los dispositivos de Apple una gran ventaja respecto a su competencia.
  • Adobe: Anunció que Flash soportará WebM en una próxima versión. A corto plazo es beneficioso para ellos pero a medio plazo significa un futuro incierto para Flash.

Como utilizar la etiqueta video

Como hemos dicho anteriormente, en HTML5 podremos marcar un contenido como vídeo y nos permitirá informar una alternativa a los usuarios que tengan un navegador que no soporte estas capacidades de esta manera:

Esta aplicación solo funciona correctamente en Safari y Firefox. Si no visualizas correctamente el video puedes descargarlo aquí.

Breve guía de codificación de documentos y caracteres en HTML

Una consideración muy a tener en cuenta respecto a los textos de nuestras páginas, es la codificación de los caracteres.Tenemos que saber que dependiendo del lenguaje en que escribamos, algunos de los caracteres que utilicemos no se podrán visualizar correctamente una vez renderizada la página. A continuacion veremos algunos ejemplos y sus soluciones: Sigue leyendo

Depuración de CSS (parte II) – Convenciones de nomenclatura semántica

Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre como nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores. Sigue leyendo