Méthode de développement
Procédure de création d'un site web
Avant de se lancer
Création de la maquette
Création du projet web
Structure du projet / des thèmes Wordpress
Les sites utilisent Git et Netbeans, et les projets ont toujours ces deux dossier à leur racine :
Les dossiers .git et nbproject ne doivent jamais être uploadés sur les serveurs, ce sont des fichiers de gestion interne.
Les dossiers ou thèmes WP contiennent les sous-dossiers suivants :
img : dossier qui contient les images
js : dossier qui contient le javascript
fonts : dossier qui contient les polices utilisées
css (sauf sites Wordpress) : contient les feuilles de style
Préparation de l’environnement de travail
Créer le projet sur netbeans
Initialiser le répertoire Git (Team → Git → Initialize repository)
Faire un commit initial (Team → Commit… avec comme commentaire : “Initial commit”)
Ouvrir un terminal (Mac : Applications → Utilitaires → Terminal) et exécuter cette commande pour cloner le dépôt dans production avec l'option –bare (indispensable pour faire des copies locales), en prenant soin de bien ajouter .git à la fin de la 2ème adresse :
git clone --bare lien_du_dossier_à_copier dossier_de_destination.git
Il peut être nécessaire d'installer Git avant de le faire, mais le terminal le fait automatiquement si nécessaire. Sur Mac et Linux on peut récupérer les liens des dossiers avec un cliqué-glissé dans le terminal, ça permet de gagner du temps.
On a donc dans production :
ansac.git : répertoire Git de partage, c'est lui qui est mis à jour avec les remote → push
ansac.zip : copie zippée du dossier de travail, au cas où. Il sera ajouté manuellement au prochain git push
À chaque fois qu'on reprend le travail sur un site on s'assure qu'on est bien sur le dernier commit avec un git fetch (Team → Remote → Fetch…) sur production.
De même quand on arrête de travailler sur le site on fait un git commit et un git push, en indiquant un commentaire utile dans le commit. Le git push met à jour production, mais par précaution on ajoute aussi une copie du répertoire zippée en plus juste après.
Intégration de la maquette - localhost
/* --------------------------------------------------------------------------
GÉNÉRAL
-------------------------------------------------------------------------- */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
padding:0;
margin:0;
}
Préciser le bon DOCTYPE (HTML5 : <!DOCTYPE html>)
Indiquer un lang=“” dans la balise <html>
Appliquer le <meta charset=“UTF-8”> avant tout autre texte.
Créer le contenu et les différentes variations de la page principale (attention s'il y a un
CMS, se contenter des modèles de pages).
Faire l'intégration du
CMS si nécessaire. Voir
Wordpress.
Préparer et mettre en place tous le contenu du site (toutes les pages, images, etc).
Terminer l'intégration du responsive design avec des @media queries, et faire tous les tests avec les vues adaptatives pour que ça marche déjà là. Se référer à
responsive design pour les bugs.
git commit, git push
Mise en ligne du site de développement - serveur dev
Se connecter sur phpmyadmin et exporter la base de donnée en .sql.
Placer le fichier dans nbproject/BDD/nom_du_site_01-11-2015.sql.
Modifier le fichier wp-config.php avec les identifiants de la nouvelle base de données.
Uploader les fichiers et la base de données sur le serveur.
Modifier les 2 urls du site qui se trouvent dans la table wp_options, sinon la connexion à wp-admin provoquera une redirection.
Se connecter au backoffice.
Régénérer le fichier .htaccess en allant dans Réglagles → Permaliens → Enregistrer (sans rien modifier, cela suffit à régénérer le fichier pour le nouveau nom de domaine).
-
Faire des tests sur les différents navigateurs et supports (mobile, tablette), et corriger les bugs. Voir la page sur le
responsive design pour les bugs connus.
Analyser le poids des images et appliquer une réduction de la taille de celles-ci si nécessaire (
Images responsives).
Faire l'optimisation et les touches finales (Erreurs
W3C, vitesse de chargement, meta description, SEO, favicon, page 404, etc).
Exporter la base de données en .sql et placer le fichier dans nbproject/BDD/nom_du_site_jj-mm-aaaa.sql.
git commit, git push
Envoyer le site en relecture au client.
Mise en ligne du site de production - serveur prod
git getch
Se connecter sur phpmyadmin et exporter la base de donnée en .sql.
Placer le fichier dans nbproject/BDD/nom_du_site_01-11-2015.sql
Si on utilise un
CMS capable de modifier les fichiers en ligne, il faut mettre à jour les fichiers locaux : pour Wordpress, il faut tout downloader sauf /wp-content/themes/theme-du-site.
Modifier le fichier wp-config.php avec les identifiants de la nouvelle base de données.
Si Git détecte des fichiers différents, faire un commit “Version en ligne au jj/mm/aaaa”.
Uploader les fichiers mis à jour et la nouvelle base de données sur le serveur.
Modifier les 2 urls du site qui se trouvent dans la table wp_options, sinon la connexion à wp-admin provoquera une redirection.
Se connecter au backoffice.
Régénérer le fichier .htaccess en allant dans Réglagles → Permaliens → Enregistrer (sans rien modifier, cela suffit à régénérer le fichier).
-
Faire des tests sur les différents navigateurs et supports (mobile, tablette), et corriger les bugs.
Faire les touches finales pour le SEO (inscription sur google et The Open DIrectory Project, etc)
Si le site est sur Wordpress : installer le plugin MainWP Child et faire le lien avec l'installation locale (et mettre le site en favori dans les sites réalisés).
Si tout fonctionne, enlever le site de dev et y mettre une
redirection vers le site de production pour éviter les confusions.
Correction sur un site en ligne
Pour les sites Wordpress cette procédure s'adresse aux modifications de thèmes. S'il ne s'agit que d'une correction de texte ou d'une image modifiable dans le backoffice, ce n'est pas la peine.
git fetch
Se connecter sur phpmyadmin et exporter la base de donnée en .sql.
Placer le fichier dans nbproject/BDD/nom_du_site_jj-mm-aaaa.sql.
Si le site utilise un
CMS ou si ses fichiers peuvent avoir changer, se connecter en
FTP et récupérer la dernière version des fichiers.
Si Git détecte des fichiers différents, faire un commit “Version en ligne au jj/mm/aaaa”.
S'occuper de la correction à effectuer.
Mettre les nouveaux fichiers en ligne.
Faire des tests sur différents navigateurs, sur tablette et sur mobile.
Si tout est bon faire un git commit et un git push vers production.
