Muchas de las veces, cuando estamos realizando páginas web y no usamos un editor HTML completo, nos puede ocurrir que no nos acordamos de una etiqueta HTML, de su utilización o de sus atributos.
Si te encuentras en esa situación, HTML Playground puede serte de mucha utilidad, ya que te muestra todas las etiquetas HTML, con su descripción y un código de ejemplo, el cual se puede visualizar y modificar.
HTML Playground
VÃa / Ajaxian
Para obtener datos de un HTML, en vez de hacerlo con expresiones regulares, hacerlo mediante DOMDocument:
$oldSetting = libxml_use_internal_errors( true );
libxml_clear_errors();
$html = new DOMDocument();
$html->loadHtmlFile( $url );
$xpath = new DOMXPath( $html );
$links = $xpath->query( '//a' );
foreach ( $links as $link ) {
echo $link->getAttribute( 'href' ), "\n";
}
libxml_clear_errors();
libxml_use_internal_errors( $oldSetting ); Se utiliza libxml_use_internal_errors para evitar HTML mal formados
Me pregunto si para obtener tan solo un dato del HTML (title por ejemplo) es mejor el DOM o las expresiones regulares.
Algo tÃpico de la Web 2.0 son las tag clouds o nube de etiquetas, las cuales muestran las etiquetas definidas en nuestra sitio, variando el tamaño de la letra según la relevancia del tag.
Se trata de algo muy vistoso y que cumple bien su objetivo, acceder a lo más importante de forma rápida. El problema está cuando queremos implementar nuestra propia tag cloud (claro, que nos podemos dejar de romper la cabeza y buscar alguien que ya lo haga). Por ejemplo, si la nube tiene scroll, ya sea por la cantidad de tags o por la ventana del usuario, la finalidad de que los más destacados sean los más visibles puede fallar si alguna etiqueta importante queda oculta por el scrolling.
Con este problema y muchos otros se ha encontrado Kevin Hoffman y por ello se ha creado un documento en el que explica cómo resolver esos problemas (o al menos intentarlo).
Whitepaper : In Search of the Perfect Tag Cloud
Via / dzone
Cuando nos pasan un diseño en PNG o PSD y tenemos que transformarlo a CSS y XHTML, una de las partes más tediosas es comprobar que el HTML se ajusta al diseño. Por ello, he creado un script rápido (y un tanto chapuzas) que permite añadir una imagen en el documento HTML y modificar su top y left así como el opacity para poder comprobar si vamos por buen camino.
La imagen la podemos indicar mediante una URL o haciendo drag&drop del fichero (PNG, GIF o JPEG). El D&D sólo funciona en Firefox y sinceramente, el resto del script solo lo he probado en Firefox. Luego solo nos falta cambiar el opacity, el top o el left y hacer pruebas.
Para instalarlo solo hay que añadir el script y añadir jquery si no está ya incluido.
Espero que os sea útil
Puede que alguna vez te hayas preguntado cómo hacer uno de esos “minibotones” que aparecen en algunos sitios indicando la suscripción RSS, pues es tan sencillo como dar tres pasos en photoshop.
Creamos un archivo nuevo de las dimensiones deseadas, yo para el ejemplo uso una imagen de 22 pixels de ancho por 11 de alto.
Elegimos los colores que vamos a usar, en este caso he escogido dos tonos de naranja, #E39207 y #FFAE00
Seleccionando el color más oscuro, trazamos un borde de 1px de ancho por toda la imagen, seguidamente seleccionamos la herramienta de borrado y quitamos 1px de cada esquina dejando una imagen como esta 
El siguiente paso será hacer una selección de toda la parte interior del recuadro y realizar un degradado desde el extremo superior de la imagen hasta el extremo inferior 
Solo nos queda añadir el texto, lo hemos hecho píxel a píxel, y tendremos un atractivo botón para decorar nuestra web. 
El grupo de trabajo que, dentro de la W3C, se encargará de la controvertida misión de “reinventar el HTML“, estará liderado por Chris Wilson, el jefe del proyecto IE7. Este grupo de trabajo colaborará con WHATWG de evolucionar el HTML de forma paralela al XHTML.
Personalmente me llevé una grata impresión de Chris, al que muchos pudimos escuchar en la pasada edición de Fundamentos Web, y hay que reconocerle su gran labor acercando IE7 a los estándares.
Pero que sea un alto responsable de Microsoft el que se encarge de liderar la evolución de un lenguaje que esa empresa ha respetado tan poco a largo del tiempo es algo que nos produce inquietud y desasosiego.
No puedo estar más de acuerdo con Daniel Glazman cuando considera que:
No puedo entender cómo y porqué el liderazgo del Grupo de Trabajo del HTML se da al vendedor mayoritario de navegadores, en este caso Microsoft. Microsoft, Mozilla, Opera y Apple deberÃan estar fuera de este liderazgo de este nuevo grupo de trabajo para preservar su independencia total o al menos añadir un co-lider independiente para mantener este propósito.
Creo que los que piensan que esto significa que Microsoft se acercará a los estándares y a la W3C pecan de ingenuos y que esta no es una buena noticia.
VÃa / 456BereaStreet
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