Embed Size (px)
Citation preview
Les bonnes pratiques du développement WebFrançois Creton - Avril 2014
Site Web www.alteca.fr
@SSII_Alteca
+Alteca
facebook.com/alteca
● 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é
● 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
Sommaire
Partie 1 : CodePartie 2 : OptimisationPartie 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é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’arborescenceapp/ 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/, ….
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
StandardsW3C, IETF, ISO, Web Standards Project
Validation du codeW3C Validator, JSHint, Validom
Contrôle continuSonarQube, CheckStyle, PHP_CodeSniffer
Conventions de nommageCONSTANT, Class, UpperCamelCase, lowerCamelCase, mon-id, ma_variable, ...
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, ...
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
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)
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 à bannirjQuery().each(function(i) { …
jQuery.ajax({
type: 'POST',
url: 'customers.php',
data: {
id: id,
active: true,
format: json
},
success: function(data) { … },
error: function() { … }
});
… });
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
Optimisation
Partie 2 : Optimisation
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>
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" … />
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]" />
Ergonomie
Partie 3 : Ergonomie
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
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
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
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
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
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 à lireLes killers ! : Chatterie & pécheur
Contrastesun élément contrasté lisible
Harmonies
Pastels
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
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
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
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
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
Conclusion
Conclusion
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
Contacter AltecaSite Web www.alteca.fr
@SSII_Alteca
+Alteca
facebook.com/alteca
