Cómo convertir una plantilla de WordPress en Html5

Cómo convertir una plantilla de WordPress en Html5
15 Ago 2012

HTML5 ofrece muchas mejoras y características interesantes que pueden ser útiles durante el uso de WordPress. 
En este tutorial aprenderemos a convertir el tema de WordPress para HTML5. Disfruta!

Logo de WordPress

1. Documento de la estructura

<!doctype html>
<head>
</head>
<body>
	<header>
	</header>
	<section id="content">
		<article>
			<header>
			</header>
		</article>
	</section>
	<aside>
		<nav>
		</nav>
	</aside>
	<footer>
	</footer>
</body>
</html>

Como podemos ver algunas nuevas etiquetas se han añadido. Si añadimos a nuestro CSS: 
el artículo, además, la figura, el encabezado de pie de página,, hgroup, menú de navegación, la sección {display: block;} 
podemos dar formato al igual que otros elementos de bloque, por ejemplo, <div>

1. Dentro de <header> podemos poner los elementos que se pueden encontrar normalmente en las copas de – nada especial: control deslizante, un menú, logotipo, etc El uso de esta etiqueta en el interior <article> se presentan a continuación.

2. <section> etiqueta que nos ayuda a mantener el orden en el documento. Podemos dividir nuestro sitio en secciones, por ejemplo, contenido, comentarios, galería, etc

3. <article> se puede utilizar para almacenar nuestras entradas – cada entrada en la etiqueta por separado! El título y la meta de la entrada debe estar dentro de <header> – tendrá un impacto positivo en nuestro SEO.

4. Nuestra barra lateral debe ser dentro de la etiqueta <aside>. Nada especial, pero nadie dijo que todas las innovaciones será útil.

wordpress-html5

5. <nav> envuelve la navegación. No se dice que en el interior debe ser <aside>, bien podría estar en nuestra cabecera o en cualquier lugar que queremos tener nuestra navegación.

6. Si tenemos el pie, ésta es una buena práctica para ponerlo en el interior <footer>. Se puede tener más de un <footer>, pero cada uno debe estar dentro <section> separado y una puede ser directamente en el interior <body>

Etiquetas <article>, <header>, <footer>, <section> se puede utilizar más de una vez, pero debemos tener la estructura adecuada. Propongo lo siguiente:

<section id="content">
		<article>
			<header>
			</header>
			<p>
			</p>
			<footer>
			</footer>
		</article>
</section>

Dentro de <header> podemos poner <h3> que es en la mayoría de pieles de WordPress como titular del cargo. Si queremos que el lugar más de un elemento <hX> usamos <hgroup>:

<hgroup>
<h3>Title</h3>
<h4>Subtitle</h4>
</hgroup>

La meta del mensaje puede ser envuelto por <footer>, lo que es una solución conveniente.

Cuando se trata de los comentarios que podemos tratar, como los mensajes y poner dentro <article> con <header>, <p>, etc <footer> interior.

Cuando queremos refrescar nuestro formulario de comentarios, sin duda debe utilizar HTML5. Algunas de las características de entrada se han añadido nuevos. Vamos a echar un vistazo a esto:

<input type="text" name="author" id="comment-form-author" placeholder="Your name" value="" size="22" tabindex="1" required="required">

<input type="email" name="email" id="comment-form-email" placeholder="Your email" pattern="[^ @]*@[^ @]*" value="" size="22" tabindex="2" required="required">

<input type="text" name="url" id="comment-form-url" placeholder="Your website" size="22" tabindex="3" />

Como un valor de marcador de posición se puede especificar una sugerencia para el usuario, aparecerá como un texto dentro de la entrada y después de hacer clic en él desaparecerá. 
atributo pattern nos permite especificar un golpeteo que se deben seguir. Aquí tenemos un ejemplo de patrón para la dirección de correo electrónico.

HTML5 es una herramienta poderosa, pero no está siendo apoyado por todos los navegadores. Las características más interesantes que podemos encontrar en http://html5demos.com/

Share

Diseño Páginas Web

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (2 Votos, Promedio: 5,00 de 5)
Cargando…

Comentarios

  1. black hat seo dice: agosto 24, 2012 at 1:44 pm

    Thank you, I have just been looking for information approximately this subject for a long time and yours is the best I have found out so far. However, what concerning the bottom line? Are you certain concerning the source?

  2. … [Trackback]…

    […] Find More Informations here: soportecnicoweb.com/como-convertir-una-plantilla-de-wordpress-en-html5/ […]…

  3. … [Trackback]…

    […] Read More: soportecnicoweb.com/como-convertir-una-plantilla-de-wordpress-en-html5/ […]…

  4. … [Trackback]…

    […] There you will find 25688 more Infos: soportecnicoweb.com/como-convertir-una-plantilla-de-wordpress-en-html5/ […]…

Comentarios están cerrados