{"id":1241,"date":"2013-02-08T09:32:51","date_gmt":"2013-02-08T07:32:51","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1241"},"modified":"2013-02-11T00:37:41","modified_gmt":"2013-02-10T22:37:41","slug":"des-pixels-et-du-code-48","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/","title":{"rendered":"Des pixels et du code #48"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Une semaine de liens orient\u00e9 UX\u00a0 et mobile avec entre autres des articles de fond sur l’utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d’animation Android, de l’accessibilit\u00e9, des outils pour tester facilement des patterns de fond sur votre site et tester diff\u00e9rentes version d’IE.<\/p>\n

Les tutoriels de la semaine<\/h2>\n

#A11y<\/p>\n

Advanced ARIA tip #1: Tabs in web apps <\/a>\u00a0un article tr\u00e8s d\u00e9taill\u00e9 \u00a0pour comprendre comment cr\u00e9er des onglets accessibles.<\/p>\n

#SVG<\/p>\n

Interactive infographic with SVG and CSS animations<\/a> , comme souvent sur Codrops un petit tutoriel qui donne une bonne claque visuelle, cette semaine c\u2019est une infographie interractive avec des animations SVG et CSS.<\/p>\n

Des ressources utiles<\/h2>\n

#Tests navigateur<\/p>\n

Cross-browser testing simplified<\/a>, Microsoft fait beaucoup d’efforts pour redorer l’image de son navigateur en ce moment et vous propose 3 mois d’essais de browserstack, en plus de machines virtuelles pour tester les diff\u00e9rentes versions.<\/p>\n

Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n

#CSS4<\/p>\n

jQuery.cssParentSelector<\/a> un script pour faire fonctionner la future syntaxe (attention elle risque de changer) du selecteur parent du module CSS lvl4, \u00e0 grand renforts de jQuery. Je ne suis pas forc\u00e9ment fan de l\u2019id\u00e9e, mais si la spec n\u2019\u00e9volue pas (peu de changes), on pourrait faire fonctionner ces lignes de CSS sans le polyfill JS un jour.<\/p>\n

#Pattern<\/p>\n

Subtle\u00adPatterns<\/a> un bookmarklet pour tester diff\u00e9rents patterns sur son site web depuis http:\/\/subtlepatterns.com\/<\/a> sans avoir \u00e0 les changer manuellement.<\/p>\n

#Lorem ipsum<\/p>\n

Blokkfont.com<\/a> est une font de remplissage pour vos wireframe pour les clients qui ont du mal \u00e0 comprendre le latin :)<\/p>\n

#Internet explorer<\/p>\n

Virtualization-tools<\/a> vous propose 3 mois d\u2019essais avec le service BrowserStack pour tester vos sites sous IE, et plusieurs images pour diff\u00e9rentes machines virtuelles.<\/p>\n

Les articles \u00e0 lire<\/h2>\n

#Font icon<\/p>\n

Icomoon.io<\/a> une astuce pour r\u00e9gler le probl\u00e8me de pixellisation des font-icon sur Windows Chrome.<\/p>\n

#UX<\/p>\n

No, I’m not going to download your bullshit app<\/a>, un triste constat du web en situation de mobilit\u00e9 aujourd’hui et la tendance \u00e0 essayer de forcer l\u2019utilisateur \u201cmobile\u201d \u00e0 t\u00e9l\u00e9charger une application \u00e0 l\u2019architecture d\u2019information et au contenu trop diff\u00e9rents du site pour qu\u2019il puisse s\u2019y retrouver.<\/p>\n

Don\u2019t Put Labels Inside Text Boxes (Unless You\u2019re Luke W) <\/a>un article de fond sur l\u2019utilisation des labels \u00e0 l\u2019int\u00e9rieur des champs de formulaire pour \u201cgagner\u201d de la place. Il sont \u00a0\u00e0 ne pas utiliser sur un site web, par contre Luke Wroblewski argue que cette technique est moins g\u00eanante en mobilit\u00e9, mais la mesure o\u00f9 les constructeurs d\u2019OS le font dans les formulaires natifs et o\u00f9 l\u2019utilisateur est donc habitu\u00e9 sur cette plateforme \u00e0 avoir les labels dans les champs.<\/p>\n

A Definitive Guide To The Android Carousel Design Pattern<\/a> un guide pour comprendre le pattern de design qu\u2019est le \u201ccarrousel\u201d utilis\u00e9 sur Android et l\u2019utiliser \u00e0 bon escient sur vos designs de site et applications.<\/p>\n

#Actus<\/p>\n

Google Drive now lets developers share hosted websites by storing HTML, JavaScript, and CSS files<\/a> je n\u2019ai pas encore test\u00e9, mais il semblerait d\u00e9sormais possible d\u2019utiliser GoogleDrive pour partager des pages HTML avec JavaScript et CSS, pratique pour d\u00e9mo rapide pour un client.<\/p>\n

#Webdesign<\/p>\n

How to Get Hired As a Designer<\/a> \u00a0quelques conseils pour poster \u00e0 un emploi de webdesigner donn\u00e9s par un des recruteurs sur etsy.<\/p>\n

#Int\u00e9gration<\/p>\n

Beginner HTML5, JavaScript, jQuery, Backbone, and CSS3 Resources<\/a> un excellent r\u00e9sum\u00e9 des technologies \u00e0 maitriser en tant qu\u2019int\u00e9grateur web et surtout beaucoup de ressources et de documentations pour les apprendre.<\/p>\n

