Développement d'interfaces web

Intégration
HTML5 / CSS3 / jQuery
« Développement d’interface »
Auteur : David Desrousseaux @desrousseaux

INTRODUCTION

Une intégration HTML/CSS réussie, c’est :
1. Une page ergonomique
sobre, lisible… et qui répond aux critères de « usability »

2. Une découpe de type « responsive web design »
pour s’adapter à tous types d’écrans

3. Une page rapide
minimiser le temps d'affichage d'une page, des images…

4. Une page orientée SEO
pour être « Google Friendly »

5. Une page compatible cross-browser
accessible à tous, sans bug, quel que soit le navigateur

Développement d’interface
N°2

ERGONOMIE : DEFINITIONS, MESURES, etc.

Triangle d’Or de Google / F-Pattern
Analyse du sens de lecture par eye-tracking
captation du mouvement des yeux

N°3


Eye-tracking vs. Mouse/Click-tracking
Analyse UX « User eXperience »

Cf. Dailymotion : Eye-tracking + animaux

Clickheat (GNU)

N°4


Split-testing : TEST A/B & TEST MVT
Baisser le taux de rebond, optimiser le taux de transformation
inclus dans Google Analytics, Omniture, etc.

Etude de cas

N°5


Zone de flottaison / « Above the fold »
« Zone chaude avant le scroll »
NB : Google pénalise les sites dont le contenu important des pages est hors de la zone de flottaison

Outil gratuit de test :
Google Browser Size
Etude de cas : « sticky header »

La Loi de Fitts : « un compromis vitesse-précision associé au pointage, où les
cibles les plus petites ou éloignées nécessitent plus de temps pour être
atteintes. »

N°6


Exemple de cas dans l’e-commerce
« Eye-catcher » persistants de Decathlon.fr et Edenzo.com

N°7


Autres exemples de « fine-tuning »
Zappos : search « call-to-action », Youtube.com : scroll & header 60px

N°8


UI : Flat design vs Skeuomorphisme
« User Interface » : styles graphiques Web 2.0
+ style « métro »

N°9


Le Responsive Web Design /1
Plus besoin de version mobile spécifique pour rendre le contenu accessible !

Autres études de cas :

N°10


Le Responsive Web Design /2
Quelques statistiques…

N°11


Optimiser le temps de chargement
GT Metrix : croisement entre Yslow & PageSpeed

« +100 ms de load » =
-1 % de ventes
Amazon, 2006

La vitesse de chargement des pages est essentielle pour l’UX « User eXperience »

N°12


Le mythe de la règle des 3 clics
L’internaute doit trouver ce qu’il veut en moins de 3 clics, sinon bye bye ?...

Concrètement, éviter la surmultiplication des clics,
afin de ne pas créer de frustration chez l’internaute.

N°13


Normes d’accessibilité WCAG / WAI
Ex : test de lisibilité / colorimétrie avec « Colour Contrast Analyzer »

N°14


Une intégration orientée SEO
Permet d’optimiser l’affichage dans les SERP
1. Des « jumplinks »,
grâce à des liens
hypertextes encadrés
de <h2>
2. Un « breadcrumb »
qui permet de baisser le
« bounce rate »
3. Une liste d’élèments
splités dans un
« snippet » du SERP de
Google

N°15


Tests Cross-browser
En mode local ou cloud ie. browershots.org

N°16

HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.

Rappel de base des balises HTML
balise ouvrante : <p> et balise fermante : </p>
balises imbriquées : <p><span> […] </span></p>
balise auto-fermante : <input />
NB : obligatoire en XHTML, conseillé en HTML5

attributs de balises : <input type="button" />

N°17


Structure d’une page web
Wireframing, Design Pattern ou Mock-up…
La page est composée d’un entête
<head>, contenant les identifications de la
page web, et d’un corps <body>, visible dans
la page du browser. Depuis l’HTML5, il est en
de même pour chaque entité de la page, qui
peuvent être composée d’un entête
<header>, d’un pied de page <footer>, etc.
Un bon outil pour réaliser des mockup
collaboratifs : moqups.com
Largeur standard max : 950px à 980px

N°18


Le doctype d’une page web
Avant le <head>
XHTML 1.0 Strict : strict/transtionnal/frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
HTML5 :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">

N°19

