Todos sabemos que la propiedad de CSS font-face funciona en los navegadores como Firefox y Opera entre otros. Pero nunca conseguíamos adaptarlo correctamente para Internet Explorer. Explicamos brevemente como conseguir que funcione sin problemas.

Antes de nada, debemos convertir la fuente al formato embebido eot. Este formato es el que usaremos para Internet Explorer, para el resto de navegadores se deja el formato estandar ttf.

Ya obtenidos ambos formatos de la fuente que queremos aplicar en nuestra Web, pasamos a la hoja de estilos. Tenemos que introducir las siguientes líneas de CSS, donde se define el nombre de la fuente y la ruta donde se encuentra dicha fuente.

Navegadores Comunes (Firefox, Opera, Safari, Chrome)

@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.ttf') format('truetype');
}

Internet Explorer

@font-face{
font-family:'20th Century Font';
src: url('../font/20thfont.eot');
}

Una vez que se haya escrito estas líneas en la hoja de estilos de nuestra Web, ya podemos usar dicha fuente en cualquier elemento HTML, por ejemplo:

#menu ul li a{color:#000;font-family:"20th Century Font";}

Para convertir las fuentes a los diferentes formatos, podéis usar la aplicación Microsoft WEFT. Bueno espero que os sirva de ayuda. He de advertir que no todas las fuentes suavizan de forma nítida en todos los navegadores, pero es el único método y el más preciso para conseguir visualizar las fuentes.

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?

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:

<blockquote title="Abre en nueva ventana" lang="en"
cite="http://www.smashingmagazine.com">Smashin magazine</blockquote>

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.

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

A día de hoy, Google Chrome ya es el tercer navegador más usado en la web, según datos de Net Applications. Esta empresa rastrea los hábitos de uso de navegadores web de más de 160 millones de usuarios cada mes, monitoreando más de 40 mil sitios web, por lo que se pueden considerar datos más o menos fiables.

Después del lanzamiento oficial de las versiones beta para Mac y Linux, el navegador aumentó su cuota de mercado a 4,4% (un aumento de 0,4%) en la semana del 6 al 12 de diciembre, superando a Safari que tiene una cuota del 4,37%.

Según la misma fuente, Mozilla es el segundo navegador más usado, con un 24,7 por ciento, mientras que el jefe sigue siendo Internet Explorer de Microsoft, presente en más de 63 de cada 100 ordenadores.

w3schools nos ofrece una curiosa forma de mostrar la evolución de usuarios que han tenido los distintos navegadores desde 2002, donde se aprecia perfectamente como la “mancha azul” poco a poco va perdiendo terreno.

Estadísticas históricas de los navegadores

Los chicos de mobiforge nos ofrecen de forma gratuita la una dotMobi Guía de Desarrollo Web Móvil. No es una guía muy reciente, pero básicamente contiene casi todos los puntos para cualquiera Web para Móvil.

La guía se ha realizado basandose en el documento de Mobile Web Initiative de W3C Mobile Web Best Practices 1.0, pero lo lleva más lejos. Es muy importante tener la base de estas mejores prácticas y hacerlo más accesible. Con esto en mente, la guía comienza describiendo el panorama web móvil en detalle, y la importancia del contexto móvil.

Hay ejemplos de código y un montón de información útil. Describe las técnicas reales para crear un sitio apto para móviles y la forma de publicarlo. Esta guía está diseñada para los desarrolladores que ya están familiarizados con el desarrollo web en general, pero que ahora quieren probar suerte en el móvil. Por ahora, la guía no incluye las técnicas más avanzadas tales como la adaptación, pero eso se verá en la parte II.

Descargar Guía de Desarrollo Web Móvil

Ante la inclusión en el Anteproyecto de Ley de Economía sostenible de modificaciones legislativas que afectan al libre ejercicio de las libertades de expresión, información y el derecho de acceso a la cultura a través de Internet, los periodistas, bloggers, usuarios, profesionales y creadores de Internet manifestamos nuestra firme oposición al proyecto, y declaramos que:

