French - Le web au doigt et à l'oeil avec CasperJS - Nicolas Perriault

Return to Video

Le web au doigt et à l'oeil avec CasperJS - Nicolas Perriault

0:07 - 0:10

Bonjour
0:10 - 0:12

wouh, salut tout le monde, je vais vous parler de Casper "djaïïïesse"
0:12 - 0:18

CasperJS pour les francophones, qui est donc un petit toolkit de …
0:18 - 0:24

alors qui permet de gérer le web au doigt et à l'oeil, voilà merci pour le spoil tout à l'heure
0:24 - 0:31

Voilà qui est basé sur PhantomJS, qui est une brique open-source qui est un navigateur
0:31 - 0:37

donc un navigateur web, en mode headless
c'est à dire qui se pilote sans interface graphique
0:37 - 0:43

en ligne de commande par exemple,
pour être automatisé sur des systèmes, sur des serveurs qui n'ont pas d'écran, etc.
0:43 - 0:46

C'est basé sur WebKit donc désolé,
c'est un peu toujours la monoculture
0:46 - 0:51

mais on en discutera plus tard, dehors si vous voulez
0:51 - 0:55

qui est pilotable donc en ligne de commande, donc très pratique pour scripter et automatiser les choses
0:55 - 1:01

et qui dispose d'une API full javascript.
1:01 - 1:05

Javascript on en entend beaucoup parler, un petit peu à tort et à travers, en tout cas à toutes les sauces
1:05 - 1:11

on a des gens qui font des trucs hallucinants en Javascript, parfois à tort, parfois à juste titre.
1:11 - 1:18

En tout cas Phantom est un logiciel qui exploite
uniquement une API Javascript
1:18 - 1:24

Donc voici un script Phantom, alors ouais j'suis pas sur qu'on voit grand chose, j'suis un petit peu navré.
1:24 - 1:28

Voilà donc en gros cette API Javascript permet
par exemple de créer un objet,
1:28 - 1:30

une instance d'objet qui est une page web
1:30 - 1:34

d'ouvrir donc une URL, par exemple google.fr
1:34 - 1:40

et une fois qu'on a reçu la réponse du serveur
de Google avec le code HTML
1:40 - 1:41

on peut faire une certain nombre de choses
1:41 - 1:45

par exemple checker que tout s'est bien passé
et qu'il n'y a pas eu d'erreur
1:45 - 1:48

Et ensuite faire des assertions, etc.
1:48 - 1:54

