Les bonnes pratiques du
développement Web
François Creton - Avril 2014
Site Web www.alteca.fr
@SSII_Alteca
+Alteca
facebook.com/alteca
Recrutement
recrutement@alteca.fr
04.72.69.72.72
● SSII Ly...
● 15 ans d’expériences
○ Banque populaire
○ Ski Rossignol
○ Groupe Moniteur
○ Geophone
○ ...
● Chef de projet / Consultant...
Sommaire
Partie 1 : Code
Partie 2 : Optimisation
Partie 3 : Ergonomie
<code></code>
Partie 1 : Code
● Utiliser des architectures éprouvées : MVC,
Web Services
● Séparer les couches : HTML, CSS, Javascript
● Utiliser un déc...
Qualité du code
● Respecter des standards
● Valider le code
● Utiliser le contrôler continue
● Penser réutilisabilité
Pour...
Documentez !
● //Commentez votre code
● /* Guide du développeur : Conventions, cf.
outils qualité */
● -- Générateur de do...
Scripts du Web : <Attention />
● Scripts du Web : Fiabilité, nombre d’
utilisateurs, pérennité
● Benchmark local
● Usages ...
Sécurité
● Doubler les contrôles : Front + Back
● : Injections, Broken Authentication, XSS, ...
● Usage des certificats SS...
Traitements (a)synchrones
● Bannir les .XMLHttpRequest() ou .ajax()
dans les boucles
● idem pour les requêtes en BDD
● 1 s...
Environnement de développement
● Optimiser son éditeur : plugins spécialisés
● Debugger : touche F12 des navigateurs
● Ver...
Optimisation
Partie 2 : Optimisation
Vitesse de chargement
● Minifier en production
● Activer la compression : mod_deflate,
mod_gzip
● Contrôler le poids des i...
SEO
● Search Engine Optimisation
● Titre unique en relation direct avec le
contenu
● Hiérarchiser
● Proposer une alternati...
Ontologie
● Donner du sens aux données du Web
● Décrire le contenu de la page
● Utiliser des métadonnées
● Balisage spécif...
Ergonomie
Partie 3 : Ergonomie
Organisation de l’information
● Valoriser vos contenus
● Évaluer de la pertinence
● Hiérarchiser
● Penser
○ Lecture en “Z”...
Abbréviations
<abbr title="Ordre de fabrication">OF</abbr>
Support contextuel
Attribut “placeholder”
<input … placeholder=...
Dimension : Profondeur
● Navigation simple et visible
● Guider l’internaute
● Fil d’ariane : vous > êtes > ici
● Proposer ...
Dimension : Hauteur
● Proposer de remonter en tête de page
● Jouer avec les signets sur une page
● Scroller sur 2 à 3 écra...
Largeur
Astuces : thegridsystem.org, 960.gs
Dimension : Largeur
● Jamais de “scroll” horizontal
● Centrer les contenus
● C...
Rendu
● Choisir des couleurs homogènes et sobre
● 3 couleurs max (hors noir et blanc)
● Préférer un fond clair
● Jouer sur...
Icônographie
● Rester simple et efficace
● Jouer sur la transparence
● Jongler avec les standards / grands
classiques
● Ai...
Police
● Proposer des tailles modifiables
● Utiliser les polices Sans serif
● Éviter les italiques
● Réserver le soulignem...
Formulaire
● Proposer un fil de saisie logique
● Mettre en surbrillance au focus
● Identifier les champs obligatoires
● Pr...
Compatibilité X-Browser
● Utiliser les“reset.css” ou “normalize.css”
● Utiliser les “Hacks” IE
● Partir d’une base multi-p...
Design Adaptatif
● Proposer un rendu adapté au support
○ Responsive Web Design
○ Scalable Design
● Détecter automatiquemen...
Conclusion
Conclusion
En résumé
● Utiliser des standards
● Valider le code
● Optimiser les pages
● Sécuriser vos applications
● Se mettre à la p...
Questions / Réponses
@fcreton
+FrançoisCRETON
fcreton@alteca.fr
Merci de votre attention
Contacter Alteca
Site Web www.alteca.fr
@SSII_Alteca
+Alteca
facebook.com/alteca
Recrutement
recrutement@alteca.fr
04.72.6...
Prochain SlideShare
Chargement dans…5
×

Les bonnes pratiques du developpement web - Alteca - avril 2014

744 vues

Publié le

En partant de ce slogan, "Coder c'est bien, bien coder c'est mieux !", je propose un ensemble de bonnes pratiques à mettre dans toutes les mains des développeurs Web mais aussi, les architectes, chefs de projet, directeurs de projet, etc.

