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)


Meilleurs Vœux pour 2018


21 décembre 2017 OUTILS TICE


A l'Aube de cette Année Nouvelle, je vous souhaite à tous mes Meilleurs Vœux pour 2018. Que cette année vous apporte la Joie, la santé, le travail et qu'elle soit remplie de Bonheur.

Meilleurs Vœux 2018

 


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 Powerpoint © avec une Vidéo grace à l'outil SPEECHI


09 décembre 2016 OUTILS TICE, HTML5, VIDEO, OUTIL, LEARNING, RICHMEDIA


Speechi vous permet de créer des modules de formation en ligne ou des présentations animées en Flash ou en HTML5.

Speechi

Vous pouvez enrichir vos présentations, vous enregistrer, publier votre module sur le Web en un clic et le tout sans aucune connaissance technique: tout se passe dans PowerPoint, uniquement une version issue du pack de Microsoft Office, dans Impress cela ne fonctionne pas.

Lire la suite de Synhroniser vos Powerpoint © avec une Vidéo grace à l'outil SPEECHI


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


Recherche

Statistiques

  • 31 articles
  • aucun commentaire
  • PluXml 5.3.1