Bien commencer avec la technologie Frogans (Version FSDL : 3.0)

Qu'est ce que Frogans

La technologie Frogans permet la création de site Frogans. Il est possible de faire le paralléle avec la technologie HTML, utilisée pour créer des site web.

Frogans est basé sur le XML et utilise donc un système de balises pour créer des éléments dans les pages (appelées "slides").

Les slides Frogans sont des documents "FSDL" : FROGANS SLIDE DESCRIPTION LANGUAGE utilisant l'extension ".fsdl".

Ci-contre un exemple basique de slide Frogans.
exemple de slide frogans

Concepts clefs

  1. Les slides affichés dans le canvas disposent de dimensions fixes de 640 * 480 pixels.
  2. Chaque pixel est représenté par 32 bits :
    • 8 pour le rouge
    • 8 pour le vert
    • 8 pour le bleu
    • 8 pour la transparence
  3. Les pixels sont visibles dans les slides et disposent de coordonnées x,y.
    Les coordonnées 0,0 représentent le pixel en haut à gauche du slide.
    Les coordonées 639,479 représentent le pixel en bas à droite du slide.
  4. Des éléments peuvent être positionnés en dehors du slide affiché à l'écran.
  5. Chaque slide dispose de deux affichages possibles (attribut "leapout") dépendant de sa dimension (pouvant être réduite par l'utilisateur) :
    • Affichage principal ("lead representation") : affiche le slide en grande version si la dimension est comprise 100% et 50%.
    • Affichage sous forme de vignette : affiche le slide en version réduite si la dimension est comprise 50% et 25%.
  6. Les slides disposent de layers superposés (tel un logiciel de dessin)
  7. La résolution des slides est définie en fonction de celle du canvas. Le player Frogans s'adapte automatiquement à l'écran utilisé par l'utilisateur et affiche le slide selon une échelle allant de 50 à 200% de sa taille (en fonction du matériel et des préférences utilisateur).
    Le développeur peut néanmoins décider de désactiver ce facteur d'affichage.

Installations

Un navigateur spécifique doit être installé pour lire et programmer des sites Frogans. Celui-ci ne peut-être téléchargé que sur le site officiel disponible à l'adresse : https://get.frogans/fr/main.html
Après téléchargement, vous obtiendrez un dossier zip ; il faudra l'extraire à l'endroit choisit sur l'ordinateur.
Le dossier décompressé contient plusieurs documents dont les principaux sont :
  • frogansplayer.exe : fichier exécutable permettant d'utiliser le navigateur Frogans
  • configuration-for-testing.xml : fichier permettant de faire le paramétrage des sites Frogans exécutables localement sur l'ordinateur
  • dossier test : contient le site de test "helloworld" permettant une prise en main plus aisée de la technologie Frogans/

Ouvrir un site Frogans

Les sites Frogans disposent d'une adresse ayant la forme domaine*nomDuSite
Une fois le lecteur "frogansplayer.exe" ouvert, il suffit de faire un clic droit sur l'îcone du navigateur, puis un clic gauche sur "open a Frogans site" et enfin, renseigner l'adresse concernée (exemple : "test*helloworld")
le player frogans

Programmer un site Frogans

Les développeurs de site Frogans devront paramétrer le fichier "configuration-for-testing.xml" pour travailler en local.
La mise en ligne d'un site Frogans devra être effectuée en prenant un hébergement et un nom de domain Frogans.

La configuration

Configuration d'un site sans serveur

Exemple et explication
Dans le fichier configuration-for-testing.xml :
configuration site local frogans sans serveur
Code source :
<!-- SANS SERVEUR -->
<test-frogans-site address='test*h2p'>
    <frogans-site-root-directory>
        <ucsr-path network='FS'>
            <folder>./test/h2prog-v1</folder>
        </ucsr-path>
    </frogans-site-root-directory>
    <fsdl-documents>
        <version>3.0</version>
        <encoding>UTF-8</encoding>
    </fsdl-documents>
    <home-slide-file>/home.fsdl</home-slide-file>
</test-frogans-site>

Configuration d'un site avec serveur local

Exemple et explication
Dans le fichier configuration-for-testing.xml :
configuration site frogans avec serveur local
Code source :
<!-- SERVEUR LOCAL PHP -->
<test-frogans-site address='test*h2proglocal'>
    <frogans-site-root-directory>
        <ucsr-path network='IP_DNS_TCP_HTTP'>
            <location>loopback</location>
            <domain-name>localhost</domain-name>
            <port>80</port>
            <directory>/frogans/h2prog</directory>
        </ucsr-path>
    </frogans-site-root-directory>
    <fsdl-documents>
        <version>3.0</version>
        <encoding>UTF-8</encoding>
    </fsdl-documents>
    <home-slide-file>/home.php</home-slide-file>
</test-frogans-site>

Configuration d'un site avec serveur en ligne (avec ajout manuel dans le Frogans player : non référencé par Frogans)

Le site est présent sur un serveur en ligne, mais n'a pas été déclaré à Frogans et ne dispose pas de nom de domaine.
Ce type de configuration doit avoir un usage temporaire à des fins de test pour les développeurs.
Pour une mise en ligne complète, un nom de domaine devra être demandé auprès d'un organisme agréé Frogans.

Dans le fichier configuration-for-testing.xml :
configuration site frogans avec serveur en ligne
Code source :
<!-- SERVEUR EN LIGNE PHP -->
<test-frogans-site address='test*h2prog'>
    <frogans-site-root-directory>
        <ucsr-path network='IP_DNS_TCP_HTTP'>
            <location>public</location>
            <domain-name>dev.h2prog.com</domain-name>
            <port>80</port>
            <directory>/frogans/h2prog</directory>
        </ucsr-path>
    </frogans-site-root-directory>
    <fsdl-documents>
        <version>3.0</version>
        <encoding>UTF-8</encoding>
    </fsdl-documents>
    <home-slide-file>/home.php</home-slide-file>
</test-frogans-site>

Configuration d'un site avec serveur en ligne (référencé par Frogans)

La configuration du site doit être effectuée avec ou par l'hébergeur du site.

Le fonctionnement d'un site Frogans

  • Un site Frogans est composé de fichiers portant l'extension ".fsdl" correspondant aux slides.
  • Des fichiers auxiliaires peuvent être utilisés comme des images. (taille max : 1024px * 1024px)
  • Les fichiers vidéo ou audio ne sont pas utilisables.
  • Le fichier de configuration permet de définir la page d'accueil du site Frogans.
  • Le langage FSDL, basé sur XML, utilise un système de balises dont la liste est détaillée dans la partie "documentation".
  • Un slide Frogans contient une liste de balises et de documents auxiliaires.
  • Un site Frogans peut être généré par un langage de programmation back-end comme PHP, Node.JS ou autre.

Exemple de slide Frogans

premiere slide Frogans
code source :
<?xml version='1.0' encoding='utf-8'?>

<frogans-fsdl version='3.0'>

    <resdraw resid='resdraw1' size='560,400' figure='roundrect' stroke='off' round='100,100' color='#002f66' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='0,0' opacity='75' combine='add' />

    <setfont fontid='setfont1'>
        <font scripts='default' pfont='112-2-sans-r' height='40' color='#ffffff' />
    </setfont>
    <restext resid='restext1' size='480,255' orientation='h-ttb-ltr' fontref='setfont1' talign='center'>
        <text>Hello World!</text>
    </restext>
    <layer layerid='layer2' leapout='all' resref='restext1' pos='240,160' opacity='100' combine='add' />
    
</frogans-fsdl>

Apprendre Frogans

H2PROG propose plusieurs formations en autonomie et en vidéo pour apprendre la technologie Frogans :
  1. Créer son premier site Frogans - Formation gratuite !
  2. La technologie Frogans : le cours (et exercices) - A venir
  3. Créer un site Frogans complet - A venir
  4. Créer un site Frogans avec back-end PHP - A venir
Des tutoriels sur la chaîne Youtube H2PROG sont également disponibles. A venir