Consejos para pasar a XHTML Strict

ByLuis

Buena serie de consejos a seguir para aquellos que quieran empezar a realizar webs usando XHTML Strict:

  • Declara el Document Type
  • Declara el Content Type
  • Añade la barra final a los tags de una sola referencia, por ejemplo <br /$gt;
  • Usa la entidad &amp; para el ampersand (&)
  • No olvides el atributo alt par alas imágenes
  • Referencia correctamente el Javascript
  • Usa la etiqueta fieldset en los formularios
  • Anida correctamente el HTML
  • No uses elementos o atributos deprecated

Web Design Tip: XHTML Strict Transition

| |

Menú radial mediante XHTML

ByLuis

Buen tutorial que nos explica cómo realizar un menú radial, es decir, un menú en el que las opciones se sitúan alrededor de un punto.

menu_radial.png

El tutorial nos indica cómo crear la estructura XHTML, los estilos, y el código Javascript para que funcione el menú.

Siendo algo puristas, no me gusta el uso del XHTML y el de los estilos, incluso podría sobrar Javascript. El código XHTML no es semántico. Aúnque claro, quizás lo haya hecho porque la solución que os paso ahora no sirve para IE6.

menu_radial2.png

El HTML sería el siguiente:

<ul>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>

Y los estilos:

ul {
width: 150px;
height: 150px;
display: block;
padding: 0px;
margin: 0px;
}
li {
width: 48px;
height: 48px;
display: block;
border: 1px solid #008585;
background: #24B8B8;
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
li + li + li {
margin-left: 50px;
}
li:first-child {
margin: 0px 50px;
}
a {
font-size: 250%;
font-family: Arial;
text-decoration: none;
color: #DEDED2;
}

Javascript Tutorial – Radial Menus Part 1

|

HTML Purifier: filtro HTML en PHP

ByLuis

htmlpurifier.pngHTML Purifier es un filtro HTML para PHP que no solo elimina código XSS, sino que asegura que tus HTML cumplan los estándares.
A parte admite configurar el filtro con una serie de parámetros, pudiendo decir si se quiere que sea XHTML Strict o Transitional, HTML o XHTML, indicar el nivel de filtro.
HTML Purifier
Vía / dzone

WYMeditor: editor XHTML/CSS

ByLuis

WYMeditor es un editor WYSIWYM basado en web. La característica principal de este navegador es centrar la atención del usuario en la estructura de la página (layout).
wymeditor.png
WYMeditor ha sido creado para generar código XHTML estricto perfectamente estructurado, según las especificaciones XHTML de la W3C. El código no puede ser contamidano por información visual como estilos de fuentes, tamaños, bordes o colores. El usuario define el significado del contenido, por el cual será determinado su aspecto mediante la hoja de estilos. El resultado es fácil y rápido de mantener.
WYMeditor
Vía / SitePoint Blogs

|

Crea una guía de estilos

ByLuis

Un gran consejo que deberíamos llevar todos a cabo, es crearnos una guía con los estilos que tiene nuestra aplicación. No solo si trabajamos en nuestro propio diseño, porque siempre se nos acaban olvidando y podemos caer en el error de crearnos estilos repetidos, sino también para cuando trabajamos en proyectos grandes y o bien los estilos ya están creados pero no los conocemos, porque una cosa es leer un css y otra es adivinar que pinta tiene, o bien porque creamos alguno para que se sepa que existe.
cssguide.png
Uno de esos documentos que odiamos hacer, pero que siempre echamos de menos tener.
Creating a Style-Guide for your site
Vía / SitePoint

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

|

Vídeos sin el elemento embed

ByLuis

Incluir vídeos, del tipo que sean, en nuestras páginas web suele traernos dificultades, sobre todo si queremos que sean vistas en cualquier navegador y si queremos seguir los estándares. Si os encontráis con este problema nada mejor que echarle un ojo a este artículo, en el cual se indica como incluir mediante el uso de la etiqueta object vídeos de distintos formatos, ya que embed no es estándar.
Entre los distintos tipos de vídeos que incluye están los que usa el Flash Player, como YouTube o Google Video, películas en formato Windows Media y QuickTime.
Ya no tienes excusa para seguir los estándares.
Bye, Bye <embed>