Más Layouts para tu web

la segunda patita, vía Dinamic Drive, ya habia publicado otra web con la misma intención.

xq siempre tan cortos los posts ?

falta tiempo, como siempre

Algunas propuestas interesantes del XHTML 2

Por Helena J. Heidenreich

El siguiente artículo reflexiona acerca del último borrador de la W3C para la futura especificación de XHTML 2.

El pasado mes de julio salió el último borrador de la W3C para la futura especificación de XHTML 2. Si bien todavía puede faltar mucho para que se lance como estándar oficial (suponiendo que algún día lo sea) y en ese tiempo pueden decidir realizar cambios en el borrador, creo que merecen ser destacadas algunas de las propuestas que son de lo más interesantes.

Hipertexto

Hasta ahora los enlaces (links) de hipertexto han sido algo exclusivo del elemento a. Con la Modularización de XHTML se crearon módulos independientes para agrupar distintos elementos y sus atributos.

El módulo para el hipertexto define al elemento a y a sus atributos; XHTML 2 en cambio define al elemento a en su módulo de hipertexto pero sus atributos, son definidos en un módulo aparte (Módulo de atributos de hipertexto XHTML) que es agregado también al resto de elementos XHTML; esto quiere decir que XHTML 2 permite a cualquier elemento ser un hiperlink.

XHTML 2 otorga la misma función a cualquier elemento agregándoles la misma colección de atributos (el href entre ellos). A pesar de que el elemento a se vuelve totalmente innecesario, éste va a ser conservado como elemento explícito para el marcado de links; eso sí, perdiendo todo sentido semántico pasando a tener el mismo sentido semántico que el elemento span.

Listas

Hasta el momento HTML y XHTML ofrecían 3 tipos de listas:

  • Ordenadas (ol)
  • No ordenadas (ul)
  • De definición (dl)

XHTML 2

Amplía en 1 estos tipos de listas entrando en escena un elemento nuevo: el nl (navigation list) el  cual pretende definir un listado de elementos para la navegación, vamos, para el clásico listado de links que usamos habitualmente como menú o barra de navegación.Cada elemento de la lista se define mediante un elemento li al igual que las listas ordenadas y no ordenadas. Sin embargo algo obligado que debe agregarse es un elemento label al inicio de cada lista de navegación que describa el contenido de la lista.

<nl>
	<label> Maestros del web </label>
	<li href=”principal.php”> Página principal </li>
  	<li><nl>
        <label> Editorial </label>
  		<li href=”editorial/”> Todos los editoriales </li>
  		<li href=”editorial/leido/”>Lo más leído </li>
  		<li href=”editorial/comentado/”> Lo más comentado </li>
  	</nl>
  	</li>
</nl>

Imágenes

XHTML 2 otorga a cualquier elemento la capacidad de ser una imagen clásica (img). Cualquier elemento puede en XHTML 2 tener un atributo src.

<p src=”imagen.gif”> Este texto <strong>sólo</strong> se mostrará en el caso de no ser 
cargada la imagen </p>

En el caso de que el recurso al que hace referencia el atributo src no se cargara por alguna razón (no se encuentra, el servidor no responde, o el navegador no soporta el formato de archivo o tiene las imágenes desactivadas) se procesaría entonces el elemento (en este caso el párrafo) con el aspecto presentacional que queramos usando hojas de estilo, algo que no podemos hacer actualmente con el texto alternativo (atributo alt) del elemento img.

El elemento img tiene una consecuencia similar al elemento a. A pesar de que ya no es estrictamente necesario el elemento img se mantiene con motivo de facilitar la transición hacia XHTML 2. Sin embargo no se mantiene como elemento vacío.

Tendrá su tag de cierre con un contenido que será mostrado en el caso de que el recurso al que hace referencia (la imagen) no se cargue por la razón que sea al igual que se comporta el elemento object.

<img src=”maestrosdelweb.gif”>Maestros del web </img>

Secciones

