Antonio Barranco

Domingo, 24 de Octubre de 2004

Ventajas de diseñar una web ajustada a estándares


Estas semanas he estado preparando una serie de artículos en los que poner de manifiesto la importancia tanto del uso como del desuso de determinadas tecnologías en la construcción de sitios web.

Evidentemente dichos artículos se basarán en la filosofía del lenguaje de marcado XHTML, la filosofía del lenguaje de definición de estilos CSS y la importancia del uso de modelos semánticos en el diseño de nuestros sitios web.

Veamos con que características principales se dota un sitio web al ser respetuoso hacia los estándares vigentes:

Formato universal

Si diseñamos ajustándonos a un estándar podemos estar seguros de que los navegadores que han sido diseñados para ajustarse a dicho estándar representarán nuestros contenidos tal y como los habíamos imaginado.

Podemos resumir que su uso es el mejor medio para alcanzar una representación única y universal en todos los navegadores y dispositivos que respeten el estándar propuesto en que nos hayamos basado.

Realmente es lógico pensar que basar sus proyectos en los mismos estándares que las compañías han de respetar para construir sus navegadores y dispositivos ha de ser garantía de buen funcionamiento.

Excelente portabilidad

El hecho de trabajar con código relativamente simple, a través del uso de XHTML, y de separar nuestros contenidos del diseño mediante el uso de CSS, nos permite lograr que los cambios menores o globales tanto de diseño como de contenido sean infinitamente mas sencillos y rápidos, logrando para ello un menor consumo de recursos o una menor inversión.

Mayor tiempo de vida de la inversión

Cuando usamos métodos o comportamientos propietarios corremos el riesgo de que nuestro sitio web se vuelva obsoleto en un corto espacio de tiempo.

El mejor ejemplo fue el de las millones de líneas de código (etiquetas propietarias) que hubieron de ser cambiadas cuando “Internet Explorer” acabó con la hegemonía de “Netscape”.

Aunque puede parecer que la hegemonía de “Internet Explorer” y “Windows” está asegurada por algunos años más, en dicha plataforma suceden vaivenes tecnológicos que pueden inutilizar o minimizar nuestra audiencia.

Podemos encontrar ejemplos en, las severas restricciones de seguridad a las que se ve sometido desde la aparición de “Windows XP Service Pack 2” cualquier contenido “ActiveX” incrustado en una página web, o la guerra sin cuartel hacia comportamientos, hasta ahora comunes, que permitían lanzar ventanas emergentes sin intervención del usuario.

Podemos concluir que el uso de tecnología estándar extiende el periodo de vida de nuestra inversión, ya sea dineraria o basada en el desempeño personal.

Maximización de su audiencia potencial

Como consecuencia de los puntos anteriores queda patente que la accesibilidad de nuestro sitio web se maximiza con el respeto a los estándares.

Dicha consecuencia no es algo que debamos minusvalorar, ya que cuando el objetivo de nuestro sitio web es realizar a nuestros usuarios labores de promoción, información, ventas, asistencia, etc. el hecho de ser capaces de llegar a la totalidad de la audiencia maximiza nuestra capacidad comunicativa.

Igualmente como veremos con más profundidad, el uso de estándares posibilita resolver con suma facilidad:


  • El problema de accesibilidad que supone mantener versiones para dispositivos móviles, PDAs, impresoras, etc.

  • El problema de usabilidad que supone construir sitios accesibles por personas con minusvalía.

Reducción de tamaño global

Una de las consecuencias del uso de la filosofía XHTML + CSS es que, debido a la separación de los contenidos y del diseño se minimiza el contenido redundante entre páginas.

Ello contribuye a reducir de forma sustancial el tamaño de nuestras páginas, lo que redunda en:


  • Una mejor experiencia para nuestros usuarios, al reducir el tamaño de cada página y la cantidad de datos que han de descargar en su navegación.

  • Una experiencia adecuada para los usuarios que estén usando las versiones destinadas a dispositivos móviles de nuestro sitio web.

  • Un mejor aprovechamiento de nuestra infraestructura:

    • Reduciendo de manera significativa la carga de nuestros servidores.

    • Reduciendo el tráfico necesario para servir nuestros contenidos, lo cual en muchos casos puede redundar en ahorro si trabajamos con servidores que cobran según la cantidad de datos transferidos.

