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. 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. 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
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. 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. 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]" />
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
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
