champs-libres
/
OpenArdenneMap-template
4
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

updated site web with better design and content

This commit is contained in:
pacome 2021-05-24 00:11:49 +02:00
parent 8a17ecfb98
commit a88b8c687f
7 changed files with 394 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
presentation.md
View File

@ -68,7 +68,7 @@ Non, il existe plusieurs solutions pour imprimer ses propres cartes. Allez faire
### Quel est votre modèle économique?
Nous utilisons des données ouvertes (OpenStreetMap, données du relief publiques), des logiciels libres de cartographie et un style cartographique libre de droit. Néanmoins, cette offre de cartes a un coût: la retouche de certains éléments de nos cartes "à la main", notre travail de promotion, l'hébergement de ce site web, etc. C'est pourquoi nous proposons le téléchargement de ces cartes à un prix libre. Ces cartes sont également disponibles à la vente au prix de 3,00€, à l'état d'imprimé de haute qualité, dans divers endroits.
Nous utilisons des données ouvertes (OpenStreetMap, données du relief publiques), des logiciels libres de cartographie et un style cartographique libre de droit. Néanmoins, cette offre de cartes a un coût: la retouche de certains éléments de nos cartes "à la main", notre travail de promotion, l'hébergement de ce site web, etc. C'est pourquoi nous proposons le téléchargement de ces cartes à un prix libre. Ces cartes sont également disponibles à la vente au prix de 3,00€, en impressions de haute qualité, dans divers endroits.
L'argent collecté est redistribué en partie (quelle proportion?) à OpenStreetMap-Belgium, l'association qui accompagne la communauté des contributeur·rice·s d'OpenStreetMap en Belgique.

