--- a/src/hdalab/static/hdalab/css/common.css Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/static/hdalab/css/common.css Thu Nov 27 11:51:36 2014 +0100
@@ -1,141 +1,268 @@
-@font-face
-{
- font-family: "Open Sans"; src: url(OpenSans-Regular.ttf);
-}
-
-@font-face
-{
- font-family: "Open Sans"; font-weight: bold; src: url(OpenSans-Bold.ttf);
+/* ==========================================================================
+ HTML5 display definitions
+ ========================================================================== */
+/**
+ * Correct `block` display not defined in IE 8/9.
+ */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+ display: block;
}
-
-@font-face
-{
- font-family: "Open Sans"; font-style: italic; src: url(OpenSans-Italic.ttf);
+/**
+ * Correct `inline-block` display not defined in IE 8/9.
+ */
+audio,
+canvas,
+video {
+ display: inline-block;
}
-
-@font-face
-{
- font-family: "Open Sans"; font-weight: bold; font-style: italic; src: url(OpenSans-BoldItalic.ttf);
-}
-
-/* Browser-reset CSS */
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+/**
+ * Address styling not present in IE 8/9.
+ */
+/* ==========================================================================
+ Base
+ ========================================================================== */
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS text size adjust after orientation change, without disabling
+ * user zoom.
+ */
+html {
+ font-family: sans-serif;
+ /* 1 */
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-
-input::-moz-focus-inner /*Remove button padding in FF*/
-{
- border: 0;
- padding: 0;
-}
-
-table {
- border-collapse: separate; border-spacing: 0;
-}
-
-th, td {
- vertical-align: top;
-}
-
-img a {
- border: none;
-}
-
-/* Body */
-
-body {
- font-family: "Open Sans", Arial, Helvetica, sans-serif; background: url(../img/bgdhdalab.png) top repeat-x #ffffff; color: #000000; font-size: 10px;
-}
-
-input, textarea {
- font-family: "Open Sans", Arial, Helvetica, sans-serif; background: transparent;
-}
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+ /* 2 */
-a {
- text-decoration: none;
+}
+/**
+ * Remove default margin.
+ */
+body {
+ margin: 0;
+}
+#content {
+ margin: 30px auto 80px;
+ min-height: 400px;
}
-
+/* ==========================================================================
+ Links
+ ========================================================================== */
+/**
+ * Address `outline` inconsistency between Chrome and other browsers.
+ */
+a:focus {
+ outline: thin dotted;
+}
+/**
+ * Improve readability when focused and also mouse hovered in all browsers.
+ */
+a:active,
a:hover {
- text-decoration: underline;
+ outline: 0;
}
-
-/* Main container */
-
-#header {
- position: relative; width: 960px; margin: 0 auto; height: 65px;
+/* ==========================================================================
+ Typography
+ ========================================================================== */
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari 5, and Chrome.
+ */
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+/**
+ * Address styling not present in IE 8/9, Safari 5, and Chrome.
+ */
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
+ */
+b,
+strong {
+ font-weight: bold;
}
-
-#container {
- position: relative; width: 960px; margin: 0 auto; min-height: 800px;
+/**
+ * Address styling not present in Safari 5 and Chrome.
+ */
+dfn {
+ font-style: italic;
}
-
-h1 {
- margin: 5px 0 10px; font-size: 34px;
+/**
+ * Address differences between Firefox and other browsers.
+ */
+hr {
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ height: 0;
+}
+/**
+ * Address styling not present in IE 8/9.
+ */
+mark {
+ background: #ff0;
+ color: #000;
}
-
-h1 a {
- color: #ffffff;
+/**
+ * Correct font family set oddly in Safari 5 and Chrome.
+ */
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, serif;
+ font-size: 1em;
+}
+/**
+ * Improve readability of pre-formatted text in all browsers.
+ */
+pre {
+ white-space: pre-wrap;
}
-
-h1 a:hover {
- color: #e07000;
+/**
+ * Set consistent quote types.
+ */
+q {
+ quotes: "\201C" "\201D" "\2018" "\2019";
}
-
-#nav {
- float: right; list-style: none; margin-top: 3px;
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+small {
+ font-size: 80%;
+}
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
}
-
-#nav li {
- float: left; font-size: 14px; margin-left: 15px; font-weight: bold;
- color: #CCCCCC;
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+/* ==========================================================================
+ Embedded content
+ ========================================================================== */
+/**
+ * Remove border when inside `a` element in IE 8/9.
+ */
+img {
+ border: 0;
}
-
-#nav a {
- color: #ffffff;
+/**
+ * Correct overflow displayed oddly in IE 9.
+ */
+/* ==========================================================================
+ Figures
+ ========================================================================== */
+/**
+ * Address margin not present in IE 8/9 and Safari 5.
+ */
+figure {
+ margin: 0;
}
-
-#nav a:hover {
- color: #e07000;
+/* ==========================================================================
+ Tables
+ ========================================================================== */
+/**
+ * Remove most spacing between table cells.
+ */
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
}
-
-#nav a.actif {
- color: #ffff80;
+/* RESET
+-----------------------------------------------------------------------------------------------------*/
+html {
+ font-size: 62.5%;
+}
+body {
+ color: #28292d;
+ font-family: Arial, Helvetica, sans-serif;
}
-
-#footer {
- width: 100%; float: left; clear: both; background: url(../img/bgdfooter.png) top repeat-x #b1b4c0; padding: 110px 0 20px 0;
+/* GLOBAL
+----------------------------------------------------------*/
+h1,
+h2,
+h3,
+h4,
+h5,
+p {
+ margin: 0;
}
-
-#footer-contents {
- list-style: none; width: 960px; margin: 0 auto; color: #ffffff;
+ul,
+ol {
+ margin: 0;
+ padding: 0;
+}
+ul li {
+ list-style: none;
+}
+a {
+ color: #7cb0bd;
+ text-decoration: none;
+ -webkit-transition: background-color 0.3s ease;
+ -moz-transition: background-color 0.3s ease;
+ -o-transition: background-color 0.3s ease;
+ transition: background-color 0.3s ease;
+}
+a:hover {
+ color: #4f5451;
}
-
-#footer-contents li {
- float: left; width: 240px;
+/* FONTS
+----------------------------------------------------------*/
+@font-face {
+ font-family: 'FranklinGothic';
+ src: url('../fonts/itcfranklingothicstd-med.eot');
+ src: url('../fonts/itcfranklingothicstd-med.eot') format('embedded-opentype'), url('../fonts/itcfranklingothicstd-med.woff2') format('woff2'), url('../fonts/itcfranklingothicstd-med.woff') format('woff'), url('../fonts/itcfranklingothicstd-med.ttf') format('truetype'), url('../fonts/itcfranklingothicstd-med.svg#ITCFranklinGothicStdMedium') format('svg');
+ font-weight: normal;
+}
+@font-face {
+ font-family: 'FranklinGothic';
+ src: url('../fonts/itcfranklingothicstd-demi.eot');
+ src: url('../fonts/itcfranklingothicstd-demi.eot') format('embedded-opentype'), url('../fonts/itcfranklingothicstd-demi.woff2') format('woff2'), url('../fonts/itcfranklingothicstd-demi.woff') format('woff'), url('../fonts/itcfranklingothicstd-demi.ttf') format('truetype'), url('../fonts/itcfranklingothicstd-demi.svg#ITCFranklinGothicStdDemi') format('svg');
+ font-weight: bold;
}
-
-#footer-contents p {
- font-size: 13px; margin: 2px 0;
+@font-face {
+ font-family: 'FranklinGothic';
+ src: url('../fonts/fgb.eot');
+ src: url('../fonts/fgb.eot') format('embedded-opentype'), url('../fonts/fgb.woff2') format('woff2'), url('../fonts/fgb.woff') format('woff'), url('../fonts/fgb.ttf') format('truetype'), url('../fonts/fgb.svg#FranklinGothicBookRegular') format('svg');
+ font-weight: 300;
}
-
-#footer-contents img {
- display: block; margin: 0 auto;
+/* COMMON
+-----------------------------------------------------------------------------------------------------*/
+.row {
+ width: 960px;
+ margin: 0 auto;
+ position: relative;
}
+.row:before,
+.row:after {
+ content: " ";
+ display: table;
+}
+.row:after {
+ clear: both;
+}
--- a/src/hdalab/static/hdalab/css/facettes.css Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/static/hdalab/css/facettes.css Thu Nov 27 11:51:36 2014 +0100
@@ -11,9 +11,14 @@
}
.barrebloc {
- float: left; width: 473px; border: 1px solid #b0b0b0;
- background-image: url(../img/bgdhdalab.png); background-position: 0 -22px; background-repeat: repeat-x; cursor: pointer; cursor: hand;
- border-top-left-radius: 4px; border-top-right-radius: 4px
+ float: left;
+ width: 473px;
+ border: 1px solid #b0b0b0;
+ background: linear-gradient(to bottom, rgba(153,153,153,1) 0px,rgba(255,255,255,1) 100px);
+ cursor: pointer;
+ cursor: hand;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px
}
.barrebloc h2 {
@@ -30,9 +35,14 @@
}
.corpsbloc {
- float: left; width: 465px; border: 1px solid #b0b0b0; padding: 8px 4px; border-top-style: none;
- background-color: #ffffff; background-image: url(../img/bgdhdalab.png); background-position: 0 -62px; background-repeat: repeat-x;
- border-bottom-left-radius: 4px; border-bottom-right-radius: 4px
+ float: left;
+ width: 465px;
+ border: 1px solid #b0b0b0;
+ padding: 8px 4px;
+ border-top-style: none;
+ background: linear-gradient(to bottom, rgba(153, 153, 153, 0.5) 0px, rgba(255, 255, 255, 0) 100px) repeat scroll 0 0 rgba(0, 0, 0, 0);
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px
}
#hdatitle {
@@ -242,7 +252,7 @@
}
.leaflet-container {
- background: #e3e9fd url(../img/bgmap.png);
+ background: linear-gradient(to bottom, rgba(153,153,153,1) 0%,rgba(244,244,244,1) 50%,rgba(153,153,153,1) 100%);
}
#tagcloud {
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hdalab/static/hdalab/css/footer.css Thu Nov 27 11:51:36 2014 +0100
@@ -0,0 +1,39 @@
+#footer {
+ font-weight: 300;
+ font-family: 'FranklinGothic', Arial, Helvetica, sans-serif;
+}
+#footer .nav {
+ color: #fff;
+ background-color: #7cb0bd;
+}
+#footer .nav ul {
+ float: left;
+ padding: 6px 0;
+}
+#footer .nav ul:before,
+#footer .nav ul:after {
+ content: " ";
+ display: table;
+}
+#footer .nav ul:after {
+ clear: both;
+}
+#footer .nav ul li {
+ float: left;
+ color: #fff;
+ font-size: 14.5px;
+ font-size: 1.45rem;
+ text-transform: uppercase;
+ font-weight: 300;
+}
+#footer .nav ul li:before {
+ content: "/";
+ float: left;
+}
+#footer .nav ul li:first-child:before {
+ display: none;
+}
+#footer .nav ul a {
+ color: inherit;
+ padding: 0 8px;
+}
\ No newline at end of file
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hdalab/static/hdalab/css/head.css Thu Nov 27 11:51:36 2014 +0100
@@ -0,0 +1,102 @@
+#header {
+ background: url(../img/bg-header.jpg) center top no-repeat;
+ border-bottom: 1px solid #4f5451;
+ -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+}
+#header .top {
+ padding-bottom: 2px;
+ background-color: rgba(255, 255, 255, 0.3);
+}
+#header #logo {
+ padding: 20px 0 15px;
+}
+#header #logo img {
+ display: block;
+}
+#header nav {
+ padding: 15px 0;
+ background-color: #f8f8f8;
+ position: relative;
+ font-weight: 300;
+ font-family: 'FranklinGothic', Arial, Helvetica, sans-serif;
+ text-transform: uppercase;
+ background-color: rgba(248, 248, 248, 0.7);
+ -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+ -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+ box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
+}
+#header nav:after {
+ content: "";
+ width: 100%;
+ height: 2px;
+ top: 100%;
+ display: block;
+ left: 0;
+ position: absolute;
+ background-color: rgba(248, 248, 248, 0.5);
+}
+#header nav .profile {
+ float: right;
+}
+#menu {
+ float: left;
+ margin-top: 3px;
+}
+#menu:before,
+#menu:after {
+ content: " ";
+ display: table;
+}
+#menu:after {
+ clear: both;
+}
+#menu li {
+ float: left;
+ color: #2d2b25;
+}
+#menu li:before {
+ content: "/";
+ float: left;
+ margin-top: 2px;
+}
+#menu li:first-child:before {
+ content: "";
+}
+#menu li:first-child a {
+ padding-left: 0;
+}
+#menu li.actif a {
+ font-weight: normal;
+}
+#menu a {
+ color: inherit;
+ padding: 0 8px;
+ font-size: 14.6px;
+ font-size: 1.46rem;
+}
+#subhead{
+ margin:30px auto;
+ width: 960px;
+ font-family: "FranklinGothic",Arial,Helvetica,sans-serif;
+ font-weight: 300;
+ text-transform: uppercase;
+}
+#subhead h3 {
+ font-weight: normal;
+ color: inherit;
+ font-size: 1.46rem;
+ padding: 0 8px;
+}
+#subhead h3:before {
+ content: "/";
+ font-weight: bold;
+ margin-right: 3px;
+ position: relative;
+}
+.bg-wrap {
+ background-color: rgba(0, 0, 0, 0.15);
+ border-radius: 2px;
+ padding: 12px 10px;
+}
--- a/src/hdalab/static/hdalab/css/index.css Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/static/hdalab/css/index.css Thu Nov 27 11:51:36 2014 +0100
@@ -1,83 +1,67 @@
-@font-face
-{
- font-family: "Droid Serif"; src: url(DroidSerif-Regular.ttf);
-}
-
-@font-face
-{
- font-family: "Droid Serif"; font-weight: bold; src: url(DroidSerif-Bold.ttf);
-}
-
-@font-face
-{
- font-family: "Droid Serif"; font-style: italic; src: url(DroidSerif-Italic.ttf);
+/* PAGES
+-----------------------------------------------------------------------------------------------------*/
+#content .all-title {
+ margin: 0px 0 20px;
}
-
-@font-face
-{
- font-family: "Droid Serif"; font-weight: bold; font-style: italic; src: url(DroidSerif-BoldItalic.ttf);
+#content .all-title:before,
+#content .all-title:after {
+ content: " ";
+ display: table;
}
-
-#container h2 {
- text-align: center; font-size: 24px; font-style: italic; font-weight: bold; color: #999; margin: 20px 0;
- font-family: "Droid Serif", "Times New Roman", Times, serif;
-}
-
-#container h3 {
- color: #666; font-weight: bold; font-size: 18px; text-transform: uppercase; margin: 20px 0 5px;
+#content .all-title:after {
+ clear: both;
}
-
-#container h4 {
- color: #666; font-weight: bold; font-size: 16px; margin: 0; padding: 10px 0 5px; clear: both;
-}
-
-#container p, #container li {
- font-size: 13px; margin: 5px 0;
- font-family: "Droid Serif", "Times New Roman", Times, serif;
-}
-
-#container ul {
- padding-left: 18px;
+#content h3{
+ font-size: 15px;
+ font-size: 1.5rem;
+ font-weight: 300;
+ font-family: 'FranklinGothic', Arial, Helvetica, sans-serif;
+ letter-spacing: -0.04em;
+ text-transform: uppercase;
}
-
-#container strong {
- font-weight: bold;
-}
-
-.liste {
- clear: both;
+#content h3:before {
+ content: "/";
+ font-weight: bold;
+ margin-right: 3px;
+ position: relative;
}
-
-.bloc-appli {
- width: 310px; float: left;
+.bloc-appli-left,
+.bloc-appli-middle,
+.bloc-appli-right {
+ width: 270px;
+ float: left;
}
-
-.separateur-applis {
- width: 15px; height: 100px; float: left;
-}
-
-.fond-bloc {
- cursor: pointer; height: 290px; margin: 5px 0 15px; padding: 5px;
+.bloc-appli-left,
+.bloc-appli-middle{
+ padding-right:70px;
}
.overlay-bloc {
- padding: 5px 10px; background: rgba(255, 190, 100, 0.85); display: none;
+ padding: 5px 10px;
+ background: rgba(224, 224, 224, 0.93);
+ display: none;
}
-
p.goto {
- text-align: right; font-size: 20px;
+ text-align: right;
+ font-size: 20px;
}
#bloc-facettes {
- background: url(../img/facettes-thumb.jpg);
+ background: url(../img/facettes-thumb.jpg) no-repeat;
+ background-size: 258px 260px;
+ height:258px;
}
#bloc-categories {
- background: url(../img/categories-thumb.jpg);
+ background: url(../img/categories-thumb.jpg) no-repeat;
+ background-size: 258px 260px;
+ height:258px;
}
#bloc-thesaurus {
- background: url(../img/thesaurus-thumb.jpg);
+ background: url(../img/thesaurus-thumb.jpg) no-repeat;
+ background-size: 258px 260px;
+ height:258px;
}
.mini-table {
@@ -87,3 +71,11 @@
.half-bloc {
float: left; width: 470px; margin-right: 10px;
}
+.description {
+ font-size: 14px;
+ font-size: 1.4pm;
+}
+.liste-applis h3 {
+ font-size: 15px;
+ margin-bottom: 7px;
+}
--- a/src/hdalab/static/hdalab/css/thesaurus.css Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/static/hdalab/css/thesaurus.css Thu Nov 27 11:51:36 2014 +0100
@@ -16,7 +16,7 @@
font-size: 12px;
}
-.explain p, li {
+.explain p{
margin: 5px 0;
}
--- a/src/hdalab/templates/base.html Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/templates/base.html Thu Nov 27 11:51:36 2014 +0100
@@ -14,6 +14,8 @@
{% block css_import %}
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/common.css' %}" />
+ <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/head.css' %}" />
+ <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/footer.css' %}" />
{% endblock %}
{% block js_import %}
@@ -22,52 +24,67 @@
</head>
<body>
{% block header %}
- <div id="header">
- <ul id="nav">
- <li><a class="{% block home_actif %}{% endblock %}" href="{% url 'home' %}">Accueil</a></li>
- <li>—</li>
- <li><a class="{% block facettes_actif %}{% endblock %}" href="{% url 'facettes' %}">Facettes</a></li>
- <li><a class="{% block categories_actif %}{% endblock %}" href="{% url 'categories' %}">Catégories de Wikipedia</a></li>
- <li><a class="{% block thesaurus_actif %}{% endblock %}" href="{% url 'thesaurus' %}">Thésaurus</a></li>
- <li>—</li>
- <li><a class="{% block renkans_actif %}{% endblock %}" href="{% url 'renkan_public_list' %}">Renkans</a>{% if user.is_staff %} <a href="{% url 'edito_home' %}">({% trans 'Manage' %})</a>{% endif %}</li>
- <li>—</li>
- {% if user.is_authenticated %}
- <li><a class="{% block profile_actif %}{% endblock %}" href="{% url 'profile_home' %}">{{ user.username }}</a></li>
- <li><a href="{% url 'logout' %}?next={% url 'home' %}">{% trans "Log out" %}</a></li>
- {% else %}
- <li class="hello-user"><a href="{% url 'login' %}">{% trans "Log in" %}</a></li>
- {% endif %}
- </ul>
- <h1>
- <a href="{% url 'home' %}">HdA Lab</a>
- </h1>
- </div>
- <div id="container">
+ <div id="topnav">
+ <img src="{% static 'hdalab/img/topnav.jpg' %}" alt="" style="display:block;margin:0 auto;">
+ </div>
+ <header id="header">
+
+ <div class="top">
+ <div id="logo">
+ <div class="row">
+ <h1><a href="#"><img src="{% static 'hdalab/img/logo-hda.png' %}" alt="HdA Lab"></a></h1>
+ </div>
+ </div>
+ <nav>
+ <div class="row">
+ <ul id="menu">
+ <li class="{% block home_actif %}{% endblock %}"><a href="{% url 'home' %}">Accueil</a></li>
+ <li class="{% block facettes_actif %}{% endblock %}"><a href="{% url 'facettes' %}">Facettes</a></li>
+ <li class="{% block categories_actif %}{% endblock %}"><a href="{% url 'categories' %}">Catégories de Wikipedia</a></li>
+ <li class="{% block thesaurus_actif %}{% endblock %}"><a href="{% url 'thesaurus' %}">Thésaurus</a></li>
+ <li class="{% block renkans_actif %}{% endblock %}"><a href="{% url 'renkan_public_list' %}">Renkan</a></li>
+
+ </ul>
+ <ul id="menu" class="profile">
+ {% if user.is_authenticated %}
+ <li class="{% block profile_actif %}{% endblock %}"><a href="{% url 'profile_home' %}">{{ user.username }}</a></li>
+ <li><a href="{% url 'logout' %}?next={% url 'home' %}">{% trans "Log out" %}</a></li>
+ {% else %}
+ <li class="hello-user"><a href="{% url 'login' %}">{% trans "Log in" %}</a></li>
+ {% endif %}
+ </ul>
+ </div>
+ </nav>
+ </div>
+ <div id="subhead">
+ {% block subhead %}
+ {% endblock %}
+ </div>
+ </header>
{% endblock %}
-{% block main_content %}
-{% endblock %}
+<main id="content" class="row">
+ {% block main_content %}
+ {% endblock %}
+</main>
{% block footer %}
- </div>
- <div id="footer">
- <ul id="footer-contents">
- <li>
- <p>Une expérimentation de l'Institut de Recherche et d'Innovation et du Ministère de la Culture et de la Communication</p>
- </li>
- <li>
- <a href="http://culture.gouv.fr/" target="_blank">
- <img src="{% static 'hdalab/img/logo_mcc_blanc.png' %}" />
- </a>
- </li>
- <li>
- <a href="http://www.iri-research.org/" target="_blank">
- <img src="{% static 'hdalab/img/logo_iri_blanc.png' %}" />
- </a>
- </li>
- </ul>
- </div>
+ <footer id="footer">
+ <div class="nav">
+ <div class="row">
+ <ul>
+ <li><a href="#">Partenaires</a></li>
+ <li><a href="#">Lettres infos</a></li>
+ <li><a href="#">Data culture</a></li>
+ <li><a href="#">Mentions légales</a></li>
+ <li><a href="#">Accessibilité</a></li>
+ <li><a href="#">Plan du site</a></li>
+ <li><a href="#">Open search</a></li>
+ </ul>
+ </div>
+ </div>
+ <img src="{% static 'hdalab/img/footer.png' %}" alt="" style="display:block;margin:0 auto;">
+ </footer>
{% endblock %}
{% analytics %}
</body>
--- a/src/hdalab/templates/categories.html Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/templates/categories.html Thu Nov 27 11:51:36 2014 +0100
@@ -8,6 +8,7 @@
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/trees.css?refresh' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/cattree.css?refresh' %}" />
+ <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/categories.css' %}" />
{% endblock %}
{% block js_import %}
--- a/src/hdalab/templates/index.html Thu Nov 27 11:50:26 2014 +0100
+++ b/src/hdalab/templates/index.html Thu Nov 27 11:51:36 2014 +0100
@@ -12,7 +12,7 @@
{{block.super}}
<script type="text/javascript">
$(function() {
- $(".fond-bloc").mouseover(function() {
+ $(".bloc").mouseenter(function() {
var _this = this;
$(".overlay-bloc").each(function() {
if (this.parentNode == _this) {
@@ -25,84 +25,89 @@
document.location.href = $(this).find("a").attr("href");
return false;
});
+ $(".bloc").mouseleave(function() {
+ $(".overlay-bloc").each(function() {
+ $(this).slideUp();
+ });
+ });
});
</script>
{% endblock %}
{% block home_actif %}actif{% endblock %}
-{% block main_content %}
- <h2>Explorez autrement le portail Histoire des Arts</h2>
- <div class="liste-applis">
- <div class="bloc-appli">
- <h3>Recherche par facettes</h3>
- <div class="fond-bloc" id="bloc-facettes">
- <div class="overlay-bloc">
- <p>Recherchez les contenus d'Histoire des Arts par plusieurs points d'entrée : pays, périodes historiques, disciplines artistiques et mots-clés liés aux œvres.</p>
- <p>Les éléments de l'interface sont à la fois des critères de recherche et des mode de visualisation des résultats : Au fur et à mesure de vos recherches, ils se mettent à jour pour refléter le nombre de contenus correspondant.</p>
- <p class="goto"><a href="{% url 'facettes' %}">»</a></p>
- </div>
- </div>
- </div>
+{% block subhead %}
+<div class="liste-applis">
+ <div class="bloc-appli-left">
+ <div class="bg-wrap bloc">
+ <h3>Recherche par <strong>facettes</strong></h3>
+ <div id="bloc-facettes">
+ <div class="overlay-bloc">
+ <p>Recherchez les contenus d'Histoire des Arts par plusieurs points d'entrée : pays, périodes historiques, disciplines artistiques et mots-clés liés aux œvres.</p>
+ <p>Les éléments de l'interface sont à la fois des critères de recherche et des mode de visualisation des résultats : Au fur et à mesure de vos recherches, ils se mettent à jour pour refléter le nombre de contenus correspondant.</p>
+ <p class="goto"><a href="{% url 'facettes' %}">»</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="bloc-appli-middle">
+ <div class="bg-wrap bloc">
+ <h3><strong>Catégories</strong> de Wikipedia</h3>
+ <div id="bloc-categories">
+ <div class="overlay-bloc">
+ <p>Naviguez dans l'arbre des catégories de Wikipedia pour atteindre les contenus du portail Histoire des Arts.</p>
+ <p>Recherchez une catégorie par son titre, puis explorez les sous-catégories et les tags qui y sont rattachés.</p>
+ <p class="goto"><a href="{% url 'categories' %}">»</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="bloc-appli-right">
+ <div class="bg-wrap bloc">
+ <h3>Navigation par <strong>thésaurus</strong></h3>
+ <div id="bloc-thesaurus">
+ <div class="overlay-bloc">
+ <p>Cette interface présente deux extraits de thésaurus utilisés par le ministère de la Culture et de la Communication :</p>
+ <ul>
+ <li>La branche « Secteur urbain » du Thésaurus de l’architecture et de l’urbanisme (état 2010)</li>
+ <li>La branche « Architecture d’habitation » du Thésaurus iconographique Garnier (état 2012)</li>
+ </ul>
+ <p class="goto"><a href="{% url 'thesaurus' %}">»</a></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div style="clear: both;"> </div>
+</div>
+{% endblock %}
- <div class="separateur-applis"></div>
- <div class="bloc-appli">
- <h3>Catégories de Wikipedia</h3>
- <div class="fond-bloc" id="bloc-categories">
- <div class="overlay-bloc">
- <p>Naviguez dans l'arbre des catégories de Wikipedia pour atteindre les contenus du portail Histoire des Arts.</p>
- <p>Recherchez une catégorie par son titre, puis explorez les sous-catégories et les tags qui y sont rattachés.</p>
- <p class="goto"><a href="{% url 'categories' %}">»</a></p>
- </div>
- </div>
- </div>
-
- <div class="separateur-applis"></div>
- <div class="bloc-appli">
- <h3>Navigation par thésaurus</h3>
- <div class="fond-bloc" id="bloc-thesaurus">
- <div class="overlay-bloc">
- <p>Cette interface présente deux extraits de thésaurus utilisés par le ministère de la Culture et de la Communication :</p>
- <ul>
- <li>La branche « Secteur urbain » du Thésaurus de l’architecture et de l’urbanisme (état 2010)</li>
- <li>La branche « Architecture d’habitation » du Thésaurus iconographique Garnier (état 2012)</li>
- </ul>
- <p class="goto"><a href="{% url 'thesaurus' %}">»</a></p>
- </div>
- </div>
- </div>
+
- <div style="clear: both;"> </div>
- </div>
- <h3>À propos de HdA Lab</h3>
- <p>Le portail Histoire des arts a pour vocation de mettre à la disposition de publics prescripteurs — via un site Internet — une sélection de ressources culturelles et éducatives riches en lien avec le programme officiel de l’enseignement de l’Histoire des arts. Le volet HDA-Lab de ce projet s’inscrit dans le cadre d’une collaboration entre l’Institut de Recherche et d'Innovation (IRI) et le Ministère de la Culture et de la Communication. Ce projet de recherche et développement prévoit la réalisation d’une preuve de concept destinée à montrer le potentiel heuristique du tagging sémantique.</p>
- <p>Le corpus utilisé pour les besoins de ce projet est extrait du site Histoire des arts, proposant un accès à près de 5 000 ressources qualifiées, accessible à l’adresse <a href="http://www.histoiredesarts.culture.fr" target="_blank">http://histoiredesarts.culture.fr</a>. Ce portail est alimenté par un réseau dynamique de 350 institutions culturelles, sur l’ensemble du territoire. Cet annuaire a pour vocation d’aider la communauté éducative (enseignants, médiateurs culturels…) à trouver des documents fiables dans le domaine de l’histoire des arts. Les notices descriptives de chaque ressource renvoient, par des liens profonds, vers autant de ressources en ligne, chaque notice contenant des mots-clés, initialement produits comme de simples tags.</p>
- <p>Le programme de Recherche et Développement impliquant l’IRI et le Ministère de la Culture et de la Communication — via son Département des Programmes Numériques (DPN) — a permis la réalisation de deux outils :</p>
- <ul>
- <li>Un module de tagging sémantique du corpus « Histoire des Arts » destiné à l’indexation des ressources, via le back-office du site (module « HDA-BO »)</li>
- <li>Une interface de recherche et de navigation de la version sémantisée du corpus (projet « HDA-Lab »)</li>
- </ul>
- <p>Les tags sémantiques sont constitués des entrées de Wikipédia et dotés de métadonnées, dont les URIs de DBpedia.org correspondant à ces entrées. Les données-clés extraites des articles de Wikipedia sont les infobox et les catégories. Les fonctionnalités de recherche et de navigation dans le corpus s’appuient sur le graphe de DBpedia. L’interface propose des fonctionnalités telles qu’une recherche par facettes, une carte heuristique, etc. ainsi qu’un enrichissement des résultats de recherche à l’aide d’extraits de Wikipedia (photos, définitions…).</p>
- <p>La preuve de concept est résolument orientée utilisateur final, répondant à une approche de recherche appliquée. Les internautes pourront comparer en direct les fonctionnalités classiques de l’interface d’origine avec les fonctionnalités enrichies de la preuve de concept. L’objectif est de démontrer l’intérêt du tagging sémantique et de sensibiliser l’utilisateur final aux enjeux du Web de données. À terme, cette phase expérimentale a vocation à enrichir les fonctionnalités du portail Histoire des arts.</p>
- <p> </p>
- <p>NB : La première version de HDA-Lab disponible en mars 2012 s’appuie sur une sémantisation (production des tags sémantiques) très partielle du corpus « Histoire des Arts ». De même les fonctionnalités ne sont pas définitives. L’ensemble du projet — sémantisation et fonctionnalités — sera mis en œuvre progressivement d'ici juin 2012.</p>
- <div class="mini-table">
- <div class="half-bloc">
- <p>
- <a href="http://culture.gouv.fr/" target="_blank" title="Ministère de la Culture et de la Communication">
- <img src="{% static 'hdalab/img/logo_mcc.png' %}" alt="Ministère de la Culture et de la Communication" />
- </a>
- </p>
- </div>
- <div class="half-bloc">
- <p>
- <a href="http://www.iri-research.org/" target="_blank">
- <img src="{% static 'hdalab/img/logo_iri.png' %}" alt="Institut de Recherche et d'Innovation" />
- </a>
- </p>
- </div>
- </div>
- <div class="mini-table">
+{% block main_content %}
+ <div class="all-title">
+ <h3 class="main-title"><strong>A Propos</strong></h2>
+ </div>
+ <div class="description">
+ <p>Le portail Histoire des arts a pour vocation de mettre à la disposition de publics prescripteurs — via un site Internet — une sélection de ressources culturelles et éducatives riches en lien avec le programme officiel de l’enseignement de l’Histoire des arts. Le volet HDA-Lab de ce projet s’inscrit dans le cadre d’une collaboration entre l’Institut de Recherche et d'Innovation (IRI) et le Ministère de la Culture et de la Communication. Ce projet de recherche et développement prévoit la réalisation d’une preuve de concept destinée à montrer le potentiel heuristique du tagging sémantique.</p>
+ <br>
+ <p>Le corpus utilisé pour les besoins de ce projet est extrait du site Histoire des arts, proposant un accès à près de 5 000 ressources qualifiées, accessible à l’adresse <a href="http://www.histoiredesarts.culture.fr" target="_blank">http://histoiredesarts.culture.fr</a>. Ce portail est alimenté par un réseau dynamique de 350 institutions culturelles, sur l’ensemble du territoire. Cet annuaire a pour vocation d’aider la communauté éducative (enseignants, médiateurs culturels…) à trouver des documents fiables dans le domaine de l’histoire des arts. Les notices descriptives de chaque ressource renvoient, par des liens profonds, vers autant de ressources en ligne, chaque notice contenant des mots-clés, initialement produits comme de simples tags.</p>
+ <br>
+ <p>Le programme de Recherche et Développement impliquant l’IRI et le Ministère de la Culture et de la Communication — via son Département des Programmes Numériques (DPN) — a permis la réalisation de deux outils :</p>
+ <ul>
+ <li>Un module de tagging sémantique du corpus « Histoire des Arts » destiné à l’indexation des ressources, via le back-office du site (module « HDA-BO »)</li>
+ <li>Une interface de recherche et de navigation de la version sémantisée du corpus (projet « HDA-Lab »)</li>
+ </ul>
+ <br>
+ <p>Les tags sémantiques sont constitués des entrées de Wikipédia et dotés de métadonnées, dont les URIs de DBpedia.org correspondant à ces entrées. Les données-clés extraites des articles de Wikipedia sont les infobox et les catégories. Les fonctionnalités de recherche et de navigation dans le corpus s’appuient sur le graphe de DBpedia. L’interface propose des fonctionnalités telles qu’une recherche par facettes, une carte heuristique, etc. ainsi qu’un enrichissement des résultats de recherche à l’aide d’extraits de Wikipedia (photos, définitions…).</p>
+ <p>La preuve de concept est résolument orientée utilisateur final, répondant à une approche de recherche appliquée. Les internautes pourront comparer en direct les fonctionnalités classiques de l’interface d’origine avec les fonctionnalités enrichies de la preuve de concept. L’objectif est de démontrer l’intérêt du tagging sémantique et de sensibiliser l’utilisateur final aux enjeux du Web de données. À terme, cette phase expérimentale a vocation à enrichir les fonctionnalités du portail Histoire des arts.</p>
+ <p> </p>
+ <p>NB : La première version de HDA-Lab disponible en mars 2012 s’appuie sur une sémantisation (production des tags sémantiques) très partielle du corpus « Histoire des Arts ». De même les fonctionnalités ne sont pas définitives. L’ensemble du projet — sémantisation et fonctionnalités — sera mis en œuvre progressivement d'ici juin 2012.</p>
+ </div>
+ <br><br>
+ <div class="mini-table description">
<div class="half-bloc">
<p>Département des Programmes Numériques</p>
</div>
@@ -111,23 +116,25 @@
<p>Directeur exécutif : <strong>Vincent Puig</strong></p>
</div>
</div>
- <h4>Équipes projet</h4>
- <div class="mini-table">
- <div class="half-bloc">
- <p>Pour le DPN :</p>
- <ul>
- <li>Chef de projet utilisateur : <strong>Bertrand Sajus</strong></li>
- <li>Responsables éditoriales : <strong>Marion Martin Laprade</strong> et <strong>Cécile Riottot</strong></li>
- </ul>
- </div>
- <div class="half-bloc">
- <p>Pour l'IRI :</p>
- <ul>
- <li>Architecture back-office et coordination technique : <strong>Yves-Marie Haussonne</strong></li>
- <li>Coordination scientifique : <strong>Alexandre Monnin</strong></li>
- <li>Outils de sémantisation : <strong>Thibaut Cavalié</strong></li>
- <li>Interfaces de visualisation et d'annotation : <strong>Raphaël Velt</strong></li>
- </ul>
- </div>
+ <div class="description">
+ <h4>Équipes projet</h4>
+ <div class="mini-table">
+ <div class="half-bloc">
+ <p>Pour le DPN :</p>
+ <ul>
+ <li>Chef de projet utilisateur : <strong>Bertrand Sajus</strong></li>
+ <li>Responsables éditoriales : <strong>Marion Martin Laprade</strong> et <strong>Cécile Riottot</strong></li>
+ </ul>
+ </div>
+ <div class="half-bloc">
+ <p>Pour l'IRI :</p>
+ <ul>
+ <li>Architecture back-office et coordination technique : <strong>Yves-Marie Haussonne</strong></li>
+ <li>Coordination scientifique : <strong>Alexandre Monnin</strong></li>
+ <li>Outils de sémantisation : <strong>Thibaut Cavalié</strong></li>
+ <li>Interfaces de visualisation et d'annotation : <strong>Raphaël Velt</strong></li>
+ </ul>
+ </div>
+ </div>
</div>
{% endblock %}
\ No newline at end of file