Vues adaptatives

Retour

Fonction “vue adaptative”

Importer des images grand format depuis Géoportail

La fonction « vue adaptative » utilisée ici est destinée aux développeurs de sites web auxquels elle permet de visualiser leurs pages sur des écrans plus petits que celui de leur ordinateur (tablettes ou smartphones). On visualise alors un écran virtuel.
En la détournant un peu, on peut inverser la démarche et simuler un écran plus grand dont on peut, ensuite, prendre une copie.
Notez que le procédé peut être utilisé avec d’autres sites fournissant des cartes en ligne, comme l’Atlas des patrimoines (site du Ministère de la Culture) ou Openstreetmap.

Quelques exemples dans le Vexin français

Définir cadrage et échelle sur Géoportail


 

La vue adaptative sur le navigateur Google-Chrome

Télécharger le PDF

Dans le menu représenté par trois petits points alignés verticalement (à droite de la boîte d’outil), demandez « Plus d’outils / Outils de développement » :

 

 

Une zone de texte (html) apparaît à droite de l’écran. Au dessus de cette zone, cliquez sur l’icone représentant des écrans de smartphone et de tablette (infobulle : « Toggle device toolbar »).

 

 

Un nouveau menu local (« Responsive ») apparaît sous la barre d’adresse, accompagné de deux zones de saisie de valeurs numériques :

Vous pouvez saisir les valeurs que vous souhaitez (jusqu’à 9999) dans ces zones, ou modifier le menu local en le déroulant et en cliquant sur « Edit… », ce qui vous permet d’enregistrer les formats qui vous intéressent.

 

 

 

 

 

 

 

Dans la fenêtre de droite, cliquez sur « Add custom devices… »

Nommez votre format d’écran, entrez ses dimensions dans les zones de saisie puis cliquez sur « Add ». Votre format d’écran personnalisé apparaît maintenant dans le menu local « Responsive » : choisissez-le.

Chrome affiche maintenant la carte Géoportail selon votre nouveau format d’écran, en l’adaptant à la fenêtre grâce à un zoom (qui n’existe pas sur Firefox).

En modifiant la valeur de ce zoom, vous pouvez visualiser votre carte de près (jusqu’à 150 %) et la vérifier avant de l’exporter.

Si votre réseau n’est pas très performant, et si le format demandé est grand, la carte peut mettre un certain temps à s’afficher. Attendez que l’affichage soit terminé avant d’exporter.

L’exportation se fait par copie de votre écran virtuel en utilisant le menu local situé au milieu de la barre d’outil et en demandant « Capture screenshot » :

La copie d’écran est enregistrée dans votre dossier « Téléchargement » (ou dans le dossier que vous aurez défini dans les préférences de Chrome). Le fichier est intitulé : www.geoportail.gouv.fr_carte [suivi du nom de votre format d’écran], il est au format .png (sur Mac).


La vue adaptative sur le navigateur Firefox

Télécharger le PDF

Dans le menu « Outil » de Firefox, déroulez le sous-menu « Développement web » puis sélectionnez « Vue adaptative » (ou utilisez le code clavier…) :

La fenêtre se recadre et une nouvelle barre d’outil apparaît, en dessous de la barre d’adresse :

Le menu déroulant, à gauche, propose différents formats correspondant aux écrans de smartphones et tablettes, mais les champs peuvent aussi être remplis au clavier (ici, on a entré 6000 x 4000) :

On visualise alors un écran virtuel dans lequel on se déplace à l’aide de barres de défilement.

En cliquant sur le petit icone en forme d’appareil photo, à droite, on obtient une copie d’écran de 6000 par 4000 pixels.

Framaforms

Retour

Réaliser un formulaire en ligne sur Framaforms

Principales fonctionnalités

1 – Se rendre sur Framaform2 – Concevoir le formulaire3 – Définir des champs conditionnels
4 – Insérer des images5 – Utiliser la fonction de balisage :
A – Pour placer un inter-titre, B – Pour placer une image “décorative”

Télécharger le PDF


Introduction

Parmi les applications disponibles sur le web pour réaliser des enquêtes en ligne (Googleform, Drag’n survey, SurveyMonkey…), nous avons opté pour Framaform qui nous a semblé proposer les meilleurs outils pour gérer les champs conditionnels.

La gestion des champs conditionnels est ce qui permet de ne pas afficher certains champs lorsque les informations données précédemment les rendent inutiles (par exemple, la question “Où promenez-vous votre chien?” ne sera pas posée si la réponse à “Avez-vous des animaux domestiques?” est “Non”).