La disminución de tamaño que las páginas experimentan al ser diseñadas respetando los estándares justifica por si sola rediseñar todo un sitio web en sitios que soportan un alto tráfico.

Mejor indexación en motores de búsqueda

Cuando diseñamos respetando los estándares provocamos que los analizadores de los motores de búsqueda clasifiquen mejor nuestros contenidos.

Una de las causas de ello es el empleo de los elementos semánticos a los que nos obligan dichas normas, los cuales sirven para dotar de importancia a determinadas partes de nuestros contenidos

Igualmente la separación entre contenidos y diseño posibilita que en la lectura de cada una de nuestras páginas dichos analizadores encuentren un ratio mayor de contenidos útiles que de código destinado a la representación de los mismos.

Como expresábamos en el anterior punto, esta mejora en las posibilidades de permanecer bien situado en los buscadores puede justificar por si sola el empleo de la filosofía de diseño que proponemos.

Enlaces relacionados:

Especificación del lenguaje de marcado XHTML 1.0

Especificación del lenguaje de marcado XHTML 1.1

Especificación del lenguaje de marcado XHTML Basic (subconjunto limitado para dispositivos móviles)

Especificación el lenguaje CSS1

Especificación el lenguaje CSS2

Pautas de Accesibilidad del Contenido en la Web 1.0 (WAI)

La importancia de la accesibilidad: Análisis de accesibilidad

Diferencias entre usabilidad y accesibilidad

Publicado el 24/10/2004 a las 11:00 AM
Categorías: Diseño web, Accesibilidad, Usabilidad
Comentarios (3)Trackbacks (5)Enlace permanente

Domingo, 01 de Agosto de 2004

Metatags propietarias que pueden resultar de utilidad


Existen una serie de metatags que aun siendo propietarias nos pueden ayudar a mejorar la experiencia de nuestros usuarios, habilitando o desactivando comportamientos en el navegador de nuestros visitantes que podemos considerar molestos.

Tenga en cuenta que todos los atributos que se tratarán en el presente artículo no están estandarizados por el World Wide Web Consortium (W3C), sin embargo resultan de utilidad para modificar el comportamiento en navegadores específicos.

Imagetoolbar

El propósito de dicho atributo es ocultar la barra de herramientas que “Internet Explorer” muestra cuando se coloca el cursor encima de una imagen.

En ocasiones es tremendamente molesto que dicha barra aparezca encima de elementos que son parte del diseño de la página web y que el usuario no estará interesado nunca en descargar.

Dicho comportamiento hace que los elementos de nuestro diseño destaquen no solo visualmente sino estructuralmente, siendo especialmente dañino cuando dichas barras aparecen en composiciones realizadas mediante imágenes troceadas, mostrando su verdadera naturaleza.

El presente atributo ha de ser necesariamente especificado usando la sintaxis “http-equiv”, para más información sobre dicho aspecto puede consultar el artículo ”Introducción a las metatags: definición, sintaxis y uso correcto”.

Dicho atributo puede tomar los valores “yes” o “no”.

Ejemplo: <meta http-equiv="imagetoolbar" content="no" />

En caso de considerar que la aparición de dicha barra puede resultar de utilidad en ciertas de las imágenes que componen su sitio web, como por ejemplo en una galería de imágenes, existe una forma de habilitar o deshabilitar dicho comportamiento mediante el atributo “galleryimg” dentro de la propia etiqueta <img>.

Dicho atributo puede tomar los valores “yes” o “no”.

Ejemplo: <img src="/imagenes/galeria/mi-estudio-de-diseño.jpg" width="640" height="480" galleryimg="yes" />

Page-enter y page-exit

Ambos atributos generan una transición de entrada o de salida a la página a seleccionar entre varias disponibles durante un periodo de tiempo que también especificamos.