#RWD<\/p>\n

On Responsive Navigation and Rendering <\/a>un retour d\u2019exp\u00e9rience sur la navigation \u201coff canvas\u201d et les transformations CSS3#CSS3 Android.<\/p>\n

Dispelling the Android CSS animation myths<\/a>, sous Android 4.0, les animations CSS3 fonctionnent tr\u00e8s bien sur Android tant que l\u2019on n\u2019anime qu\u2019une propri\u00e9t\u00e9, pour plusieurs propri\u00e9t\u00e9s, il faut mettre chaque propri\u00e9t\u00e9 dans sa propre d\u00e9claration keyframe (pas tr\u00e8s flexible).<\/p>\n

Inspiration et d\u00e9mos sympas et impressionnantes<\/h2>\n

#Parallax
\nEverylastdrop.co.uk<\/a> un petit site tr\u00e8s sympa sur le gaspillage d\u2019eau dans la salle de bain avec un effet de parallaxe impressionnant.<\/p>\n

Mon coup de c\u0153ur de la semaine, le site de l\u2019agence de communication la-souris-verte.com<\/a> avec son effet de parallaxe et le 5em slide de la page d\u2019accueil \u201cAttention ce site n\u2019est pas un site sur le cyclisme !\u201d.<\/p>\n

Pour finir, je voulais vous faire d\u00e9couvrir le serveur tell-them.com<\/a> qui vous permet de cr\u00e9er des cartes de voeux virtuelles sans aucune connaissance de langage web. Quelques exemples<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 13 ans. Il se peut qu’il ne soit plus \u00e0 jour.Une semaine de liens orient\u00e9 UX\u00a0 et mobile avec entre autres des articles de fond sur l’utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d’animation Android, de l’accessibilit\u00e9, des outils pour tester facilement des patterns de fond sur votre site et tester diff\u00e9rentes version d’IE. Les tutoriels de la semaine #A11y Advanced ARIA tip #1: Tabs in …<\/p>\n","protected":false},"author":3,"featured_media":1242,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1241","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"\nDes pixels et du code #48 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Articles orient\u00e9s UX et mobilit\u00e9: l'utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d'animation Android\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Des pixels et du code #48 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Articles orient\u00e9s UX et mobilit\u00e9: l'utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d'animation Android\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/\" \/>\n<meta property=\"og:site_name\" content=\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\" \/>\n<meta property=\"article:published_time\" content=\"2013-02-08T07:32:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-02-10T22:37:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/02\/pixelcode48.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\" \/>\n<meta name=\"twitter:site\" content=\"@walterstephanie\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"St\u00e9phanie Walter\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/\",\"name\":\"Des pixels et du code #48 - par St\u00e9phanie Walter - UX Researcher & Designer\",\"isPartOf\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode48.png\",\"datePublished\":\"2013-02-08T07:32:51+00:00\",\"dateModified\":\"2013-02-10T22:37:41+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Articles orient\u00e9s UX et mobilit\u00e9: l'utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d'animation Android\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode48.png\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode48.png\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #48\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#website\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/\",\"name\":\"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.\",\"description\":\"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\",\"name\":\"St\u00e9phanie Walter\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g\",\"caption\":\"St\u00e9phanie Walter\"},\"description\":\"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)\",\"sameAs\":[\"https:\/\/stephaniewalter.design\/\",\"https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/\",\"https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #48 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Articles orient\u00e9s UX et mobilit\u00e9: l'utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d'animation Android","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #48 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Articles orient\u00e9s UX et mobilit\u00e9: l'utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d'animation Android","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-02-08T07:32:51+00:00","article_modified_time":"2013-02-10T22:37:41+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/02\/pixelcode48.png","type":"image\/png"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/","name":"Des pixels et du code #48 - par St\u00e9phanie Walter - UX Researcher & Designer","isPartOf":{"@id":"https:\/\/stephaniewalter.design\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode48.png","datePublished":"2013-02-08T07:32:51+00:00","dateModified":"2013-02-10T22:37:41+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Articles orient\u00e9s UX et mobilit\u00e9: l'utilisation des carrousels Android, des labels dans les inputs, navigation off-canvas et bug d'animation Android","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-48\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode48.png","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pixelcode48.png","width":700,"height":200,"caption":"Des pixels et du code #48"},{"@type":"WebSite","@id":"https:\/\/stephaniewalter.design\/fr\/#website","url":"https:\/\/stephaniewalter.design\/fr\/","name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","description":"Je partage ici mes conseils, mes ressources et outils sur la conception centr\u00e9e utilisateur, la recherche et tests utilisateur, le design de produits, la strat\u00e9gie mobile, l'utilisabilit\u00e9 et l'accessibilit\u00e9.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stephaniewalter.design\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf","name":"St\u00e9phanie Walter","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3311148a94caa2e5ae146ff1cdf9aaf3a0127a7db0337d8c8cbbfc4a425cab0e?s=96&d=retro&r=g","caption":"St\u00e9phanie Walter"},"description":"UX Researcher & Product Designer. Mobile Expert. Public speaker. Blog writer. Google Dev Expert Web Platform and Product Design (GDE)","sameAs":["https:\/\/stephaniewalter.design\/","https:\/\/www.linkedin.com\/in\/stephaniewalterpro\/","https:\/\/x.com\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/comments?post=1241"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1241\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1242"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}