Edweb2.0 est un environnement d’éditique professionnel qui permet de créer facilement des pages et des documents web grâce à des mashups et des API ouvertes. Il propose une interface utilisateur intuitive avec une collection d'objets personnalisables pour construire des pages variées adaptées à des applications comme le e-learning et le e-commerce. L'outil est disponible en open source, permettant aux développeurs d'enrichir ses fonctionnalités.

1. Environnement d’Éditique Professionnel Louis Villardier Pierre Van Heddeghem Patrick Gagnon Télé-université-Université de Strasbourg 2006 ÉdWeb2.0 EDWeb2.0 Guide de l’utilisateur

2. Visite guidée Présentation du produit Page d’accueil Comment s’inscrire Création de votre profil utilisateur Interface standard Barre des menus Barre des icônes Palette d’Objets Fonds d’Écran Options avancées Exemples de pages Web Pour nous rejoindre

3. Présentation du produit EDWEB2.0 est un environnement d’éditique professionnel complet qui permet de créer rapidement et simplement des pages et des documents Web. Concept de Mashups Il repose sur le concept novateur d’applications Web composites ( Mashups ). L’une des caractéristiques principales des Mashups est la mise en place d’APIs ouverts qui permettent à chacun d’extraire le contenu d’un site source pour l’intégrer dans un site cible afin de proposer un nouveau service. Il repose sur l’utilisation des technologies du Web 2.0 MLHttpRequest, XML, AJAX du côté client et des Web Services pour créer un environnement riche qui permet un remix d’autres services et contenus Web provenant d’autres applications Web. Mode d’emploi Pour l’usager, le mode d’emploi est très simple: À partir d’un choix de modèles de pages préprogrammés, l’usager sélectionne dans une palette d’objets les objets qu'il veut voir figurer sur sa page Web (titre, logo, photo, message déroulant, traitement de texte, tableur, menu déroulant, Mp3, Vidéo, Calendrier, etc.). La nouveauté est que chaque objet sélectionné possède ses propres fonctionnalités, ce qui permet à l’usager de paramétrer directement le contenu selon les paramètres retenus par lui. EDWEB2.0 offre aussi une bibliothèque de fonds d’écran où l’usager peut ajouter ses fonds d’écran personnels. La fonction aperçu permet de visualiser la page écran créée avant de la sauvegarder sur le Web. Naturellement, l’usager a toujours la possibilité de modifier sa page en la rappelant simplement. Domaine d’applications EDWEB2.0 permet de configurer rapidement et simplement de nouveaux services d’éditique professionnels: création de pages Web, de modèles de journaux, de revues, de guides, création de sites Web, de blogs, d’intranet. Cet outil d’éditique trouve des applications dans des domaines aussi variés que ceux du e-Learning, du e-commerce, du télémarketing, du e-gouvernement, intranet, blogs, Wiki. Licence EDWEB2.0 est offert en licence open source afin de permettre à la communauté des développeurs Web 2.0 d’ajouter de nouveaux objets et ainsi d’enrichir la palette d’objets d’OSLO de nouvelles fonctionnalités.

4. Page d’accueil

5. Comment s’inscrire La première fois que vous vous connectez à l’application, il vous faut vous inscrire comme un nouvel utilisateur. Pour se faire, cliquez sur le bouton S’inscrire . Ce bouton vous envoie directement à la page de votre profil utilisateur. Si vous vous êtes préalablement inscrit, vous pouvez vous connecter en remplissant les champs Nom d’utilisateur et Mot de Passe .

6. Création de votre profil d’utilisateur Procédure d’inscription: Tous ces champs sont obligatoires pour pouvoir s’inscrire. Votre adresse E-mail nous permet de communiquer avec vous et de vous envoyer votre mot de passe si vous l’avez oublié. Le mot de passe qui vous sera envoyé correspond à celui que vous avez enregistré en répondant à la Question de Sécurité. Après avoir rempli tous les champs, cliquez sur le bouton Créer le profil pour vous connecter à l’application.

7. Interface standard Cette figure représente L’interface de travail. Elle se divise en deux zones: La zone des menus et des icônes ; La zone de travail où vous allez déposer vos objets. Vous pouvez sélectionner dans la zone de travail différents modèles préprogrammés de pages Web. Zone des menus Zone de travail

