Soutenance DWWM

Soutenance Titre développeur web & web mobile

Mathilde Garin

Mon parcours

2019

2020

2006

2017

Reconversion professionnelle :Développement Front-End & Webdesign

Bachelor Chef de projet digital & Création d'entreprise

Voyage de 14 mois(Asie du Sud-Est & Océanie)

Responsable communication

SOMMAIRE

Nation Sounds

Ma Nouvelle Déco

Equilibre & Vous

Développement d'une interface utilisateur web dynamique & de la partie back-end

Le processus de maquettage

Création d'une interface utilisateur avec un CMS

1. Ma Nouvelle Déco

• Entreprise : agence de communication Bodeva
• Client : imprimeur de Montpellier
• Projet : création d'un site de vente en ligne de décoration personnalisée
• Fonctionnalité : personnalisation avec photo perso ou Adobe Stock
• En relation avec : la chef de projet, la directrice artistique et le client

Benchmark

S'inspirerRepérer les bonnes pratiquesDéterminer les pistes créatives

Arborescence

Représenter la structure et l’organisation de l’information et des contenus du siteEn partant de la page d'accueil :

• 3 points d'entrée différents pour personnaliser sa déco

> Aide l’utilisateur à trouver ce qu’il cherche> Faire naître de nouvelles envies

• Connexion obligatoire avant processus d'achat
• Espace client

Wireframes

Schémas simplifiés de l'interface utilisateurAdobe Xd

• Header
• Navigation
• Carrousel
• Etapes de création

Sous la ligne de flottaison :

• Entrée par produits
• Entrée par thème : carrousel
• Bandeau de réassurance
• Footer

Maquettage

Rendu graphique finalPhotoshop

• Palette de couleurs
• Typographies
• Visuels

• Pictogrammes
• Photomontages

2. Equilibre & Vous

• Cliente : naturopathe en formation
• Projet : création d'un site vitrine responsive pour présenter ses prestations
• En relation avec : la cliente
• Lancement de l'activité retardé

Dossier de conception

• Analyse des besoins, cible & benchmark
• Spécifications fonctionnelles : arborescence, use case, contenu détaillé
• Logo & charte graphique
• Wireframes
• Visuels & illustrations

• Maquettes

> Accès Google Drive pour faciliter la validation de chaque-étape clé

Site vitrine WordPress

• Serveur local
• Création de la base de données
• Installation de WordPress
• Choix du thème

@media (min-width: 768px) and (max-width: 1025px) {.elementor-213 .elementor-element.elementor-element-49c33bb, .elementor-213 .elementor-element.elementor-element-34206798 {width: 100%; }.elementor-image-gallery .gallery-columns-2 .gallery-item { max-width: 20%;}.elementor img {width: 100%; }}@media (min-width: 479px) {.elementor-213 .elementor-element.elementor-element-aa1ab75 .gallery-item {width:33%; }}

• Personnalisation du thème

• Pages internes via Elementor
• Intégration des contenus
• CSS additionnel dont media queries pour responsivité

Référencement

• Rédaction web en intégrant les mots-clés stratégiques + de longue traîne
• URL personnalisées
• Optimisation des balises d'en-tête
• Contenu structuré
• Texte plus lisible
• Aider les moteurs de recherche
• Balises alternatives des images
• Plugin Yoast SEO : balises Meta title & Meta description
• A faire : Soumission du site aux moteurs de recherche

Sécurité

• Mot de passe robuste
• Préfixe « wp » des tables modifié
• Adresse de connexion changée (Plugin Hide Login)
• Plugins et thèmes inutilisés supprimés
• Version WP, thème & plugins mis à jour
• Base de données & contenus sauvegardés
• Version de WordPress masquée (function.php)
• Fichier de configuration de WordPress et .htaccess protégés, dossiers sensibles cachés (.htaccess)
• A faire : Certificat SSL/TLS

3. Nation Sounds

• Contexte : 2 MSPR WIS
• Client fictif : Live Events
• Objectif : créer une application mobile pour un festival de musique fictif

• Equipe : groupe de 5

Gestion de projet

• Trello : liste des tâches, répartition, deadlines, infos utiles
• Discord : communiquer & collaborer
• Git & Github : partage & versionnage du code
• Méthodes Agiles : visibilité de l’avancée du développement et du respect des deadlines

Objectif MSPR N°1

Gérer la majorité des contenus de l'application mobile via un CMS

Appli web responsive

REST APIWORDPRESS

Bootstrap

JavaScript

CRM Génération de l'API REST

Adaptation d'un template Bootstrap

Appels à l'API pour intégration des contenus

Affichage dynamique

• Etude du REST API Handbook de WordPress

• Catégorie dédiée aux actualités

• Problème : comment trouver le n° de la catégorie ?
• Inspection de la réponse JSON de l’API REST sur Postman
• Route filtrée : /wp-json/wp/v2/

posts?categories=21

• Récupérer les données de l'API
• Afficher la rubrique souhaitée et cacher les autres
• Créer l'affichage : HTML concaténé avec propriétés de l'API
• Fonction pour modifier le format de la date

Objectif MSPR N°2

Créer le back-office de l'application mobile avec la base de données pour remplacer le CMS

Base de données

phpMyAdmin

Serveur local

MySQL

Environnement de serveur local avec MAMP Serveur Apache Serveur de base de données MySQL

Création de la base de données relationnelles MySQL

Système de gestion de base de données

Back-office

Bootstrap

SQL

PHP

Langage de programmation côté serveur

Adaptation d'un template Bootstrap

Langage d'exploitation des bases de données

• 7 types entités : propriétés propres & identifiant

• Liens entre les entités : 2 types associations avec leur cardinalité

Structurer et organiser l'ensemble des donnéesOptimiser la création de la base de données

Modèle Conceptuel de Données

• Type entité > relation (table)
• Identifiant > clé primaire
• Clé étrangère : intégrité référentielle

Comprendre les actions à réaliser pour construire la base de données

Modèle Logique de Données

Base de données

• Création des tables
• Ajout des clés étrangères via la relation view
• Intégration des données
• Export & partage des tables

Affichage des données

(CRUD / SELECT)

Ajout des données

(CRUD / INSERT)

Mise à jour des données

(CRUD / UPDATE)

Suppression des données

(CRUD / DELETE)

Pour éviter les erreurs de l'utilisateur : "onclick" sur le bouton de suppression

Sécurité

• Mot de passe robuste pour la base
• Requêtes préparées
• Mots de passe utilisateurs :
• expressions regulières
• cryptés dans la base : password_hash()
• Vérification de l'authentification : password_verify()
• Sauvegarde de la base : export phpMyAdmin
• Sauvegarde du code & ses versions : Git & Github

Pour conclure

Merci !

A votre disposition pour répondre à vos questions