SlideShare a Scribd company logo
1 of 12
Download to read offline
TP Timezone
1. Objectif
Objectif
Créer une application web
permettant d’afficher
plusieurs fuseaux horaires
de manière graphique.
L’application
L’application contiendra les écrans suivants :
- home page avec login / password
- Liste des horloges sous formes de grille graphique
- Liste des horloges sous formes de liste
- Recherche , ajout et suppression d’horloge
- Affichage d’une horloge particulière avec météo
Le design
Le design de l’application web sera basé sur le
template http://graphicburger.com/time-zone-app-ui/
Les pages déjà designé devront correspondre le plus
exactement possible au template fournis. Les pages
non-designer sont à imaginer en cohérence avec le
design général.
2. Technologies
Frontend
HTML / CSS / JS
+ framework
Backend
PHP / MYSQL
Aucun framework
3. Méthodologie
Principes
Développement à l’instinct
Refactoring
« Frameworkisation » de l’application
1
2
3
To be continued …
Crédits
4 Free Mockups - Shakuro
https://dribbble.com/shots/1805126-4-Free-Mockups?list=users&offset=0
Time Zone App UI - Graphic Burger
http://graphicburger.com/time-zone-app-ui/

More Related Content

What's hot

Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listKaylynne Johnson
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprisesmonsieurpixel
 
Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Jamel Eddine Zarga
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à BlidaGd6d
 
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Claude BUENO
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3robinparisi
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de coursmichel.titeux
 
Jeudis du Libre - Themosis
Jeudis du Libre - ThemosisJeudis du Libre - Themosis
Jeudis du Libre - Themosis6x7 ASBL
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressNicolas Richer
 
7 Outils indispensables pour son Blog
7 Outils indispensables pour son Blog7 Outils indispensables pour son Blog
7 Outils indispensables pour son BlogLing-en Hsia
 
10 astuces pour se faciliter l'administration sous Joomla! Joomladay France 2015
10 astuces pour se faciliter l'administration sous Joomla! Joomladay France 201510 astuces pour se faciliter l'administration sous Joomla! Joomladay France 2015
10 astuces pour se faciliter l'administration sous Joomla! Joomladay France 2015Com'3elles - www.com3elles.com
 
Projet blogueurs Pro
Projet blogueurs ProProjet blogueurs Pro
Projet blogueurs ProWordpressCIV
 
Outils Indispensables pour vs navigateurs web
Outils Indispensables pour vs navigateurs webOutils Indispensables pour vs navigateurs web
Outils Indispensables pour vs navigateurs webYannick Pavard
 

What's hot (19)

Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Initiation à WordPress
Initiation à WordPressInitiation à WordPress
Initiation à WordPress
 
Histoires de CMS
Histoires de CMSHistoires de CMS
Histoires de CMS
 
Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4Formation joomla 2.5 séance 1 sur 4
Formation joomla 2.5 séance 1 sur 4
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
 
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
Créer et gérer facilement votre site Internet évolutif - Webschool Tours - Co...
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3
 
Bloggybusiness Presentation
Bloggybusiness PresentationBloggybusiness Presentation
Bloggybusiness Presentation
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 
Jeudis du Libre - Themosis
Jeudis du Libre - ThemosisJeudis du Libre - Themosis
Jeudis du Libre - Themosis
 
Les 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPressLes 10 Erreurs des Debutants avec WordPress
Les 10 Erreurs des Debutants avec WordPress
 
7 Outils indispensables pour son Blog
7 Outils indispensables pour son Blog7 Outils indispensables pour son Blog
7 Outils indispensables pour son Blog
 
Cms
CmsCms
Cms
 
10 astuces pour se faciliter l'administration sous Joomla! Joomladay France 2015
10 astuces pour se faciliter l'administration sous Joomla! Joomladay France 201510 astuces pour se faciliter l'administration sous Joomla! Joomladay France 2015
10 astuces pour se faciliter l'administration sous Joomla! Joomladay France 2015
 