Dichos atributos han de ser necesariamente especificados usando la sintaxis “http-equiv” tal y como veíamos anteriormente.

El atributo “content” ha de ser especificado de la siguiente manera: “RevealTrans (Duration=n, Transition=m)”, siendo “n” la duración en segundos del efecto que deseamos mostrar y “m” el identificador del efecto propiamente dicho.

Puede encontrar una lista detallada de los posibles efectos junto con sus identificadores en la Referencia sobre filtros y transiciones de “Internet Explorer”.

Ejemplo 1: <meta http-equiv="Page-Enter" content="RevealTrans (Duration=4, Transition=23)” />

Ejemplo 2: <meta http-equiv="Page-Exit" content="RevealTrans (Duration=4, Transition=23)” />

Dichos ejemplos realizan una transición aleatoria a la entrada y salida de la página respectivamente.

Los presentes atributos no demasiado recomendables debido a que consumen tiempo al usuario y no aportan utilidad aparte de la meramente estética, siendo esta cuanto menos discutible.

Window-target

Este atributo propietario puede ser especialmente útil cuando deseamos evitar que “pirateen” nuestro contenido insertando nuestras páginas en “frames” o ventanas de terceros.

En la práctica especifica en nombre de un “frame” o ventana en la cual nuestra página ha de cargarse.

Los posibles valores de dicho atributo son los usuales:

_blank: Carga nuestra página en una nueva ventana sin nombre.

_self: Nuestra página se cargará en el “frame” o ventana que le corresponda de forma natural.

_parent: Cargará nuestra página en el Definicion del elemento: “frameset” o ventana padre del destino correspondiente.

_top: Carga nuestra página usando todo el espacio de la ventana del navegador destruyendo toda estructura de
“frame”.

“Cualquiernombre”: Carga nuestra página en el “frame” o ventana nombrados como tal.

Dicho atributo ha de ser necesariamente especificado usando la sintaxis “http-equiv” tal y como veíamos anteriormente.

Ejemplo: <meta http-equiv=” Window-target “ content="_top “ />

De considerar útiles dichos comportamientos plantee como alternativa el uso de la etiqueta estándar ”<base>”.

MSSmartTagsPreventParsing

Dicho atributo fue publicado por Microsoft para prevenir que una página mostrase las ”SmartTags”, que Microsoft emplea en diversos productos pero que nunca llegaron a usarse en su navegador “Internet Explorer” pese a haberse anunciado su uso.

En la actualidad no tiene objeto, puesto que ninguna versión de “Internet Explorer” ha introducido el concepto de ”SmartTags”, pese a ello, de introducirse dicho concepto el presente atributo es el definido por la propia Microsoft para deshabilitar dicho comportamiento.

Ejemplo: <meta name="MSSmartTagsPreventParsing" content="true" />

Conclusión

Con esto finalizamos el presente artículo sobre atributos que pueden ser usados como metadato y que realizan una función no estandarizada y exclusiva del navegador que lo soporta pero que puede resultar de utilidad para deshabilitar comportamientos molestos o para habilitar comportamientos que creamos puedan dar valor a nuestra web.

Como autor le recomendaría el uso de los atributos siempre que puedan ser empleados para deshabilitar alguna característica molesta de un navegador en concreto, como es el caso de la barra de herramientas de imágenes en “Internet Explorer”, de las ”SmartTags” en el supuesto de que Microsoft decidiera incluirlas en “Internet Explorer”, etc.

El uso de atributos no estándares para añadir funcionalidades (como es el caso de los atributos que aportan transiciones entre páginas) jamás puedo aconsejárselo, ya que si usted considera que dicho comportamiento aporta utilidad debería implementarlo con tecnología estándar.

Enlaces relacionados:

Introducción a las metatags: definición, sintaxis y uso correcto

Publicado el 01/08/2004 a las 01:00 PM
Categorías: Diseño web
Comentarios (3)Trackbacks (0)Enlace permanente

Martes, 20 de Julio de 2004

