Jeudi 25 février 2016, le Labo de l’édition a accueilli l’association Storycode Paris dédiée au secteur du transmédia, du documentaire interactif et des nouvelles écritures, à l’occasion de sa conférence #22 sur le code à destination des storytellers et des entrepreneurs. Quelle est la différence entre HTML et CSS ? Qu’est-ce qu’une API ? A quoi sert un framework ou le WEBGL ? Ces interrogations, plus fréquentes qu’on ne le croit dans le milieu entrepreneurial, sont le reflet d’un véritable besoin. Difficile aujourd’hui de mener à bien un projet ou de raconter son histoire sans passer par les bases de la programmation. Remettre les pendules à l’heure et dévoiler les possibilités du code, tel était l’objet de cette conférence qui réunissait professionnels de l’informatique, porteurs de projets et créatifs.

Storycode code phallaina david tardiveau

Les bases du code, par David Tardiveau

C’est d’abord à travers le regard d’un autodidacte qu’ont été dévoilés les fondamentaux du code : David Tardiveau, développeur multimédia et coordinateur pédagogique aux Gobelins, l’école de l’image, a pris la parole le premier pour nous présenter les différentes étapes qui jalonnent l’apprentissage du code, répondant à toutes les questions les plus candides…

…A commencer par la plus simple : « A quoi ça sert le code ? »

Le code, c’est tout simplement « une manière de parler à son ordinateur », répond David Tardiveau. Il est absolument indispensable à la conception, à la réalisation, au test et à la maintenance des programmes informatiques. Que l’on veuille créer une interface, générer de l’interactivité ou même contrôler une animation, il faudra avoir recourt à la programmation.

programmation html css javascript code

Rafwiki.com

“Comment est-il possible d’avoir besoin de 3 langages différents pour faire un seul site ?”

La programmation sur le web nécessite souvent la combinaison de trois langages : HTML, CSS, Javascript. Le code HTML (Hypertext Markup Language) un système de balises servant à structurer les pages web : titres, sous-titres, paragraphes, images, formulaires de saisie, liens hypertextes, etc. En somme, c’est la base d’une page Web. Le CSS (Cascading Style Sheets) est le langage de présentation d’une page web : le code CSS modifie la présentation et la mise en page des éléments HTML : couleur, taille, police de caractères, mais aussi position sur la page, largeur, hauteur etc. Le JavaScript est un langage de programmation qui est lu et exécuté par le navigateur (le client) et qui permet de créer des réactions en réponse à des événements sur la page ou à des actions de l’utilisateur. Pour résumer, c’est ce qui permet l’interactivité des pages web.

Qu’est-ce que la programmation orientée objet ?

La programmation orientée objet est un paradigme de programmation informatique. C’est une façon d’organiser un programme en le groupant en objets, les objets étant ici des éléments individuels comportant des informations (données) et des fonctionnalités. La programmation orientée objet consiste en la mise en relation de ces objets avec un langage spécifique qui permet aux objets de communiquer entre eux.  Contrairement à la programmation classique qui traite les programmes comme un ensemble de données passives sur lesquelles agissent des procédures, la programmation orientée objet est une manière de concevoir à travers les messages échangés par les objets.

« Back et front, c’est quoi ? »

Le front-end correspond à ce que peut lire le navigateur à partir des fichiers HTML, CSS et Javascript.  C’est tout que l’utilisateur peut voir, comme par exemple le design du site. Le back-end, c’est la partie immergée de l’iceberg, invisible par les utilisateurs : le serveur, l’application (le site web), la base de donnée (où sont stockées les données de l’application). Si le terme « base de données » ne vous dit rien, imaginez simplement une sorte de fichier Excel. Ces informations relatives au back-end nécessitent des langages spécifiques : le PHP et MySQL pour gérer la base de données.

front end back end développeur code

 » Qu’est-ce qu’il y a de spécifique quand on développe sur mobile ? »

Plusieurs choses sont à savoir au sujet du développement mobile. Premièrement, une application mobile requiert une licence qui s’élève à 100 euros par an pour iOS (Apple) et à 25$ à vie pour Androïd. Les applications Apple sont par ailleurs soumises à validation. Androïd nécessite de développer avec Java alors qu’Apple requiert les langages Objective-C et Swift. Des solutions qui facilitent la prise en main de la programmation sont nées ces dernières années. On peut aujourd’hui s’appuyer sur des frameworks basés sur le HTML et le Javascript: Titanium, Phone Gap, JQuery Mobile etc.

