{"id":1219,"date":"2013-02-01T10:01:13","date_gmt":"2013-02-01T08:01:13","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1219"},"modified":"2013-02-01T10:49:31","modified_gmt":"2013-02-01T08:49:31","slug":"des-pixels-et-du-code-47","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/","title":{"rendered":"Des pixels et du code #47"},"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 nouvelle semaine de liens, avec une mise \u00e0 l’honneur de Firefox OS et quelques ressources pour cr\u00e9er des pages, plusieurs plugins jQuery sympas et deux jolis packs d’ic\u00f4nes pour graphistes et designers et des articles de fond sur les bonnes pratiques, l’am\u00e9lioration de l’exp\u00e9rience utilisateur,\u00a0 et la s\u00e9mantique des logos.<\/p>\n

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

#CSS<\/p>\n

Tutorial \u2013 How to Create a Metro Style Accordion<\/a>, un tutoriel pour cr\u00e9er un menu accord\u00e9on avec un design proche de celui \u201cplat\u201d de l\u2019interface de \u201cModern UI\u201d<\/p>\n

Css-only Lavalamp-like Fancy Menu Effect<\/a> une utilisation avanc\u00e9e de CSS3 et de s\u00e9lecteurs pour cr\u00e9er un menu horizontal avec un effet \u00ab\u00a0Lavalamp\u00a0\u00bb (l’effet au survol)<\/p>\n

Des ressources utiles<\/strong><\/h2>\n

#Firefox OS
\nBuilding Blocks<\/a> des morceaux de code tout pr\u00eats pour cr\u00e9er l\u2019UI de Firefox OS en HTML CSS<\/p>\n

A checklist of things you will need to learn to make Firefox OS applications <\/a>: HTML, CSS et JavaScript, voil\u00e0 tout ce qu\u2019il vous faudra (ou presque) pour d\u00e9velopper des applications sous Firefox OS<\/p>\n

#Template<\/p>\n

Free identity design mockups from Utopia <\/a>un package en fichier vectoriels pour graphistes et designers qui veulent pr\u00e9senter leurs logos sur diff\u00e9rents supports<\/p>\n

#Gestes #Vector<\/p>\n

Gestures<\/a> un pack illustrator de gestes iPhone pour illustrer vos pr\u00e9sentations<\/p>\n

#jQuery<\/p>\n

Perfect-scrollbar<\/a> un petit plugin jQuery pour ajouter une scrollbar dans un \u00e9l\u00e9ment dont la CSS est facilement manipulable<\/p>\n

Darsa.in\/sly\/<\/a> un plugin jQuery pour cr\u00e9er des listes d\u2019\u00e9l\u00e9ments scrollables horizontalement et verticalement<\/p>\n

#Freebies<\/p>\n

Freebbble.com<\/a> un site qui r\u00e9pertorie une grande quantit\u00e9 de freebies trouv\u00e9s sur dribbble<\/p>\n

#Ic\u00f4nes
\nMfglabs-iconset<\/a>\u00a0 un petit pack d\u2019ic\u00f4nes tr\u00e8s pratique pour un projet<\/p>\n

Bijou.im<\/a> un autre projet d’ic\u00f4nes minimalistes<\/p>\n

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

#Android<\/p>\n

Device Frame Generator<\/a> un outil pour g\u00e9n\u00e9rer des aper\u00e7us de votre design par simple drag & drop dans l\u2019appareil sur lequel vous voulez le pr\u00e9visualiser votre design<\/p>\n

#Typographie<\/p>\n

Fontfriend<\/a>\u00a0 un bookmarklet pour tester diff\u00e9rentes polices Google Font directement sur le site dans devoir toucher au code<\/p>\n

#Editeur de texte<\/p>\n

Zenpen.io<\/a> un \u00e9diteur de texte en ligne, minimaliste qui met l\u2019accent sur l\u2019essentiel, votre texte.<\/p>\n

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

#Webdesign<\/p>\n

Petit floril\u00e8ge de bonnes pratiques graphiques<\/a> les slides de l\u2019atelier de Romy Duhem Verdi\u00e8re sur les bonnes pratiques pour un site accessible<\/p>\n

are Links Blue? <\/a>\u00a0une explication de Joe Clark sur pourquoi les liens sont bleus par d\u00e9faut depuis le d\u00e9but des internets, aussi simple que \u00e7a.<\/p>\n

Tips for Designing in the Browser <\/a>la tendance du \u201cdesign in the browser\u201d , ou le design directement dans le navigateur monte en puissance en ce moment, cet article donne quelques bons conseils et ressources pour s\u2019essayer \u00e0 cette technique sans pour autant perdre de vue les objectifs du design<\/p>\n

#Rwd<\/p>\n

Using Responsive Design To Rewrite Your Sentences <\/a>une technique qui consiste \u00e0 baliser le texte avec diff\u00e9rents <span> pour pouvoir changer l\u2019affichage et avoir un texte moins long sur mobile.<\/p>\n

#UX<\/p>\n

Small Nudges<\/a>, un tumblr consacr\u00e9 \u00e0 des petits d\u00e9tails qui peuvent changer le taux de conversion d\u2019un site web<\/p>\n

