From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../html/atributos_globales/itemscope/index.html | 284 +++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 files/es/web/html/atributos_globales/itemscope/index.html (limited to 'files/es/web/html/atributos_globales/itemscope') diff --git a/files/es/web/html/atributos_globales/itemscope/index.html b/files/es/web/html/atributos_globales/itemscope/index.html new file mode 100644 index 0000000000..b57fc1c6bc --- /dev/null +++ b/files/es/web/html/atributos_globales/itemscope/index.html @@ -0,0 +1,284 @@ +--- +title: itemscope +slug: Web/HTML/Atributos_Globales/itemscope +tags: + - Ejemplo + - itemscope + - itemtype +translation_of: Web/HTML/Global_attributes/itemscope +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

itemscope es un atributo global booleano que define el scope asociado del metadata. Especificando el atributo itemscope en un elemento crea un nuevo item, cuyos resultados estan en los numeros de pares name-value asociados con el elemento. Un atributo relativo, {{htmlattrxref("itemtype")}}, es usado para especificar el URL valido de un medio/recipe (como lo es schema.org) que describe que el item es de propiedad contextual. En cada uno de los siguientes ejemplos, el medio/recipe es de schema.org.

+ +

Todos los elementos HTML pueden tener un atributo itemscope especifico. Un elemento itemscope no tiene un asociado itemtype pero tiene un sociado itemref.

+ +
+

Nota: Encuentra mas acerca del atributo itemtype en http://schema.org/Thing

+
+ +

Ejemplo simple

+ +

HTML

+ +

El siguiente ejemplo especifica que el atributo itemscope. El ejemplo especificado en el itemtype es "http://schema.org/Movie", y especifica tres atributos itemprop relativos.

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="nombre">Avatar</h1>
+  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
+  <span itemprop="genero">Ciencia ficcion</span>
+  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
+</div>
+
+ +

 

+ +

Esctructura de informacion

+ +

La siguiente tabla muestran los datos esctructurados mostrados en el anterior ejemplo.

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgeneroCiencia Ficcion
itempropnombreAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
+ +

itemscope Atributos ID

+ +

Cuando especificas el atributo itemscope para un elemento, un nuevo item es creado. El item consiste de un grupo de pares de name-value. Para elementos con un atributo itemscope y un atributo itemtype, podrias tambien especificar un {{htmlattrxref("id")}} attribute. Puedes usar el atributo id para establecer un identificador global para el nuevo item. Un identificador global permite que los items relativos a otros items encuentren paginas atraves de la Web.

+ +

Ejemplo

+ +

Hay 4 atributos itemscope en el siguiente ejemplo. Cada atributo itemscope establecen el scope correspondiente a sus atributos itemtype. El itemtypes, Recipe, AggregateRating, y NutritionInformation en el siguiente ejemplo son parte de la informacion estructura por medio de schema.org, se especifico el primer itemtype, http://schema.org/Recipe.

+ +
<div itemscope itemtype="http://schema.org/Recipe">
+<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
+<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+<span itemprop="name">Carol Smith</p></span>
+</span>
+<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
+November 5, 2009</p></time>
+<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
+ <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
+ <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
+Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
+ Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
+ Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
+ Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
+ <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
+ Serving size: <span itemprop="servingSize">1 medium slice<br></span>
+ Calories per serving: <span itemprop="calories">250 cal<br></span>
+ Fat per serving: <span itemprop="fatContent">12 g<br></span>
+</span>
+<p>Ingredients:<br>
+  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+ ... </p>
+
+Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

Resultados

+ +

HTML

+ +

Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejemplo.

+ +

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

+ +

Structured data

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeMedio/Recipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
+ +
+

Note: Una herramienta practica para extraer estructuras microdata del HTML es Structured Data Testing Tool de Google. Pruebalo en el HTML del ejemplo anterior.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionesEstadosComentario
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
+ + + + + +

{{Compat("html.global_attributes.itemscope")}}

+ +

Ver tambien

+ + -- cgit v1.2.3-54-g00ecf