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.

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

Demo con las nuevas características de HTML5

Completa demo con algunas de las nuevas posibilidades que ofrece HTML5: Canvas, nuevos formularios, las nuevas opciones de accesibilidad, los nuevos selectores de CSS y javascript. Todo en una demo en forma de presentación. Se visualiza correctamente con las ultimas versiones de Chrome, Firefox, Safari e Internet Explorer con Google Chrome Frame, aunque también funciona con Opera, algunas partes de la demo no funcionan correctamente.

Técnicas para aumentar la velocidad de una web

Según los estudios realizados por Yahoo! el 20% del tiempo de carga de un sitio web corresponde al servidor y el 80% restante es responsabilidad del cliente. Teniendo en cuenta este dato, es necesario reflexionar y cambiar nuestro modo de trabajo para intentar reducir lo máximo posible el peso de los archivos que generamos y de esta manera aumentar la velocidad de nuestra web.

En este artículo repasaremos tecnología por tecnología, algunas de los mejores trucos y metodologías para reducir al máximo posible el peso de nuestros archivos.

¿Porque es recomendable reducir el peso de nuestra web?

  • Todavía hay muchos hogares donde la conexiones a internet siguen siendo lentas y poco fiables.
  • La rapidez de un sitio web mejora la experiencia del usuario.
  • Reduce los costes operativos de tu sitio.
  • El número de páginas vista por sesión de usuario aumentará, al poder visualizar más páginas en el mismo tiempo.
  • Recientemente google ha reconocido que ha incluido en su algoritmo de búsqueda el factor de velocidad de una sitio . Eso quiere decir que la velocidad de una web, será otro factor a tener el cuenta para mejorar el posicionamiento de una web.

    “hemos decidido tomar en cuenta la velocidad del sitio en la clasificación de los resultados de búsqueda. Usamos diferentes fuentes para determinar la velocidad de un sitio con respecto al resto de sitios.
    Matt Cutts”

  • En muchos casos, reducir el peso de un sitio no requiere cambios de importancia ni excesivamente caros.
  • Puede suponer un gran adelanto respecto a la competencia.

HTML

  • Maqueta tu web de acuerdo con el web standard.
  • Olvídate de diseñar con tablas. Diseñar con divs nos ahorrará muchas líneas de código.
  • Separa el diseño, el contenido y la funcionalidad en varias capas. Esto quiere decir que ni las hojas de estilo ni el javaScript deberían ir embebidos en tus html.
  • Elimina el código superfluo o redundante tanto en tus HTML como en CSS y JavaScript.
  • Vigila la indentación, elimina tabulaciones, retornos de carro y espacios innecesarios.
  • La web no es un libro, inserta tus contenidos resumidos y utilizando técnicas de redacción para la Web.
  • Cuida la paginación de tu sitio para que no haya excesivo contenido en cada página. Si hay mucho contenido divídelo en varias secciones.
  • Evita los errores 404, ya que el tiempo de espera es mucho mayor.
  • Usa es HTML Code Cleaner para aminorar el peso de tu html.

CSS

  • Utiliza propiedades shorthand.
  • Escribe las propiedades css en línea y no en bloque.
  • Enlaza las hojas de estilo externamente en vez de incluir los estilos en la propia página.
  • Intenta utilizar sprites CSS para reducir el número de imágenes a una única imagen.
  • Combina si es posible todos los archivos CSS individuales en un único archivo CSS. , esto reducirá el número de peticiones HTTP.
  • Aunque muchas veces veces resulte imposible no utilizarlos, intenta utilizar lo menos posible expresiones (expression()) en las hojas de estilos. El navegador Internet Explorer revalúa continuamente el valor de las expresiones y puede penalizar el rendimiento de la página.
  • No utilizar los filtros de Internet Explorer, ya que algunos filtros como AlphaImageLoader bloquean la carga de la página hasta que no se descarga la imagen utilizada por el filtro.
  • Clean CSS es de los mejores compresores para CSS.