Entra en escena también un nuevo elemento para definir secciones dentro del documento. Hasta ahora veníamos definiendo las distintas secciones agrupando elementos dentro de elementos div. XHTML 2 integra un elemento estructural específico para tal fin: el elemento section.

Encabezados

Se mantienen los 6 niveles de encabezados (headings) que se vienen usando hasta ahora (h1, h2, h3 …) pero además XHTML 2 agrega un nuevo encabezado h para ser utilizado conjuntamente con el elemento section mencionado anteriormente y cuyo nivel es aplicado automáticamente dependiendo del nivel de anidamiento del elemento section dentro del cual se encuentre.

<body>
	<h>Maestros del web </h>
	<section>
		<h> Nuestro Editorial </h>
		<section>
			<h> Historia de ASP </h>
			<p> … contenidos </p>
		</section>
		<section>
				<h> Semblanza </h>
				<p> … contenidos </p>
		</section>
	</section>
	<section>
		<h> Notas de Actualidad </h>
		<section>
				<h> Nace grupo de flasheros peruanos y GarageFlash </h>
				<p> … contenidos </p>
		</section>
		<section>
				<h> Google compra Youtube </h>
				<p> … contenidos </p>
	</section>
	</section>
</body>

Separadores

Tradicionalmente venimos usando el elemento hr para separar distintas partes de un texto entre sí. El nombre de este elemento proviene de las iniciales de horizontal rule (regla horizontal).

Ahora se han percatado de que regla horizontal no es una denominación apropiada para este elemento puesto que ni necesariamente es horizontal (en texto vertical ésta es vertical) ni necesariamente es una regla (los libros a menudo utilizan otros métodos tipográficos tales como una línea de tres asteriscos para representar separadores).

Así que pretendiendo enfatizar su naturaleza estructural, para hacerlo más ampliamente usable y para que quede claro que esencialmente no tiene direccionalidad (vertical u horizontal) han decidido cambiarle el nombre a este elemento renombrándolo como separator.

Bloques de código

Hasta ahora venimos usando el elemento code para marcar un fragmento de código de computadora. XHTML 2 introduce el elemento blockcode para marcar un bloque de código (no sólo un fragmento).

Saltos de línea

El elemento br usado para ‘romper’ un texto en varias líneas desaparece para dar paso al elemento l. La idea es un elemento que dé estructura al texto que ha de ser partido en varias líneas.

Una de las ventajas que tendrá será el poder numerar las líneas  de forma automatica desde una hoja de estilos, algo muy útil para quienes escribimos líneas de código fuente.

Un ejemplo podría ser:

<blockcode>
			<l>function pepe(){</l>
			<l>    alert(‘¡Hola soy pepe!’)</l>
			<l>} </l>
</blockcode>

Y aplicar los siguientes estilos CSS:

l:before {
    counter-increment: linenumber;
    content: counter(linenumber);
}

Role

Entra en acción otro nuevo atributo cuyo rol es, precisamente, definir el rol de elementos que usemos en el documento; proveer información sobre el propósito de alguna parte de una página web: el atributo role.

Pretende añadir semántica a los elementos a los que se aplique definiendo el papel que está jugando en el contexto del documento. Por ejemplo un párrafo que contiene una nota podría ser marcado como <p role=”note”>.

Por supuesto el borrador incluye muchos más detalles dignos de mención pero, como primer acercamiento, estos que he mencionado son los que más me han llamado la atención.  El resto podría formar parte de un futuro artículo.

 

Optimiza tu blog para los buscadores

Via TuFuncion.com, uno de los sitios que la lleva hoy por hoy !!

 

Estructura de la URL

La estructura de tu URL debería ser rellenada con palabras, sin llegar a ser demasiada extensa.
A menudo se ven páginas en los que las fechas de publicación son incluidas en la URL pero yo prefiero algo como esto:

tusitio.com/titulodepost

Esto mantiene una URL corta descriptiva y sencilla de recordar.

Título de las páginas

