Développer des interfaces web riches, sémantiques et ergonomiques en HTML5, CSS3 et jQuery.
L'objectif du cours est d'avoir une vision d'ensemble du métier d'intégrateur web, et d'être capable de réaliser n'importe quel type de mise en page, en mixant les solutions techniques existantes, "from scratch" ou via des solutions clé-en-main.
L'expression du but : fiche et exercices niveau C1 FLE
Développement d'interfaces web
1. Intégration
HTML5 / CSS3 / jQuery
« Développement d’interface »
Auteur : David Desrousseaux @desrousseaux
2. 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
3. ERGONOMIE : DEFINITIONS, MESURES, etc.
Triangle d’Or de Google / F-Pattern
Analyse du sens de lecture par eye-tracking
captation du mouvement des yeux
Développement d’interface
N°3
4. ERGONOMIE : DEFINITIONS, MESURES, etc.
Eye-tracking vs. Mouse/Click-tracking
Analyse UX « User eXperience »
Cf. Dailymotion : Eye-tracking + animaux
Clickheat (GNU)
Développement d’interface
N°4
5. ERGONOMIE : DEFINITIONS, MESURES, etc.
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
Développement d’interface
N°5
6. ERGONOMIE : DEFINITIONS, MESURES, etc.
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. »
Développement d’interface
N°6
7. ERGONOMIE : DEFINITIONS, MESURES, etc.
Exemple de cas dans l’e-commerce
« Eye-catcher » persistants de Decathlon.fr et Edenzo.com
Développement d’interface
N°7
8. ERGONOMIE : DEFINITIONS, MESURES, etc.
Autres exemples de « fine-tuning »
Zappos : search « call-to-action », Youtube.com : scroll & header 60px
Développement d’interface
N°8
9. ERGONOMIE : DEFINITIONS, MESURES, etc.
UI : Flat design vs Skeuomorphisme
« User Interface » : styles graphiques Web 2.0
+ style « métro »
Développement d’interface
N°9
10. ERGONOMIE : DEFINITIONS, MESURES, etc.
Le Responsive Web Design /1
Plus besoin de version mobile spécifique pour rendre le contenu accessible !
Autres études de cas :
Développement d’interface
N°10
11. ERGONOMIE : DEFINITIONS, MESURES, etc.
Le Responsive Web Design /2
Quelques statistiques…
Développement d’interface
N°11
12. ERGONOMIE : DEFINITIONS, MESURES, etc.
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 »
Développement d’interface
N°12
13. ERGONOMIE : DEFINITIONS, MESURES, etc.
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.
Développement d’interface
N°13
14. ERGONOMIE : DEFINITIONS, MESURES, etc.
Normes d’accessibilité WCAG / WAI
Ex : test de lisibilité / colorimétrie avec « Colour Contrast Analyzer »
Développement d’interface
N°14
15. ERGONOMIE : DEFINITIONS, MESURES, etc.
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
Développement d’interface
N°15
16. ERGONOMIE : DEFINITIONS, MESURES, etc.
Tests Cross-browser
En mode local ou cloud ie. browershots.org
Développement d’interface
N°16
17. 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" />
Développement d’interface
N°17
18. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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
Développement d’interface
N°18
19. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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">
Développement d’interface
N°19
20. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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,
<!--[if IE]><meta http-equiv="imagetoolbar" content="no" /><![endif]-->
…
<!--[if IE]><meta http-equiv="MSThemeCompatible" content="no" /><![endif]-->
<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 !
Développement d’interface
N°20
21. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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
Développement d’interface
N°21
22. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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 ».
Développement d’interface
N°22
23. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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
Développement d’interface
N°23
24. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
Développement d’interface
N°24
25. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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
Développement d’interface
N°25
26. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
HTML5 et Responsive sous Safari
Activation d’un plug-in de lecture, sur ordi & mobile/tablette
Etude de cas :
Développement d’interface
N°26
27. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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.
Développement d’interface
N°27
28. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
…
Développement d’interface
N°28
29. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
Développement d’interface
N°29
30. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
Développement d’interface
N°30
31. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
Upload HTML5
La puissance de l’ergonomie de l’HTML5 via le drag’n’drop
Développement d’interface
N°31
32. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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 !
Développement d’interface
N°32
33. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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/
Développement d’interface
N°33
34. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
Développement d’interface
N°34
35. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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.
Développement d’interface
N°35
36. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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.
Développement d’interface
N°36
37. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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.
Développement d’interface
N°37
38. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
Développement d’interface
N°38
39. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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 ? ;)
Développement d’interface
N°39
40. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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>
Développement d’interface
N°40
41. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
Pour aller + loin : les µformats
Schema.org, RDFa … la sémantique absolue
Développement d’interface
N°41
42. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
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.
Développement d’interface
N°42
43. HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc.
Litmus : Email testing & rendering
Prévisualiser ses intégrations avant routage
Développement d’interface
N°43
44. 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
Développement d’interface
N°44
45. CSS : MISE EN PAGE, WEBDESIGN
Un outil incontournable : Firebug
FF / Chrome / Opera (DragonFly)
Développement d’interface
N°45
46. CSS : MISE EN PAGE, WEBDESIGN
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
Développement d’interface
N°46
47. CSS : MISE EN PAGE, WEBDESIGN
Un dessin complexe en CSS3
L’icône du Cloud… 100% conçu en CSS
http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background
Développement d’interface
N°47
48. CSS : MISE EN PAGE, WEBDESIGN
Framework CSS
KNACSS, Bootstrap, 960 Grid System, Blueprint etc.
Ils permettent de créer le layout et le thème de votre site rapidement.
Développement d’interface
N°48
49. CSS : MISE EN PAGE, WEBDESIGN
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; }
Développement d’interface
N°49
50. CSS : MISE EN PAGE, WEBDESIGN
CSS Conditionnel
Au bon souvenir d’IE6 cf. IE6Countdown
<!--[if gte IE 6]> body { background: #f00; } <![endif]-->
<!--[if IE 6]> pour IE 6.0 <![endif]-->
<!--[if IE 7]> pour IE 7.0 <![endif]-->
<!--[if IE 8]> pour IE 8.0 <![endif]-->
<!--[if IE 9]> pour IE 9.0 <![endif]-->
<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->
<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->
<!--[if (gt IE 5)&(lt IE 7)]> pour IE supérieur à IE 5.0 et inférieur à IE 7 <![endif]-->
Développement d’interface
N°50
51. CSS : MISE EN PAGE, WEBDESIGN
CSS Pseudo-classe
Définir un style CSS pour un état
:link
:visited
:hover
:active
:first-child
:lang
Développement d’interface
N°51
52. CSS : MISE EN PAGE, WEBDESIGN
CSS Pseudo-element
Définir un style CSS pour un élément HTML
:first-child
:first-letter
:first-line
:after
:before
Développement d’interface
N°52
53. CSS : MISE EN PAGE, WEBDESIGN
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;
Développement d’interface
N°53
54. CSS : MISE EN PAGE, WEBDESIGN
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
Développement d’interface
N°54
55. CSS : MISE EN PAGE, WEBDESIGN
Des centaines de fontes délivrées par Google
Attention au
temps de
chargement !
Développement d’interface
N°55
56. CSS : MISE EN PAGE, WEBDESIGN
Font Awesome
Des icônes vectorielles pour tous vos eye-catcher
Développement d’interface
N°56
57. CSS : MISE EN PAGE, WEBDESIGN
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
Développement d’interface
N°57
58. CSS : MISE EN PAGE, WEBDESIGN
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/
Développement d’interface
N°58
59. CSS : MISE EN PAGE, WEBDESIGN
Sprites CSS
Pour optimiser sa notation PageSpeed, en allégeant les appels aux images
Développement d’interface
N°59
60. CSS : MISE EN PAGE, WEBDESIGN
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
Développement d’interface
N°60
61. CSS : MISE EN PAGE, WEBDESIGN
Elements flottants en CSS
CSS Floating : Float + Clear
Attention : IE6 : float+padding = double marge
Développement d’interface
N°61
62. CSS : MISE EN PAGE, WEBDESIGN
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.
Développement d’interface
N°62
63. CSS : MISE EN PAGE, WEBDESIGN
Exercice : Mises en page classiques
Centrer une page web, sans la balise <center> ;)
Développement d’interface
N°63
64. CSS : MISE EN PAGE, WEBDESIGN
Hyphen / CSS Text-overflow
Tronquer visuellement des textes
white-space / block vs. Inline / overflow / hyphen
Développement d’interface
N°64
65. CSS : MISE EN PAGE, WEBDESIGN
Exercice : Créer une « ModalBox »
Overlayer avec un background opaque + formulaire de conversion « opt-in »
Persistant en zone de flottaison et SEO
Développement d’interface
N°65
66. CSS : MISE EN PAGE, WEBDESIGN
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
Développement d’interface
N°66
67. CSS : MISE EN PAGE, WEBDESIGN
Exercice : générer des « tooltip »
100% en CSS3
Développement d’interface
N°67
68. CSS : MISE EN PAGE, WEBDESIGN
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
Développement d’interface
N°68
69. CSS : MISE EN PAGE, WEBDESIGN
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;}
}
Développement d’interface
N°69
71. JAVASCRIPT
Tip #2 : Modernizr.js
Une librairie en jQuery pour benchmarker les browser
Développement d’interface
N°71
72. 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;
}
Développement d’interface
N°72
73. 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/
Développement d’interface
N°73
74. 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>
Développement d’interface
N°74
75. 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
Développement d’interface
N°75
76. JAVASCRIPT
Créer des Animations avec jQuery UI
Animations interactives
Différentes applications :
• Accordéon,
• Scroll asynchrone
• Slideshows
• Lightbox
• …
Exercice :
Développer une « boite coulissante / sliding box »
Autre alternative :
Kendo UI
Développement d’interface
N°76
77. JAVASCRIPT
Créer des Animations avec jQuery UI
Animations interactives
Différentes applications :
• 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
Développement d’interface
N°77
78. 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});
}
Développement d’interface
N°78
79. Pour aller + loin…
Rendez-vous sur Codeopen.io
Réseau social d’intégrateurs web
Développement d’interface
N°79
80. Merci !
Rendez-vous sur :
http://www.lesintegristes.net/
http://www.alsacreations.com/
Auteur : David Desrousseaux @desrousseaux