🌐 Introducción al Desarrollo Web: Juego de Caracters

Hola buenos dias mis queridos lectores, el día de hoy continuamos con el curso de Introducción al Desarrollo Web, es así que comentaremos hoy acerca del juego de caracteres, pero ¿Que rayos es esto?.

Bueno, antes que nada toda pagina web (e incluso todo programa hecho en cualquier código de programación) esta escrito en una codificación en especifica, la mas conocida entre la mayoría de quienes empiezan a programar es ASCII:

Tabla de Caracteres ASCII

Esta tabla de caracteres establece una correspondencia entre códigos numéricos y un símbolo correspondiente, es decir como una especie de lenguaje codificado (de allí el nombre) a este proceso de tomar una símbolo y usarlo para representar otro se le conoce como: La codificación de caracteres siendo este el método que convierte un carácter de un lenguaje natural en un símbolo de otro sistema de representación, como un número o en el caso de un ordenador una secuencia de unos y ceros. El juego de caracteres es la equivalencia carácter a carácter de la codificación de los caracteres de un lenguaje natural a un sistema de representación.

Ahora como siempre he dicho en mas de una entrada: 'La computadora es una tonta, eres tu el que le dice que hacer' y es que ellas no entienden nuestro lenguaje, ellas solo saben de 0s y 1s, es decir toda información que se guarda en la computadora no son mas que agrupaciones de esos dos números ¿Pero entonces como rayos yo veo una A y no 0s y 1s?

Para no hacer el cuento muy largo, cada letra que escribes por teclado representa un símbolo, cuando tu tecleas la 'A' por ejemplo, tu teclado manda una señal eléctrica a tu computadora, esta la recibe en forma de pulso eléctrico que reconoce como ceros y unos, estos mismos los va juntando hasta formar un byte de información (es decir un grupo de ocho 0s y 1s, esto por lo regular, recordemos las unidades de memoria) estos posteriormente son identificados por el sistema para la impresión de un carácter, en este caso la letra 'A' en el Juego de Caracteres ASCII es el numero 65 (es decir recibe el numero 1000001 binario, nosotros lo ponemos como 65 ya que es mas fácil para nosotros leerlo, ademas la computadora sola hace sus conversiones) en codificación binaria, es decir si la computadora recibe el numero 65 binario esta imprime la letra 'A'.

Y tu me preguntaras, bueno ¿Y que con esto Sherlok? pues el hecho es que el juego de caracteres en el que programes cualquier cosa importa mucho aunque no lo parezca (aunque a primera instancia no hagamos caso, en lo cual me incluyo) y mas si tu programa, pagina web o demás tiene que interactuar con diferentes agentes externos como Bases de Datos, Hojas de Estilo, Conexiones con el Servidor, enlace con otros lenguajes de programación etc.

El ejemplo mas sencillo que puedo darte, ¿Alguna vez te ha tocado la situación que muestro en la imagen de arriba? ¿Esa donde te aparecen caracteres raros al entrar a un sitio en internet? a mi si me ha pasado, o para quienes llevan mas tiempo programando y son latinos o hablan español, ¿Cuantas veces no nos hemos topado con el dilema de imprimir la letra Ñ correctamente en mas de un lenguaje? por ejemplo, la mas típica que me toca es cuando tengo que trabajar en consola con mysql y las letras con acentos y demás aparecen como caracteres raros. Esto se debe en parte por que tu estas usando un Juego de Caracteres mientras tu sistema utiliza otro, por ejemplo windows en su versión 1252 utiliza el juego de caracteres ISO-8859-1 el cual posee varios caracteres usados en Europa, es asi que mientras en ASCII el numero 164 binario representa la letra ñ en ISO-8859-1 representa un carácter totalmente distinto:

Por lo anterior es recomendable utilizar el mismo juego de caracteres en todos tus archivos y/o programas mientras sea posible (siempre tendremos el dilema de trabajar con elementos externos que no están a nuestro alcance).

¿Cuál juego de caracteres debo utilizar?

Actualmente existe una gran variedad de Juegos de Caracteres desde ANSII, UNICODE, LATIN-1, UTF8, etc, sin embargo yo en lo personal prefiero utilizar UTF8 sin BOM.

La verdad podría explicar por que pero dejare un video:

Ahora como explica el video es importante tener nuestro archivo con la codificación adecuada y especificar al lenguaje de programación en que Juego de caracteres estoy utilizando, dependiendo del lenguaje de programación que utilices esta especificación sera diferente, pero como aquí estamos tratando con Programación Web veamos como especificarlo en nuestros archivos HTML y Hoja de Estilos.

Para Archivos HTML:

Cuando especificamos la codificación en un archivo HTML debemos hacerlo dentro de la etiqueta meta:

Etiqueta <meta>:

Este tipo de etiquetas se incorporan en el encabezado de una página web y resultan invisibles para un visitante normal, pero de gran utilidad para navegadores u otros programas que puedan valerse de esta información.

Su propósito es el de incluir información (metadatos) de referencia sobre la página: autor, título, fecha, palabras clave, descripción, etc. Son muy importantes a la hora de posicionar tu pagina web pues de ellas se valen los robots de los motores de busqueda para indexar el contenido de un sitio web y posicionarlo en la pagina de resultados.

Esta etiqueta debe ser puesta dentro de la sección del encabezado y deberá tener un formato similar al siguiente:

<!Doctype html>
<html>

  <head>
         <meta charset="UTF-8">
         <title>Titulo de Pestaña</title>
  </head>

  <body>
    <p>Hola mundo</p>
    <p>Como estan todos, Bienvenidos a StudentPlace</p>
  </body>

</html>

Como podemos ver, en el atributo charset en comillas se especifica el Juego de Caracteres a Utilizar.

Para archivos de estilos CSS:

En el caso de la hojas de estilos CSS es mucho mas facil, solo es necesario agregar @charset 'juego a tlizar' al principio del archivo:

 
/*Inicio de archivo*/
@charset UTF-8;

/*Demas reglas*/

.body{
color:white;
}

Y por hoy es todo, espero les haya gustado la entrada, gracias.


Fuentes de referencia:
http://deteresa.com/etiquetas-meta/
http://desarrolloweb.dlsi.ua.es/libros/html-css/el-juego-de-caracteres
http://desarrolloweb.dlsi.ua.es/libros/html-css/como-indicar-el-juego-de-caracteres-en-una-hoja-de-estilo
http://www.mclibre.org/consultar/htmlcss/html/html-utf8.htmlhttps://elcodigoascii.com.ar
https://es.wikipedia.org/wiki/Etiqueta_meta

Notas: Esta información ademas esta basada en gran parte por el programa "Actívate, Google España", yo soy/fui alumno del programa para las fechas de redacción de la entrada, te recomiendo si deseas ampliar aun mas tu conocimiento inscribirte y/o checar sus cursos disponibles visitando su link: http://google.es/activate.