Apprenez à réaliser intégralement la version interactive aboutie de vos productions filmées ou documentaires: web doc indépendant, site officiel d’un film, site de promotion pour annonceurs, reportages interactifs compatibles web pour la presse, présentation institutionnelles digitales, en respectant les standards HTML5 et audiovisuels actuels.
Public : Producteurs, réalisateurs, monteurs, truquistes, graphistes, JRI, rédacteurs en chef, web designers, chargés de communication, photographes, scénaristes.
- Savoir modifier le code d’une page HTML/HTML5 existante et établir des relations hypertextes entre tous les types de fichiers pour être autonome face à un logiciel de production HTML5 (gestion des médias, scripts, css).
- Identifier les codecs requis pour le Web et le mobile. Savoir compresser une vidéo avec Media Encoder.
- Savoir intégrer la vidéo ou l’audio dans une page HTML5 et tester la compatibilité des différents navigateurs.
- Monter un projet interactif en HTML5 et organiser une navigation par séquences à l’aide de Klynt.
- Ajouter des animations HTML5 à l’aide de Hype (version standard) afin de produire un web document original, interactif et animé.
- Publier le projet sur un serveur Web ou le préparer pour une publication digitale
- 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.