Recherche avancée

Sur d’autres sites (6817)

• Use deck.js as a remote presentation tool

  8 janvier 2014, par silvia

  deck.js is one of the new HTML5-based presentation tools. It’s simple to use, in particular for your basic, every-day presentation needs. You can also create more complex slides with animations etc. if you know your HTML and CSS.

  Yesterday at linux.conf.au (LCA), I gave a presentation using deck.js. But I didn’t give it from the lectern in the room in Perth where LCA is being held – instead I gave it from the comfort of my home office at the other end of the country.

  I used my laptop with in-built webcam and my Chrome browser to give this presentation. Beforehand, I had uploaded the presentation to a Web server and shared the link with the organiser of my speaker track, who was on site in Perth and had set up his laptop in the same fashion as myself. His screen was projecting the Chrome tab in which my slides were loaded and he had hooked up the audio output of his laptop to the room speaker system. His camera was pointed at the audience so I could see their reaction.

  I loaded a slide master URL :
  http://html5videoguide.net/presentations/lca_2014_webrtc/?master
  and the room loaded the URL without query string :
  http://html5videoguide.net/presentations/lca_2014_webrtc/.

  Then I gave my talk exactly as I would if I was in the same room. Yes, it felt exactly as though I was there, including nervousness and audience feedback.

  How did we do that ? WebRTC (Web Real-time Communication) to the rescue, of course !

  We used one of the modules of the rtc.io project called rtc-glue to add the video conferencing functionality and the slide navigation to deck.js. It was actually really really simple !

  Here are the few things we added to deck.js to make it work :

  • Code added to index.html to make the video connection work :

    <meta name="rtc-signalhost" content="http://rtc.io/switchboard/">
    
    <meta name="rtc-room" content="lca2014">
    
    ...
    
    <video id="localV" rtc-capture="camera" muted></video>
    
    <video id="peerV" rtc-peer rtc-stream="localV"></video>
    
    ...
    
    <script src="glue.js"></script>
    
    <script>
    
    glue.config.iceServers = [{ url: 'stun:stun.l.google.com:19302' }];
    
    </script>

    The iceServers config is required to punch through firewalls – you may also need a TURN server. Note that you need a signalling server – in our case we used http://rtc.io/switchboard/, which runs the code from rtc-switchboard.

  • Added glue.js library to deck.js :

    Downloaded from https://raw.github.com/rtc-io/rtc-glue/master/dist/glue.js into the source directory of deck.js.

  • Code added to index.html to synchronize slide navigation :

    glue.events.once('connected', function(signaller) {
    
      if (location.search.slice(1) !== '') {
    
        $(document).bind('deck.change', function(evt, from, to) {
    
          signaller.send('/slide', {
    
            idx: to,
    
            sender: signaller.id
    
          });
    
        });
    
      }
    
      signaller.on('slide', function(data) {
    
        console.log('received notification to change to slide: ', data.idx);
    
        $.deck('go', data.idx);
    
      });
    
    });

    This simply registers a callback on the slide master end to send a slide position message to the room end, and a callback on the room end that initiates the slide navigation.

  And that’s it !

  You can find my slide deck on GitHub.

  Feel free to write your own slides in this manner – I would love to have more users of this approach. It should also be fairly simple to extend this to share pointer positions, so you can actually use the mouse pointer to point to things on your slides remotely. Would love to hear your experiences !

  Note that the slides are actually a talk about the rtc.io project, so if you want to find out more about these modules and what other things you can do, read the slide deck or watch the talk when it has been published by LCA.

  Many thanks to Damon Oehlman for his help in getting this working.

  BTW : somebody should really fix that print style sheet for deck.js – I’m only ever getting the one slide that is currently showing.

