Cómo Crear un Currículum Potenciado con Microdatos HTML5

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En mayo de 2009, Google introdujo los Fragmentos Enriquecidos, más conocidos por su nombre en inglés como "Rich Snippets", son un pequeño bloque de información mostrada en los resultados de los motores de búsqueda de Google para que les resulte más fácil a los usuarios decidir qué páginas son importantes para su búsqueda. En junio de 2011, Google anunció la creación de Schema.org, una nueva iniciativa de Google, Bing y Yahoo! que intenta mejorar la web a través de la creación de estructuras de código.

Este tutorial muestra cómo crear un currículum online que incorpore los Microdatos de Schema.org. ¡El tutorial también incluye instrucciones sobre cómo usar Código Estructurado para la Autoría!

¡Elementos Extra Incluídos!

La muestra de ejemplo para el tutorial es una web con una sola página que puedes usar para crear tu currículum con toda libertad. Como extra, incluye algunas versiones con diferentes colores en los archivos zip; verde oscuro, verde vivo, azul oscuro y azul claro.

Por favor advierte que no se trata de un tutorial sobre diseño web o CSS, así que sólo veremos el código correspondiente al HTML5 y a los Microdatos de Schema.org.

Ahora, ¡empecemos!

Paso 1: El CSS

Crea una hoja de estilo CSS llamada "style.css" e incluye el siguiente código. No te preocupes; es bastante sencillo y comprenderlo no es realmente necesario para el tutorial.



/* Default Styles
--------------------------------------------------- */

body {
  margin: 0px;
	padding: 0px;
	background: url("../images/bg_dark_green.png");  
	background-color: inherit;
	font-size: 16px; 
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	color: #000;
}

a:link { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

a:visited { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

a:hover { 
	text-decoration: underline;
	color: #669933;
	font-weight: bold;
}

a:active { 
	text-decoration: underline;
	color: #000;
	font-weight: bold;
}

#wrapper	{
	width: 965px;
	margin: 0 auto;	
}

#content {
	background-color: #eee;
	width: 960px;
	text-align: left;
	overflow: auto;
	position: relative;
	margin: 25px 0px 25px 0px;
	border: #fff solid 2px;
}

.clear	{
	float: none;
	clear: both;
	margin: 20px 0px 20px 0px;
}


/* Header
--------------------------------------------------- */


#contact-details .header_1 {
	float: left;
	width: 350px;
	text-align: center;
	margin: 40px 0px 0px 20px;
}

#contact-details .header_1 img {
	border: #fff solid 4px;
	background: url("../images/bg_img_dark_green.png"); 
	padding: 16px;
	margin: 10px 0px 0px 0px;
}

#contact-details .header_2 {
	float: left;
	width: 570px;
	margin: 40px 0px 0px 10px;
}

#contact-details .header_2 a {
	font-weight: normal;
}

#contact-details  h1	{
	margin: 0px 0px 0px 20px;
	font-size: 52px;
	font-weight: bold;
}

#contact-details  h3	{
	margin: 0px 0px 32px 20px;
	font-size: 30px;
	font-weight: bold;
	font-style: italic;
}

#contact-details ul.info_1	{
	list-style: none;
	margin: 0px 0px 0px -12px;
	font-size: 18px;
}

#contact-details ul.info_2	{
	list-style: none;
	margin: 0px 0px 15px -12px;
	font-size: 18px;
}

#contact-details li.address	{
    background: url("../images/home.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.phone	{
    background: url("../images/phone.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.email	{
    background: url("../images/mail.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.site_url	{
    background: url("../images/computer.png") no-repeat;
	background-position: 0px 2px;
    padding: 0px 0px 12px 40px;
}

#contact-details li.twitter	{
    background: url("../images/twitter_sm.png") no-repeat;
	background-position: 0px 0px;
    padding: 0px 0px 12px 40px;
}



/* Main Content
--------------------------------------------------- */

h2.top	{
	margin: 0px; 
	font-size: 22px;
	font-weight: bold;
}

h2	{
	margin: 40px 0px 0px 0px; 
	font-size: 22px;
	font-weight: bold;
}


dl	{
	margin: 0px 50px 0px 0px;
}


dt	{
	float: left;
	width: 200px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	text-align: right;
}

dd	{
	width: 620px; 
	float: right;
	margin-right: 20px;
}

dl#contact 	{
	margin: 0px;
}

