Usuario:Ciencia Al Poder/Buenas costumbres en el web

He creado esta página para reunir lo que yo considero buenas costumbres en la creación de páginas web, principalmente por motivos de accesibilidad, eficacia y con vistas a tiempos futuros, teniendo en cuenta la previsible evolución de los lenguajes de marcado y la capacidad de los navegadores para realmente entender el contenido de una página web y tratar la información en consecuencia y no como un simple conjunto de caracteres.

Apartado visual

Resolución de pantalla

Normalmente los documentos se crean y editan cuidando (o no) el diseño y la organización visual del contenido, pero a veces no se tiene en cuenta cómo es de importante la resolución de pantalla que se usará para mostrar el contenido para que éste se siga viendo bien.

Lo ideal es que el diseño no dependa del tipo de resolución de pantalla del dispositivo donde se visualice, que se adapte a él o que ofrezca al usuario la posibilidad de ver la página en función de su resolución.

Las resoluciones más comunes son las de 800×600 y 1024×768. Lo más sensato es adaptar el diseño a la resolución menor, ya que en una resolución mayor los documentos pensados para resoluciones más bajas se verán bien, seguramente con espacios laterales; pero a la inversa el resultado puede ser nefasto.

Un problema se da al utilizar texto preformateado, es decir, que aparece el texto en una sola línea a menos que se inserten saltos de línea en el código, es que si la línea es larga ésta puede sobresalir del ancho visible del navegador, y puede dificultar la lectura, aparte de modificar la estructura de la página.

Este fenómeno se puede solucionar incluyendo este código en el texto preformateado, que provocará que aparezca automáticamente una barra de desplazamiento alrededor del texto afectado, pero sólo si alguna línea se sale del área de visualización:

<div style="overflow:auto">
texto preformateado
</div>

Un ejemplo lo verán más abajo.

Este sistema se puede emplear en otras situaciones. Por ejemplo, en una celda de una tabla, si su contenido hace que la tabla aparezca fuera de la página. Se puede utilizar dentro de la celda.

También puede haber un problema, y es que si el fragmento es muy largo (de altura) es posible que la barra de desplazamiento horizontal aparezca fuera del área visible del navegador, obligándonos a desplazar el documento hacia abajo para encontrar la barra de desplazamiento horizontal, moverla, y volver a desplazarnos hacia arriba. Pero también tiene solución: fijamos la altura del área afectada para asegurarnos que el límite inferior del área (y por tanto donde aparecerá la barra de desplazamiento horizontal) quede dentro de una distancia razonable del límite superior. La altura se puede poner en píxels (npx), donde n es el número de píxels. También en em, que es la altura de la fuente (y podríamos especificar así el número de líneas visibles) pero el estilo de esta página ha modificado el interlineado y no es una opción fiable:

<div style="overflow:auto; heigth:altura y unidad">
texto preformateado
</div>

Por ejemplo, con style="overflow:auto; height:30em": Algo de esto es bloqueado como "spam" por meta: height:30em - Solucionado con un "truco"

Aquí emplieza el texto de ejemplo
.
Vamos a hacer una línea más larga de lo habitual. Esto lo haré simplemente rellenando la línea con verborrea sin sentido como ésta...
.
Ahora para hacer
este texto
más largo
escribiré
más
tonterías
como, por ejemplo
una cuenta de números
del uno
al diez.
.
Esto es, 
.
1
2
3
4
5
6
7
8
9
10
. 
Aquí Termina el texto de ejemplo

Tamaño de fuente

Lea Cuidado con el tamaño del texto

Elemento font

Olvídense de la etiqueta <font>. La conocen, ¿no?. Pues no se acuerden más de ella que para sustituirla por <span> cada vez que la vean. El elemento font está obsoleto en el estándar XHTML 1.1, y el que utiliza estas páginas, de momento, es el XHTML 1.0. En vez de eso utilicen la propiedad style de culquier elemento que usen (tablas, <div> o <span>)

<font size="[+]n" color="color" face="fuente">

se debería sustituir por

<span style="font-size: { {xx-small|x-small|small|medium|large|x-large|xx-large} | {larger|smaller} | n% | n }; color: color; font-family: fuente">

Véase también: Especificación CSS2 para fuentes