Roberto García González
[Link]@[Link]
W EB T ECHNOLOGIES AND S YSTEMS (D EGREE IN C OMPUTER S CIENCE )
DJANGO WEB 3.0 RDFA TUTORIAL
Introduction ..................................................................................................................... 1
Generating the RDFa MarkUp from a Template .......................................................... 1
Generated HTML including RDFa MarkUp .................................................................. 3
Testing the RDFa MarkUp with Google ........................................................................ 4
INTRODUCTION
In order to introduce semantic markup, particularly RDFa markup 1, into a Django application, it is
necessary to modify the templates generating the HTML pages for the application. In this tutorial, it
is illustrated how to add the necessary markup to the restaurant_detail.html template generating
the web page with the details for a particular restaurant.
The markup will be based on vocabularies that are widely recognized by the main search engines
(Google, Yahoo!, Microsoft Bing…) and that are available from [Link]
Particularly, from the [Link] vocabularies, the following types and some of their properties
and corresponding types are used for the semantic markup:
• [Link]
• [Link]
GENERATING THE RDFA MARKUP FROM A TEMPLATE
The starting point is the restaurant details HTML template:
myrestaurants/templates/myrestaurants/restaurant_detail.html
The modified template, as before, continues to extend the base template. It also defines a page title
containing the restaurant name by replacing the default “title” block:
{% extends "myrestaurants/[Link]" %}
{% block title %}MyRestaurants - {{ [Link] }}{% endblock %}
{% block content %}
Then, we introduce a <span> element (not visible) that defines the default vocabulary [Link]
and a new entity of type [Link] We also introduce a property for the
restaurant entity, the name:
<span vocab="[Link] typeof="Restaurant">
<h1>
<span property="name">{{ [Link] }}</span>
{% if user == [Link] %}
(<a href="{% url 'myrestaurants:restaurant_edit' [Link] %}">edit</a>)
{% endif %}
</h1>
The part corresponding to the restaurant address has not been modified, though there are
properties and types that might be useful here. There is not any markup for the dishes list either:
<h2>Address:</h2>
<p>
1 [Link]
Some rights reserved © 2022, Roberto García
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
{{ [Link] }}, {{ [Link] }} <br/>
{{ [Link] }} {{ [Link] }} <br/>
{{ [Link] }} ({{ [Link] }})
</p>
<h2>
Dishes
{% if user.is_authenticated %}
(<a href="{% url 'myrestaurants:dish_create' [Link] %}">add</a>)
{% endif %}
</h2>
<ul>
{% for dish in restaurant.dish_set.all %}
<li>
<a href="{% url 'myrestaurants:dish_detail' [Link] [Link] %}">
{{ [Link] }}</a>
</li>
{% empty %}
<li>Sorry, no dishes for this restaurant yet.</li>
{% endfor %}
</ul>
The main markup is for the reviews. There is first an aggregate rating with the average rating and
the number of reviews. This is a new entity of type AggregateRating connected to the restaurant
through the aggregateRating relation. The AggregateRating has two properties, the ratingValue
and the reviewCount:
<h2>Reviews</h2>
{% if restaurant.restaurantreview_set.all|length > 0 %}
<span rel="aggregateRating">
<p typeof="AggregateRating">
Average rating
<span property="ratingValue">{{ [Link]|stringformat:".1f" }}</span>
{% with restaurant.restaurantreview_set.all|length as reviewCount %}
from <span property="reviewCount">{{ reviewCount }}
</span> review{{ reviewCount|pluralize }}
{% endwith %}
</p>
</span>
Then, each Review entity is connected to the restaurant using the review relation. The review has
a Rating, linked to the Review through the reviewRating property, a description, an author and
a publishDate. The Rating has the properties worstRating with the minimum possible rating,
bestRating for the maximum rating and ratingValue for the actual rating for the review.
<ul rel="review">
{% for review in restaurant.restaurantreview_set.all %}
<li typeof="Review">
<p rel="reviewRating" typeof="Rating">
<span property="worstRating" content="{{ RATING_CHOICES.0.0 }}"></span>
<span property="ratingValue">{{ [Link] }}</span>
star{{ [Link]|pluralize }}
{% with RATING_CHOICES|last as best %}
<span property="bestRating" content="{{ best.0 }}"></span>
{% endwith %}
</p>
<p property="description">{{ [Link] }}</p>
<p>Created by <span property="author">{{ [Link] }}</span> on
<span property="datePublished">{{ [Link] }}</span></p>
</li>
{% endfor %}
</ul>
</span>
{% endif %}
The rest of the template, which also remains unchanged, contains the form to add reviews and the
footer block:
<h3>Add Review</h3>
<form action="{% url 'myrestaurants:review_create' [Link] %}" method="post">
{% csrf_token %}
Message: <textarea name="comment" id="comment" rows="4"></textarea>
<p>Rating:</p>
<p>
Some rights reserved © 2022, Roberto García
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
{% for rate in RATING_CHOICES %}
<input type="radio" name="rating" id="rating{{ [Link] }}"
value="{{ rate.1 }}" />
<label for="choice{{ [Link] }}">{{ rate.1 }}
star{{ rate.0|pluralize }}</label><br />
{% endfor %}
</p>
<input type="submit" value="Review" />
</form>
{% endblock %}
{% block footer %}
Created by {{ [Link] }} on {{ [Link] }}
{% endblock %}
GENERATED HTML INCLUDING RDFA MARKUP
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>MyRestaurants - La Taberna de la Cuarta Esquina</title>
</head>
<body>
<div id="header">
<p>User roberto (<a href="/accounts/logout/?next=/myrestaurants/">logout</a>)</p>
</div>
<div id="sidebar">
<ul><li><a href="/myrestaurants/">Home</a></li></ul>
</div>
<div id="content">
<span vocab="[Link] typeof="Restaurant">
<h1><span property="name">La Taberna de la Cuarta Esquina</span>
(<a href="/myrestaurants/restaurants/1/edit/">edit</a>)
</h1>
<h2>Address:</h2>
<p>
Las Cuatro Esquinas, 16 <br/>
Calahorra <br/>
La Rioja (Spain)
</p>
<h2>Dishes (<a href="/myrestaurants/restaurants/1/dishes/create/">add</a>)</h2>
<ul>
<li><a href="/myrestaurants/restaurants/1/dishes/1/">Parrillada de verduras</a></li>
<li><a href="/myrestaurants/restaurants/1/dishes/3/">Risotto con bacalao y borraja</a></li>
<li><a href="/myrestaurants/restaurants/1/dishes/4/">Chuletón</a></li>
</ul>
<h2>Reviews</h2>
<span rel="aggregateRating">
<p typeof="AggregateRating">
Average rating <span property="ratingValue">4.5</span>
from <span property="reviewCount">2</span> reviews
</p>
</span>
<ul rel="review">
<li typeof="Review">
<p rel="reviewRating" typeof="Rating">
<span property="worstRating" content="1"></span>
<span property="ratingValue">5</span> stars
<span property="bestRating" content="5"></span>
</p>
<p property="description"> La parrillada de verduras es excelente. </p>
<p>Created by <span property="author">roberto</span> on
<span property="publishDate">March 31, 2014</span></p>
</li>
<li typeof="Review">
<p rel="reviewRating" typeof="Rating">
<span property="worstRating" content="1"></span>
<span property="ratingValue">4</span> stars
<span property="bestRating" content="5"></span>
</p>
Some rights reserved © 2022, Roberto García
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
<p property="description">No está mal el chuletón :-)</p>
<p>Created by <span property="author">roberto</span> on
<span property="publishDate">May 10, 2014</span></p>
</li>
</ul>
</span>
<h3>Add Review</h3>
...
</body>
</html>
TESTING THE RDFA MARKUP WITH GOOGLE
In order to test the RDFa markup with the Google, there is the Google Rich Results Test tool
available from:
[Link]
You can paste the HTML generated by the template including the [Link] markup. The output
shows the recovered data, highlighting warnings and errors if any:
Another useful tool to test the generated RDFa, especially its structure, is [Link]
For instance, for the previous RDFa its generates the following visualization that facilitates
checking if the markup is the intended one:
Some rights reserved © 2022, Roberto García
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
Some rights reserved © 2022, Roberto García
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License