Les METADATA
Inclues dans le <head> de la page
<meta charset="utf-8" />
<title> ... </title>
Titres,
<meta name="description" content="..." />
<meta name="keywords" content="..." />
Balises standards,
<meta content="2 days" name="revisit-after" />
Balises inutiles,
<meta name="viewport" content="width=device-width" />
Balises « DC Dublin Core »,
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Balises « OG Opengraph » http://ogp.me/,
<meta name="format-detection" content="telephone=no" />
Balises propriétaires,
<meta name="HandheldFriendly" content="true" />
<meta name="robots" content="INDEX, FOLLOW" />
Conditionnel IE,
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Responsive Web Design,

…

<meta property="og:locale" content="fr_FR"/>
<meta property="og:type" content="article"/>
<meta property="og:title" content="Nuukik- Moteur de Personnalisation"/>
<meta property="og:description" content="Nuukik, moteur de personnalisation omnicanal pour le commerce."/>
<meta property="og:url" content="http://www.nuukik.com/"/>
<meta property="og:site_name" content="Nuukik - Personalization Technologies"/>
<meta property="article:publisher" content="http://www.facebook.com/nuukik.co"/>
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@nuukik"/>
<meta name="twitter:domain" content="Nuukik - Personalization Technologies"/>
<meta name="twitter:creator" content="@nuukik"/>

Il y a une infinité de possibilités !

N°20


Les balises <meta> OpenGraph
Analyse des infos fournies par Facebook
Données utilisées par les boutons de partage Fb, G+ etc.

Cas d’une page « Entreprise »
http://graph.facebook.com/shapelize

Cas d’un profil « Particulier »
http://graph.facebook.com/david.desrousseaux

N°21


Les balises <link>
Pour associer la page web à un contenu alternatif
STYLESHEET CSS
<link rel="stylesheet" href="base.css" type="text/css" />
ICON
<link rel="shortcut icon" href="/favicon_exp.ico" />
ALTERNATE / RSS, ATOM, etc.
<link rel="alternate" type="application/rss+xml" title="Flux"
href="feed.xml" />
PINGBACK (=rétrolien)
<link rel="pingback" href="xmlrpc.php" />
Standardisé dans Wordpress. Ex : si Bill mentionne, ou répond à un post de Bob, via son propre blog, le pingback
active automatiquement l’apparition d’un commentaire sous le post de Bob, avec un lien vers le post de Bill.

CANONICAL
<link rel="canonical" href="http://www.site.com/exemple.html" />
Permet de suggérer à Google que cette URL est canonique à la page en cours. Les contenus de ces 2 pages sont
100% identiques, et sont là pour éviter du « DC Duplicate Content ».

N°22


D’autres balises d’entête
Toujours dans le <head>
BASE
<base href="http://www.site.com/index.html" />
Pour déterminer une URL relative de la page.

SCRIPT
<script type="text/javascript" src="/script.js"></script>
PageSpeed et Yslow conseillent tous deux de placer les scripts en bas de page,
pour éviter des ralentissements de chargements.
Ex : tag Analytics

N°23


Les headings
Dans les zones d’entête du corps de la page
PS : la balise hgroup est retiré des docs officielles du W3C depuis Avril 2013

<hgroup>
<h1> … <h6>
</hgroup>
Prérogatives :
1. 1 seul <h1> par page URL
2. Ne pas sauter ni inverser les niveaux
Téléchargez HeadingsMap sous FF & Chrome
pour tester vos headings !
Le <h1> est utilisé pour :
• Le logo d’une homepage (avec son texte alternatif)
• Le titres d’une page. Conseil SEO : différent du <title>

N°24


La structure d’une page HTML5
Nouvelles balises sémantiques, à tester avec HeadingsMap !
Balises de sectioning
<header>
<footer>
<section>
<article>
<aside>
<nav>

Pour une compatibilité IE < 9 : html5shiv
N°25


HTML5 et Responsive sous Safari
Activation d’un plug-in de lecture, sur ordi & mobile/tablette

Etude de cas :

N°26


Interactivité : liens hypertextes
Liens internes et liens externes
NON
<a href="/index.php" title="Cliquez ici" target="_blank">
Cliquez ici
</a>
OUI
<a href="#zone" title="Découvrir sa biographie" target="_blank">
Michael Schumacher
</a>
L’attribut title doit apporter une information complémentaire à celle lisible dans le
lien, et ne jamais répéter le contenu : inutile, et aucun effet en SEO.

N°27


Attributs « rel » pour les ancres
Pour donner du sens complémentaire à vos liens !

<a href="#" rel="nofollow"> Ne pas suivre le lien </a>
<a href="#" rel="author"> Profil Google+ </a>
<a href="#" rel="help"> une aide contextuelle </a>
<a href="#" rel="external"> une source externe </a>
<a href="#" rel="bookmark nofollow"> permalien </a>
<a href="#" rel="tag"> cinéma </a>
<a href="#" rel="search"> accéder à la recherche </a>
<a href="#" rel="next"> article suivant </a>
<a href="#" rel="prev"> article précédent </a>
…

