IV.Éléments de contenu

Les différents éléments de contenus

Comme nous pouvons le constater directement sur le manager, différents éléments sont mis à disposition de l’administrateur. Les éléments de contenu sont accessibles dans le menu sur la droite (éléments).

Les différents éléments de contenus

Chaque élément remplit une fonction qui lui est propre. Nous allons passer en revue chacun de ces éléments.

View / Vue

L’item (ou élément) view (ou vue) est un élément assez central. Il permet de créer des sous sections. Ces vues sont d’abord vides. Vous pourrez par la suite les remplir avec d’autres items. L’item view permet de définir le parcours utilisateur (c’est à dire, le chemin logique par lequel passe l’utilisateur pour accéder à un contenu spécifique).

Il n’y a pas de limite dans la création de vues. À l’image des dossiers windows, vous pouvez en créer autant que vous le souhaitez.

Lorsque vous glissez / déposez un item view, vous retrouvez un élément de ce type :

View / Vue

  • Archiver : L’élément n’apparaît plus pour les utilisateurs, mais l’administrateur y accède encore
  • Supprimer : Supprime définitivement l’élément
  • Déplacer : Maintenez le clic gauche de la souris pour déplacer l’élément dans la zone souhaitée
  • Notifier : Vous envoyez une notification aux utilisateurs sur cet élément
  • Droits : Vous pouvez masquer cet élément à certains utilisateurs
  • Picto : Vous pouvez ajouter une picto (image) pour cette action
  • Titre de la view : Remplissez directement le titre
  • Texte de la view : Remplissez directement le texte
  • Accès à la sous-section : Cliquez pour accéder au contenu de la sous-section.

Titre / Title

Les items titre, texte et image sont des éléments dits passifs. C’est à dire qu’ils ne génèrent aucune action au toucher. Ils permettent d’afficher uniquement un titre pour le titre, un texte pour le texte, une image pour image. De la même façon, vous pouvez glisser et déposer l’élément dans la zone souhaitée.

Il vous suffit alors de compléter avec le titre de votre choix. Attention, comme pour l’ensemble des éléments Kawet, cet élément sera visible par tous instantanément. Il n’y a pas de « brouillon » intermédiaire. Vous noterez qu’on retrouve les boutons : gestion de droit, archiver, supprimer et déplacer.

Texte / Text

Le texte présente le même fonctionnement que le titre. Les différences sont la police d’écriture et la rédaction sur plusieurs lignes (le titre est sur une seule ligne).

Image / Picture

Le système d’image permet d’ajouter des images au sein de l’application (par exemple des bandeaux en haut de l’application ou bien des illustrations dans la lecture d’un article ou d’un rapport). Les images seront dans un premier temps téléchargées sur le manager. Il est recommandé d’exploiter une résolution adaptée (2048 pixels) au support de l’utilisateur.

De façon générale, la plus haute définition d’image est vivement préconisée. Les fichiers images compatibles sont .jpg et .png

Une fois que vous avez téléchargé votre image puis que vous avez glissé et déposé l’item image, voici les étapes à respecter :

Image / Picture

Vous avez déposé l’item image à l’endroit désiré. Allez au centre et cliquez sur Éditer.

Télécharger les images

La fenêtre ci-dessus doit apparaître. Vous accédez alors à l’ensemble des images déjà téléchargées. Choisissez celle qui vous intéresse (elle sera cochée en vert). Jouez avec les options. Nous rappelons que toute modification est instantanée et vous pouvez l’observer sur l’application mobile / tablette.

Puis cliquez sur Enregistrer.

Vous retournez alors au dashboard et vous pouvez compléter votre image avec une légende. La légende est facultative. Pensez à observer votre travail directement sur l’application, vous pourrez avoir des surprises sur les dimensions de l’image, sa qualité ou autre. N’hésitez pas à supprimer et à recommencer jusqu’à obtenir le résultat souhaité. Le manager Kawet encourage les itérations (et donc les éventuels échecs).

Vidéo

L’élément vidéo permettra de générer le lecteur de vidéo de l’application de la même manière que l’élément Image.

Les fichiers vidéos compatibles sont .mp4

Youtube

L’item YouTube permettra soit de lancer une vidéo directement depuis YouTube tout en restant dans l’application. Soit d’accéder à une chaîne Youtube avec l’ensemble des vidéos organisées par ordre chronologique.

Youtube

Choisissez si vous voulez joindre une seule vidéo ou bien toutes les vidéos d’une chaîne (User) Rentrez le lien, puis cliquez sur ‘Save’. La vidéo sera accessible par les utilisateurs.

