Codificación HTML 5 x utf 8. ¿En qué codificación guardar una página web?
Aquellos con sitios más antiguos pueden encontrar un problema tal que necesiten convertir los archivos a codificación UTF-8. Puedo llamarme con seguridad uno de ellos. Empecé a crear sitios web hace más de 10 años, cuando se sabía poco sobre esta codificación. En todas las páginas tenía la siguiente codificación:
Con el paso de los años, algunos de mis sitios han crecido hasta tener mil o más páginas y no tengo el tiempo ni la energía para rehacer todas esas mil mil páginas.
Ya no escriben así. Lo antiguo ha sido reemplazado por lo nuevo: HTML5, donde debes escribir:
Para ser honesto, todavía decidí palear todo manualmente y así me sucedió a mí:
- Abrió el archivo en Notepad++.
- Resaltó el texto del mensaje.
- Copié todo el texto.
- Codificación convertida a UTF-8
- Texto pegado
- Lo verifiqué nuevamente: ¿está en la codificación correcta?
- Guardó el archivo
Y durante dos días estuve trabajando en uno de mis sitios web.
Por supuesto, no puedes cambiar nada. Pero mis sitios antiguos están desactualizados desde hace mucho tiempo, necesito transferirlos a un diseño HTML5 y CSS3 moderno, además de un diseño móvil y adaptable. Y es mejor hacer esto en programas más avanzados y no en Notepad++.
En resumen, estaba deprimido. ¡Sin embargo, llegó el hijo programador y decidió todo!
Resulta que todo ya está inventado hace mucho tiempo. Y si tienes el mismo problema, ¡no te desesperes! Existe un excelente programa UTFCast Express.
Este programa se puede descargar aquí: http://www.rotatingscrew.com/utfcast-express.aspx. Este es un programa shareware que puede convertir texto de diferentes codificaciones a utf8. Disponible para sistemas operativos Windows.
Inicie UTFCast Express e indique las rutas correctas: en la parte superior, qué convertir, en la parte inferior, dónde colocar los archivos convertidos. Solo necesita seleccionar los directorios necesarios, el programa mismo transcodificará todos los archivos necesarios de la carpeta. Haga clic en "Iniciar".
Lo único es crear una nueva carpeta con anticipación, donde el programa cargará todos tus archivos desde la carpeta deseada.
No olvide marcar también la casilla de verificación "Copiar sin convertir". Haga clic en el botón "Inicio" y el programa estará funcionando.
¡Solo un par de minutos y todos los archivos se recodificaron mágicamente en la codificación deseada!
¡Puedes simplemente eliminar la carpeta con los archivos anteriores para no ocupar espacio y seguir trabajando! ¡Adelante a nuevas alturas!
¡¡¡Hurra camaradas!!!
¿Qué es UTF-8 de todos modos?
Tenga en cuenta que UTF-8 debe escribirse en mayúsculas y separado por un guión, es decir, no debe haber utf-8, utf8 ni UTF8. ¡Escribe correctamente!
UTF-8 (del formato de transformación Unicode en inglés, 8 bits - "formato de transformación Unicode, 8 bits") es una de las codificaciones de texto estandarizadas y generalmente aceptadas, que le permite almacenar caracteres Unicode utilizando un número variable de bytes ( del 1 al 6).
El estándar UTF-8 está oficialmente consagrado en RFC 3629 e ISO/IEC 10646 Anexo D. La codificación se usa ampliamente en sistemas operativos tipo UNIX y en la web. El formato UTF-8 en sí fue inventado el 2 de septiembre de 1992 por Ken Thompson y Rob Pike e implementado en Plan 9. La lista de materiales utiliza la secuencia de bytes EF16, BB16, BF16 (que a su vez es una implementación de tres bytes del carácter FEFF16). .
Una ventaja es la compatibilidad con ASCII: cualquiera de sus caracteres de 7 bits se muestra tal cual y el resto produce basura (ruido) para el usuario. Por lo tanto, si las letras latinas y los signos de puntuación simples (incluidos los espacios) ocupan una cantidad significativa de texto, UTF-8 proporciona una ganancia de volumen en comparación con UTF-16.
En este artículo, intentaré poner los puntos en todas las “íes” (así como en las “íes”) cuando se trata de elegir la codificación para la página HTML que se está creando.
Cuando comencé a crear sitios web, constantemente tenía problemas con estas codificaciones. Guardas la página HTML, la subes al servidor, la abres, haces clic y hay algunas tonterías. Bueno, hola, ya llegamos.
O en el entorno de depuración (por ejemplo, el entorno de desarrollo local "") todo está bien, pero desde el hosting nuevamente ellos, malditos bastardos, me miran descaradamente.
Hubo mucho dolor con los motores. De repente, por alguna razón desconocida, las letras rusas nativas se convierten en...
Ahora trataremos este asunto en detalle y sabrás claramente ¿En qué codificación guardar la página HTML? Y a través de qué instrumentos.
Para fortalecer nuestro entendimiento mutuo, definamos el concepto. codificación. Entonces, codificación es una tabla de correspondencia entre códigos de máquina y caracteres alfabéticos. Existe una secuencia de símbolos de máquina que una computadora inteligente, de acuerdo con la tabla de códigos seleccionada, reemplaza con letras que entendemos.
En los años 90 del siglo pasado (qué antigüedad, y todavía recuerdo el calendario de 1991 en la pared) había 4 codificaciones para PC y una más, propia, para Mac. La ironía del destino es que en todas estas codificaciones los caracteres latinos se relacionaron con códigos de máquina utilizando el mismo algoritmo, pero con respecto al alfabeto cirílico, cada una de las codificaciones tenía su propia opinión.
Toda esta confusión llevó a la aparición de krakozyabrs. Por ejemplo, si la palabra " Pregunta", escrito en codificación windows-1251, se muestra en codificación KOI8-R, aparece la palabra " bNOPNYA».
Gracias a Dios, los años 90 ya quedaron muy atrás y de cinco codificaciones delirantes sólo quedan dos normales. Pero esto es suficiente para que un webmaster novato se pierda entre dos pinos. Está bien, no te preocupes, ¡ahora te sacaré de este bosque!
Actualmente la elección para Codificación de documentos HTML se encuentra entre windows-1251 y utf-8. Y ahora atención: utf-8 es mucho más rico, más poderoso y el futuro está en él. Entonces guardaremos nuestros archivos HTML en utf-8.
Justificaré mis palabras ;). UTF-8 contiene caracteres como →
←
↓. Y en windws-1251, en lugar de estos símbolos, esto es: >
Espero haberte convencido y usarás Unicode (por cierto, “utf-8” y “Unicode” son sinónimos o, para ser más precisos, utf-8 es una de las codificaciones de la familia Unicode, que tiene ganó popularidad entre los desarrolladores web).
Ahora echemos un vistazo más de cerca a las herramientas de transcodificación de archivos que le recomiendo utilizar, querido lector.
Herramientas para trabajar con codificaciones de archivos HTML
En realidad, sólo hay tres de ellos:
- PSPad. Editor de texto gratuito, mi favorito.
- . Otro buen editor de texto y además gratuito.
- Tejedor de sueños. Bueno, estás familiarizado con Dreamweaver por mi .
Cargamos algún archivo HTML en el PSPad.¿Y cómo podemos entender qué tipo de codificación tiene el sujeto experimental cargado? Muy simple, todo está claramente escrito en la barra de estado (abajo).
Abrir archivo HTML codificando windows-1251
Ahora, al crear un nuevo documento HTML, cuidemos su codificación.
Vamos a mi menú favorito. PS Pad. Estamos interesados en el artículo. Formato. En él marcaremos la casilla junto a la codificación utf-8.
Y entonces la codificación del archivo futuro es windows-1251.
Ahora sobre como cambiar la codificación del archivo HTML. Sí, resulta muy sencillo:
Debe hacer clic en la codificación requerida en el elemento del menú. Formato y la codificación cambiará. Después de eso, guarde el archivo, se recodifica y el trabajo está hecho.
Acerca de Bloc de notas++ Todo es muy similar a la situación descrita anteriormente. Solo para trabajar con codificaciones necesitas usar el elemento del menú. Codificaciones.
La única diferencia es que en el caso de Notepad++, aparecen elementos de menú que están especialmente diseñados para la conversión de codificación. Convertir... (innecesario en mi opinión, todo es más sencillo en la PSPad y por eso lo uso). En consecuencia, estos son en los que debe hacer clic si desea cambiar las codificaciones de nuestro archivo HTML.
Entre otras cosas, al guardar en utf-8 tenemos una opción: sin lista de materiales o con lista de materiales. Nosotros, como webmasters, necesitamos utilizar codificación. UTF-8 (sin lista de materiales).
Esto es lo que Wikipedia responderá a la pregunta "¿qué es BOM?"
Para determinar el formato de representación Unicode en un archivo de texto, se utiliza una técnica en la que el carácter U+FEFF (espacio sin separación de ancho cero), también llamado marca de orden de bytes (BOM), se escribe al principio del texto. . Este método diferencia entre UTF-16LE y UTF-16BE porque el carácter U+FFFE no existe. En ocasiones también se utiliza para referirse al formato UTF-8, aunque el concepto de orden de bytes no se aplica a este formato.
Si lees el texto anterior 10 veces y te rascas la cabeza, queda claro: para utf-8 BOM NO necesitamos. Además, si guarda un archivo con un script php en la codificación utf-8 con lista de materiales, entonces no funcionará, porque el controlador no entenderá qué tipo de tonterías están escritas al principio del archivo de script (me refiero a ese espacio sin separación con ancho cero).
Bueno, bueno, solo queda mirar más de cerca. tejedor de sueños.
Al crear un archivo nuevo, preste atención a la codificación en la que se creará. Para hacer esto, en la ventana para crear un nuevo documento. Archivo → Nuevo (Ctrl+N) usa el botón Preferencias...
Y mire lo que está configurado como codificación predeterminada:
Codificación predeterminada del archivo HTML generado en Dreamweaver
Transcodificar un archivo HTML abierto en Dreamweaver posible en el dialogo Propiedades de página, que se inicia desde el menú Modificar → Propiedades de página (Ctrl + J).
Seleccione la codificación requerida, presione DE ACUERDO y eso es todo, la tarea de transcodificación se completa (pero la lista de materiales aún es innecesaria, no marque la casilla).
Detección de codificación del navegador
Entonces, nuestro archivo HTML se guarda en la codificación que hemos elegido. Ahora veamos la pregunta: ¿Cómo sabe el navegador acerca de la codificación utilizada en un archivo HTML determinado?
Hay tres opciones aquí:
1. Nosotros mismos le indicamos al navegador qué codificación está configurada para este archivo HTML. Esto se hace usando la etiqueta META.
El ejemplo anterior indica al navegador que el archivo HTML descargado se guarda en codificación utf-8.
Si el archivo HTML se guarda con codificación Windows-1251, entonces:
Por cierto, al transcodificar archivos, no olvide cambiar las directivas en la etiqueta META por las actuales. Dreamweaver, al cambiar la codificación, lo hace automáticamente, pero en otros editores de texto usted mismo debe hacer coincidir la codificación aplicada y la directiva de etiqueta META.
El HTML completo se ve así (lo cito para entender la pregunta "¿dónde está indicada la etiqueta META con la directiva de codificación?", preste atención a la cuarta línea):
2. Usando el archivo .htaccess. A veces, el servidor fuerza los encabezados de los archivos HTML descargados y le indica al navegador la codificación predeterminada. En este caso, el navegador no presta atención a las directivas de la etiqueta META, sino que muestra el archivo HTML en la codificación informada por el servidor. Para que el archivo se descargue con la codificación que necesita (a menudo el hosting le obliga a especificar la codificación windows-1251), se crea un archivo llamado ".htaccess" en la raíz del directorio de hosting.
Este archivo está destinado a la configuración adicional del servidor. El efecto de las directivas .htaccess se aplica a todos los archivos y subdirectorios que se encuentran en el directorio donde guardó el archivo .htaccess.
Puede crear este archivo, por ejemplo, en Total Commander presionando la combinación de teclas de acceso rápido Mayús+F4 y especificando el nombre del archivo creado .htaccess. A continuación, el editor de texto especifica directivas para configuraciones de codificación predeterminadas adicionales.
Para archivos HTML codificados en utf-8 en .htaccess necesitas escribir una línea:
Agregar conjunto de caracteres predeterminado UTF-8
Para archivos HTML con codificación Windows-1251:
Agregar conjunto de caracteres predeterminadoWindows-1251
Si su hosting es astutamente inteligente y no presta atención a estas directivas, entonces puede intentar:
Charsetdisable activado AddDefaultCharset desactivado
Si esto no funciona, pregúntale a tu proveedor de alojamiento qué debes hacer para desactivar la codificación predeterminada :). Todo esto depende de la configuración específica del servidor del proveedor de hosting.
3. Instrucción PHP que especifica la codificación predeterminada. En el archivo que debe mostrarse en la codificación deseada, a pesar de la configuración del servidor del proveedor de hosting, al principio se indica una directiva con código php:
Este código php enviará un encabezado del servidor indicando la codificación predeterminada del navegador. En el ejemplo anterior, se utilizará la codificación utf-8 para mostrar la página.
Por lo general, no hay trucos en la configuración del servidor del proveedor de alojamiento para lidiar con ese tipo de basura.
Me gustaría señalar que para que el servidor procese instrucciones PHP, el archivo html debe tener la extensión .php(por ejemplo index.php).
¿Tiene alguna otra pregunta sobre codificaciones? Escribe en los comentarios. Necesitamos resolver estos problemas de una vez por todas :)
Uno de los problemas más comunes que enfrenta un principiante. Webmaster(y no sólo principiantes), esto problemas con la codificación en el sitio. Incluso a mí me aparece constantemente al crear sitios web" abracadabra"Pero, afortunadamente, sé perfectamente cómo solucionar este problema, así que puse todo en orden en unos segundos. Y en este artículo intentaré enseñarte con la misma rapidez. resolver problemas relacionados con la codificación en el sitio.
Lo primero que vale la pena señalar es que todos los problemas con la aparición de "abracadabra" están asociados con una falta de coincidencia entre la codificación del documento y la codificación establecida por el navegador. Digamos un documento en ventanas-1251, pero por alguna razón el navegador muestra UTF-8. Y la fuente de tal discrepancia pueden ser las siguientes razones.
Primera razón
La metaetiqueta está escrita incorrectamente. tipo de contenido. Ojo, siempre debe contener la codificación en la que está escrito tu documento.
Segunda razón
Parece que la metaetiqueta está escrita de la manera deseada y el navegador muestra exactamente lo que desea, pero por alguna razón todavía hay problemas con la codificación. Es casi seguro que el culpable aquí es que el documento en sí tiene una codificación diferente. Si trabajas en Bloc de notas++, luego en la parte inferior derecha está el nombre de la codificación del documento actual (por ejemplo, ANSI). Si pones una metaetiqueta UTF-8, y el documento en sí está escrito en ANSI, luego haz la conversión a UTF-8(a través del menú " Codificaciones"y punto" Convertir a UTF-8 sin BOM").
Tercera razón
Cuarta razón
Y finalmente, la última razón popular es problema de codificación de base de datos. Primero, asegúrese de que todas sus tablas y campos estén escritos con la misma codificación, que coincida con la codificación del resto del sitio. Si esto no ayuda, inmediatamente después de conectarse en el script, ejecute la siguiente solicitud:
ESTABLECER NOMBRES "utf8"
En lugar de " utf8" puede haber una codificación diferente. Después de eso, todos los datos de la base de datos deberían aparecer con la codificación correcta.
En este artículo, espero haber explicado, como mínimo, El 90% de los problemas están asociados con la aparición de "galimatías" en el sitio.. Ahora tienes que lidiar con un problema tan popular y simple como la codificación incorrecta en poco tiempo.
). Y aquí hablaremos sobre el lado práctico del uso de UTF‑8.
Ventaja principal
Con la codificación UTF-8, puede incluir directamente cualquier carácter de todo el conjunto Unicode en su documento. Las codificaciones heredadas (como Windows-1251 o KOI8-R) no proporcionaban más de 256 caracteres, pero Unicode tiene más de 100.000 caracteres. Entre ellos se encuentran marcas tipográficas (guión, comillas, elipsis, apóstrofe, espacio no separable, guión no separable, etc.), caracteres especiales (№, §, ©, ‰, ×, etc.), letras con signos diacríticos y ligaduras (é, è, Ü, Æ, ø, fi, etc.), símbolos de casi todos los alfabetos existentes en el mundo (α, Ω, א, ת, ѣ, 伲, 儻, etc.), pictogramas e iconos ( →, ■, , ☺ etc.) y muchos otros símbolos.
Mire la “Tabla de símbolos” en su computadora. Con la codificación UTF-8, puedes tomar cualquier carácter directamente de esta tabla y pegarlo directamente en tu documento. Si necesita un signo de derechos de autor, un título o un signo integral, no necesita buscar una fuente especial, presentar este signo en un formato gráfico ni idear ningún otro truco. En la codificación UTF-8, cualquier carácter, ya sea una fracción ⅓ o un carácter chino, se puede utilizar en un documento de la misma manera que la letra latina “A”, la “ы” rusa o el signo “+”.
En codificaciones más antiguas, era posible insertar caracteres especiales en un documento mediante sustituciones ( referencias). Por ejemplo, el guión em correspondía a la sustitución & mdash;
(también & # 8212 ; o & # x2014 ; ), y se sustituye la letra griega "pi" & pi ;
(también & # 960; o & # x3c0; ). Para la mayoría de los caracteres solo hubo sustituciones numéricas: por ejemplo, para la fracción ⅓ - & # 8531 ;
Habiendo discutido las ventajas de UTF-8, valdría la pena hablar de las desventajas de esta codificación. E imagina, ella no tiene defectos. Sólo hay mitos y leyendas, así como rumores y especulaciones difundidas por conservadores musgosos y retrógrados. Hace muchos años existían algunas deficiencias, pero ahora han caído en el olvido.
¿Los navegadores no soportan bien UTF-8?
Se dice que algunos usuarios todavía tienen navegadores antiguos que no son capaces de representar páginas en UTF-8. Esto es una completa tontería. Incluso Internet Explorer 4 y Netscape 4, que nadie utiliza desde hace mucho tiempo, entienden perfectamente UTF-8. Y los navegadores más modernos, aún más.
UTF-8 no es en absoluto una codificación “novedosa” o “joven”; se ha utilizado con éxito durante más de diez años. Si un desarrollador se enteró recientemente o aún no lo sabe, es una falta de sus calificaciones, no de su codificación.
¿Tiene problemas con UTF-8 en su servidor web?
"Puse una página en UTF-8 en el servidor, pero se muestra desordenada", así se quejan a veces los desarrolladores novatos. De hecho, este problema ocurre con una amplia variedad de codificaciones y no está relacionado con ninguna característica específica de UTF-8. El problema aquí es que la página está creada con una codificación y el servidor informa otra en los encabezados HTTP. Es necesario alinear la configuración del servidor con la codificación real de las páginas web. Repito que esto debe hacerse con cualquier codificación.
¿Los archivos UTF‑8 ocupan mucho espacio?
Dicen que los documentos en UTF-8 son el doble de grandes que en codificaciones más antiguas. Este es un mito de la categoría "Escuché un timbre, pero no sé dónde está". De hecho, no es necesario de vez en cuando. Por ejemplo, si un documento consta únicamente de caracteres ASCII (letras latinas, números, signos de puntuación, etc.), en la codificación UTF-8 ocupará exactamente la misma cantidad de bytes que en cualquier otro. Si un documento contiene sólo letras del alfabeto ruso y ningún otro carácter (lo cual, como ve, es bastante raro), entonces en UTF-8 su tamaño será el doble. Y si, por ejemplo, contiene el mismo número de letras rusas y árabes, en UTF-8 será la mitad que, por ejemplo, en Windows-1251 o Asmo-708.
La misma página que estás leyendo ahora tiene 35 kilobytes en codificación UTF-8. Y si lo traduces, por ejemplo, a Windows-1251, ocupará 26 kilobytes. Por cierto, al comparar páginas, vea cuánto más fácil es leer el código en UTF-8.
Cuando se habla del “peso” de las páginas web, cabe señalar que la mayor parte de este peso no suele ser código HTML, sino imágenes. (Y también, posiblemente, otros objetos: películas Flash, archivos JavaScript, etc.) Como resultado, incluso en los casos en que un documento UTF-8 está ampliado, es casi imperceptible en la cantidad total de datos. En mi opinión, hacer que el código se "hinche" en un pequeño porcentaje es un precio barato a pagar por el UTF-8 con el que empezamos.
Aquellos a quienes les importa el peso deben eliminar primero los atributos HTML heredados (como cellpadding o valign) y los comodines para caracteres que no los necesitan (como & mdash ; para el guión largo o & nbsp; para espacios sin separación). De hecho, a veces llega al punto de la locura - alguien insiste: "No haré páginas en UTF-8, porque las hace más grandes" - y al mismo tiempo crea código con terribles atributos y sustituciones, que sin ellos podría ser cinco veces más corto.
¿Los lenguajes de programación del lado del servidor y las bases de datos no son compatibles con UTF-8?
Alguien dirá: “Todo esto está bien siempre que se trate de páginas web estáticas. Pero si usamos PHP y MySQL, es mejor olvidarnos de UTF-8”. Esto tampoco es cierto. De hecho, en la antigüedad, algunos lenguajes de programación y sistemas de gestión de bases de datos no podían funcionar con UTF-8. Pero ahora todos los lenguajes de programación y bases de datos modernos mantienen excelentes relaciones con esta codificación. Pero no deberías utilizar lenguajes y bases de datos obsoletos: cuanto más antiguos sean tus sistemas, más fácil será hackearlos.
Sin embargo, no olvides que el mundo cambia constantemente. Quizás en el futuro surjan razones que nos obliguen a abandonar UTF-8 y cambiar a alguna codificación aún más avanzada. Cuando esto suceda, definitivamente te lo haré saber.
La razón para entender cómo funciona UTF-8 y qué es Unicode es el hecho de que VBScript no tiene funciones integradas para trabajar con UTF-8. Y como no pude encontrar nada que funcionara, tuve que escribirlo/terminarlo yo mismo. En mi opinión, la experiencia es útil en cualquier caso. Para una mejor comprensión, comenzaré con la teoría.
Acerca de Unicode
Antes de la llegada de Unicode, se utilizaban ampliamente codificaciones de 8 bits, cuyas principales desventajas son obvias:- Sólo hay 255 caracteres, y aun así algunos de ellos no son gráficos;
- La capacidad de abrir un documento con una codificación diferente a aquella en la que fue creado;
- Se deben crear fuentes para cada codificación.
Acerca de UTF-8
Una vez pensé que existe Unicode y UTF-8. Más tarde descubrí que estaba equivocado.UTF-8 es sólo una representación de 8 bits de Unicode. Los caracteres con códigos menores a 128 se representan como un byte, y como en Unicode repiten ASCII, el texto escrito sólo con estos caracteres será texto ASCII. Los caracteres con códigos de 128 están codificados en 2 bytes, con códigos de 2048 - 3, de 65536 - 4. Por lo tanto, sería posible obtener hasta 6 bytes, pero no queda nada por codificar con ellos.
0x00000000 - 0x0000007F: 0xxxxxxx 0x00000080 - 0x000007FF: 110xxxxx 10xxxxxx 0x00000800 - 0x0000FFFF: 1110xxxx 10xxxxxx 10xxxxxx 0x00010000 - F: 10xxxxxx 10xxxxxx 10xxxxxx
Codificamos en UTF-8
El procedimiento es aproximadamente este:- Convertimos cada carácter a Unicode.
- Comprobamos de qué rango proviene el símbolo.
- Si el código de símbolo es menor que 128, lo agregamos sin cambios al resultado.
- Si el código de carácter es menor que 2048, tomamos los últimos 6 bits y los primeros 5 bits del código de carácter. Agregamos 0xC0 a los primeros 5 bits y obtenemos el primer byte de la secuencia, y sumamos 0x80 a los últimos 6 bits y obtenemos el segundo byte. Concatenar y sumar al resultado.
- Podemos continuar de manera similar para códigos grandes, pero si el carácter está más allá de U+FFFF tendremos que lidiar con sustitutos UTF-16.
Decodificando UTF-8
- Buscamos el primer carácter del formulario 11xxxxxx.
- Contamos todos los bytes posteriores del formulario 10xxxxxx
- Si la secuencia es de dos bytes y el primer byte es 110xxxxx, entonces cortamos los prefijos y los sumamos multiplicando el primer byte por 0x40.
- Lo mismo ocurre con secuencias más largas.
- Reemplace toda la secuencia con el carácter Unicode deseado.
