Formation Frogans : apprendre à créer son premier site FSDL

Installer le player Frogans depuis le site officiel : https://get.frogans/fr/main.html
Configurer le fichier "Configuration-for-testing.xml" présent dans le dossier du player Frogans décompressé
Créer le dossier "projets" et ajouter le sous-dossier "monCV"
Ajouter le dossier "monCV" dans l'environnement de développement (Visual Studio Code par exemple)
Créer le fichier "accueil.fsdl" dans le dossier "monCV"

Documentation : Installation du player Frogans | Configuration site Frogans

Les fichiers "FSDL" doivent contenir la ligne permettant la description de la version xml du document et de la balise "frogans-fsdl".
Un slide Frogans ne peut s'afficher que si suffisamment de pixels sont remplis.

Pour ouvrir le slide "accueil.fsdl", écrire l'instruction permettant de dessiner une forme géométrique rectangulaire (arrondie sur les bords).

Code source :

<?xml version='1.0' encoding='utf-8'?>

<frogans-fsdl version='3.0'>
    <resdraw resid='resdraw1' size='640,480' figure='roundrect' stroke='off' color='#AAAAAA' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='0,0' opacity='100' combine='add' />
</frogans-fsdl>

Lancer le player Frogans et ouvrir le site "test*moncv"

Documentation : Ouvrir le player Frogans | Exemple de slide

Etape 1 : Resdraw (forme géométrique - Frogans FSDL)

Transformer le "resdraw" en ellipse (attribut "figure"), modifier la taille (attributs "size"), la position (attribut "pos" de l'élément "layer") et la couleur (attribut "color"), ajouter enfin un effet d’ombre de couleur blanche (éléments "setshadow" et "shadow").
L'attribut "shadowref" de l'élément "layer" permet d'ajouter un élément "setshadow" sur le "resdraw".

Code source :

<frogans-fsdl version='3.0'>
    <setshadow shadowid='shadow1'>
        <shadow rpos='10,10' color='#ffffff'/>
    </setshadow>
    <resdraw resid='resdraw1' size='620,460' figure='ellipse' stroke='off' color='#1490D7' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='10,10'  opacity='100' combine='add' shadowref='shadow1' />
</frogans-fsdl>

Documentation : Resdraw | setshadow

Etape 2 : resimage (image - Frogans FSDL)

Télécharger l'image du chat (licence CCO) disponible sur le site pixabay ou ci-dessous (faire un clic droit sur l'image, puis "enregistrer l'image sous...")

Ajouter l'image dans le dossier moncv/images

Ajouter l'élément "resimage" au code FSDL et un effet de relief (élément "setrelief") :
L'ajout d'une image dans un slide FSDL s'effectue en plusieurs étapes : élément "file" --> élément "resimage" --> élément "layer"
Le relief est ajouté à l'image grâce à l'attribut "reliefref" du layer.

Code source (à intégrer en dessous du code précédent - avant la fermeture de la balise frogans-fsdl):

<setrelief reliefid='relief1'>
    <relief rpos='10,10' color = '#000000' />
    <relief rpos='-10,-10' color = '#000000' />
</setrelief>
<file fileid='file1' nature='static' name='/images/chat.jpg'/>
<resimage resid='resimage1' size='230,150' fileref='file1' aspect='spread'/>
<layer layerid='layer2' leapout='all' resref='resimage1' pos='0,0' combine='add' align='left-top' reliefref='relief1'/>

Réutilisation du relief sur le "resdraw" ellipse :
Il faut déplacer l'élément "setrelief" au dessus du layer 1. Ajouter ensuite l'effet au layer (attribut "reliefref").

Code source complet :

<?xml version='1.0' encoding='utf-8'?>
<frogans-fsdl version='3.0'>
    <setrelief reliefid='relief1'>
        <relief rpos='10,10' color = '#000000' />
        <relief rpos='-10,-10' color = '#000000' />
    </setrelief>
    <setshadow shadowid='shadow1'>
        <shadow rpos='10,10' color='#ffffff'/>
    </setshadow>
    <resdraw resid='resdraw1' size='620,460' figure='ellipse' stroke='off' color='#1490D7' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='10,10'  opacity='100' combine='add' shadowref='shadow1' reliefref='relief1' />
    
    <file fileid='file1' nature='static' name='/images/chat.jpg'/>
    <resimage resid='resimage1' size='230,150' fileref='file1' aspect='spread'/>
    <layer layerid='layer2' leapout='all' resref='resimage1' pos='0,0' combine='add' align='left-top' reliefref='relief1'/>