N°28


Les tableaux
A n’utiliser que pour des contenus bien spécifiques
mais surtout pas pour une mise en page globale !
<table>
<caption> titre du tableau </caption>
<thead>
<tr>
<th> a1 </th>
<th> a2 </th>
</tr>
</thead>
<tfoot>
<tr>
<td> pied de page </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> a </td>
<td> a </td>
</tr>
</tbody>

Encore utilisés dans l’e-mailing, les
tableaux peuvent gérer des mises en
page sans CSS grâce aux attributs :
• Cellpadding
• Cellspacing
• Border
• Valign / Align
etc.

Les tableaux sémantiques sont
capables de générer des richsnippets.

</table>

N°29


L’interactivité via les formulaires
Formulaires sémantiques en HTML : tabindex, type HTML5…
<form action="#" method="post">
<fieldset>
<legend>Vos coordonnées</legend>
<label for="champ">Nom</label>
<input type="text" id="champ" value="" />
<label for="prenom">Prénom</label>
<input type="text" id="prenom" value="" />
</fieldset>
<button type="submit">
<span>Soumettre</span>
</button>
</form>

N°30


Upload HTML5
La puissance de l’ergonomie de l’HTML5 via le drag’n’drop

N°31


Les listes & définitions
Liste numérotée, non-numérotée, liste de définition

Liste non-numérotée
<ul>
<li>[...]</li>
<li>[...]</li>
</ul>
Liste numérotée
<ol>
<li>[...]</li>
<li>[...]</li>
</ol>

Liste de définitions
<dl>
<dt>[...]</dt>
<dd>[...]</dd>
<dt>[...]</dt>
<dd>[...]</dd>
</dl>

Les listes sémantiques sont également capables de générer
des rich-snippets. cf. slide n°14.
Attention à la problématique des paginations !

N°32


La norme WAI-ARIA
Qui permet de générer des attributs « role » sémantiques
<li role="menuitemcheckbox" aria-checked="true">
<img src="checked.gif" role="presentation" alt=" " />
Organisé de A à Z
</li>
Accessible Rich Internet Applications
http://www.w3.org/TR/wai-aria/

Les plus récurrents :
main, search, banner, form, complementary, etc.
http://blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/

N°33


Les listes optimisées en HTML5
Liste numérotée ou non-numérotée, de type navigation

<nav role="navigation">
<header>
<hx> Vous recherchez un produit ? </hx>
</header>
<ul>
<li> jouet </li>
<li> chaussure </li>
etc.
</ul>
</nav>

N°34


Les images
Avec l’optimisation du balisage sémantique HTML5
<figure>
<img src="image.jpg" alt="Texte alternatif" longdesc="description.txt" />
<figcaption>
Légende de l’image
</figcaption>
</figure>

Images en .gif .png ou .jpeg uniquement et 72dpi.
Le texte alternatif décrit l’image en 255 caractères max.
La longue description est un attribut dédié à l’accessibilité, il s’agit d’un fichier texte
qui décrit physiquement le contenu du visuel.

N°35


Le cas des bannières de publicité
Des dimensions spécifiques à respecter au pixel près !
<div role=" ??? ">
<a href=“#”>
<img src="image.jpg" alt="Texte alternatif" />
</a>
</div>
Les bannières de publicité sont régies par l’IAB Internet Advertising Bureau et sont
réglementées par des noms et des formats très précis, au pixel près :
Megabanner 728x90,
Pavé 300x250,
Skyscraper 600x120,
etc.

N°36


Cas pratique : les camemberts
Fabriquer des visuels statistiques grâce à Google Charts

Grâce à Google Charts,
camemberts, et graphes de
statistiques divers sont
extrêmement simples à générer.
Google préconise de concevoir un
<div> alimenté par du Javascript.
On pourra simplement compléter
ce <div> d’un attribut role ARIA.

N°37


Balises textes
<div>, <span>… n’ont pas de valeur sémantique!
<blockquote>
citation
</blockquote>
<p>
Lorem Ipsum<br />
Lorem Ipsum
</p>

Une page encodée en UTF8 doit contenir des
caractères 100% encodés :
é é
À À
ç ¸
etc.
… et pour composer vos pages,
profitez du Lorem Ipsum !

<address>
coordonnés
</address>
N°38


Balises sémantiques « inline »
L’inverse des balises de type block : les balises de « phrasing »

