¿Por qué salen caracteres extraños en mi código?

Escrito por Alberto Quintero el Domingo, 25 Julio 2010. Categoría Blog

Como solucionar de una vez los caracteres extraños en el código

En muchas ocasiones nos encontramos con el problema de tener caracteres extraños dentro del código HTML. Unas veces éstos se muestran solo en pantalla, otras solo después de hacer una consulta a la base de datos, otras cuando recuperamos datos mediante ajax, otras en los mensajes que lanzamos al usuario vía Javascript, y en otros casos, los caracteres extraños se muestran únicamente dentro del código fuente, en por ejemplo los comentarios dentro del código HTML.

Todos estos problemas tienen un común denominador el caracter: "�" u otros caracteres parecidos, aunque no todos estos problemas tienen la misma causa, e incluso algunos de ellos tienen varias causas al mismo tiempo. Pero desgranemos cada una de estas causas... como decía Jack el destripador, vayamos por partes...

Caracteres extraños dentro del código HTML

En este caso la aparición de caracteres extraños puede tener que ver con:

  • El tipo de codificación o charset que estemos utilizando,
  • El tipo de codificación del fichero que estemos mostrando en pantalla,
  • Los caracteres especiales que use el documento.

En principio, el tipo de codificación por defecto que suelen aplicar todos los programas tipo dreamweaver, panic coda, textmate, etc... es la iso-8859-1, es decir, si echamos un vistazo al código podremos ver escrita una meta como esta:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</head>

Aunque en la actualidad, por razones de compatibilidad con la máxima cantidad de idiomas, existe la tendencia a utilizar la codificación (charset) UTF-8, este tipo de charset (iso-8859-1) en la meta no debería de darnos problemas, a no ser que nuestra página fuera en japonés, en cuyo caso, si deberíamos utilizar la codificación UTF-8, o si o SI. La causa de los caracteres extraños por tanto estará, en la interpretación que el navegador haga de lo que recibe del servidor a través de la cabecera HTTP, y las palabras dentro del texto mostrado.

Los navegadores modernos no utilizan por defecto ninguna codificación, aunque si utilizan UTF-8 en todas las urls o variables que se pasan por la url. Sin embargo, en algunos navegadores más antiguos, caracteres como la Ñ, o las distintas tildes, aún hacen que se muestren los caracteres extraños.

SOLUCIÓN: utilizar lo que se llama caracteres especiales. Por ejemplo, en el caso de la ñ utilizaríamos algo como: &ntilde; o en el caso de la á acentuada utilizaríamos &aacute;.

La mayoría de programas para escribir código HTML convierten, incluso de manera automática como dreamweaver, los caracteres especiales. No obstante, a continuación una pequeña lista de caracteres especiales que puedes emplear en tus texto:

&Aacute; Á | &Agrave; À &Eacute; É | &Egrave; È &Iacute; Í | &Igrave; Ì &Oacute; Ó | &Ograve; Ò &Uacute; Ú | &Ugrave; Ù &aacute; á | &agrave; à &eacute; é | &egrave; è &iacute; í | &igrave; ì &oacute; ó | &ograve; ò &uacute; ú | &ugrave; ù &frac14; ¼ &nbsp; &frac12; ½ | &iexcl; ¡ &frac34; ¾ | &pound; £ &copy; © | &yen; ¥ &reg; ® | &sect; § &ordf; ª | &curren; ¤ &sup2; ² | &brvbar; ¦ &sup3; ³ | &laquo; « &sup1; ¹ | &not; ¬ &macr; ¯ | &shy; ­ &micro; µ | &ordm; º &para; ¶ | &acute; ´ &middot; · | &uml; ¨ &deg; ° | &plusmn; ± &cedil; ¸ | &raquo; » &iquest; ¿ &times; × | &cent; ¢ &divide; ÷ | &euro; € &#147;; “ | &#153; ™ &#148; ” | &#137; ‰ &#140; Œ | &#131; ƒ &#135; ‡ | &#134; †

Existe otra manera más de escribir caracteres especiales, y es mediante código ASCII, que es exactamente la única manera en la que podemos escribir &ntilde; para que se vea en pantalla tal cual, sin que sea interpretada directamente como Ñ por el navegador. El código ASCII se utiliza también para escribir las etiquetas HTML, por ejemplo, para dar instrucciones al usuario sobre que tipo de código utilizar para insertar algo de código, sin que igualmente sean interpretadas directamente por el navegador como tales etiquetas. En este link podrás encontrar una lista completa de caracteres en código ASCII.

Caracteres extraños procedentes de una consulta a la base de datos

En este caso...

Caracteres extraños en los mensajes Pop-Up que lanzamos al usuario por JavaScript

En este caso...

Caracteres extraños en los textos recogidos vía AJAX

En este caso...

Caracteres extraños dentro del código fuente

En este caso...

Redes Sociales

Acerca del Autor

Alberto Quintero

Me llamo Alberto Quintero y soy la persona que está detrás de este blog. Llegué al mundo de la programación y el diseño web tras ser engañado por un webmaster, que se quedó con todo mi dinero y me dejó sin web, lo que propició que me pusiera a estudiar los distintos lenguajes de programación para poder hacérmela yo mismo. [...]

Comentarios (0)

Deje un comentario

Por favor autentifíquese para dejar un comentario. Autentificación opcional debajo.

Buscador

Formulario Registro



Datos Contacto:

Barcelona España
Tlfno: (644) 422 182
E-mail: alberto@antimatter-studios.es

Conocimientos

Sistemas de Manejo de Contenidos (CMS); XHTML, Maquetación (CSS);
Javascript; PHP; Optimización Buscadores (SEO); AJAX; MooTools, JQuery, XML

Copyright © 2012 by TONOPRO Music, S.L. Todos los derechos reservados.