Vous pouvez tester ici un questionnaire proche de celui que nous avons utilisé pour notre recherche POPSU. Il est centré sur la question de la mobilité et cherche à découvrir quels sont les déplacements que pratiquent le plus souvent les habitants. N’hésitez pas à cliquer sur les différentes options proposées pour voir apparaître ou disparaître les champs conditionnels.

Cet exemple (fictif) comporte 150 questions. Sur le questionnaire principal, seules 50 d’entre elles s’affichent, ce qui rend le questionnaire beaucoup plus fluide. Vous pouvez l’utiliser comme modèle en le clonant sur le site de Framaforms : après avoir créé votre compte, cliquez ici puis sur le lien “Cloner”.


1 – Se rendre sur Framaform

• Rendez vous sur http://framaforms.org et créez un compte « Framasoft » si vous n’en avez pas déjà un. Identifiez-vous et cliquez sur « Créer un formulaire vierge ».
• Entrez le titre de votre formulaire.
• Ajoutez éventuellement une image.
• Saisissez dans le champs « Description » le texte qui figurera, sous votre image, en entête du formulaire.
• Cliquez sur « Enregistrer » en bas de page.

Une barre d’onglet s’affiche alors :

 
« Voir » vous permet de visualiser votre formulaire.
« Modifier » vous permet de revenir sur les informations saisies précédemment et de les compléter.
« Formulaire », onglet sur lequel vous vous trouvez maintenant par défaut, vous permet de concevoir votre formulaire.
« Résultats » sera à utiliser lorsque vous aurez diffusé votre formulaire et reçu des réponses.
« Partager » vous permet notamment d’obtenir le lien vers le formulaire que vous diffuserez ensuite.

Il est conseillé de retourner sur l’onglet « Modifier » pour faire apparaître, en bas de page, le «Choix du thème pour ce formulaire», et sélectionner « Theme responsive standard », qui améliorera la qualité de l’affichage, notamment sur smartphones et tablettes.


2 – Concevoir le formulaire ^

La fenêtre intitulée « Ajouter un champ », à droite, affiche les différents types de champs que vous pouvez placer dans votre formulaire. Cliquez sur l’un des boutons, ou faites le glisser à l’emplacement désiré.

Notes sur les champs les plus couramment utilisés :

« Champ texte » place un champ pouvant contenir du texte sur une ligne unique. Convient pour les réponses courtes.
« Zone de texte » place un champ acceptant plusieurs lignes et doté de barres de défilement. Convient pour des réponses longues.
« Nombre » place un champ n’acceptant que des valeurs numériques. Convient pour des âges, des distances, des surfaces, etc.
« Boutons radios » montre une série de choix dont un seul peut être sélectionné.
« Cases à cocher » idem, mais permet des choix multiples.
« Liste de sélections » permet d’afficher un menu déroulant. Il propose le même type de choix que les boutons radios, mais n’est pas facile à utiliser sur smartphones ou tablettes. À déconseiller, donc.
« Saut de page » divise votre formulaire en plusieurs écrans qui s’afficheront l’un à la suite de l’autre à l’aide d’un bouton « Page suivante ».
« Balisage » sera présenté plus loin.

Pour les autres types de champs, consultez l’aide de Framaforms.

Lorsque vous placez un champ, il se présente sous cette forme :

Cliquez sur le petit crayon pour passer en mode Édition.

L’onglet « Propriété » vous permet de saisir le Titre du champ (ex. « Entrez ici votre nom »), d’attribuer une valeur par défaut, et d’ajouter un commentaire.

L’onglet « Affichage » vous permet de déterminer la position du champ par rapport à son « étiquette » (c’est-à-dire le titre que vous avez précédemment saisi). Préfixe et suffixe placent du texte avant ou après le champ (par exemple « m2 » comme suffixe d’un champ demandant une surface). « Taille » permet de limiter la dimension du champ (ex. « 50% » limitera le champ à la moitié de la largeur du formulaire).

L’onglet « Validation » permet de fixer des conditions à la saisie des valeurs.

Lorsqu’il s’agit d’un champ proposant des choix, un onglet « Option » apparaît en plus.

Saisissez chacune des options dans les champs « Valeur » et cliquez sur « Ajouter un élément » si besoin. Cliquez sur l’un des boutons pour définir une valeur par défaut.


3 – Définir des champs conditionnels ^

Si vous souhaitez, comme dans l’exemple ci-contre, que l’apparition d’un champ soit conditionné
par la réponse faite sur un autre champ, vous devez recourir aux «Champs conditionnels».

Enregistrez d’abord votre formulaire, puis cliquez sur le lien “Champs conditionnels”, sous la barre d’onglets :

Cliquez sur le petit bouton « + »

Puis utilisez les menus locaux pour définir votre condition :

En cliquant sur les boutons « + », vous pouvez :

– Associer plusieurs conditions :


