HTML: el juego de caracteres y los editores de texto
Articles,  Blog

HTML: el juego de caracteres y los editores de texto


hola soy sergio luján mora profesor de informática de la universidad de alicante y en este vídeo que forma parte del curso introducción al desarrollo web te voy a dar unas pautas para resolver unos problemas relacionados con el juego de caracteres y los editores de texto antes de empezar me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo y dos formas de contactar conmigo a través de mi correo electrónico sergio luján uah.es y a través de mi cuenta en twitter sergio luján mora en un vídeo anterior ya te hable del juego de caracteres y de los típicos problemas que ocasiona en las páginas web en este vídeo te daba dos consejos utiliza siempre el mismo juego de caracteres en todo lo que hagas y utiliza un dc-8 sin bom que te permite mezclar en un mismo documento textos en cualquier idioma pero ya te avise en el otro vídeo hay que saber mucho mucho más ya que cuando las cosas empiezan a ir mal estos dos consejos no son la solución para todos los problemas hace unos días recibí el siguiente correo estoy probando lo del juego de caracteres usando notepad plus plus en el vídeo recomiendas usar o tf8 symbol resulta que el fichero lo tengo con codificación annecy pero si lo cambio a ute f8 sin bom el disquete de guardar no se me marca es decir no se ha modificado el fichero entonces marc utc 8 se marca el disquete y guardo ahora selecciono v8 symbol se me marca el disquete y guardo el chanchullo para que me permitiese guardar 18 symbol y el correo continuaba y ahora viene el tema si guardado en ute f8 symbol cuando cierro el fichero y lo vuelvo a abrir la codificación que me marca es aang si es normal también veo convertir efe 8 symbol además de codificar en f8 symbol cuál es la diferencia bien primero vamos a ver qué es eso del bom bom es el acrónimo de byte orden marc la marca de orden de bytes y es un carácter único que utiliza para indicar el orden de los bytes de un fichero de texto al principio del fichero básicamente existen dos órdenes de bytes el little indian y el virgen dial que definen de qué forma se almacenan los datos que ocupan más de un byte en ordenador confuso puede ser muy confuso ya sabes para solucionar los problemas con el juego de caracteres hay que saber mucho volviendo al bom en el caso de ute f 8 es un carácter único que ocupa 3 bytes y que tiene esta representación en hexadecimal y aparece representado de esta forma como carácter quiero que te acuerdes muy bien de lo que pone aquí efe bb df y de su representación en forma de carácter porque ahora después la volveremos a ver cuál es el problema de todo esto lo mejor es utilizar ute efe 8 nos evitamos problemas podemos escribir cualquier carácter podemos mezclar todos los idiomas del mundo pero usted f8 lleva el mont esos 3 bytes al principio del fichero y hay programas y no se llevan muy bien con el bot por ejemplo php 5 no tiene un soporte completo de utc 8 si vamos a trabajar con php 5 debemos de utilizar df 8 symbol voy a realizar una demostración práctica con el editor know bad plus plus para que lo entiendas mejor te voy a mostrar un problema típico que aparece cuando trabajamos con efe 8 y con php 5 estoy en el nou path plus y he preparado tres ficheros de ejemplo para mostrarte el problema por un lado tenemos este fichero html punto html que contiene solamente código html luego tenemos este fichero php punto php que contiene esta instrucción de php un echo párrafo esto lo escribe php que lo único que hace es escribir esta cadena de texto esta cadena html y por último tenemos este fichero también en php php files php que lo único que hace es emplear la instrucción incluye include de php para incluir el primer fichero de html es decir lo único que hace es leerlo y volcarlo en la salida fíjate que los tres ficheros los tengo almacenados en formato f 8 se aparece aquí aquí lo tenemos efe 8 vamos a ver cómo se visualiza en estos tres ficheros en el navegador me voy al navegador y aquí tenemos el primer fichero de solamente html se ve bien no hay ningún problema luego tenemos el otro fichero el que contiene código de php se ve bien y ahora el tercer fichero este fichero de aquí que contiene esta instrucción de php para cargar el 3 el primer fichero es decir se debería de ver igual que este fichero sin embargo cuando lo visualizamos notamos aquí que hay un cambio fijaros como aparece aquí un margen superior como si hubiese aquí una línea adicional de texto esto que es debido si vamos ahora el código fuente veremos que he añadido un comentario al principio de cada uno de los ficheros este comentario debe de producir ese espacio adicional para nada este espacio no lo debe de producir un comentario es más aquí lo podemos comprobar como estos ficheros también tienen el comentario y sin embargo no aparece ahí ese espacio por tanto a qué se debe esto el problema está en que al cargar aquí en php este fichero el fichero html punto html este fichero de aquí recordar que está en formato de f-8 lleva el bom aunque nosotros aquí no lo veamos como lo puedo saber a quien no para de plus plus me instalado un plugin que es un editor hexadecimal si le voy a dar le doy a ver el código es a decimal del fichero fijaros lo que tenemos aquí al principio lo recordáis recordáis los tres caracteres que os he dicho acordaros de estos tres caracteres lo podemos ver aquí también en hexadecimal efe vb b efe ese es el bom esa es la marca que indica que esto es un fichero efe 8 e indica el orden de los bytes este carácter es el que me está produciendo aquí este salto de línea porque ese carácter está aquí incluido lo que ocurre es que el navegador tampoco me lo muestra aquí al ver el código fuente por tanto me puedo volver loco muy loco buscando a ver por qué me está apareciendo aquí este margen y todo es debido a ese carácter invisible que no me aparece cómo solucionamos este problema pues bien sencillo la solución ya te lo he dicho y es no almacenar el fichero en formato tf8 sino almacenarlo en formato etc 8 sin bom para eso nos vamos aquí al menú codificación y le damos a convertir al tc 8 symbol pero aquí tenemos la duda tenemos la pregunta que me hacían en un correo electrónico que debo de usar codificar o convertir codificarlo debería de usar cuando inicio un fichero desde cero es decir cuando no tiene contenido o cuando quiero hacer algo raro como almacenar en un mismo fichero caracteres con dos modificaciones distintas porque lo que estoy indicando es que a partir de este momento el contenido que yo escriba lo quiero codificar con este juego de caracteres pero el contenido que ya tiene el fichero lo dejamos en el juego de caracteres que ya tenía en nuestro caso no queremos hacer eso no no queremos dejar el fichero con la codificación anterior sino que queremos transformar convertir todos los caracteres a la nueva codificación por tanto debemos de usar convertir yo te puedo asegurar que nunca he usado codificar esta opción nunca la he necesitado y la verdad es que si yo fuese el diseñador del notepad plus la escondería un poco para no causar confusión entre los usuarios así que en este caso vamos a usar convertir a efe 8 sin bom fijaros como me aparece en rojo para indicar me que el fichero ha sido modificado lo que me ponían en el correo electrónico ahora ya lo puedo guardar porque el fichero ha sufrido una transformación al guardarlo pues me desaparece el disquete que se decía en el correo electrónico el fichero no necesita guardarse porque no tiene ningún cambio y si me voy ahora al editor hexadecimal veréis que me han desaparecido esos tres caracteres que habían al principio ya no está el bom ya no está esa marca lo entendéis en sencillo no voy a realizar lo mismo con todos los ficheros los voy a convertir a 18 sin bom ya los tengo los tres en ute f8 symbol y vuelvo aquí recargo y veréis que aparentemente no ha habido ningún cambio efectivamente porque el navegador google chrome está preparado para trabajar con efe 8 con o sin bom pero ahora vamos a ver si se soluciona este problema vamos a ver si desaparece este margen le doy a recargar y tachán ya no me sale ese margen genial no solucionado esto es muy importante que lo recordéis porque cuando trabajemos con php es muy normal hacer cosas como esta es decir construir una página web mediante trozos mediante componentes que los vamos incluyendo los vamos uniendo si nos despistamos y los componentes que vamos uniendo están almacenados en v8 combos nos aparecerá ese carácter no visible y nos romperá el diseño de la página web por tanto recordar hay que almacenar los ficheros con ute de 8 symbol y para finalizar un último detalle acordaros que debéis de poner la etiqueta meta chart set para indicar el juego de caracteres y este juego de caracteres que indicamos aquí debe de coincidir con el juego de caracteres que físicamente se está empleando para almacenar el fichero si yo aquí indicó un juego de caracteres y almacenó el fichero con otro juego de caracteres tendré problemas vamos a hacer una prueba por ejemplo aquí tengo indicado 18 como juegue caracteres para mi página y voy a cambiarlo a latín 1 aquí la tiene 1 no me aparece podría darle aquí a juego caracteres buscarlo aparecería por aquí en europa occidental donde está por aquí está en algún sitio pero bueno yo normalmente lo que hago es convertir a annecy fijaros como me dice que ahora tengo que guardar el fichero porque ha sufrido una transformación aquí me aparece efectivamente and si le doy a guardar y ahora cuando cargue la página tatxan ya no me aparece el carácter que me va a dar problemas el carácter que me va a dar problemas es la vocal acentuada y el resto de caracteres no me dan problemas porque están entre los 128 primeros caracteres ascii y esos caracteres se representan de igual forma en asti en mis 88 59 11 13 8 como son los caracteres más comunes siempre se representan igual por eso no me dan problemas los problemas me los dan los caracteres especiales vamos a hacer otra prueba si yo ahora le pongo latin 1 o también le podría poner iso 88 59 1 pues se debe de arreglar el problema volvemos al navegador le voy a recargar y ya me sale bien el carácter otra vez y ahora vamos a hacer la última prueba que es yo indicó que mi juego caracteres es el latín 1 lo tengo guardado en lan si bien está guardado en latín 1p ahora lo voy a convertir le cambió la codificación y volvemos a 18 symbol me vuelve a decir que lo guarde lo guardo recargar y tachán otra vez problemas ahora me sale otro carácter distinto en conclusión hay que llevar mucho cuidado y lo que ponga aquí lo que indiquemos en el html tiene que coincidir con la codificación física del fichero en cuanto haya una discrepancia en cuanto no coincida empezaremos a tener problemas bien espero que este vídeo te ayude un poco más a evitar los típicos problemas que aparecen al trabajar con los juegos de caracteres pero te vuelvo a recordar el tema es muy complejo y hay que saber muchas cosas para hacer frente a todos los problemas que pueden surgir recuerda que este vídeo forma parte del curso introducción al desarrollo web que está disponible en la dirección y de es web punto s muchas gracias por tu atención

