diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index 8065beb1b6..c05655e833 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -24,4 +24,3 @@ Une description claire et concise des solutions alternatives qui auraient pu aus **Contexte additionnel** Ajoute n'importe quel autre élément de contexte qui peut aider à mieux comprendre l'idée (capture d'écran, maquette, etc). - diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md index 1078b8d8c4..45c88bff24 100644 --- a/.github/ISSUE_TEMPLATE/question.md +++ b/.github/ISSUE_TEMPLATE/question.md @@ -9,4 +9,3 @@ assignees: '' **La question** Posez votre question en donnant le plus de détails possible pour être certain d'avoir une réponse. - diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 0806592a53..a026199137 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,7 +1,7 @@ -Fix #XXXX +Fix #XXXX diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index a2b936a543..75848549de 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -9,3 +9,13 @@ repos: hooks: - id: black language_version: python3 + - repo: https://github.com/pre-commit/pre-commit-hooks + rev: v4.4.0 + hooks: + - id: trailing-whitespace + exclude_types: ["svg"] + - id: end-of-file-fixer + exclude_types: ["svg"] + - id: mixed-line-ending + exclude_types: ["svg"] + args: ["--fix=lf"] diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ac71ad378f..0a16c0b057 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,5 +1,3 @@ Les contributions externes sont les bienvenues ! Tous les détails se trouvent [sur la page dédiée](http://docs.zestedesavoir.com/contributing.html). - - diff --git a/Gulpfile.js b/Gulpfile.js index 06971cd5dd..4531d699f4 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -220,4 +220,3 @@ exports.errors = errors exports.prepareZmd = prepareZmd exports.prepareEasyMde = prepareEasyMde exports.default = gulp.parallel(watch, jsLint) - diff --git a/README.rst b/README.rst index ffd3cf8f36..2ea2737195 100644 --- a/README.rst +++ b/README.rst @@ -23,7 +23,7 @@ Notre projet technique est constitué de plusieurs éléments : Contribuer à Zeste de Savoir ============================ -`Notre documentation technique `__ devrait vous être utile pour bien appréhender notre projet. +`Notre documentation technique `__ devrait vous être utile pour bien appréhender notre projet. Merci de prendre connaissance du `Code de Conduite de Contributeurs `__ et de le respecter pour garder ce projet ouvert et accueillant ! diff --git a/SECURITY.md b/SECURITY.md index fc4af33959..e8062810a3 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -1,6 +1,6 @@ # Security Policy -If you discover a vulnerability in our code or at https://zestedesavoir.com, please do *not* open an issue but send an email to **technique@zestedesavoir.com**! +If you discover a vulnerability in our code or at https://zestedesavoir.com, please do *not* open an issue but send an email to **technique@zestedesavoir.com**! Thank you <3 diff --git a/assets/js/form-email-username.js b/assets/js/form-email-username.js index 45ab71cca6..6dee479bf5 100644 --- a/assets/js/form-email-username.js +++ b/assets/js/form-email-username.js @@ -44,4 +44,3 @@ }) } })(jQuery) - diff --git a/assets/scss/components/_pygments.scss b/assets/scss/components/_pygments.scss index cbef137000..80b07dd9a3 100644 --- a/assets/scss/components/_pygments.scss +++ b/assets/scss/components/_pygments.scss @@ -64,36 +64,36 @@ width: 100% !important; table-layout: fixed; border-color: rgba(0, 0, 0, 0.15); - + td { padding: 0; vertical-align: top; } - + .linenos { background-color: rgb(251, 251, 252); border-right: 1px solid rgb(236, 236, 240); width: 46px; /* Can handle up to 9999 lines of code without overflowing */ } - + .codehilite pre, .linenos { padding-top: 15px; padding-bottom: 15px; } - + .linenodiv pre { text-align: right; padding-right: 7px; color: rgb(190, 190, 197); } - + .codehilite { width: 100%; height: auto; overflow: auto; } - + .codehilite pre { white-space: pre; overflow: auto; overflow: auto; diff --git a/assets/scss/layout/_sidebar.scss b/assets/scss/layout/_sidebar.scss index 00532ef137..ecfd09ed14 100644 --- a/assets/scss/layout/_sidebar.scss +++ b/assets/scss/layout/_sidebar.scss @@ -103,7 +103,7 @@ background: $color-sidebar-hover; } } - + h4[data-num] { position: relative; padding-left: calc(5% + #{$length-24}); diff --git a/doc/make.bat b/doc/make.bat index 6fcf05b4b7..061f32f91b 100644 --- a/doc/make.bat +++ b/doc/make.bat @@ -1,35 +1,35 @@ -@ECHO OFF - -pushd %~dp0 - -REM Command file for Sphinx documentation - -if "%SPHINXBUILD%" == "" ( - set SPHINXBUILD=sphinx-build -) -set SOURCEDIR=source -set BUILDDIR=build - -if "%1" == "" goto help - -%SPHINXBUILD% >NUL 2>NUL -if errorlevel 9009 ( - echo. - echo.The 'sphinx-build' command was not found. Make sure you have Sphinx - echo.installed, then set the SPHINXBUILD environment variable to point - echo.to the full path of the 'sphinx-build' executable. Alternatively you - echo.may add the Sphinx directory to PATH. - echo. - echo.If you don't have Sphinx installed, grab it from - echo.https://www.sphinx-doc.org/ - exit /b 1 -) - -%SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O% -goto end - -:help -%SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O% - -:end -popd +@ECHO OFF + +pushd %~dp0 + +REM Command file for Sphinx documentation + +if "%SPHINXBUILD%" == "" ( + set SPHINXBUILD=sphinx-build +) +set SOURCEDIR=source +set BUILDDIR=build + +if "%1" == "" goto help + +%SPHINXBUILD% >NUL 2>NUL +if errorlevel 9009 ( + echo. + echo.The 'sphinx-build' command was not found. Make sure you have Sphinx + echo.installed, then set the SPHINXBUILD environment variable to point + echo.to the full path of the 'sphinx-build' executable. Alternatively you + echo.may add the Sphinx directory to PATH. + echo. + echo.If you don't have Sphinx installed, grab it from + echo.https://www.sphinx-doc.org/ + exit /b 1 +) + +%SPHINXBUILD% -M %1 %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O% +goto end + +:help +%SPHINXBUILD% -M help %SOURCEDIR% %BUILDDIR% %SPHINXOPTS% %O% + +:end +popd diff --git a/doc/source/back-end-code.rst b/doc/source/back-end-code.rst index ea499e8eac..546438677e 100644 --- a/doc/source/back-end-code.rst +++ b/doc/source/back-end-code.rst @@ -10,4 +10,4 @@ Vous pouvez également retrouver la `documentation fonctionnelle des modules ici :maxdepth: 2 :glob: - back-end-code/* \ No newline at end of file + back-end-code/* diff --git a/doc/source/back-end-code/featured.rst b/doc/source/back-end-code/featured.rst index 2008435545..71b40ed8bd 100644 --- a/doc/source/back-end-code/featured.rst +++ b/doc/source/back-end-code/featured.rst @@ -17,4 +17,4 @@ Vues (``views.py``) =================== .. automodule:: zds.featured.views - :members: \ No newline at end of file + :members: diff --git a/doc/source/back-end-code/pages.rst b/doc/source/back-end-code/pages.rst index 30d85eb8ba..b881e3dfe9 100644 --- a/doc/source/back-end-code/pages.rst +++ b/doc/source/back-end-code/pages.rst @@ -10,4 +10,4 @@ Vues (``views.py``) =================== .. automodule:: zds.pages.views - :members: \ No newline at end of file + :members: diff --git a/doc/source/back-end-code/utils.rst b/doc/source/back-end-code/utils.rst index f0564aa2a9..c206e94cb4 100644 --- a/doc/source/back-end-code/utils.rst +++ b/doc/source/back-end-code/utils.rst @@ -39,4 +39,3 @@ Autres (``misc.py``) .. automodule:: zds.utils.misc :members: - diff --git a/doc/source/front-end/helpers-js.rst b/doc/source/front-end/helpers-js.rst index 9257e9bc04..4f5459b6b0 100644 --- a/doc/source/front-end/helpers-js.rst +++ b/doc/source/front-end/helpers-js.rst @@ -50,7 +50,7 @@ et en cas d'erreur. La première méthode prend en argument un objet issu de la désérialisation du JSON. -Exemple: +Exemple: .. sourcecode:: javascript diff --git a/doc/source/includes/contact-us.rst b/doc/source/includes/contact-us.rst index 9218552964..83b4f9a77b 100644 --- a/doc/source/includes/contact-us.rst +++ b/doc/source/includes/contact-us.rst @@ -1,4 +1,3 @@ .. note:: **N'hésitez pas à nous contacter !** Si vous avez besoin d'aide ou si vous souhaitez simplement discuter du projet, contactez-nous sur le canal ``#développement-de-zds`` de `notre serveur Discord `_ ou `le forum Dev Zone `_. - diff --git a/doc/source/install/extra-install-es.rst b/doc/source/install/extra-install-es.rst index 9e063cf4bc..dc4db866a5 100644 --- a/doc/source/install/extra-install-es.rst +++ b/doc/source/install/extra-install-es.rst @@ -161,4 +161,3 @@ Pour réindexer les nouvelles données, utilisez la commande suivante : python manage.py es_manager index_flagged Plus d'informations sur la commande ``es_manager`` sont disponibles sur la page `concernant la recherche sur ZdS <../back-end/searchv2.html#indexer-les-donnees-de-zds>`_. - diff --git a/doc/source/install/install-linux.rst b/doc/source/install/install-linux.rst index 4829769575..b6642ad0be 100644 --- a/doc/source/install/install-linux.rst +++ b/doc/source/install/install-linux.rst @@ -194,4 +194,3 @@ Le dépot installé est controlé par la variable d'environnement ``ZDS_LATEX_RE Si vous souhaitez réinstaller totalement TeX live, supprimez le dossier ``.local/texlive``. Vous pouvez néanmoins choisir d'installer manuellement ces outils, `tel que décrit ici `_. - diff --git a/doc/source/utils/opensearch.rst b/doc/source/utils/opensearch.rst index 33321dff92..dbab63c147 100644 --- a/doc/source/utils/opensearch.rst +++ b/doc/source/utils/opensearch.rst @@ -1,8 +1,8 @@ -=================================================== -Installer un plugin de recherche à votre navigateur -=================================================== - -Vous pouvez installer un plugin de recherche à votre navigateur en deux clics. - - .. figure:: ../images/search/opensearch-firefox.png - :align: center \ No newline at end of file +=================================================== +Installer un plugin de recherche à votre navigateur +=================================================== + +Vous pouvez installer un plugin de recherche à votre navigateur en deux clics. + + .. figure:: ../images/search/opensearch-firefox.png + :align: center diff --git a/doc/source/utils/selenium.rst b/doc/source/utils/selenium.rst index 4d07d93159..4a686c95be 100644 --- a/doc/source/utils/selenium.rst +++ b/doc/source/utils/selenium.rst @@ -69,4 +69,3 @@ Lancement des tests ~~~~~~~~~~~~~~~~~~~ Il suffit d'utiliser le Makefile et de lancer ``make test-back-selenium``. - diff --git a/doc/source/workflow.rst b/doc/source/workflow.rst index 07c5303960..b906fd68a9 100644 --- a/doc/source/workflow.rst +++ b/doc/source/workflow.rst @@ -153,7 +153,7 @@ Le Release Manager (RM) - **Confidentialité** vis-a-vis des données privées présente sur les serveurs (email, contenu de MP…) - Si possible, toujours tester en preprod' avant de reproduire en prod' - **Professionnalisme**, "si on sait pas on fait pas" pour ne pas mettre la production en péril (sauf en preprod entre les releases) - + Chacun de ces postes est occupé par une personne différente (idéalement) qui aura été choisi parmi les développeurs et pour qui l'association Zeste de Savoir a donné son approbation (en raison du caractère confidentiel de certaines données). diff --git a/errors/404.html b/errors/404.html index 5de1d4044f..5738515d00 100644 --- a/errors/404.html +++ b/errors/404.html @@ -8,7 +8,7 @@ - + diff --git a/errors/maintenance.html b/errors/maintenance.html index 7d7e9ad78b..1fac8bee20 100644 --- a/errors/maintenance.html +++ b/errors/maintenance.html @@ -8,7 +8,7 @@ - + diff --git a/errors/scss/main.scss b/errors/scss/main.scss index 6c6902dcbe..28fedf322b 100644 --- a/errors/scss/main.scss +++ b/errors/scss/main.scss @@ -71,7 +71,7 @@ p { a { color: inherit; - + &:hover { text-decoration: none; } diff --git a/fixtures/goals.yaml b/fixtures/goals.yaml index 6cf5b0071a..e21791c3f2 100644 --- a/fixtures/goals.yaml +++ b/fixtures/goals.yaml @@ -33,4 +33,3 @@ description: Nous sommes des communards, après tout. position: 4 slug: nouvelles-communaute - diff --git a/fixtures/labels.yaml b/fixtures/labels.yaml index 9bd173125c..cbee25140c 100644 --- a/fixtures/labels.yaml +++ b/fixtures/labels.yaml @@ -22,4 +22,3 @@ name: Suggestion description: Contenu suggéré par l'équipe de développement. slug: suggestion - diff --git a/fixtures/tuto/article_v1/manifest.json b/fixtures/tuto/article_v1/manifest.json index 966b2afed0..1ae8e5197e 100644 --- a/fixtures/tuto/article_v1/manifest.json +++ b/fixtures/tuto/article_v1/manifest.json @@ -1,7 +1,7 @@ { - "title": "Microsoft et l'open source, comme chien et chat", - "description": "A moins que ça ne soit comme chat et chien", - "type": "article", - "text": "text.md", + "title": "Microsoft et l'open source, comme chien et chat", + "description": "A moins que ça ne soit comme chat et chien", + "type": "article", + "text": "text.md", "licence": "CC BY" -} \ No newline at end of file +} diff --git a/fixtures/tuto/article_v1/manifest2.json b/fixtures/tuto/article_v1/manifest2.json index 966b2afed0..1ae8e5197e 100644 --- a/fixtures/tuto/article_v1/manifest2.json +++ b/fixtures/tuto/article_v1/manifest2.json @@ -1,7 +1,7 @@ { - "title": "Microsoft et l'open source, comme chien et chat", - "description": "A moins que ça ne soit comme chat et chien", - "type": "article", - "text": "text.md", + "title": "Microsoft et l'open source, comme chien et chat", + "description": "A moins que ça ne soit comme chat et chien", + "type": "article", + "text": "text.md", "licence": "CC BY" -} \ No newline at end of file +} diff --git a/fixtures/tuto/article_v1/text.md b/fixtures/tuto/article_v1/text.md index 94e3116d84..ee1cb9c495 100644 --- a/fixtures/tuto/article_v1/text.md +++ b/fixtures/tuto/article_v1/text.md @@ -6,7 +6,7 @@ Avant d'en arriver là, Microsoft est passé par plusieurs étapes dans sa réfl # "Les promoteurs du libre? Des communistes" -Alors qu'il était encore PDG de Microsoft, Bill Gates a dû faire face à la montée en puissance des logiciels libres et open source tels que OpenOffice en même temps que le piratage des licences de ses logiciels. Alors qu'il donnait une interview, il estimait alors : +Alors qu'il était encore PDG de Microsoft, Bill Gates a dû faire face à la montée en puissance des logiciels libres et open source tels que OpenOffice en même temps que le piratage des licences de ses logiciels. Alors qu'il donnait une interview, il estimait alors : >Il existe une nouvelle sorte de communistes modernes qui veut être exemptée de taxes rémunérant les musiciens, les cinéastes et les éditeurs de logiciels. Source: Bill Gates @@ -17,7 +17,7 @@ L'arrivée de Azure (cloud de Microsoft) et des consoles XBox n'a pas vraiment r Depuis sa création, en 1975, Microsoft n'aura connu que trois PDG. L'histoire commence avec Bill Gates amenant la firme qu'il a co-fondée avec S.Allen au sommet de sa gloire jusqu'aux premiers procès antitrust des années 90. -Suite à ces premiers procès antitrust, et désireux de se concentrer sur son engagement humanitaire avec sa femme, B.Gates cède la direction de Microsoft à Steeve Balmer qui y restera jusqu'en 2014 lorsqu'il cèdera sa place à Satya Nadella. +Suite à ces premiers procès antitrust, et désireux de se concentrer sur son engagement humanitaire avec sa femme, B.Gates cède la direction de Microsoft à Steeve Balmer qui y restera jusqu'en 2014 lorsqu'il cèdera sa place à Satya Nadella. Balmer sera le premier à infléchir la stratégie de Microsoft vers des cycles de développement plus rapides[^rapideIE] et à tenter de faire venir un maximum de développeurs vers les technologies Microsoft. @@ -31,8 +31,8 @@ La plateforme .NET se base sur une machine virtuelle comparable à la Java Virtu - Proposer, comme pour Java, un environnement de développement multiplateforme (les programmes écrits grâce à la plateforme .NET sont dès le départ disponibles pour Windows 98, 2000, NT, XP et leurs équivalents côté serveur). - Permettre d'unifier les bibliothèques développées avec les différentes technologies. Ainsi vous pouvez développer un outil en Visual Basic .NET qui utilisera des bibliothèques écrites en Visual C++ ou plus tard en C#. Comme toutes ces technologies utilisent .NET, vous n'avez pas besoin d'adapter quoi que ce soit! - -Rapidement, les développeurs remarqueront que le premier objectif n'est pas vraiment atteint : seules les plateformes Windows sont supportées. Une équipe se rassemblera alors autour du projet [Mono](http://www.mono-project.com/), qui aura pour but d'écrire un interpréteur de CLR pour Linux et Mac. + +Rapidement, les développeurs remarqueront que le premier objectif n'est pas vraiment atteint : seules les plateformes Windows sont supportées. Une équipe se rassemblera alors autour du projet [Mono](http://www.mono-project.com/), qui aura pour but d'écrire un interpréteur de CLR pour Linux et Mac. Heureusement pour les développeurs de Mono, la CLI sera normalisée en majeure partie sous le doux nom de [ECMA335](http://www.ecma-international.org/publications/standards/Ecma-335.htm). Et Mono tentera de coller à cette norme. @@ -46,15 +46,15 @@ En 2003, peu de temps après sa création, la société Ximian qui était le pri En 2006, Microsoft attaque Novell, la société qui sponsorisait le développement de Mono à cette époque, pour violation de brevet. Néanmoins, au vu de la popularité grandissante des outils Mono, notamment utilisés par SecondLife[^scripting], Microsoft accordera à Novel le droit d'utiliser les technologies développées pour Mono qui imitaient les brevets .NET[^patent]. -En 2007, un événement va bouleverser toute la stratégie de Microsoft : Apple sort son IPhone, première version. Le "virage du mobile" doit alors être négocié et ni Windows Mobile, ni Windows Phone 7.5 n'y parviendront. +En 2007, un événement va bouleverser toute la stratégie de Microsoft : Apple sort son IPhone, première version. Le "virage du mobile" doit alors être négocié et ni Windows Mobile, ni Windows Phone 7.5 n'y parviendront. ![Ventes de mobiles en 2011->2013 (gartner/eco-conscient)](http://www.eco-conscient.com/wp-content/uploads/cache/2013/11/gartner-os-smartphone-vente-quarter/558378059/2494269678.png) -L'avenir de Mono va se jouer en 2011 lorsqu'une firme, nommée Xamarin est créée suite au rachat de Novell par un fond d'investissement, [AtacheMate](http://www.channelnews.fr/actu-societes/fournisseurs/8537-rachat-de-novell-par-attachmate-ce-quen-pensent-les-partenaires-francais.html). +L'avenir de Mono va se jouer en 2011 lorsqu'une firme, nommée Xamarin est créée suite au rachat de Novell par un fond d'investissement, [AtacheMate](http://www.channelnews.fr/actu-societes/fournisseurs/8537-rachat-de-novell-par-attachmate-ce-quen-pensent-les-partenaires-francais.html). Cette société a pour but de créer des applications *natives* sur *toutes* les plateformes présentes sur le marché (IOS, Android, Windows Phone 7.5 puis 8) à partir d'un code C# compilé depuis Mono justement. L'année 2011 sera d'autant plus importante qu'Unity3D, le [moteur de création de jeu vidéo ](http://openclassrooms.com/courses/realisez-votre-premier-jeu-video-avec-unity) intégrera Javascript et C# comme langage de *scripting*. L'intégration de C# se fera via Mono pour qu'Unity3D soit portable sur les différents OS. De même Sony utilisera C# et Mono pour la PS Suite. - + Voyant dans cette société un potentiel énorme de création d'applications pour leur *store* alors peu fourni en comparaison avec la concurrence, Microsoft fait de Xamarin un de ses principaux partenaires dans le développement mobile. Pour la première fois, le projet Mono est soutenu officiellement par Microsoft, ce qui lui permet de voir s'ouvrir de nouvelles portes. Pour autant, Mono n'assure pas un support complet de ce qu'on peut trouver dans la plateforme .NET. En effet, le support du WPF n'est pas assuré. Microsoft n'a toujours pas donné les sources de cette bibliothèque graphique et la garde pour son propre environnement. De ce fait, Mono se cantonne au vieillissant WinForm qu'elle implémente grâce à [GTK#](https://github.com/mono/gtk-sharp). @@ -71,7 +71,7 @@ Lorsque vous créez une bibliothèque de code, le partage de cette bibliothèque Depuis l'arrivée de Satya Nadella à la tête de Microsoft, une stratégie assumée d'ouverture se met en place. Bien que le PDG de la firme de Redmond soit encore parfois accusé d'utiliser la célèbre stratégie des 3E "Embrace Extend Extinguish"[^troise], plusieurs actions sont venues rassurer le monde du libre. -Cette stratégie commerciale s'appuie sur un changement radical de politique de vente : toute licence OEM[^OEM] vendue sur un *device* dont l'écran fait moins de 10 pouces est gratuite. +Cette stratégie commerciale s'appuie sur un changement radical de politique de vente : toute licence OEM[^OEM] vendue sur un *device* dont l'écran fait moins de 10 pouces est gratuite. De plus, la direction de Microsoft adhère au constat qu'aujourd'hui, l'open source est passé de ["toléré" à "prévu"](http://opensource.com/business/14/10/interview-dwight-merriman-mongodb). Dans cette optique, le développement de [ASP.NET MVC](http://www.asp.net/mvc) ainsi que d'autres modules tels que [SignalR](http://signalr.net/) a dès le départ été rendus [open](http://aspnet.codeplex.com/SourceControl/latest) [source](https://github.com/SignalR/SignalR). @@ -122,4 +122,4 @@ Ce qu'il faut comprendre c'est que Microsoft lie toujours très fortement ses bi *[CLI]: Common Language Infrastructure *[CLR]: Common Language Runtime *[.NET]: A prononcer "dote nette", bien qu'aucun mariage ne soit en jeu. -*[WPF]: Windows Presentation Foundation : un framework qui permet de créer des interfaces graphiques modernes qui s'appuie beaucoup sur la programmation *asynchrone* \ No newline at end of file +*[WPF]: Windows Presentation Foundation : un framework qui permet de créer des interfaces graphiques modernes qui s'appuie beaucoup sur la programmation *asynchrone* diff --git a/fixtures/tuto/balise_audio/13428_les-balises-audio-et-video.md b/fixtures/tuto/balise_audio/13428_les-balises-audio-et-video.md index 6a2c9e2b04..28d0f87ec6 100644 --- a/fixtures/tuto/balise_audio/13428_les-balises-audio-et-video.md +++ b/fixtures/tuto/balise_audio/13428_les-balises-audio-et-video.md @@ -1,145 +1,145 @@ -# Les balises audio et vidéo - -Comme vous le savez, en HTML, tout élément est représenté par une balise. `audio` et `video` ne feront pas exception. - -Ces éléments sont de type *block* et sont écrits de la manière suivante : - -```html - -``` - -```html - -``` - -# Les éléments importants de ces balises - -Bien que leurs buts soient différents, ces deux balises sont très similaires dans leur comportement. Finalement, la seule différence entre un contenu audio et vidéo est que le second *peut* inclure le premier (mais pas nécessairement). Dans un cas comme dans l’autre, on souhaite lire une piste et afficher une interface à l’utilisateur pour interagir avec cette dernière. - -Cela nous amène donc au premier attribut indispensable de ces deux balises : la **source**. - -## La source - -Savoir afficher une balise audio/vidéo c’est bien, mais si on ne lui donne rien à afficher, on n’est pas plus avancé ! Il va donc falloir donner une source à afficher. Tout comme pour une image, elle peut être relative ou absolue. Il existe deux moyens pour la spécifier. - -### Via l’attribut `src` - -Là encore, comme pour une image, il suffit de spécifier l’attribut `src` pour donner un lien vers la vidéo ou le flux audio à lire. - -```html - -``` - -### Via la balise `` - -Cependant, il peut être intéressant de proposer plusieurs formats à l’utilisateur. En effet, tous les navigateurs ne savent pas lire tous les formats vidéo. On propose donc la même vidéo dans des formats différents et le navigateur choisira ! Pour cela, on utilise la balise `` *dans* la balise audio/vidéo. - -```html - -``` - -Voici une petite démonstration[^source] de ce dernier cas : - --> - -!(https://jsfiddle.net/tmjosu22/3/) - -<- - -[[q]] -| Mais c’est pourri, on peut pas lancer la vidéo ! Ça marche pas ! - -En fait si, tout marche très bien, c'est juste que maintenant que nous avons la vidéo, il va falloir la contrôler… - -# Contrôler (simplement) le média - -Maintenant que la vidéo est présente, ajoutons un peu d’interactivité à cette dernière… - -## Les options « natives » - -Les balises multimédia possèdent par défaut quelques attributs bien pratiques. En effet, voici une liste non exhaustive de celles que j'estime être les plus utiles dans l’immédiat : - -+ `controls` : permet de rajouter des boutons de contrôle de lecture standards (lecture/pause, barre de progression, plein-écran…) ; -+ `autoplay` : (plutôt évident…) la lecture est lancée automatiquement dès que la vidéo commence à se charger ; n’en abusez pas, cela peut être assez gênant pour la navigation ; -+ `poster` ^*^ : lien vers une image d'illustration si la vidéo n'est pas disponible à l'adresse spécifiée ; -+ `loop` : relance la lecture quand cette dernière est terminée, encore et encore ; -+ `height` et `width` ^*^ : pour spécifier une hauteur et une largeur au lecteur ; -+ `muted` : coupe le son. - -~* ne s'applique pas à la balise audio~ - -Voici par exemple une vidéo avec des contrôles, dont le son est coupé, qui jouera en boucle et dont la taille a été limitée à 320x240 pixels. - -```html hl_lines="1" - -``` - --> - -!(https://jsfiddle.net/tmjosu22/4/) - -<- - -Vous savez maintenant afficher une vidéo ou jouer un son ! - -## Encore plus loin, des sous-titres pour les vidéos - -Dans notre monde moderne et international, il arrive que les sous-titres puissent être nécessaires pour offrir le contenu à un plus grand public. Et c’est là que la balise `` intervient. Placée dans une balise vidéo, cette dernière proposera des sous-titres au lecteur. - -La balise *track* a besoin des informations suivantes : - -+ `src` : la source (relative ou absolue) du fichier de sous-titres (au format WebVTT [.vtt](http://dev.w3.org/html5/webvtt/) (WEB Video Text Track)) ; -+ `kind="subtitles"` : pour préciser que l'on parle de sous-titres ; -+ `srclang` : le code international de la langue (en, de, fr…) ; -+ `label` : le nom littéral de la piste de sous-titres. - -Par exemple : - -```html hl_lines="4-5" - -``` - -[[a]] -| À l’heure d’écriture de ce tutoriel, cette balise est encore très peu supportée dans les navigateurs. - -## *Fallback* - -Si l'utilisateur qui visite votre site possède un navigateur un peu *rétro* ou incomplet vis-à-vis des standards du Web, il serait de bon ton de l’avertir que le contenu ne peut être affiché plutôt que de le laisser attendre indéfiniment un média qui n’arrivera jamais. - -Pour cela, il suffit tout simplement d’ajouter du HTML dans la balise média concernée. Si le navigateur ne sait pas interpréter la balise vidéo/audio, alors il ignorera les balises et affichera notre *fallback*. Sinon ce contenu est ignoré car la balise est correctement interprétée. - -```html hl_lines="7-9" - -``` - -[[i]] -| Plutôt que d’afficher du texte, vous pouvez très bien aussi afficher un conteneur Flash en solution de secours pour jouer la vidéo. L’idéal est même de proposer une alternative ET les liens de téléchargement de la vidéo, si la licence de distribution de cette dernière le permet. - -[^source]: Les vidéos d’exemple sont celles du film [*Big Buck Bunny*](https://peach.blender.org/), un film sous licence Creative Commons. \ No newline at end of file +# Les balises audio et vidéo + +Comme vous le savez, en HTML, tout élément est représenté par une balise. `audio` et `video` ne feront pas exception. + +Ces éléments sont de type *block* et sont écrits de la manière suivante : + +```html + +``` + +```html + +``` + +# Les éléments importants de ces balises + +Bien que leurs buts soient différents, ces deux balises sont très similaires dans leur comportement. Finalement, la seule différence entre un contenu audio et vidéo est que le second *peut* inclure le premier (mais pas nécessairement). Dans un cas comme dans l’autre, on souhaite lire une piste et afficher une interface à l’utilisateur pour interagir avec cette dernière. + +Cela nous amène donc au premier attribut indispensable de ces deux balises : la **source**. + +## La source + +Savoir afficher une balise audio/vidéo c’est bien, mais si on ne lui donne rien à afficher, on n’est pas plus avancé ! Il va donc falloir donner une source à afficher. Tout comme pour une image, elle peut être relative ou absolue. Il existe deux moyens pour la spécifier. + +### Via l’attribut `src` + +Là encore, comme pour une image, il suffit de spécifier l’attribut `src` pour donner un lien vers la vidéo ou le flux audio à lire. + +```html + +``` + +### Via la balise `` + +Cependant, il peut être intéressant de proposer plusieurs formats à l’utilisateur. En effet, tous les navigateurs ne savent pas lire tous les formats vidéo. On propose donc la même vidéo dans des formats différents et le navigateur choisira ! Pour cela, on utilise la balise `` *dans* la balise audio/vidéo. + +```html + +``` + +Voici une petite démonstration[^source] de ce dernier cas : + +-> + +!(https://jsfiddle.net/tmjosu22/3/) + +<- + +[[q]] +| Mais c’est pourri, on peut pas lancer la vidéo ! Ça marche pas ! + +En fait si, tout marche très bien, c'est juste que maintenant que nous avons la vidéo, il va falloir la contrôler… + +# Contrôler (simplement) le média + +Maintenant que la vidéo est présente, ajoutons un peu d’interactivité à cette dernière… + +## Les options « natives » + +Les balises multimédia possèdent par défaut quelques attributs bien pratiques. En effet, voici une liste non exhaustive de celles que j'estime être les plus utiles dans l’immédiat : + ++ `controls` : permet de rajouter des boutons de contrôle de lecture standards (lecture/pause, barre de progression, plein-écran…) ; ++ `autoplay` : (plutôt évident…) la lecture est lancée automatiquement dès que la vidéo commence à se charger ; n’en abusez pas, cela peut être assez gênant pour la navigation ; ++ `poster` ^*^ : lien vers une image d'illustration si la vidéo n'est pas disponible à l'adresse spécifiée ; ++ `loop` : relance la lecture quand cette dernière est terminée, encore et encore ; ++ `height` et `width` ^*^ : pour spécifier une hauteur et une largeur au lecteur ; ++ `muted` : coupe le son. + +~* ne s'applique pas à la balise audio~ + +Voici par exemple une vidéo avec des contrôles, dont le son est coupé, qui jouera en boucle et dont la taille a été limitée à 320x240 pixels. + +```html hl_lines="1" + +``` + +-> + +!(https://jsfiddle.net/tmjosu22/4/) + +<- + +Vous savez maintenant afficher une vidéo ou jouer un son ! + +## Encore plus loin, des sous-titres pour les vidéos + +Dans notre monde moderne et international, il arrive que les sous-titres puissent être nécessaires pour offrir le contenu à un plus grand public. Et c’est là que la balise `` intervient. Placée dans une balise vidéo, cette dernière proposera des sous-titres au lecteur. + +La balise *track* a besoin des informations suivantes : + ++ `src` : la source (relative ou absolue) du fichier de sous-titres (au format WebVTT [.vtt](http://dev.w3.org/html5/webvtt/) (WEB Video Text Track)) ; ++ `kind="subtitles"` : pour préciser que l'on parle de sous-titres ; ++ `srclang` : le code international de la langue (en, de, fr…) ; ++ `label` : le nom littéral de la piste de sous-titres. + +Par exemple : + +```html hl_lines="4-5" + +``` + +[[a]] +| À l’heure d’écriture de ce tutoriel, cette balise est encore très peu supportée dans les navigateurs. + +## *Fallback* + +Si l'utilisateur qui visite votre site possède un navigateur un peu *rétro* ou incomplet vis-à-vis des standards du Web, il serait de bon ton de l’avertir que le contenu ne peut être affiché plutôt que de le laisser attendre indéfiniment un média qui n’arrivera jamais. + +Pour cela, il suffit tout simplement d’ajouter du HTML dans la balise média concernée. Si le navigateur ne sait pas interpréter la balise vidéo/audio, alors il ignorera les balises et affichera notre *fallback*. Sinon ce contenu est ignoré car la balise est correctement interprétée. + +```html hl_lines="7-9" + +``` + +[[i]] +| Plutôt que d’afficher du texte, vous pouvez très bien aussi afficher un conteneur Flash en solution de secours pour jouer la vidéo. L’idéal est même de proposer une alternative ET les liens de téléchargement de la vidéo, si la licence de distribution de cette dernière le permet. + +[^source]: Les vidéos d’exemple sont celles du film [*Big Buck Bunny*](https://peach.blender.org/), un film sous licence Creative Commons. diff --git a/fixtures/tuto/balise_audio/13430_interagir-un-peu-plus-avec-les-medias.md b/fixtures/tuto/balise_audio/13430_interagir-un-peu-plus-avec-les-medias.md index 62ccd8c2bd..03bdac2152 100644 --- a/fixtures/tuto/balise_audio/13430_interagir-un-peu-plus-avec-les-medias.md +++ b/fixtures/tuto/balise_audio/13430_interagir-un-peu-plus-avec-les-medias.md @@ -1,165 +1,165 @@ -Lorsque l’on a un média, on peut avoir envie d'interagir un peu plus avec que simplement afficher les contrôles de base. Nous ferons alors appel à JavaScript pour rentrer dans les entrailles du lecteur… - -Imaginons que nous voulions proposer un lecteur sans contrôles natifs, mais uniquement avec nos boutons HTML que nous pourrions styliser via du CSS. Il faudrait alors que ces boutons interagissent avec la vidéo correctement. Admettons que nous voulions ajouter les contrôles suivants : - -+ `Lecture` : lit la vidéo ; -+ `Pause` : met la vidéo en pause ; -+ `Stop` : arrête la vidéo ; -+ `-10s` : recule la vidéo de 10 secondes ; -+ `+10s` : avance la vidéo de 10 secondes ; - -## Structure de base - -Voici la structure de base que nous allons respecter : - -```html - - -``` - -```javascript -function lecture() { - // Lit la vidéo -} - -function pause() { - // Met la vidéo en pause -} - -function stop() { - // Arrête la vidéo -} - -function avancer(duree) { - // Avance de 'duree' secondes -} - -function reculer(duree) { - // Recule de 'duree' secondes -} - -function creerBoutons() { - // Crée les boutons de gestion du lecteur -} -``` - --> - -!(https://jsfiddle.net/tmjosu22/8/) - -<- - -## Mettre nos contrôleurs - -Comme vous pouvez le voir dans le squelette précédent, pour l'instant, aucun bouton personnalisé n’est présent sur notre page et la vidéo possède l’interface par défaut. En effet, nous allons créer les boutons dynamiquement en JavaScript dans la fonction `creerBoutons()` qui sera exécutée à la fin du chargement de la page. De cette manière, un utilisateur désactivant le JavaScript pourra tout de même utiliser le navigateur avec l’interface standard. - -Voici comment nous allons créer nos boutons. Je compte sur vous pour comprendre sans explication, juste avec les commentaires ! ;) - -```javascript -var lecteur; - -function creerBoutons() { - // Crée les boutons de gestion du lecteur - var btnLecture = document.createElement("button"); - var btnPause = document.createElement("button"); - var btnStop = document.createElement("button"); - var btnReculer = document.createElement("button"); - var btnAvancer = document.createElement("button"); - - var controlesBox = document.getElementById("controles"); - lecteur = document.getElementById("mavideo"); - - // Ajoute un peu de texte - btnLecture.textContent = "Lecture"; - btnPause.textContent = "Pause"; - btnStop.textContent = "Stop"; - btnReculer.textContent = "-10s"; - btnAvancer.textContent = "+10s"; - - // Ajoute les boutons à l'interface - controlesBox.appendChild(btnLecture); - controlesBox.appendChild(btnPause); - controlesBox.appendChild(btnStop); - controlesBox.appendChild(btnReculer); - controlesBox.appendChild(btnAvancer); - - // Lie les fonctions aux boutons - btnLecture.addEventListener("click", lecture, false); - btnPause.addEventListener("click", pause, false); - btnStop.addEventListener("click", stop, false); - btnReculer.addEventListener("click", function(){reculer(10)}, false); - btnAvancer.addEventListener("click", function(){avancer(10)}, false); - - // Affiche les nouveaux boutons et supprime l'interface originale - controlesBox.removeAttribute("hidden"); - lecteur.removeAttribute("controls"); -} - -// Crée les boutons lorsque le DOM est chargé -document.addEventListener('DOMContentLoaded', creerBoutons, false); -``` - --> - -!(https://jsfiddle.net/tmjosu22/11/) - -<- - -## Interagir avec la vidéo - -Maintenant que nous avons un squelette, nous allons devoir faire appel aux propriétés de l'objet vidéo pour interagir avec (son id est « mavideo »). Pour cela, on ira chercher dans la référence de l’élément : [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement). Vous y trouverez les attributs accessibles (dont certains ont été vus plus tôt) ainsi que les méthodes que nous pouvons appeler. - -Ainsi nous trouverons par exemple les éléments suivants : - -+ `play()` : pour lire la vidéo ; -+ `pause()` : pour la mettre en pause ; -+ `currentTime` : attribut représentant le minutage actuel de la vidéo (*position* dans la vidéo). - -On va alors pouvoir implémenter les méthodes JavaScript proposées plus tôt ! - -```javascript -function lecture() { - // Lit la vidéo - lecteur.play(); -} - -function pause() { - // Met la vidéo en pause - lecteur.pause(); -} - -function stop() { - // Arrête la vidéo - // On met en pause - lecteur.pause(); - // Et on se remet au départ - lecteur.currentTime = 0; -} - -function avancer(duree) { - // Avance de 'duree' secondes - // On parse en entier pour être sûr d'avoir un nombre - lecteur.currentTime += parseInt(duree); -} - -function reculer(duree) { - // Recule de 'duree' secondes - // On parse en entier pour être sûr d'avoir un nombre - lecteur.currentTime -= parseInt(duree); -} -``` - --> - -!(https://jsfiddle.net/tmjosu22/15/) - -<- \ No newline at end of file +Lorsque l’on a un média, on peut avoir envie d'interagir un peu plus avec que simplement afficher les contrôles de base. Nous ferons alors appel à JavaScript pour rentrer dans les entrailles du lecteur… + +Imaginons que nous voulions proposer un lecteur sans contrôles natifs, mais uniquement avec nos boutons HTML que nous pourrions styliser via du CSS. Il faudrait alors que ces boutons interagissent avec la vidéo correctement. Admettons que nous voulions ajouter les contrôles suivants : + ++ `Lecture` : lit la vidéo ; ++ `Pause` : met la vidéo en pause ; ++ `Stop` : arrête la vidéo ; ++ `-10s` : recule la vidéo de 10 secondes ; ++ `+10s` : avance la vidéo de 10 secondes ; + +## Structure de base + +Voici la structure de base que nous allons respecter : + +```html + + +``` + +```javascript +function lecture() { + // Lit la vidéo +} + +function pause() { + // Met la vidéo en pause +} + +function stop() { + // Arrête la vidéo +} + +function avancer(duree) { + // Avance de 'duree' secondes +} + +function reculer(duree) { + // Recule de 'duree' secondes +} + +function creerBoutons() { + // Crée les boutons de gestion du lecteur +} +``` + +-> + +!(https://jsfiddle.net/tmjosu22/8/) + +<- + +## Mettre nos contrôleurs + +Comme vous pouvez le voir dans le squelette précédent, pour l'instant, aucun bouton personnalisé n’est présent sur notre page et la vidéo possède l’interface par défaut. En effet, nous allons créer les boutons dynamiquement en JavaScript dans la fonction `creerBoutons()` qui sera exécutée à la fin du chargement de la page. De cette manière, un utilisateur désactivant le JavaScript pourra tout de même utiliser le navigateur avec l’interface standard. + +Voici comment nous allons créer nos boutons. Je compte sur vous pour comprendre sans explication, juste avec les commentaires ! ;) + +```javascript +var lecteur; + +function creerBoutons() { + // Crée les boutons de gestion du lecteur + var btnLecture = document.createElement("button"); + var btnPause = document.createElement("button"); + var btnStop = document.createElement("button"); + var btnReculer = document.createElement("button"); + var btnAvancer = document.createElement("button"); + + var controlesBox = document.getElementById("controles"); + lecteur = document.getElementById("mavideo"); + + // Ajoute un peu de texte + btnLecture.textContent = "Lecture"; + btnPause.textContent = "Pause"; + btnStop.textContent = "Stop"; + btnReculer.textContent = "-10s"; + btnAvancer.textContent = "+10s"; + + // Ajoute les boutons à l'interface + controlesBox.appendChild(btnLecture); + controlesBox.appendChild(btnPause); + controlesBox.appendChild(btnStop); + controlesBox.appendChild(btnReculer); + controlesBox.appendChild(btnAvancer); + + // Lie les fonctions aux boutons + btnLecture.addEventListener("click", lecture, false); + btnPause.addEventListener("click", pause, false); + btnStop.addEventListener("click", stop, false); + btnReculer.addEventListener("click", function(){reculer(10)}, false); + btnAvancer.addEventListener("click", function(){avancer(10)}, false); + + // Affiche les nouveaux boutons et supprime l'interface originale + controlesBox.removeAttribute("hidden"); + lecteur.removeAttribute("controls"); +} + +// Crée les boutons lorsque le DOM est chargé +document.addEventListener('DOMContentLoaded', creerBoutons, false); +``` + +-> + +!(https://jsfiddle.net/tmjosu22/11/) + +<- + +## Interagir avec la vidéo + +Maintenant que nous avons un squelette, nous allons devoir faire appel aux propriétés de l'objet vidéo pour interagir avec (son id est « mavideo »). Pour cela, on ira chercher dans la référence de l’élément : [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement). Vous y trouverez les attributs accessibles (dont certains ont été vus plus tôt) ainsi que les méthodes que nous pouvons appeler. + +Ainsi nous trouverons par exemple les éléments suivants : + ++ `play()` : pour lire la vidéo ; ++ `pause()` : pour la mettre en pause ; ++ `currentTime` : attribut représentant le minutage actuel de la vidéo (*position* dans la vidéo). + +On va alors pouvoir implémenter les méthodes JavaScript proposées plus tôt ! + +```javascript +function lecture() { + // Lit la vidéo + lecteur.play(); +} + +function pause() { + // Met la vidéo en pause + lecteur.pause(); +} + +function stop() { + // Arrête la vidéo + // On met en pause + lecteur.pause(); + // Et on se remet au départ + lecteur.currentTime = 0; +} + +function avancer(duree) { + // Avance de 'duree' secondes + // On parse en entier pour être sûr d'avoir un nombre + lecteur.currentTime += parseInt(duree); +} + +function reculer(duree) { + // Recule de 'duree' secondes + // On parse en entier pour être sûr d'avoir un nombre + lecteur.currentTime -= parseInt(duree); +} +``` + +-> + +!(https://jsfiddle.net/tmjosu22/15/) + +<- diff --git a/fixtures/tuto/balise_audio/13431_tp-faire-votre-propre-lecteur-multimedia.md b/fixtures/tuto/balise_audio/13431_tp-faire-votre-propre-lecteur-multimedia.md index 79b4b229e9..6c85f4e13a 100644 --- a/fixtures/tuto/balise_audio/13431_tp-faire-votre-propre-lecteur-multimedia.md +++ b/fixtures/tuto/balise_audio/13431_tp-faire-votre-propre-lecteur-multimedia.md @@ -1,45 +1,45 @@ -# Consigne - -En guise d’exercice, je vous propose de continuer l’interface que nous avons commencée en rajoutant les boutons suivants. - -## Niveau 1 - -+ `Répéter` : *checkbox* qui fera répéter la vidéo lorsqu'elle se termine si elle est cochée ; -+ `Avancer/Reculer de xx secondes` : un *input* de votre choix pour sélectionner une valeur et deux boutons pour avancer ou reculer. - -## Niveau 2 - -Pour les plus forts : - -+ Une barre de progression pour afficher où la vidéo est rendue dans sa lecture ; -+ Un *input* de type *range* pour : - + afficher où la vidéo est rendue ; - + sélectionner un endroit où aller. - -## Niveau 3 - -Prouvez que vous être le maître des technos Web, rajoutez une belle couche de CSS par dessus tout cela ! - --> - -Voila, ça fera de quoi vous occuper :pirate: ! - -**BON COURAGE** <- - -# Solution - -Voici un exemple simple de solution « Niveau 1 » : - --> - -!(https://jsfiddle.net/tmjosu22/16/) - -<- - -Et voila une deuxième démo mettant plus l'accent sur le style que sur les fonctions. - --> - -!(https://jsfiddle.net/tmjosu22/20/) - -<- \ No newline at end of file +# Consigne + +En guise d’exercice, je vous propose de continuer l’interface que nous avons commencée en rajoutant les boutons suivants. + +## Niveau 1 + ++ `Répéter` : *checkbox* qui fera répéter la vidéo lorsqu'elle se termine si elle est cochée ; ++ `Avancer/Reculer de xx secondes` : un *input* de votre choix pour sélectionner une valeur et deux boutons pour avancer ou reculer. + +## Niveau 2 + +Pour les plus forts : + ++ Une barre de progression pour afficher où la vidéo est rendue dans sa lecture ; ++ Un *input* de type *range* pour : + + afficher où la vidéo est rendue ; + + sélectionner un endroit où aller. + +## Niveau 3 + +Prouvez que vous être le maître des technos Web, rajoutez une belle couche de CSS par dessus tout cela ! + +-> + +Voila, ça fera de quoi vous occuper :pirate: ! + +**BON COURAGE** <- + +# Solution + +Voici un exemple simple de solution « Niveau 1 » : + +-> + +!(https://jsfiddle.net/tmjosu22/16/) + +<- + +Et voila une deuxième démo mettant plus l'accent sur le style que sur les fonctions. + +-> + +!(https://jsfiddle.net/tmjosu22/20/) + +<- diff --git a/fixtures/tuto/balise_audio/conclusion.md b/fixtures/tuto/balise_audio/conclusion.md index a4745fee8e..0c609d6952 100644 --- a/fixtures/tuto/balise_audio/conclusion.md +++ b/fixtures/tuto/balise_audio/conclusion.md @@ -1,3 +1,3 @@ -S’il est encore nécessaire de montrer l’intérêt des balises modernes du HTML5, sachez par exemple que YouTube, le célèbre hébergeur de vidéos, a décidé d’arrêter complètement l'utilisation de Flash pour ses contenus. En effet, maintenant, toutes les vidéos passent par l'utilisation… de la balise `