dt#contact 	{
	margin: 0px;
}

dd#contact 	{
	margin: 0px;
}

p.bus1	{
	margin: 0px;
	font-weight: bold;
	color: #669933;
}

p.edu-info	{
	margin: 10px 0px 0px 0px;
	font-weight: bold;
	color: #669933;
}

p.edu-info a	{
	color: #000;
}

p.edu-info a:hover	{
	color: #669933;
}

p.time	{
	margin: 0px;
}

p.summary	{
	margin: 10px 0px 0px 0px;
}


#skills ul.list1	{	
	float: left;
	list-style: none;
	margin: 0px 0px 0px -40px;
	width: 220px;
}

#skills ul.list2	{	
	float: left;
	list-style: none;
	margin: 0px 0px 0px 0px;
	width: 220px;
}

#skills li {
    background: url("../images/bullet_green.png") no-repeat;
	background-position: 0px 2px;
    padding: 0px 0px 0px 25px;
}

abbr	{
	border-width: 0px;
}


/* Footer
--------------------------------------------------- */

#footer	{
	margin: 60px 40px 0px 40px;
}

#footer	img {
	border: 0px;
}

#footer .footer_content	{
	width: 700px;
	overflow: auto;
	margin: auto;
	border: #fff solid 2px;
	background-color: #dcdcdc;
}

#footer ul.icons_1	{
	float: left;
	width: 525px;
	margin: 15px 10px 10px 15px;
	padding: 0px;
}

#footer ul.icons_2	{
	float: right;
	width: 100px;
	margin: 10px 20px 10px 10px;
	padding: 0px;
}

#footer .icons_1 li, #footer .icons_2 li { 
	margin: 0px 0px 0px 7px; 
	padding: 0px; 
	list-style-type: none; 
	display: inline; 
}

#footer a	{
	color: #000;
}

#footer a:hover	{
	color: #669933;
}

#footer	.credits {
	float: none;
	clear: both;
	margin: 10px 0px 20px 0px;
	font-size: 12px;
	text-align: center;
}

#footer	.credits a	{
	font-weight: normal;
}

Paso 2: La Estructura del Código (Sin los Microdatos de Schema.org Incluídos)

Después, necesitamos un .html. Ésta es una maquetación básica a la que todos estamos acostumbrados.



<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<meta charset="utf-8">

<title>Online Resume of Your Name</title>

<!-- Meta -->
<meta name="description" content="A few lines about yourself">
<meta name="keywords" content="web,developer,designer,resume" />
<meta name="author" content="Your Name">

<!-- CSS Stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css" />

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Content Area -->
<div id="content">

<!-- Begin Header -->
<header>

<!-- Begin Contact Section -->
<section id="contact-details">

<!-- Begin Profile Image Section -->
<div class="header_1">
<img src="images/profile.jpg" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->
<div class="header_2">

<h1><span>Your Name</span></h1>
<h3>Web Developer / Designer</h3>

<ul class="info_1">
<li class="address">555 Street Address, Toledo, Ohio, 43606  U.S.A.</li>
</ul>

<ul class="info_2">
<li class="phone">(000) 000-0000</li>
<li class="email"><a href="mailto:your-email@gmail.com">your-email@gmail.com</a></li>
<li class="site_url"><a href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li class="twitter"><a href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li>
</ul>

</div>
<!-- End Profile Information Section -->

</section>
<!-- End Contact Section -->

</header>
<!-- End Header -->

<div class="clear">&nbsp;</div>

<!-- Begin Profile Section -->
<dl>
<dt>Profile:</dt>
<dd>

<section class="summary">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</section>

</dd>
</dl>
<!-- End Profile Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Skills Section -->

<dl>
<dt>Skills:</dt>
<dd>

<section id="skills">
<ul class="list1">
<li>XHTML</li>
<li>HTML5</li>
<li>PHP</li>
<li>JavaScript</li>
<li>Magento</li>
<li>WordPress</li>
</ul>
<ul class="list2">
<li>HTML</li>
<li>CSS</li>
<li>MySQL</li>
<li>jQuery</li>
<li>CMS Made Simple</li>
<li>Photoshop</li>
</ul>
</section>

