Cuidado con el XHTML

ByLuis

Ahora que está más extendido el uso de XHTML, siempre viene bien darse cuenta de cosas en las que no caemos. He encontrado un artículo que me parece bastante interesante que nos avisa sobre el uso del XHTML.
Antes de nada diferenciar entre HTML y XHTML para poder comprender mejor con qué nos vamos a encontrar. HTML está definido por SGML y no necesita ser validado y los navegadores al encontrar errores en el uso de las etiquetas las ignoran y siguen presentando el documento. XHTML está basado en XML y como tal tiene que ser validado.
Un error común es usar el mismo Content-Type para ambos documentos, mientras que para HTML es text/html, para XHTML es application/xhtml+xml, por lo que cuando mandamos un XHTML como HTML, realmente le estamos eliminando todo aquello que le hace diferente, el XML, si no es XML no valida. El navegador trataría el XHTML como un conjunto de etiquetas sin orden, y cuando encuentre errores, los obviará o solucionará.
Otro problema que nos podemos encontrar es que si en un documento XHTML encerramos los scripts y las hojas de estilo entre comentarios HTML (&lt!– … –&gt), tal y como se hace en HTML, el validador XML lo tomará como comentario y lo ignorará. Recordad que los estilos y los scripts se deben encerrar entre <![CDATA[ … ]]>.
Tambien hay que pensar que si no lo tratamos como XHTML tendremos problemas si incrustamos código SVG o MathML ya que el navegador lo ignorará.
Más problemas, en XHTML todas las elementos deben tener su etiqueta de cierre, lo cual puede ser un problema si se trata como un HTML, ya que una etiqueta del tipo <br/> entrará en conflicto con las null end tags de SGML, algo que casi nadie usa. En SGML podemos traducir <title>Mi página</title> por <title/My page/, por lo que si se encuentra con un <br/>, si sigue esta regla de SGML, nos dirá que sobra un >.
Para variar, IE no acepta XHTML, y cuando recibe un documento con este formato, nos mostrará la ventana para guardar o abrir el documento.
Como conclusión, casi mejor pasarlo como HTML, nos evitamos problemas con IE y a parte la validación de XML es costosa.
Beware of XHTML
Vía / dzone

Similar Posts

| |

Laboratorio: control para direcciones IP

ByLuis

Algo que me suele gustar bastante es que cuando tengo que introducir una dirección IP en un formulario o ventana de Windows, no tenga que estar dándole al tabulador para cambiar de caja de texto. Lo mismo es aplicable cuando se trata de un serial number. Tambien suelo agradecer que hacer un copy/paste, no tenga que ir haciéndolo caja a caja.
control-ip.png

Siempre viene bien hacernos un control para direcciones IP, que permita pegar toda la dirección ip y que se rellenen las cajas correctamente y que al pulsar el punto se mueva de caja, y la verdad es que tampoco es muy difícil de hacer.

Read More “Laboratorio: control para direcciones IP”

| | |

Personaliza los radio y los checkbox

ByLuis

Muchas veces los diseños no suelen ir de acuerdo con el aspecto de los radio y los checkbox que nos ofrecen los navegadores.
Crear controles que sustituyan los ya existentes puede darnos problemas de accesibilidad, salvo en este caso (bueno, y supongo que en otros), ya que lo que hace este script es aprovechar la funcionalidad de las etiquetas label para que el funcionamiento recaiga sobre estas etiquetas y no sobre las checkbox o los radio.
radiocheckbox.png
El script buscará los inputs radio y checkbox y los ocultará y cambiará el estilo de las label asociadas para que el funcionamiento sea el mismo.
ARC – Adam’s Radio/Checkbox customisation
Vía / Infected-FX

|

30 scripts para galerías, presentaciones y lightboxes

ByLuis

Una gran colección de scripts que nos ayudarán a incluir nuestras galerías de fotos, presentaciones y lightboxes. 30 scripts en total, organizadas por:

  • Galerías y lightboxes en Ajax.
  • Galerías de imágenes basadas en Ajax.
  • Galerías CSS+Javascript.

De las 30 me gustaría destacar unas cuantas que son las que más me han gustado:

  • JonDesign’s SmoothGallery : usando mootools v1.0 para su desarrollo, se trata de un script de tan solo 16k, que añade fade, transparencias, thumbnails, vistas preliminares y todo ello con un diseño muy sencillo y llamativo.galeria1.png
  • Couloir.org: otra galería de imágenes en forma de presentación, con fade, redimensionamiento de la ventana y sonido.galeria2.png
  • Lightbox2: uno de los mejores y de los más conocidos, transparencias, fade y posibilidad de navegar entre las diferentes imágenes.galeria3.png
  • TripTracker: muy parecido a los anteriores, en este caso permite también acceder a la primera y última y enviar por email la ruta de la imagen en cuestión.galeria4.png
  • Cross Browser Multi-Page Photograph Gallery: Increible galería basada totalmente en CSS de la que ya hemos hecho referencia anteriormente, pero que siempre merece una mención.galeria5.png

30 Scripts For Galleries, Slideshows and Lightboxes

|

HTML 5 Web SQL Database

ByLuis

Está claro que el HTML5 nos ofrece muchas posibilidades, pero una de las opciones que más me ha gustado es la de tener bases de datos locales.

Para abrir una conexión deberíamos ejecutar lo siguiente:

db = openDatabase("ToDo", "0.1", "A list of to do items.", 200000);

Y para la ejecución de sentencias hay que echar mano de transacciones:

db.transaction(
  function(tx) {
     tx.executeSql("SELECT * FROM ToDo", [],
        function(tx, result) {
           for(var i = 0; i < result.rows.length; i++) {
             document.write('' + result.rows.item(i)['label'] + '
');
           }
         }, null);
       }
   );

Bastante sencillo y ofrece muchas posibilidades en nuestras aplicaciones

HTML 5 Web SQL Database

Vía / DZone

| |

Cómo crear márgenes según un contorno

ByLuis

Margen asimétricoHace unos días comentábamos sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.

Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.

Read More “Cómo crear márgenes según un contorno”

| | | |

Nueva versión de FireBug

ByLuis

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint