Para controlar todos los elementos HTML

En BLOG AND WEB nos comenta que como existen una gran cantidad de elementos HTML, tantos que muy pocos podrían decir que saben para que sirven todos. Pero menos mal que contamos con algunas ayudas:

• En primer lugar tenemos la utilidad de HTML playground, una aplicación web que reúne a todos estos elementos junto con su utilidad, descripción, atributos y ejemplos de aplicación. Si te topas con una etiqueta que no conoces puedes no solo encontrarla, sino entenderla en un mismo sitio. Puede ser que a partir de una necesidad, te permita encontrar la etiqueta que la solucione.

• Una web con una labor similar y bastante recomendable es html dog. Una especie de guia practica para XHTML y CSS.

Otra vez con las listas

Según nos cuentan en CSSLAB , siempre es mejor prevenir que remediar. Por eso recalca el tema de las listas en HTML. Son bastante útiles, ya que sus propiedades intrínsecas (el que sean elemento bloque y contengan bastante rígido su contenido) las hace muy maleables al momento de estructurar menús. A continuación aclara lo qué son y cómo utilizarlas.

Una lista no es lo mismo que una secuencia. Una regla mental básica puede ayudarte a dilucidar cuándo una lista es una lista:

Si creamos una lista y le quitamos sus marcadores (bullets o números) con CSS, entonces probablemente no es una lista

Esto hace ver que nuestro menú con listas no son semánticos. Los elementos de este menú son secuenciales, pero no
necesariamente pertenecen a una lista. Les damos estilos, les ponemos fondos, cambiamos su color con :hover,
pero si le quitamos los estilos, vuelve a ser una lista (ordenada o no) de elementos. No una secuencia. Entonces sí tiene sentido que sea una lista.

En HTML existen 3 tipos de listas:

<dl> definition lists

Las listas de definición corresponden a pares de término y su definición.

<dl>
<dt>Beodo</dt>
<dd>Un beodo es un ebrio, borracho.</dd>
</dl>

<dt> corresponde a un definition term, o en castellano un término a definir. Y <dd> es la descripción de ese término.

<ul> unordered lists

Listas desordenadas son viejas amigas. Se utilizan cuando no importa el orden de los elementos contenidos:

<ul>
<li>vaso</li>
<li>cerveza</li>
<li>sed</li>
</ul>

Aquí da lo mismo el orden de los factores, el que no alterará el producto final.

<ol> ordered lists

Ya las listas ordenadas sí importa en qué orden las pongamos. Por eso por defecto, <ol> se renderiza con números secuenciales.

<ol>
<li>Toma la cerveza y ponla a esfriar.</li>
<li>Prepara tu sed, en 1 hora y media aproximadamente ya podrás saciarla.</li>
<li>Vierte la cerveza helada en un vaso y empina tu brazo hacia tu boca.</li>
</ol>

Aclarados los conceptos, todo esto ayuda que los contenidos tengan más sentido a tus usuarios y principalmente a los buscadores, lo que les asegurará mejores posicionamientos en ellos.

Más información en: XHTML Semántico aplicado a listas

YAML, un framework XHTML/CSS

Mediante el enlace que nos suministra SENTIDOWEB descubro a YAML (Yet Another Multicolumn Layout), un framework XHTML/CSS que nos permite crear plantillas para diseños web con diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.

También nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.

125 codigos útiles

Juan Pablo de JUQUE Y WEBLOG, nos proporciona una gran lista que es una recopilación de códigos (HTML, CSS, Javascript, y snippets de AJAX) para simplemente inspirarse, copiar, aprender o incluirlos en tu blog. 125 Code Snippets for web designers.

Rendur, editor sencillo online de HTML y CSS

En el blog LEANDONO´S encuentro a Rendur es sencillo editor online de HTML y CSS, en donde, a medida que se va escribiendo vamos viendo los resultados en la misma ventana del navegador.

Puedes mover mover la ventana del editor a cualquier lado de la pantalla, minimizarla o redimensionarla para mas comodidad y la separación del HTML con el CSS.

Dar estilo a las listas ordenadas con CSS

En BLOGANDWEB, su autor desde hace un tiempo ha estado buscando la forma para dar estilo a las listas ordenas (o listas numeradas) con CSS sin conseguirlo, el objetivo era dar estilo a los números en la lista para diferenciarlos de su contenido y acentuarlos mejor. La solución la encontró en webdesignerwall, que destaca por su sencillez.

Puedes ver la totalidad del artículo con la estructura de código html y CSS, y la explicación en castellano. Puedes ver las muestras del resultado en las siguientes figuras:

Bloques de texto con estilo

En CSSLAB nos recuerda que la etiqueta <blockquote> corresponde a una cita dentro de un bloque de texto. Ese es su significado semántico. El resultado en wordpress.com es el siguiente:

Se usa para definir largos parágrafos donde se citan desde otros sitios web externos. Puede ir acompañado de algunos atributos, como title (define el título de esa cita), lang (define en qué idioma está) y cite (muestra el URL desde dónde se tomó esa cita).

La idea de esta ocasión, es darle un estilo más gráfico a esas citas a través de un poco de CSS. Como en impresos se suelen utilizar las comillas («) para describir gráficamente este elemento, lo que haremos es poner al inicio y al final del blockquote 2 comillas a través de 2 imágenes diferentes. Puedes ver el ejemplo.