</dd>
</dl>

<!-- End Skills Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Experience Section -->
<dl>
<dt>Experience:</dt>

<dd>

<section id="experience">

<!-- Position #1 -->

<h2 class="top">Web Developer / Designer</h2>
<p class="bus1">Company Name 1</p>
<p class="time">February 2009 &#45; Present</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>


<!-- Position #2 -->

<h2>Web Developer / Programmer</h2>
<p class="bus1">Company Name 2</p>
<p class="time">November 2007 &#45; February 2009</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>


<!-- Position #3 -->

<h2>Web Developer / Programmer</h2>
<p class="bus1">Company Name 3</p>
<p class="time">March 2006 &#45; November 2007</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</section>

</dd>
</dl>
<!-- End Experience Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Publications Section -->
<dl>
<dt>Publications:</dt>

<dd>

<section id="publications">

<a href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a>, <a href="http://net.tutsplus.com/" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11

</section>

</dd>
</dl>
<!-- End Publications Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Education Section -->
<dl>
<dt>Education:</dt>
<dd>

<section id="education">

<p class="bus1">University of Toledo</p>

2801 Bancroft Street
<br />
Toledo, Ohio, 43606  U.S.A.

<p class="summary">Web Design</p>
<p class="time">2003 &#45; 2005</p>

<p class="edu-info">
<a href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
</p>

</section>

</dd>
</dl>
<!-- End Education Section -->

<div class="clear">&nbsp;</div>

<!-- Begin Footer -->
<footer id="footer">

<!-- Begin Footer Content -->
<div class="footer_content">

<!-- Begin Schema Person -->

<ul class="icons_1">
<li><a href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li>
<li><a href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li>
<li><a href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li>
<li><a href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li>
<li><a href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

<!-- End Schema Person -->

</div>
<!-- End Footer Content -->

<div class="credits">
Social Icons by <a href="http://paulrobertlloyd.com/2009/06/social_media_icons" target="_blank" title="Paul Robert Lloyd">Paul Robert Lloyd</a>, Profile &amp; Download Icons by <a href="http://dryicons.com/" target="_blank" title="DryIcons">DryIcons</a>, Phone Icon by <a href="http://www.comfi.com/telecom-icons/" target="_blank" title="ComFi Telecom">ComFi Telecom</a>, Profile Image User Symbol by <a href="http://thenounproject.com/" target="_blank" title="The Noun Project">The Noun Project</a>.
<br />
All used under a Creative Commons Attribution-ShareAlike license: <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank" title="Creative Commons Attribution-ShareAlike license">http://creativecommons.org/licenses/by-sa/3.0/</a>
</div>

</footer>
<!-- End Footer -->

</div>
<!-- End Content -->

</div>
<!-- End Wrapper -->

</body>
</html>

Algunas Notas Relativas a la Estructura del Código

Adición al HTML5

Debido a que los Microdatos de Schema.org están basados en las especificaciones para los microdatos de HTML5, la estructura del código HTML5 se usa para crear la plantilla de la web de una sola página del currículum. Desafortunadamente, los navegadores antiguos como IE7 e IE8 no reconocen ciertos elementos HTML5. Las páginas escritas usando HTML5 no se visualizarán correctamente en estos navegadores.

Aquí tienes una captura de pantalla del currículum online de ejemplo visto en IE8 (pulsa sobre la imagen para verla al completo):

Para resolver este problema con las versiones antiguas del navegador IE, hemos añadido el código de abajo entre

etiquetas (justo bajo la hoja de estilo CSS):

1
2	<!--[if lt IE 9]>
3	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
4	<![endif]-->

Este código es una adición de JavaScript HTML5 para que IE reconozca y aplique el estilo adecuadamente a los elementos HTML5.

Nota: La adición de JavaScript HTML5 no es necesaria en IE9 y superiores, así como tampoco en otros navegadores modernos que admitan HTML5.

Listas de Definición

