Con todo lo aprendido ya podríamos hacer muchas páginas web diferentes y el resultado sería bastante bueno. Pero aún no se han tratado algunos asuntos a tener en cuenta para conseguir una página web que se vea correctamente en todos los navegadores.
Cómo escribir correctamente una web
Hay algunas reglas que son imprescindibles para conseguir que tu web sea lo que deseas ver en cualquier ordenador conectado a la red. Algunas veces la falta de actualizaciones de algun navegador puede hacer que los usuarios no vean bien nuestras páginas web, pero eso no lo podemos controlar nostros.
Nuestro deber como desarrolladores web es asegurarnos de que nuestras páginas web se verán como nosotros deseamos en el máximo de servidores posibles.
Hay algunas cosas de sentido común que a veces cometemos el error de no darle importancia. Todas las etiquetas deben tener el nombre correcto (como sus atributos y valores) y sus cierres no solo deben existir (ya sea con la etiqueta final o terminar la etiqueta con "/>") sinó que deben estar en el lugar adecuado. Es muy importante mantener bien ordenados los cierres: las primeras etiquetas en abrirse son las últimas en cerrarse.
Asegurate también de que todas las comillas de los atributos esten en su lugar, porque también podrían causar muchos problemas.
No deberías publicar nada sin haber releido el código un par de veces y haberlo probado en diferentes servidores.
Pero ahora deberías aprender algunos elementos de los que no hemos hablado y de cómo validar un código.
El doctype
La palabra doctype (normalmente escrita como DOCTYPE) hace referencia al tipo de documento al que corresponde todo el texto de un archivo HTML. Es importante declarar este tipo de documento para advertir al servidor qué tipo de "traducción" debe hacer del lenguaje escrito posteriormente.
Resulta que de doctypes hay unos cuantos diferentes, con nombres muy complejos, y para muchos desarrolladores es un auténtico misterio saber cómo tratar este asunto. Hace tiempo se hizo un estudio en el que se analizaron 1.788.294 páginas web diferentes, donde encontraron 13.941 clases de doctype diferentes. Lo curioso del dato es ¡que no existían tantos doctype oficiales!
Esta característica que debemos definir antes de escribir el código no es más que una referencia para que el navegador sepa qué tipo de lenguaje vas a utilizar en la página. Es decir, una vez elegido el tipo de HTML que vayas a usar debes declararlo con la etiqueta <!DOCTYPE>.
Atención con la etiqueta que ésta va con signo de exclamación: <!DOCTYPE> (se puede escribir en minúsculas, pero se escribe en mayúsculas por compatibilidad con otros lenguajes).
Dentro de esta etiqueta (y no en el contenido del elemento) deberás escribir el código referente al tipo de HTML que vayas a usar:
- HTML4.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- XHTML1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- XHTML1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Pero mi favorito de todos es el de HTML5, que es fácil de recordar y dentro de poco será el que usaremos siempre:
<!DOCTYPE html>
Fíjate que no tiene una etiqueta de cierre ni termina con el cierre de la barra inclinada "/". La colocación correcta del doctype es en la primera lína de todo el código, antes de la etiqueta <html>.
<!DOCTYPE html>
<html>
...
</html>
Idioma de tu web
Es recomendable escribir siempre una aclaración del idioma en que va a estar la página web. Ésto permite al servidor conocer el idioma predeterminado de la página para que éste pueda trabajar mejor.
El atributo que se encarga de ello es lang="idioma" y para el castellano usamos el valor "es". La lista de valores para este atributo es extensa, y es muy probable que encuentres el idioma con el que quieras escribir tu web.
Juego de caracteres
No escoger un correcto juego de caracteres a la hora de desarrollar tu web puede crear grandes problemas. Es probable que algunos usuarios, por más que estén en un ordenador del mismo país que tú, no puedan leerla correctamente (o mejor dicho, como tu querias que se viese).
Lo más importante de todo es saber que debes escribir todos tus ficheros de la misma web con el mismo juego de caracteres (tus páginas html, css, los archivos de datos del servidor de producción, etc...). Pero realmente es algo muy difícil de conseguir.
Lo mejor que puedes hacer es asegurarte que siempre escribas todas tus páginas web con la codificación UTF-8 sin BOM (UTF-8 without BOM) que te permite mezclar en un mismo documento textos de cualquier idioma (y por lo tanto mezclar caracteres de todo tipo). En el caso de no poder usar UTF-8 sin BOM también puedes codificar en ISO-8859-1 (conocido como Latin1) que sirve para los idiomas de Europa Occidental, o si necesitas escribir el símbolo del euro "€" deberás hacerlo con ISO-8859-15 (Latin9).
A parte de todo lo comentado, también deberías hacer uso de un nuevo elemento HTML, la etiqueta <meta/>. Si en ella le ponemos el atributo charset="juego de caracteres" le estaremos indicando al servidor qué juego de caracteres será el necesario para los textos que deben salir en pantalla.
Los valores de este atributo son muchos en relación al tipo de HTML que usemos, pero actualmente vamos a trabajar en dirección al HTML5 ya que es un lenguaje que nos hace el trabajo más fácil, así que usaremos la etiqueta de la siguiente manera:
<meta charset="utf-8"/>
Así de sencillo.
Al ser una etiqueta meta, es decir, un metadato, deberemos escribirlo en el contenido del elemento "head".
<head>
<meta charset="utf-8"/>
</head>
En resumen: asegúrate de que tu editor de textos codifique ya de entrada tus textos en UTF-8 sin BOM, y si no lo hace combiertelos, y no olvides escribir en el código la etiqueta "meta" para declarar que usarás el juego de caracteres UTF-8.
Validación del código
Por último, y si ya tenemos tooodo nuestro sitio web desarrollado y diseñado (e incluso publicado) es el momento de la prueba del algodón.
La W3C ha creado una página web para poder validar tu código. Tan solo debemos escribir la URL o subir los archivos de tu web, y su programa estudiará el código para comprobar que no hay ningún error.
Si todo es correcto, saldrá un mensaje en color verde que dibujará una sonrisa en tu cara. Pero si detecta errores de código aparecerá un mensaje en rojo con el número de errores y advertencias.
Si no corriges estos es posible que los usuarios tengan problemas al visitar tu web por más que la veas correctamente desde tu casa.
No hay comentarios:
Publicar un comentario
RECUERDA: ésto no es ningún tutorial, pero estaré encantado de compartir información y ayudar en medida de lo posible a cualquiera :)