How to Destroy User Experience in Two Easy Steps <\/a>un retour d\u2019exp\u00e9rience sur la version tablette de CBS news qui propose une exp\u00e9rience utilisateur moins riche sur tablette<\/p>\n

#UI<\/p>\n

The Button Test<\/a> , \u00a0un petit jeu pour montrer l\u2019importance du design de boutons dans l\u2019identit\u00e9 d\u2019un marque. Saurez-vous reconna\u00eetre \u00e0 qui appartiennent les 18 boutons ? (j\u2019en ai reconnu 7, mais il y a plusieurs services que je ne connaissais pas ^^)<\/p>\n

Case Study: The Edit Icon on Firefox OS<\/a> un retour d\u2019exp\u00e9rience sur le design de l\u2019ic\u00f4ne \u201c\u00e9diter\u201d de Firefox OS et l\u2019explication des choix faits<\/p>\n

#S\u00e9mantique<\/p>\n

Your logo is still an image\u2026 and so is mine!<\/a> un article qui rappel qu\u2019un logo est s\u00e9mantiquement une image, qu\u2019il vaut mieux \u00e9viter pour les robots de le mettre dans un <h1> mais plut\u00f4t de mettre une image de 1px transparent pour avoir la balise <img><\/p>\n

#Humeur<\/p>\n

Pixels don\u2019t care<\/a>, un tr\u00e8s bel article sur la valeur de votre travail dans le web : petit, grand, homme, femme, au final, les pixels n\u2019en ont que faire, c\u2019est votre travail qui compte.<\/p>\n

Inspiration<\/h2>\n

#Ic\u00f4nes<\/p>\n

Sodafish.com<\/a> , le tr\u00e8s joli travail d\u2019un graphiste et designer d\u2019icones<\/p>\n

Pour finir je vous proposer de procrastiner ce vendredi sur frontinvaders<\/a> un petit jeu spaceinvader like pour tuer des vilains petits internet explorer ^^
\n<\/strong><\/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 nouvelle semaine de liens, avec une mise \u00e0 l’honneur de Firefox OS et quelques ressources pour cr\u00e9er des pages, plusieurs plugins jQuery sympas et deux jolis packs d’ic\u00f4nes pour graphistes et designers et des articles de fond sur les bonnes pratiques, l’am\u00e9lioration de l’exp\u00e9rience utilisateur,\u00a0 et la s\u00e9mantique des logos. Les tutoriels de la semaine #CSS Tutorial \u2013 How to Create …<\/p>\n","protected":false},"author":3,"featured_media":1220,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1219","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #47 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Ic\u00f4nes et plugiens jQuerys, bonnes pratiques graphiques, packs d\u2019ic\u00f4nes pour designers, am\u00e9liorer l'exp\u00e9rience utilisateur,pourquoi les liens sont bleus sur internet\" \/>\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-47\/\" \/>\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 #47 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Ic\u00f4nes et plugiens jQuerys, bonnes pratiques graphiques, packs d\u2019ic\u00f4nes pour designers, am\u00e9liorer l'exp\u00e9rience utilisateur,pourquoi les liens sont bleus sur internet\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/\" \/>\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-01T08:01:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-02-01T08:49:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/02\/pxc47.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-47\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/\",\"name\":\"Des pixels et du code #47 - 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-47\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pxc47.png\",\"datePublished\":\"2013-02-01T08:01:13+00:00\",\"dateModified\":\"2013-02-01T08:49:31+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Ic\u00f4nes et plugiens jQuerys, bonnes pratiques graphiques, packs d\u2019ic\u00f4nes pour designers, am\u00e9liorer l'exp\u00e9rience utilisateur,pourquoi les liens sont bleus sur internet\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pxc47.png\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pxc47.png\",\"width\":700,\"height\":200},{\"@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 #47 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Ic\u00f4nes et plugiens jQuerys, bonnes pratiques graphiques, packs d\u2019ic\u00f4nes pour designers, am\u00e9liorer l'exp\u00e9rience utilisateur,pourquoi les liens sont bleus sur internet","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-47\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #47 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Ic\u00f4nes et plugiens jQuerys, bonnes pratiques graphiques, packs d\u2019ic\u00f4nes pour designers, am\u00e9liorer l'exp\u00e9rience utilisateur,pourquoi les liens sont bleus sur internet","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-02-01T08:01:13+00:00","article_modified_time":"2013-02-01T08:49:31+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/02\/pxc47.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-47\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/","name":"Des pixels et du code #47 - 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-47\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pxc47.png","datePublished":"2013-02-01T08:01:13+00:00","dateModified":"2013-02-01T08:49:31+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Ic\u00f4nes et plugiens jQuerys, bonnes pratiques graphiques, packs d\u2019ic\u00f4nes pour designers, am\u00e9liorer l'exp\u00e9rience utilisateur,pourquoi les liens sont bleus sur internet","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-47\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pxc47.png","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/02\/pxc47.png","width":700,"height":200},{"@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\/1219","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=1219"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1219\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1220"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}