View
1.218
Download
0
Category
Preview:
Citation preview
ROSALIE VirginieSection DI
Présentation du projet
Générateur de code HTML et CSS
ACCRO-WEB
Sommaire
1- Présentation de l’entreprise
2- Présentation du projet
3- Cas d’utilisation
- Cahier des charges- Diagramme de cas d’utilisation- Diagramme de cas d’utilisation détaillé- Diagramme de classes- Diagramme de séquences
-Site sur la Martinique
1- Présentation de l’entreprise
Accro-Web
Son activité
Sa philosophie
Société de développement web basée à la Timone à Marseille.
- Création de sites Web- Référencement- Hébergement
- Un service optimum pour un prix minimum.- Des technologies de développement open source- Fournir une copie locale de leurs sites à leurs clients, afin de travailler dans un climat de confiance et dans la durée.- Aider au développement: proposer ultérieurement d’autres services plus complets de gestion automatisée des tâches, de transfert d’information, etc…Leur site www.accro-web.fr
2- Présentation du projet-Cahier des charges- Diagramme de cas d’utilisation- Diagramme de cas d’utilisation détaillé- Diagramme de classes- Diagramme de séquences
Rôles
Objectif
De la société Accro-web- Proposition du projet
Des stagiaires- Spécification du projet- Modélisation des données- Programmation d’une application
Objectif -> un site qui permet à des utilisateurs peu ou pas expérimentés, qui ont un besoin de communication, de pouvoir créer leur propre site en quelques clics. Ces sites n’ont pas vocation à devenir marchand mais de faire connaître le société, la personne, une activité, une association.
Contenus
A qui s’adresse le site?
Il ne s’agit pas de créer sa page perso mais de faire des sites vitrines, donc la cible se constitue de petits commerces, d’association ou toutes personnes ayant un besoin de communication sur une activité.
Les étapes dans la conception du site doivent être les suivantes:
- Identification- Mise en forme générale- Ajout de contenu dans les pages- Ajout de mise de forme- Ajout d’options- Validation- Paiement et référencement
Pour la partie qui nous concerne c’est-à-dire la création du code HTML et CSS, nous proposerons 5 pages allant jusqu’à l’ajout d’options.La société ne sachant encore pas comment elle va procéder pour les étapes suivantes.
Arborescence
En priorité développement d’une API permettant de générer le code HTML et CSS
Modèle de cycle de vie en spirale.
PHP5 ->programmation objet
Du fait programmation objet, UML a été choisi pour faire l’analyse.
Pas de charte graphique mais une contrainte, le nom de la société ACCRO-WEB doit apparaître dans le pied de page de chaque site.
2- Présentation du projet-Cahier des charges-Diagramme de cas d’utilisation-Diagramme de cas d’utilisation détaillé-Diagramme de classes- Diagramme de séquences
Les directives de l’entreprise
Méthodologie du projet
Livrables attendus
Langage à utiliser
Analyse
Charte graphique
MAQUETTE DE L’INTERFACE
ACCUEILEtape 1:
IdentificationEtape 2:
Forme générale
Etape 3: Ajout contenu
Etape 4: Mise en forme
Etape 5: Choix options
Etape 6: Validation et
Paiement
Validation
New Page
SITE
ValidationAjouter une
page
Page
Page
oui
non
oui
non
2- Présentation du projet-Cahier des charges-Diagramme de cas d’utilisation-Diagramme de cas d’utilisation détaillé-Diagramme de classes-Diagramme de séquences
CREER
MISE EN LIGNE
MODIFIERConnexion
login
Solvabilité
« include »
« include »
« include »
AJOUTER
« include »
-Cahier des charges-Diagramme de cas d’utilisation-Diagramme de cas d’utilisation détaillé-Diagramme de classes-Diagramme de séquences
AJOUTER DES PAGES
AJOUTER DU
CONTENU
METTRE EN FORME
METTRE EN LIGNE
IDENTIFICATION
PAYER
« include »
« include »
« include »
2- Présentation du projet-Cahier des charges-Diagramme de cas d’utilisation-Diagramme de cas d’utilisation détaillé-Diagrammes de classes-Diagramme de séquences
- Choix des fonctionnalités que doit permettre cette APIObjectif créationQue doit-on pouvoir ajouter ?Dans quel ordre?Les zones doivent-elles être toutes modifiables par l’utilisateur?
- Choix des paramètres qui semblent nécessaires à l’élaboration du code.Quels sont les paramètres et les fonctions pour chaque classe?Quelles sont les zones communes à toutes les pages HTML?
2- Présentation du projet-Cahier des charges-Diagramme de cas d’utilisation-Diagramme de cas d’utilisation détaillé-Etapes de conception-Diagramme de classe-Diagramme de séquences
Interfaces
Site
Page
Colonne Boite
ChampFormulaire
Formulaire
Header
Contenu
Image
CSS
clientINTERFACE
WEB
Footer
Header->addHeader(« titre », « texte », « logo »)
Page->addPage(« type », « titre »)->page[X]->addContenu()->page[X]->addImage()->page[X]->addGallery()->page[X]->addCss()
Footer->addFooter(« contenu »)
Colonne->page[X]->addColonne(« id », « titre », « type »)->page[X]->colonne[id]->addContenu()->page[X]-> colonne[id]-> addImage()->page[X]->colonne[id]->addCss()->page[X]->colonne[id]->addForm()
Boite->page[X]->colonne[id]->addBoite()->page[X ]->colonne[id]->boite[id]->addContenu()->page[X]-> colonne[id]-> boite[id]->addImage()->page[X]-> colonne[id]-> boite[id]->addCss()
4 – Cas PratiqueNous allons voir comment fonctionne l’API.
Nous avons vu la syntaxe à utiliser et la logique qui doit s’appliquer à cette API pour constituer un site.
Voyons le résultat sur un site que j’ai développer en utilisant l’API.
Recommended