Recomendaciones para el diseño de páginas HTML

Presentación

Las apariencias engañan. En un primer contacto es fácil dejarse arrastrar por los diseños más llamativos: gifs animados, gráficos, forms, mapas sensibles, applets Java, etc. Todo eso no está en sí mismo mal. El peligro es que en favor de la vistosidad se descuide lo más valioso: el contenido.

Lista de recomendaciones

Esta es mi primera lista de recomendaciones:

Rigor, interés: Instalar un documento en Internet significa hacerlo público, publicarlo. El rigor y el interés de los contenidos redundarán en el prestigio del autor, exactamente igual que con un documento impreso.
No son para leer sino para hojear: Según indican los resultados de una encuesta entre usuarios de Internet, las páginas no se leen, simplemente se hojean (en el sentido de "pasar las hojas de un libro, leyendo deprisa algunos pasajes" Diccionario de la RAE)
Cualquier navegador: No son recomendables los diseños que limitan la consulta a determinados programas (como Netscape o MSExplorer, última versión). Ver el comentario de Tim Berners-Lee al respecto.
Hojas de estilo:. Es muy recomendable usar hojas de estilo. Con ellas es posible mantener un diseño uniforme y personalizado sin depender de las nada recomendables artimañas estéticas. Son muy útiles para definir imágenes corporativas.
Corrección y utilidad del etiquetado: HTML es un lenguaje y quien lo usa debe cumplir con una serie de normas y reglas. Las más elementales son las de corrección, pero existen otras que facilitan el acceso y aprovechamiento de la información.
Información estructurada

Rigor, interés

Reseñar adecuadamente la fuente de información, dirección de quien mantiene la página, fechas de creación y actualización, etc.

Textos bien redactados, sin faltas de ortografía o puntuación. Uso de estilo apropiado y adaptado al hipertexto.

Don't Forget To Write , por Dale Dougherty de Web Review (copia): "Graphics May Get Attention but Good Writing Rewards It. Good writing doesn't often get the attention it deserves on the Web. Graphics, animations, and audio/video -- all these grab the headlines. Text just isn't cool. So, I wondered if the teams participating in the recent 'Cool Site in a Day' design competition would pay much attention to the words on the pages they were creating. I was confident these all-star design teams would create good-looking page layouts and elegant graphics, but how would they handle text?"

Para los que escriban en castellano, estos son algunos enlaces muy útiles:

Página de la lengua española (copia 2.2.1998), por Miguel Ángel Monjas Llorente
Página de la lengua española -últimas incorporaciones (copia 2.2.1998)

No son para leer sino para hojear

Reading on the Web (copia, octubre 1997): People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. In a recent study John Morkes and I found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.

Cualquier navegador

"Anyone who slaps a 'this page is best viewed with Browser X' label on a Web page appears to be yearning for the bad old days, before the Web, when you had very little chance of reading a document written on another computer, another word processor, or another network."
-Tim Berners-Lee in Technology Review, July 1996

"Esos que estampan "Página optimizada para el navegador X" en su página web parecen añorar los viejos tiempos preweb, cuando se tenían muy pocas probabilidades de llegar a leer un documento escrito en otro ordenador, con otro editor de textos, o en diferente red".
-Tim Berners-Lee en Technology Review, julio, 1996

(home page - copia 5.3.1998; biography - copia 3.2.1997, foto: 9 Kb., 146 Kb.)

Existe una campaña internacional en defensa de las páginas compatibles para cualquier navegador: Best Viewed With Any Browser

"Written by Cari D. Burstein to express the sentiment behind the "Best Viewed With Any Browser" campaign. If you were referred here from a web site bearing the "Best Viewed With Any Browser" graphic or text, it means that the site author agrees with the campaign and is participating in the effort to discourage browser specific web design."

MSExplorer frente a Netscape, noticias (El País 5.3.98 / Pisani 5.3.98) sobre la lucha frente al monopolio.

Hojas de estilo en cascada

Cascading Style Sheets, level 1 (copia de junio 1999)

"This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology. One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification."

Ejemplos: CSS de esta página, CSS, de Jakob Nielsen , CCS de Lars Marius Garshol.

Corrección y utilidad del etiquetado

Son muy útiles los consejos de Jakob Nielsen (Usable Information Technology):: Top Ten Mistakes in Web Design, (copia , mayo 1996); Using Frames (tienen ventajas, pero muchos inconvenientes); Gratuitous Use of Bleeding-Edge Technology (lo último deja fuera a la mayoría); Scrolling Text, Marquees, and Constantly Running Animations (gifs animados, parpadeos, etc.); Complex URLs (a veces, imposible de evitar); Orphan Pages (créditos: autor, fecha, fuentes, etc.); Long Scrolling Pages (equilibrio entre satisfacción y empacho de contenidos); Lack of Navigation Support (índices, barras de estado, menús, etc.); Non-Standard Link Colors; Outdated Information; Overly Long Download Times (que la satisfacción no recaiga sólo en lo visual)

Composing Good HTML, (copia - 4.3.1998): By James "Eric" Tilton, House of Boy Do I Feel Silly, tilt+@cs.cmu.edu. This document attempts to address stylistic points of HTML composition, both at the document and the web level.
The World Wide Web Initiative: The Project: Consorcio donde se desarrolla y mantiene WWW y HTML. Contiene la información oficial.
A Beginner's Guide to HTML: The NCSA Beginner's Guide to HTML is the most frequently requested file on NCSA's Web servers.
Understanding HTML and SGML: Modesto material preparado por David Raggett.
HTML Tutorial : Authoring Methods for the WWW: By Jean Paoli, Technical Director, GRIF S.A. Jean.Paoli@grif.fr
What Is Content Negotiation?: The World Wide Web is on the verge of exploding its content base with a slew of new data types. Whereas previously, most web sites were not much more than HTML pages with inlined GIF's and maybe a sound or MPEG movie here and there, we will soon start seeing Adobe Acrobat, VRML, Java, Macromedia Director, and other data formats take hold as support for them in popular browsers emerge. This is all good news - it means there'll be less pressure on HTML to be all things to all people, and it'll truly make the web more alive and exciting.
Agenda de direcciones HTML: Colección de direcciones muy completa y útil en torno a HTML, de Manuel Barberán.
HTML. Manual de Referencia: El documento ha sido realizado por Sergio Talens Oliag a partir del capítulo doce del libro sobre Internet que está preparando junto a José Hernández Orallo, de próxima aparición en la Editorial Paraninfo.
Manual de HTML: Luis Marías Sánchez. ha preparado un buen manual. La pena es que su utilización de HTML no sea muy ortodoxa.
Manual práctico de HTML: Manual de Álvaro Martínez Echevarría, de la ETSIT (UPM). Menos completo que el de Luis Marías Sánchez.

Getting HotMetaL by FTP: HotMetaL es, creo, el mejor software para editar HTML. La empresa SoftQuad lleva años desarrollando herramientas para SGML y ha participado activamente en el diseño de XML.
HTML to the Max: A Manifesto for Adding SGML Intelligence to the World-Wide Web. Escrito por C. M. Sperberg-McQueen Robert F. Goldstein.
Welcome To WebTechs: WebTechs is now providing different methods of submitting your HTML document to the WebTechs HTML Validation Service.

[Inicio]