Las listas de definición, <dd></dd> se usaban en el código en lugar de listas sin orden. La razón es que tiene mucho más sentido, si consideramos que cada elemento de lista va siempre seguido de una pequeña descripción.

Diferencias entre Secciones y Artículos

Parece que existe confusión en lo que respecta a los elementos HTML5 para las secciones y los artículos. El elemento section se usó en el código porque ninguna de las secciones del currículum se considera por sí misma un contenido aparte.
El elemento HTML5 article se usa para apartados que constituyen un contenido por sí solo, y la mayoría de las veces está sindicado como por ejemplo una entrada de un blog o un artículo de noticias. Este artículo explica bastante bien la diferencia entre los elementos article y section en HTML5.

Paso 3: Añade Microdatos de Schema.org - Person y PostalAddress

Los primeros tipos de esquemas que vamos a añadir a la estructura del código son Person y PostalAddress.

El Elemento `Itemscope` y el Atributo `Itemtype`

Un elemento itemscope se añade a las etiquetas <div></div> que son colocadas alrededor del contenido relativo a la información de Schema, como en este ejemplo:


<div itemscope itemtype="http://schema.org/Person">

Content that contains information about a Person

</div>

El elemento itemscope y el atributo itemtype para el Schema Person será colocado tanto en las secciones de los enlaces de Contacto como en los enlaces a Perfiles en Medios Sociales de la web del currículum, de la siguiente forma:


<!-- Begin Contact Section -->
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Person">

Rest of Code Block Here

</div>
</section>
<!-- End Contact Section -->


<!-- Begin Social Media and Download Links -->
<div itemscope itemtype="http://schema.org/Person">

Rest of Code Block Here

</div>
<!-- End Social Media and Download Links -->

El elemento itemscope y el atributo itemtype para el Schema PostalAddress están anidados dentro del Schema Person y están colocados alrededor de la lista sin orden <ul></ul> conteniendo la información de la dirección de la siguiente forma:


<!-- Begin PostalAddress Schema -->
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="info_1">
<li class="address"><span itemprop="streetAddress">555 Street Address</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li>
</ul>
</div>
<!-- End PostalAddress Schema -->

Atributos `Itemprop`

Los atributos Itemprop necesitan ser añadidos siempre que sea adecuado usando las etiquetas span de forma que la información adicional sobre nuestra página web sea proporcionada a los motores de búsqueda.

Esquema Person

itemprop = "image"
itemprop = "name"
itemprop = "jobTitle"
itemprop = "telephone"
itemprop = "email"
itemprop = "url"

Esquema PostalAddress

itemprop = "streetAddress"
itemprop = "addressLocality"
itemprop = "addressRegion"
itemprop = "postalCode"
itemprop = "addressCountry"

Código Final para los Enlaces de las Secciones Contacto y Medios Sociales


<!-- Begin Contact Section -->
<section id="contact-details">
<div itemscope itemtype="http://schema.org/Person">

<!-- Begin Profile Image Section -->
<div class="header_1">
<img src="images/profile.jpg" itemprop="image" width="250" height="250" alt="Your Name" />
</div>
<!-- End Profile Image Section -->

<!-- Begin Profile Information Section -->
<div class="header_2">

<h1><span itemprop="name">Your Name</span></h1>
<h3><span itemprop="jobTitle">Web Developer / Designer</span></h3>

<!-- Begin PostalAddress Schema -->
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<ul class="info_1">
<li class="address"><span itemprop="streetAddress">555 Street Address</span>, <span itemprop="addressLocality"<Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode"<43606</span> <span itemprop="addressCountry">U.S.A.</span></li>
</ul>
</div>
<!-- End PostalAddress Schema -->

<ul class="info_2">
<li class="phone"><span itemprop="telephone">(000) 000-0000</span></li>
<li class="email"><a href="mailto:your-email@gmail.com" itemprop="email">your-email@gmail.com</a></li>
<li class="site_url"><a rel="me" itemprop="url" href="http://www.webcodepro.net/about.php" title="www.your-website.com">www.your-website.com</a></li>
<li class="twitter"><a rel="me" itemprop="url" href="http://twitter.com/twitter-screen-name" title="Follow Me on Twitter">@twitter-screen-name</a></li>
</ul>