Introducción a las metatags: definición, sintaxis y uso correcto


Hablar de las etiquetas “meta”, o “metatags” como se las conoce popularmente, puede parecer anticuado en una época en la que los grandes motores de búsqueda no les dan la importancia de antaño.

Sin embargo no debemos dejarnos llevar por la dejadez y pensar que dichos elementos son superfluos y nada aportan a nuestro proyecto.

Las etiquetas “meta” han de situarse en el interior de las etiquetas <head></head>, es muy usual colocarlas justo después de la etiqueta <title></title>, aunque en ningún caso es obligatorio dicho orden.

Hay un par de variaciones importantes en cuanto a sintaxis e intención en las etiquetas “meta” que ha de tenerse en consideración, puesto que cada una de ellas tiene una filosofía y un propósito diferente.

Veamos la primera de ellas:

<meta http-equiv="nombre" content="contenido" />

Esta sintaxis merece cierta atención, ya que es tradicional cierto desconocimiento acerca de su origen y su propósito.

Con ella lo que conseguimos el efecto de añadir información a la cabecera con la que es enviada nuestra página hacia el navegador del usuario.

Consideremos una cabecera de respuesta típica:

HTTP/1.1 200 OK
Date: Tue, 20 Jul 2004 19:27:09 GMT
Server: Apache/1.3.26 (Unix) Debian GNU/Linux mod_gzip/1.3.19.1a PHP/4.3.8 v2h/1.5.1
X-Powered-By: PHP/4.3.8
Expires: Mon, 26 Jul 1997 05:00:00 GMT
Last-Modified: Tue, 20 Jul 2004 19:27:09 GMT
Cache-Control: no-store, no-cache, must-revalidate
Cache-Control: post-check=0, pre-check=0
Pragma: no-cache
Transfer-Encoding: chunked
Content-Type: text/html

Imaginemos que necesitamos añadir cualquier atributo usual dentro de estas cabeceras, no tenemos acceso a la configuración de nuestro servidor o no dispongamos de ningún lenguaje dinámico como ASP o PHP que nos permita hacerlo de forma más o menos elegante.

En este caso la adición de una etiqueta meta con el parámetro “http-equiv” es equivalente, nuestro navegador debería interpretarlo como tal.

Por ejemplo, si deseásemos añadir el atributo:

Refresh: 5

No tendríamos más que colocar la siguiente construcción entre nuestras etiquetas “meta”:

<meta http-equiv="Refresh" content="5" />

Podemos encontrar todos los atributos posibles dentro de las especificaciones de los protocolos http 1.0 y http 1.1.

La segunda sintaxis, mucho más usual, es la siguiente:

<meta name="nombre" content="contenido" />

Con ella buscamos introducir cierta información en forma de metadatos que habrán de ayudar a identificar rasgos y atributos de nuestra página web.

Dichos atributos podrán ser aprovechados por navegadores, motores de búsqueda o incluso humanos para ayudar a clasificar su página, al igual que hacen los bibliotecarios cuando clasifican un libro en base a ciertos atributos.

Su uso fue recomendado por el World Wide Web Consortium (W3C), precisando que se deben proporcionar metadatos para añadir información semántica a los sitios web.

Podemos considerar que las etiquetas mas comunes que debería incluir toda página son las siguientes:

Description

El propósito de la presente etiqueta es proporcionar una breve descripción del contenido de nuestro sitio web.

Tradicionalmente ha venido siendo usada por motores de búsqueda para añadir dicha información a sus resultados. En la actualidad debido al perfeccionamiento de dichos motores dicho atributo apenas se tiene en cuenta o no se hace en absoluto.

La razón de esta práctica es que dichos buscadores para brindar una mayor utilidad al usuario muestran el texto colindante a los términos de búsqueda empleados en sus resultados, a fin de ofrecer una referencia contextual. También debemos destacar que los tiempos en que los buscadores tenían en cuenta sólo el texto de dicha etiqueta están afortunadamente lejos.

