Concevoir la mise en page de votre site Open Data

Une fois votre site Open Data configuré et les données ajoutées, vous pouvez concevoir la mise en page de la page d'accueil et personnaliser l'en-tête et le pied de page. Toutes ces opérations peuvent s'effectuer sous l'onglet Editeur de site. Cet onglet vous permet de concevoir votre site à l'aide de l'éditeur fourni ou d'un code HTML personnalisé.

Titre et image de bannière

Pour l'en-tête de votre site, vous pouvez fournir une image miniature avec un titre et une URL. Pour optimiser les résultats, l'image ne doit pas dépasser 100x50. Toute autre taille sera ajustée à ces dimensions. Les formats d'image valides sont .png, .gif et .jpg.

Mise en page de la page d'accueil et du pied de page

Open Data propose un concepteur de mise en page qui repose sur l'idée de "widgets". Les outils de conception vous permettent d'ajouter des widgets et de personnaliser le contenu.

  1. Cliquez sur Ajouter un widget pour ajouter ces zones de conception.

    Vous pouvez modifier la taille et l'emplacement de chaque widget. Vous pouvez supprimer un widget en cliquant sur l'icône de corbeille.

  2. Cliquez sur un widget pour le renseigner en fonction des options fournies.
  3. Cliquez sur Terminé.

Prise en charge d'une personnalisation complète

Bien que l'assistant de conception suffise à la plupart des organisations, le système permet également aux organisations dont les exigences en matière de conception Web sont spécifiques, de tirer parti de toute la puissance du code HTML5 et CSS. Pour utiliser l'en-tête, le pied de page et la page d'accueil en mode HTML personnalisé, les développeurs Web peuvent choisir l'onglet Code sur l'élément correspondant, ce qui leur confère un contrôle complet du contenu.

Le code CSS de l'intégralité du site peut être contrôlé à partir de l'onglet Code sur l'élément En-tête. Cela permet aux concepteurs de contrôler et de modifier certains des styles et couleurs par défaut utilisés dans leur site.

Personnalisation du code CSS

Dans le tableau de bord administratif, vous avez la possibilité de personnaliser le code CSS de votre site Open Data. Les ID et classes de certains des éléments de mise en page courants sont illustrés dans l'exemple suivant : Vous pouvez copier le code dans votre feuille de style et modifier les valeurs par défaut pour utiliser les styles souhaités.

Header element highlighted
#header {
background: #ffffff;
height: 50px; 
}
Searchbar element highlighted
#title-bar-region {
background-color: #fcfcfc;
}
Map size control element highlighted
#map-bar-region #controls-region #controls {
background-color: #ededed;
}
Map navigation element highlighted
.esriSimpleSliderIncrementButton,
.esriSimpleSliderDecrementButton {
background-color: #ededed !important;
}
#map-bar-region #locator-region #locator {
background: #ededed;
}
h2 element highlighted
#page-content h2 {
font-size: 2em;
line-height: 1.3em;
font-family: "Lucida Grande","Segoe UI",Arial,sans-serif;
color: #007ac2;
}
Favorites element highlighted
#saved-layers {
background: #fcfcfc;
}
Button element highlighted
.btn {
background-color: #007ac2;
}
.btn:hover {
background-color: #4997d2;
}
Button pop-over element highlighted
.popover-content {
background-color: #f6f6f6;
}
Changes arrow color at top of popover
.popover.bottom>.arrow:after {
border-bottom-color: #f6f6f6
}
Button pop-over element highlighted
#dataset-attributes-region .attribute-info {
background: #eeeeee;
}
Activities button highlighted
#activities-region .btn {
background-color: #f6f6f6;
}
Footer element highlighted
#footer {
background: #f3f3ee;
}
Use a custom loader for map and table loads
.open-data-loader {
background: url('https://[your gif link].gif') no-repeat;
}

Utilisation du texte

Texte pris en charge pour configurer votre site Open Data

Regroupement des données

A l'aide des balises définies dans ArcGIS Online, vous pouvez ajouter des catégories dans votre page d'accueil qui dirigent les utilisateurs vers des jeux de données spécifiques.

  1. Vérifiez que vos éléments ArcGIS Online disposent de balises thématiques (voir Amélioration de la qualité des données).
  2. Cliquez sur Aperçu du site.
  3. Ajoutez /datasets?keyword=[tag] à l'URL du site (où [tag] est votre balise thématique) et vérifiez que les jeux de données voulus apparaissent.
  4. Copiez l'URL de recherche.
  5. Sous l'onglet Editeur de site de Site Builder, joignez le lien à un widget d'image ou à un texte à l'aide du texte.

Vous pouvez également classer les données à l'aide de groupes dans ArcGIS Online. Les utilisateurs sont dirigés vers tous les jeux de données au sein d'un groupe en particulier.

  1. Accédez à votre groupe dans ArcGIS Online.
  2. Copiez l'ID de groupe qui apparaît dans l'URL après ?id=. L'ID du groupe est constitué de 32 chiffres et lettres.
  3. Cliquez sur Aperçu du site.
  4. Ajoutez /datasets?group_id=[id] à l'URL du site (où [id] est votre ID de groupe) et vérifiez que les jeux de données voulus apparaissent.
  5. Copiez l'URL de recherche.
  6. Sous l'onglet Editeur de site de Site Builder, joignez le lien à un widget d'image ou à un texte à l'aide du texte.