Web 2.0
Multimédia
Internet
Programmation...



Raphael Lecerf

Développeur Multimédia à l'Université de LIlle

Les différents types exercices H5P (Drupal, Moodle & Wordpress)

04 janvier 2018 OUTILS TICE, LABO & TESTS, OUTIL, LEARNING, RICHMEDIA


J' avais posté il y a quelques temps un article concernant ce plugin  "Créer son blog LMS Elearning avec H5P (Drupal, Wordpress)"

Aujourd'hui je vais citer en détail les différentes activités de E-Learning que vous donne cet outil.

démo de création de la vidéo interactive

Lire la suite de Les différents types exercices H5P (Drupal, Moodle & Wordpress)


Créer une carte interactive avec l'API Google Map & JAVASCRIPT

20 décembre 2017 HTML5, LABO & TESTS


Créer une carte interactif  avec l'API Google Map & JAVASCRIPT

Dans le but d'une demande de réalisation du carte interactive à partir de l'API Google Map, voici ce que j'ai pu réaliser, ainsi que le code explicatif avec les commentaires en couleur verte ci dessous. voir la demo

Les avantages : personnalisation du marker - utilisation du HTML dans les fenêtres de contenu

 

CSS UTLISES POUR CETTE CARTE

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

LIBRAIRIE JAVASCRIPT

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ACCES A L'API GOOGLE

https://maps.googleapis.com/maps/api/js?key=[kEY api]&sensor=false&callback=initialize

CODE HTML

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
    </div> 

CODE JAVASCRIPT

  <script type="text/javascript">jQuery(function($) {
    //Charger de manière asynchrone l'API de la carte
    var script = document.createElement('script');
    script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCtj9bdFee1h3-H2oF_TO5Mvj3PvRFCsCE&sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
        mapTypeId: 'roadmap'
            
        };
                        
    // Affichage de la carte sur la Page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);
        
    // Les différents marqueurs mis grace à ce code
    var markers = [
        ['Trekking Croatie', 43.6676441,15.2751289],
        ['Trekking Chili-Bolivie', 16.455234,-64.7130761],
        ['Trekking au Viêtnam', 14.5157953,107.8445048],
      
    ];
                        
    // La liste des fenêtres avec leur contenu variable en HTML
    var infoWindowContent = [
        ['<div class="info_content" style="box-shadow: 8px 8px 12px #aaa;">' +
        '<h3><i class="fa fa-video-camera" aria-hidden="true"></i> Croatie - Iles en Dalmatie</h3>' +
        '<p><div class="embed-container"><iframe src="https://player.vimeo.com/video/180701394" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3><i class="fa fa-video-camera" aria-hidden="true"></i> Trekking Chili-Bolivie</h3>' +
        '<p><div class="embed-container"><iframe src="https://player.vimeo.com/video/170788369" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>' + '</div>'],    
         ['<div class="info_content">' +
        '<h3><i class="fa fa-video-camera" aria-hidden="true"></i> Trekking au Viêtnam</h3>' +
        '<p><div class="embed-container"><iframe src="https://player.vimeo.com/video/165291153" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div></p>' + '</div>'],    
    
        
    ];
        
    // Afficher plusieurs marqueurs sur une carte
    var infoWindow = new google.maps.InfoWindow(), marker, i;
    
    
    //Faites une boucle à travers notre tableau de marqueurs et placez chacun sur la carte
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            // debut rajout Raphael pour afficher Icon personnalisé
            icon : "http://lecerf.raphael.free.fr/data/images/trekking.png",
            // fin rajout Raphael
            position: position,
            map: map,
            title: markers[i][0]
        });
        
        // Autoriser chaque marqueur à avoir une fenêtre d'information   
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Centrer automatiquement la carte en ajustant tous les marqueurs sur l'écran
        map.fitBounds(bounds);
    }

    // Remplacez notre niveau de zoom de la carte une fois que notre fonction fitBounds fonctionne (Assurez-vous qu'elle ne s'exécute qu'une seule fois)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(2);
        google.maps.event.removeListener(boundsListener);
    });
    
}</script>

 

 

EXEMPLE D'INTEGRATION DE LA CARTE INTERACTIVE


Synhroniser vos disporamas Powerpoint et le son avec l'outil VCASMO

09 décembre 2016 OUTILS TICE, HTML5, VIDEO, LABO & TESTS, LEARNING, RICHMEDIA


Synhroniser vos diapos et le son avec l'outil VCASMO

Vcasmo est une plateforme Web qui vous permet de rapidement synchroniser une présentation PowerPoint à une vidéo ou à une bande son (fichier MP3).

 

capture vcasmo

Lire la suite de Synhroniser vos disporamas Powerpoint et le son avec l'outil VCASMO


Des logiciels gratuits de capture d’écran en vidéo

09 novembre 2016 OUTILS TICE, VIDEO, LABO & TESTS, OUTIL


Des logiciels gratuits pour vos captures d'écran en vidéo.

Ils nous arrivent souvent d'avoir besoin d'un logiciel de capture de vidéo de votre écran, très pratique à la création de tutoriaux d'utilisation de logiciel ou de site web.

 

logiciel de capture d 'écran

 

 

 

 

 

 

Ces logiciels vous permettons d’enregistrer en vidéo tout ce qui se passe sur l’écran d’un PC, afin de produire par exemple des vidéos de formation ou de support.

Lire la suite de Des logiciels gratuits de capture d’écran en vidéo


Afficher / Cacher une DIV au clic en CSS

20 septembre 2016 LABO & TESTS


Il est parfois utile de cacher un élément complémentaire dans une page et non utile à la première lecture pour le visiteurs (compléments d'information, illustration...)

Lire la suite de Afficher / Cacher une DIV au clic en CSS


Recherche

Statistiques

  • 31 articles
  • aucun commentaire
  • PluXml 5.3.1