</div>
<!-- End Profile Information Section -->

</div>
</section>
<!-- End Contact Section -->


<!-- Begin Social Media and Download Links -->
<div itemscope itemtype="http://schema.org/Person">

<ul class="icons_1">
<li><a rel="author" itemprop="url" href="https://profiles.google.com/jwagner719" title="Google Profile"><img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32" alt="Google Profile"></a></li>
<li><a rel="me" itemprop="url" href="http://dribbble.com/" title="Dribbble"><img src="images/dribbble.png" width="32" height="32" alt="Dribbble" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.linkedin.com/" title="LinkedIn"><img src="images/linkedin.png" width="32" height="32" alt="LinkedIn" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.facebook.com/" title="Facebook"><img src="images/facebook.png" width="32" height="32" alt="Facebook" /></a></li>
<li><a rel="me" itemprop="url" href="http://www.flickr.com/" title="Flickr"><img src="images/flickr.png" width="32" height="32" alt="Flickr" /></a></li>
<li><a rel="me" itemprop="url" href="http://twitter.com/" title="Follow Me on Twitter!"><img src="images/twitter.png" width="32" height="32" alt="Follow Me on Twitter!" /></a></li>
</ul>

<ul class="icons_2">
<li><a href="resume.pdf" title="Download Resume PDF"><img src="images/download.png" width="48" height="48" alt="Download Resume PDF" /></a></li>
</ul>

</div>
<!-- End Social Media and Download Links -->

Paso 4: Añade Microdatos de Schema.org - Item List

El próximo esquema que vamos a añadir a la estructura del código es ItemList.

El elemento `Itemscope` y el Atributo `Itemtype`

El elemento itemscope y el atributo itemtype para el Schema ItemList serán colocados en la Sección Habilidades como ves aquí:


<!-- Begin Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">

Rest of Code Block Here

</div>
<!-- End Skills Section -->

Atributos `Itemprop`

Añade el atributo "itemprop" siempre que sea apropiado mediante las etiquetas <span></span>. Más abajo está los atributos que serán usados para este esquema.

Esquema `ItemList`

itemprop="itemListElement"

Código de la Estructura para la Sección de Habilidades


<!-- Begin Skills Section -->
<div itemscope itemtype="http://schema.org/ItemList">

<dl>
<dt itemprop="name">Skills:</dt>
<dd>

<section id="skills">
<ul class="list1">
<li itemprop="itemListElement">XHTML</li>
<li itemprop="itemListElement">HTML5</li>
<li itemprop="itemListElement">PHP</li>
<li itemprop="itemListElement">JavaScript</li>
<li itemprop="itemListElement">Magento</li>
<li itemprop="itemListElement">WordPress</li>
</ul>
<ul class="list2">
<li itemprop="itemListElement">HTML</li>
<li itemprop="itemListElement">CSS</li>
<li itemprop="itemListElement">MySQL</li>
<li itemprop="itemListElement">jQuery</li>
<li itemprop="itemListElement">CMS Made Simple</li>
<li itemprop="itemListElement">Photoshop</li>
</ul>
</section>

</dd>
</dl>

</div>
<!-- End Skills Section -->

Paso 5: Añade Microdatos de Schema.org - Organization

Después, vamos a añadir el esquema Organization al código estructurado.

Elemento `Itemscope` y el Atributo `Itemtype`

El elemento itemscope y el atributo itemtype para el Schema Organization serán colocados alrededor de cada "Position" enumerada en la sección "Experiencia", de la siguiente forma:


<!-- Position #1 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Block Here

</div>

<!-- Position #2 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Block Here

</div>

<!-- Position #3 -->
<div itemscope itemtype="http://schema.org/Organization">

Rest of Code Block Here

</div>

Atributos `Itemprop`

Añade el atributo "itemprop" siempre que sea indicado mediante las etiquetas <span></span>. Más abajo están los atributos que usaremos para este esquema:

Esquema Organization

itemprop = "jobTitle"
itemprop = "name"
itemprop = "description"

Código Final para la Sección de la Experiencia


<section id="experience">

<!-- Position #1 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2 class="top"><span itemprop="jobTitle">Web Developer / Designer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 1</span></p>
<p class="time">February 2009 &#45; Present</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>