1. Los derechos de autor no pueden situarse por encima de los derechos fundamentales de los ciudadanos, como el derecho a la privacidad, a la seguridad, a la presunción de inocencia, a la tutela judicial efectiva y a la libertad de expresión.
2. La suspensión de derechos fundamentales es y debe seguir siendo competencia exclusiva del poder judicial. Ni un cierre sin sentencia. Este anteproyecto, en contra de lo establecido en el artículo 20.5 de la Constitución, pone en manos de un órgano no judicial -un organismo dependiente del ministerio de Cultura-, la potestad de impedir a los ciudadanos españoles el acceso a cualquier página web.
3. La nueva legislación creará inseguridad jurídica en todo el sector tecnológico español, perjudicando uno de los pocos campos de desarrollo y futuro de nuestra economía, entorpeciendo la creación de empresas, introduciendo trabas a la libre competencia y ralentizando su proyección internacional.
4. La nueva legislación propuesta amenaza a los nuevos creadores y entorpece la creación cultural. Con Internet y los sucesivos avances tecnológicos se ha democratizado extraordinariamente la creación y emisión de contenidos de todo tipo, que ya no provienen prevalentemente de las industrias culturales tradicionales, sino de multitud de fuentes diferentes.
5. Los autores, como todos los trabajadores, tienen derecho a vivir de su trabajo con nuevas ideas creativas, modelos de negocio y actividades asociadas a sus creaciones. Intentar sostener con cambios legislativos a una industria obsoleta que no sabe adaptarse a este nuevo entorno no es ni justo ni realista. Si su modelo de negocio se basaba en el control de las copias de las obras y en Internet no es posible sin vulnerar derechos fundamentales, deberían buscar otro modelo.
6. Consideramos que las industrias culturales necesitan para sobrevivir alternativas modernas, eficaces, creíbles y asequibles y que se adecuen a los nuevos usos sociales, en lugar de limitaciones tan desproporcionadas como ineficaces para el fin que dicen perseguir.
7. Internet debe funcionar de forma libre y sin interferencias políticas auspiciadas por sectores que pretenden perpetuar obsoletos modelos de negocio e imposibilitar que el saber humano siga siendo libre.
8. Exigimos que el Gobierno garantice por ley la neutralidad de la Red en España, ante cualquier presión que pueda producirse, como marco para el desarrollo de una economía sostenible y realista de cara al futuro.
9. Proponemos una verdadera reforma del derecho de propiedad intelectual orientada a su fin: devolver a la sociedad el conocimiento, promover el dominio público y limitar los abusos de las entidades gestoras.
10. En democracia las leyes y sus modificaciones deben aprobarse tras el oportuno debate público y habiendo consultado previamente a todas las partes implicadas. No es de recibo que se realicen cambios legislativos que afectan a derechos fundamentales en una ley no orgánica y que versa sobre otra materia.

Para complementar la información sobre flash publicada en nuestro anterior articulo, y aprovechando que en la última actualización del Blog para Webmasters de google se habla precisamente de este tema, voy a hablar un poco más en profundidad del posicionamiento de flash en buscadores.

Desde que el año pasado google anunciara una mejora en la capacidad de indexación de páginas desarrolladas con Flash, muchos usuarios han demandado respuestas sobre la relevancia para la búsqueda orgánica que esta mejora traería para sus páginas Flash. A través de su Blog para Webmasters, google ha ido respondiendo a varios interrogantes.

En este artículo, vamos a intentar describir el estado en que se encuentra la tecnología Flash respeto al posicionamiento en buscadores. También veremos lo que se puede y no se puede hacer con flash y te daremos algunas recomendaciones que podrán serte útiles si finalmente decides posicionar tu página desarrollada en Flash.

Limitaciones en la indexación de Flash

• Los buscadores no son capaces de detectar algorítmicamente los textos en flash almacenados como gráficos. Estos textos incrustados pueden contener palabras claves importantes que serán ignoradas.
• Aunque google da soporte a las técnicas comunes de JavaScript para incrustar Flash como SWFObject, no es capaz de ejecutar algunos tipos de JavaScript poco comunes. Así que si tu página web carga un archivo Flash por esta vía, es posible que no se pueda indexar.
• Google por ahora no es capaz de rastrear lenguajes bidireccionales. Por lo tanto no es capaz de indexar contenido en hebreo o en árabe por ejemplo, (a nosotros poco nos afecta, pero no es malo saberlo).
• Ten en cuenta que ningún buscador te garantizará que se indexe correctamente el contenido de tu Flash. Aunque google pueda indexar parte del contenido de tus SWF, puede que otros motores de búsqueda no lo hagan.

Lo que google puede hacer:

• Indexa el contenido textual que aparece cuando un usuario interactúa con el archivo Flash, así como los enlaces tanto internos como externos.
• Esto es una novedad muy importante, ahora google puede cargar archivos externos y asociar su contenido con el archivo principal. Por lo tanto ahora puede vincular un archivo XML con el SWF que lo ha cargado.
• La versión de ActionScript no es relevante para indexar una web.
• Si no quieres que los buscadores puedan rastrear tu archivo SWF o cualquiera de los recursos externos, utiliza la directiva robots.txt apropiada.

