HTML

Tabla de codificaciones de caracteres entre ANSI, UTF-8, Javascript, HTML

HTML, Javascript / 6 comentarios /

ene-virguilillaCuando hacemos una página web en utf8, al escribir una cadena de texto en javascript que contenga acentos, tildes, eñes, signos de interrogación y demás caracteres considerados especiales, se pintara de una forma extraña en el html. Esto es porque javascript tiene su propio sistema de codificación, al igual que el html. A continuación os dejo una tabla con los principales caracteres que se utilizan, ya que es útil tenerlos a mano para poder escribirlos:

ANSIUTF-8JAVASCRIPTHTML
ÁÁu00c1Á
ááu00e1á
ÉÉu00c9É
ééu00e9é
ÍÍu00cdÍ
ííu00edí
ÓÓu00d3Ó
óóu00f3ó
ÚÚu00daÚ
úúu00faú
ÑÑu00d1Ñ
ññu00f1ñ
¿Â¿u00bf¿

Y después de esta tabla a modo de apunte, os dejo la tabla completa de codificación de caracteres como eñes, acentos, tildes y demás caracteres entre ANSI, UTF8, Javascript y HTML:

ANSIUTF-8JAVASCRIPTHTML
Âu00a0 
¡Â¡u00a1¡
¢Â¢u00a2¢
£Â£u00a3£
¤Â¤u00a4¤
¥Â¥u00a5¥
¦Â¦u00a6¦
§Â§u00a7§
¨Â¨u00a8¨
©Â©u00a9©
ªÂªu00aaª
«Â«u00ab«
¬Â¬u00ac¬
­Â­u00ad­
®Â®u00ae®
¯Â¯u00af¯
°Â°u00b0°
±Â±u00b1±
²Â²u00b2²
³Â³u00b3³
´Â´u00b4´
µÂµu00b5µ
¶u00b6¶
·Â·u00b7·
¸Â¸u00b8¸
¹Â¹u00b9¹
ºÂºu00baº
»Â»u00bb»
¼Â¼u00bc¼
½Â½u00bd½
¾Â¾u00be¾
¿Â¿u00bf¿
ÀÀu00c0À
ÁÁu00c1Á
ÂÂu00c2Â
ÃÃu00c3Ã
ÄÄu00c4Ä
ÅÃ…u00c5Å
ÆÆu00c6Æ
ÇÇu00c7Ç
ÈÈu00c8È
ÉÉu00c9É
ÊÊu00caÊ
ËËu00cbË
ÌÃŒu00ccÌ
ÍÍu00cdÍ
ÎÃŽu00ceÎ
ÏÏu00cfÏ
ÐÐu00d0Ð
ÑÑu00d1Ñ
ÒÃ’u00d2Ò
ÓÓu00d3Ó
ÔÔu00d4Ô
ÕÕu00d5Õ
ÖÖu00d6Ö
××u00d7×
ØØu00d8Ø
ÙÙu00d9Ù
ÚÚu00daÚ
ÛÛu00dbÛ
ÜÃœu00dcÜ
ÝÝu00ddÝ
ÞÞu00deÞ
ßßu00dfß
àÃu00e0à
ááu00e1á
ââu00e2â
ããu00e3ã
ääu00e4ä
åÃ¥u00e5å
ææu00e6æ
ççu00e7ç
èèu00e8è
ééu00e9é
êêu00eaê
ëëu00ebë
ììu00ecì
ííu00edí
îîu00eeî
ïïu00efï
ððu00f0ð
ññu00f1ñ
òòu00f2ò
óóu00f3ó
ôôu00f4ô
õõu00f5õ
ööu00f6ö
÷÷u00f7÷
øøu00f8ø
ùùu00f9ù
úúu00faú
ûûu00fbû
üüu00fcü
ýýu00fdý
þþu00feþ
ÿÿu00ffÿ

Espero que os sirva de ayuda tanto como a mi.