179
site/index.html
View File

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="alternate" hreflang="x-default" href="https://atelier-cartographique.be/en/index.html" />
<meta name="description" content="" />
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
@ -16,56 +15,156 @@
</head>
<body class="front">
<div class="header front">
<!-- <div class="header__logo">
<div class="logo">
<a href="index.html">
<img src="" alt="" />
</a>
</div>
</div> -->
<div class="header">
<div class="header__logo"> rando.osm.be </div>
<div class="header__links">
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#mapList">Liste des cartes</a>
<a href="#quiSommesNous">Qui sommes nous ?</a>
<a href="#FAQ">F.A.Q</a>
</div>
</div>
<div class="main__wrapper">
<div class="sidebar">
<h1>Cartes imprimées OpenArdenneMap</h1>
<p>OpenArdenneMap est un style spécifiquement développé pour des cartes imprimées, avec un faible nombre
de couleurs
différentes, des contrastes clairs, et qui fait la part belle aux labels (basés sur la fonte
Alfphabet), dans la
tradition des cartes topographiques de l’IGN belge des années 1960 à 1980.</p>
<p>Bien qu'il puisse convenir à d'autres endroits, OpenArdenneMap est spécifiquement adapté à certains
traits géographiques
de l'Ardenne. Il est toutefois adapté pour la plupart des régions rurales tempérées. Parmi ces
traits, citons la
distinction feuillus-résineux des forêts, un accent mis sur le relief, une mise en évidence claire
des éléments naturels
(hydrographie, limites de végétation, ...) et une description fine des types de voiries lentes (on y
distingue 5 types
de chemins en plus des sentiers & coupes-feu)</p>
<!-- <h1>Portail de distribution de cartes de randonnée à la demande.</h1> -->
<h2>Caractéristiques</h2>
<li>Rendu fin du relief (ombrage et courbes de niveaux)</li>
<li>Classification des chemins en 5 catégories + sentier + coupe-feu</li>
<li>Indication de la date moyenne de dernière modification des chemins</li>
<li>Indications des promenades balisées officielles</li>
<h1>Des cartes locales, à prix libre, <br> <span class="second-line">optimisées pour la randonnée.</span>
</h1>
<div class="block block-with-sidebar sidebar-left">
<div class="block-sidebar">
<p class="pitch">Une <a href="#firstLink">cartographie soignée</a>, basée sur des <a href="#">données&nbsp;ouvertes</a> et mises à jour <a href="#exact"> en continu</a>.</p>
</div>
<div class="block-main">
<img src="style/assets/compo.png" alt="">
</div>
</div>
<div class="main">
<img class="image1" src="style/assets/mellier-2000.png" alt="">
<img class="image2" src="style/assets/mellier-2000.png" alt="">
<div id="mapList" class="block">
<h2>Liste des cartes</h2>
<p> La carte que vous souhaitez n'existe pas encore ? <a href="#quiSommesNous">Contactez-nous</a>, nous la mettrons à disposition rapidement. </p>
</div>
<div id="firstLink" class="block block-with-sidebar sidebar-right">
<div class="block-main">
<h2>Un design cartographique adapté</h3>
<p>OpenArdenneMap est un style spécifiquement développé pour des cartes imprimées, avec un faible nombre de couleurs différentes, des contrastes clairs, et qui fait la part belle aux labels (basés sur la fonte <a href="http://osp.kitchen/foundry/">Alfphabet</a>), dans la tradition des cartes topographiques de l’IGN belge des années 1960 à 1980.</p>
<p>Bien qu'il puisse convenir à d'autres endroits, OpenArdenneMap est spécifiquement adapté à certains traits géographiques de l'Ardenne. Il est toutefois adapté pour la plupart des régions rurales tempérées. Parmi ces traits, citons la distinction feuillus-résineux des forêts, un accent mis sur le relief, une mise en évidence claire des éléments naturels (hydrographie, limites de végétation, ...) et une description fine des types de voiries lentes (on y distingue 5 types de chemins en plus des sentiers & coupes-feu)</p>
<p>Une carte éditée avec le style OpenArdenneMap a été récompensée du vote du public lors de la conférence FOSS4G.be (Bruxelles, 2018). La carte primée est une planche A0 tirée au 1:20000 de la Forêt d’Anlier représentant les données d’OpenStreetMap avec le style OpenArdenneMap.
<h3>Liens</h3>
<li>
<a href="https://blog.champs-libres.coop/carto/2018/12/18/openardennemap.html">https://blog.champs-libres.coop/carto/2018/12/18/openardennemap.html </a>
</li>
<li>
<a href="http://www.nobohan.be/tag/openardennemap/">http://www.nobohan.be/tag/openardennemap/</a>
</p>
</li>
</div>
<div class="block-sidebar">
<h2>Caractéristiques des cartes</h2>
<ul>
<li>Rendu fin du relief (ombrage et courbes de niveaux)</li>
<li>Classification des chemins en 5 catégories + sentier + coupe-feu</li>
<li>Indication de la date moyenne de dernière modification des chemins</li>
<li>Indications des promenades balisées officielles</li>
</ul>
</div>
</div>
<div id="FAQ" class="block faq">
<h2>F.A.Q</h2>
<details>
<summary>Quelle est l'exactitude de ces cartes ?</summary>
<p id="exact">Pratiquement aucune carte n'est exempte d'erreurs. En particulier, des éléments tels que des sentiers et du balisage peuvent évoluer rapidement dans le temps. Nous ne donnons aucune garantie quant à l'exactitude et la complétude des informations de nos cartes. Néanmoins, nous savons par expérience que les données OpenStreetMap gagnent en exactitude et en précision d'année en année. Un conseil: les chemins de type "mauvais chemin" sont, comme leur nom l'indique, moins bien tracés et sont plus susceptibles d'être envahis par la végétation et difficile à pratiquer.</p>
</details>
<details>
<summary>J'aimerais avoir une carte de ma région avec les promenades balisées. Pourquoi n'est-elle pas disponible?</summary>
<p>Même si le processus de création des cartes OpenArdenneMap est semi-automatisé, nos cartes sont produites au fur et à mesure des demandes et de la complétude des données OpenStreetMap, particulièrement en ce qui concerne les itinéraires balisés. Vous désirez une carte d'un endroit particulier? Contactez-nous!</p>
</details>
<details>
<summary>Y-a-t'il une application mobile pour ces randonnées ?</summary>
<p>Il existe une foule d'applications mobiles de cartographie et pour la pratique de la randonnée. Bonne nouvelle, l'immense majorité de celles-ci utilisent exactement les mêmes données que nos cartes: OpenStreetMap. Si vous voulez combiner nos cartes avec une application de randonnée, nous vous conseillons d'installer une application qui conserve les données hors connexion (il existe encore de nombreuses zones blanches en forêt) et qui ne gardera pas trace de vos données personnelles, comme OsmAnd, WindyMaps, MapsMe.</p>
</details>
<details>
<summary>Votre produit est-il unique?</summary>
<p>Non, il existe plusieurs solutions pour imprimer ses propres cartes. Allez faire un tour sur MapOsmatic, Inkatlas, ... Mais, à notre connaissance, peu de ces plateformes vous garantissent des cartes avec un style cartographique adapté pour l'impression.</p>
</details>
<details>
<summary>Quel est votre modèle économique?</summary>
<p>Nous utilisons des données ouvertes (OpenStreetMap, données du relief publiques), des logiciels libres de cartographie et un style cartographique libre de droit. Néanmoins, cette offre de cartes a un coût: la retouche de certains éléments de nos cartes "à la main", notre travail de promotion, l'hébergement de ce site web, etc. C'est pourquoi nous proposons le téléchargement de ces cartes à un prix libre. Ces cartes sont également disponibles à la vente au prix de 3,00€, en impressions de haute qualité, dans divers endroits.</p>
<p>L'argent collecté est redistribué en partie (quelle proportion?) à OpenStreetMap-Belgium, l'association qui accompagne la communauté des contributeur·rice·s d'OpenStreetMap en Belgique.</p>
</details>
<details>
<summary>Je suis un⋅e opérateur⋅rice touristique/gestionnaire d'un hébergement, puis-je imprimer/utiliser/distribuer/vendre vos cartes ?</summary>
<p>Oui. Les cartes OpenArdenneMap sont disponibles sous licence CC By-Sa 4.0. Cela signifie que vous pouvez les imprimer, les utiliser, les distribuer et même les vendre. Si vous êtes un opérateur touristique, nous conseillons le prix de vente de 3,00€ pour une impression A3. Nous distribuons nous-mêmes une partie de nos cartes dans divers syndicats d'initiative. Dans le cas où vous retiriez un certain bénéfice de la vente de ces cartes, nous vous serons reconnaissant de soutenir financièrement le projet. Dans tous les cas où vous réutiliseriez nos produits d'un manière ou d'une autre, merci également de nous le faire savoir! Si vous êtes intéressé par des collaborations ou d'autres produits (posters, cartes sur demande, cartographie participative), contactez-nous!</p>
</details>
<details>
<summary>Est-ce que vous faites des tirages/produits sur mesure, ou des animations d'ateliers ?</summary>
<p>Bien sûr. Si vous êtes intéressé par des collaborations ou d'autres produits tels que des tirages haute qualité, des grands formats, des atlas plus complets, ou l'accompagnement d'ateliers cartographie participative pour tout type de public, contactez-nous!</p>
</details>
</div>
<div class="block block-with-sidebar sidebar-right" id="quiSommesNous">
<div class="block-main">
<h2>Qui sommes-nous?</h2>
<p>Ce produit est proposé par <a href="https://www.champs-libres.coop/">Champs-Libres</a> (Namur) et <a href="https://atelier-cartographique.be/">Atelier cartographique</a> (Bruxelles). Nos deux structures sont des sociétés coopératives actives dans le développement de logiciels libres et dans la cartographie. </p>
<p> Si habituellement nous réalisons des applications web, nous aimons aussi réaliser de la cartographie sur du papier. Nos autres projets de cartographie consistent en la réalisation de <a href="https://cartostation.com/">portails web cartographiques</a>, des animations en <a href="https://wiki.openstreetmap.org/wiki/Brugelette">cartographie participative</a> ou des <a href="https://www.champs-libres.coop/service/formations/">formations en logiciels de cartographie</a>.</p>
<p> Enfin, ce projet ne pourrait être possible sans le projet <a href="https://www.openstreetmap.org/">OpenStreetMap</a> et sa formidable communauté de contributeur·rice·s en Belgique. Une partie des recettes de vente de nos cartes est reversé à l'association <a href="https://openstreetmap.be/en/">OpenStreetMap Belgium</a> pour le développement de la communauté.</p>
</div>
<div class="block-sidebar">
<h2>Champs-Libres</h2>
<li> info@champs-libres.coop</li>
<li> +32 (0)81 13 69 17 </li>
<li> <a href="https://www.champs-libres.coop/">https://www.champs-libres.coop/</a> </li>
<h2>Atelier cartographique</h2>
<li> contact@atelier-cartographique.be </li>
<li> +32 (0)485 46 70 87 </li>
<li> <a href="https://atelier-cartographique.be/">https://atelier-cartographique.be/</a></li>
</div>
</div>
</div>
<div class="footer">
<p>du blbla de footer</p>
</div>
<div class="heart">Initié avec ♥ en Ardenne.</div>
</body>
</html>