Diaporama / Slideshow

L’élément Slideshow permet de diffuser plusieurs photos.

Vous pouvez les organiser dans l’ordre que vous souhaitez en maintenant la picto de déplacement. Vous pouvez ajouter d’autres photos en cliquant sur ‘Add Pictures’. Une fois que vous avez fini, cliquez sur ‘Back’. Un diaporama (slideshow) de photos sera disponible pour vos utilisateurs.

RSS

Un flux RSS vient d’internet et permet d’obtenir une liste d’informations qui se met à jour automatiquement. Il convient d’identifier un flux RSS en amont. Il s’agit souvent d’un contenu de type actualités (news).

Copiez l’URL du flux RSS que vous avez repéré puis cliquez sur ‘Check Link’. Si le flux est bon, il doit apparaître. Si vous avez un message d’erreur, votre flux est incorrect. Cliquez ensuite sur ‘Save’ tout en bas de la page.

Vous pouvez utiliser ce procédé avec n’importe que flux RSS provenant du web.

L’item « Custom Link » fait appel à des fonctions logiques de la tablette ou smartphone de l’utilisateur. Ces fonctions logiques sont :

  • envoyer un email
  • passer un appel téléphonique (fonctionne que sur smartphone)
  • envoyer un SMS

Choisissez le type d’action : Email pour envoyer un email, SMS pour envoyer un SMS ou Phone pour passer un appel téléphonique. Remplissez la valeur en respectant les consgines. Cliquez sur Save.

Géolocalisation / Geolocation

La géolocalisation est un item un peu plus complexe.

Il permet aux utilisateurs d’accéder à une carte avec des points. Pour le comprendre : il se comporte comme un item view, à l’exception que l’utilisateur ne visualise pas les contenus sur une vue (ou liste), mais sur une carte. C’est à dire qu’on va :

  1. Glisser l’item Géolocalisation
  2. Ajouter du contenu à l’intérieur de l’item Géolocalisation
  3. Définir la géolocalisation du contenu
  4. Définir la façon dont l’utilisateur accèdera à la carte

Puis cliquez sur le pictogramme à droite de la Géolocalisation. Ajoutez des éléments de contenu à l’intérieur de l’item Géolocalisation. Une fois que les items views sont déposés et que nous avons précisé leur titre, nous pouvons leurs préciser leurs adresses géographiques. Pour ce faire, il faut cliquer pour chaque item sur le petit globe terrestre. Une pop-up apparaît. Rentrez les 4 premiers champs (street adress, post code, city et country). Puis cliquez sur Positionner. Puis cliquez sur Sauvegarder.

Géolocalisation / Geolocation

Une fois que c’est fait. Chaque item aura sa picto en surbrillance rouge/orange. Cliquez ensuite sur une vue « Adapted to markers » puis « Save Settings ».

Si vous avez bien mené toutes les étapes, vos utilisateurs accéderont depuis leur application mobile et à l’endroit où vous avez déposé l’item Géolocalisation à une vue proche de celle-ci :

Géolocalisation sur un iPad

Vous noterez que l’utilisateur peut cliquer sur un ‘pin’ (épingle) et rentrer à l’intérieur. Cela veut dire que vous pouvez ajouter encore du contenu dans l’item « view » que vous avez créé.

PDF

L’item PDF permet à l’utilisateur, comme son nom l’indique, d’accéder à un document PDF. L’item PDF ne peut être mis en place que si l’administrateur a préalablement déposé/téléchargé des documents PDF depuis son ordinateur sur le manager. Glissez, déposez l’item PDF sur le dashboard. Saisissez le titre et éventuellement le sous-titre. Cliquez sur le pictogramme de l’item PDF à droite. Parcourez vos documents jusqu’à ce que vous ayez sélectionné le bon document. Cliquez sur « Enregistrer ». Vos utilisateurs accéderont au document en question.

Web

L’item web permet à l’administrateur de renvoyer l’utilisateur vers un lien Internet tout en restant dans l’application. Cet item peut être utile pour :

  • Renvoyer vers des liens utiles internet
  • Renvoyer vers des outils intranet
  • Renvoyer vers des contenus intranet Glissez, déposez, complétez l’item Web. Cliquez sur la picto WWW à droite. Rentrez directement l’URL (ou copiez collez là depuis votre navigateur), puis cliquez sur « Save ». Les utilisateurs accèderont directement à la page souhaitée depuis leur application.

Twitter