No obstante quedan muchos buscadores que en determinados casos aun hacen uso de dicha información, y es importante incluir una descripción lo más completa posible del contenido de nuestra página, que debemos conseguir con el menor número de palabras posibles, ya que muchos robots sólo consideran aproximadamente las 15 primeras palabras de su contenido.

Ejemplo: <meta name="description" content="Bitácora personal sobre usabilidad, diseño, marketing, publicidad, canales y modelos de negocio, nuevas tecnologías y promoción en Internet.” />

Keywords

Define una serie de palabras clave que tienen el propósito de referenciar nuestra web de cara a búsquedas, es de recibo pensar dicho atributo se creó pensando especialmente en los motores de búsqueda.

Podemos hablar mucho de este atributo, pero heredando de la anterior debemos comprender que su uso es bastante limitado en la actualidad.

Esto es debido a las razones anteriormente expuestas y a que tradicionalmente se ha utilizado dicha etiqueta para cometer fraude, incluyendo palabras que para nada tenían que ver con el contenido que se mostraba. Como reacción los buscadores en claro afán de producir mejores resultados que los de su competencia han ido eliminando gradualmente el crédito proporcionado a dicha información.

No obstante puede resultar interesante hacer uso de ella ya que pequeños buscadores aun hacen uso de la información que proporciona, en estos casos es recomendable tomarse la elección de dichas palabras clave palabras clave de forma muy delicada, ya que deben expresar el contenido intrínseco de nuestra página de una forma exacta. Han de colocarse en orden de importancia y no conviene extenderse en su uso, ya que tradicionalmente un motor de búsqueda que haga uso de ellas no tomará más de 15.

Ejemplo: <meta name="keywords" content="usabilidad, diseño, marketing, publicidad, promoción, nuevas tecnologías, modelos de negocio” />

Author

En ella especificamos quien es el autor del documento que presentamos.

Ejemplo: <meta name= “author” content=“Antonio Barranco” />

Language

Con ella informamos acerca del idioma en que se encuentra nuestro documento. Existe una lista de códigos para los idiomas más comunes. Por ejemplo, el código de idioma para el Español es “es”, si queremos concretar más y especificar que se trata de Español de España escribiremos “es-es”.

Todos estos códigos se encuentran estandarizados dentro de la norma ISO 639-2, que puede servirles como material de consulta en caso de tener dudas acerca del código correspondiente a su idioma.

Ejemplo: <meta name="language" content="es" />

Robots

Su valor proporciona instrucciones a los motores de búsqueda información sobre cómo rastrear o indexar el documento y otros documentos enlazados con él. En un próximo artículo se hará un análisis exclusivo sobre el uso de dicho atributo.

Ejemplo: <meta name="robots" content="index, follow” />

Copyright

EL valor de “copyright”, debe incluir el propietario de los derechos del sitio así como una declaración de uso lícito.

Ejemplo: <meta name="copyright" content="Copyright Antonio Barranco 2.004 - Todos los derechos reservados” />

Existen atributos que informan a los motores de búsqueda del periodo en que se actualiza la página y otra información similar. La tendencia actual de dichos sistemas es hacer caso omiso a dicha información, por lo que no entran dentro del ámbito del presente artículo.

Igualmente es interesante conocer ciertos atributos para las metatags que permiten modificar aspectos del comportamiento del navegador, que pese a no estar estandarizados y ser propietarios pueden ayudarnos a eliminar comportamientos no deseados.

Enlaces relacionados:

Especificación de los metadatos dentro de HTML 4.01

Publicado el 20/07/2004 a las 01:30 PM
Categorías: Diseño web
Comentarios (1)Trackbacks (2)Enlace permanente

Lunes, 21 de Junio de 2004

Color in Motion: por María Claudia Cortés


Si hay un lugar ameno y didáctico donde poder aprender los aspectos comunicativos y emocionales de los diferentes colores este es el sitio de María Claudia Cortés.


image

En los portfolios de cada uno de los colores que ha seleccionado la autora podreis obtener una útil referencia a las características mas definitorias de vuestra selección, tales como: los rasgos emocionales positivos y negativos que transmite, los específicos para determinadas culturas, su color complementario, etc.