Petits conseils pour débuter

David Tardiveau rappelle en effet l’existence des bibliothèques de code comme JQuery ou Tweenmax, essentielles à la programmation.

Carte blanche : Phallaina, un défi artistique et technologique

Phallaina, la première bande défilée co-éditée par France Télévisions Nouvelles Ecritures, nous a été présentée par son auteure Marietta Ren et son développeur Christophe Da Silva. L’oeuvre propose deux expériences complémentaires : elle repose sur un dispositif narratif hybride composé d’un roman graphique numérique pour tablettes et phablettes et d’une fresque physique avec un dispositif sonore interactif.

Phallaina marietta ren france télévision nouvelles écritures code

Phallaina © Nouvelles écritures France Télévision/Studio Smallbang – 2016 / Marietta Ren

Le synopsis : c’est l’histoire d’Audrey, une jeune fille qui souffre de crises hallucinatoires au cours desquelles elle voit des baleines. En lui faisant passer des examens, un neurologue/chercheur décèle chez elle un physeter, une structure anomalique qui permet à ses porteurs de rester longtemps en apnée.

Fresque phallaina marietta ren code

Fresque de Phallaina © AD/France Inter – 2016

L’application tablettes et phablettes a été le fruit d’une longue aventure technique et artistique, destinée à faire naître une bande dessinée sans cases à scroller, accompagnée de parallaxe et de sound design, disponible en français et en anglais.  Phallaina est à la croisée d’une œuvre graphique personnelle et d’une aventure artistique collective. Entre bande-dessinée, narration et programmation, la bande défilée ne serait rien sans son développeur, affirme Marietta Ren. Si cette dernière a assuré seule la mise en image du récit pendant près d’un an, Christophe Da Silva a développé un moteur sur mesure afin de pouvoir croiser l’animation, le son et le scrolling horizontal. Une équipe provenant du film d’animation et du développement d’application a ajouté l’animation et le son dans le récit.

L’expérience utilisateur se veut aussi simple et fluide que possible. Un simple balayage au doigt permet d’avancer dans le récit. « L’idée était de limiter autant que possible les fonctionnalités pour garder l’attention des utilisateurs.”, explique Marietta Ren, “Les bulles sont générées automatiquement pour gagner du temps pour l’affichage des différentes langues”. Un grand travail en design d’interaction a également été effectué pour la conception de Phallaina :

Découvrir le teaser :

Les pitchs

Déjà présents au Labo de l’édition au cours de notre neuvième déjeuner laborantinMaud Benaddi et Guillaume Jasmin ont présenté devant le public de Storycode leur future startup WaysBooks. Pour rappel, ce projet propose de réinventer la lecture pour les 6-12 ans avec une nouvelle génération de livres numériques, alliant textes, illustrations, animations, interactions et son. Inspiré des « Livres dont vous êtes le héros », WaysBooks empreinte les codes du jeu vidéo pour offrir une expérience de lecture personnalisée. Maud et Guillaume ont annoncé leur partenariat prochain avec la startup Mobidys dans le but d’appliquer leur solution aux cas des enfants dyslexiques.

Caroline Viphakone, déjà intervenue au Labo de l’édition à l’occasion d’une table ronde sur les nouveaux modes d’écriture à l’heure du numérique, a quant à elle présenté son réseau social de jeu de rôle Infinite RPG.

Une réelle communauté d' »Infiniters » se sont réunis autour de cette plateforme accessible à tous, très adéquate pour jouer ou s’adonner à l’écriture collaborative à distance. Caroline Viphakone a par ailleurs annoncé la création d’un nouvel outil pour créer son propre jeu de rôle, à paraître prochainement. L’équipe d’Infinite RPG est à la recherche de développeurs bénévoles pour les aider à mener ce projet.

Enfin, Kim Camus nous a présenté ZgagBox, un projet qui s’appuie sur les bugs des émissions de télévision. L’idée ? Inviter l’internaute à constituer sa version de la catastrophe d’une émission. Le dispositif se composerait de programmes courts, interactifs et multi-écrans, que l’utilisateur pourrait jouer et rejouer à l’infini pour créer un nouveau début, un nouveau milieu ou une nouvelle fin.