Un joystick vocal

He encontrado la noticia Un Joystick Vocal ayuda a los discapacitados a manejar el ordenador. La noticia dice:

Informáticos e ingenieros de la Universidad de Washington han creado un “Joystick Vocal” que permite mover el cursor del ordenador a personas discapacitadas. El sistema convierte sonidos vocálicos sencillos en movimientos del cursor sobre la pantalla. Asimismo, es capaz de simular los clics que hacemos con los botones derecho e izquierdo del ratón. Frente a otros sistemas, éste no requiere una gran inversión de hardware, ya que sólo precisa un micrófono y un ordenador para poder usarlo. Sus creadores han hecho otros desarrollos de esta tecnología para buscar en la web, jugar a juegos o manejar un brazo robótico.

Ratón con el movimiento de la cabeza

He encontrado la noticia HeadMouse: mouse virtual para personas con discapacidad. La noticia dice:

El dispositivo se basa en la utilización de una cámara de bajo coste para captar las acciones del usuario delante de la pantalla. Las personas con discapacidad motriz acceden al control del mouse a través de los movimientos de la cabeza con todas las funciones incorporadas de «arrastrar», mientras que las acciones faciales se convierten en diversas modalidades de «clic».

La página oficial del proyecto es HeadMouse (Grupo de Robótica, Universidad de Lérida).

Resulta que también existe un producto comercial con el mismo nombre: HeadMouse Extreme. ¿Qué diferencias hay entre uno y otro? ¿Por qué le ponen el mismo nombre?

Ejemplo de vídeo con subtítulos

He encontrado la página web Uso de subtítulos en la presentación de un segmento de baile con descripción por medio de audio. En esta página se explica cómo crear vídeo con subtítulos mediante SMIL para que sea empleado por el reproductor RealPlayer.

La versión demo de JAWS no se puede utilizar para evaluar

He encontrado el comentario El lector de pantallas JAWS no se podrá usar para evaluar la accesibilidad web. Según parece, Freedom Scientific, el fabricante de JAWS, ha modificado la licencia de uso de la versión demostrativa de su lector de pantallas y ya no se puede utilizar para evaluar la accesibilidad de un sitio web.

Según leo en JAWS license not developer friendly, la licencia dice en uno de sus párrafos:

… these demonstration or evaluation licenses are not permitted for purposes of development and testing of JAWS scripts, applications, HTML coding, or other Web Based code.

Así que, nos tenemos que comprar JAWS y pagar unos 900$.

Nuevas leyes sobre accesibilidad web

El 2007 ha sido un buen año para la accesibilidad web en cuanto a leyes en España.

Las nuevas leyes que se han promulgado complementan a las que ya se tenían desde hace unos años:

• BOE n. 166 de 12/7/2002: LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de comercio electrónico.
• BOE n. 289 de 3/12/2003: LEY 51/2003, de 2 de diciembre, de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad.

El 21 de de noviembre de 2007 se publicón en el BOE el REAL DECRETO 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social. Este reglamento establece que la accesibilidad de las páginas web está regulada por la Norma UNE 139803:2004, que establece tres niveles de prioridades, y también establece el grado de accesibilidad aplicable a las páginas de internet de las administraciones públicas (prioridades 1 y 2 de la citada Norma UNE).

El 27 de diciembre de 2007 se publicó en el BOE la LEY 49/2007, de 26 de diciembre, por la que se establece el régimen de infracciones y sanciones en materia de igualdad de oportunidades, no discriminación y accesibilidad universal de las personas con discapacidad. Las infracciones serán multas entre los 301 euros y el millón de euros. Su entrada en vigor está fijada a los tres meses de su publicación.

El 29 de diciembre de 2007 se publicó en el BOE la LEY 56/2007, de 28 de diciembre, de Medidas de Impulso de la Sociedad de la Información. Esta ley obliga a las empresas que cumplan una serie de condiciones a satisfacer un nivel de accesibilidad en sus páginas web equivalente al nivel AA del W3C.

Llegó la hora de las empresas

He encontrado esta noticia en el periódico El Mundo: Las grandes empresas deberán hacer accesibles sus páginas web a discapacitados.

A partir del 31 de diciembre de 2008, es decir, en 12 meses, una serie de empresas que cumplan una serie de condiciones, deberán de satisfacer en sus páginas web el nivel medio (prioridades 1 y 2) de la Norma UNE 139803:2004 (equivalente al nivel AA del W3C).