Projet blogueurs Pro
Projet blogueurs ProProjet blogueurs Pro
Projet blogueurs Pro
 
Formation WordPress
Formation WordPressFormation WordPress
Formation WordPress
 
Webdesign
WebdesignWebdesign
Webdesign
 
Outils Indispensables pour vs navigateurs web
Outils Indispensables pour vs navigateurs webOutils Indispensables pour vs navigateurs web
Outils Indispensables pour vs navigateurs web
 

Viewers also liked

Javascript #4.2 : fonctions for pgm
Javascript #4.2 : fonctions for pgmJavascript #4.2 : fonctions for pgm
Javascript #4.2 : fonctions for pgmJean Michel
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesJean Michel
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécificationJean Michel
 
Gestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientGestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientJean Michel
 
#3 html in the real world
#3 html in the real world#3 html in the real world
#3 html in the real worldJean Michel
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJean Michel
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Jean Michel
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkJean Michel
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le domJean Michel
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designJean Michel
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du webJean Michel
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookiesJean Michel
 
Une introduction à Javascript
Une introduction à JavascriptUne introduction à Javascript
Une introduction à JavascriptJean Michel
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisationJean Michel
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événementsJean Michel
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?Jean Michel
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invaderJean Michel
 
Html & Css #6 : formulaires
Html & Css #6 : formulairesHtml & Css #6 : formulaires
Html & Css #6 : formulairesJean Michel
 

Viewers also liked (20)

Javascript #4.2 : fonctions for pgm
Javascript #4.2 : fonctions for pgmJavascript #4.2 : fonctions for pgm
Javascript #4.2 : fonctions for pgm
 
Dev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummiesDev Web 101 #2 : development for dummies
Dev Web 101 #2 : development for dummies
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 
Gestion de projet #4 : spécification
Gestion de projet #4 : spécificationGestion de projet #4 : spécification
Gestion de projet #4 : spécification
 
Gestion de projet #3 : besoin client
Gestion de projet #3 : besoin clientGestion de projet #3 : besoin client
Gestion de projet #3 : besoin client
 
#3 html in the real world
#3 html in the real world#3 html in the real world
#3 html in the real world
 
Javascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateursJavascript #2 : valeurs, types & opérateurs
Javascript #2 : valeurs, types & opérateurs
 
Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!Javascript #5.1 : tp1 zombies!
Javascript #5.1 : tp1 zombies!
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le dom
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
 
Les modèles économiques du web
Les modèles économiques du webLes modèles économiques du web
Les modèles économiques du web
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
 
Une introduction à Javascript
Une introduction à JavascriptUne introduction à Javascript
Une introduction à Javascript
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
 
Javascript #8 : événements
Javascript #8 : événementsJavascript #8 : événements
Javascript #8 : événements
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invader
 
Html & Css #6 : formulaires
Html & Css #6 : formulairesHtml & Css #6 : formulaires
Html & Css #6 : formulaires
 
#4 css 101
#4 css 101#4 css 101
#4 css 101
 

Similar to Architecture logicielle #2 : TP timezone

Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Mohammed JAITI
 
Airbus - Projet I3M - Référentiel portail Web
Airbus - Projet I3M - Référentiel portail WebAirbus - Projet I3M - Référentiel portail Web
Airbus - Projet I3M - Référentiel portail WebI3M Aérospace Multimédia
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPressBenjamin LUPU
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1Xavier Mouly
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALLaribi Aicha
 
Paris ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websitesParis ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websitesGuillaume Gérard
 
Bien comprendre le nouveau modèle Apps de SharePoint 2013
Bien comprendre le nouveau modèle Apps de SharePoint 2013Bien comprendre le nouveau modèle Apps de SharePoint 2013
Bien comprendre le nouveau modèle Apps de SharePoint 2013Louis-Philippe Lavoie
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationMicrosoft Technet France
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdfimenhamada17
 
