Existe una nueva forma de marcar una frontera semántica en HTML5, se trata de las nuevas posibilidades que tenemos de definir una estructura semántica más fuerte y más personalizada utilizando los microdatos (microdata) que nos van a permitir desarrollar mejor las estructura web dándole una gran prioridad al trabajo del SEO y la indexación a los diferentes buscadores. Los microdatos van a permiten especificar, elementos personalizados en una página Web mediante la sintaxis compuesta de pares nombre-valor con el contenido existente, para entender mejor esto de los Microdatos vamos a ver cómo hacerlo:
Así que vamos a comenzar creando una estructura de un documento HTML5:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"/> <meta name="description" content="curso html5 desde 0" /> <title>Mi primera web en html5</title></head><body> <header> <hgroup> <h1>Mi curso de html5</h1> <h2>Aprende desde 0</h2> </hgroup> <nav> </nav> </header> <article> </article> <aside> </aside> <footer> </footer></body></html> |
Como bien sabemos estas nuevas etiquetas de HTML nos van a ayudar mucho para la comunicación con el navegador ya que el va a saber que es un <nav>, que es un <header>, que es un <article> y así toda la estructura de un documento HTML5 con sus nuevas etiquetas.
¿Pero como hago para dar una mejor indexación a lo que es un nombre de una persona, su teléfono, su dirección y así una datos más específicos aparte de las etiquetas estructurales ya establecidas, pero que también nos comunicara el contenido y lo que se refiere de el al navegador?
Para eso están los Microdatos, para trabajar con ellos vamos a requerir 3 elementos,
1º – Requiere un <itemscope> que es un contenedor de datos
2º – Requiere <itemprop> que es el dato propiamente, es decir lo que utilizamos para agregar la propiedad.
3º – Requiere <itemtype> Definimos el vocabulario que vamos a utilizar, es decir donde definimos los datos de la persona
Vamos a ver un Claro ejemplo definiendo algunos de mis datos:
1
2
3
4
5
6
7
| <div itemscope itemtype="<a href="http://www.data-vocabulary.org/Person/" target="_blank">http://www.data-vocabulary.org/Person/</a>"> <p>Mi nombre es Johan Ricardo, Soy diseñador Web, Mi web es: http://johanricardo.260mb.com, Vivo en Colombia</p></div> |
Bien, ya tenemos definido lo que es el <itemscope> por medio de un div, y con el itemtype lo que hacemos es definir los datos donde el navegador va a recoger ciertos datos que se daran como las propiedades de cada dato pero ¿Cómo sabe el navegador cual es mi nombre y cuál es mi profesión y cuál es mi pagina web?, pues realmente la respuesta es negativa, el navegador no sabrá nada, claro está, hasta ahora no sabe nada. Por lo tanto tengo que utilizar la etiqueta <itemprop>, y seria asi:
1
2
3
4
5
6
7
8
| <div itemscope itemtype="<a href="http://www.data-vocabulary.org/Person/" target="_blank">http://www.data-vocabulary.org/Person/</a>"> <p> Mi nombre es <span itemprop=”name”>Johan Ricardo,</span> Me dicen <span itemprop=”nick”> Johanso</span> <span itemprop=”tittle”>Soy diseñador web </span> Mi web es: <span itemprop=”url”>http://johanricardo.260mb.com, </span> Mi twitter es: <span itemprop=”contact”>@tutosytips</span></p></div> |
Después de esto el navegador sabrá cual es mi nombre porque le he puesto la propiedad name, cual es mi apodo por medio de la propiedad Nick y así los demás datos serán interpretados correctamente.Para saber las diferentes propiedades del itemprop ve a esta dirección: http://www.data-vocabulary.org/Person/).
En resumen: los microdatos son una mejora para la web, ya que van a permitir a los motores de búsquedas como Google y demás, que la información sea fácilmente indexada, y así detecten todo tipo de información por ejemplo la información del usuario, esto es algo poderoso que realmente debemos utilizar en nuestros proyectos.
- See more at: http://www.tutosytips.com/dia-6-hablemos-de-los-microdatos-en-html5-microdata/#sthash.onfBh4in.dpuf
Fuente:enlace
No hay comentarios:
Publicar un comentario