La noticia dice:

Las páginas de Internet de las empresas que presten servicios al público de especial trascendencia económica deberán alcanzar el 31 de diciembre de 2008 el nivel medio de los criterios de accesibilidad para personas con discapacidad, según establece la nueva Ley de Medidas de Impulso de Sociedad de la Información, que ya ha entrado en vigor.

Según esta nueva norma legal, son consideradas empresas que prestan servicios al público en general de especial trascendencia económica aquéllas con más de cien trabajadores o cuyo volumen anual de operaciones supere los seis millones de euros.

Además, deben operar en el sector de los servicios de las comunicaciones electrónicas o en servicios financieros destinados a consumidores, que incluyen los servicios bancarios, de crédito o de pago, los servicios de inversión, las operaciones de seguros privados, los planes de pensiones y la actividad de mediación de seguros.

Hasta la aprobación de esta ley, la obligación de accesibilidad sólo vinculaba a las páginas de Internet de las Administraciones Públicas.

¿El portal de ayuntamiento más accesible?

He encontrado esta noticia en el periódico El Mundo: El portal de Internet del Ayuntamiento de Pamplona, el único 100% accesible.

La noticia dice:

El Ayuntamiento de Pamplona cuenta con el primer portal de internet que alcanza el 100% de éxito en el cumplimiento de los criterios de accesibilidad analizados por el Observatorio de la Infoaccesibilidad de la Fundación Once. Por esta razón será galardonado el próximo día 17 de enero, según informó el consistorio en un comunicado.

El estudio llevado a cabo por el Observatorio de la Infoaccesibilidad ha analizado 19 portales y 93 páginas web. El Ayuntamiento de Pamplona es el único que ha alcanzado la cota máxima. A continuación se han situado Bankinter, que supera el 81 por ciento en el cumplimiento de los criterios de referencia, y la Seguridad Social con su portal de vida laboral que presenta el 85,71 por ciento de éxito.

El estudio intersectorial el Observatorio de la Infoaccesibilidad revisa comparativamente el estado de accesibilidad de las webs y su evolución a lo largo de tres años. El Observatorio, para este estudio eligió 19 portales, los tres mejores en la evaluación técnica de accesibilidad de cada uno de los ocho informes/áreas observadas.

Estos informes abarcaban distintos campos: universidades, administración general del Estado, comunidades autónomas, ayuntamientos, viajes y transportes, banca y diarios digitales.

El propósito de los resultados publicados consiste en dar a conocer y destacar, además de niveles de cumplimiento respecto a las pautas vigentes, prácticas favorables y las principales barreras e impedimentos en la web, incluyendo en esta valoración la perspectiva de los usuarios.

Ley de Medidas de Impulso de la Sociedad de la Información

He encontrado esta noticia en el periódico El Mundo: Garantizado el acceso de personas con discapacidad a las nuevas tecnologías.

La noticia dice:

El Boletín Oficial del Estado publicó, el pasado sábado 29 de diciembre, la Ley de Medidas de Impulso de la Sociedad de la Información (LMISI), que garantiza el acceso de las personas con discapacidad a la información en Internet y en otros soportes de nuevas tecnologías de la información y la comunicación.

Además, esta ley garantizará la accesibilidad de las cabinas telefónicas a los usuarios con alguna discapacidad, así como el establecimiento de una oferta tal que pueda cubrir la demanda nacional en todos las provincias.

La disposición adicional undécima de la LMISI recuerda también a las administraciones y entidades públicas su obligación de promover y garantizar el diseño accesibles para personas con discapacidad de todos los elementos y procesos basados en las nuevas tecnologías de la Sociedad de la Información.

Esta norma, que entró en vigor el pasado domingo 30 de diciembre, establece, además, que el incumplimiento de las medidas de acceso a la sociedad de la información será regulado por la ley de infracciones y sanciones que el BOE publicó el 27 de diciembre y que comenzará a funcionar pasados tres meses de su publicación en el BOE.

Vídeos sobre accesibilidad web

Tres vídeos de un seminario sobre la accesibilidad web. El contenido está bien, pero el sonido es muy malo.

Legibilidad de una página web

En ¿Tu Sitio es Entendible y Fácil de Leer? nos presentan la herramienta TxReadability (versión en español) que evalúa la facilidad de lectura de una página web, para textos en español, inglés y japonés.

El W3C, en la pauta 14 de sus Pautas de Accesibilidad al Contenido en la Web 1.0 nos dice:

Pauta 14. Asegúrese de que los documentos sean claros y simples.

Asegure que los documentos son claros y simples para que puedan ser más fácilmente comprendidos.

La maquetación coherente de páginas, los gráficos reconocibles y el lenguaje fácilmente comprensible benefician a todos los usuarios. En particular, ayudan a personas con discapacidades cognitivas o con dificultades en la lectura. (Por tanto, asegúrese de que las imágenes tienen textos equivalentes para los ciegos, los de baja visión o para cualquier usuario que no puede o ha elegido no ver los gráficos. Consulte también la pauta 1).

La utilización de un lenguaje claro y simple promueve una comunicación efectiva. El acceso a la información escrita puede ser difícil para personas con discapacidades cognitivas o de aprendizaje. La utilización de un lenguaje claro y simple también beneficia a las personas cuyo primer idioma es diferente al del autor, incluidos aquellos que se comunican principalmente mediante lengua de signos.

Puntos de verificación:

14.1 Utilice el lenguaje apropiado más claro y simple para el contenido de un sitio. [Prioridad 1]
Técnicas para el punto de verificación 14.1.

14.2 Complemente el texto con presentaciones gráficas o auditivas cuando ello facilite la comprensión de la página. [Prioridad 3]
Consultar también la pauta 1.
Técnicas para el punto de verificación 14.2.

14.3 Cree un estilo de presentación que sea coherente para todas las páginas. [Prioridad 3]
Técnicas para el punto de verificación 14.3.

Esta herramienta nos puede ayudar a cumplir esta pauta.

Nuevo borrador de WCAG 2.0

Con fecha 11/12/07 se ha publicado un nuevo borrador de las Web Content Accessibility Guidelines 2.0. La fecha límite para enviar comentarios es el 01/02/08. ¿Para cuándo la recomendación definitiva?

En la entrada ¿Qué pasa con WCAG 2.0? comenté los problemas que está teniendo esta nueva recomendación.

JavaScript no molesto (5): validación de formularios

En la entrada JavaScript no molesto (4): separación del JavaScript se explicó cómo aprovechar el atributo class para separar el código JavaScript del código XHTML. En esta entrada se va a explicar cómo utilizar la misma técnica para validar formularios.

Los formularios se deben validar en el navegador por varias razones, las más importantes son:

• Disminuye el tiempo de respuesta de la aplicación: el usuario no tiene que esperar a que se envíen los datos al servidor, se validen en el servidor y se reciba una respuesta para saber si los datos están bien o están mal.
• Se reduce la carga de trabajo del servidor (no del todo, como ahora se explicará): en el servidor no se tienen que validar los formularios de todos los usuarios, en el navegador de cada usuario se validan los datos que ha introducido.

La segunda razón no es verdad en parte, porque SIEMPRE hay que validar los datos que se reciben en el servidor, ya que un usuario malicioso los puede enviar directamente, sin pasar antes por la validación de nuestro formulario. Por tanto, la solución que vamos a ver para separar el JavaScript del XHTML no supone un problema cuando no se dispone de JavaScript, ya que los datos serán validados en el servidor.

Sí que puede haber problemas cuando se emplea JavaScript para actualizar un control del formulario o una página web en función de las acciones del usuario. Por ejemplo, el típico caso de las listas desplegables en cascada (una lista que muestra sus valores en función de lo que se ha elegido en otra lista) realizado con JavaScript no funcionaría si está desactivado. Este problema es distinto al que se explica en esta entrada y merece una para él solo.

Consejo 1: no se debe usar botones de tipo button con el evento onclick para enviar un formulario

El código siguiente presenta un grave problema de accesibilidad: cuando JavaScript no está disponible, el formulario no se puede enviar.

function validar() {
// Algunas instrucciones para validar
// Al final, si todo va bien, se envía el formulario
document.forms[0].submit();
}

<input type="button" value="Enviar" onclick="validar()">Para solucionar este problema, se deben emplear los botones de tipo submit y utilizar el evento onsubmit para llamar al código de validación:

function validar() {
// Algunas instrucciones para validar
// Al final, si todo va bien, se envía el formulario
document.forms[0].submit();
}