</frogans-fsdl>

Documentation : file | resimage | setrelief

Etape 3 : restext (texte - Frogans FSDL)

Pour écrire un texte sur un slide, il faut utiliser obligatoirement les éléments "restext", "text", "setfont" et "font".
L'élément setshadow est utilisé pour ajouter un effet d'ombre sur le texte.

Code source (à intégrer en dessous du code précédent - avant la fermeture de la balise frogans-fsdl):

<setshadow shadowid='shadow2'>
    <shadow rpos='2,2' color='#000000'/>
</setshadow>
<setfont fontid='setfont1'>
    <font scripts='default' pfont='112-2-sans-r' height='15' color='#ffffff' underline='on'/>
</setfont>
<restext resid='restext1' size='400,80' orientation='h-ttb-ltr' fontref='setfont1'>
    <text>Matthieu GASTON</text>
</restext>
<layer layerid='layer3' leapout='all' resref='restext1' pos='250,70' combine='add' align='left-top' shadowref='shadow2'/>

Ajout d'un deuxième texte :

Utilisation d'un nouvel élément "setfont" ayant une taille différente. Réutilisation de l'ombre portant l'identifiant "shadow2".

Code source (à intégrer en dessous du code précédent - avant la fermeture de la balise frogans-fsdl):

<setfont fontid='setfont2'>
    <font scripts='default' pfont='112-2-sans-r' height='20' color='#ffffff'/>
</setfont>
<restext resid='restext2' size='600,300' orientation='h-ttb-ltr' fontref='setfont2'>
    <text>Formateur en Développement web</text>
</restext>
<layer layerid='layer4' leapout='all' resref='restext2' pos='50,170' combine='add' align='left-top' shadowref='shadow2'/>

Documentation : restext | setfont | setshadow

Etape 4 : Button (boutons et liens - Frogans FSDL)

Création d'un bouton de liens vers un site web
Un élément "button" peut contenir plusieurs éléments comme des textes ("restext") ou des formes géométriques ("resdraw").
Il doit intégrer obligatoirement un ou plusieurs éléments "layer".

Le bouton créé dans cet exemple, redirige vers un site web. Il dispose de deux "resdraw", chacun affiché en fonction du survol du bouton. Il dispose également d'un "restext".

Code source (à intégrer en dessous du code précédent - avant la fermeture de la balise frogans-fsdl):

<setfont fontid='setfont3'>
    <font scripts='default' pfont='112-2-sans-r' height='12' color='#ffffff'/>
</setfont>
<resdraw resid='resdraw2' size='200,70' figure='roundrect' stroke='off' color='#FF8000' />
<resdraw resid='resdraw3' size='200,70' figure='roundrect' stroke='off' color='#283645' />
<restext resid='restext3' size='200,70' orientation='h-ttb-ltr' fontref='setfont3' talign='center'>
    <text>Site Web</text>
</restext>
<button buttonid='button1' goto='way-out' uri='https://www.h2prog.com' >
    <layer layerid='layer7' leapout='lead' resref='resdraw2' align='left-top' pos='100,320' combine='clip' visible='not-selected' shadowref='shadow2'/>
    <layer layerid='layer8' leapout='lead' resref='resdraw3' align='left-top' pos='100,320' combine='clip' visible='selected' />
    <layer layerid='layer9' leapout='lead' resref='restext3' align='left-top' pos='100,335' combine='clip' visible='always'/>
</button>

Création d'un lien vers un slide Frogans
Utilisation d'un élément "file" pour définir la page pointée par le lien.

