class: center, middle, inverse

# Microdata

.footnote[Mateu Yábar]

---
# Microdata
- Especificació d'HTML que permet afegir metadates a contingut existent d'una pàgina.
- Permet que buscadors, aranyes web i navegadors puguin extreure i processar contingut.
- Exemple:
  - cerqueu a un cercador una recepta de cuina (ex: recepta carxofes arrebossades)
  - Veureu que el resultat apareix la imatge de la recepta, temps, etc.

---
# Microdata
- usarem
  - itemscope
      - juntament amb itemtype
      - indica que estem amb un bloc amb contingut del tipus itemtype
  - itemtype
      - Url del vocabulari
  - itemprop
      - Nom de la propietat
      - Opcionalment podem especificar el valor amb content

---
# Microdata - exemple SoftwareApplication
```
<div itemscope itemtype="http://schema.org/SoftwareApplication">
  <span itemprop="name">Angry Birds</span> -

REQUIRES <span itemprop="operatingSystem">ANDROID</span><br>
  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>
```

---
# Microdata - exemple Recipe
```
Mom's World Famous Banana Bread
By John Smith, May 8, 2009
<img src="bananabread.jpg" alt="Banana bread on a plate" />
This classic banana bread recipe comes from my mom -- the walnuts add a nice
 texture and flavor to the banana bread.
Prep Time: 15 minutes
Cook time: 1 hour
Nutrition facts:
240 calories, 9 grams fat
Ingredients:
- 3 or 4 ripe bananas, smashed
- 1 egg
- 3/4 cup of sugar
...
Instructions:
 Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the
 flour last. Pour the mixture into a loaf pan and bake for one hour.
140 comments:
From Janel, May 5 -- thank you, great recipe!
```

---
class: long_code
# Microdata - exemple Recipe
```
<div itemscope itemtype="http://schema.org/Recipe">
	<span itemprop="name">Mom's World Famous Banana Bread</span>
	By <span itemprop="author">John Smith</span>, <meta itemprop="datePublished" content="2009-05-08">May 8, 2009
	<img itemprop="image" src="bananabread.jpg"alt="Banana bread on a plate" />
	<span itemprop="description">This classic banana bread recipe comes from my mom -- the walnuts add a nice texture and flavor to the banana bread.</span>
	Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes
	Cook time: <meta itemprop="cookTime" content="PT1H">1 hour
	
	<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
		Nutrition facts:
		<span itemprop="calories">240 calories</span>,
		<span itemprop="fatContent">9 grams fat</span>
	</div>
	
	Ingredients:
	- <span itemprop="recipeIngredient">3 or 4 ripe bananas, smashed</span>
	- <span itemprop="recipeIngredient">1 egg</span>
	- <span itemprop="recipeIngredient">3/4 cup of sugar</span>
	...
	Instructions:
	
	<span itemprop="recipeInstructions">
		Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour.
	</span>
	140 comments:
	<div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter">
	<meta itemprop="interactionType" content="http://schema.org/CommentAction" />
	<meta itemprop="userInteractionCount" content="140" />
	</div>
	From Janel, May 5 -- thank you, great recipe!
      ...
</div>
```

---
# Vocabularis més usats
- Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries
- Embedded non-text objects: AudioObject, ImageObject, VideoObject
- Event
- Health and medical types: Notes on the health and medical types under MedicalEntity
- Organization
- Person
- Place, LocalBusiness, Restaurant
- Product, Offer, AggregateOffer
- Review, AggregateRating
- Action
- Thing
- Intangible

---
# Bibliografia

- https://developer.mozilla.org/en-US/docs/Web/HTML/Microdata