• Lancement de WEBDEV.

	Durée estimée : 5 mn

• des sites Internet/Intranet statiques. Ces sites gèrent des données qui ne varient pas (site vitrine d'une société, etc.).
• des sites Internet/Intranet dynamiques, qui gèrent des données. Les sites WEBDEV accèdent à toutes les bases de données, relationnelles ou non, du marché.

• Lancez WEBDEV 28 (si ce n'est déjà fait).

• Si vous n'avez jamais lancé WEBDEV 28, un assistant de bienvenue se lance :
  • Si vous possédiez une ancienne version de WEBDEV, cet assistant permet de récupérer les configurations existantes.
  • Si vous êtes nouvel utilisateur, cet assistant permet de paramétrer votre environnement. Vous pouvez ainsi choisir la configuration écran utilisée et paramétrer les Centres de Contrôle.

• Si vous avez déjà lancé WEBDEV 28, identifiez-vous si nécessaire. L'environnement de développement se lance. La page d'accueil de WEBDEV apparaît.
  
  Cette page d'accueil permet de :
  • afficher les actualités,
  • créer un projet,
  • ouvrir un projet existant,
  • ouvrir un exemple,
  • ouvrir un des projets du tutoriel.

• Arrêtons-nous un instant sur l'environnement de développement de WEBDEV. Pour cela, depuis la page d'accueil de WEBDEV :
  • Cliquez sur "Tutoriel".
  • Dans la zone "Partie 1 - Leçon 1.1 - Découvrez WEBDEV", double-cliquez sur "Site WEBDEV Complet (Corrigé)".
    
  • Le projet correspondant s'ouvre sous l'éditeur. Le tableau de bord du projet est affiché. Le tableau de bord permet d'avoir une vision globale et synthétique de l'état d'avancement d'un projet, via de nombreux éléments (appelés Widgets).
    

L'éditeur

• Pour découvrir WEBDEV, nous allons ouvrir la page permettant de lister les produits :
  1. Utilisez la combinaison de touches Ctrl + E.
  2. Dans la fenêtre qui s'affiche, saisissez le nom de la page à ouvrir : PAGE_Liste_des_produits.
  3. Validez. La page apparaît sous l'éditeur.

Tous les éditeurs utilisent le même environnement :

1. Menu des éditeurs, affiché sous forme de ruban (nous allons voir sa manipulation dans le paragraphe suivant).
2. Editeur en cours (ici, éditeur de pages). Cet espace permet de visualiser de manière WYSIWYG (What You See Is What You Get) l'élément en cours de création ou de modification.
3. Volets. L'interface de WEBDEV dispose de plusieurs volets (horizontaux et verticaux) permettant d'accéder rapidement à différents types d'informations.
   Quelques exemples :
   • Le volet "Explorateur de projet" (ici, affiché à gauche) permet de lister tous les éléments du projet par catégorie.
   • Le volet "Rechercher - Remplacer" (ici, affiché en bas) permet d'effectuer rapidement des recherches dans votre projet.
   Si nécessaire, ces volets peuvent être cachés rapidement en utilisant la combinaison de touches Ctrl + W.
4. Barre des documents ouverts. Cette barre permet de visualiser rapidement tous les éléments ouverts. Un simple clic sur le bouton correspondant à l'élément l'affiche dans son propre éditeur.

La barre de menu (ruban) en détail

Nous allons détailler ici, les différents éléments importants du ruban, ainsi que la manière dont nous le manipulerons dans ce cours.

Les différents éléments du ruban

• la zone des boutons, à gauche (1).
• la zone des volets en haut (2).
• la zone des options (3).

	La zone des boutons regroupe principalement les boutons d'accès rapide. Ces boutons permettent d'effectuer les opérations les plus courantes, bien souvent communes à tous les éditeurs : enregistrer, ouvrir, créer, etc. Le logo du produit permet d'afficher notamment la fenêtre "A propos".

• le volet en cours : Le nom du volet apparaît en gras et un trait bleu est affiché sous le nom du volet.
• les volets contextuels, spécifiques à l'élément en cours : Le nom du volet est affiché en bleu.
• les volets disponibles : Le nom du volet apparaît en blanc (ou en noir en utilisant le thème clair).

La zone des options (3)

En fonction du volet sélectionné, les options affichées dans le ruban diffèrent. Plusieurs types d'options sont disponibles :

• Options à cocher,
• Boutons à cliquer,
• Boutons à flèche permettant de dérouler des options. Deux types de boutons à flèche sont disponibles :
  • les boutons à flèche permettant uniquement de dérouler un menu,
  • les boutons à flèche permettant soit de dérouler un menu (clic sur la flèche), soit d'effectuer une action par défaut (clic sur l'icône du bouton).

Les options de l'environnement

• Thème : Par défaut, l'environnement utilise un thème sombre. Cependant plusieurs thèmes sont disponibles :
  • Thème clair, ruban gris. Dans ce mode, la barre de menu n'est plus colorée : elle est grise.
  • Thème gris. Dans ce mode, l'environnement et les différentes fenêtres de l'interface sont affichés sur fond gris clair.
  • Thème sombre. Dans ce mode, l'environnement et les différentes fenêtres de l'interface sont affichés sur fond noir ou gris foncé.
• Langue : Par défaut, la langue de l'environnement est en Français. Il est possible d'afficher l'environnement en Anglais ou Espagnol.
• Volet : Par défaut, certains volets sont affichés dans l'environnement (volet "Explorateur de projet", ...). Il est possible de choisir les volets affichés ainsi que leur positionnement.

• Pour continuer ce tutoriel, nous allons fermer le projet en cours :
  1. Sous le volet "Accueil", dans le groupe "Général", déroulez "Fermer" et sélectionnez "Fermer le projet".
  2. Validez la sauvegarde des éléments modifiés si nécessaire.
  3. La page d'accueil de WEBDEV apparaît.