Utilisation avancée de Klynt pour la personnalisation d’un webdocumentaire

Objectifs

Cette formation vous permet de travailler avec Klynt en utilisant du code (Html, Css3, JavaScript et jQuery). Expérimenter la personnalisation d'un Webdocumentaire.

Public

Journalistes, responsables éditoriaux, directeurs de rédaction, agences de communication (concepteur-rédacteur, chef de projet, etc.), producteurs de Webdocumentaire.

Durée

21 heures en présentiel sur 3 jours

Pré-requis

Être à l’aise avec l’utilisation d’Internet et son environnement informatique. Utiliser le logiciel Klynt régulièrement ou avoir suivi la formation Conception et réalisation d'un Webdocumentaire avec Klynt. Avoir des bases de programmation Web est un plus.

Formateur

Formateur, journaliste, expert en design d'interaction, spécialiste des nouvelles tendances médias.

Méthode pédagogique

8 participants maximum, un poste par stagiaire et un support de cours est remis pendant le stage. La formation est constituée d'apports théoriques, de démonstrations et de réflexions.

Modalité de validation des acquis

Évaluation des acquis via un questionnaire. Attestation de fin de stage.

Déroulé

Rappel: Fonctionnement des pages web & Environnement de travail

  • Klynt : rappels sur l’éditeur Interactif version Pro (version, fonctionnalités)
  • Structure d’une page web – Séparation Fond / Forme
  • Rôles du Html5, CSS3, JavaScript, jQuery et des navigateurs
  • Présentation des outils de travail: Chrome, Editeurs en ligne & hors ligne

Interaction JavaScript pour Klynt

  • OnClick
  • OnMouseOut / onMouseOver
  • getElementbyID

Fonctions API KLYNT utilisées avec JS

  • OpenWidget, OpenURL, OpenSequence
  • Eléments de jQuery pour manipuler les éléments Html

Sélecteurs CSS pour Klynt

  • Les sélecteurs: DIV, Id et classes
  • Le positionnement: Margin, padding, float..
  • Images et Opacité
  • Calques et transparences: Z-index

Design pour Klynt

  • Photoshop vers Klynt (découpage en html d’une image PSD) et integration via Iframe
  • Intégrer une image de titre avec couche alpha png
  • Personnalisation du Footer (images, logo, liens, interactivité)
  • Personnalisation des boutons dans les séquences
  • Création de séquences en Overlay avec images et liens personnalisés

Création d’une page web interactive et Intégration via IFRAME dans l’éditeur Klynt