</div>

<!-- Position #2 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 2</span></p>
<p class="time">November 2007 &#45; February 2009</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</p>

</div>

<!-- Position #3 -->
<div itemscope itemtype="http://schema.org/Organization">

<h2><span itemprop="jobTitle">Web Developer / Programmer</span></h2>
<p class="bus1"><span itemprop="name">Company Name 3</span></p>
<p class="time">March 2006 &#45; November 2007</p>

<p itemprop="description">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

</div>

</section>

Paso 6: Añade Microdatos Schema.org - Article

Ahora vamos a añadir al código del esquema Article.

El elemento `Itemscope` y el Atributo `Itemtype` para Article

El elemento itemscope y el atributo itemtype para el Schema Article serán colocados en el "Article" incluido en la Sección Publicaciones de la siguiente forma:


<section id="publications">
<div itemscope itemtype="http://schema.org/Article">

Rest of Code Block Here

</div>
</section>

Atributos `Itemprop`

Añade el atributo "itemprop" siempre que esté indicado usando las etiquetas . Más abajo tenemos los atributos de este esquema que vamos a usar:

Esquema Article

itemprop = "name"
itemprop = "url"

El Código Final para la Sección de las Publicaciones


<section id="publications">
<div itemscope itemtype="http://schema.org/Article"><span itemprop="name">
<a itemprop="url" href="http://net.tutsplus.com/tutorials/php/how-to-create-an-advanced-twitter-widget/" target="_blank" title="How to Create an Advanced Twitter Widget">"How to Create an Advanced Twitter Widget"</a></span>, <a href="http://net.tutsplus.com/" target="_blank" title="Nettuts+">Nettuts+</a>, 8/25/11
</div>
</section>

Paso 7: Añade Microdatos Schema.org - EducationalOrganization y PostalAddress

Después vamos a añadir los esquemas EducationalOrganization y PostalAddress al código.

El Elemento `Itemscope` y el Atributo `Itemtype` para EducationalOrganization

El elemento itemscope y el atributo itemtype para el Schema EducationalOrganization se colocan en la Sección dedicada a la Formación de la siguiente forma:


<section id="education">
<div itemscope itemtype="http://schema.org/EducationalOrganization">

Rest of Code Block Here

</div>
</section>

El elemento `Itemscope` y el Atributo `Itemtype` para PostalAddress

El elemento itemscope y el atributo itemtype para el Schema PostalAddress están anidados dentro del Schema EducationalOrganization y están colocados alrededor del código que contiene la información de la dirección dentro de la sección de Formación de la siguiente manera:


<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">2801 Bancroft Street</span>
<br />
<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
</div>

Atributos `Itemprop`

Añade el atributo "itemprop" siempre que sea apropiado usando las etiquetas <span></span>. Abajo tienes los atributos que usaremos para estos esquemas:

Esquema EducationalOrganization

itemprop = "name"
itemprop = "url"

Esquema PostalAddress

itemprop = "streetAddress"
itemprop = "addressLocality"
itemprop = "addressRegion"
itemprop = "postalCode"
itemprop = "addressCountry"

Código Final para la Sección Formación


<section id="education">
<div itemscope itemtype="http://schema.org/EducationalOrganization">

<p class="bus1"><span itemprop="name">University of Toledo</span></p>

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">2801 Bancroft Street</span>
<br />
<span itemprop="addressLocality">Toledo</span>, <span itemprop="addressRegion">Ohio</span>, <span itemprop="postalCode">43606</span><span itemprop="addressCountry">U.S.A.</span>
</div>

<p class="summary"><span itemprop="name">Web Design</span></p>
<p class="time">2003 &#45; 2005</p>

<p class="edu-info">
<a itemprop="url" href="http://www.utoledo.edu/" target="_blank" title="University of Toledo">www.utoledo.edu</a>
</p>

</div>
</section>

Sobre el Código para Authorship

La imagen muestra el esquema del código para Authorship (John Resig) mostrado en los resultados de Google.