<strong>
<b>
<em>
<mark>
<i>
<u>
<small>
<big>
<abbr>
...
Les connaissez-vous toutes ? ;)

N°39


Nouveauté HTML5 : le canvas
Effectuer des rendus dynamiques d'images bitmap via des scripts
<canvas id="mon_canvas" width="500" height="500">
Message pour les navigateurs ne supportant pas encore canvas.
</canvas>
<script>
var exemple = document.getElementById('exemple');
var contexte = exemple.getContext('2d')
contexte.fillStyle = "rgba(0,0,255,0.5) ";
contexte.fillRect(30, 30, 50, 50);
</script>

N°40


Pour aller + loin : les µformats
Schema.org, RDFa … la sémantique absolue

N°41


Exercice : intégrer un e-mail en HTML
Retour à l’HTML 4.01 Transitionnal, no-CSS

Checklist :
- Largeur max ?
- LEN 2001
- Lien miroir

ALERTE : Outlook 2007 ne prend pas les « colspan » et « rowspan » en compte.

N°42


Litmus : Email testing & rendering
Prévisualiser ses intégrations avant routage

N°43

CSS : MISE EN PAGE, WEBDESIGN

Connexion entre HTML et CSS
#id vs .class
HTML
<a class="link red">
lien
</a>

CSS
.link { /* */ }
.red { /* */ }
.link.red { /* */ }

<a id="link">
lien
</a>

#link { /* */ }

• 1 seul id par page
• plusieurs classes séparées par un espace

N°44


Un outil incontournable : Firebug
FF / Chrome / Opera (DragonFly)

N°45


La puissance du CSS
La démonstration de Zen-Garden
• 1 seul code HTML
• xxx styles CSS
=
Pleins de styles et
d’univers 100%
différents

N°46


Un dessin complexe en CSS3
L’icône du Cloud… 100% conçu en CSS
http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

N°47


Framework CSS
KNACSS, Bootstrap, 960 Grid System, Blueprint etc.
Ils permettent de créer le layout et le thème de votre site rapidement.

N°48


Tip #1 : Reset CSS / Normalize CSS
Avant de démarrer, en vue d’optimiser les post-intégrations cross-browser
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before,
blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing:
0; }

N°49

CSS Conditionnel
Au bon souvenir d’IE6 cf. IE6Countdown







N°50


CSS Pseudo-classe
Définir un style CSS pour un état

:link
:visited
:hover
:active
:first-child
:lang

N°51


CSS Pseudo-element
Définir un style CSS pour un élément HTML

:first-child
:first-letter
:first-line
:after
:before

N°52


Préfixes propriétaires / vendeurs
« Vendor prefixes » : Webkit, Konqueror, Opera, etc.
-o- pour Opera
-moz- pour Gecko (Mozilla)
-webkit- pour Webkit (Chrome, Safari, Android...)
-ms- pour Microsoft (Internet Explorer)
-khtml- pour KHTML (Konqueror)
mso- pour Microsoft Outlook
Recommandation d’usage courant :
utiliser la propriété globale en dernier.
-o-opactity: 0.1;
-ms-opactity: 0.1;
-khtml-opactity: 0.1;
opacity: 0.1;

N°53


CSS Font-Stack
Lister les fontes serif/sans-serif, en fonction du set-up one-to-one

INFO : Cufón Fonts, alternative pour intégrer des polices TrueType et OpenType

N°54


Des centaines de fontes délivrées par Google

Attention au
temps de
chargement !

N°55


Font Awesome
Des icônes vectorielles pour tous vos eye-catcher

N°56


Unités PX vs. EM
Recommandation WCAG # Comment définir les dimensions en CSS ?
• px = tout, sauf les textes
• em = les textes
EM est un calcul de
pourcentage relatif, en
fonction de la taille de la
fonte du père, etc.
Base par défaut,
cf. reset CSS : 16px
http://pxtoem.com

N°57


CSS Image Replacement
Très pratique pour conserver une optimisation SEO dans son intégration.

text-indent négatif + overflow hidden + width/height.
http://css-tricks.com/css-image-replacement/

N°58


Sprites CSS
Pour optimiser sa notation PageSpeed, en allégeant les appels aux images

N°59


Exercice : créer un système de notation
100% SEO
Réaliser une notation de 0 à 5, 100% en sprite et très simple à modifier,
avec des noms de classes formatés « note-0 », « note-1 » … « note-5 »
en utilisant les microformats

N°60


Elements flottants en CSS
CSS Floating : Float + Clear

Attention : IE6 : float+padding = double marge
N°61