11 Comments

  • iDESWEB UA

    IMPORTANTE: En realidad, del correo que recibí, sólo contesto lo último, lo de "convertir" o "codificar". Respecto al lío de ANSI y UTF8 sin BOM, la respuesta es sencilla: para los caracteres normales (alfabeto inglés, números, símbolos normales), la codificación coincide, por lo que un fichero sin caracteres extraños será idéntico en ANSI y UTF8 sin BOM. Por eso, al guardarlo y al abrirlo después, parece que no hace caso.

    He considerado que era más importante lo que cuento en el vídeo.

  • iDESWEB UA

    El consejo de utilizar UTF8 sin BOM es debido a lo que se muestra en este vídeo, a los problemas que pueden existir con PHP5.

    Se comenta que PHP6 (tengo constancia de que se habla de PHP6 desde el año 2007, pero nunca llega, incluso he visto libros con ese título) tendrá un soporte completo de UTF8. Mientras tanto, hay que llevar cuidado.

  • iDESWEB UA

    Para los que no sabéis PHP, no preocuparos por el código PHP que aparece en este vídeo, lo importante es que entendáis el problema y su solución.

  • Bland Blani

    No no no, lo que menos quiero es eso, esque me quede con la duda es decir como hago para saber que desde el inicio esta en utf-8 sin BOM y no utf-8?

Leave a Reply

Your email address will not be published. Required fields are marked *