Te recomiendo que veas la totalidad del artículo con los códigos CSS empleados.

La W3C actualiza su validador HTML

En ANIETO2K nos comunica que la W3C ha actualizado el validador de HTML. Esta nueva versión, y comenta que a parte de una diseño muy conseguido es una obra maestra del desarrollo web, y pasa a decir el por qué:

1. Uso inteligente del Javascript. Si le echamos un vistazo al código fuente nos sorprende ver que han usado MooTools como framework para potenciar el javascript de la aplicación. Si revisamos el código javascript vemos que las funcionalidades implementadas en este lenguaje son bastante simples y nada ostentosas como en otros sitios, nada de efectos vistosos que no aportan nada.

2. La accesibilidad ante todo. La primera prueba que ha hecho sobre el sitio ha sido la de entrar con javascript desactivado, y me ha dejado maravillado el menú por tabs convertido en una lista de enlaces sin perder nada de funcionalidad. Evidentemente la estructura de la página correctísima, nos permite usar la aplicación aunque estemos frente a un navegador sin CSS, una solución muy accesible.

Conclusión. Es obvio que un organismo como la W3C haga las cosas de esta manera, y más si es así como lo están promoviendo. Tienen recursos, y a los mejores programadores de la materia. Personalmente, la web del validador de W3C además de ayudarnos a comprobar que cumplimos, o no, los estandares web, nos deleita con una aplicación web que todos deberíamos imitar.

Índice de todos los elementos HTML y su significado

En SIGT mencionan que Jens Meiert ha publicado la semana pasada un índice de todos los elementos HTML y su significado, incluyendo su disponibilidad en todas las versiones de HTML y XHTML: HTML 3.2, 4.01, 5, XHTML 1.0 y XHTML 2.0.

Con esta tabla se pueden ver todos los elementos que han existido para estas versiones, un gran trabajo y una dirección imprescindible que se va directo a favoritos.

Crea tu primera web en XHTML y CSS paso a paso

En CRISTALAB encuentro un artículo realizado por inyaka, donde nos cuenta a modo de tutorial la manara más sencilla de comenzar por primera vez una página web, mediante XHTML y CSS.

Listas de colores hexadecimales para diseño web

En BLOG VECINDAD…, otra lista de colores de ColourLovers. Muy interesante que está compuesta por tintas de cada color RGB.

Las especificaciones del HTML 3.2 identificaron dieciséis colores que se pueden utilizar por nombre para definir color en el HTML y el CSS. Pero se puede utilizar más de dieciséis colores en el HTML… así que no necesitas saberlos todos los tienes enumerados en el siguiente enlace Ultimate HTML Color HEX Code List.

Imagen flotante con efecto de «ir arriba»

En GEM@BLOG, nos enseña un código que al aplicarlo, da como resultado una imagen que aparece en la parte derecha inferior del blog, es de gran utilidad para «regresar» arriba de la página desde cualquier parte en donde te encuentres, ya que la imagen siempre permanece fija en la esquina inferior del navegador..

Para aplicarla en nuestro blog deberemos hacerlo en Edición de HTML de la plantilla.

Una vez ahí podemos aplicar el siguiente código entre las etiquetas <body> y </body> yo os recomendaría hacerlo justo antes de </body> de esa forma es más fácil encontrar el código si en algún momento pensamos cambiar o suprimir la imagen.

<a href="#"><img src="url-de-la-imagen" alt="ir arriba" border="0" style="position:fixed; bottom:0; right:0;" /></a>

Lo he probado y funciona muy bien.

Humor html

He visto en MENÉAME este divertido dibujo para los que les gusta el lenguaje html

Imagen de The Scientific Cartoonist.

En los comentarios han dejado alguna que otra perla y alguna cosa que he buscado aunque son un poco viejas:

 

 

 

 

¿Cómo poner un logo o una imagen con enlace en tu blog?

En UBH, muestran una solución muy sencilla a dicha pregunta. Así que para poner una imagen o logo y construír tú mismo el código tiene que disponer de las siguientes partes:

• Una imagen subida a internet.
• Un enlace para que al pinchar la imagen se abra la página.

Para subir una imagen a internet, podemos utilizar nuestro propio alojamiento o uno de los servicios gratuítos que alojan imágenes en internet, por ejemplo Imageshack u All you can upload.

Y el enlace dependiendo de la web o blog que queráis abrir es la dirección URL que veréis en vuestro navegador cuando estáis en esa web o blog.

Una vez tengamos estas dos partes, procedemos a construír el código htlm, de forma que el código de la url envuelva al de la imagen.

1. Ejemplo 1: < abrimos código de la url><ponemos el código de la imagen><cerramos el código de la url>
2. Ejemplo 2: <a href=”url de la página”><img src=”url de la imagen que quieras poner” /></a>
3. Ejemplo 3: <a href=”https://cosassencillas.wordpress.com/”><img src=»https://cosassencillas.files.wordpress.com/2007/05/botoncs.png» alt=»botoncs.png» /></a>

Con el siguiente resultado:

Este sería el código básico para construír un logo, que pegaréis en una zona de código de vuestro blog o web y será interpretado como se ve en la imagen del logo.

Se le pueden añadir muchos atributos, como por ejemplo alt, border, de la imagen o target de la url etc… para guiaros mejor, os recomiendo que miréis la estructura de nuestros logos con los atributos que tiene.