SWF

  • Recurre al Flash solo cuando sea absolutamente necesario.
  • Si te es posible carga de secciones de manera externa. Es mejor tener varios SWF ligeros que uno solo con un peso enorme.
  • Antes de cargar cualquier objeto de manera externa, realiza una precarga.
  • No los insertes sonidos en la línea de tiempo, cargalos de manera externa o llámalos desde la biblioteca.
  • Los videos cargalos en tiempo de ejecución. Nunca los incorpores en la línea de tiempo.
  • Elimina elementos innecesarios de la biblioteca.
  • Intenta minimizar el peso de las imágenes en tus diseños. Si su calidad te lo permite, comprímelas desde la biblioteca. Una compresión de menos de 50 hará que pierdan demasiada calidad y una superior a 80, hará que pesen demasiado.

JavaScript

  • Combinar tus scripts en un único archivo para mejorar los tiempos de respuesta de la página, así solo necesitarás una sola conexión HTTP para descargar los scripts.
  • Elimina espacios, saltos de linea y tabulaciones y otros elementos innecesarios.
  • Comprime los archivos con gzip.
  • Reduce el Número de Elementos DOM, de este modo navegador dedicará menos tiempo en la comparación con los CSS y por ende, con la apertura de la página.
  • Utiliza el Closure Compiler o el ShrinkSafe para aligerar el código Javascript.

Imágenes

  • No incluyas imágenes de gran tamaño en tu web. Si es muy grande, cambia su tamaño en un editor de imágenes y guardala a un tamaño menor.
  • Si aún así tienes que incluir una imagen de gran tamaño, puedes enlazar esa imagen a través de una versión en miniatura (thumbnail) de la misma, que servirá a modo de vista previa.
  • Utiliza el formato JPEG para bitmaps con mucho color, como degradados o fotografías . Si es posible nunca sobrepases el 80% de compresión cuando la exportes.
  • Los formatos PNG 8 son ideales para iconos y logotipos con pocos colores. Si quieres hacer transparencias simples, puedes utilizar también este formato.
  • No utilices el formato GIF, además de ser propietario da peores resultados que el PNG
  • Utiliza rutas relativas en vez de rutas absolutas, así el servidor no tendrá que volver a establecer una conexión para cada imagen en la página.

Herramientas

  • Page Speed: complemento de Firefox/Firebug que evalúa el rendimiento de sitios web y da sugerencias para mejorarlos.
  • YSlow: una herramienta gratuita de Yahoo! que sugiere formas de mejorar la velocidad de sitio web.
  • WebPagetest: muestra una vista en cascada del rendimiento de carga de tus páginas, además de una lista de optimización.

Citando textos: <Blockquote> vs. <Q> vs. <Cite>

Cuando marcamos el contenido de nuestras páginas, muchas veces tenemos que hacer referencia a textos que pueden ser tanto ajenos como propios. En ambos casos, haremos uso de las citas.

La mayoría de las veces, se tiende a encerrar el texto de la cita en un párrafo y separarlo con comillas del resto del texto. Esto tiene la desventaja de que los buscadores no interpretarán correctamente nuestro contenido. Sin embargo, HTML nos ofrece varias etiquetas con las que podemos enriquecer semánticamente a nuestro código. ¿Que etiquetas son y cuándo haremos uso de cada una de ellas?

comillas

Etiqueta <blockquote>

Sirve para englobar una cita de gran tamaño. El contenido de un blockquote puede incluir elementos de bloque tales como encabezados, listas, párrafos…etc. Puede resaltar la parte más interesante de nuestros textos y de esta manera fijar la atención de los usuarios donde más nos interese que lean.

También puede citar contenido externo. En este caso existe un atributo opcional cite que especifica la procedencia de la cita.

Ejemplo:

El contenido de un blockquote elemento debe incluir elementos de bloque como encabezados, listas, párrafos o div's. Este elemento también puede tener un atributo opcional citar que especifica la ubicación (en la forma de una URI), donde la cotización ha venido.

Problemas con los blockquote

Si vas a utilizar blockquote para resaltar contenido de tu texto, va a ver un pequeño problema de accesibilidad. Para nosotros se trata de un texto visualmente destacado, pero para un lector de pantalla simplemente, es un texto duplicado. Por ello es conveniente proporcionar una información extra para los usuarios que se tropiecen con este problema.

Una solución puede ser ofrecer un mensaje oculto por CSS que diga algo así como “Inicio de texto destacado” antes de la cita y “Fin del texto destacado” al finalizar la misma.

parte de un artículo destacado

Etiqueta <Q>

Se trata de un elemento de línea que sirve para citaciones pequeñas. Los navegadores interpretan esta etiqueta como un entrecomillado.

Ejemplo:


Pablo dijoHola Pero Laura dijo Adiós

Aunque la etiqueta <q> cada vez se utiliza menos, tiene algunas propiedades muy útiles. Por ejemplo, puedes especificar el aspecto de las comillas a través de CSS de la siguiente manera:

/*CSS*/
Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Debido a algunos problemas con la codificación (sobre todo en Internet Explorer), puede ser útil dar a las comillas valores numéricos. De acuerdo a el web standard puedes incluso especificar el aspecto de las comillas, dependiendo del idioma del navegador del usuario. Este es el ejemplo del W3C:

/*CSS*/
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '\2039' '\203A' }

Etiqueta <cite>

Sirve para marcar al autor de una cita.

Ejemplo:


Y dijo Bob pienso luego existo.

Atributos de las etiquetas

A parte de los atributos ya conocidos como id, class o title recalcaría los dos siguientes que son opcionales y se aplican tanto a <q> como a <blockquote>:

  • cite: Contiene la URL origen de la que se ha extraído la cita (En el caso que se trate de un documento online).
  • lang: Contiene el código del idioma en el que se encuentra la cita. Por ejemplo: ‘en’, ‘es’, ‘de’,…

En resumen

Por lo tanto, utilizaremos la etiqueta <blockquote> para citas grandes o destacado de texto propio, para citas pequeñas utilizaremos la etiqueta <q> y para referenciar a otras fuentes la etiqueta <cite> es lo más adecuado.

Fuente Smashing magazine

HTML y Flash, una visión actualizada

Mucho se ha discutido sobre la conveniencia de la utilización de elementos de una tecnología propietaria como es flash dentro de HTML. Hace tiempo que existen agrios debates entre los defensores y detractares de Flash, avivados desde el ya célebre artículo de Jakob Nielsen Flash: 99% Bad, del año 2000. Pero desde el año 2002 y la versión MX, esta tecnología ha introducido mejoras en varios aspectos conflictivos que en su momento se le criticaron. Por eso me hago la pregunta, ¿con la tecnología actual, es conveniente utilizar el formato flash en nuestras webs?, ¿Todos cambios introducidos han sido suficientes?, ¿Cómo se utiliza actualmente flash?

En este artículo veremos los avances de esta tecnología en varios puntos escabrosos y un pequeño estudio sobre su uso en las webs españolas más importantes:

Representación de la lucha entre HTML y flash

Puntos problemáticos y avances de flash para el desarrollo web:

  • Accesibilidad: Con la introducción de la paleta de accesibilidad en la versión MX 2004, se mejoró notablemente la accesibilidad en los archivos flash. Ahora es posible que algunos lectores de pantallas puedan detectar ciertos elementos de una película swf, pero aún así la tecnología flash todavía no es completamente accesible para personas con discapacidad.
  • Posicionamiento: También se han hecho avances en este sentido. Ahora los buscadores son capaces de procesar los archivos swf y leer las cadenas de texto que contienen. El problema radica en que si todo el sitio está desarrollado en un único flash, el peso de nuestras keywords se diluye, ya que los robots no reconocen que el flash se divide en diferentes secciones. Existen varias soluciones parciales a este problema, pero ninguna es mejor en cuanto a posicionamiento como disponer de un web realizada únicamente en HTML.
  • Actualización: Una de las mayores criticas de Jakob Nielsen a las páginas desarrolladas en Flash, era que resultaba difícil mantenerlas actualizadas. Es necesario editar directamente el archivo fuente para realizar los cambios. Volcar contenido en XML, o la integración de Flash con fuentes de datos dinámicos usando Flash Remoting y Web Services también ha solucionado parcialmente este problema.
  • Carga de contenidos: A pesar de varias optimizaciones que podremos someter a nuestras bibliotecas y archivos flash, estos se cargarán más lentamente que los contenidos creados en HTML. Además, hay que tener en cuenta que la velocidad de fotogramas asignada a una película, casi nunca se cumple. Esto dependerá de factores como la cantidad de código a ejecutar, la complejidad de éste, la potencia del ordenador, los recursos del sistema operativo, etc.
  • Estadísticas. Utilizando Flash Remoting podremos realizar estadísticas de visitas. El problema viene si desarrollamos toda la web en un único archivo. De esta manera sólo podremos saber cuántas personas visitaron la portada de la web, no sus secciones.

¿Actualmente como se utiliza Flash mayoritariamente?

Por otro lado, leo en wezstudio un informe del año pasado sobre la utilización de flash en las 20 páginas españolas más importantes. Estos son los resultados más relevantes que arroja dicho estudio:

  • Aproximadamente el 50% de los sitios analizados contienen algún elemento Flash
  • Ninguna web esta totalmente desarrollada en Flash mientras que un 45% son completamente HTML.
  • En las página analizadas solo se utiliza Flash como herramienta de publicidad o bien para mostrar vídeos.
  • Solo el 10% de la superficie total de la home utiliza elementos Flash
  • Sin embargo flash ocupa entorno al 60-80% del total de la publicidad

Conclusiones del informe

Analizando estos datos podemos decir que actualmente Flash es una tecnología ampliamente extendida y utilizada como complemento del HTML. Parece ser que su utilización para el desarrollo íntegro de una web está decayendo.

Según este estudio, flash es utilizado principalmente para mostrar vídeos y publicidad. Si bien su utilización es muy común para el montaje de galerías y pases de diapositivas, podemos adivinar que el desarrollo y la utilización de frameworks para JavasScript, está haciendo que también decaiga su utilización para estas tareas.

Entonces, si como indica este estudio flash se utiliza mayoritariamente para mostrar video, ¿Qué pasará con la tecnología Flash cuando tarde o temprano se normalice el uso de HTML 5 y su etiqueta video?

70 Tutoriales CSS3 y HTML5 (CSS3 & HTML5 Tutorials)

CSS 3 y HTML 5 son capaces de revolucionar la forma en la que se diseñan los sitios Web. Ambos incluyen nuevas características y tantas funciones que es imposible no empezar a ver como funcionan. La inclusión de soporte nativo para cosas como las esquinas redondeadas y diseño de columnas múltiples son sólo la punta del iceberg.

A continuación se presentan los recursos de 70 tutoriales y artículos para empezar con CSS3 y HTML5. Un listado que nos trae CSS Gallery Muchas de las técnicas analizadas son soportados en cierta medida en algunos algunos navegadores modernos (Safari y Firefox con el apoyo más amplio), para que puedas empezar de inmediato.

Ver 70 Tutoriales CSS3 y HTML5

Listado resumido del contenido del artículo de CSS 3 y HTML 5

  • Tutoriales CSS3 y Recursos
  • CSS3 y HTML 5 Combinación de Recursos
  • HTML 5 Recursos
  • Recursos adicionales