Différences

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

--- web:html:semantic [2023/05/09 00:03] – [Micro-données] jcheron
+++ web:html:semantic [2023/05/09 02:31] (Version actuelle) – [Données RDF] jcheron
@@ Ligne 117: / 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>