comunidades

Día #7 Hablemos de los Microdatos en Html5 (Microdata)



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:
<!DOCTYPE html>

<html

<head>

<meta charset"UTF-8"/>

<meta "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:
<div itemscopeitemtype"<a href="httpwwwdatavocabularyorgPerson" target="blank" data-mce-href="httpwwwdatavocabularyorgPerson">http://www.data-vocabulary.org/Person/</a>"

<p>Mi nombre es Pablo Francisco,

    Soy desarrolladr Web,

    Mi web es: http://pablomfrancisco.blogspot.com,

    Vivo en Uruguay

</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:
itemscope itemtype"<a href="vocabularyPerson" target="_blank" data-mce-href="vocabularyPerson">http://www.data-vocabulary.org/Person/</a>"

<p>nombre itemprop""Pablo Francisco

dicenitemprop""Pablo

itemprop"tittle"ñ

itemprop""pablomfranciscogmail.com

twitter itemprop"contact"pixshar

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.

Para más información acerca de los Microdatos en HTML ve a esta dirección: http://www.w3.org/TR/html5/microdata.html

Fuente: este post proviene de Pablo M. Francisco, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

¿Seguro que estamos seguros?

Todos los pagos y compras online, todos los "Me gusta", comentarios, mensajes, twits, chats, todas las gestiones que hacemos por internet dejan un rastro que contiene nuestros datos personal ...

Mobile marketing trends 2015

This my first post in english. Please try to understand any mystakes :). Today 80% of consumers are concerned about mobile marketing. Thousands of mobile phone users world wide were surveied on their ...

Recomendamos

Relacionado

general desarrollo web html5 ...

Día #10 Hablemos de los Videos en HTML5

En este tutorial o artículo, vamos a ver de pronto no todo acerca los videos en HTML5 pero si lo más relevante e importante de esta nueva etiqueta Video. HTML ha hecho cambios muy grandes en la web, que quizás la gente común no note pero a los que trabajamos en este campo se no se nos hacen grandioso, una de estas mejores es la de poder incluir directamente video y audio en el código, para depende ...

general desarrollo web html5 ...

Dia #3 – Estructura básica de html5

Estructura básica Aunque gran parte de la atención que se tiene sobre HTML5 gira en torno a las nuevas API, y sus 30 nuevos elementos con la nueva semántica que se puede utilizar en tradicionales páginas estáticas, también en las franja de controles de formularios. Vamos a tocar un poco el tema de lo básico como veníamos tratando hasta ahora, Vamos a ver un poco la estructura básica y algunas mejo ...

general videos

Tutorial HTML5 y CSS3

Video tutorial de maquetación HTML5 y CSS3 parte 1. Comenzamos una nueva serie en el Blog, después de pedidos iniciamos con los video tutoriales. Aqui el primero: Maquetación en HTML5, CSS3 y Jquery. En esta nueva serie de videotutoriales crearemos un Website completo en HTML5, CSS3, JQuery, Javascript. En este video hablamos sobre las etiquetas semánticas de HTML5 y como darles estilos con CSS3. ...

general desarrollo web html5 ...

Creacion de Juego con HTML5 y JavaScript

En esta nueva serie de tutoriales y videos, veremos los aspectos generales para la creacion de un game con HTML5, JavaScript y jQuery. Bienvenidos a otro tutorial de HTML5!Hoy iniciaremos la creación de un simple videojuego (bastante simple :)), utilizando apenas HTML5 y Javascript. hablaremos de algunos aspectos basicos de programacion con JavaScript, dando por hecho que ya tenés un poco de noció ...

general desarrollo web html5 ...

Día #9 Formularios en HTML5. Nuevos elementos y Nuevos atributos.

Uno de los problemas que teníamos con la versión anterior de HTML es decir la 4, era la validación ya que teníamos que utilizar otra tecnología para su validación, por supuesto con Javascript dábamos el toque que necesitábamos para dar lo que le faltaba a estos formularios. En HTML5 esto se ha solucionado ya que se hicieron unas grandes mejoras para su propia validación y otras para su fácil manej ...

general desarrollo web html5 ...

Dia #2 El nuevo DOCTYPE de html5

El nuevo <! DOCTYPE> Esto es lo primero que encontramos en un documento web. Te reto a que me nombre la cabeza el tipo de documento de XHTML 1.0 Strict o HTML 4.01. No es fácil ¿eh?. El <! DOCTYPE> para la version HTML 4.01: <!DOCTYPE HTML PUBLIC » "-//W3C//DTD HTML 4.01//ES" » "http://www.w3.org/TR/html4/strict.dtd"> Aqui el <! DOCTYPE> para la version ...

general

Curso Blogger: crea tus contenedores

En la anterior entrega aprendimos a crear nuestra primera plantilla. La idea no era copiar y pegar el código que "nos dan hecho", esta vez se trataba de conseguir entender bien cómo y porqué se hace cada cosa en Blogger. Con el mismo espíritu de dominar el código que lo conforma y la filosofía del "poco a poco", hoy continuamos con la "maquetación", el siguiente gran ...

general

Curso Blogger: aprende a utilizar las hojas de estilo

En anteriores entregas aprendimos un poco de HTML básico que nos sirviera de base para luego comprender mejor la plantilla Blogger. Después pasamos a la acción creando nuestra primera plantilla y por último los contenedores de la cabecera, el cuerpo, una barra lateral y el pie del Blog. La idea es no copiar y pegar el código que "nos dan hecho", esta vez se trata de conseguir entender ...

general app móvil html5 ...

HTML5 vs Aplicaciones Nativas.

Pic | pushtechnology.com Las apps para dispositivos móviles han sido una revolución en la forma cómo gestionamos los programas que usamos. Sin duda se trata de un estándar que se ha impuesto en iOS, Android y Windows Phone. Sin embargo, HTML5 continúa avanzando y son varias las aplicaciones que se incrustan directamente en el navegador, y lo hacen con tanta soltura, que cuesta diferenciarlas de la ...

general social

Cómo poner botones para que te sigan en las redes sociales en Blogger

Poner botones para redes sociales con los que tus usuarios puedan seguirte te ayudará a incrementar la presencia de tus contenidos en Internet. Si bien muchas veces preferimos utilizar botones al final de nuestra entradas para que nuestros usuarios compartan si lo desean nuestras entradas, es importante también que puedan seguirnos por las redes sociales si así lo desean. Qué mejor sitio para que ...