– Ou demander l’affichage de plusieurs champs :

Vous pouvez aussi poser des conditions différentes en utilisant les options proposées dans les menus locaux (exemple ci-contre), ou en remplaçant “Et” par “Ou” lorsque vous associez deux conditions.

Si le champ conditionnant est une valeur numérique, vous pouvez aussi utiliser les opérateurs = < > ≤ ≥. Exemple : si la réponse à “Combien de personnes habitent dans votre logement ?” est <2, la question “Dont combien d’enfants ?” ne sera pas posée.

Enfin, si vous aimez les conditions complexes, vous pouvez ouvrir des parenthèses en utilisant  les boutons (+)…

 


4 – Insérer des images ^

Seule l’image de l’entête peut être téléchargée sur Framaforms (dans la limite de 2 Mo).
Les autres images que vous souhaiterez afficher sur votre formulaire devront déjà être sur le web, et c’est l’adresse web de cette image que vous indiquerez à Framaforms.

Vous pouvez, par exemple, placer une image sur votre page Facebook, votre site web, votre blog… puis afficher l’image dans une nouvelle fenêtre et copier le lien dans la barre d’adresse de votre navigateur, ou demander « Copier l’adresse de l’image » si la commande apparaît.

Pour obtenir un champ comme celui-ci :

Saisissez, dans les options d’un bouton radio, les adresses de vos images comme suit :

Procédez de la même manière avec les cases à cocher.

Attention : le mode de saisie normal ne permet pas plus de trois images. Pour en afficher davantage, passez en mode « Saisie manuelle ». Le champ de saisie se présente alors ainsi :

Et il vous suffit de rajouter des lignes en respectant la syntaxe du code.


5 – Utiliser la fonction de balisage ^

Les balises vous font entrer plus avant dans le monde du code html, mais offrent de nombreuses possibilités complémentaires.

Deux exemples relativement simples :

A – Pour placer un inter-titre comme celui ci (en vert) :

Placez un champ « Balisage ». Supprimez le texte contenu dans la zone « Balisage » et remplacez-le par celui-ci :

<p><font size=”+1″><font color=”green”><strong>Composition de votre famille</strong></font></p>

Dans cette ligne de code, <font size=”+1″> grossit le texte, <font color=”green”> le colore en vert et <strong> le met en caractères gras.

« Green » peut être remplacé par : black, white, gray, red, blue, yellow, maroon, olive, lime, aqua, teal, silver, navy, fuschia, orange ou purple.

Vous pouvez aussi saisir une autre nuance de la palette web en indiquant son code hexadécimal, sans guillemets et précédé d’un #.

<font color=#f0f0f0>, par exemple, définit la couleur de fond (gris très clair) de votre formulaire en mode responsive, donc rend votre texte invisible.

Pour d’autres nuances, et leur correspondance avec les mode RVB ou HSL, rendez-vous ici.

 

 

 

 

 

B – Pour placer une image “décorative” :

Vous utiliserez le même procédé et le même code que celui vu au chapitre « Les images ».

Le code suivant :
<img src=”https://topia.fr/wp-content/uploads/2020/04/Enfants.jpg” />
<p><font size=”+2″><font color=”green”><strong>La place des enfants dans votre association</strong></font></p>

Donnera l’effet ci-dessous :

qui peut contribuer à rendre votre questionnaire plus attractif.

Pour découvrir d’autres “Astuces” de Framaforms, cliquez ici.

À suivre


Lien vers le questionnaire “Habitants de Moulinsart et des environs, comment vivez-vous dans votre territoire ?

Les champs principaux de ce questionnaire (document .pdf)

Organisation des champs conditionnels de ce questionnaire (document .pdf)


Le 27 avril 2020, Roland Vidal

OpenStreetMap

Retour

OpenStreetMap (OSM)

OSM est un outil de cartographie collaboratif permettant, sur un fond topographique existant, d’apporter et d’échanger nos propres informations. Cette application a d’autant plus retenu notre attention que les données ainsi saisies peuvent être importées depuis, ou exportées vers, les logiciels de CAO-DAO et les SIG que nous utilisons par ailleurs.

Les données rendues publiques par d’autres utilisateurs peuvent également être utilisées, de même que nous pouvons rendre publiques nos propres données. La validation de ces données est faite par la communauté des cartographes contributeurs, de la même manière que  sur Wikipédia.

Les documents peuvent être travaillés à n’importe quelle échelle :

Exemple d’une carte réalisée par Hugo, de l’équipe POPSU :

Cliquez ici pour découvrir OpenStreetMap.

Et ici pour suivre, sur Youtube, le tutoriel que Hugo a réalisé pour nous.

Paysage et confinement

La recherche en paysage

au temps du confinement

 

