¿Quieres registrarte?

Configurar tu web para usar UTF-8

Por: gersonm
16 de Julio del 2007
1908 de clabLevel
Otros artículos de gersonm
51,955 visitas

El eterno problema de no ver los caracteres de nuestra aplicación web de la manera correcta (tildes, acentos, eñes) desde diferentes plataformas es algo que suele irritar a más de uno cuando se inicia en este desgraciado medio. Sin embargo, no os preocupéis, que desde hace un tiempo elaboramos una lista (salu2 charly!) explicando qué hacer y en dónde para que tanto en la aplicación como en la base de datos se usara UTF-8 para los juegos de caracteres.

He aquí los pasos a tener en cuenta:

1. Cabeceras


En la sección HEAD de la página se especificará el juego de caracteres a usar, lo que se logra escribiendo algo como

Código :

<HEAD>
 <meta name="tipo_contenido"  content="text/html;" http-equiv="content-type" charset="utf-8">
</HEAD>


2. Formularios


Los formularios de la aplicación deberán estar configurados para que los datos que procesen obedezcan a UTF-8, lo cual se hace agregando el parámetro accept-charset con el valor UTF-8:

Código :

<form name="formulario_usuario" method="post" accept-charset="UTF-8">


3. La base de datos


Los datos que se quieran convertir a UTF-8 desde una sentencia deberán obedecer a la siguiente sintaxis en una sentencia SQL (el ejemplo va con un INSERT):

Código :

INSERT INTO tabla VALUES (CONVERT(_latin1'Pepito Pérez' USING utf8), '1', md5("12345"));


Cabe aclarar que estas sentencias no funcionan al momento de hacer un dump desde consola ni por medio de una conexión al server. Usar entonces phpMyAdmin.

4. En el HTML


Para que nuestros textos estáticos muestren caracteres especiales sin problemas, es necesario que dichos caracteres sean escritos con su nombre HTML. Por ejemplo, las vocales minúsculas se escribirían de la sgte manera:

Código :

á => &aacute;
é => &eacute;
í => &iacute;
ó => &oacute;
ú => &uacute;

Para ver un listado completo pueden visitar este sitio, y una vez allí usen la columna HTML name.

5. JavaScript


Bueno, acá se sigue algo parecido al paso anterior (o al menos hasta que encontremos algo más decente). Se usa directamente el carácter en su formato UTF-8, de esta manera las vocales acentuadas y la ñ se ven así:

Código :

á => á
é => é
í => í
ó => ó
ú => ú

ñ => ñ


Espero que el FeedBack por parte de los clabers esté lleno de mejoras, en especial para el 5 punto.

Y en fin, como siempre, igualmente espero que le sea de utilidad a más de uno por ahí.

Enviar a twitter Enviar a facebook


También te interesa


Etiquetas mysql html

Comentarios | Enviar un comentario
Claro muy nesesario, muy buen tip.
Por: adgranados_blog
Ha que dolor de cabeza con los acentos y las ñs.. lo provare espero eso me aligere un poco la carga jajjajaja XD
Por: Erick Huezo_blog
quien conoce algun link para bajar objetos en 3d.(gratis)
Por: deniz
erm... en iso-8859-1 las vocales y ñ también se representan así y yo nunca tuve problema.
Por: tom_blog
Con respecto ha lo que tiene que ver con JavaScript, la solución planteada seria hacer el reemplazo de los acentos con su respectiva representación en UTF-8, pero seria tedioso si nuestro archivo .js tuviese demasiadas cadenas para reemplazar.

En fin, una solución utilizando el editor Notepad seria la siguiente: simplemente antes de iniciar a escribir un .js lo que se hace es cambiar el formato o codificar el archivo con UTF-8 y así podrás escribir común y corriente los acentos, ñ´s y demás caracteres si ningún problema. Bueno creo, que puede servir… además es un buen editor, chau.


Por: charly_blog
Muy buen tip, el uft-8 es uno de los recursos que mas uso, pero aun limito los demas tipos como utf-bl
Por: Victor-Nael
hola.

Otra forma es poner esto en tu archivo htaccess:

Código :

AddDefaultCharset utf-8


Además el maestro Dano en su momento me ayudó con utf-8 para mysql aquí.