Tabla de codificaciones de caracteres entre ANSI, UTF-8, Javascript, HTML Leer más »

Centrar texto verticalmente con css

CSS, HTML, Programación, XHTML / Deja un comentario /

Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el «como centrar texto verticalmente sin valign». Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.

Os dejo un ejemplo de como se utilizaría:

Ejemplo del html:

Ejemplo del css:

#menu {
  height: 50px;
}

.menuOption {
  line-height: 50px;
  text-align: center;
}

Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.

Centrar texto verticalmente con css Leer más »

Autocomplete=»off» valido para XHTML

HTML, Javascript, Programación, XHTML / 1 comentario /

Cuando escribimos un texto en un input de tipo text (input type=»text») nos encontramos que por regla general el navegador nos va a autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con anterioridad, recordando para un input que se llama «nombre» el o los nombres que hayamos introducido.

La practica del autocompletado es muy util siempre que tengamos formularios repetitivos, tales como los formularios de registro que suelen llamarse siempre de forma similar y siempre suelen pedir los mismos datos, evitandonos volver a escribir todos nuestros datos una y otra vez.

Existen casos en los que quizas no queramos que el navegador nos autocomplete ese texto, puede darse el caso que tengamos una tienda online que realiza el pago con tarjeta de crédito y no queramos que esa tarjeta de crédito se nos autocomplete. Para evitar esto, existe un atributo que es utilizado por la gran mayoria de los navegadores que es el atributo autocomplete=»on|off», que si se desactiva con el valor off, indica al navegador que no ha de autocompletar ese campo.

Aunque en muchos casos es muy buena practica usar el atributo autocomplete, el W3C no tiene reconocido este atributo como atributo de la etiqueta input, con lo cual al intentar validar y encontrarse con el atributo autocomplete, nos dara un error de validación. Para solucionar el error de validación lo que haremos sera utilizar javascript para añadir este atributo, así la funcionalidad seguira estando ahí, pero no tendremos problemas de validación.

Lo unico que deberemos hacer es añadir el siguiente código al final de la página, o al menos, justo despues de declarar el input

De esta forma conseguiremos que al introducir un texto en un input no se autocomplete por el navegador y si queremos autocompletar lo podamos hacer por javascript.

Un buen y bonito ejemplo de autocompletado de campos es el que use para muchoviaje en los campos de origen y destino

Autocomplete=»off» valido para XHTML Leer más »

Símbolo del euro en xml o xslt sin utf-8

HTML, XHTML, Xml, Xslt / 1 comentario /

Durante el desarrollo de mi último proyecto, me encontré con un xml de transformación o xslt, donde debía de usar el símbolo del euro (€), pero esta transformada, que no deja de ser un xml, estaba codificada en iso-8859-1, y no podía cambiar la codificación. A la hora de añadir el símbolo del euro, si usaba directamente el carácter €, fallaba porque estaba mezclando codificaciones, y si usaba € como viene siendo en html, fallaba porque no es un carácter válido de xslt. La solución, usar los caracteres especiales, en este caso para el euro (€) es el €

Símbolo del euro en xml o xslt sin utf-8 Leer más »

Alineamiento de una imagen con CSS

CSS, HTML, Programación / Deja un comentario /

En un proyecto importante en el que estoy trabajando tenemos que añadir una serie de nuevas funcionalidades a una aplicación muy grande y eso supone también modificar la web que visitan cientos de miles de personas al día. Al ver que mis compañeros de HTML están más bien peladitos me ofrecí voluntario para hacerla ya que daban libertad dentro de unos limites.

Al apañar la web para las nuevas características me encuentro con que esta hecha con el diseñador de webforms de Visual Studio, y me encuentro con cosas como align=»absBottom» en una imagen para centrarla verticalmente.

Como aparte de las modificaciones que debía de hacer y como me sobraba tiempo y me aburría, convertí la web de formato indefinido a XHTML correcto con CSS, tenia que arreglar ese tipo de cosas, así que el alineamiento de la imagen se puede hacer con CSS con el estilo vertical-align que tomaría los siguientes valores

  • top
  • left
  • right
  • middle
  • bottom

