Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
webdev:start [20/06/2017 14:36] dolo |
webdev:start [08/09/2018 14:36] dolo |
||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
+ | ====== Développement web ====== | ||
+ | < | ||
+ | |||
+ | < | ||
+ | ===== Méthode de développement ===== | ||
+ | Si le site est sur Wordpress, suivre la méthode [[webdev: | ||
+ | Si le site est responsive, penser à suivre les instructions [[webdev: | ||
+ | Voir aussi les instructions sur la [[webdev: | ||
+ | Penser aussi à [[webdev: | ||
+ | |||
+ | ===== Procédure de création d'un site web ===== | ||
+ | ==== Avant de se lancer ==== | ||
+ | * Besoins, etc | ||
+ | * Utilisation d'un CMS ? Si oui quelle maintenance particulière ? | ||
+ | * Rassembler les textes et les images | ||
+ | * Définir l' | ||
+ | |||
+ | ==== Création de la maquette ==== | ||
+ | * Création de la maquette | ||
+ | * Validation 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 : | ||
+ | * racine | ||
+ | * .git < | ||
+ | * nbproject < | ||
+ | * BDD < | ||
+ | * IMAGES < | ||
+ | * ... < | ||
+ | |||
+ | 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 : " | ||
+ | * Ouvrir un terminal (Mac : Applications -> Utilitaires -> Terminal) et exécuter cette commande pour cloner le dépôt dans production avec l' | ||
+ | < | ||
+ | Il peut être nécessaire d' | ||
+ | * Dans netbeans faire un Team -> Remote -> Push et indiquer le dossier ainsi cloné, en prenant soin d' | ||
+ | |||
+ | 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 '' | ||
+ | |||
+ | À chaque fois qu'on reprend le travail sur un site on s' | ||
+ | De même quand on arrête de travailler sur le site on fait un '' | ||
+ | |||
+ | === Intégration de la maquette - localhost === | ||
+ | * Éclater le design en blocs principaux (header, aside, main, etc). | ||
+ | * Appliquer un léger reset CSS : | ||
+ | < | ||
+ | | ||
+ | | ||
+ | |||
+ | *, *:before, *:after { | ||
+ | -moz-box-sizing: | ||
+ | box-sizing: inherit; | ||
+ | } | ||
+ | |||
+ | html { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | | ||
+ | body { | ||
+ | padding:0; | ||
+ | margin:0; | ||
+ | }</ | ||
+ | |||
+ | * Préciser le bon DOCTYPE (HTML5 : < | ||
+ | * Indiquer un lang="" | ||
+ | * Appliquer le <meta charset=" | ||
+ | * 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' | ||
+ | * Préparer et mettre en place tous le contenu du site (toutes les pages, images, etc). | ||
+ | * Terminer l' | ||
+ | * '' | ||
+ | |||
+ | === 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/ | ||
+ | * 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). | ||
+ | * Corriger les éventuels liens morts dans les images. On peut s' | ||
+ | * Faire des tests sur les différents navigateurs et supports (mobile, tablette), et corriger les bugs. Voir la page sur le [[webdev: | ||
+ | * Analyser le poids des images et appliquer une réduction de la taille de celles-ci si nécessaire ([[webdev: | ||
+ | * Faire l' | ||
+ | * Exporter la base de données en .sql et placer le fichier dans nbproject/ | ||
+ | * '' | ||
+ | * Envoyer le site en relecture au client. | ||
+ | |||
+ | === Mise en ligne du site de production - serveur prod === | ||
+ | * '' | ||
+ | * Se connecter sur phpmyadmin et exporter la base de donnée en .sql. | ||
+ | * Placer le fichier dans nbproject/ | ||
+ | * 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 / | ||
+ | * Modifier le fichier wp-config.php avec les identifiants de la nouvelle base de données. | ||
+ | * Si Git détecte des fichiers différents, | ||
+ | * 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). | ||
+ | * Corriger les éventuels liens morts dans les images. On peut s' | ||
+ | * 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' | ||
+ | * Si tout fonctionne, enlever le site de dev et y mettre une [[webdev: | ||
+ | |||
+ | === Correction sur un site en ligne === | ||
+ | Pour les sites Wordpress cette procédure s' | ||
+ | * '' | ||
+ | * Se connecter sur phpmyadmin et exporter la base de donnée en .sql. | ||
+ | * Placer le fichier dans nbproject/ | ||
+ | * 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, | ||
+ | * S' | ||
+ | * Mettre les nouveaux fichiers en ligne. | ||
+ | * Faire des tests sur différents navigateurs, | ||
+ | * Si tout est bon faire un '' | ||
+ | </ | ||
+ | ---- | ||
+ | |||
+ | ==== Logiciels utilisés ==== | ||
+ | **Netbeans :** éditeur solide, FTP intégré, multiplateforme et open source. Excellent pour le PHP/ | ||
+ | **Brackets :** éditeur léger, live preview (sans PHP) et intégration psd. Orienté front end.\\ | ||
+ | **Outils développeur intégré à Firefox :** on peut modifier des fichiers CSS avec l' | ||
+ | **Filezilla** pour le FTP, ou un autre peu importe. | ||
+ | |||
+ | |||
+ | ---- | ||
+ | ==== Idées et suggestions ==== | ||
+ | * Synchronisation des bases de données ? | ||
+ | * Utiliser **Autoprefixer !** | ||
+ | * Fichier wp-config conditionnel suivant localhost, pour n'en avoir qu'un seul. Séparer local et dev/prod dans les identifiants de bases de données dans wp-config pour faciliter les transition et les tests avant les mises à jour ? | ||
+ | * //Utiliser Modernizr ?// [[https:// | ||
+ | * **Utiliser SSH au lieu de FTP** | ||
+ | * Protéger les adresses mails en clair des crawlers avec du javascript. | ||
+ | |||
+ | |||
+ | === Note pour serveur local Debian : === | ||
+ | Penser à appliquer récursivement le groupe **www-data** dans le dossier d' | ||
+ | < | ||
+ | sudo chgrp -R www-data ./ | ||
+ | sudo chmod -R g+w ./ | ||
+ | </ | ||
+ | |||