Faire du web moderne                    à destination de tousJulien Wajsberg – Paris-Web – octobre 2012
différents devices     résolution et densitéPC et écrans, tablettes, mobiles
entrées utilisateurs         clavier         souris          PC de bureau   écrans touch           touch            stylet...
contexteS●   connectivité, latence   ●   chez soi●   attention,              ●   au bureau    concentration           ●   ...
daprès Luke Wroblewski       tablettes : chez soi*    smartphones : en mobilité* « chez soi » peut signifier aussi « en va...
OS et navigateurs
Safari MobileOpera Mini
Android BrowserChrome for AndroidOpera MobileOpera MiniFirefox for Android
Windows Mobile 6   Internet Explorer 8 MobileWindows Phone 7    Internet Explorer 9Windows 8          Internet Explorer 10
défis du design multi devices●   sadapter à la résolution●   sadapter à lentrée utilisateur●   sadapter au contexte●   sad...
défis du design multi devices●   sadapter à la résolution●   sadapter à lentrée utilisateur●   sadapter au contexte●   sad...
Rappelons nous
2001 : Internet Explorer 6
2004 : Firefox 1
2005 : Internet Explorer 7le développement débute2006 : Internet Explorer 7
nous avons appris quen développant pour      une seule plate-forme            nous la faisons               stagner
Revenons en 2012
les navigateurs modernes nous entourent
-webkit est omniprésent sur mobile
des navigateurs anciens sont toujours là15 à 30 % de parts de marché pour IE7/8
nous devons nous assurer de conserver           la diversité      est bénéfique pour le Web
quoi de nouveau dans le web●   HTML5    ●   des balises    ●        des attributs    ●        des APIs●   CSS3    ●   des ...
HTML5 : les balises●   balises sémantiques section, article, header, footer, etc●   Possibilités :    ●   utiliser le scri...
HTML5 : multimédia●   video, audio : utiliser un fallback Flash    ●   voir http://html5video.org/ pour une table de      ...
HTML5 : nouveaux attributs●   formulaires : tel, number, url : à utiliser●   formulaires : color, date, etc : problème    ...
HTML5 : APIs●   WebSocket, postMessage, traitement du JSON, local storage,    XHR2, Web Workers, File, request animation f...
Javascript et DOM APIs●   coder redevient amusant●   exemples : méthodes dArray (forEach, map,    filter, etc), querySelec...
polyfills●   une bonne manière déviter le code spaghetti    ●   même API que lAPI standard, on implémente en JavaScript,  ...
wrappers●   avec underscore ou Lo-Dash, on peut    facilement utiliser des méthodes fonctionnelles    ●   http://underscor...
fonctions dont la             spécification est finalisée polyfills             doit être conforme à la spécification     ...
parlons maintenant de CSS
CSS3●   Par construction, CSS est permissif : si un    navigateur ne comprend pas quelque chose, il    lignore●   cest don...
CSS : sélecteurs●   présumons quIE6 nest plus utilisé.    IE 7 est le navigateur le plus vieux●   les sélecteurs CSS 2 son...
CSS : des propriétés●   en CSS 2 on a display: table, inline-block, le    contenu généré    ●   bonne nouvelle : IE8 suppo...
CSS : example with backgroundsdiv {  background : rgb(255, 127, 127);  background : rgba(255, 127, 127, .5); /* works with...
dautres propriétés CSS●   transformations, transitions, animations●   pourrait être fait en JS pour les navigateurs qui   ...
Attention !Les vieux navigateurs sont lents
Les vieux navigateurs sont lents●    avec JavaScript on pourrait amener les fonctions modernes de    CSS et JS aux vieux n...
Quelques outils
Quelques outils●   Modernizr : http://modernizr.com/    ●   lutiliser pour changer de comportement/style en fonction des  ...
When can I use ?http://caniuse.com
HTML5 Please !http://html5please.com
CSS3 Please !http://css3please.com
dautres outils                        http://css3please.com                  Ceaser :                  http://matthewlein....
à retenir
à retenir ●     cest plutôt facile de coder pour IE7     ●   on code surtout pour des utilisateurs, ils ne         choisis...
questions ?
sources des images●   le vieux camion:    http://www.fotopedia.com/items/flickr-5607519430●   les outils :    http://www.f...
Responsible Design ou Le web moderne à destination de tous
Prochain SlideShare
Chargement dans…5
×

Responsible Design ou Le web moderne à destination de tous

1 766 vues

Publié le

Après avoir présenté la situation actuelle, j'essaie d'expliquer comment on peut utiliser les technologies récentes du web tout en supportant tous les navigateurs, qu'ils soient anciens ou minoritaires.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 766
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
26
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • bureau résolutions très diverses : de 1024x768 à 2560x1600 pour un 17 ou 19”: 1280x1024 écrans 20 ou 22” 16/9: 1680x1050 tablettes ipad 1 et 2 : 1024x768 ipad 3 : 2048x1536 Retina (voir plus bas) ipad mini ? sans doute comme ipad 1 et 2, juste plus dense mobiles iphone: 480x320 android: tout est possible écrans plus denses iPhone Retina: 960x640, exposé comme un 480x320 problème: le texte parait fin, les images paraissent floues
  • good CSS3 support but quite bad API support Microsoft and Mozilla are coming Opera mini has a solid market share users of old mobile browsers don't use the web much (but may still use operator services)
  • Responsible Design ou Le web moderne à destination de tous

    1. 1. Faire du web moderne à destination de tousJulien Wajsberg – Paris-Web – octobre 2012
    2. 2. différents devices résolution et densitéPC et écrans, tablettes, mobiles
    3. 3. entrées utilisateurs clavier souris PC de bureau écrans touch touch stylet tablettes clavier virtuel touch stylet clavier virtuel mobilesclavier physique molette
    4. 4. contexteS● connectivité, latence ● chez soi● attention, ● au bureau concentration ● dans un magasin● environnement ● dans le métro, le train ● dans un parc
    5. 5. daprès Luke Wroblewski tablettes : chez soi* smartphones : en mobilité* « chez soi » peut signifier aussi « en vacances » source : http://www.lukew.com/ff/entry.asp?1571
    6. 6. OS et navigateurs
    7. 7. Safari MobileOpera Mini
    8. 8. Android BrowserChrome for AndroidOpera MobileOpera MiniFirefox for Android
    9. 9. Windows Mobile 6 Internet Explorer 8 MobileWindows Phone 7 Internet Explorer 9Windows 8 Internet Explorer 10
    10. 10. défis du design multi devices● sadapter à la résolution● sadapter à lentrée utilisateur● sadapter au contexte● sadapter à la connectivité● sadapter aux navigateurs
    11. 11. défis du design multi devices● sadapter à la résolution● sadapter à lentrée utilisateur● sadapter au contexte● sadapter à la connectivité● sadapter aux navigateurs
    12. 12. Rappelons nous
    13. 13. 2001 : Internet Explorer 6
    14. 14. 2004 : Firefox 1
    15. 15. 2005 : Internet Explorer 7le développement débute2006 : Internet Explorer 7
    16. 16. nous avons appris quen développant pour une seule plate-forme nous la faisons stagner
    17. 17. Revenons en 2012
    18. 18. les navigateurs modernes nous entourent
    19. 19. -webkit est omniprésent sur mobile
    20. 20. des navigateurs anciens sont toujours là15 à 30 % de parts de marché pour IE7/8
    21. 21. nous devons nous assurer de conserver la diversité est bénéfique pour le Web
    22. 22. quoi de nouveau dans le web● HTML5 ● des balises ● des attributs ● des APIs● CSS3 ● des sélecteurs ● des propriétés ● des media queries avancées (pour le « responsive design »)● JavaScript ● nouvelles méthodes ● nouvelles syntaxes
    23. 23. HTML5 : les balises● balises sémantiques section, article, header, footer, etc● Possibilités : ● utiliser le script « html5shiv » ● utiliser le préfixe XML « html5 » ● utiliser à la fois ces balises et des div avec une classe du même nom ● utiliser uniquement des div avec des classes section, article, etc● mon opinion pour linstant : la dernière solution est la plus facile et la plus flexible
    24. 24. HTML5 : multimédia● video, audio : utiliser un fallback Flash ● voir http://html5video.org/ pour une table de comparaison des solutions● canvas : utiliser un fallback en JavaScript pour Internet Explorer (attention : cest lent), et un fallback texte (entre <canvas> et </canvas>) qui est lu par les revues décran récentes
    25. 25. HTML5 : nouveaux attributs● formulaires : tel, number, url : à utiliser● formulaires : color, date, etc : problème daccessibilité lorsquils sont supportés● attributs de validation : à utiliser avec attention, fournir un fallback javaScript (sans oublier la vérification serveur évidemment)● attributs « data » : à utiliser ! enfin un moyen standard dassocier des données à des éléménts !
    26. 26. HTML5 : APIs● WebSocket, postMessage, traitement du JSON, local storage, XHR2, Web Workers, File, request animation frame, Database, Audio, WebRTC● bien sûr pas présents dans les vieux navigateurs● pas tous présents dans tous les navigateurs modernes● quand ils sont présents, ils nont pas toujours la même API et sont parfois préfixés ● cest du boulot supplémentaire pour les utiliser et pour les faire fonctionner de la même manière dans tous les navigateurs qui les supportent. ● cest le prix à payer lorsquon utilise des API non stabilisées.
    27. 27. Javascript et DOM APIs● coder redevient amusant● exemples : méthodes dArray (forEach, map, filter, etc), querySelector/querySelectorAll, Object.keys, function binding, getElementsByClassName, classList...● deux manières de gérer : polyfills ou wrappers● les wrappers sont peut-être plus populaires mais ça amène une dépendance
    28. 28. polyfills● une bonne manière déviter le code spaghetti ● même API que lAPI standard, on implémente en JavaScript, mais limplémentation peut se comporter différemment ● des fois cest facile, et des fois non ● il faut faire la part des choses entre « cette fonction est super importante » et « jai besoin de 300ko de script pour limplémenter »● une liste de polyfills, parfois perfectibles : https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
    29. 29. wrappers● avec underscore ou Lo-Dash, on peut facilement utiliser des méthodes fonctionnelles ● http://underscorejs.org/ http://lodash.com/● des bibliothèques orientées DOM comme jQuery utilient déjà des APIs DOM plus rapides si elles sont dispos● dautres existent : requestAnimationFrame, websocket...
    30. 30. fonctions dont la spécification est finalisée polyfills doit être conforme à la spécification parfois complexe à faire correctement à utiliser si la fonctionnalité peutwrappers être amenée à changer
    31. 31. parlons maintenant de CSS
    32. 32. CSS3● Par construction, CSS est permissif : si un navigateur ne comprend pas quelque chose, il lignore● cest donc possible dutiliser des propriétés nouvelles, mais il faut aussi utiliser les anciennes comme fallback● Ah oui, aussi, arrêtons de penser quon aura le même rendu dans tous les navigateurs
    33. 33. CSS : sélecteurs● présumons quIE6 nest plus utilisé. IE 7 est le navigateur le plus vieux● les sélecteurs CSS 2 sont les plus importants. Super, IE7 les supportent !● CSS3 amène des choses avancées comme :not,:target,::first-line,::first-letter ● à utiliser pour du cosmétique ● si vraiment on les veut dans IE7/8, on peut utiliser selectivzr (http://selectivizr.com/)
    34. 34. CSS : des propriétés● en CSS 2 on a display: table, inline-block, le contenu généré ● bonne nouvelle : IE8 supporte tout ça !● CSS 3 amène des gradients, fonds multiples, etc● utiliser des vieilles propriétés comme fallback
    35. 35. CSS : example with backgroundsdiv { background : rgb(255, 127, 127); background : rgba(255, 127, 127, .5); /* works with IE9 */ /* Saf4+, Chrome */ background: -webkit-gradient(linear, left top, left bottom, from(#444444), to (#999999)); /* Chrome 10+, Saf5.1+, iOS 5+ */ background: -webkit-linear-gradient(top, #444444, #999999); /* FF3.6+ */ background: -moz-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */ background: -o-linear-gradient(top, #444444, #999999); /* W3C */ /* pas de préfixe MS car IE10 va utiliser uniquement la version sans préfixe */ background: linear-gradient(to bottom, #444444, #999999);}
    36. 36. dautres propriétés CSS● transformations, transitions, animations● pourrait être fait en JS pour les navigateurs qui ne les supportent pas ● mais cest bien lent et ça saccade et ça rame ● il suffit de... ne pas utiliser danimations dans ces navigateurs, non ? ;-)
    37. 37. Attention !Les vieux navigateurs sont lents
    38. 38. Les vieux navigateurs sont lents● avec JavaScript on pourrait amener les fonctions modernes de CSS et JS aux vieux navigateurs mais● en plus davoir moins de fonctions, ils sont péniblement lents ● lents pour télécharger des ressources ● lents pour analyser ● lents pour faire le rendu ● lents pour exécuter le JS et accéder au DOM● acceptons que les vieux navigateurs nauront pas toutes les fonctions modernes● mais noublions pas quil y a des utilisateurs derrière ● fournissons leur une expérience acceptable
    39. 39. Quelques outils
    40. 40. Quelques outils● Modernizr : http://modernizr.com/ ● lutiliser pour changer de comportement/style en fonction des fonctions disponibles● has.js : https://github.com/phiggins42/has.js/● préprocesseurs (Sass...) ● aide à utiliser les préfixes corrects pour tous les navigateurs ● cest le « wrapper » de CSS : il est facile de définir des fonctions/mixins/imports pour des fonctions en cours de spécification ● peut permettre de supporter des vieux navigateurs côté serveur – voir http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
    41. 41. When can I use ?http://caniuse.com
    42. 42. HTML5 Please !http://html5please.com
    43. 43. CSS3 Please !http://css3please.com
    44. 44. dautres outils http://css3please.com Ceaser : http://matthewlein.com/ceaser/
    45. 45. à retenir
    46. 46. à retenir ● cest plutôt facile de coder pour IE7 ● on code surtout pour des utilisateurs, ils ne choisissent pas dutiliser IE7 ● cest plutôt facile de coder pour dautres moteurs que webkitLa diversité est importante pour la pérennité du web
    47. 47. questions ?
    48. 48. sources des images● le vieux camion: http://www.fotopedia.com/items/flickr-5607519430● les outils : http://www.fotopedia.com/items/flickr-3147506658● des mains anonymes : http://www.brand.orange.com/pages/view.php?ref=76049

    ×