• Save
Développement d'interfaces web
Upcoming SlideShare
Loading in...5
×
 

Développement d'interfaces web

on

  • 1,331 views

Développer des interfaces web riches, sémantiques et ergonomiques en HTML5, CSS3 et jQuery. ...

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.

Statistics

Views

Total Views
1,331
Views on SlideShare
1,140
Embed Views
191

Actions

Likes
2
Downloads
11
Comments
1

4 Embeds 191

http://www.conseilsmarketing.com 174
http://www.paperblog.fr 14
http://www.linkedin.com 2
http://admin.lemondeinformatique.fr 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Cette présentation est faite pour quel type de public ? Tu peux la faire à un Ch'ti JUG ? http://chtijug.org
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Développement d'interfaces web Développement d'interfaces web Presentation Transcript

  • 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 Développement d’interface N°3
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • ERGONOMIE : DEFINITIONS, MESURES, etc. Le Responsive Web Design /2 Quelques statistiques… Développement d’interface N°11
  • 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
  • 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
  • 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
  • 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
  • ERGONOMIE : DEFINITIONS, MESURES, etc. Tests Cross-browser En mode local ou cloud ie. browershots.org Développement d’interface 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" /> Développement d’interface N°17
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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&eacute;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
  • 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&eacute;ma </a> <a href="#" rel="search"> acc&eacute;der &agrave; la recherche </a> <a href="#" rel="next"> article suivant </a> <a href="#" rel="prev"> article pr&eacute;c&eacute;dent </a> … Développement d’interface N°28
  • 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
  • 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&eacute;es</legend> <label for="champ">Nom</label> <input type="text" id="champ" value="" /> <label for="prenom">Pr&eacute;nom</label> <input type="text" id="prenom" value="" /> </fieldset> <button type="submit"> <span>Soumettre</span> </button> </form> Développement d’interface N°30
  • 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
  • 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
  • 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&eacute; de A &agrave; 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
  • 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
  • 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&eacute;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
  • 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
  • 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
  • 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 : é &eacute; À &Agrave; ç &cedil; etc. … et pour composer vos pages, profitez du Lorem Ipsum ! <address> coordonn&eacute;s </address> Développement d’interface N°38
  • 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
  • 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
  • HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc. Pour aller + loin : les µformats Schema.org, RDFa … la sémantique absolue Développement d’interface N°41
  • 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
  • HTML : RAPPELS, STRUCTURES, SEMANTIQUE, etc. Litmus : Email testing & rendering Prévisualiser ses intégrations avant routage Développement d’interface 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 Développement d’interface N°44
  • CSS : MISE EN PAGE, WEBDESIGN Un outil incontournable : Firebug FF / Chrome / Opera (DragonFly) Développement d’interface N°45
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • CSS : MISE EN PAGE, WEBDESIGN Font Awesome Des icônes vectorielles pour tous vos eye-catcher Développement d’interface N°56
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • CSS : MISE EN PAGE, WEBDESIGN Exercice : Mises en page classiques Centrer une page web, sans la balise <center> ;) Développement d’interface N°63
  • 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
  • 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
  • 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
  • CSS : MISE EN PAGE, WEBDESIGN Exercice : générer des « tooltip » 100% en CSS3 Développement d’interface N°67
  • 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
  • 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
  • JAVASCRIPT Les Framework JavaScript jQuery, Angular, Prototype, MooTools, Dojo… Développement d’interface N°70
  • JAVASCRIPT Tip #2 : Modernizr.js Une librairie en jQuery pour benchmarker les browser Développement d’interface 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; } Développement d’interface 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/ Développement d’interface 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> Développement d’interface 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 Développement d’interface N°75
  • 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
  • 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
  • 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
  • Pour aller + loin… Rendez-vous sur Codeopen.io Réseau social d’intégrateurs web Développement d’interface N°79
  • Merci ! Rendez-vous sur : http://www.lesintegristes.net/ http://www.alsacreations.com/ Auteur : David Desrousseaux @desrousseaux