On lance le script et on obtient le résultat du script qui était d'afficher le contenu texte de la balise </div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="113993"> 1:54 - 1:56 </div> </div> <div class="subtitlesList-subtitle">On peut faire des choses extrêmement complexes,</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="115743"> 1:56 - 1:59 </div> </div> <div class="subtitlesList-subtitle">donc là comme on voit rien, j'vais juste vous dire <br>ce que ça fait très rapidement</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="118743"> 1:59 - 2:07 </div> </div> <div class="subtitlesList-subtitle">ça va sur le site de sudweb.fr et ça récupère le programme dans un tableau d'objets JSON, tout simplement.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="127111"> 2:07 - 2:11 </div> </div> <div class="subtitlesList-subtitle">Donc vous voyez on pilote vraiment un navigateur web <br>en ligne de commande</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="131428"> 2:11 - 2:15 </div> </div> <div class="subtitlesList-subtitle">et en utilisant des scripts Javascript tous bêtes</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="134993"> 2:15 - 2:17 </div> </div> <div class="subtitlesList-subtitle">donc si vous faîtes du jQuery des choses comme ça</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="136510"> 2:17 - 2:21 </div> </div> <div class="subtitlesList-subtitle">vous savez à priori coder en Javascript et faire ça.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="140677"> 2:21 - 2:23 </div> </div> <div class="subtitlesList-subtitle">Mais on a un petit problème avec PhantomJS quand même</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="143228"> 2:23 - 2:26 </div> </div> <div class="subtitlesList-subtitle">parce que c'est une super lib' mais comment on clique, comment on interagit avec la page ?</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="146077"> 2:26 - 2:30 </div> </div> <div class="subtitlesList-subtitle">comment on enchaîne les interactions, simplement, facilement ?</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="149760"> 2:30 - 2:31 </div> </div> <div class="subtitlesList-subtitle">et surtout comment on vérifie des trucs ?</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="151428"> 2:31 - 2:34 </div> </div> <div class="subtitlesList-subtitle">et éventuellement d'où vient le vent<br>mais ça je n'y répondrai pas.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="154410"> 2:34 - 2:37 </div> </div> <div class="subtitlesList-subtitle">Un petit détour en Egypte avec … <br>les Pyramides de l'Enfer</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="157260"> 2:37 - 2:42 </div> </div> <div class="subtitlesList-subtitle">Qu'est-ce que c'est que les pyramides de l'enfer ? <br>C'est la gestion de l'asynchronicité en Javascript</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="161611"> 2:42 - 2:44 </div> </div> <div class="subtitlesList-subtitle">je sais pas si vous avez ... <br>alors ça s'adresse surtout aux codeurs</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="164327"> 2:44 - 2:48 </div> </div> <div class="subtitlesList-subtitle">mais vous avez tous rencontré ça théoriquement <br>à un moment ou à un autre</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="167578"> 2:48 - 2:52 </div> </div> <div class="subtitlesList-subtitle">on a des fonctions qui passent en argument des callbacks, et tout ça s'enchaîne</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="172228"> 2:52 - 2:57 </div> </div> <div class="subtitlesList-subtitle">il faut attendre le résultat de l'appel précédent<br>pour décider de ce qu'on fait ensuite.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="177460"> 2:57 - 3:00 </div> </div> <div class="subtitlesList-subtitle">Donc ça, ça fait des choses qui partent vers la droite</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="179561"> 3:00 - 3:03 </div> </div> <div class="subtitlesList-subtitle">et tout ce qui part vers la droite n'est pas maintenable (rires)</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="182676"> 3:03 - 3:11 </div> </div> <div class="subtitlesList-subtitle">Alors … c'est là qu'arrive CasperJS (applaudissements) <br></div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="191394"> 3:11 - 3:17 </div> </div> <div class="subtitlesList-subtitle">CasperJS va essayer de répondre à un certain nombre de problématiques qui sont posés par Phantom</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="197377"> 3:17 - 3:20 </div> </div> <div class="subtitlesList-subtitle">en terme d'ergonomie, d'utilisabilité du code, etc.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="200077"> 3:20 - 3:26 </div> </div> <div class="subtitlesList-subtitle">et donc c'est évidemment basé sur PhantomJS<br>et propose une API haut niveau, par dessus,</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="205627"> 3:26 - 3:29 </div> </div> <div class="subtitlesList-subtitle">qui va simplifier cette fameuse gestion de l'asynchronicité</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="209144"> 3:29 - 3:35 </div> </div> <div class="subtitlesList-subtitle">des méthodes pour interagir avec la page, <br>créer des scénarios de navigation</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="214560"> 3:35 - 3:41 </div> </div> <div class="subtitlesList-subtitle">et effectivement tester des sites web, <br>parce que c'est peu ça aussi un des objectifs</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="221161"> 3:41 - 3:44 </div> </div> <div class="subtitlesList-subtitle">Donc au niveau de l'asynchronicité, <br>voilà on a tout ferré à gauche : ça marche</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="224293"> 3:44 - 3:48 </div> </div> <div class="subtitlesList-subtitle">Et voilà on a un petit event Listener</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="227877"> 3:48 - 3:53 </div> </div> <div class="subtitlesList-subtitle">c'est l'équivalent du script PhantomJS <br>que je vous ai affiché tout à l'heure</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="232894"> 3:53 - 3:56 </div> </div> <div class="subtitlesList-subtitle">ça fait exactement la même chose, <br>c'est-à-dire qu'on ne se prend plus la tête</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="235743"> 3:56 - 3:59 </div> </div> <div class="subtitlesList-subtitle">avec des callbacks, des callbacks, des callbacks<br>on les enchaîne très simplement</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="238979"> 3:59 - 4:02 </div> </div> <div class="subtitlesList-subtitle">avec une API qui semble d'utilisation naturelle.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="241876"> 4:02 - 4:05 </div> </div> <div class="subtitlesList-subtitle">Au niveau des clics c'est pareil, on a une méthode <br>qu'on ne voit pas à l'écran</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="245159"> 4:05 - 4:10 </div> </div> <div class="subtitlesList-subtitle">mais qui s'appelle Click et qui permet de prendre en argument un sélecteur CSS</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="249993"> 4:10 - 4:14 </div> </div> <div class="subtitlesList-subtitle">et depuis deux semaines un sélecteur XPath éventuellement</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="253759"> 4:14 - 4:17 </div> </div> <div class="subtitlesList-subtitle">pour dire je veux cliquer sur tel bouton</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="256759"> 4:17 - 4:21 </div> </div> <div class="subtitlesList-subtitle">on lance le script <br>et on obtient les mêmes résultats qu'avec PhantomJS</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="260910"> 4:21 - 4:23 </div> </div> <div class="subtitlesList-subtitle">Au niveau des tests, de la même manière</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="262945"> 4:23 - 4:28 </div> </div> <div class="subtitlesList-subtitle">on peut tout à fait partir sur l'utilisation de cette API pour générer des tests<br></div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="267810"> 4:28 - 4:31 </div> </div> <div class="subtitlesList-subtitle">qui en plus ont l'amabilité d'être colorisés</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="270811"> 4:31 - 4:36 </div> </div> <div class="subtitlesList-subtitle">et exportables sous par exemple Jenkins <br>avec des résultats au format XUnit</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="276427"> 4:36 - 4:38 </div> </div> <div class="subtitlesList-subtitle">Le site est parfaitement documenté</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="277861"> 4:38 - 4:41 </div> </div> <div class="subtitlesList-subtitle">je dis parfaitement<br>parce que j'en ai assez chié pour dire parfaitement</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="281311"> 4:41 - 4:46 </div> </div> <div class="subtitlesList-subtitle">Les limitations, c'est WebKit only<br>donc ça ne remplace pas Selenium</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="285843"> 4:46 - 4:50 </div> </div> <div class="subtitlesList-subtitle">ça n'a pas d'interface graphique<br>donc c'est très difficile de se projeter</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="289660"> 4:50 - 4:54 </div> </div> <div class="subtitlesList-subtitle">il faut s'abstraire <br>et utiliser beaucoup en fait la console de Firebug</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="293577"> 4:54 - 4:57 </div> </div> <div class="subtitlesList-subtitle">ou un bookmarklet depuis avant-hier. <br></div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="296627"> 4:57 - 5:03 </div> </div> <div class="subtitlesList-subtitle">Et les gros intérêts <br>dans les petites features intéressantes qu'apporte Casper</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="302528"> 5:03 - 5:06 </div> </div> <div class="subtitlesList-subtitle">ça vaut réapprend Javascript <br>ou ça vous apprend Javascript si vous connaissez pas</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="305593"> 5:06 - 5:07 </div> </div> <div class="subtitlesList-subtitle">ça vous réapprend le DOM</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="306812"> 5:07 - 5:09 </div> </div> <div class="subtitlesList-subtitle">c'est bien parce qu'on a beaucoup de couches d'abstractions par dessus le DOM</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="308861"> 5:09 - 5:11 </div> </div> <div class="subtitlesList-subtitle">mais remettre un peu les pieds dedans des fois <br>c'est aussi sympa</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="311444"> 5:11 - 5:15 </div> </div> <div class="subtitlesList-subtitle">ça vous réapprend le web parce qu'on est vraiment <br>au plus bas niveau de ce qui se passe dans un navigateur</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="315477"> 5:15 - 5:18 </div> </div> <div class="subtitlesList-subtitle">et des échanges qu'on peut avoir en AJAX <br>avec les serveurs, etc.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="317959"> 5:18 - 5:20 </div> </div> <div class="subtitlesList-subtitle">et souvent à mieux connaître votre propre site.</div> </li> <li> <div class="subtitlesList-time"> <div class="subtitlesList-seek no-underline" data-start-time="320229"> 5:20 - 5:23 </div> </div> <div class="subtitlesList-subtitle">Voilà je vous remercie. (0;00)</div> </li> </ul> </div> <div id="subtitles_info" class="tab-pane"> <dl> <dt class="inline">Title:</dt> <dd class="inline"> <bdi>Le web au doigt et à l'oeil avec CasperJS - Nicolas Perriault</bdi> </dd> <dt class="inline">Description:</dt> <dd class="clamp inline"> <div class="clamp-lines clamp-xs-5" > <bdi><p>CasperJS est un outil permettant de scripter en Javascript un scénario de navigation sur un véritable navigateur Web, basé sur Webkit et ne nécessitant pas d’interface graphique. CasperJS peut servir à produire des tests fonctionnels poussés bénéficiant d’un environnement DOM et Javascript complet, mais aussi à analyser des documents Web, faire des tests de performance ou même extraire des données.</p> <p>L’intérêt majeur de CasperJS est qu’il permet relativement simplement de tester et valider fonctionnellement des sites et applications Web complexes, reposant sur l’exploitation intensives de Javascript, de comportements asynchrones et d’AJAX par exemple.</p> <p>Voir aussi cet extrait pour des explications de code par son auteur : https://vimeo.com/42881484</p> <p>http://casperjs.org</p></bdi> </div> <a class="clamp-expand">more »</a> <a class="clamp-collapse">« less</a> </dd> <dt class="inline">Video Language:</dt> <dd class="inline">French</dd> </dl> </div> <div id="subtitles_activity" class="tab-pane"> <table class="table lined align-middle"> <tbody> <tr> <td><span data-toggle="tooltip" data-placement="top" title="Retired user"><span class="avatar"><img src="https://www.gravatar.com/avatar/398aad0e0e78f0db97a937fa6cb5ebea?d=https%3A%2F%2Fs3.amazonaws.com%2Fs3.www.universalsubtitles.org%2Fgravatar%2Favatar-default-30.png&s=30"></span></span> </td> <td><strong>Retired user</strong> edited <a href="/videos/uEFERLpdMoLd/fr/359452/">French subtitles</a> for <a href="/videos/uEFERLpdMoLd/info/le-web-au-doigt-et-a-loeil-avec-casperjs-nicolas-perriault/">Le web au doigt et à l'oeil avec CasperJS - Nicolas Perriault</a></td> <td class="text-gray"> <span class="nowrap"><span class="datetime-display" data-datetime="2012-09-13T14:53:33-05:00"></span></span> </td> </tr> <tr> <td><span data-toggle="tooltip" data-placement="top" title="Retired user"><span class="avatar"><img src="https://www.gravatar.com/avatar/398aad0e0e78f0db97a937fa6cb5ebea?d=https%3A%2F%2Fs3.amazonaws.com%2Fs3.www.universalsubtitles.org%2Fgravatar%2Favatar-default-30.png&s=30"></span></span> </td> <td><strong>Retired user</strong> added a translation</td> <td class="text-gray"> <span class="nowrap"><span class="datetime-display" data-datetime="2012-09-13T14:53:33-05:00"></span></span> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="col-xs-12 col-sm-4"> <div class="content"> <section class="videoSubtitles-progress"> <header> <h1>French subtitles</h1> <div class="header-actions dropdown small"> <button data-target="download-button" class="dropdownMenu-button " role="button" aria-haspopup="true" aria-expanded="false">Download<span class="caret"></span></button> <ul class="dropdownMenu" id="download-button" role="menu"> <li role="none" class="dropdownMenu-item"><a class="dropdownMenu-link" href="/subtitles/uEFERLpdMoLd/fr/1/download/Le%20web%20au%20doigt%20et%20%C3%A0%20loeil%20avec%20CasperJS%20-%20Nicolas%20Perriault.fr.dfxp" role="menuitem" tabindex="-1"><span class="dropdownMenu-text">DFXP</span></a></li> <li role="none" class="dropdownMenu-item"><a class="dropdownMenu-link" href="/subtitles/uEFERLpdMoLd/fr/1/download/Le%20web%20au%20doigt%20et%20%C3%A0%20loeil%20avec%20CasperJS%20-%20Nicolas%20Perriault.fr.sbv" role="menuitem" tabindex="-1"><span class="dropdownMenu-text">SBV</span></a></li> <li role="none" class="dropdownMenu-item"><a class="dropdownMenu-link" href="/subtitles/uEFERLpdMoLd/fr/1/download/Le%20web%20au%20doigt%20et%20%C3%A0%20loeil%20avec%20CasperJS%20-%20Nicolas%20Perriault.fr.srt" role="menuitem" tabindex="-1"><span class="dropdownMenu-text">SRT</span></a></li> <li role="none" class="dropdownMenu-item"><a class="dropdownMenu-link" href="/subtitles/uEFERLpdMoLd/fr/1/download/Le%20web%20au%20doigt%20et%20%C3%A0%20loeil%20avec%20CasperJS%20-%20Nicolas%20Perriault.fr.ssa" role="menuitem" tabindex="-1"><span class="dropdownMenu-text">SSA</span></a></li> <li role="none" class="dropdownMenu-item"><a class="dropdownMenu-link" href="/subtitles/uEFERLpdMoLd/fr/1/download/Le%20web%20au%20doigt%20et%20%C3%A0%20loeil%20avec%20CasperJS%20-%20Nicolas%20Perriault.fr.txt" role="menuitem" tabindex="-1"><span class="dropdownMenu-text">TXT</span></a></li> <li role="none" class="dropdownMenu-item"><a class="dropdownMenu-link" href="/subtitles/uEFERLpdMoLd/fr/1/download/Le%20web%20au%20doigt%20et%20%C3%A0%20loeil%20avec%20CasperJS%20-%20Nicolas%20Perriault.fr.vtt" role="menuitem" tabindex="-1"><span class="dropdownMenu-text">VTT</span></a></li> </ul> </div> </header> </section> <section> <h2 class="lined-header"> Revisions </h2> <ul class="videoSubtitles-revisions"> <li class=" current"> <div class="divide bold"> <span> <a href="/videos/uEFERLpdMoLd/fr/359452/299566/">Revision 1 </a> </span> <span></span> </div> <div class="divide"> <span>Retired user</span> <span><span class="datetime-display" data-datetime="2012-09-13T14:53:33-05:00"></span></span> </div> </li> </ul> </section> </div> </div> </div> </div> </section> </main> <div class="cookie-consent-cover"> </div> <div class="cookie-consent-container"> <div class="cookie-consent-text-container"> <span>Our website uses cookies for analysis purposes.</span> <span class="hidden-sm hidden-xs"> You can refuse this if you wish. <a href="https://pculture.org/privacy">Privacy Policy</a> </span> <span class="hidden-md hidden-lg">You can refuse this if you wish.</span> <span class="hidden-md hidden-lg"><a href="https://pculture.org/privacy">Privacy Policy</a></span> </div> <div class="cookie-consent-button-container"> <button id="accept-all-cookies" class="button cta cookie-consent-button">Accept cookies</button> <button id="manage-cookies" class="button cta-reverse cookie-consent-button">Manage cookies</button> </div> </div> <div class="accordion cookie-consent-details-container hidden"> <div class="padded-section"> <h2 class="bold">Our website uses cookies</h2> <p>We use third-party analytical softwares to gather statistical information about our website visitors.</p> </div> <div class="accordion-section padded-section"> <h4 class="accordion-title cookie-consent-details-accordion-title"> <span>Operating cookies</span> <span class="toggle">(Required)</span> </h4> <div class="accordion-content"> <p class="small cookie-consent-details-text"> These cookies are required for Amara to work properly and cannot be switched off. They include session informations and preference settings. Amara doesn’t share this data with any third-party providers. </p> </div> </div> <div class="accordion-section expanded padded-section"> <span class="accordion-title cookie-consent-details-accordion-title"> <span class="cookie-consent-details-toggle-title">Analytics cookies</span> <label class="cookie-consent-details-toggle-switch"> <input id='cookie-consent-details-input' type="checkbox" checked> <span class="slider round"></span> </label> </span> <div class="accordion-content"> <p class="small cookie-consent-details-text"> Amara is using GoogleAnalytics, Microsoft Clarity and Hubspot as analytic cookies. These cookies allow us to gather data about website visits, traffic sources and user journeys. We use this data to review and improve Amara for our users. You can block these cookies and then we will not be able to collect data during your visit. </p> </div> </div> <div class="cookie-consent-details-footer"> <button id="accept-manage-cookies" class="button cta cookie-consent-details-button">Save</button> <button id="cancel-manage-cookies" class="button cta-reverse cookie-consent-details-button">Cancel</button> </div> </div> <footer id="page-footer"> <section> <div class="container footer-group1"> <div class="row align-center"> <div class="col-xs-12 col-md-3"> <a href="/"><img id="footer-logo" src="https://static.amara.org/b29f17ea/img/LogoAndWordmark.svg" height="50" class="img-responsive" alt="Amara Logo"></a> <a href="https://pculture.org/" target="_blank" class="pcf-link"> <div class="pcf-logo-text"> <div class="pcf-logo"> <img src="https://static.amara.org/b29f17ea/img/PCFLogo.png" alt="Participatory Culture Foundation Logo"> </div> <div class="pcf-text"> <small>Amara is a project of the Participatory Culture Foundation</small> </div> </div> </a> <nav> <ul class="nav social"> <li><a href="https://www.instagram.com/amara_pcf" target="_blank"><span class="fab fa-lg fa-instagram"></span></a></li> <li><a href="https://facebook.com/Amara.PCF" target="_blank"><span class="fab fa-lg fa-facebook"></span></a></li> <li><a href="https://twitter.com/Amara_PCF" target="_blank"><span class="fab fa-lg fa-twitter"></span></a></li> <li><a href="https://www.linkedin.com/company/amara-subtitles/" target="_blank"><span class="fab fa-lg fa-linkedin"></span></a></li> <li><a href="https://www.youtube.com/user/amarasubs" target="_blank"><span class="fab fa-lg fa-youtube"></span></a></li> </ul> </nav> </div> <div class="col-xs-6 col-md-2 footer-link-group"> <nav> <ul class="nav"> <li><h3>Products</h3></li> <li><a href="/workspace/">Amara Free</a></li> <li><a href="/workspace/teams/" %}">Amara Teamspaces</a></li> <li><a href="/enterprise-signup/?plan=Amara+Enterprise/">Amara Enterprise</a></li> <li><a href="/subtitling-platform/">Pricing</a></li> </ul> </nav> </div> <div class="col-xs-5 col-md-3 footer-link-group"> <nav> <ul class="nav"> <li><h3>Amara Professional Services</h3></li> <li><a href="/purchase-subtitles/">Captioning & Subtitling</a></li> <li><a href="/purchase-subtitles/">Translation & Localization</a></li> <li><a href="/purchase-subtitles/">Auto-caption & machine translation </br>post editing</a></li> </ul> </nav> </div> <div class="col-xs-6 col-md-2 footer-link-group"> <nav> <ul class="nav"> <li><h3>About</h3></li> <li><a href="/about-amara/">Our Mission</a></li> <li><a href="/about-amara/#core-team">Our Team</a></li> <li><a href="/volunteer/">Volunteer</a></li> <li><a href="https://blog.amara.org/">Blog</a></li> <li><a href="/recruitment/">Jobs</a></li> <li><a href="https://support.amara.org/">Support</a></li> </ul> </nav> </div> <div class="col-xs-5 col-md-2 footer-link-group"> <nav> <ul class="nav contact"> <li><h3>Contact us</h3></li> <li> <div class="contact-svg"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="#5a2747" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <rect x="3" y="5" width="18" height="14" rx="2" /> <polyline points="3 7 12 13 21 7" /> </svg> </div> <p>contact@amara.org</p> </li>  <li> <div class="contact-svg location-svg"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="#5a2747" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <circle cx="12" cy="11" r="3" /> <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" /> </svg> </div> <div class="location"> <p>PO Box 55071 </br>#20335</br> Boston, MA </br>02205-5071</p> </div> </li> </ul> </nav> </div> </div> </div> <div class="container footer-group2"> <div class="row"> <div class="col-xs-12 col-md-11"> <nav id="legalnav"> <p>Copyright © 2024 Participatory Culture Foundation</p> <a href="https://pculture.org/terms-of-service" target="_blank">Terms and Conditions</a> <a href="https://pculture.org/privacy">Privacy Policy</a> <a href="https://pculture.org/security/">Security</a> </nav> </div> <div class="col-xs-12 col-md-1"> </div> </div> </div> </section> </footer> <script src="https://static.amara.org/b29f17ea/js/application.js"></script>  </body> </html>