Los motores de búsqueda usa los títulos de las páginas en sus resultados de búsqueda. La mayoría de los blogs mantienen una estructura parecida a esta:

nombredelblog.com >> Título del Post

Mi recomendación sería colocar unicamente el título del post. Aquí os dejo el código para los que utilizais Movable Type y WordPress.

Movable Type

<title><$MTEntryTitle$></title>

WordPress

<title><?php if (is_home () ) { bloginfo(‘name’); } elseif ( is_category() ) { single_cat_title(); echo ” – “; bloginfo(‘name’); } elseif (is_single() || is_page() ) { single_post_title(); } elseif (is_search() ) { bloginfo(‘name’); echo ” search results: “; echo wp_specialchars($s); } else { wp_title(”,true); } ?> </title>

Meta Description

Los motores de búsqueda a menudo ven contenido cómo duplicado pero con un Meta Description podenmos solventar este problema.

Movable Type

<meta name=”description” content=”<$MTEntryBody words=”25″$> …” />

WordPress

Si usas WordPress descarga el plugin head meta description. Fija entre 15 y 25 palabras.

Cabeceras

Las cabeceras son realmente importante para la indexación de tu contenido, tienes numerosas opciones para resaltar contenido dentro de tu post, pero lo mas eficaz es utilizar las etiquetas H1, H2, o H3.

Imágenes y enlaces de texto

Las imagenes y enlaces de texto deberían de poseer un comentario que se muestre al pasar el ratón por encima del enlace.
Esto se hace con las etiquetas “alt” (imágenes) y “tittle” (texto) aseguráte de que estos comentarios contengan palabras descriptivas.
Alt

alt=”descripción”

Title

title=”descripción”

Sitemap

La mayoría de blogs no posee sitemap y lo necesitan, puesto que es un elemento muy importante de cara a la optimización para los motores de búsquedas.Puedes utilizar el servicio de Google “webmaster tools” o crear tu propio sitemap.
Te ayudará a indexar el contenido de tu blog de manera eficiente.

Redirección 301

Cuando otras páginas enlazan tu blog lo harán: http://tufuncion.com o http://www.tufuncion.com. Habitualmente los motores de búsqueda verán dos sitios diferentes, sólo habría que echar un vistazo a Google en las que el numero de enlaces de una y otra estrcutura son totalmente distintos.
Si prefieres unificar estos datos solo tendras que configurar el .htaccess con este trozo de código:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_Host} ^TUSITIO.com [NC]
RewriteRule ^(.*)$ http://www.TUSITIO.com/$1 [L,R=301]

Asegurate de modificar los parametros de las líneas 3 y 4 por los del nombre de tu dominio.

Linkar

Error si piensas que no te aporta nada linkar a otros blogs, es una característica común a los blogs importantes… estos linkan y tu debes linkar de cara a los motores de búsqueda optimizarás la indexacion de tu sitio.
La forma de hacerlo más común es incluyendo un blogroll.

Hacer ping

Si deseas incrementar tu tráfico prueba a hacer ping a páginas como technorati, Icerocket o blogalaxia.
Si utilizas FeedBurner puedes hacer ping a traves de ellos.Icerocket.

Buen truco para debugear tus CSS

Via anieto2k.com

Muy buen truco para poder tener tus capas más o menos colocadas sin tener que darles colores a cada una de ellas. La verdad es que su facilidad me ha sorprendido y su funcionamiento es simplemente genial.


  * { outline: 2px dotted red }
  * * { outline: 2px dotted green }
  * * * { outline: 2px dotted orange }
  * * * * { outline: 2px dotted blue }
  * * * * * { outline: 1px solid red }
  * * * * * * { outline: 1px solid green }
  * * * * * * * { outline: 1px solid orange }
  * * * * * * * * { outline: 1px solid blue }

Pega este código en cualquier parte de tu CSS o mejor aún crea un fichero CSS y lo agregas a tu proyecto, esto hará que todos tus elementos aparezcan delimitados por lineas de colores. Muy util para las últimas y primeras etapas de maquetación.