Réalisateur de Webdoc Interactif HTML5

• Etre familier de l’environnement informatique et de l’utilisation d’Internet.
• Savoir créer des images à partir de Photoshop et les exporter au format Web.
• Il n’est pas nécessaire en revanche de connaître les langages Web.
• Il n’est pas nécessaire de connaître le montage audiovisuel.

• Formation de 63 heures en 9 journées de 7 heures.
• Tarif: 3015 € HT | 3618 € TTC. Groupes de 6 personnes maximum.
• Horaires : du Lundi au Vendredi 9h30 – 13h | 14h -17h30.
• Financement Entreprise tout OPCO.
• Financement AFDAS individuel, prise en charge à 100% pour les Auteurs MDA/Agessa/Sacem et  Intermittents remplissant les critères d’éligibilité, en fonction des budgets disponibles.
• Délais d’accès : Les délais d’accès peuvent varier selon votre type de financement. En moyenne comptez 30 jours pour que votre OPCO puisse étudier votre dossier. Dans le cas d’une formation éligible CPF, le délai est ramené à 7 jours.
• Modalités d’accès : en remplissant notre formulaire d’inscription, vous aurez la garantie de recevoir notre proposition après entretien avec un de nos spécialistes formation.
• Référent Handicap : Jessica Hennequin | Mel : [email protected]

Comprendre les standards du Web : HTML5/vidéo (1j)

Comprendre le mécanisme du langage HTML5 et les formats des médias utilisés pour le Web (images, audio, vidéo). Ce module sensibilise, il ne forme pas au codage.

Introduction

• Historique des langages de programmation.
• Positionnement du langage HTML5 dans le numérique
• L’accessibilité et le référencement
• Avantages et inconvénients du HTML5
• Les outils assistants du HTML5

Compression vidéo et audio

• Comprendre les algorithmes d’encodage vidéo pour le Web et les plateformes mobiles
• Comprendre les avantages et les limites du format vidéo sur le Web et les plateformes mobiles
• Convertir une animation en suite d’images

Le HTML5

• Structurer une page HTML5 élémentaire
• Les styles CSS/CSS2/CSS3
• Ajout de médias (images, sons, vidéos)
• Intégration Javascript
• LE SVG
• CANVAS et WebGL

Mise en ligne

• Obtenir un hébergement
• Placer son site sur un serveur distant
• Effectuer des mises à jour

Klynt : la vidéo interactive HTML5 sans coder (2j)

Klynt est un logiciel intuitif et facile à prendre en main qui permet de réaliser, sans coder, des pages Web HTML5 intégrant des médias audio, vidéo, textes et images. Il n’est pas adapté à l’animation, mais au séquençage audiovisuel HTML5 comme le ferait un logiciel d’authoring de DVD pour le Broadcast traditionnel. Dans ce module, le candidat apprend à réaliser un web document audiovisuel interactif séquencé à partir de scènes distinctes.

Présentation

• Rappel sur les standards du Web
• Positionnement de Klynt dans la production numérique Web et mobile

Présentation du logiciel

• Création d’un projet
• Insertion de médias
• Exportation

Fonctionnalités du logiciel Klynt

• Gestion des médias (audio, vidéo, images fixes)
• Le storyboard
• Les séquences
• Les boutons
• La navigation entre séquences
• La navigation au sein d’une séquence
• Gestion des textes et des sous-titres
• Zones transparentes
• Vidéos Youtube
• Pan and zoom
• Synchroniser des médias avec une vidéo
• Personnaliser le menu principal
• Ajout de liens Facebook et Tweeter
• Création de popups standards et personnalisées
• Gestion d’une mise en forme responsive
• Gestion d’interactions tactiles (swipe, tap)

Extensions hors Klynt

• Ajouter un iFrame
• Intégrer une animation HTML5
• Masquer le menu standard et la signature de Klynt
• Dialoguer entre une page HTML isolée et un projet Klynt
• VR 360

Publication

• Export du projet Klynt
• Mise en ligne via FTP
• Intégrer Klynt dans un autre contexte (page Web, WordPress, PandaSuite, Aquafadas).

Hype (version standard) : Animation HTML5 (3j)

Hype est un logiciel simple et puissant conçu pour réaliser dans une interface francophone des animations interactives HTML5 sans coder. Il permet aussi de déployer des interactions simples.

Introduction

• Gestion de projet Hype
• Terminologie du logiciel
• La fenêtre principale
• L’inspecteur de propriétés
• Le scénario
• Les scènes
• La bibliothèque
• Paramétrage du document
• Gestion du texte
• Les outils de formes

Gestion des médias

• Importation d’images (png, jpg, SVG)
• Importation de l’audio
• Importation vidéo intégrée et Youtube
• Placer un iFrame

Animation

• Gestion du scénario (images-clés)
• Le bouton d’enregistrement
• Les trajectoires
• Le texte
• Animer les propriétés CSS (position, échelle, rotation, opacité…)
• Animer des propriétés de plans 3D (position, rotation)

Gérer une action

• Les événements
• Placer une action
• Invoquer un URL ou un eMail

Contrôler les objets

• Piloter les scènes
• Piloter le scénario
• Gérer les commandes Audio
• Gérer les commandes Vidéo
• Gérer les commandes des périphériques tactiles (swipe, tap)

Exportation

• Exporter en HTML5
• Exporter en vidéo (MPEG-4)

Atelier de mise en pratique (3j)

Mise en pratique des acquis de la formation à travers une étude de cas libre à définir par le candidat. Gestion du dialogue entre Hype et Klynt.