Espero que disfrutéis tanto como yo lo he hecho con las impecables e ingeniosas presentaciones que nos regala.

Enlaces relacionados:

Color in Motion

Publicado el 21/06/2004 a las 11:30 AM
Categorías: Diseño, El color
Comentarios (3)Trackbacks (0)Enlace permanente

Jueves, 17 de Junio de 2004

Audio y Vídeo en la web


Si existe un área en la publicación de contenidos en la que las discusiones sobre accesibilidad son feroces esta es la inclusión contenidos multimedia.

En este artículo nos centraremos únicamente la cuota de mercado que obtienen las diferentes tecnologías que permiten ofrecer audio y vídeo a través de la web.

Es bien sabido que existen tres compañías en una lucha encarnizada por dominar el mercado de los formatos de medios tanto en el área de escritorio como en la web.

Microsoft con su Windows Media, RealNetworks con su RealOne y Apple con su QuickTime se reparten el mercado en proporciones que todo profesional debería conocer:


Cuota de mercado de los reproductores multimedia

Atendiendo a dichos datos, nunca concretos ni fiables al 100%, podemos hacernos una idea sobre que formato es el adecuado para la publicación de nuestros contenidos, pudiendo hacer hincapié en seleccionar uno o varios que satisfagan nuestra audiencia potencial.

Estas conclusiones han de ser elaboradas individualmente para cada proyecto, forzosamente cada uno de ellos contemplará necesidades diferentes. Por ejemplo, un sitio web sobre diseño o artes gráficas tiene una mayor audiencia potencial de usuarios con Mac, a los que hay que satisfacer, que un sitio web de información general.

Existen formatos genéricos que son soportados por todos los reproductores referenciados anteriormente, que pueden considerarse potencialmente accesibles para todas las plataformas, como pueden ser el mp3, mp3pro, mpeg4, Ogg, etc.

En un próximo artículo se expondrá la manera de insertar contenidos en estos formatos que serán funcionales en el reproductor predeterminado de la plataforma del usuario.

También trataremos la posibilidad e idoneidad de utilizar el formato Flash, presente en el 98% de los ordenadores que se conectan a Internet y estándar de facto, para la distribución de contenidos multimedia de audio y vídeo.

Enlaces relacionados:

Microsoft Windows Media

RealOne

Apple QuickTime

Macromedia Flash

Publicado el 17/06/2004 a las 04:00 AM
Categorías: Diseño web, Accesibilidad
Comentarios (1)Trackbacks (1)Enlace permanente

Viernes, 04 de Junio de 2004

Visitas al banco


Hoy he ido al banco.

He comprobado como el director de la sucursal, lejos de ser aquella persona poseedora de un aura de respeto semejante a la de un catedrático, es un mero vendedor de cazuelas, vajillas y cristalerías que traen como extra cualquier decadente producto financiero.

Me pongo en su piel cuando el año pasado, aun sabiendo que eran engendros inservibles, se veía obligado a colocar la cuota prefijada de terminales “AOL Avant”. Recuerdo haber oído frases como “Santiago, píllame un trasto de estos que tengo que sacarlos todos y negociamos las comisiones de tus cheques”.

También es fácil ver como entran personas que son recibidas con leve reverencia y un sonoro “BUENOS DÍAS DON TOMÁS, SIENTESE...”. Dichas personas son alejadas apresuradamente de la cola de caja y conducidas a una mesa de atención personal, independientemente de que sólo acudan al banco a retirar o ingresar fondos como cualquier hijo de vecino.

Mi madre, como todas, quería que fuese abogado, medico o empleado de banca. Creo que nunca habría podido ser ninguna de las tres cosas, especialmente la última.

Reconozco que no me atrae la idea de valorar a la gente exclusivamente por su dinero, y que tampoco soy especialmente bueno vendiendo menaje del hogar.

Publicado el 04/06/2004 a las 04:00 AM
Categorías: Opiniones personales, Sociedad
Comentarios (4)Trackbacks (0)Enlace permanente