# HG changeset patch # User rougeronj # Date 1417085496 -3600 # Node ID ad92df04d9ab9bcf659a44a0006beb5882e575cc # Parent 1e2c3abcc888709e01729dc63c697638760a61eb update structure and design of the interface diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/static/hdalab/css/common.css --- 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; +} diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/static/hdalab/css/facettes.css --- 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 { diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/static/hdalab/css/footer.css --- /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 diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/static/hdalab/css/head.css --- /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; +} diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/static/hdalab/css/index.css --- 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; +} diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/static/hdalab/css/thesaurus.css --- 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; } diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/templates/base.html --- 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 %} + + {% endblock %} {% block js_import %} @@ -22,52 +24,67 @@ {% block header %} - -
+
+ +
+ {% endblock %} -{% block main_content %} -{% endblock %} +
+ {% block main_content %} + {% endblock %} +
{% block footer %} -
- + {% endblock %} {% analytics %} diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/templates/categories.html --- 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 @@ + {% endblock %} {% block js_import %} diff -r 1e2c3abcc888 -r ad92df04d9ab src/hdalab/templates/index.html --- 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}} {% endblock %} {% block home_actif %}actif{% endblock %} -{% block main_content %} -

Explorez autrement le portail Histoire des Arts

-
-
-

Recherche par facettes

-
-
-

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.

-

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.

-

»

-
-
-
+{% block subhead %} +
+
+
+

Recherche par facettes

+
+
+

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.

+

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.

+

»

+
+
+
+
+ +
+
+

Catégories de Wikipedia

+
+
+

Naviguez dans l'arbre des catégories de Wikipedia pour atteindre les contenus du portail Histoire des Arts.

+

Recherchez une catégorie par son titre, puis explorez les sous-catégories et les tags qui y sont rattachés.

+

»

+
+
+
+
+ +
+
+

Navigation par thésaurus

+
+
+

Cette interface présente deux extraits de thésaurus utilisés par le ministère de la Culture et de la Communication :

+
    +
  • La branche « Secteur urbain » du Thésaurus de l’architecture et de l’urbanisme (état 2010)
    • +
  • La branche « Architecture d’habitation » du Thésaurus iconographique Garnier (état 2012)
    • +
+

»

+
+
+
+
+ +
+
+{% endblock %} -
-
-

Catégories de Wikipedia

-
-
-

Naviguez dans l'arbre des catégories de Wikipedia pour atteindre les contenus du portail Histoire des Arts.

-

Recherchez une catégorie par son titre, puis explorez les sous-catégories et les tags qui y sont rattachés.

-

»

-
-
-
- -
-
-

Navigation par thésaurus

-
-
-

Cette interface présente deux extraits de thésaurus utilisés par le ministère de la Culture et de la Communication :

-
    -
  • La branche « Secteur urbain » du Thésaurus de l’architecture et de l’urbanisme (état 2010)
    • -
  • La branche « Architecture d’habitation » du Thésaurus iconographique Garnier (état 2012)
    • -
-

»

-
-
-
+ -
-
-

À propos de HdA Lab

-

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.

-

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 http://histoiredesarts.culture.fr. 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.

-

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 :

- -

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…).

-

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.

-

 

-

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.

-
-
-

- - Ministère de la Culture et de la Communication - -

-
-
-

- - Institut de Recherche et d'Innovation - -

-
-
-
+{% block main_content %} +
+

A Propos

+
+
+

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.

+
+

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 http://histoiredesarts.culture.fr. 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.

+
+

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 :

+ +
+

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…).

+

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.

+

 

+

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.

+
+

+

Département des Programmes Numériques

@@ -111,23 +116,25 @@

Directeur exécutif : Vincent Puig

-

Équipes projet

-
-
-

Pour le DPN :

- -
-
-

Pour l'IRI :

- -
+
+

Équipes projet

+
+
+

Pour le DPN :

+
    +
  • Chef de projet utilisateur : Bertrand Sajus
    • +
  • Responsables éditoriales : Marion Martin Laprade et Cécile Riottot
    • +
+
+
+

Pour l'IRI :

+
    +
  • Architecture back-office et coordination technique : Yves-Marie Haussonne
    • +
  • Coordination scientifique : Alexandre Monnin
    • +
  • Outils de sémantisation : Thibaut Cavalié
    • +
  • Interfaces de visualisation et d'annotation : Raphaël Velt
    • +
+
+
{% endblock %} \ No newline at end of file