Cliquez sur la picto Twitter puis testez les fonctions logiques pour obtenir la vue souhaitée.

Formulaires / Forms

L’item formulaire permet à l’utilisateur d’accéder à des formulaires que l’administrateur a créé. Il y a 2 types de formulaire.

  • ceux que l’utilisateur complète et que l’administrateur récupère (sans interaction)
  • ceux qui permettent aux utilisateurs d’interagir Les formulaires étant assez complexes, ils sont abordés dans le chapitre consacré aux formulaires.

Élément existant / Existing item

L’item « Existing item » n’est pas forcément le plus recommandé car il y a des risques de supprimer par erreur un contenu. Il permet de créer un raccourci d’un item déjà existant.

Glisser - Déposer l’élément. Vous obtenez automatiquement cette fenêtre :

Élément existant / Existing item

Remplissez le type d’item pour lequel vous souhaitez créer un raccourci. Mettez le(s) mot(s) clés dans l’espace Keywords puis cliquez sur « Search ». Sélectionnez l’item que vous recherchiez. Défilez jusqu’en bas et cliquez sur « Link this item ». Ne sélectionnez pas « Copy this item ».

Élément existant / Existing item

Votre élément sera alors accessible pour les utilisateurs depuis l’endroit où vous l’avez déposé.

Ajouter des éléments de contenu

Les éléments (ou items) sont des briques fonctionnelles mises à disposition de l’administrateur à travers le manager Kawet. À l’image d’un jeu de LEGO, l’administrateur va pouvoir composer son application en emboitant des briques fonctionnelles. Chaque item correspond à un usage spécifique.

Les éléments sont accessibles via l’interface éléments.

Accès aux éléments

Accès aux éléments

Éléments : En cliquant sur Éléments, vous accéderez à l’ensemble des éléments de contenu (briques fonctionnelles).

Glisser / Déposer un élément

Pour ajouter un élément dans la zone désirée, il suffit de maintenir le clic gauche de la souris enfoncé sur l’élément choisi et de le déposer dans la zone désirée, puis de relacher le clic de la souris.

Import de .csv

Dans certaines situations, il est fastidieux de concevoir un par un une grande quantité d’items. Par exemple, dans le cas d’un annuaire, d’une liste de sites ou autres. Il est alors possible d’automatiser la conception de plusieurs items en une fois grâce à la fonction « Import .csv ». Le pré-requis à ne pas négliger est d’avoir à disposition un fichier excel parfaitement conçu et parfaitement clean. Dans l’exemple ci-dessous, nous allons créer un annuaire simple sous un tableur (excel, openoffice, numbers, peu importe).

.csv

L’étape d’après consiste à exporter ce tableau en fichier .csv. Sous Excel, il faut faire « enregistrer sous » et sélectionner le format .csv.

Retournez sur le manager et glissez, déposez un item view. Puis rentrez à l’intérieur de l’item view en cliquant sur la picto « view » à droite.

Cliquez ensuite sur la roue crantée qui vous permettra d’importer votre fichier .csv

Import CSV

Cliquez sur « Parcourir les fichiers » puis sélectionnez le fichier .csv que vous avez préparé en amont. Si l’import s’est bien passé, vous devriez obtenir l’écran ci dessous.

Ecran après import

Vous pouvez choisir l’option de supprimer les éléments existants si vous faîtes une mise à jour complète de votre vue. (dans notre cas de figure, c’est un premier import, la vue est vide, le choix n’aura aucun impact).

La seconde option est subtile. Il s’agit de déterminer le parcours de l’utilisateur pour accéder aux contenus.

Configuration import .csv

Lorsque vous cliquez sur suivant, vous accédez à la vue ci dessus. Cette vue permet de paramétrer la structure de la fiche finale. Chaque colonne de votre tableau Excel est exploitable. Dans cette exemple nous souhaitons que les éléments suivants soient afficher de haut en bas avec les caractéristiques suivantes :

  1. que le nom soit affichée en titre
  2. que la fonction soit affichée en texte
  3. que le téléphone permette à l’utilisateur d’envoyer un SMS
  4. que l’Email permette à l’utilisateur d’envoyer un email

Cliquez ensuite sur « Lancer l’import »

Vous pouvez cliquer sur une fiche de votre choix, vous retrouverez la vue ci-dessous :

Exemple Annuaire

Vous noterez que l’on retrouve le fil d’Ariane, c’est à dire le parcours utilisateur. Testez directement sur smartphone ou tablette pour valider le bon fonctionnement.


Étape suivante : V.Design