En junio de 2011, Google empezó a admitir "Authorship Markup". A través del uso de código, como rel="author" y rel="me", con el los motores de búsqueda podrán identificar contenido creado por un mismo autor en todo Internet. Al usar el esquema de código para Authorship, una web con múltiples autores podría enlazar todos los artículos y entradas escritos por cada autor a una página específica para cada autor.

Los artículos y las entradas de una web de varios autores necesitan ser enlazados a la página de autor adecuada usando la etiqueta rel="author". Si la página del autor también incluye un enlace al perfil del autor en Google usando la etiqueta rel="me", la información sobre el autor podría aparecer también en los resultados de búsqueda de Google.

Para ayudar a los usuarios a descubrir contenido de calidad, Google está experimentando con la forma de mostrar la información de los autores en los resultados de los motores de búsqueda. Esta característica está siendo lanzada gradualmente y podría llegar a ser una parte muy importante en los resultados de del motor de búsqueda y en el posicionamiento.

Etiquetas Rel

Tanto los Enlaces de la sección de Contacto como los de la sección de Medios Sociales del currículum en la plantilla del sitio de una página contienen URLs que enlazan a un sitio web principal externo y a páginas en medios sociales. El atributo "rel" necesita añadirse a los enlaces de estas secciones de forma que el Código Authorship pueda ser implementado. El Markup Authorship permite a los motores de búsqueda identificar contenido creado por el mismo autor en todo Internet.

Existen dos etiquetas específicas para rel usadas dentro del código Authorship:

rel = "me"
rel = "autor"

La mayoría de los enlaces incluidos en la página web del currículum apuntan a sitios relativos a la misma persona. Así que la etiqueta rel="me" ha sido añadida. Para el enlace del Perfil de Google, se ha añadido la etiqueta rel="author". Dependiendo de en dónde publiques tu currículum, podrías necesitar usar en cambio la etiqueta rel="me" para tu enlace al Perfil de Google.

Paso 8: Crea un Perfil de Google

Si quieres empezar identificando tu contenido original a través de Internet usando Código Estructurado para Authorship, primero necesitas crear un Perfil de Google.

Si ya dispones de una página de Perfil de Google, entonces deberías actualizar la información de tu perfil para que esté en consonancia (añade una foto de perfil, información sobre ti, ocupación, etc.).

También necesitas asegurarte de que se muestra una pestaña +1 en la página.

Si tu perfil de Google incluye una buena, directa y clara visión sobre ti, optará a aparecer como miniatura en los resultados de búsqueda.

Paso 9: Crea Enlaces en Página(s) Web Hacia Tu Perfil

Según Google, para establecer la autoría de una página web, necesitas hacer dos cosas:

Coloca un enlace en esa página web hacia tu Perfil de Google
Actualiza tu Perfil de Google con un enlace de vuelta hacia la página de inicio de la web.

Puedes enlazar tu contenido a tu Perfil de Google usando un enlace de texto:

1
2	<a href="[https://plus.google.com/your_profile]?rel=me">Google+</a>

o hacerlo a través del código que te proporciona Google Profile Button:

1
2	<a rel="me" href="https://profiles.google.com/your_profile">
3	<img src="http://www.google.com/images/icons/ui/gprofile_button-32.png" width="32" height="32">
4	</a>

Google recientemente realizó cambios en las instrucciones de la estructura del código para la autoría que afectan al uso de las etiquetas rel="author" y rel="me". Las nuevas instrucciones indican que debemos usar rel="author" tanto para los enlaces en forma de texto como los de botón. En cualquier caso, la etiqueta rel="me" necesita usarse en lugar de rel="author". Observa la captura de pantalla de abajo.

Captura de pantalla de "Error: La página de perfil del autor no dispone de un enlace rel=me hacia un Perfil de Google".

Usando Jonh Resig como ejemplo:

En la Página About de la página web principal de John Resig, éste creó un enlace a su Perfil de Google usando rel="me"
John Resig enlaza desde su Perfil de Google Plus hacia la Página de Inicio y la Página Sobre Mí de su web principal.

Paso 10: Completa el Formulario Google Authorship (¡Importante!)

Una vez hayas añadido los microdatos de Schema.org y hayas completado los pasos 8 y 9, completa y envía el Formulario de Solicitud de Autoría de Google.