Salu2.
Por: phpleo
Charly, te refieres a Notepad , y no a Notepad U_U
Por: Lunatic_blog
Y como veo que por alguna razón sale mal (bot?), asumo que charly lo colocó bien desde un principio, y se cambia solo U_U .

El programa se llama Notepad , o, por si acaso, NotepadPlusPlus, o NotepadMásMás
Por: Lunatic_blog
respecto al punto 4, la idea de utf8 es que escribas á y veas á no que tengas que escribir &aacute; , sino pa' que. Solo tienen que guardar el texto en utf8 y listo
si se fijan en http://www.minid.net/2005/05/24/utf-8-vale-la-pena/ el código fuente usa todos los caracteres como corresponde
En todo caso buen aporte el articulo. Saludos
Por: Chaval
Hola , tengo un problema con el UTF8 , no estoy seguro pero al principio me funcionaba correctamente , pero luego dejo de funcionar tengo esto en el meta:
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">

y cuando hago echo en php lo pongo asi

echo utf8_encode($rs_info['nombre']);
y me sale asi :

Proyect mund�n en Acci�n Navide�a.


Que es lo que esta pasando
Por: Mundix_blog
jajajajajaja veo que la mayotia usa firefox, no tarda en caer explorer jajajaj.
Por: Verstop3
Mundix_blog es <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Por: Chaval_blog
hola gente, antes del string sql deben poner asi
mysql_query("SET NAMES utf8");

//o sea que quedaria de esta forma

mysql_query("SET NAMES utf8");
$sql = "select * FROM menu";
$res = mysql_query($sql);

saludos y espero les sirva
Por: aldo damianovich_blog
Tengo un gran problema tengo un sitio antiguo que esta escrito en ISO-8859 ahora que estoy con los blogs(wordpress) y uso UTF-8 tengo dolores de cabeza para usar informacion de mi sitio antiguo que es puro html, al copiarlo al editor de wordpress mantiene el formato ISO-8859 aunque puedo verlo perfectamente en en mi pagina web en todos los demas servicios technorati google blogs blogalaxia y todos los demas se desconfigura totalmente
Por: Fernando Salinas_blog
Espero que funcione lo que lei lo del UTF-8 o sino mi cabeza rodara
Por: yo_blog
hola a todo, yo tengo un inconveniente, resulta que tengo la base de datos en postgresql y esta codificada en UTF8 y gurdo informacion que tiene las tildes en html como hago para cambiar la codificacion de la base de datos com phppgadmin.
o alguna solucion a este problema.

gracia por su ayuda.
Por: willloo_blog
tengo una base de datos en mysql en utf8 puesto en la base de datos, tablas y columnas, cuando pongo en el head del HTML <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">, me sale los textos que levanta de mi base de datos en los acentos Ej: l
Por: Tengo problemas con el UT
Yo tenia el mismo problema lo que hice fue agregar a las paginas
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
y en los campos escoger la codificacion utf8_bin
Por: Dario_blog
Lo mejor mejor mejor es usar el metodo de convertir TOODO a entidades HTML , eso incluye cualquier simbolo raro, tildes, ®, Arrobas, etc, etc

á =>
Por: Hely_blog
Trabajo con ASP y SQL 2005 de microsoft, pero no encuentro la manera de guardar los datos con codificaión UTF-8, poniendo encabezado <%@ CODEPAGE="65001" %> y content="text/html; charset=utf-8", al guardar y consultar, me aparecen ????????????, alguien encontro la manera de solucionarlo?
Por: Argento -blog
necesito las opciones que se pueden aplicar sobre el teto(sentencia de texto) en la creacion de una pagina web
Por: celeste siles-blog
aplicar sobre el TEXTO
Por: celeste-blog
Quiero crear una asociación de damnificados por el código utf8. Si queréis apoyar el movimiento escribir a noalutf8@gmail.com
Por: Muerte al utf8-blog
necesitan guardar el archivo en formato utf8, no solo poner las correspondientes funciones y/o etiquetas y setear las bases de datos y tablas con codificacion utf8. Si alguna de esas cosas falla, falla todo
Por: Chaval-blog

JavaScript


Código :

á   =>   Ã¡
À   =>   Ã€
ä   =>   Ã¤
é   =>   Ã©
è   =>   Ã¨
É   =>   Ã‰
ê   =>   Ãª
æ   =>   Ã¦
í   =>   Ã*
ó   =>   Ã³
Ó   =>   Ã“
ö   =>   Ã¶
ú   =>   Ãº
ü   =>   Ã¼
ñ   =>   Ã±
Ñ   =>   Ã‘
ç   =>   Ã§


