Lectora

Utiliser des classes CSS dans Lectora

Lectora est un outil riche pour composer vos modules e-learning. Il intègre de nombreuses possibilités de styles pour vos zones de textes. Vous pouvez d’ailleurs enregistrer ces styles à l’identique d’un traitement de texte pour les réutiliser facilement dans tous vos modules e-learning. Une autre force de Lectora est la possibilité d’ajouter du code dans les écrans créés. Cela ouvre la porte à l’utilisation de CSS pour définir vos préférences d’affichage de texte en utilisant toutes la palette des fonctionnalités CSS. Voici la marche à suivre :

Tout d’abord insérez une Extension html sur la page dans laquelle vous souhaitez utiliser le code (ou à la racine du titre si vous souhaitez utiliser le CSS sur l’ensemble de votre module). Choisissez le Type Div personnalisée et  cliquez sur le Edition pour afficher la boite de saisie. Dans la boite de saisie, indiquez vos différentes classes CSS à la manière de l’exemple ci-dessous :

creer_div_css

<style>
 .chap
 {
 padding: 2px 5px;
 background-color: #f2f2f2;
 border: 2px solid transparent;
 -moz-box-shadow: 0px 0px 4px #000000;
 -webkit-box-shadow: 0px 0px 4px #000000;
 box-shadow: 0px 0px 4px #000000;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 }
 </style>

Puis rendez vous sur le bloc de texte, affichez ses propriétés et cliquez sur la petite flêche à côté de Aspect.

 

affecter_css

Indiquez simplement la classe souhaitée dans le champ proposé. Dans l’exemple ci-après, la classe chap est affectée au bloc de texte CH9 :

attribuer_css

Pour visualiser la bonne prise en compte du code, faite une prévisualisation dans le navigateur de voter choix.

Pour vous aider à écrire votre code, Arnaud notre développeur vous propose les quelques sites ressources suivants :

http://www.cssportal.com/

http://css3generator.com/

https://designmodo.com/css-editors/

 

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Gérez les actions simplement dans Lectora

Lectora est un logiciel complet qui permet de développer facilement des modules e-learning très évolués. Avec Lectora, vous pouvez paramétrer très simplement des actions complexes !

La fonction de déclenchement d’action sur des objets dans Lectora est très facile à utiliser et à visualiser, ce qui est un plus lorsque l’on en a beaucoup.

Pour ajouter une action sur un objet (Page, bouton, zone de texte, image, audio, vidéo…) , il suffit de cliquer sur « Ajouter une action » soit par le menu du clic droit de la souris, soit par le bandeau supérieur.

image1

Les actions possibles apparaissent sous l’objet dans le menu de gauche.

Vous allez ensuite définir votre action dans le volet supérieur, en paramétrant :

  1. L’évènement déclencheurimage2
  2. Le délai éventuel entre évènement et actioni3
  3. La nature de l’actioni4
  4. La condition dans laquelle elle se réalise

Par défaut elle s’effectue « Toujours » mais vous pouvez définir des conditions, en utilisant des variables existantes ou que vous aurez définies vous-même.

image2

Vous pouvez ajouter autant d’actions que vous le souhaitez à un même objet, elles s’accompliront dans leur ordre d’apparition sous l’objet.

i5

Pour avoir une vision d’ensemble plus claire quand il y a beaucoup d’actions, ouvrez le « Volet action » par le menu supérieur. D’un seul coup d’oeil vous visualisez toutes les actions associées à un objet !

image6

Vous savez maintenant comment paramétrer simplement des actions complexes grâce à Lectora. L’utilisation de ces actions va vous permettre des créer des modules toujours plus interactifs et dynamiques qui répondront pleinement à vos attentes pédagogiques.  A vous de jouer !

Lectora : Effectuez un test gratuit de 30 jours

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Qu’est-ce que le Responsive Design ?

Responsive Course Design

Le Responsive Design est une approche dont la conception vise à offrir une expérience utilisateur confortable avec des supports différents, et qui s’adapte à une grande variété d’appareils : les téléphones, les tablettes et les périphériques de bureau. Le contenu est facilement utilisable sur ces appareils sans avoir recours au zoom, ce qui permet à l’utilisateur d’obtenir la meilleure expérience de contenu disponible sur chaque appareil. L’utilisateur peut ainsi consulter le même cours à travers une large gamme d’appareils avec le même confort visuel.

Il existe actuellement beaucoup de solutions Responsive Design sur le marché comme des bibliothèques JavaScript pour les programmeurs. Chacun fonctionne sur le même principe de base, le contenu est disposé sur une « grille fluide », qui s’adapte à la largeur de l’appareil sur lequel le contenu est affiché. Au fur et à mesure que la zone de vue diminue, le contenu est repositionné pour permettre la visualisation sans qu’il soit nécessaire de faire défiler le contenu horizontalement ou de zoomer.

Pourquoi le Responsive Design est utile ?

Chaque nouveau périphérique sur le marché a une nouvelle résolution d’écran, une taille différente, un nombre de pixels  différent. En raison de ce nombre variable de pixels, il devient assez complexe de savoir exactement comment votre contenu sera affiché sur un périphérique particulier. Vous devriez tester votre contenu sur tous les appareils de vos utilisateurs afin de savoir de manière définitive comment votre contenu sera affiché sur chacun. Ceci est particulièrement problématique lorque l’on passe d’une lecture en horizontal à une lecture à la verticale.

Nous cherchons donc à savoir à quoi ressemblera le cours sur un téléphone, une tablette, et nous devons prendre en considération les modes paysage et portrait.

La solution Responsive Course Design de Lectora

La solution consiste à concevoir en fonction du type et de l’orientation de l’appareil, au lieu de la largeur de l’écran. Cela nous donne 5 possibilités de conception pour :

  • Ordinateur
  • Tablette en paysage
  • Tablette en portrait
  • Smartphone en paysage
  • Smartphone en portrait

Le contenu se dimensionne automatiquement. La base de construction se fait en mode « Ecran d’ordinateur », puis se décline pour les autres devices.

1

  • Les modifications au niveau de l’ordinateur seront affectées partout;
  • Les modifications apportées au niveau de la tablette n’affecteront pas l’ordinateur, mais seront propagées sur le téléphone;
  • Les modifications apportées au téléphone affecteront uniquement les vues respectives du téléphone.

Les écrans mobiles (tablette et téléphone) réduisent le contenu pour qu’il corresponde à la largeur exacte de l’écran, avec un défilement vertical si le contenu est plus grand que la hauteur de l’écran. Les contenus affichés sur le téléphone seront les mêmes sur tous les téléphones, quelle que soit la résolution de l’écran sur ce téléphone.

Voyons comment un exemple de cours serait présenté sur plusieurs appareils.

Sur un ordinateur portable, vous avez un grand écran qui permet à l’utilisateur d’avoir de nombreuses options. Vous pouvez y inclure des éléments qui n’ont de sens que dans le contexte d’un cours sur ordinateur portable.

2

Lorsque vous visualisez le même cours sur un téléphone, votre zone d’affichage est considérablement réduite. Pour un écran en mode paysage, la zone visible est large mais pas grande. Dans ce cas, supprimer certains des boutons de navigation permet de réduire les tailles d’image, en donnant à l’utilisateur toutes les informations dont il a besoin.

3

Un téléphone en mode portrait est généralement le plus difficile à concevoir. Dans ce cas, nous avons allongé le bloc de texte et l’avons disposé autour des images, tout en chevauchant un peu les deux images. Encore une fois, cela nous donne toutes les informations, dans un format facilement utilisable sur l’écran du téléphone.

4

L’interface Lectora a été optimisée avec une barre en haut de la zone de travail qui vous permet de basculer entre les différentes vues en fonction de chaque appareil. Ainsi vous conservez toute l’architecture, les liens entre les parties, les animations…

5

Si quelque chose nécessite un ajustement, il suffit de déplacer l’objet et de l’adapter pour la version souhaitée. Par exemple, pour supprimer les boutons en mode paysage, comme dans les images ci-dessus, faites glisser les boutons hors de la vue.

6

Avec le Responsive Course Design de Lectora, chaque écran peut avoir sa propre mise en page, et une publication en HTML  plus performante, optimisée pour une visualisation sur tous les appareils et toutes les orientations.

Nous vivons dans un monde avec une grande variété d’appareils, Lectora vous permet de produire un contenu e-learning adapté à chacun d’eux.

Source : http://trivantis.com/whitepapers/responsive-course-design

Facebooktwittergoogle_plusredditpinterestlinkedinmail
Page 1 sur 3123