Être confiné chez soi, pour un chercheur en paysage, c’est se priver de ses outils méthodologiques habituels : arpentage du terrain, relevés, croquis, rencontre avec les habitants, observations anthropologiques ou naturalistes, etc.

Pourtant, l’enseignement et la recherche continuent… parce que les contraintes de temps sont là, qu’il s’agisse de former des apprentis-chercheurs ou de respecter les engagements pris dans les programmes de recherche.

On explore donc les outils qu’il nous reste, et notamment ceux que nous offrent les technologies de l’information et de la communication, en se disant, pour se consoler, qu’on est moins désarmé en 2020 qu’on ne l’aurait été cinquante ans plus tôt.

“Le paysage, c’est l’endroit où le ciel et la terre se touchent”, nous disait Michel Corajoud.

On le sait bien, cet endroit n’existe pas, puisque le ciel et la terre ne se touchent nulle part.

Le paysage, c’est donc d’abord une affaire d’imagination, et l’imagination, elle, ne s’arrête pas avec un simple confinement.

 


[Plongée en carnet(s)] : Un paysagiste confiné, un extrait de carnet de terrain, les questions soulevées en arpentant et en dessinant, un lien pour approfondir…
Par Alexis Pernet
.
Télécharger le recueil
 

Quelques outils mis en œuvre par l’équipe du programme POPSU-Territoires(1) Magny-en-Vexin, une petite ville sous influence métropolitaine / à la recherche de son territoire perdu(2)

Les programmes POPSU ont la particularité de devoir se dérouler sur un temps court. Un an, ce n’est pas une durée habituelle pour un programme de recherche, fut-il de “recherche-action”. Et, bien sûr, interrompre durant deux ou trois mois un programme aussi court ne serait pas raisonnable.

Les stages engagés ont donc été maintenus, d’autant qu’il s’agit aussi de terminer dans les délais les cursus universitaires engagés.

Mais les processus méthodologiques ont dû être adaptés.

Les outils numériques ont été privilégiés, bien sûr, mais aussi et surtout les outils de communication. Si les enquêtes par téléphone ou par courriel sont d’ordinaire difficiles à conduire parce qu’elles sont trop souvent perçues comme intrusives, la situation n’est pas la même par temps de confinement, un temps où beaucoup de gens s’ennuient chez eux et sont plutôt contents de discuter, de répondre à des mails ou de remplir des formulaires.

• L’équipe a donc multiplié les entretiens téléphoniques, faciles à enregistrer grâce à la modernité de nos smartphones (avec l’accord de l’interlocuteur, bien sûr), et à partir desquels des formulaires d’enquête en ligne ont été élaborés puis diffusés. Vous trouverez ici la description de Framaform, l’une des applications (opensource) que nous avons utilisées pour cela.

• Du côté des images, si les croquis de terrain ont dû être abandonnés, les représentations graphiques numériques ont, en revanche, été particulièrement développées, en utilisant notamment un outil collaboratif (opensource également), OpenStreetMap, dont vous trouverez la description ici.

• Côté images, encore, les ressources existant sur le web ont été exploitées le plus possible. Vous trouverez ici une technique qui nous a permis d’exporter les documents de Géoportail (notamment) avec un peu plus d’efficacité que les multiples copies d’écran collées les unes à côté des autres que nous pratiquions auparavant. On récupère, par exemple, des cartes ou des photos aériennes au format A0. On utilise pour cela la fonction “Vue adaptative” décrite ici, que les navigateurs proposent en mode “développeur”.

Et d’autres choses encore, notamment du côté des outils collaboratifs, sur Topia ou ailleurs, qui ne sont pas destinées à être rendues publiques mais dont nous rendrons compte sur cette page.

1 : Programme initié par le Plan urbanisme, construction, architecture (PUCA). Voir ici.
2 : L’un des 10 projets lauréat de la session 2019. Voir ici.


Et sur Topia

Confinés ou pas, les acteurs habituels de Topia sont toujours actifs.

• Pierre Donadieu poursuit son “Histoire de l’ENSP“, qui comporte déjà 24 chapitres auxquels se sont récemment ajoutées plusieurs biographies. Vous y trouverez, notamment, celle de celui qui a dit que “le paysage est l’endroit ou le ciel et la terre se touchent”.

• Privés de leurs archives et de leurs bibliothèques publiques habituelles, l’historienne Chiara Santini et le paysagiste Michel Audouy proposent, à partir de leur propre documentation et de celle qu’ils trouvent sur le web, de visiter ou de revisiter virtuellement des jardins remarquables situés en France ou ailleurs. Ces visites qui nous sont proposées tous les jours ouvrables illustrent et renouvellent la page d’accueil de Topia. Elles sont compilées dans le menu “Ressource“.