Por: gabynufe
Colegas no entiendo de estas cosas y quiero aprender.Solo comentar que he visto en la calle propaganda del instituto Vista Alegre tfno 91-462-86-00 donde se imparten ciclos de informática GRATUITOS en turno de tarde durante dos años y que luego se encuentra curre. Yo me he matriculado, y están muy bien. Todavía les quedan plazas.
Por: luis-blog
Muchas gracías!!! Dios te bendiga :)
Por: Gabriel-blog
Hola, recibi un mail con un codigo de barras codificado en UTF-8 y no puedo verlo. Que debo hacer?
Por: Rudolf-blog
Para estandarizar JavaScript con una correcta codificación es necesario que el encabezado html (meta) especifique el formato UTF-8, el archivo JavaScript este codificado en formato UTF-8 y no es necesario colocar caracteres raros (codificados) solo hazlo de forma natural.

el único problema de esto es que los POST no se codifican correctamente y los envía como latin1 (ISO-8859-1) aunque uno configure el browser a UTF-8 y apache a UTF-8 y la base de datos a UTF-8

la única solución aparente es haciendo la codificación antes de pasarlo a SQL o mediante SQL

a mi parecer es mejor hacerlo antes de SQL en codigo PHP u otro scripting ya que asi no limitamos nuestro software a ocupar una base de datos UTF-8, sino que será multicodificación, solo basta definir una variable de entorno que especifique la codificación a usar por el sistema de base de datos y una función que permita esta conversión previa antes de enviar la consulta SQL.
Por: rdcklinux-blog
function espanol($texto) //REPARA CUALQUIER TEXTO A UTF-8
{
$texto = htmlentities($texto , ENT_QUOTES); //No permite codigo HTML
$texto = str_replace("\r","<br />",$texto); //Asignar codigo espacios
$texto = utf8_encode($texto); //ENCODE A UTF-8
$texto = iconv("ISO-8859-1" , "UTF-8", $texto); // Convierte ISO-8859-1 UTF-8
return $texto;
}

trabajando con utf-8 me cree mi propia funcion para reparar los textos

hasta el momento me esta funcuionando re bien para imprimir texto en php

saludo!!!!
Por: shiizpa-blog
esta bien el foro
Por: naf-blog
En lo unico que no concuerdo contigo, es que este medio (web design) sea desgraciado.

Para mi es lo más agraciado que he podido conocer.
Por: Laren-blog
no he tenido tiempo de ver los mensajes anteriores, creo que el punto es utilizar utf-8 en nuestras paginas web, probe el encabezado que esta en el incio y no me funciono, algo he de tener mal... sin embargo este encabezado si funciono...
<meta http-equiv="content-type" content="text/html; charset=utf-8">

colocarlo como el anterior en el head y listo espero les sirva

saludos...
Por: viewer-blog
recuerder cerrar los meta

no asi
<meta http-equiv="content-type" content="text/html; charset=utf-8">

asi
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

xhtml
Por: shiizpa-blog
Excelente articulo, me ayudo mucho en especial el anexo de shiizpa-blog :)
Por: Carlos Molina (yolive.net
bien bien esto es muy importante ¡
Por: jacr1102
Muchas gracias, estaba buscando algo como esto:

á => á
é => é
í => í
ó => ó
ú => ú

ñ => ñ
Por: Paco-blog
pues a mi me funciono muy bien... gracias cristalab me salvaste la vida otra vez
Por: papanitas-blog
porq sale -blog luego de poner mi nombre para comentar
Por: porq sale -blog en mi nom
pues al generar mi bd mysql agregue la linea CHARACTER SET utf8 COLLATE utf8_general_ci en las paginas coloco en el head las linea para el utf8 ademas coloque la linea mysqli_query ("SET NAMES UTF8"); despues de hacer la conexion a la bd y resulta que cuando inserto una ñ en la bd se almacena como ñ. me estoy volviendo loco agradezco que alguien me explique que puede estar pasando
Por: furia-blog
lo andaba buscando y agregado a mis marcadores por que grasias eso solucione mis problemas de texto un poco ilegible en mi foro
Por: alexi-blog
Deja un comentario
IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.