PLAN 1. Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin 2004

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Caractéristiques des sites de presse actuels Calqués sur la version papier du journal Calqués sur la version papier du journal Trop d’informations sur une seule page Trop d’informations sur une seule page Difficultés pour le lecteur pour se repérer Difficultés pour le lecteur pour se repérer

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Caractéristiques des sites de presse actuels

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Cahiers des charges Interface agréable et efficace Interface agréable et efficace Présentation de l’information par les liaisons Présentation de l’information par les liaisons entre les termes et les articles entre les termes et les articles Représentation de ces liens par des dessins Représentation de ces liens par des dessins dynamiques dynamiques Interface personnalisable Interface personnalisable

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Site Utilisateur Administrateur - Mots dans le moteur de recherche moteur de recherche - Clic sur l’article - Navigue dans le - Navigue dans le graphe de termes graphe de termes - Résultats de la recherche - Contenu de l’article - Affichage des liens - Modifications de la BD pour les mises à jour pour les mises à jour - Modifications de la BD pour insérer un journal pour insérer un journal - Nouvelles couleurs

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN SVG : Scalable Vector Graphics Langage basé sur XML Langage basé sur XML Admet 3 types d’objets : Admet 3 types d’objets : Contours graphiques vectoriels Contours graphiques vectoriels Images Images Textes Textes Dessins interactifs et dynamiques Dessins interactifs et dynamiques Permet de créer des animations Permet de créer des animations

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN PHP Se rapproche de langages comme C Se rapproche de langages comme C Langage libre Langage libre S’exécute côté serveur (mieux pour la sécurité) S’exécute côté serveur (mieux pour la sécurité) Possibilité de faire de l’objet Possibilité de faire de l’objet

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN MySQL Langage libre Langage libre Permet d’interroger notre base Permet d’interroger notre base de données et ainsi créer nos requêtes de données et ainsi créer nos requêtes

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Composants de l’interface Zone de recherche qui se distingue du reste Zone de recherche qui se distingue du reste L’espace réservée aux résultats de la recherche L’espace réservée aux résultats de la recherche doit être le plus grand possible doit être le plus grand possible Apparition des articles ou des rubriques par Apparition des articles ou des rubriques par translation translation Liens entre les articles et les termes par des Liens entre les articles et les termes par des courbes de Bézier courbes de Bézier

Zone de recherche Résultats de la recherche Article Courbes de Béziers

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Interface dynamique L’interface est rendu dynamique par l’insertion de requêtes SQL. L’interface est rendu dynamique par l’insertion de requêtes SQL. Ces requêtes permettent de modifier le contenu de la fenêtre des articles ou les résultats, selon les choix de l’utilisateur. Ces requêtes permettent de modifier le contenu de la fenêtre des articles ou les résultats, selon les choix de l’utilisateur.

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Système de coordonnées x y O On peut le définir par le repère (O,x,y) :

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Exemple de courbe de Bézier M Q346, ,294 T242,536 Point de départ de coordonnée (321,118) Point de coordonnée (346,206) Point de contrôle de coordonnée (265,294) Milieu de la courbe Point d’ arrivée de coordonnée (242,536)

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Apparition des fenêtre Ce que voit l’utilisateur Article

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Textes ombrées Étape 1 Les Termes du Jour Étape 2 Étape 3

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Création des graphiques

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Difficultés rencontrées Création des formulaires Création des formulaires Session en PHP pour permettre à l’utilisateur Session en PHP pour permettre à l’utilisateur de sauvegarder des articles de sauvegarder des articles Base de données Base de données

Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin Introduction 1.1. Sites de presse actuels 1.2. Objectif de notre site 2. Description du modèle 3. Outils utilisés 3.1. SVG 3.2. PHP et MySQL 4. Conception de l’interface 4.1. Présentation globale 4.2. Système de coordonnées 4.3. Méthodes de construction - Courbes - Apparition de fenêtre - Textes ombrés - Statistiques 5. Difficultés et conclusion PLAN Conclusion Travail en équipe Travail en équipe Découverte d’un nouveau langage : SVG Découverte d’un nouveau langage : SVG Améliorations possibles : Améliorations possibles : Rubriques Rubriques Insertion des images Insertion des images

FIN Julien VAN DEN BOSSCHE / Benoît MOULIN21 Juin 2004