Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for febrero, 2007

Flash en área de navegación: más perjuicios que beneficios

Fecha de publicación: 2007/02/24

Actualización (2007-04-21): corregidos errores gramaticales.

En algunas ocasiones hay diseñadores web que deciden que el área de navegación de las páginas de un sitio web estén compuestas de animaciones Flash.

Esa decisión tiene algunas ventajas, como hacer que esa parte de la página resulte más atractiva, mediante sencillas animaciones y sonidos al pasar por cada opción, teniendo cuidado de que no resulten una molestia.

Pero quizá las desventajas superen a las ventajas.

La accesibilidad del sitio se verá muy perjudicada y los usuarios tendrán que tener instalado el plugin flash para poder utilizar el sitio web.

Los buscadores no consiguen seguir los enlaces de los elementos en formato Flash: el posicionamiento de las páginas secundarias del sitio puede verse muy perjudicado.

En septiembre de 2005 Eolas consiguió la validez de una patente referida a tecnología que permite a los usuarios acceder a programas interactivos incluidos en páginas web, a través de plug-ins o applets ejecutados desde su navegador.

La consecuencia de esa patente es que en determinados navegadores cuando se abre una página en la que hay un elemento en formato Flash hay que hacer un click para activarlo y poder usarlo. En un área de navegación basada en tecnología Flash la consecuencia es que hay que hacer dos click para activar un enlace: el usuario hará click en el enlace y quedará desorientado al ver que no funciona, ya que el comportamiento habitual de los enlaces es que funcionan con un solo click.

En Firefox y en Konqueror no se da esa situación, pero si en Opera 9 y en Internet Explorer 6 (solo en Windows XP SP2) y 7.

De todas formas existen soluciones para que la activación de los elementos flash sea automática. Aun existiendo una solución para el asunto de la activación automática sigue sin ser recomendable el uso de Flash para crear las áreas de navegación.

Enlaces relacionados

Datos del artículo:

Casos de migración a Linux

Fecha de publicación: 2007/02/21

Un par de casos en los que los usuarios han quedado contentos al utilizar Linux:

  • Reacción en cadena. Se trata de una usuaria que sufre una cadena de pequeños infortunios. Un eslabón de esa cadena es que se le rompe Windows, aunque tuvo la suerte de tener instalado Linux, y pudo comprobar que no era tan difícil ni tan complicado como parece (aunque no tuvo ni que instalar ni que configurar).
  • (X)Ubuntued. En este caso el usuario nos cuenta los problemas con los que se ha topado, sobre todo por el modem y las limitaciones de su máquina.

Datos del artículo:

No todas las ventajas de Linux son para todos los usuarios

Fecha de publicación: 2007/02/21

En la mayor parte de los sitios de Internet en los que se habla de las ventajas de Linux siempre se pone como una de las mayores ventajas la posibilidad de acceder al código fuente y modificarlo, ¿pero al usuario medio le interesa realmente?

Aleatoriamente he escogido un sitio en el que se anima (con muy buenas explicaciones) a los usuarios de Windows a pasarse a Linux, y en una de las páginas se enumeran las ventajas, incluyendo, por supuesto, el tema del acceso al código fuente:

Es gratis y libre. Al contrario de Windows, es libre de hacer muchas cosas en Linux: instalar en todas las computadoras que quiera sin pagar a nadie, dar copias a sus amigos, puede estudiarlo, modificarlo a su antojo, o crear y vender su propia distribución
Sin lugar a dudas Linux es muy bueno.

Una ventaja muy interesante. Pero al usuario no programador, ¿de que le sirve estudiarlo, modificarlo a su antojo, o crear y vender su propia distribución? Al usuario medio lo que le interesa es darle al botón de su máquina y que todo funcione adecuadamente, le da igual tener acceso al código fuente o no tenerlo.

Cuando se trata de atraer a Linux a usuarios de forma masiva es un error poner como ventaja el tema de la disponibilidad y posibilidad de modificar el código fuente. Para el usuario medio es una ventaja, pero muy secundaria, ya que no suele tener ni conocimientos, ni tiempo, ni interés para programar.

Datos del artículo:

  • Etiquetas: ,
  • Publicado en categorías: Sin categoría
  • Comentarios desactivados en No todas las ventajas de Linux son para todos los usuarios

