====== Développement web ====== Github contribution ===== Méthode de développement ===== Si le site est sur Wordpress, suivre la méthode [[webdev:wordpress:start|ici]].\\ Si le site est responsive, penser à suivre les instructions [[webdev:responsive_design|ici]].\\ Voir aussi les instructions sur la [[webdev:maintenance|maintenance d'un site]].\\ Penser aussi à [[webdev:securite|sécuriser les sites]]. ===== 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'arborescence et les pages à créer ==== 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 - dossier utilisé par Git, ne pas y toucher * nbproject - dossier de gestion de netbeans * BDD - endroit où seront stockées les sauvegardes des bases de données du site. Ainsi elles seront sauvegardées par Git. * IMAGES - dossier optionnel pour les image uploadées sur le CMS qui n'ont pas leur place dans le fichier img du thème * ... - les autres fichiers sont gérés par netbeans 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. * Dans netbeans faire un Team -> Remote -> Push et indiquer le dossier ainsi cloné, en prenant soin d'enregistrer le dépôt de façon permanente. Ainsi on pourra faire des ''git push'' et des ''git fetch'' sans problème. On a donc dans production :\\ {{:webdev:capture_d_ecran_2016-01-13_a_16.48.38.png?nolink |}} \\ 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 === * Éclater le design en blocs principaux (header, aside, main, etc). * Appliquer un léger reset CSS : /* -------------------------------------------------------------------------- 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 : ) * Indiquer un lang="" dans la balise * Appliquer le 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 [[webdev:wordpress:start|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 à [[webdev:responsive_design|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). * Corriger les éventuels liens morts dans les images. On peut s'aider pour cela du plugin [[http://www.dolostudio.com/lab/dokuwiki/webdev/plugins#velvet_blues_update_urls|Velvet Blues Update URLs]]. * Faire des tests sur les différents navigateurs et supports (mobile, tablette), et corriger les bugs. Voir la page sur le [[webdev:responsive_design|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 ([[webdev:wordpress:images_responsive|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). * Corriger les éventuels liens morts dans les images. On peut s'aider pour cela du plugin [[http://www.dolostudio.com/lab/dokuwiki/webdev/plugins#velvet_blues_update_urls|Velvet Blues Update URLs]]. * 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 [[webdev:redirections|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. ---- ==== Logiciels utilisés ==== **Netbeans :** éditeur solide, FTP intégré, multiplateforme et open source. Excellent pour le PHP/javacsript. Gère aussi Git.\\ **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'éditeur de style, très pratique et efficace. **Attention :** Il faut que le paramètre "Désactiver le cache" soit décoché dans les options, sinon les mises à jour ne seront pas prises en compte à l'actualisation.\\ **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://modernizr.com/]] * **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'installation, et à ajouter les droits d'écriture au groupe. Exemple : sudo chgrp -R www-data ./changeons-le-monde.net sudo chmod -R g+w ./changeons-le-monde.net