Para controlar todos los elementos HTML

6, septiembre, 2007

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.

HTML playground

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

Otra vez con las listas

4, septiembre, 2007

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

31, agosto, 2007

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

22, agosto, 2007

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

5, agosto, 2007

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.

rendur.jpg


Dar estilo a las listas ordenadas con CSS

4, agosto, 2007

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:

lista1.gif

lista2.gif

lista3.gif


Bloques de texto con estilo

1, agosto, 2007

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.