LSHW: Obtención de especificaciones de hardware en Linux

Fecha de publicación: 2007/02/19

Para obtener el listado de especificaciones de hardware hay que usar el comando “lshw” (“ls” de Lister y “hw” de hardware) como superusuario o mediante “sudo”:

sudo lshw

Con esa orden aparece un extenso y detallado listado con las características técnicas de la máquina en la que se ejecute. Como el listado resultante es muy largo se puede acotar a un área concreta, por ejemplo al procesador (mediante el parámetro “-C”):

sudo lshw -C processor

Acotar a los discos duros:

sudo lshw -C disk

Acotar a la memoria RAM:

sudo lshw -C memory

Acotar a la tarjeta de sonido:

sudo lshw -C sound

Acotar a los dispositivos de conexión a Internet

sudo lshw -C communication

Para poder leerlo de forma más cómoda se puede guardar en formato HTML:

sudo lshw -html > nombre-de-archivo.html

También se puede guardar en XML:

sudo lshw -html > nombre-de-archivo.html

Existe un front-end gráfico: gtk-lshw.

Referencias y enlaces relacionados

Datos del artículo:

CSS: Personalizar viñetas en listas desordenadas

Fecha de publicación: 2007/02/19

Cuando se quiere una viñeta personalizada para listas desordenadas en XHTML no hay más que crear la imagen para la viñeta, y después adaptar la hoja de estilo para hacer la personalización.

Primero hay que definir las reglas para la etiqueta ul:

ul {
padding-left: 0; /*Limpieza de márgenes (se puede cambiar)*/
margin-left: 36px; /*Indentado de la lista (se puede cambiar)*/
list-style-type: none; /*Quitar estilo de viñeta*/
}

Y después las reglas para la etiqueta li:

li {
background: url(imagen.gif) left center no-repeat;
margin-bottom: 10px;
padding-left: 15px;
}

Ver ejemplo de viñetas personalizadas

Si no dispones de una imagen o no se te ocurre como hacerla puedes encontrar un montón de imágenes en Bullet Madness (la imagen utilizadas en el ejemplo procede de ese sitio).

Datos del artículo:

Utilización apropiada de CSS y Javascript en documentos XHTML

Fecha de publicación: 2007/02/18

Documento basado en Properly Using CSS and JavaScript in XHTML Documents (Mozilla Developer Center), distribuido bajo licencia Creative Commons Reconocimiento-Compartir igual.

XHTML es XML, no HTML

Una de las principales confusiones con XHTML es considerarlo como una nueva versión de HTML, cuando en realidad se trata de XML.

XHTML debe llevar el tipo MIME text/xml o application/xhtml+xml.

XHTML tiene algunas peculiaridades:

  1. Los caracteres < y & no están permitidos, salvo dentro de secciones CDATA: <!CDATA...>.
  2. En los comentarios (<!-- ... -->) no deben incluirse guiones dobles: .
  3. El contenido incluido dentro de los comentarios puede ser ignorado.

Problemas con las etiquetas style y script

Las etiquetas style y script dentro del propio documento XHTML pueden causar problemas cuando es tratado como XML en lugar de HTML.

Javascript contiene caracteres no permitidos en XHTML

El lenguaje Javascript suele contener caracteres que no pueden existir en XHTML fuera de las secciones CDATA:

