110
modifications
(→Images) |
|||
(13 versions intermédiaires par le même utilisateur non affichées) | |||
Ligne 1 515 : | Ligne 1 515 : | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == Sous-dossiers : ressources == | ||
Il y a trois sous-dossiers pour stocker les ressources et les résultats.<br> | Il y a trois sous-dossiers pour stocker les ressources et les résultats.<br> | ||
/images : toutes les images utilisées<br> | /images : toutes les images utilisées<br> | ||
/fichiers_airports : les fichiers KML permettant l'affichage des aéroports sur la carte interactive<br> | /fichiers_airports : les fichiers KML permettant l'affichage des aéroports sur la carte interactive<br> | ||
/SelectInspiration : les fichiers nécessaires pour la personnalisation et le fonctionnement des liste déroulantes sur la carte interactive<br> | /SelectInspiration : les fichiers nécessaires pour la personnalisation et le fonctionnement des liste déroulantes sur la carte interactive<br> | ||
/KML_outputs : les fichiers KML générés | /KML_outputs : les fichiers KML générés.<br> | ||
=== | === /images === | ||
Liens vers les images utilisées sur le site, il suffit de les afficher pour éventuellement les télécharger. | Liens vers les images utilisées sur le site, il suffit de les afficher pour éventuellement les télécharger. | ||
Ligne 1 533 : | Ligne 1 533 : | ||
* Icône des points de la route de dégagement [http://www.notreavion.net/convert/images/icone_deg.png icone_deg.png]<br> | * Icône des points de la route de dégagement [http://www.notreavion.net/convert/images/icone_deg.png icone_deg.png]<br> | ||
* Sablier d'attente de chargement de la carte [http://www.notreavion.net/convert/images/ajax-loader.gif ajax-loader.gif]<br> | * Sablier d'attente de chargement de la carte [http://www.notreavion.net/convert/images/ajax-loader.gif ajax-loader.gif]<br> | ||
''' | |||
Images de la page d'aide | Images de la page d'aide''' | ||
* [http://www.notreavion.net/convert/images/capture.jpg capture.jpg]<br> | * [http://www.notreavion.net/convert/images/capture.jpg capture.jpg]<br> | ||
Ligne 1 545 : | Ligne 1 545 : | ||
* [http://www.notreavion.net/convert/images/zoom.jpg zoom.jpg]<br> | * [http://www.notreavion.net/convert/images/zoom.jpg zoom.jpg]<br> | ||
=== | === /fichiers_airports === | ||
Ces fichiers .KMZ sont disponibles sur le réseau Yammer interne Air France dans le groupe Maps.me.<br> | |||
Pour l'utilisation sur le site il faut en extraire le fichier .KML en utilisant un outil de décompression standard. | |||
=== /SelectInspiration === | |||
Ce dossier contient les éléments nécessaires à la personnalisation des listes déroulantes sur la page de la carte interactive.<br> | |||
Les sources sont disponibles ici https://github.com/codrops/SelectInspiration <br> | |||
Et pour le téléchargement direct ici https://github.com/codrops/SelectInspiration/archive/master.zip | |||
Après téléchargement ne conserver que les dossier js, fonts et css. | |||
Dans le dossier css ne conserver que les fichiers normalize.css, cs-select.css et cs-skin-underline.css. | |||
Ce dernier fichier a été modifié pour respecter l'aspect graphique de la page. | |||
cs-skin-underline.css | |||
<syntaxhighlight lang="css"> | |||
@font-face { | |||
font-family: 'icomoon'; | |||
src:url('../fonts/icomoon/icomoon.eot?-rdnm34'); | |||
src:url('../fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'), | |||
url('../fonts/icomoon/icomoon.woff?-rdnm34') format('woff'), | |||
url('../fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'), | |||
url('../fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
div.cs-skin-underline { | |||
background: transparent; | |||
font-size: 1em; | |||
max-width: 220px; | |||
min-width :200px; | |||
} | |||
@media screen and (max-width: 33em) { | |||
div.cs-skin-underline { font-size: 1.2em; } | |||
} | |||
.cs-skin-underline > span { | |||
padding: 0.5em 3em 0.5em 0.5em; | |||
border-bottom: 3px solid #FA7E12; | |||
border-color: #FA7E12; | |||
font-weight: bold; | |||
color: blue; | |||
} | |||
.cs-skin-underline > span::after { | |||
font-family: 'icomoon'; | |||
content: '\e003'; | |||
right: 0.25em; | |||
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg); | |||
transform: translate3d(0,-50%,0) rotate3d(0,0,1,45deg); | |||
-webkit-transition: -webkit-transform 0.5s; | |||
transition: transform 0.5s; | |||
} | |||
.cs-skin-underline.cs-active > span::after { | |||
-webkit-transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg); | |||
transform: translate3d(0,-50%,0) rotate3d(0,0,1,270deg); | |||
} | |||
.cs-skin-underline .cs-options { | |||
background: #bbc7c8; | |||
opacity: 0; | |||
-webkit-transition: opacity 0.3s 0.4s, visibility 0s 0.7s; | |||
transition: opacity 0.3s 0.4s, visibility 0s 0.7s; | |||
} | |||
.cs-skin-underline.cs-active .cs-options { | |||
opacity: 1; | |||
-webkit-transition: opacity 0.3s; | |||
transition: opacity 0.3s; | |||
} | |||
.cs-skin-underline ul span { | |||
position: relative; | |||
text-transform: uppercase; | |||
font-size: 75%; | |||
font-weight: 700; | |||
letter-spacing: 1px; | |||
padding: 1.2em 0.8em; | |||
opacity: 0; | |||
-webkit-transform: translate3d(100%,0,0); | |||
transform: translate3d(100%,0,0); | |||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s; | |||
transition: opacity 0.3s, transform 0.3s; | |||
} | |||
.cs-select ul span::after { | |||
content: ''; | |||
opacity: 0; | |||
} | |||
.cs-select .cs-selected span::after { | |||
font-family: 'icomoon'; | |||
content: '\e00d'; | |||
opacity: 1; | |||
-webkit-transition: opacity 0.3s 0.7s; | |||
transition: opacity 0.3s 0.7s; | |||
} | |||
.cs-skin-underline ul span::before { | |||
content: ''; | |||
position: absolute; | |||
bottom: 1px; | |||
left: 0; | |||
height: 1px; | |||
width: 100%; | |||
background-color: #FA7E12; | |||
-webkit-transform: translate3d(200%,0,0); | |||
transform: translate3d(200%,0,0); | |||
-webkit-transition: -webkit-transform 0.3s; | |||
transition: transform 0.3s; | |||
} | |||
.cs-skin-underline.cs-active ul span, | |||
.cs-skin-underline.cs-active ul span::before { | |||
opacity: 1; | |||
-webkit-transform: translate3d(0,0,0); | |||
transform: translate3d(0,0,0); | |||
} | |||
.cs-skin-underline li:nth-child(5) span, | |||
.cs-skin-underline li:nth-child(5) span::before, | |||
.cs-skin-underline.cs-active li:first-child span, | |||
.cs-skin-underline.cs-active li:first-child span::before { | |||
-webkit-transition-delay: 0s; | |||
transition-delay: 0s; | |||
} | |||
.cs-skin-underline li:nth-child(4) span, | |||
.cs-skin-underline li:nth-child(4) span::before, | |||
.cs-skin-underline.cs-active li:nth-child(2) span, | |||
.cs-skin-underline.cs-active li:nth-child(2) span::before { | |||
-webkit-transition-delay: 0.05s; | |||
transition-delay: 0.05s; | |||
} | |||
.cs-skin-underline li:nth-child(3) span, | |||
.cs-skin-underline li:nth-child(3) span::before { | |||
-webkit-transition-delay: 0.1s; | |||
transition-delay: 0.1s; | |||
} | |||
.cs-skin-underline li:nth-child(2) span, | |||
.cs-skin-underline li:nth-child(2) span::before, | |||
.cs-skin-underline.cs-active li:nth-child(4) span, | |||
.cs-skin-underline.cs-active li:nth-child(4) span::before { | |||
-webkit-transition-delay: 0.15s; | |||
transition-delay: 0.15s; | |||
} | |||
.cs-skin-underline li:first-child span, | |||
.cs-skin-underline li:first-child span::before, | |||
.cs-skin-underline.cs-active li:nth-child(5) span, | |||
.cs-skin-underline.cs-active li:nth-child(5) span::before { | |||
-webkit-transition-delay: 0.2s; | |||
transition-delay: 0.2s; | |||
} /* more items require more delay declarations */ | |||
.cs-skin-underline .cs-options li span:hover, | |||
.cs-skin-underline .cs-options li.cs-focus span, | |||
.cs-skin-underline li.cs-selected span { | |||
color: #566473; | |||
background: transparent; | |||
} | |||
</syntaxhighlight> | |||
=== | === /KML_outputs === | ||
Dossier destiné à recueillir les fichiers .KML générés lors l'utilisation du site.<br> | |||
Il faut le purger de temps en temps.<br> | |||
Si l'utilisation devenait intensive, il serait sans doute utile de créer une routine d'effacement périodique.<br> |
modifications