Publié dans : Internet
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
744
Sur SlideShare
0
Issues des intégrations
0
Intégrations
13
Actions
Partages
0
Téléchargements
28
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Les bonnes pratiques du developpement web - Alteca - avril 2014

  1. 1. Les bonnes pratiques du développement Web François Creton - Avril 2014
  2. 2. Site Web www.alteca.fr @SSII_Alteca +Alteca facebook.com/alteca Recrutement recrutement@alteca.fr 04.72.69.72.72 ● SSII Lyonnaise ○ 17 ans d’existence ○ 7 sites ○ 380 collaborateurs ● Secteurs ○ Banque ○ Distribution ○ Tertiaire ○ Industrie ● Métiers ○ Ingénieries des SI ○ Expertises ○ Centres de compétences Notre société
  3. 3. ● 15 ans d’expériences ○ Banque populaire ○ Ski Rossignol ○ Groupe Moniteur ○ Geophone ○ ... ● Chef de projet / Consultant AMOA / Architecte Web ● Expertise Web, Contrôle qualité , Bonnes pratiques du Web, SEO, Ergonomie, Audit projet, Mobilité, Géolocalisation, ... @fcreton @fcreton +FrançoisCRETON
  4. 4. Sommaire Partie 1 : Code Partie 2 : Optimisation Partie 3 : Ergonomie
  5. 5. <code></code> Partie 1 : Code
  6. 6. ● Utiliser des architectures éprouvées : MVC, Web Services ● Séparer les couches : HTML, CSS, Javascript ● Utiliser un découpage fonctionnel ● Utiliser des Framework, CMS, Libriairies, ... Pourquoi ? ● Appréhension, lisibilité pour l’équipe ● Faciliter la montée en compétence ● Documentation ● Maintenabilité Structure Partie 1 : Code Exemple d’arborescence app/ configuration de l'application, src/ code du projet, lib/ bibliothèques (vendor/) web/ racine public css/ feuilles de style js/ javascript media/ images/ video/ icons/ cache/, logs/, bin/, data/, ….
  7. 7. Qualité du code ● Respecter des standards ● Valider le code ● Utiliser le contrôler continue ● Penser réutilisabilité Pourquoi ? ● Harmonisation du code ● S’améliorer, prendre de bonnes habitudes ● Livrables appréciés du client ● Maintenabilité Partie 1 : Code Standards W3C, IETF, ISO, Web Standards Project Validation du code W3C Validator, JSHint, Validom Contrôle continu SonarQube, CheckStyle, PHP_CodeSniffer Conventions de nommage CONSTANT, Class, UpperCamelCase, lowerCamelCase, mon-id, ma_variable, ...
  8. 8. Documentez ! ● //Commentez votre code ● /* Guide du développeur : Conventions, cf. outils qualité */ ● -- Générateur de document type API : [...] Doc ● Travail d’équipe @team Pourquoi ? ● Meilleure lisibilité ● Productivité accrue ● Livrables appréciés du client ● Maintenabilité Partie 1 : Code Exemples /** * Alteca Coding Standard * * PHP version 5 * * @category PHP * @package PHP_CodeSniffer_Alteca * @author fcreton * @version $Id: $ */ Aussi : @date, @param, @return, ...
  9. 9. Scripts du Web : <Attention /> ● Scripts du Web : Fiabilité, nombre d’ utilisateurs, pérennité ● Benchmark local ● Usages détournés ● droits : © copyright, copyleft Pourquoi ? ● Risque de dommages collatéraux (flux, BDD, conflits de nommage, ...) ● Homogénéisation du code ● Risque de surcharge ● Maintenabilité Partie 1 : Code © Ma belle application Scripts
  10. 10. Sécurité ● Doubler les contrôles : Front + Back ● : Injections, Broken Authentication, XSS, ... ● Usage des certificats SSL ● Anticiper : Flux, BDD, Session, champs de saisie Pourquoi ? ● Fiabilité de l’application ● Image de votre société ● Ref. The Open Web Application Security Project - www.owasp.org Partie 1 : Code Top 3 des failles Injection $req = 'select * from something where value = ' + $_REQUEST['param']; Broken Authentication Vol de session, timeout mal géré, ... XSS - Cross-Site Scripting (ou CSS)
  11. 11. Traitements (a)synchrones ● Bannir les .XMLHttpRequest() ou .ajax() dans les boucles ● idem pour les requêtes en BDD ● 1 seul appel Ajax() contenu traité en front ● Ne pas bloquer l’utilisateur, notifier Pourquoi ? ● Lenteur ● Risque de bouchon ● Accès concurrentiels Partie 1 : Code Exemples à bannir jQuery().each(function(i) { … jQuery.ajax({ type: 'POST', url: 'customers.php', data: { id: id, active: true, format: json }, success: function(data) { … }, error: function() { … } }); … });
  12. 12. Environnement de développement ● Optimiser son éditeur : plugins spécialisés ● Debugger : touche F12 des navigateurs ● Versionner son code : GIT / SVN ● Organiser les plates-formes : local / tests / pré-prod / prod Pourquoi ? ● Amélioration des performances et de la qualité ● Système d'auto-complétion ● Environnement uniforme ● Analyse en temps réel Partie 3 : Outillage Profiter des éditeurs
  13. 13. Optimisation Partie 2 : Optimisation
  14. 14. Vitesse de chargement ● Minifier en production ● Activer la compression : mod_deflate, mod_gzip ● Contrôler le poids des images ● Découper les fichiers JS ● Placer les appels JS au bon endroit Pourquoi ? ● Confort de navigation ● Risque de perte de client ● Support mobile Partie 2 : Optimisation Taille avant / après minification Organisation du code JS … <script type="..." src="main.js"></script> </body></html>
  15. 15. SEO ● Search Engine Optimisation ● Titre unique en relation direct avec le contenu ● Hiérarchiser ● Proposer une alternative textuelle ● robots.txt ● sitemap.xml Pourquoi ? ● Référencement naturel ● Facilite l’indexation des contenus ● Réf. Google Webmaster Tools Partie 2 : Optimisation Titre <title>Alteca : Offres de stage</title> Hiérarchistation + rappel du titre <h1>Offres de stage</h1> <h2>Stage Angular et node.js</h2> <h2>Stage Big Data</h2> Attribut “alt” <img src="logo.png" alt="logo" … /> Attribut “for” <label for="town" />Town</label> <input type="text" id="town" … />
  16. 16. Ontologie ● Donner du sens aux données du Web ● Décrire le contenu de la page ● Utiliser des métadonnées ● Balisage spécifique : Dublin Core, Open Graph, Geo Tag, Google+ Author Pourquoi ? ● Profite au référencement naturel ● Qualification des contenus Partie 2 : Optimisation Exemples de Meta Tags <meta name="DC.title" content="Alteca" /> <meta property="og:description" content="..." /> <meta name="geo.placename" content="Lyon" /> <meta name="geo.position" content="45.764043; 4.835659" /> <link rel="author" href="https://plus.google.com/+ [profil]" />
  17. 17. Ergonomie Partie 3 : Ergonomie
  18. 18. Organisation de l’information ● Valoriser vos contenus ● Évaluer de la pertinence ● Hiérarchiser ● Penser ○ Lecture en “Z” ○ Triangle d’or Pourquoi ? ● L’essentiel tout de suite ● Confort ● Éviter les fuites ! Partie 3 : Ergonomie
  19. 19. Abbréviations <abbr title="Ordre de fabrication">OF</abbr> Support contextuel Attribut “placeholder” <input … placeholder="+33 0 puis votre numéro"/> Accessibilité ● Contextualisation ● Abbréviation ● Acronyme ● Puis-je vous aider ? ● Label AccessiWeb ● Fondation HONCode Pourquoi ? ● Web universel ● Meilleure appréhension et compréhension ● Accès aux déficients visuels Partie 3 : Ergonomie
  20. 20. Dimension : Profondeur ● Navigation simple et visible ● Guider l’internaute ● Fil d’ariane : vous > êtes > ici ● Proposer un plan de site ● Rappel : Hiérarchiser les contenus : Catégorisation, domaine Pourquoi ? ● Eviter les impasses ● Effets labyrinthes ● Guider l’internaute ● Risque de départ prématuré Partie 3 : Ergonomie Fil d’ariane Menu simple et efficace
  21. 21. Dimension : Hauteur ● Proposer de remonter en tête de page ● Jouer avec les signets sur une page ● Scroller sur 2 à 3 écrans max Pourquoi ? ● Adapter le contenu au support mobile ● Facilité la navigation sur tout type de support ● Méconnaissance de la touche “home” du clavier Partie 3 : Ergonomie Signet interne “Back to top” <a href="#top">Back to top</a> Astuce des touches “page up” et “page down” x 3
  22. 22. Largeur Astuces : thegridsystem.org, 960.gs Dimension : Largeur ● Jamais de “scroll” horizontal ● Centrer les contenus ● Choisir une largeur universel : résolutions standards ● Jouer sur la fluidité cf. Responsive-design Pourquoi ? ● Risque de masquer de l’information ● Scroll contre-usage Partie 3 : Ergonomie A A 960px, 1024px, 1170px
  23. 23. Rendu ● Choisir des couleurs homogènes et sobre ● 3 couleurs max (hors noir et blanc) ● Préférer un fond clair ● Jouer sur les contrastes ● Harmoniser tous les éléments ● Éviter les textes dans les images ● Éviter les perturbations graphiques : défilement, clignotant, vidéos automatiques Pourquoi ? ● Faciliter la lecture ● Faciliter l’appréhension du contenu ● Optimiser le focus sur le sujet central Partie 3 : Ergonomie Exemples à bannir Lisibilité : ceci est difficile à lire Les killers ! : Chatterie & pécheur Contrastes un élément contrasté lisible Harmonies Pastels
  24. 24. Icônographie ● Rester simple et efficace ● Jouer sur la transparence ● Jongler avec les standards / grands classiques ● Aide contextuelle ● Évaluer l’utilité d’une icône ? ● Utiliser la techniques des “sprites” Pourquoi ? ● Éviter les contresens ● Fluidité et productivité accrue ● Faciliter l’internationalisation Partie 3 : Ergonomie Exemples Aide <img title=”Copier” src=”copy.png” alt=”Copier” /> Utilité de l’icône VS "Placeholder" <input type=”text” placeholder=”Rechercher” … /> Astuces : glyphicons.com, fontello.com
  25. 25. Police ● Proposer des tailles modifiables ● Utiliser les polices Sans serif ● Éviter les italiques ● Réserver le soulignement uniquement pour les liens ● 2 polices au maximum par site Pourquoi ? ● Faciliter la lecture ● Repérer facilement l’organisation générale d’une page Partie 3 : Ergonomie A+/a- Lisibilité Une police serif ralentit la lecture par rapport à une police sans serif Un texte en italique est moins lisible qu’un texte normal sans serif Un contenu textuel présenté dans une police exotique est parfois illisible Si je présente un bout de texte souligné l’internaute risque de confondre avec les vrais liens Astuce : sur les balises <a> forcer “cursor: pointer” pour faire apparaître une main
  26. 26. Formulaire ● Proposer un fil de saisie logique ● Mettre en surbrillance au focus ● Identifier les champs obligatoires ● Proposer des masques de saisie Pourquoi ? ● Productivité accrue ● Fluidifier la “saisie au kilomètre” Partie 3 : Ergonomie Fil de saisie & focus Champ obligatoire & masque de saisie 1 2 3 4
  27. 27. Compatibilité X-Browser ● Utiliser les“reset.css” ou “normalize.css” ● Utiliser les “Hacks” IE ● Partir d’une base multi-plateforme ● Ne pas négliger les tests sur tous les supports ● Rappel : Attention aux templates en ligne Pourquoi ? ● Éviter de “réinventer la roue” ● Toucher une audience large ● Uniformiser le rendu Partie 3 : Ergonomie Extrait de “normalize.css” /* Remove default margin. */ body { margin: 0; } /* Remove the gray background color from active links in IE 10. */ a { background: transparent; } Exemples de hacks IE <!--[if IE]><link … href="ie.css" /><![endif]--> <!--[if lte IE 8]><link … href="ie-lt8.css" /><! [endif]--> Astuces : initializr.com, HTML5Boilerplate.com, Normalize.css
  28. 28. Design Adaptatif ● Proposer un rendu adapté au support ○ Responsive Web Design ○ Scalable Design ● Détecter automatiquement le support ● Utiliser les Media Queries Pourquoi ? ● Toucher une audience plus large ● Optimiser l’affichage des contenus Partie 3 : Ergonomie Site Alteca : responsive & scalable design Media Queries <link rel="stylesheet" media="screen" href="screen. css" type="text/css" /> @media (max-device-width: 480px) { … } @media screen and (min-width: 200px) and (max-width: 640px) { … } Astuces :978.gs, detectmobilebrowser.com
  29. 29. Conclusion Conclusion
  30. 30. En résumé ● Utiliser des standards ● Valider le code ● Optimiser les pages ● Sécuriser vos applications ● Se mettre à la place de l’utilisateur ● Demander des avis ● Penser multi-plateforme Conclusion Conclusion
  31. 31. Questions / Réponses @fcreton +FrançoisCRETON fcreton@alteca.fr Merci de votre attention
  32. 32. Contacter Alteca Site Web www.alteca.fr @SSII_Alteca +Alteca facebook.com/alteca Recrutement recrutement@alteca.fr 04.72.69.72.72

×