Tu Código Estructurado para la Autoría no funcionará correctamente hasta que el Formulario de Autoría de Google haya sido completado y enviado.

Paso 11: Comprueba el Código de los Microdatos Empleando la Herramienta de Comprobación para los Fragmentos Enriquecidos

Pulsa sobre la imagen para ver los resultados completos de la prueba

Puedes cerciorarte de que Google es capaz de procesar y mostrar el código de tus microdatos en los resultados de búsqueda comprobando tu página con la Herramienta para Comprobar los Fragmentos Enriquecidos. Esta herramienta puede revisar varios tipos de código de datos estructurados, entre los que se incluyen los Microdatos, los Micro Formatos y RDFa.

Nota: La Herramienta de Comprobación para los Fragmentos Enriquecidos de Google está en modo Beta y podría dar resultados inesperados. Los resultados mostrados en la captura de pantalla al completo incluyen un error "Advertencia: Falta rellenar el campo fn." Schema.org no usa la etiqueta "fn", sin embargo la etiqueta se usa con los Microformatos. Esto es probablemente un error.

¡Hecho!

Ahora ya has creado un buen currículum online usando HTML5 y Microdatos de Schema.org, lo que proporciona información sobre ti que podría mostrarse en los resultados de los motores de búsqueda. Adicionalmente, al usar Código Estructurado para la Autoría, ¡ayudas a los motores de búsqueda a identificar todo tu contenido original que esté distribuido por Internet!

¿Te queda alguna duda? Cuéntanoslo en los comentarios, ¡y muchas gracias por leer este artículo!

Cómo Crear un Currículum Potenciado con Microdatos HTML5

¡Elementos Extra Incluídos!

Paso 1: El CSS

Paso 2: La Estructura del Código (Sin los Microdatos de Schema.org Incluídos)

Algunas Notas Relativas a la Estructura del Código

Adición al HTML5

Listas de Definición

Diferencias entre Secciones y Artículos

Paso 3: Añade Microdatos de Schema.org - Person y PostalAddress

El Elemento Itemscope y el Atributo Itemtype

Atributos Itemprop

Esquema Person

Esquema PostalAddress

Código Final para los Enlaces de las Secciones Contacto y Medios Sociales

Paso 4: Añade Microdatos de Schema.org - Item List

El elemento Itemscope y el Atributo Itemtype

Atributos Itemprop

Esquema ItemList

Código de la Estructura para la Sección de Habilidades

Paso 5: Añade Microdatos de Schema.org - Organization

Elemento Itemscope y el Atributo Itemtype

Atributos Itemprop

Esquema Organization

Código Final para la Sección de la Experiencia

Paso 6: Añade Microdatos Schema.org - Article

El elemento Itemscope y el Atributo Itemtype para Article

Atributos Itemprop

Esquema Article

El Código Final para la Sección de las Publicaciones

Paso 7: Añade Microdatos Schema.org - EducationalOrganization y PostalAddress

El Elemento Itemscope y el Atributo Itemtype para EducationalOrganization

El elemento Itemscope y el Atributo Itemtype para PostalAddress

Atributos Itemprop

Esquema EducationalOrganization

Esquema PostalAddress

Código Final para la Sección Formación

Sobre el Código para Authorship

Etiquetas Rel

Paso 8: Crea un Perfil de Google

Paso 9: Crea Enlaces en Página(s) Web Hacia Tu Perfil

Paso 10: Completa el Formulario Google Authorship (¡Importante!)

Paso 11: Comprueba el Código de los Microdatos Empleando la Herramienta de Comprobación para los Fragmentos Enriquecidos

¡Hecho!

El Elemento `Itemscope` y el Atributo `Itemtype`

Atributos `Itemprop`

El elemento `Itemscope` y el Atributo `Itemtype`

Atributos `Itemprop`

Esquema `ItemList`

Elemento `Itemscope` y el Atributo `Itemtype`

Atributos `Itemprop`

El elemento `Itemscope` y el Atributo `Itemtype` para Article

Atributos `Itemprop`

El Elemento `Itemscope` y el Atributo `Itemtype` para EducationalOrganization

El elemento `Itemscope` y el Atributo `Itemtype` para PostalAddress

Atributos `Itemprop`