dieudo.fr

Différences entre les versions de « Atlas 380/iPad/notreavion.net »

Atlas 380/iPad/notreavion.net (voir la source)

Version du 29 mars 2015 à 16:17

5 414 octets ajoutés ,  29 mars 2015 à 16:17
→‎form.html : page d'initialisation
 
(17 versions intermédiaires par le même utilisateur non affichées)
Ligne 306 : Ligne 306 :
</Icon>
</Icon>
<hotSpot x='0.5' y='0.0' xunits='fraction' yunits='fraction' />
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' />
</IconStyle>
</IconStyle>
</Style>
</Style>
Ligne 315 : Ligne 315 :
</Icon>
</Icon>
<hotSpot x='0.5' y='0.0' xunits='fraction' yunits='fraction' />
<hotSpot x='0.5' y='0.5' xunits='fraction' yunits='fraction' />
</IconStyle>
</IconStyle>
</Style>
</Style>
Ligne 1 515 : Ligne 1 515 :
</syntaxhighlight>
</syntaxhighlight>


== Ressources ==
== 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, ce sous-dossier est à purger de temps en temps<br>
/KML_outputs : les fichiers KML générés.<br>


=== Images ===
=== /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.


Images pour l'affichage
'''Images pour l'affichage'''


[http://www.notreavion.net/convert/images/radio.png radio.jpg]<br>
* Les boutons radio personnalisés [http://www.notreavion.net/convert/images/radio.png radio.jpg]<br>
[http://www.notreavion.net/convert/images/checkbox.png checkbox.png]<br>
* Les cases à cocher personnalisées [http://www.notreavion.net/convert/images/checkbox.png checkbox.png]<br>
[http://www.notreavion.net/convert/images/myinfow.png myinfow.png]<br>
* Personnalisation de l'info-bulle sur la carte [http://www.notreavion.net/convert/images/myinfow.png myinfow.png]<br>
[http://www.notreavion.net/convert/images/icone_route.png icone_route.png]<br>
* Icône des points de la route principale [http://www.notreavion.net/convert/images/icone_route.png icone_route.png]<br>
[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>
[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/form.jpg form.jpg]<br>
* [http://www.notreavion.net/convert/images/output.jpg output.jpg]<br>
* [http://www.notreavion.net/convert/images/envoi_mail.jpg envoi_mail.jpg]<br>
* [http://www.notreavion.net/convert/images/statique.jpg statique.jpg]<br>
* [http://www.notreavion.net/convert/images/interactive.jpg interactive.jpg]<br>
* [http://www.notreavion.net/convert/images/route.jpg route.jpg]<br>
* [http://www.notreavion.net/convert/images/zoom.jpg zoom.jpg]<br>


[http://www.notreavion.net/convert/images/capture.jpg capture.jpg]<br>
=== /fichiers_airports ===
[http://www.notreavion.net/convert/images/form.jpg form.jpg]<br>
Ces fichiers .KMZ sont disponibles sur le réseau Yammer interne Air France dans le groupe Maps.me.<br>
[http://www.notreavion.net/convert/images/output.jpg output.jpg]<br>
Pour l'utilisation sur le site il faut en extraire le fichier .KML en utilisant un outil de décompression standard.
[http://www.notreavion.net/convert/images/envoi_mail.jpg envoi_mail.jpg]<br>
[http://www.notreavion.net/convert/images/statique.jpg statique.jpg]<br>
[http://www.notreavion.net/convert/images/interactive.jpg interactive.jpg]<br>
[http://www.notreavion.net/convert/images/route.jpg route.jpg]<br>
[http://www.notreavion.net/convert/images/zoom.jpg zoom.jpg]<br>


=== Fichiers Airports ===
=== /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


=== Listes déroulantes ===
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.


=== Résultats ===
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>
Pascal G
110

modifications

Récupérée de « https://dieudo.fr/wiki/Spécial:MobileDiff/1760...1778 »