BIN
site/style/assets/compo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

28
site/style/header.less Normal file
View File

@ -0,0 +1,28 @@
.header {
padding: @margin / 2 0;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-between;
> div {
flex-shrink: 0;
}
}
.header__logo {
font-size: 1.2rem;
margin-right: @margin;
}
.header__links {
a {
margin-left: @margin / 2;
padding: 0 0.5ch;
text-decoration: none;
color: inherit;
&:hover {
background-color: @pitchLinkColor;
text-decoration: underline !important;
}
}
}

93
site/style/index.less
View File

@ -1,93 +0,0 @@
@import "normalize.less";
@import "font.less";
@headerH : 50px;
@footerH : 50px;
@mainW : 75%;
@sidebarW : 25%;
@margin : 15px;
html {
font-size: 20px;
}
* {
box-sizing: border-box;
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
margin: 0px;
}
h1 {
// font-size: 1.75rem;
// color: #375773;
// // text-transform: uppercase;
// font-weight: 100;
margin: 0px;
}
.header,
.footer {
padding: @margin;
display: flex;
align-items: center;
> div {
flex-shrink: 0;
}
}
.main__wrapper {
position: absolute;
top: @headerH;
right: 0;
bottom: @footerH;
left: 0;
display: flex;
> div {
padding : @margin;
flex-shrink: 0;
&.sidebar {
width: @sidebarW;
overflow: auto;
border-right: 1px solid #000;
}
&.main {
position: relative;
width: @mainW;
display: flex;
align-items: center;
justify-content: center;
img {
width: 70%;
border: 1px solid #aaa;
position: absolute;
&.image1 {
transform: rotate(-5deg) translate(3%, -2%);
}
&.image2 {
// transform: rotate(-3deg);
}
}
}
}
}
.footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: @footerH;
}