8. Barres des menus et des Icônes On retrouve la barre des Menus e n haut. En bas, les différents Icônes qui permettent d’accéder directement aux fonctionnalités. Barre des menus Cette barre présente quatre menus : Page Objets Fond d’écran Options avancées Les options accessibles par ces menus sont détaillés plus loin dans ce guide.

9. Le menu Pages et ses sous-menus Menu Page Ce menu déroulant vous permet d’accéder à toutes les fonctionnalités de votre page Web. Il suffit de cliquer sur le sous-menu de votre choix pour exécuter l’action correspondante. Sous-menu Nouvelle Page Appelle une nouvelle page sur le modèle actuel, c’est une remise a zéro de tous les objets .

10. Le menu Pages et ses sous-menus suite Sous-menu Modèle Ce sous-menu vous amène à la page des modèles pré-édités de pages Web. Cliquez sur celui de votre choix Ces modèles présentent une visualisation de l’aspect de la page sélectionnée et les zones dans lesquelles vous pourrez importer les objets. Modèle à une zone Modèle à deux zones Modèle à trois zones

11. Le menu Pages et ses sous-menus suite Sous-menu Existante Permet d’appeler une page enregistrée dans votre espace personnel pour en modifier le contenu et/ou l’apparence.

12. Le menu Pages et ses sous-menus suite Sous-menu Migrer Vers Ce sous-menu permet de changer de modèle de page Web sans perdre votre contenu. Vous pouvez à tout moment déplacer les objets d’une zone à une autre avec un simple drag and drop sur l’objet à déplacer. Le document et son contenu va se réajuster automatiquement.

13. Le menu Pages et ses sous-menus suite Sous-menu Enregistrer Permet d’enregistrer sur le serveur d’hébergement les modifications apportées à vos pages Web en conservant son nom original. Sous-menu Enregistrer sous Permet d’enregistrer sur le serveur d’hébergement vos pages Web modifiés en les renommant.

14. Le menu Pages et ses sous-menus suite Sous-menu Aperçu Permet de visualiser votre page telle qu’elle sera enregistrée au format HTML. Sous-menu Renommer Fonctionnalité en développement : Donnez un autre nom à votre page. Sous-menu Supprimer Supprime la page que vous ne souhaitez plus voir figurer dans votre espace personnel. Sous- menu Envoyer vers Permet de sauvegarder votre page personnelle sur le serveur qui héberge vos pages.

15. Le menu Pages et ses sous-menus suite Sous-menu Imprimer Imprimez votre page telle qu’elle sera au format HTML sur le Web. Sous-menu Propriétés Permet d’ ajouter des références à votre document (META DONNÉES) telles que: nom de l’auteur, mot clés, la date de création, version, etc. Ces renseignements serviront pour référencier vos documents par les moteurs de recherche. Sous-menu Fermer Permet de Fermer la page active et d’accéder à la page Accueil . Sous- menu Quitter Met fin à une séance de travail en fermant l’application.

16. La Barre des Icônes Nouvelle page Existante Enregistrer Aperçu Design Imprimante Palette d’Objets Fonds d’Écran Options avancées Les icônes sont des raccourcis vers les fonctionnalités principales présentées dans les menus de la Barre des menus. En cliquant directement dessous vous accéder aux fonctionnalités de l’objets .

17. Palette d’Objets Ce menu vous permet de sélectionner un des objets fournit avec la palette. En cliquant sur la case de l’objet, l’objet va s’afficher. Pour déplacer l’objet sur une zone, il vous suffit de faire un glisser/déposer avec votre souris. Rappel Chaque objet possède ses propres fonctions qui permettent de paramétrer l’action de celui-ci.

18. Fonds d’Écran Bibliothèque * Vous permet d’accéder à une riche bibliothèque de fonds d’écran présélectionnés. Cliquez sur le fond d’écran de votre choix pour le voir s’afficher sur votre page Web Importer * Ce sous-menu permet d’importer des fonds d’écran pour ajouter à votre bibliothèque personnelle. *Option en développement

19. Options avancées Ce mode est « réservé » aux utilisateurs expérimentés. Il renferme une série d’options supplémentaires qui permettent de paramétrer un objet et son apparence. Remarque Dans cette première version du guide, l’édition avancée ne sera pas détaillée.

20. Le design de pages Ce mode vous permet de déplacer les objets d’une zone à l’autre d’un modèle. Voici un exemple de zone: C’est une zone vierge, il n’y a pas d’objet dedans. Lorsque vous voulez ajouter un objet dans la zone, le contour devient rouge et une barre apparaît. Ici, par exemple, on glisse l’objet courriel de la Zone H vers la zone Logo.