• Use deck.js as a remote presentation tool

  8 janvier 2014, par silvia

  deck.js is one of the new HTML5-based presentation tools. It’s simple to use, in particular for your basic, every-day presentation needs. You can also create more complex slides with animations etc. if you know your HTML and CSS.

  Yesterday at linux.conf.au (LCA), I gave a presentation using deck.js. But I didn’t give it from the lectern in the room in Perth where LCA is being held – instead I gave it from the comfort of my home office at the other end of the country.

  I used my laptop with in-built webcam and my Chrome browser to give this presentation. Beforehand, I had uploaded the presentation to a Web server and shared the link with the organiser of my speaker track, who was on site in Perth and had set up his laptop in the same fashion as myself. His screen was projecting the Chrome tab in which my slides were loaded and he had hooked up the audio output of his laptop to the room speaker system. His camera was pointed at the audience so I could see their reaction.

  I loaded a slide master URL :
  http://html5videoguide.net/presentations/lca_2014_webrtc/?master
  and the room loaded the URL without query string :
  http://html5videoguide.net/presentations/lca_2014_webrtc/.

  Then I gave my talk exactly as I would if I was in the same room. Yes, it felt exactly as though I was there, including nervousness and audience feedback.

  How did we do that ? WebRTC (Web Real-time Communication) to the rescue, of course !

  We used one of the modules of the rtc.io project called rtc-glue to add the video conferencing functionality and the slide navigation to deck.js. It was actually really really simple !

  Here are the few things we added to deck.js to make it work :

  • Code added to index.html to make the video connection work :

    <meta name="rtc-signalhost" content="http://rtc.io/switchboard/">
    
    <meta name="rtc-room" content="lca2014">
    
    ...
    
    <video id="localV" rtc-capture="camera" muted></video>
    
    <video id="peerV" rtc-peer rtc-stream="localV"></video>
    
    ...
    
    <script src="glue.js"></script>
    
    <script>
    
    glue.config.iceServers = [{ url: 'stun:stun.l.google.com:19302' }];
    
    </script>

    The iceServers config is required to punch through firewalls – you may also need a TURN server. Note that you need a signalling server – in our case we used http://rtc.io/switchboard/, which runs the code from rtc-switchboard.

  • Added glue.js library to deck.js :

    Downloaded from https://raw.github.com/rtc-io/rtc-glue/master/dist/glue.js into the source directory of deck.js.

  • Code added to index.html to synchronize slide navigation :

    glue.events.once('connected', function(signaller) {
    
      if (location.search.slice(1) !== '') {
    
        $(document).bind('deck.change', function(evt, from, to) {
    
          signaller.send('/slide', {
    
            idx: to,
    
            sender: signaller.id
    
          });
    
        });
    
      }
    
      signaller.on('slide', function(data) {
    
        console.log('received notification to change to slide: ', data.idx);
    
        $.deck('go', data.idx);
    
      });
    
    });

    This simply registers a callback on the slide master end to send a slide position message to the room end, and a callback on the room end that initiates the slide navigation.

  And that’s it !

  You can find my slide deck on GitHub.

  Feel free to write your own slides in this manner – I would love to have more users of this approach. It should also be fairly simple to extend this to share pointer positions, so you can actually use the mouse pointer to point to things on your slides remotely. Would love to hear your experiences !

  Note that the slides are actually a talk about the rtc.io project, so if you want to find out more about these modules and what other things you can do, read the slide deck or watch the talk when it has been published by LCA.

  Many thanks to Damon Oehlman for his help in getting this working.

  BTW : somebody should really fix that print style sheet for deck.js – I’m only ever getting the one slide that is currently showing.

• Evolution #3720 (Nouveau) : Refaire un éditeur à base de CodeMirror + ajouts

  27 février 2016, par RastaPopoulos ♥

  Cahier des charges :
  - Dans l’éditeur lui-même, avoir une vue plus sémantique de ce que l’on tape (WYSIWY Mean !)
  - Pouvoir mettre en plein écran
  - Pouvoir prévisualiser le vrai rendu HTML final (avec les images, modèles, etc)
  - Pouvoir éditer côte à côte avec la prévisu
  - Être pérenne et que le noyau puisse reconnaitre plusieurs syntaxes

  Des gens ont fait ça pour Markdown mais malheureusement QUE pour Markdown. Mais en fait quasiment tout ce qui est important est géré en sous-main par CodeMirror !
  https://simplemde.com/

  Leur éditeur est en fait relativement simple :
  => c’est CodeMirror à 80%
  + ils ajoutent une CSS qui ne change pas juste la couleur pour la syntaxe, mais aussi la taille, pour les titres, gras, italique, etc
  + ils ajoutent une barre de boutons
  + ils ajoutent un système de prévisu (seul ou côte à côte)

  CodeMirror est entre l’autre l’éditeur de code de Chrome et Firefox, et de milles autres choses. Il est à priori (très) pérenne, modulaire, et sait gérer plusieurs syntaxes en les déclarant dans un module JS (un "mode"). En plus de la reconnaissance de syntaxe, il gère déjà plein de plugins comme raccourcis claviers, continuer une liste quand on fait Entrée, etc.

  Pour SPIP je propose cela :
  - faire un mode CodeMirror qui gère uniquement les modèles SPIP, et peut-être les liens (ce qui permettrait de l’utiliser avec d’autres syntaxes que SPIP, notamment dans Markdown)
  - faire un mode CodeMirror pour tous les trucs SPIP autre que modèles
  - faire une CSS qui rend plus sémantique la saisie SPIP (agrandir les intertitres, etc)
  - récupérer la CSS pour la saisie Markdown de SimpleMDE
  - trouver une barre de boutons se basant déjà sur CodeMirror : les boutons ne feraient qu’appeler des comportements CodeMirror
  - re-implémenter notre système de prévisu + de fullscreen et côte à côte dans cette nouvelle barre (= comme SimpleMDE !), sachant que nous la prévisu ça appelle un truc serveur, alors que SimpleMDE il semble que c’est tout en JS client.

  Je pense que le plus gros est de faire les deux modes de syntaxes SPIP pour CodeMirror. Mais une personne a fait un projet très cool qui apparemment fonctionne déjà : une déclaration de grammaire en JSON, beaucoup mieux que la programmation JS des modes de CodeMirror :
  https://github.com/foo123/codemirror-grammar
  Et ça marche !

  Pour le reste, on doit pouvoir s’inspirer de SimpleMDE mais en généralisant :
  1) Ce serait bien d’avoir une barre de bouton pour SPIP et pour Markdown en même temps (en fait avoir deux déclarations, suivant le mode voulu)
  2) Avoir notre prévisu-serveur.

  Comme on le remarque, je propose deux choses qui permettent de garder Markdown sous la main :
  1) séparer la déclaration des modèles (et peut-être des liens)
  2) avoir deux déclarations de boutons

  Cela permettra d’office, avec le même éditeur, la même base commune, de savoir gérer à la fois SPIP et Markdown. Cela me semble important à prendre en compte dès le début.