<script type="text/javascript">
var i = 0;
while (++i < 10) {      // ...    }
</script>

El ejemplo anterior no es XHTML correcto, puesto que contiene el caracter <, que solo es permitido para el marcado en XHTML o XML.

Uso de comentarios en las etiquetas style y script

Los desarrolladores que están familiarizados con HTML, habitualmente insertan esos estilos y scripts dentro de comentarios con el objetivo de ocultar sus contenidos a los navegadores que no los entiendan:

<style type="text/css">
<!--
body {background-color: blue; color: yellow;}
-->
</style>

<script type="text/javascript">
<!--
var i = 0;
var sum = 0;
for (i = 0; i < 10; ++i)    {      sum += i;    }
alert('sum = ' + sum);
// -->
</script>

Resultados en diferentes navegadores:

  • Mozilla 1.1 y Opera 7: no se aplican el CSS ni el Javascript.
  • Netscape 7.0x y Mozilla 1.0.x: no aplican el CSS, pero si el Javascript.
  • Internet Explorer 5.5+: no puede visualizar el documento.

Etiquetas style y script y guiones dobles

Este código causará problemas, debido a los guiones dobles dentro de los comentarios:

<script type="text/javascript">
<!--
var i;
var sum = 0;
for (i = 10; i > 0; --i)    {  sum += i;    }  
// --> 
</script>

Utilización de CDATA en lugar de comentarios

La forma apropiada para introducir un script es dentro de secciones CDATA, pero esto puede causar problemas en navegadores antiguos que no son capaces de entender XML. Sin embargo, es posible combinar comentarios con secciones CDATA, para asegurar la compatibilidad hacia atrás:

<script type="text/javascript">
//<![CDATA[
var i = 0;
while  (++i < 10)    {      // ...    }
//]]>
</script>

Ejemplos

Utilización de reglas CSS en la etiqueta style con comentarios

Ejemplo 1 – XHTML 1.0 Strict como text/html
Este ejemplo muestra el comportamiento del XHTML servido como text/html cuando las reglas CSS están contenidas dentro del documento y entre comentarios. Este ejemplo es soportado por Netscape 7.x, Mozilla, Opera 7 e Internet Explorer 5.5+, los cuales aplican las reglas CSS adecuadamente.
Ejemplo – XHTML 1.0 Strict como text/xml
Este ejemplo muestra la misma situación que el anterior con la diferencia de que el XHTML se sirve como text/xml. En este caso Internet Explorer 5.5+ falla, y Netscape 7.x, Opera 7 y Mozilla consideran que el contenido que hay dentro de los comentarios ha de ser ignorado.
Example 3 – XHTML 1.0 Strict como application/xhtml+xml
Este ejemplo muestra la misma situación que los anteriores con la diferencia de que el XHTML se sirve como application/xhtml+xml . Los navegadores se comportan de la misma forma que en el ejemplo 2.

Utilización de reglas CSS en un archivo externo

Ejemplo 4 – XHTML 1.0 Strict como text/html
Este ejemplo muestra el comportamiento del XHTML servido como text/html y con las reglas CSS en un archivo externo. Este ejemplo es soportado por Netscape 7.x, Mozilla, Opera 7 e Internet Explorer 5.5+.
Ejemplo 5 – XHTML 1.0 Strict como text/xml
Este ejemplo muestra el comportamiento del XHTML servido como text/xml con las reglas CSS en un archivo externo. Este ejemplo es soportado por Netscape 7.x, Mozilla, y Opera 7 pero no porInternet Explorer 5.5+.
Ejemplo 6 – XHTML 1.0 Strict como application/xhtml+xml
Este ejemplo muestra el comportamiento del XHTML servido como application/xhtml+xml con las reglas CSS en un archivo externo. Este ejemplo es soportado por Netscape 7.x, Mozilla, y Opera 7 pero no por Internet Explorer 5.5+.

Recomendaciones

No usar etiquetas script o style dentro de XHTML

La mejor forma de evitar el uso de estas etiquetas es la utilización de CSS y Javascript contenidos en archivos externos, de forma que no importará si el documento XHTML es servido como text/html, text/xml o application/xhtml+xml.

Seguir las pautas de compatibilidad de XHTML 1.0 con HTML

Las pautas de compatibilidad de XHTML 1.0 con HTML ayudarán a consegir documentos XHTML compatibles con navegadores antiguos sin soporte de XML.

Datos del artículo:

Como abrir documentos de texto OpenDocument sin OpenOffice

Fecha de publicación: 2007/02/17

Documento ODT en Firefox
Documento ODT en Firefox

Para abrir documentos de texto en formato OpenDocument no es necesario instalar OpenOffice (ni otras aplicaciones compatibles con dicho formato), basta con tener Firefox y la extensión odfReader.

La limitación que tiene, aparte de que no es compatible con el resto de documentos OpenDocument, es que el documento debe estar disponible de forma local, de forma que se abrirá mediante el menú Archivo > Abrir archivo, o navegando por el sistema de archivos con el propio navegador (usando la barra de direcciones igual que se usa la de Explorer en Windows).

El funcionamiento de la extensión es sencillo: descomprime el archivo (los archivos OpenDocument están comprimidos en ZIP, aunque con extensión propia), le pasa una hoja de estilo XSL (para que el navegador interprete el XML de OpenDocument como XHTML) y da como resultado la visualización del documento en Firefox.

También existe la opción de utilizar Google Docs, que también soporta documentos de texto de OpenDocument.

Instalar odfReader

Saber más

Datos del artículo:

Razones para no usar NoFollow en los enlaces

Fecha de publicación: 2007/02/15

Search Engine Journal da 13 razones por las que la utilización de NoFollow es mala (tendiendo a centrarse en los comentarios de los blogs), de las que incluyo aquí las que me han parecido más interesantes:

  1. Usar NoFollow en los comentarios de los blogs no va a echar atras a los spammers, existen métodos más efectivos (introducir una cadena de texto aleatoria, AKismet en el caso de WordPress, etc.).
  2. Si el administrador del blog modera los comentarios no es necesario el uso de NoFollow, ya que el posible spam es filtrado.
  3. Enlazar a otro sitio con un enlace que tenga NoFollow es un síntoma de falta de confianza hacia ese sitio.
  4. NoFollow es una chapuza de los motores de búsqueda para corregir sus fallos a la hora de hacer un ranking de sitios web, en lugar de adquirir la capacidad de identificar y devaluar los enlaces que sean spam.
  5. Comentar en un blog supone añadir contenido relevante al mismo, en muchas ocasiones apoyado en enlaces.
  6. Hay buscadores a los que les da igual el NoFollow, siguen el enlace aunque tengan NoFollow (Yahoo! lo hace).

Enlaces relacionados

Datos del artículo:

XHTML: categorización de los elementos OPTION en SELECT mediante OPTGROUP

Fecha de publicación: 2007/02/12

Cuando dentro de la etiqueta select hay muchos elementos option resulta muy interesante su categorización, pero con alguna etiqueta que permita que esas categorías no se puedan seleccionar. La solución es la etiqueta optgroup:

<select>

<optgroup label="Historia">
  <option value ="e_antigua">Edad Antigua</option>
  <option value ="e_media">Edad Media</option>
  <option value ="e_moderna">Edad Moderna</option>
</optgroup>

<optgroup label="Geografía">
  <option value ="europa">Europa</option>
  <option value ="america">América</option>
  <option value ="asia">Asia</option>
</optgroup>

</select>

Resultado del ejemplo:

Tiene dos atributos (aparte de los predeterminados), label, que es obligatorio, y deberá rellenarse con el texto que se quiere obtener, y disabled, cuyo valor será “disabled” (en XHTML todos los atributos han de tener un valor, por eso se repite).

Referencias

Datos del artículo:

  • Etiquetas:
  • Publicado en categorías: Desarrollo web, XHTML
  • Comentarios desactivados en XHTML: categorización de los elementos OPTION en SELECT mediante OPTGROUP

Yahoo! Pipes: Creación de mashups

Fecha de publicación: 2007/02/12

Yahoo! Pipes es una herramienta para crear mashups, o combinaciones de información procedente de fuentes muy diversas, como búsquedas en Yahoo!, fotografías de Flickr o feeds RSS (no funciona con ATOM).

Para organizar todas esa información dispone de un entorno de programación visual, en el que se dispone de varias fuentes de información:

  • Yahoo! Search
  • Yahoo! Local
  • Fetch (URLs de feed RSS).
  • Google Base
  • Flickr

Una vez introducidas las diferentes fuentes de información, con sus respectivos parámetros (cadenas de búsqueda, URL, etc.) se enlazan mediante uniones hasta que todas las ramas coinciden en el “pipe output”.

Captura de Yahoo Pipes
Pantalla de edición de Yahoo! Pipes

Para no recargar con demasiada información la página resultante se puede limitar el número de resultados en cualquier punto de la estructura.

También existe la posibilidad de incluir puntos en la estructura que realicen la traducción de los contenidos o que sean capaces de extrae localizaciones geográficas.

Captura de Yahoo Pipes
Página de resultados

En cuanto a la interacción con la página se puede incluir un bloque en el que se especifican los datos de búsqueda que podrán ser introducidos por los usuarios.

Probar Yahoo! Pipes.

Saber más

Datos del artículo:

Información del sitio