37 pasos para un perfecto etiquetado HTML

ByLuis

Para aquellos que empiecen o para quienes aún sean un poco de la vieja escuela, el artículo al que hacemos referencia puede ser de gran ayuda ya que te explica desde lo más elemental a lo más semántico.
Hay un total de 37 puntos que nos explican qué es lo que debemos hacer o qué es cada cosa dentro de una página web. Empieza explicando lo que es un HTML, luego un XHTML, los diferentes tipos de XHTML, el DOCTYPE, la validación del documento, la codificación (recomendando UTF-8), el BOM dentro de un archivo UTF-8, las entidades, la semántica (el uso de cabeceras y de em o strong), los párrafos o los saltos de línea y muchas otras cosas más que recomendamos que leaís.
Bulletproof HTML: 37 Steps to Perfect Markup

Similar Posts

|

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

| |

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

| | | |

Especial UTF-8 (I)

ByLuis

El UTF-8 es un tipo de codificación de caracteres para Unicode que nos permite escribir nuestras páginas web y no preocuparnos por si se va a ver correctamente o van a aparecer caracteres extraños.

Las veces que he trabajado en proyectos multilenguaje es lo que hemos usado, salvo en el caso de japonés y coreano que es preferible usar el UTF-16 porque ocupa menos espacio. Eso ha hecho que me haya acostumbrado a realizar siempre los proyectos en UTF-8 y así evitar luego los problemas que puedan surgir en futuras actualizaciones o en testeos y tener luego que cambiar todo el proyecto a UTF-8.

Read More “Especial UTF-8 (I)”

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

|

Paso a paso de un diseño web

ByLuis

La gente de SitePoint han publicado un gran artículo en el que explican cómo hacer un diseño (layout) mediante XHTML y CSS.
Hace tiempo alguien nos preguntaba por un comentario en un artículo cómo podía pasar de su forma de diseñar por tablas a diseñar sin tablas. Creo que con este artículo podrá aprender la transición de forma muy sencilla y rápida.
Empieza explicándonos los pasos que hay que llevar a cabo para la fase inicial de nuestro diseño. Dibujar los contenidos (cabecera, panel, contenido, pie de página) y cómo crear la estructura de capas y sus estilos.
Después nos indica como añadir fondos y contenidos a las distintas partes de nuestra página, como por ejemplo las imágenes con float. No solo se centra en lo estrictamente desarrollo, sino también un poco en diseño. Añade imágenes de fondo al pie y a la cabecera que realmente quedan bastante bien.
Y por último nos indica como dividir el contenido en rejillas para darle un aspecto más uniforme.
Breaking Out of the Box

| | | |

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