21. Les fonctionnalités des Objets Dans cette partie du guide, tous les objets présents dans l’application vont être détaillés et leurs fonctionnalités expliquées. Prenons comme exemple l’objet courriel C’est le nom de l’objet (1); En cliquant sur cette barre (2) et en maintenant le clic, vous pourrez déplacer l’objet de zone en zone; Minimiser l’objet (3): Permet de garder uniquement la barre; Cacher l’objet (4): l’objet n’est pas totalement supprimé, il peut être ouvert ultérieurement dans le mode ajout d’objet grâce à la fonctionnalité objets cachés ; Supprimer l’objet (5): Ce bouton permet de complètement supprimer l’objet, attention il ne sera plus récupérable par la suite. À noter : Cet icône change et en cliquant à nouveau dessus, l’objet s’ouvre à nouveau. 3 4 5

22. Exemples de pages Web

23. L’ Objet – Calendrier Affiche le calendrier avec ses options. Options Affiche le mois courant Affiche la journée Permet de sélectionner un autre mois.

24. L’ Objet – Image Options (1) Importer une image (2) Nom de l’image (3) Taille de l’image (4) Le titre donné à l’image (5) L’image Il y a deux méthodes pour afficher une image. Si vous n'avez pas encore chargé l’image dans votre espace de travail: Cliquez sur le menu Parcourir pour accéder à votre répertoire d’images sur votre ordinateur suite….

25. L’ Objet – Image suite Sélectionnez la photo en cliquant sur le bouton Ouvrir pour importer l’image sélectionnée dans votre espace de travail; Appuyez sur le bouton Importer une image pour la voir s’afficher dans votre espace de travail.

26. L’ Objet – Image Si l’image se trouve déjà dans votre espace de travail, inutile de la charger à nouveau, il vous suffit de cliquez sur la liste déroulante et de sélectionner la photo voulue. Cette dernière s’affichera alors. Vous avez la possibilité de modifier la taille de l’ image grâce à une liste qui vous propose différentes résolutions. Le format proposé est le 4:3 mais il y a cependant un format 16:10 (1280 :800).

27. L’ Objet – Galerie d’images L’objet Galerie permet de présenter une suite d’images dont la disposition dépend de l’espace disponible. Procédure Sélectionnez l’image en cliquant sur le bouton Parcourir pour accéder à votre répertoire d’images sur votre ordinateur; Cliquez sur le bouton Upload pour télécharger l’image sélectionnée sur votre espace de travail; Répétez ces actions pour chacune des images de votre galerie. Notez que la disposition des photos est gérée automatiquement par l’application, en fonction de l’espace disponible sur la page alors la disposition des images peut être horizontale ou verticale.

28. L’ Objet – Logo L’objet Logo est une image de taille réduite. Il représente en général l’identifiant d’un produit, la marque de commerce ou le logo de la compagnie. Procédure Pour l’importer, vous procédez de la même façon que pour les images avec le menu Parcourir . Cliquez sur le bouton Upload pour le voir s’afficher sur votre page Web.

29. L’ Objet – MP3 & Vidéo Ces objets vous permettent de diffuser un contenu multimédia sur votre page Web. L’ajout d’une vidéo se déroule de la même manière que l’ajout d’une photo. Procédure Après avoir choisi votre vidéo à l’aide du menu P arcourir sur votre ordinateur ou un site Internet; Cliquez ensuite sur le bouton Upload pour que la vidéo s’affiche. Attention Le temps de chargement d’un vidéo dépend de sa taille et de la vitesse de votre lien Internet. Cela peut demander quelques minutes si la taille de votre vidéo est importante. 1 1

30. L’ Objet – Lien vers un site Web Cet objet vous permet de créer un lien vers un autre site (ou une simple page) hébergé sur Internet. (1) Entrez l’adresse du site ou de la page, puis cliquez sur le bouton valider le lien . (2) Le lien créé vers le site s’affiche. En cliquant dessus, vous pourrez vérifier directement si le lien est valide. Si ce n’est pas le cas, vous pourrez modifier le lien en corrigeant l’adresse du site. (2)