Cloud & Google app engine Presentation by Ngiambus Marcus
 Cloud & Google app engine Presentation  by Ngiambus Marcus Cloud & Google app engine Presentation  by Ngiambus Marcus
Cloud & Google app engine Presentation by Ngiambus MarcusMarc NGIAMBA
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action Denys Chamberland
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Nazih Heni
 

Similar to Architecture logicielle #2 : TP timezone (20)

Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
Projet timezone
Projet timezoneProjet timezone
Projet timezone
 
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
Rapport de mon First Projet Web à l'Ecole Supérieure de Technologie de SAFI -...
 
Airbus - Projet I3M - Référentiel portail Web
Airbus - Projet I3M - Référentiel portail WebAirbus - Projet I3M - Référentiel portail Web
Airbus - Projet I3M - Référentiel portail Web
 
Airbus- Référentiel Graphique web
Airbus- Référentiel Graphique webAirbus- Référentiel Graphique web
Airbus- Référentiel Graphique web
 
Construire une PWA connectée à WordPress
Construire une PWA connectée à WordPressConstruire une PWA connectée à WordPress
Construire une PWA connectée à WordPress
 
201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1201502_SOGETI_Support_Digital_2.0_V1.1
201502_SOGETI_Support_Digital_2.0_V1.1
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Paris ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websitesParis ember js lab #6 - Taking over server-side rendering websites
Paris ember js lab #6 - Taking over server-side rendering websites
 
Offre technique
Offre techniqueOffre technique
Offre technique
 
Bien comprendre le nouveau modèle Apps de SharePoint 2013
Bien comprendre le nouveau modèle Apps de SharePoint 2013Bien comprendre le nouveau modèle Apps de SharePoint 2013
Bien comprendre le nouveau modèle Apps de SharePoint 2013
 
SharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle générationSharePoint Framework : le développement SharePoint nouvelle génération
SharePoint Framework : le développement SharePoint nouvelle génération
 
Angular développer des applications .pdf
Angular développer des applications .pdfAngular développer des applications .pdf
Angular développer des applications .pdf
 
Cloud & Google app engine Presentation by Ngiambus Marcus
 Cloud & Google app engine Presentation  by Ngiambus Marcus Cloud & Google app engine Presentation  by Ngiambus Marcus
Cloud & Google app engine Presentation by Ngiambus Marcus
 
CV_Bilel CHAOUADI
CV_Bilel CHAOUADICV_Bilel CHAOUADI
CV_Bilel CHAOUADI
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Liste des stages 07 02 2017
Liste des stages 07 02 2017Liste des stages 07 02 2017
Liste des stages 07 02 2017
 
Proposition site Algo
Proposition site AlgoProposition site Algo
Proposition site Algo
 
Microsoft Power Platform en Action
Microsoft Power Platform en Action Microsoft Power Platform en Action
Microsoft Power Platform en Action
 
Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"Asp.net Tutorials de L'application "Organizer"
Asp.net Tutorials de L'application "Organizer"
 

More from Jean Michel

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customersJean Michel
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQueryJean Michel
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapJean Michel
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvasJean Michel
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvcJean Michel
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategieJean Michel
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introductionJean Michel
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctionsJean Michel
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesJean Michel
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles Jean Michel
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introductionJean Michel
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitchJean Michel
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs Jean Michel
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive designJean Michel
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introductionJean Michel
 

More from Jean Michel (16)

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customers
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvas
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introduction
 
Startup #5 : pitch
Startup #5 : pitchStartup #5 : pitch
Startup #5 : pitch
 
WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs WebApp #4 : Consuming REST APIs
WebApp #4 : Consuming REST APIs
 
WebApp #3 : API
WebApp #3 : APIWebApp #3 : API
WebApp #3 : API
 
WebApp #2 : responsive design
WebApp #2 : responsive designWebApp #2 : responsive design
WebApp #2 : responsive design
 
WebApp #1 : introduction
WebApp #1 : introductionWebApp #1 : introduction
WebApp #1 : introduction
 

Architecture logicielle #2 : TP timezone