Exercice : créer des Div PA
Div « Position Absolute »
Différentes applications :
• Dogear / Peeling-corner / Call-to-action en top-corner
• Sticky Block parfois conçus en position:fixed
• Overlayer vs. Splash-page
• Habillages / Vampirisations
• Flyout

Exercice :
Créer un « One-Page-Website » contenant un bloc
<div> de couleur grise, contenant lui-même un plus
petit bloc <div> jaune, aligné en bas à gauche grâce à
du CSS, comme ci-joint.

N°62


Exercice : Mises en page classiques
Centrer une page web, sans la balise <center> ;)

N°63


Hyphen / CSS Text-overflow
Tronquer visuellement des textes
white-space / block vs. Inline / overflow / hyphen

N°64


Exercice : Créer une « ModalBox »
Overlayer avec un background opaque + formulaire de conversion « opt-in »
Persistant en zone de flottaison et SEO

N°65


Un Breadcrumb avec des sélecteurs CSS
Exercice : positionner des éléments virtuels non crawlés, pour le SEO

Etude de cas : Rich Snippet Testing Tool

N°66


Exercice : générer des « tooltip »
100% en CSS3

N°67


Responsive Web Design
<meta name="viewport" content="width=device-width, initial-scale=1, minimumscale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" media="screen" href="layout.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 1240px)" href="large.css" />
<link rel="stylesheet" media="print" href="print.css" />
Media Queries
Pour une compatibilité crossbrowser,
utilisez le « polyfill » Respond.js

N°68


CSS3 @keyframes animations
Pas besoin de javascript pour créer des animations interactives
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

N°69

JAVASCRIPT

Les Framework JavaScript
jQuery, Angular, Prototype, MooTools, Dojo…

N°70

JAVASCRIPT

Tip #2 : Modernizr.js
Une librairie en jQuery pour benchmarker les browser

N°71

JAVASCRIPT

Syntactically Awesome Style Sheets
SASS, une extension CSS

Exemple :
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

N°72

JAVASCRIPT

LESS : Dynamisez vos CSS
Compressez l’écriture de vos CSS
Exemple 1 :

Exemple 2 :

@color: #4D926F;

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;

#header { color: @color; }
h2 { color: @color; }

.post a { color: red; .bordered; }

Pour aller plus loin :
http://css-tricks.com/sass-vs-less/

N°73

JAVASCRIPT

La transmission des variables HTML5
Avec l’attribut standard data

Comment rendre valide cette balise ?
<img src="photo.jpg" auteur="Simon" />
Réponse
<img src="photo.jpg" id="moto" data-auteur="Simon" />
<script>
var monelement = document.getElementById('moto');
var auteur = monelement.dataset.auteur;
en jQuery : $("#moto").data("auteur");
</script>

N°74

JAVASCRIPT

Handlebars : minimiser les templates
Pour générer des templates synthétiques… mais gare au SEO !

<div class="entry »>
<h1>{{title}}</h1>
<div class="body »>
{{{body}}}
</div>
</div>
<script id="entry-template" type="text/x-handlebars-template">

</script>
Autre alternative :
Emblem.js

N°75

JAVASCRIPT

Créer des Animations avec jQuery UI
Animations interactives
• Accordéon,
• Scroll asynchrone
• Slideshows
• Lightbox
• …

Exercice :
Développer une « boite coulissante / sliding box »
Autre alternative :
Kendo UI

N°76

JAVASCRIPT

Créer des Animations avec jQuery UI
Animations interactives
• Accordéon,
• Scroll asynchrone
• Slideshows
• Lightbox
• …

Exercice :
Développer une « boite coulissante / sliding box » et y appliquer un système de
« Progessive Rendering », pour alléger les temps de chargement.
Autre alternative :
Kendo UI

N°77

JAVASCRIPT

Professional-Grade HTML5 Animation
Créer des animations complexes avec GSAP.js : TweenLite + TweenMax
window.onload = function() {
var thing =
document.getElementById("thing");
TweenLite.to(thing, 3, { left:"600px", ease:Bounce.easeOut});
}

N°78

Pour aller + loin…

Rendez-vous sur Codeopen.io
Réseau social d’intégrateurs web

N°79

Merci !
Rendez-vous sur :

http://www.lesintegristes.net/
http://www.alsacreations.com/

Auteur : David Desrousseaux @desrousseaux

Développement d'interfaces web

Développement d'interfaces web

Recommended

More Related Content

What's hot

What's hot(16)

Viewers also liked

Viewers also liked(8)

Similar to Développement d'interfaces web

Similar to Développement d'interfaces web(20)

Recently uploaded

Recently uploaded(11)

Développement d'interfaces web