31. L’ Objet – Lien vers mes Pages Il est possible de mettre un lien vers une page ou un document de son espace personnel. Vous pouvez mettre en lien n’importe quel document de votre espace personnel. Le document va s’ouvrir dans le navigateur si c’est une page Web ou un fichier texte. Sinon, un téléchargement ou l’ouverture via le logiciel approprié sera proposé en fonction de votre navigateur. Cette liste contient tous vous documents hébergés sur le serveur. En cliquant sur un document, vous ouvrez le lien vers ce document.

32. L’ Objet – Courriel Cet objet fonctionne à la manière d’un lien vers un site Web. Après avoir complété le champ avec l’adresse E-mail voulue, cliquez sur le bouton Valider le lien et celui-ci apparaîtra en hyperlien en dessous. En cliquant sur l’adresse, vous ouvrirez votre messagerie par défaut.

33. L’ Objet – Titre Cet objet permet de mettre un titre à la page ou à une zone de la page sur laquelle vous travaillez Options (1) Zone de texte où vous pouvez écrire voter texte. (2) Polices disponibles pour le titre. (3) Taille de caractère. (4) Gras. (5) Italique. (6) Souligné.

34. L’ Objet – Traitement de texte Nous avons intégré à l’application un traitement de texte nommé FCK Editor , qui propose toutes les fonctionnalités d’un traitement de texte du type de Word .

35. Affichage du code source du texte en cours d’édition. Cela permet de créer un texte avec des balises HTML pour les utilisateurs avancés. Propriétés du document. Enregistrer votre document si vous décidez de ne pas l’intégrer à votre page mais que vous souhaitez en garder une trace. Nouvelle page, permet d’effacer tout le texte. Prévisualisation : C’est un aperçu avant d’enregistrer votre page. Modèles de contenu : permet d’ouvrir des modèles préétablis de documents. Couper /Copier / Coller (textes, images…) /Coller comme Texte /Coller de Word (permet de conserver le formatage du texte). Imprimer. Annuler/Refaire l’action précédente. Rechercher dans le document / remplacer. Formulaire. Case à cocher (choix multiple possible). Case à cocher (choix unique). Champ de texte / zone de texte. Liste / bouton/bouton Image /champ caché. Les Icônes du traitement de texte Gras / italique / souligné / barré. Mettre en indice / Mettre en exposant. Liste numérotée / Liste à Puces. Augmenter le retrait / diminuer le retrait. Aligné à gauche / centré / aligné à droite / justifié. Insérer-Modifier un Lien / Supprimer un Lien /Insérer-Modifier l’ancre. Insérer : image / animation flash / séparateur / Smiley / caractère spécial / saut de page. Ouvrir le clavier universel. Utiliser un style prédéfini (Titre 1, texte , Titre 2…etc.). Utiliser un format de texte prédéfini (police et taille). Choix de la police Taille des caractères. Couleur du texte / couleur du fond. Afficher le traitement de texte en plein écran / Restaurer le traitement de texte. A propos du Traitement de texte. Liste numérotée / Liste a Puce . : Augmenter le retrait / diminuer le retrait. : A propos du Traitement de texte.

36. L’ Objet – Bloc Note C’est un traitement de texte simplifié pour prendre des notes si vous n’avez pas besoin de toutes les fonctionnalités d’un traitement de texte. Options Zone de texte. (2) Choix de la police. (3) Choix de la taille des caractères. (4) Gras. (5) Italique. (6) Souligné. (7) Choix de la couleur du fond de la police ou le fond du bloc note.

37. L’ Objet – Bannière publicitaire Cet objet permet d’enregistrer et de faire dérouler un court message défilant qui s’affiche sur votre page Web dans la zone de votre choix. Procédures (1) Tapez dans la zone Mon message votre message; (2) Cliquez sur le bouton Appliquer… pour voir défiler votre message à l’écran. (1) (2)

38. Pour nous rejoindre Télé-université / UQAM Louis Villardier Professeur en technologie éducative [email_address] Tél: (418) 657-2747 ext: 5430 Fax : (418) 657- 2094 Télé-université / UQAM 455 Rue du Parvis, Québec (Québec), Canada G1K 9H5 Université Robert Schuman IUT, Département Informatique Pierre Van Heddeghem Analyse développeur [email_address] strasbg.fr Tél: 03.88.74.00.67 Fax: 03.88.67.63.93 Université Robert Schuman IUT, Département Informatique Strasbourg (France) 72, route du Rhin BP 315 67411 ILLKIRCH CEDEX (France)