El código seria este:

  <img src="..." align="absBottom">

El nuevo código sería:

  <img src="..." class="middle" title="...."
 alt="...." />

Y la clase CSS seria:

  .middle {
    vertical-align: middle;
    /* Valores: top, left, right, middle, bottom */
  }

Alineamiento de una imagen con CSS Leer más »

Como incrustar código Javascript en XHTML

HTML, Javascript / Deja un comentario /

En muchas ocasiones he escrito código Javascript en una web de XHTML y al intentar validar unas veces funcionaba y otras no. Probando un poco más me di cuenta que cuando escribía código Javascript con ampersans (&) y signos de menor o mayor (< >) el código no validaba. Es cuando caigo en la solución, si XHTML no deja de ser un XML, probemos a poner un CDATA.



....
....

Con esto ya podemos escribir código Javascript embebido sin que por ello no nos valide nuestra web.

Como incrustar código Javascript en XHTML Leer más »

Como conseguir el mejor IDE de desarrollo para la Web

HTML, Linux, PHP, Programación, Windows / 2 comentarios /

Hace ya algunos años que me dedico a la programación en exclusiva de PHP en entornos web, pero a pesar de tratarse de entornos web, no son páginas web, sino webservices, donde la presentación gráfica esta de sobra porque todo se transmite por XML. Durante este tiempo he pasado por diferentes IDE’s de programación, terminando en el Zend Studio 5.2 y 5.5, ya que para entornos de desarrollo complejos donde el numero de clases, interfaces, variables, etc. es enorme y se mueven multitud de datos, es el mejor con diferencia.

Es cierto que el Zend Studio es maravilloso si lo comparamos con el resto de IDE’s de PHP que hay en el mercado, sobre todo y algo que los demás no tienen es el reconocimiento de las clases que nosotros mismos desarrollamos y su documentación al estilo PHPDoc. Hace algunos meses, redescubrí el plugin PDT de Eclipse, que había dejado de estar verde, para tener un autocompletado del código casi equiparable con el del propio Zend Studio, pero con la gran ventaja de ser mas ligero a pesar de que Eclipse consume más memoria  RAM.

Hace un par de días, vi por primera vez Aptana, un IDE basado en Eclipse que incorpora interesantes funcionalidades como una mejor cobertura del autocompletado de código en cuanto a HTML y CSS se refiere y algo que me ha maravillado, un autocompletado y reconocimiento de clases y funciones de Javascript. Esto me ha maravillado porque para desarrollar una web gráfica, es lo mejorcito que he visto.

Lo que había pensado y efectivamente se puede hacer, es que si PDT es un plugin de Eclipse y Aptana es otro plugin de Eclipse, quizás se pudieran mezclar creando un conjunto realmente bueno por no decir el mejor para el desarrollo web.  Lo más curioso, es que analizando un poco las funcionalidades de Aptana, me he dado cuenta o eso me ha parecido, que la parte de PHP usa el plugin PDT (al menos es igualito) pero de una versión vieja, que por mi experiencia creo que se trata de la 0.7. Así que aventurandome a mezclar los dos plugins y cruzando los dedos para que los apartados de PHP no se den de ostias, los instale.

El resultado de mi experimento es un Eclipse con el plugin de PDT y Aptana instalados a la perfección, si creo un nuevo proyecto de PHP con la vista de PHP (PDT) utiliza todo el entorno de PDT para las páginas PHP y el sitema de Aptana para todas las paginas de Javascript, HTML, CSS, etc. por lo que podemos tener el que sería para un profesional, el mejor IDE de desarrollo para PHP, HTML, CSS y Javascript que podemos encontrar, completamente gratuito y multiplataforma.

Como conseguir el mejor IDE de desarrollo para la Web Leer más »

Scroll al inicio