Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:html:semantic [2023/05/09 00:00] – jcheron
+++ web:html:semantic [2023/05/09 02:31] (Version actuelle) – [Données RDF] jcheron
@@ Ligne 77: / Ligne 77: @@
 ===== Micro-données =====
+<WRAP info round>
+Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de publication, etc.\\
+Elles permettent aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.
+</WRAP>
+==== Exemple : ====
+Utilisation de microdonnées de **schema.org** pour spécifier le type de contenu de la page (http://schema.org/Article), ainsi que les informations sur l'auteur et la date de publication de l'article (itemprop="author" et itemprop="datePublished"), itemprop="headline" pour spécifier le titre de l'article.
 <sxh html>
@@ Ligne 97: / Ligne 105: @@
 		<section>
 			<p>Dans cet article, je vais vous expliquer comment les microdonnées peuvent améliorer la visibilité de votre site web dans les résultats de recherche.</p>
-			<p>Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de publication, etc. Cela permet aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.</p>
+			<p>Les microdonnées permettent de spécifier des informations spécifiques sur le contenu d'une page Web, telles que le type de contenu, l'auteur, la date de
-			<p>En utilisant les microdonnées, vous pouvez également améliorer la présentation des résultats de recherche, en ajoutant des éléments tels que des images, des évaluations, des prix, etc.</p>
+                           publication, etc. Cela permet aux moteurs de recherche de mieux comprendre le contenu de la page et de fournir des résultats de recherche plus pertinents.</p>
+			<p>En utilisant les microdonnées, vous pouvez également améliorer la présentation des résultats de recherche, en ajoutant des éléments tels que des images,
+                           des évaluations, des prix, etc.</p>
 		</section>
 			<footer>
@@ Ligne 107: / Ligne 117: @@
 </html>
 </sxh>
+===== Données RDF =====
+Etabli par le W3C, RDF (Resource Description Framework) est destiné à décrire formellement les ressources Web et leurs métadonnées, afin de permettre le traitement automatique de telles descriptions.
+==== Déclaration de données ====
+Exemple de déclaration de données RDF dans une page :
+<sxh html>
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Ma page avec des métadonnées RDF</title>
+	<meta charset="utf-8">
+	<!-- Ajout des métadonnées RDF -->
+	<script type="application/ld+json">
+		{
+		  "@context": "https://schema.org",
+		  "@type": "Person",
+		  "name": "Jean Dupont",
+		  "jobTitle": "Webmaster",
+		  "url": "https://www.jeandupont.com"
+		}
+	</script>
+</head>
+<body>
+	<h1>Ma page avec des métadonnées RDF</h1>
+	<p>Contenu de ma page...</p>
+</body>
+</html>
+</sxh>
+==== Récupération de données ====
+Il est possible de récupérer des données RDF depuis une autre application (web ou autre) :
+<sxh html>
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Ma page qui récupère des métadonnées RDF</title>
+	<meta charset="utf-8">
+</head>
+<body>
+	<h1>Ma page qui récupère des métadonnées RDF</h1>
+	<p>Le nom de la personne est : <span id="name"></span></p>
+	<p>Le titre de poste de la personne est : <span id="jobTitle"></span></p>
+	<p>L'URL de la personne est : <span id="url"></span></p>
+	<script>
+		const url = "https://www.jeandupont.com"; // L'URL de la page qui contient les métadonnées RDF
+		const headers = { "Accept": "application/ld+json" }; // Le type de contenu que l'on souhaite récupérer
+		fetch(url, { headers })
+			.then(response => response.json())
+			.then(data => {
+				document.getElementById("name").innerText = data.name;
+				document.getElementById("jobTitle").innerText = data.jobTitle;
+				document.getElementById("url").innerText = data.url;
+			})
+			.catch(error => console.error(error));
+	</script>
+</body>
+</html>
+</sxh>