Recomendaciones

• El título, la dirección URL y el pie de tu web se vuelven mucho más importantes que el resto de elementos. En una página construida en flash es más necesario conseguir enlaces de sitios con mucho peso, de otra manera será casi imposible aparecer arriba en los resultados de búsqueda.
• Proporciona equivalentes basados en texto de estos archivos Flash, de esta manera permitirás a los buscadores rastrear mejor el contenido de tu web.
• sIFR es una técnica que sustituye elementos de texto con equivalentes Flash. De este modo, el contenido y la navegación se muestran a través de un objeto Flash incrustado pero, al encontrarse el texto en el HTML puede ser leido por los motores de búsqueda.
• Utiliza Flash sólo cuando sea estrictamente necesario. Utilizar HTML para mostrar el contenido y la navegación tiene innumerables ventajas. Tu sitio será más rápido, más posicionable, más accesible y por último más compatible con navegadores antiguos no estándar. Además permite a los usuarios marcar contenido como favorito y enviar enlaces directos por correo electrónico. Ten en cuenta que el coste económico de una web Flash indexable es bastante mayor que una página HTML.
• Adobe tiene un centro SEO para Flash , (en ingles), donde podemos encontrar recursos y ejemplos, que puede ser una buena ayuda.

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:

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?

Recordemos que el primer artículo de nuestra serie dijimos que el estudio Jakob Nielsen desarrolló 10 principios de usabilidad bautizados como principios heurísticos básicos o reglas generales. A partir de estos principios señalados, se desarrollaron los heurístics o evaluadores de usabilidad, que permitieron a los evaluadoes realizar sus informes para describir los problemas de usabilidad de los site analizados. Pues bien, en este artículo repasaremos cuales son dichos principios básicos.

Los principios definidos por Nielsen los puedes encontar en www.useit.com y son los siguientes:

• ¿Qué está pasando?: el sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de un feedback apropiada dentro de un tiempo razonable.
  • Ejemplo: presentar mensajes de espera cuando se está efectuando una transacción o o bien de confirmación o cuando se ha efectuado una operación solicitada por el usuario
• Relaciona el sistema y el mundo real: el sistema debería hablar el lenguaje de los usuarios mediante frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden comprensible y lógico.
• Control y libertad del usuario: los usuarios frecuentemente hacen elecciones por error y deben contar con una "salida de emergencia" para dejar las cosas tal como estaban, sin contar con el botón "back" que cada browser incluye.
  • Ejemplo: que el usuario sienta que tiene el control de la web es fundamental, por ello las animaciones que requieren plug-ins especiales y no tienen una forma de "saltarlas", los pop-ups y las ventanas que se abren de repente, son muy nocivas para una buena experiencia.
• Consistencia y estándares: nuestro sitio debe ser consistente en cuanto a los nombres de las secciones, botones y contenidos de las mismas.
  • Ejemplo: un enlace a "ayuda" debe llevar a una página que se llame así y no "preguntas frecuentes".
• Prevención de errores: mcho mejor que los buenos mensajes de error, es un diseño cuidado que prevenga que ocurran éstos.
• Es mejor reconocer, que recordar: el usuario no debería recordar la información que se le da en una parte del proceso, para seguir adelante. Si bien es imposible tener todas las opciones a la vista en sitios demasiado extensos, al menos debería haber una categorización clara de los contenidos que indique el camino a seguir.
• Flexibilidad y eficiencia de uso: a pesar de que los aceleradores, no son muy utilizados por los usuarios más novatos, hay que tener en cuenta a los más avanzados que sí lo hacen. Nuestra página debe ser fácil de indexar en una lista de favoritos. Esto se logra evitando el uso intensivo de frames y utilizando nombres de ficheros que no caduquen.
• Diseño práctico y simple: los diálogos no deben contener información irrelevante que distraiga o entorpezca la navegación. Es preferible que esta información esté enlazada para que quien la requiera pueda verla, pero que no moleste a los que no la necesitan. Si quieres más información sobre como es un patrón de lectura de los usuarios web, échale un vistazo a este artículo.
• Ayuda, por favor: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.
• Compatibilidad: nuestra página debe ser compatible con distintas versiones de navegadores y sistemas operativos.

En el siguiente artículo por fín comenzaremos a enumerar los evaluadores de usabilidad para que podamos empezar a utilizarlos en nuestros análisis.