-
Notifications
You must be signed in to change notification settings - Fork 2
Aller plus loin coté client
p5.js est la version javascript d'un outil très utilisé des artistes numériques: Processing. C'est un véritable couteau Suisse de la création web interactive. Vous pouvez gérer (simplement) de l'affichage 2D, 3D, des vidéos, du son, interagir avec le DOM de la page hôte, etc. P5JS est doté d'un ensemble de plugin qui permettent d'étendre encore plus ses fonctionnalités. A noter cependant que P5js est peut être un peu trop simple pour certains besoins, en particulier en matière d'interaction. Par contre, pour créer des mini jeux en canvas HTML5 c'est une bonne option (en utilisant son plugin p5.play).
Documentation à consulter:
- Le site officiel de p5.js
- Le wiki de documentation officiel de p5.js contient plein d'informations très utiles !
- Un manuel de p5.js pour le webdocumentaire
- Un tutoriel sur p5.js fait par Béranger Recoule (Ecole de Design Nantes Atlantique)
- Openprocessing une plateforme de développement collaborative (en ligne) pour P5JS. Ca peut être un outil bien pratique pour prototyper votre application web. Attention toutefois, à la fin de votre projet votre code p5.js devra être intégré dans le squelette d'application fourni sur le dépôt Github du Hyblab.
- Faire un sketch responsive avec P5JS
- Quelques astuces pour afficher correctement un sktech p5js sur un périphérique mobile
Cf. la section dédiée au Datajournalisme
SVG est un format de dessin vectoriel standardisé. L'utilisation de SVG est une bonne solution pour gérer efficacement les différentes résolutions auxquelles doivent être affichés les différents éléments graphiques d'une page web (selon qu'on affiche la page, sur mobile, tablette ou ordinateur standard). On peut également réaliser de magnifiques animations avec SVG.
Documentation à consulter:
- Référence SVG MDN.
- Quelques explications concernant les animations SVG.
- Snap.svg une Librarie javascript pour créer et animer facilement le SVG. Créée par le même auteur que Raphael.js.
- Il existe également de nombreuses autres librairies pour manipuler le SVG. Quelques exemples ici.
- Encore d'autres librairies très utiles : AnimJS et Greensock
Contrairement à SVG qui est un format d'image vectorielle et qui se manipule avec les outils DOM, le canvas HTML5 est orienté image bitmap (des pixels donc), est accéléré matériellement et est totalement indépendant du DOM. C'est un outil performant pour faire des jeux ou des animations ne nécessitant pas d'interactions complexes (qui sont plus facile avec le DOM)
Documentation à consulter:
- Référence Canvas MDN
- Deux librairies facilitant son utilisation : Phaser.io et CreateJS (qui fait un peu plus que du simple HTML5 Canvas : affichage, animation, son, interactions)
WebGL est un standard permettant de faire (sans plugin) de la 3D dans un navigateur web. A priori on ne conseille pas l'utilisation de la 3D dans les projet Hyblab pour des raisons de complexité de mise en oeuvre. Si vous avez des experts dans votre groupe, ça n'est cependant pas interdit.
Documentation à consulter:
- Référence WebGL MDN
- ThreeJS est un célèbre moteur 3D pour le web
- AFrame permet de faire plein de choses très sympa en VR via WebGL
Les graphiste utilisent des outils tels que After Effects pour créer des animations (2D). Airbnb a créé Lottie, une librairie permettant d'intégrer directement ces animations dans une page web ou une application mobile (et interagir avec). Cet outil peut donc être un moyen relativement simple d'intégrer des animations dans vos créations.
Documentation à consulter:
Nous avons laissé la documentation des outils suivants qui pouvaient être utiles dans le cadre du Hyblab Datajournalisme. Pour la narration interactive, ces librairies risquent de créer plus de problèmes qu'autre chose.
[Facultatif, voire déconseillé]
JQuery est une libraire Javascript dont le but est de simplifier les développements dans ce langage. En particulier, JQuery simplifie le parcours du DOM (i.e la structure de la page web) en permettant d'utiliser les même sélecteurs que ceux disponibles en CSS. Elle possède également de nombreux plugins permettant d'étendre ses fonctionnalités. A noter cependant qu'avec HTML5 et tous les outils javascript associés, l'utilisation de JQuery n'est généralement plus nécessaire.
Documentation à consulter:
- Référence JQuery Officielle.
- Cours JQuery OpenClassRooms.
A noter: Si vous utilisez D3js pour générer vos visualisations, alors l'utilisation de JQuery n'est généralement pas nécessaire car D3 fournit globalement les mêmes fonctionnalités.
[Facultatif, voire déconseillé]
Framework CSS simplifiant grandement d'utilisation des CSS et leur adaptation aux contraintes modernes (site responsive par exemple). Bootstrap n'est pas le seul framework responsive existant, vous pouvez consulter une liste d'autres outils ici.
Attention: Vérifiez bien la compatibilité de bootstrap avec les autres libraires javascript que vous pourriez utiliser pour gérer la mise en page de votre application (ex: fullpage.js). Des conflits de règles CSS peuvent parfois apparaitre...
Documentation à consulter:
- La documentation officielle de Bootstrap.