Comment consulter une Framacarte ? (Tutos uMap 1/4) Juste avant Noël, nous vous présentions Framacartes, un service de création de cartes personnalisées pour vos sites web, communautés, randos, chasses au trésor… Framacartes est basé sur le logiciel Umap, qui permet d’ajouter des points, tracés et polygones sur les fonds de cartes d’OpenStreetMap. C’est alors qu’Antoine Riche, ingénieur informatique, Contributeur et Formateur OpenStreetmap, nous a contactés pour nous présenter sa série de tutoriels (libres, eux aussi) pour apprendre à maîtriser uMap (et donc Framacartes) à toute la famille Dupuis-Morizeau.
C’est avec son autorisation (et de chaleureux remerciements) que nous reproduirons sur le framablog les quatre premiers tutos (le niveau « débutant ») afin d’en faire profiter le plus grand nombre. Cette semaine, on apprend tout simplement à se familiariser avec uMap et à profiter pleinement d’une Framacarte ! Je consulte une carte uMap Ce que nous allons apprendre Procédons par étapes 1. Vous avez reçu par mail un lien vers une carte umap. Make different regions of an image clickable. I have a chart of the English alphabet. I would like users to be able to click on each letter, and go to that letter's page. How can I do this? Thanks. There's a technique called "image maps".These two links should provide a detailed explanation: above assumes that you are comfortable writing a bit of html.
Jibbius, thank you. Where do I insert the html? Image avec zones cliquables | Ordiformation81. Dans cet article, nous allons apprendre grâce à ce tuto à créer une carte interactive avec des zones cliquables qui pointent vers des sites comme par exemple « google, you tube,… » Dans notre exemple, nous aurons 7 zones à traiter. Commençons par ajouter l’image en passant par le menu Médias – Ajouter ( Attention, l’image doit être à la bonne taille) Ensuite il faut récupérer l’URL (l’adresse web de l’image) et la copier. Faire attention, l’adresse est longue ! Il ne vous reste plus qu’à coller ce code dans une page en passant par l’onglet « texte » et « mettre à jour » et repasser en visuel.Voici le résultat : je n’ai fait que 4 zones (Google, google map, youtube et google +) Introduction à la programmation. Thinglink : l'outil qui dynamise vos pages web (Tuto vidéo)
Bonjour ! Aujourd’hui je voudrais vous parler d’un outil web très bien pensé et simple d’utilisation. En 5 mn, il apportera du dynamisme aux pages de votre site web, en même temps que de l’interaction et une dimension partageable ! J’ai découvert cet outil il y a près d’un an, et j’ai eu l’occasion de le tester sur d’autres sites internet. Cet outil, c’est Thinglink. Dans cet article, je vous propose un tuto vidéo pour apprendre à s’en servir. Thinglink, c’est ça ! Thinglink permet d’ajouter de l’interaction à une simple image, en faisant apparaitre de petites infobulles cliquables.
Vos images peuvent parler… Encore + ! Vous voyez le concept ? Vous pouvez insérer des vidéos, des google map, des sons, du texte, des badges de réseaux sociaux, des liens… Sans compter que chaque image dispose d’un code « embed », qui permet à n’importe quel internaute de placer l’image interactive sur son site web ! Pour le moment, je ne suis jamais tombé sur un site d’association incluant Thinglink. Pourquoi utiliser Prezi pour créer vos présentations ?
Beaucoup de gens me posent la question : pourquoi utiliser Prezi plutôt que PowerPoint pour mes présentations ? Les réponses sont multiples et j’ai tenté de les synthétiser ici. Bien que Prezi totalise aujourd’hui 40 millions d’utilisateurs et qu’il vienne de publier une nouvelle interface en français, peu de personnes le connaissent vraiment. Nombreux sont ceux qui ne perçoivent pas bien les différences avec PowerPoint.
Nombreux aussi ceux qui, n’ayant vu que des présentations de piètre qualité, en ont une représentation complètement faussée. Nombreux sont ceux qui me demandent pourquoi j’ai arrêté les formations PowerPoint au profit de formations Prezi… Je vais donc essayer de vous montrer ici quels sont les avantages de Prezi. Une petite carte mentale XMind pour commencer (elle est aussi sur ma page Biggerplate d’où vous pouvez la télécharger gratuitement) : Pourquoi utiliser Prezi ? Une application non-séquentielle Prezi est non-séquentiel. A. B. Oui. A. Regroupement d’objets b. A. B. Thinglink. Creer des images interactives.
Thinglink est un outil en ligne qui va vous permettre de créer des images interactives et de les partager facilement. Autant l’avouer tout de suite je suis un grand fan de ThingLink, dont j’ai déjà parlé ici sur Allweb2. ThingLink a de mon point de vue un gros potentiel pour un usage en classe et plus largement dans l’enseignement. Thinglink permet d’insérer des points multimédias dans une image fixe. Autrement dit dans une photo. Ainsi vous allez pouvoir raconter toute une histoire ou enrichir ce que dit une photographie avec des encadrés multimédias reconnaissables sur l’image par des points.
Après vous être inscrit, vous devez ajouter une photographie pour créer votre première image interactive. Les visiteurs qui verront votre image pourront s’ils le souhaitent déclencher ces compléments multimédias à leur guise en cliquant sur les points. Dans la classe. Le potentiel est énorme. Très facile à prendre en main et à utiliser, Thinglink est un coup de coeur. Lien : Thinglink. 10 outils en ligne pour créer des infographies. Un dessin vaut mieux que de long discours. Le refrain est connu. Le développement de l’usage des infographies dans la presse , dans les médias, dans l’édition ces dernières années est une tendance lourde des nouveaux moyens d’informer.
Nous sommes abreuvés d’informations tous les jours. Une « infobesité » chronique à laquelle il est difficile d’échapper. Pour mieux mémoriser, mieux comprendre des informations, notamment statistiques ou géographiques rien de mieux qu’un diagramme, une cartographie ou un schéma explicatif. Pour créer une belle infographie de nos jours plus besoin de vous plonger dans Photoshop ou être un virtuose d’Illustrator. Venngage Venngage est un excellent outil pour vous lancer dans la création de votre première infographie. Infogr.am Infogram a su se occuper une des premières places dans ce marché très encombré des outils pour créer des infographies. Visme.co Canva Canva fait partie des incontournables de cette liste. Easelly J’aime beaucoup Easelly. Tableau PikToChart. Genial.ly, c’est génial ! | TICE et formation. Comme souvent, j’ai eu connaissance de cet outil via ma veille documentaire TICE… Des collègues en disaient du bien, je me suis inscrit « pour voir » et j’ai été conquis, donc je garde dans ma boîte à outils.
Avec genial.ly, vous disposez d’un outil pour créer des diaporamas ou des posters interactifs. L’outil est en anglais, mais sa prise en main n’a pas été trop difficile (je vous prépare quand même un tuto en français…). de plus le système a l’air « costaud » : j’y ai travaillé quelques heures en ligne, le serveur répond bien, c’est rapide, ça ne plante pas. Et… c’est gratuit (pourvu que ça dure !). Comme une démo vaut mieux qu’un long discours, je vous propose un des supports de formation que je viens de préparer pour une formation de 3 jours « Outils numériques pour la classe inversée« .
La démo : Le tuto. Images Actives - Le logiciel pour explorer l'image. Genial.ly, c’est génial ! | TICE et formation. Aspen UX - Intro. Iframe, pour un contenu dynamique ou isolé de la page. Cette balise faisait déjà partie de la spécification HTML 4 mais est développée dans la version 5 alors que les frames, et donc la balise frameset, sont devenus obsolètes. Iframe signifie "inline frame", en français cadre en ligne, il s'insère dans le flot du contenu de la page.
On utilisait déjà l'iframe pour créer du contenu dynamique avant l'apparition d'Ajax: en assignant un contenu avec JavaScript, on pouvait modifier la page très facilement après son chargement. Mais Ajax permet une interaction plus complète avec le serveur. L'iframe a cependant d'autres utilisations. Indépendamment des moteurs de recherche les iframes permettent d'insérer du contenu plus facilement qu'avec Ajax qui requiert des fonctions XMLHttpRequest. Ajax reste indispensable pour charger une page HTML créée sur le serveur, en fonction de paramètres fournis par l'utilisateur. Utilisation d'iframe On définit une iframe en assignant l'URL d'une page contenant le contenu à inclure à l'attribut src. Code source: srcdoc. Create your own microsite with Genially. It’s never been so easy! - Do it geniallyDo it genially.
Hi Geniallymaniacs! Today we’re going to show you how to create an awesome microsite. It’s extremely easy and simple. Before we start, we need to define what a microsite is and what it is for. Microsite refers to the design of a website formed by one individual page or several pages that function as a supplement to the primary website. We can also consider a microsite as a presentation that, instead of being unidirectional, has an initial menu from where you can start using the document and visiting the different sections. Said that, let’s get down to work. 1. 2. 3. First thing we need to take into account is the dimensions of the canvas. The next step is to upload our pictures and edit them in Genially using the Crop tool. Once our picture is cropped, we can start to manually adjust the dimensions in pixels using the upper tool bar.
Done all the needed adjustments, we can now put all the pictures in place. And this is what our main page looks like: Was I useful?