<form action="unapagina.php" onsubmit="return validar()"></form>Consejo 2: utiliza múltiples clases para indicar el tipo de validación que requiere cada control de un formulario

En el artículo A Guide to Unobtrusive JavaScript Validation se presentan técnicas para separar el código JavaScript que realiza la validación de un formulario:

• Utilizar campos ocultos (hidden) para indicar las validaciones que se tienen que realizar (valor requerido, correo electrónico, código postal).
• Utilizar el atributo class para indicar el tipo de validación.
• Crear un DTD propio para añadir atributos que indican el tipo de validación.

La primera opción es poco práctica, ya que no es adecuada para formularios complejos con muchos campos. La tercera opción tampoco es práctica, ya que una página web basada en un DTD propio no es una página válida respecto a XHTML. Por tanto, la opción más recomendable es la segunda.

En el class se pueden añadir valores para indicar el tipo de validación que requiere el control:

• required
• notrequired
• email
• integer
• date

Por ejemplo:

<input type="text" name="correo" class="required email">
Para más información sobre cómo lograr un manejo de formularios correcto con JavaScript:

• A Guide to Unobtrusive JavaScript Validation
• Unobtrusive Javascript
• Javascript no obstructivo, Manual de buenas maneras (traducción al español del anterior)

III Premios TAW 2007

He encontrado esta noticia en el periódico El País: Los portales del Ministerio de Fomento y Ayuntamiento de Madrid los más accesibles. TAW ya ha otorgado sus premios anuales a las páginas web más accesibles. En la página Los portales del Ministerio de Fomento y Ayuntamiento de Madrid ganan los III Premios TAW a las web públicas más accesibles podemos encontrar la nota de prensa de TAW y en la página Premiados 2007 la lista de premiados que reproduzco:

Reunido el jurado para la concesión de los III Premios TAW a la Accesibilidad Web, el día 15 de Noviembre de 2007 en la sede de la Fundación CTIC, resuelven conceder los premios por categorías a:
T.1. Premio TAW a la Web pública más Accesible I.
GANADOR: Sitio web Ministerio de Fomento
Finalista: Sitio web Ministerio de Cultura
Finalista: Sitio web Autoridad Administrativa CITES
T.2. Premio TAW a la Web pública más Accesible II.
GANADOR: Sitio Web Ayuntamiento de Madrid
Finalista: Sitio web Ayuntamiento de Ermua
Finalista: Sitio web Ayuntamiento de Murcia
T.3. Premio TAW a la Web Empresarial más Accesible I.
GANADOR: Sitio web Cajastur
Finalista: Sitio web Gamesa
Finalista: Sitio web Babel Sistemas de información
T.4. Premio TAW a la Web Empresarial más Accesible II.
GANADOR: Sitio web Cafetto Kaldi
Finalista: Sitio web Serviweb S.L.
Finalista: Sitio web Gateway S.C.S.
T.5. Premio TAW a la Web de entidades sin ánimo de lucro más Accesible.
GANADOR: Sitio web Aspaym Cantabria
Finalista: Sitio web Asociación Síndrome Prader-Willi
Finalista: Sitio web Fundación Estudios e Análises
T.6. Premio TAW al Mejor Proyecto en Accesibilidad Web.
El jurado declara desierta esta categoría.

Facilidades para el acceso a la administración electrónica

He encontrado esta noticia en el periódico El Mundo: El acceso a la administración electrónica para los discapacitados, más fácil. La noticia dice:

Las personas con discapacidad podrán acceder a la administración electrónica con mayor facilidad, gracias a la firma de un convenio firmado entre la Fundación ONCE y la Fundación Europea para la Sociedad de la Información y la Administración Electrónica.

El convenio, entre otros puntos, incluye el desarrollo de una herramienta informática para permitir el uso de todos los programas del Servicio Administratel a las personas con discapacidad, incluyendo aquellas que poseen una discapacidad visual severa.

¿Qué es Administratel? Pues no lo sé, pero esta es la página web de Administratel.

Esquinas redondeadas

Las esquinas redondeadas, como las que se pueden ver en esta misma página, son un estilo visual muy empleado por su vistosidad. Sin embargo, tienen varios problemas de los que me gustaría destacar dos:

• Se suelen basar en el empleo de imágenes, lo que origina un aumento en el peso de la página (aumenta el tiempo de carga) y origina problemas de mantenimiento (por ejemplo, si se desea cambiar los colores hay que cambiar las imágenes).
• Al utilizar imágenes puede ocasionar problemas de accesibilidad o, al menos, molestar a los usuarios que empleen un lector de pantallas.

Acabo de encontrar Esquinas redondeadas sin emplear imágenes: sólo CSS y JavaScript. Se trata de una traducción de la página Nifty Corners Cube. Desde estas páginas nos podemos descargar un script en JavaScript que permite tener esquinas redondeadas (y algunas cosas más) sin tener que utilizar imágenes. Y si JavaScript no está disponible, no pasa nada, las esquinas salen cuadradas pero la página se ve bien.


Un ejemplo de página que usa este script:



¿Cómo se consigue? En Nifty Corners: rounded corners without images (la primera versión de este script) se explica el truco.

Lector de pantalla para teléfonos móviles

He encontrado esta noticia en el periódico El Mundo: 'Mobile Speak', una aplicación para personas ciegas que lee la pantalla del móvil. Según dice, es el primer lector de pantalla para teléfono móvil que se lanza en el mercado español. Parece que sólo está disponible para el sistema Symbian y supongo que también permitirá navegar con los navegadores integrados en los teléfonos móviles.

Control cerebral del ordenador

He encontrado esta noticia en el periódico El Mundo: Los discapacitados motrices podrían jugar en el mundo virtual de Second Life. La noticia nos cuenta que en la Universidad Keio de Japón (la misma que junto con el MIT y el INRIA fundaron el W3C a mediados de los noventa) están experimentando con un sistema que consiste en unos electrodos que se conectan al cuero cabelludo del usuario y le permite moverse por Second Life simplemente con el pensamiento.

Esta técnica se conoce como control cerebral o control neural. Evidentemente, no se tiene que limitar exclusivamente a Second Life, se puede emplear para cualquier otra tarea, como por ejemplo navegar por Internet.

Hay más gente que está trabajando en este tema e incluso ya hay algunas empresas que venden estos dispositivos, aunque por ahora no son muy precisos y requieren de un entrenamiento previo largo (que el ordenador aprenda a interpretar las señales que emite el cerebro). Algunso artículos sobre el tema:

• Control cerebral
• Casco de 'ondas cerebrales' controla un ordenador
• El reto del control remoto neural

JavaScript no molesto (4): separación del JavaScript

La entrada de ayer terminaba con la pregunta ¿No se puede separar el código JavaScript del código HTML como se hace con CSS?

Sí, sí que se puede. Una página web se puede construir mediante capas:

• Capa de contenido: la estructura y el contenido con etiquetas de XHTML.
• Capa de presentación: la presentación del contenido definida con CSS.
• Capa de comportamiento: el comportamiento del contenido (por ejemplo, la respuesta ante una acción del usuario) definido con JavaScript.

Con un diseño basado en capas logramos reducir el acomplamiento entre los distintos componentes (contenido, presentación y comportamiento), lo que se traduce en importantes beneficios: disminución de los errores, reducción en los costes de mantenimiento, etc. Pero además, una página web construida de esta forma (que se conoce como progressive enhancement) casi siempre es graceful degradation, y por tanto la página web funcionará correctamente aun en el caso de que falte algún tipo de componente (CSS o JavaScript).

¿Cómo se puede lograr esto? En el código HTML no vamos a escribir ni una sola línea de código JavaScript. Más aun, tampoco se van a emplear los manejadores de eventos como onclick, onblur, etc.

Desde JavaScript, se puede asignar código de JavaScript a un manejador de eventos con el siguiente código:

elemento.evento = acccion;

Para seleccionar un elemento de la página web (una celda en una tabla, un botón en un formulario, un enlace, etc.) se puede emplear:

• getElementById(id): selecciona el emento indicado por el id.
• Usar una combinación de getElementsByTagName(etiqueta) y getAttribute(atributo) para seleccionar elementos con un atributo específico.

En la entrada JavaScript no molesto (3): las ventanas emergentes se puso como ejemplo los enlaces que se abren en ventanas emergentes. Para indicar que un enlace es de este tipo, vamos a añadir al atributo class un valor que no se emplea en el CSS, pero que desde CSS nos va a permitir saber que se trata de una ventana emergente:

<a href="http://www.ua.es/" class="estilo popup">Universidad de Alicante</a>
En el atributo class, el valor estilo se emplea en el CSS para asignar una presentación concreta, mientas que el atributo popup se emplea en JavaScript para identificar los enlaces que se tienen que abrir en ventanas emergentes:

window.onload = prepareLinks;
function prepareLinks() {
  var links = document.getElementsByTagName("a");
  for (var i=0; i= 0) {
      links[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }

}

function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=480");
}

En el código anterior se realizan los siguientes pasos:

1. Se asigna al evento onload la función prepareLinks: esta función será llamada automáticamente cuando la página termine de cargarse.
2. La función prepareLinks obtiene un array con todos los enlaces de la página web.
3. Para cada enlace, se comprueba si el atributo class contiene el valor popup.
4. Si el enlace está marcado como popup, le asigna una función de JavaScript al evento onclick.

Para más información sobre cómo lograr la separación del código JavaScript:

• DHTML no intrusivo
• Nociones básicas de JavaScript no intrusivo
• Behavioral Separation
• Unobtrusive Javascript
• Javascript no obstructivo, Manual de buenas maneras (traducción al español del anterior)
• 7 reglas de oro para hacer un javascript no obstructivo

JavaScript no molesto (3): las ventanas emergentes

Una ventana emergente (popup window) es una ventana independiente del navegador que se abre de forma automática (por ejemplo, las molestas ventanas emergentes de publicidad que se abren al cargar una página) o de forma manual como respuesta a una acción del usuario de una página (por ejemplo, al pulsar sobre un enlace).

En el caso de estas últimas, lo normal es que se abran tras pulsar el usuario sobre un enlace o un botón. El uso de botones con el evento onclick se debería evitar, ya que supone una barrera de accesibilidad en el caso de que JavaScript no esté disponible. Por tanto, nos vamos a centrar en las ventanas emergentes activadas al pulsar sobre un enlace.

En el href de un enlace se puede utilizar directamente JavaScript. Por ejemplo, suponiendo que tenemos la función popUp que abre una ventana emergente:

function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}

simplemente tenemos que escribir javascript:popUp('http://www.ua.es/') en la dirección del enlace. También se puede emplear el evento onclick y dejar la dirección en blanco o poner el símbolo "#":

<a href="" onclick="popUp('http://www.ua.es/');">UA</a>Cualquiera de las dos posibilidades impide que los usuarios sin JavaScript puedan acceder al contenido indicado.

La solución es muy sencilla:

• Añadir en el enlace una URL al contenido que se desea visualizar.
• En el código JavaScript, añadir return false; al final para evitar que se ejecute el enlace cuando se ejecute el código JavaScript. La URL del enlace indicada con href sólo será empleada cuando JavaScript no esté disponible.

Con esta solución, la funcionalidad se ve reducida para los usuarios sin JavaScript porque no se abre en una nueva ventana, pero no falla completamente.

La solución anterior se puede mejorar para evitar el tener que repetir la URL tanto en el enlace como en el evento onclick:

<a href="http://www.ua.es/" onclick="popUp(this.getAttribute('href')); return false;">UA</a>o también:

<a href="http://www.ua.es/" onclick="popUp(this.href); return false;">UA</a>Pero esta solución aún se puede mejorar más, ya que el código JavaScript está escrito directamente en las etiquetas HTML, lo cual ocasiona algunos problemas:

• Dificulta la escritura.
• Dificulta la lectura.
• Dificulta el mantenimiento.

¿No se puede separar el código JavaScript del código HTML como se hace con CSS?

Uso de la propiedad float de CSS

El uso de la propiedad float de CSS es un poco confuso. Si se hacen pruebas sin haber leído antes una explicación sobre cómo se usa es difícil sacar conclusiones. Pero esta propiedad es muy importante si se quiere lograr un diseño (layout) de una página web que sea válido para diferentes resoluciones de pantalla.

En la sección 9.5 Floats de Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification podemos encontrar la explicación oficial de esta propiedad. Pero para aprender a usar la propiedad float, es mucho mejor consultar Floatutorial. Este tutorial ofrece explicaciones muy claras sobre el uso de este atributo y termina explicando como se puede utilizar para lograr un diseño a 2 columnas o a 3 columnas líquido (que se adapte a diferentes resoluciones de pantalla).