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.