Alteca - les bonnes pratiques du développement Web - avril 2014

Les bonnes pratiques du développement WebFrançois Creton - Avril 2014

Site Web www.alteca.fr

@SSII_Alteca

+Alteca

facebook.com/alteca

Recrutementrecrutement@alteca.fr04.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é

● 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

Questions / Réponses

@fcreton+FrançoisCRETONfcreton@alteca.fr

Merci de votre attention

Contacter AltecaSite Web www.alteca.fr

@SSII_Alteca

+Alteca

facebook.com/alteca

Recrutementrecrutement@alteca.fr04.72.69.72.72