Web 2.0
Multimédia
Internet
Programmation...



Raphael Lecerf

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

jQuery Zoomer Plugin - "Ajouter un effet Zoom à vos photos"

04 juin 2018 HTML5, LABO & TESTS


Query Zoomer Plugin - "Ajouter un effet Zoom à vos photos"

Vous avez envi de diffuser des cartes ou des oeuvres artistiques et vous souhaitez que l'utilisateur puisse zoomer facilement sur vos illustration, voici un petit plugin en Javascript qui fera l'affaire.

Lire la suite de jQuery Zoomer Plugin - "Ajouter un effet Zoom à vos photos"


Ajouter une lecture automatique des paragraphes ou de balises spécifiques avec Text-To-Speech en JQuery

29 mai 2018 LABO & TESTS, OUTIL, LEARNING


 Ajouter une lecture automatique des paragraphes ou de balises spécifiques avec Text-To-Speech en JQuery

 

Envie de rajouter de l'interactivité à votre site ou à votre module de langue en permettant la lecture automatique des div ou des balises ALT d'images, grace à l'utilisation de librairies Javascript et JQuery - Voir la démo en fonctionnement

La librairie est basée sur le système Google Text To Speech

Text to Speech

Voici le code en détail :

 //Les librairies

<script class="jsbin" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src='responsivevoice.js'></script>

 <script>
        // script pour faire fonctionner responsivevoice
    var filterblur = document.getElementById("filterblur");
    var maxradius = 40;
    var rdelta = 12;
    var radius = maxradius/2;
    function update() {
        requestAnimationFrame(update);
        if (typeof responsiveVoice !== 'undefined' && responsiveVoice.isPlaying()) {
            radius += (Math.random() * rdelta) - rdelta/2;
            if (radius>maxradius) radius = maxradius/2;
            if (radius<0) radius = maxradius/2;
            if (document.getElementById("filterblur")) document.getElementById("filterblur").setAttribute("stdDeviation",radius);
        } else {
            if (document.getElementById("filterblur")) document.getElementById("filterblur").setAttribute("stdDeviation",0);
        }
    }
    update();
    </script>
    <script>
        // script pour la sélection de texte
function getSelected() {
    if(window.getSelection){
        return window.getSelection();
 
    } else if(document.getSelection){
        return document.getSelection();
 
    } else {
        var selection = document.selection && document.selection.createRange();
 
        if(selection.text) {
            return selection.text;
        }
        return false;
    }
 
    return false;
}
    </script>

<script>
/// on récupére le contenu de la selection et choix de langue
function lire() {
    var test = getSelected();
      if(test != false){
     responsiveVoice.speak( "" + test + "" ,"French Female");
        
      }
        
        }
/// fonction pour lancer la lecture du paragraphe complet cad la DIV
function lireparagraphe() {
         responsiveVoice.speak( $('#paragraphe').text()  ,"French Female");

        }    
    
    </script>

<script>
 ///requete pour récupérer les balises ALT
$(function() {
  $('a').click(function() {
       responsiveVoice.speak( $('img', this).attr('alt')  ,"French Female");
       return false;
  });
});
</script>

 

 


ASTUCE [dictation.io] - comment transcrire vos vidéos en quelques clics

18 mai 2018 VIDEO, LABO & TESTS, OUTIL


Il est parfois nécessaire de tanscrire des vidéos à des fins de création de sous-titrage ou autres utilisations. La transcription d'une vidéo peut prendre un certain temps grâce à cette astuce vous pourrez gagner en productivité.

Il existe le site https://dictation.io/ qui fait bien les choses, néammoins il subsiste quelques erreurs de transcription dans le cas d'une vidéo avec une bande sonore de moindre qualité.

 

Dictation Machine

Lire la suite de ASTUCE [dictation.io] - comment transcrire vos vidéos en quelques clics


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


Recherche

Statistiques

  • 34 articles
  • aucun commentaire
  • PluXml 5.3.1