Créer le fichier page2.fsdl et ajouter le code de base nécessaire aux slides frogans (ainsi qu'un "resdraw")

Code source accueil.fsdl (à intégrer en dessous du code précédent - avant la fermeture de la balise frogans-fsdl):

<restext resid='restext4' size='200,70' orientation='h-ttb-ltr' fontref='setfont3' talign='center'>
    <text>Suivant</text>
</restext>
<file fileid='file2' nature='static' name='/page2.fsdl' />
<button buttonid='button2' goto='slide' fileref='file2' >
    <layer layerid='layer10' leapout='lead' resref='resdraw2' align='left-top' pos='330,320' combine='clip' visible='not-selected' shadowref='shadow2'/>
    <layer layerid='layer11' leapout='lead' resref='resdraw3' align='left-top' pos='330,320' combine='clip' visible='selected' />
    <layer layerid='layer12' leapout='lead' resref='restext4' align='left-top' pos='330,335' combine='clip' visible='always'/>
</button>

Code source page2.fsdl

<?xml version='1.0' encoding='utf-8'?>
<frogans-fsdl version='3.0'>
    <resdraw resid='resdraw1' size='640,480' figure='roundrect' stroke='off' color='#AAAAAA' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='0,0' opacity='100' combine='add' />
</frogans-fsdl>

Code source complet accueil.fsdl

<?xml version='1.0' encoding='utf-8'?>
<frogans-fsdl version='3.0'>
    <setrelief reliefid='relief1'>
        <relief rpos='10,10' color = '#000000' />
        <relief rpos='-10,-10' color = '#000000' />
    </setrelief>
    <setshadow shadowid='shadow1'>
        <shadow rpos='10,10' color='#ffffff'/>
    </setshadow>
    <resdraw resid='resdraw1' size='620,460' figure='ellipse' stroke='off' color='#1490D7' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='10,10'  opacity='100' combine='add' shadowref='shadow1' reliefref='relief1' />
    
    <file fileid='file1' nature='static' name='/images/chat.jpg'/>
    <resimage resid='resimage1' size='230,150' fileref='file1' aspect='spread'/>
    <layer layerid='layer2' leapout='all' resref='resimage1' pos='0,0' combine='add' align='left-top' reliefref='relief1'/>

    <setshadow shadowid='shadow2'>
        <shadow rpos='2,2' color='#000000'/>
    </setshadow>
    <setfont fontid='setfont1'>
        <font scripts='default' pfont='112-2-sans-r' height='15' color='#ffffff' underline='on'/>
    </setfont>
    <restext resid='restext1' size='400,80' orientation='h-ttb-ltr' fontref='setfont1'>
        <text>Matthieu GASTON</text>
    </restext>
    <layer layerid='layer3' leapout='all' resref='restext1' pos='250,70' combine='add' align='left-top' shadowref='shadow2'/>

    <setfont fontid='setfont2'>
        <font scripts='default' pfont='112-2-sans-r' height='20' color='#ffffff'/>
    </setfont>
    <restext resid='restext2' size='600,300' orientation='h-ttb-ltr' fontref='setfont2'>
        <text>Formateur en Développement web</text>
    </restext>
    <layer layerid='layer4' leapout='all' resref='restext2' pos='50,170' combine='add' align='left-top' shadowref='shadow2'/>

    <setfont fontid='setfont3'>
        <font scripts='default' pfont='112-2-sans-r' height='12' color='#ffffff'/>
    </setfont>
    <resdraw resid='resdraw2' size='200,70' figure='roundrect' stroke='off' color='#FF8000' />
    <resdraw resid='resdraw3' size='200,70' figure='roundrect' stroke='off' color='#283645' />
    <restext resid='restext3' size='200,70' orientation='h-ttb-ltr' fontref='setfont3' talign='center'>
        <text>Site Web</text>
    </restext>
    <button buttonid='button1' goto='way-out' uri='https://www.h2prog.com' >
        <layer layerid='layer7' leapout='lead' resref='resdraw2' align='left-top' pos='100,320' combine='clip' visible='not-selected' shadowref='shadow2'/>
        <layer layerid='layer8' leapout='lead' resref='resdraw3' align='left-top' pos='100,320' combine='clip' visible='selected' />
        <layer layerid='layer9' leapout='lead' resref='restext3' align='left-top' pos='100,335' combine='clip' visible='always'/>
    </button>

    <restext resid='restext4' size='200,70' orientation='h-ttb-ltr' fontref='setfont3' talign='center'>
        <text>Suivant</text>
    </restext>
    <file fileid='file2' nature='static' name='/page2.fsdl' />
    <button buttonid='button2' goto='slide' fileref='file2' >
        <layer layerid='layer10' leapout='lead' resref='resdraw2' align='left-top' pos='330,320' combine='clip' visible='not-selected' shadowref='shadow2'/>
        <layer layerid='layer11' leapout='lead' resref='resdraw3' align='left-top' pos='330,320' combine='clip' visible='selected' />
        <layer layerid='layer12' leapout='lead' resref='restext4' align='left-top' pos='330,335' combine='clip' visible='always'/>
    </button>
</frogans-fsdl>

Documentation : Button | restext | resdraw

Etape 5 : Exercice - Créer un deuxième slide (Frogans FSDL)

Sujet :

Créer le deuxième slide Frogans "page2.fsdl" correspondant à l'image ci-dessous. Le bouton "retour" permet de revenir sur le slide "accueil.fsdl".

Correction :

Code source page2.fsdl

<?xml version='1.0' encoding='utf-8'?>

<frogans-fsdl version='3.0'>

    <resdraw resid='resdraw0' size='640,480' figure='rect' stroke='off' color='#ffffff' />
    <layer layerid='layer0' leapout='all' resref='resdraw0' align='left-top' pos='0,0'  opacity='100' combine='add'/>

    <setrelief reliefid='relief1'>
        <relief rpos='5,5' color = '#283645' />
        <relief rpos='-5,-5' color = '#283645' />
    </setrelief>
    <resdraw resid='resdraw1' size='310,230' figure='roundrect' stroke='off' color='#1490D7' />
    <layer layerid='layer1' leapout='all' resref='resdraw1' align='left-top' pos='5,5'  opacity='100' combine='add' reliefref='relief1'/>
    <layer layerid='layer2' leapout='all' resref='resdraw1' align='left-top' pos='325,5'  opacity='100' combine='add' reliefref='relief1'/>
    <layer layerid='layer3' leapout='all' resref='resdraw1' align='left-top' pos='5,245'  opacity='100' combine='add' reliefref='relief1'/>
    <layer layerid='layer4' leapout='all' resref='resdraw1' align='left-top' pos='325,245'  opacity='100' combine='add' reliefref='relief1'/>

    <setfont fontid='setfont1'>
        <font scripts='default' pfont='112-2-sans-r' height='12' color='#ffffff'/>
    </setfont>
    <restext resid='restext1' size='170,70' orientation='h-ttb-ltr' fontref='setfont1' talign='center'>
        <text>Retour</text>
    </restext>
    <resdraw resid='resdraw5' size='170,70' figure='roundrect' stroke='off' color='#FF8000' />
    <resdraw resid='resdraw6' size='170,70' figure='roundrect' stroke='off' color='#283645' />
    <file fileid='file1' nature='static' name='/accueil.fsdl' />
    <button buttonid='button2' goto='slide' fileref='file1' >
        <layer layerid='layer5' leapout='lead' resref='resdraw5' pos='320,240' combine='clip' visible='not-selected'/>
        <layer layerid='layer6' leapout='lead' resref='resdraw6' pos='320,240' combine='clip' visible='selected' />
        <layer layerid='layer7' leapout='lead' resref='restext1' pos='320,255' combine='clip' visible='always'/>
    </button>

    <restext resid='restext2' size='280,200' orientation='h-ttb-ltr' fontref='setfont1' talign='center'>
        <text>Diplomé de la MIAGE</text>
        <text>&#10;</text>
        <text>BAC + 5</text>
    </restext>
    <layer layerid='layer8' leapout='all' resref='restext2' align='left-top' pos='20,20'  opacity='100' combine='add'/>

        <restext resid='restext3' size='280,200' orientation='h-ttb-ltr' fontref='setfont1' talign='center'>
        <text>Entreprises :</text>
        <text>&#10;</text>
        <text>IBM</text>
        <text>CAPGEMINI</text>
        <text>CGI</text>
    </restext>
    <layer layerid='layer9' leapout='all' resref='restext3' align='left-top' pos='345,20'  opacity='100' combine='add'/>

    <restext resid='restext4' size='280,200' orientation='h-ttb-ltr' fontref='setfont1' talign='center'>
        <text>Compétences :</text>
        <text>&#10;</text>
        <text>FSDL</text>
        <text join='space'>HTML</text>
        <text join='space'>CSS</text>
        <text join='space'>PHP</text>
        <text join='space'>JavaScript</text>
    </restext>
    <layer layerid='layer10' leapout='all' resref='restext4' align='left-top' pos='20,275'  opacity='100' combine='add'/>

    <restext resid='restext5' size='280,200' orientation='h-ttb-ltr' fontref='setfont1' talign='center'>
        <text>Passions :</text>
        <text>&#10;</text>
        <text>Protection annimale</text>
        <text>Guitare</text>
    </restext>
    <layer layerid='layer11' leapout='all' resref='restext5' align='left-top' pos='345,275'  opacity='100' combine='add'/>
    
</frogans-fsdl>

Créer son premier site Frogans FSDL (Version FSDL : 3.0)

La formation en vidéo :

Configuration du site Frogans FSDL

Débuter la programmation du site Frogans FSDL

Page d'accueil Frogans FSDL

Etape 1 : Resdraw (forme géométrique - Frogans FSDL)

Etape 2 : resimage (image - Frogans FSDL)

Etape 3 : restext (texte - Frogans FSDL)

Etape 4 : Button (boutons et liens - Frogans FSDL)

Etape 5 : Exercice - Créer un deuxième slide (Frogans FSDL)