130
site/style/style.css
View File

@ -321,6 +321,30 @@ template {
font-weight: normal;
font-style: normal;
}
.header {
padding: 16px 0;
border-bottom: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-between;
}
.header > div {
flex-shrink: 0;
}
.header__logo {
font-size: 1.2rem;
margin-right: 32px;
}
.header__links a {
margin-left: 16px;
padding: 0 0.5ch;
text-decoration: none;
color: inherit;
}
.header__links a:hover {
background-color: #ffff94;
text-decoration: underline !important;
}
html {
font-size: 20px;
}
@ -331,57 +355,91 @@ html {
}
body {
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
margin: 0px;
margin: auto;
padding: 64px;
padding-top: 0px;
max-width: 1280px;
}
h1 {
font-size: 4rem;
margin: 0px;
line-height: 90%;
margin-bottom: 64px;
}
.header,
.footer {
padding: 15px;
display: flex;
align-items: center;
h1 .second-line {
margin-left: 6ch;
}
.header > div,
.footer > div {
flex-shrink: 0;
details {
margin-bottom: 10.66666667px;
}
p.pitch {
font-size: 2.4rem;
line-height: 135%;
}
p.pitch a {
background-color: #ffff94;
color: inherit;
text-decoration: none;
padding: 0 0.5ch;
}
p.pitch a:hover {
text-decoration: underline !important;
}
.main__wrapper {
position: absolute;
top: 50px;
right: 0;
bottom: 50px;
left: 0;
padding-top: 32px;
}
.block {
margin-bottom: 64px;
}
.block a {
color: inherit;
}
.block a:hover {
background-color: #ffff94;
}
.block-with-sidebar {
display: flex;
}
.main__wrapper > div {
padding: 15px;
.block-with-sidebar > div {
flex-shrink: 0;
}
.main__wrapper > div.sidebar {
width: 25%;
.block-with-sidebar > div.block-sidebar {
width: calc(100% - 60%);
overflow: auto;
}
.block-with-sidebar > div.block-main {
position: relative;
width: 60%;
}
.block-with-sidebar > div.block-main img {
width: 90%;
}
.block-with-sidebar.sidebar-right .block-sidebar {
padding-left: 16px;
border-left: 1px solid #000;
}
.block-with-sidebar.sidebar-left .block-sidebar {
padding-right: 16px;
border-right: 1px solid #000;
}
.main__wrapper > div.main {
position: relative;
width: 75%;
display: flex;
align-items: center;
justify-content: center;
.block-with-sidebar.sidebar-right .block-main {
padding-right: 16px;
}
.main__wrapper > div.main img {
width: 70%;
border: 1px solid #aaa;
position: absolute;
.block-with-sidebar.sidebar-left .block-main {
padding-left: 16px;
}
.main__wrapper > div.main img.image1 {
transform: rotate(-5deg) translate(3%, -2%);
#mapList,
#FAQ {
border: 1px solid #000;
border-radius: 64px;
padding: 64px;
padding-top: 32px;
}
.footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 50px;
.heart {
transform: rotate(90deg);
transform-origin: right top;
position: fixed;
right: 5px;
bottom: 32px;
font-size: 0.8rem;
}

132
site/style/style.less Normal file
View File

@ -0,0 +1,132 @@
@import "normalize.less";
@import "font.less";
@import "header.less";
@headerH : 50px;
@footerH : 50px;
@mainW : 60%;
@sidebarW : calc(~"100% - @{mainW}");
@margin : 32px;
@pitchLinkColor : #ffff94;
html {
font-size: 20px;
}
* {
box-sizing: border-box;
font-weight: normal;
font-style: normal;
}
body {
font-family: 'Alfphabet-III', Arial, Helvetica, sans-serif;
margin: auto;
padding: @margin * 2;
padding-top: 0px;
max-width: 1280px;
}
h1 {
font-size: 4rem;
margin: 0px;
line-height: 90%;
margin-bottom: @margin * 2;
.second-line {
margin-left: 6ch;
}
}
details {
margin-bottom: @margin / 3;
}
p.pitch {
font-size: 2.4rem;
line-height: 135%;
a {
background-color: @pitchLinkColor;
color: inherit;
text-decoration: none;
padding: 0 0.5ch;
&:hover {
text-decoration: underline !important;
}
}
}
.main__wrapper {
// padding: @margin;
padding-top: @margin;
}
.block {
margin-bottom: @margin * 2;
a {
color: inherit;
&:hover {
background-color: @pitchLinkColor;
}
}
}
.block-with-sidebar {
display: flex;
> div {
// padding : @margin;
flex-shrink: 0;
&.block-sidebar {
width: @sidebarW;
overflow: auto;
}
&.block-main {
position: relative;
width: @mainW;
img {
width: 90%;
}
}
}
&.sidebar-right .block-sidebar {
padding-left: @margin / 2;
border-left: 1px solid #000;
}
&.sidebar-left .block-sidebar {
padding-right: @margin / 2;
border-right: 1px solid #000;
}
&.sidebar-right .block-main {
padding-right: @margin / 2;
}
&.sidebar-left .block-main {
padding-left: @margin / 2;
}
}
#mapList,
#FAQ {
border: 1px solid #000;
border-radius: @margin * 2;
padding: @margin * 2;
padding-top: @margin;
}
.heart {
transform: rotate(90deg);
transform-origin: right top;
position: fixed;
right: 5px;
bottom: @margin;
font-size: 0.8rem;
}