{"id":1051,"date":"2012-12-13T20:00:30","date_gmt":"2012-12-13T18:00:30","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1051"},"modified":"2012-12-14T10:05:25","modified_gmt":"2012-12-14T08:05:25","slug":"des-pixels-et-du-code-40","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/","title":{"rendered":"Des pixels et du code #40"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Une semaine tr\u00e8s orient\u00e9e code, animations et surtout responsive webdesign, avec deux articles fran\u00e7ais sur le sujet, et des tutoriels et d\u00e9monstrations d’API HTML5. Pour ceux plus orient\u00e9s design, quelques belles ressources pour am\u00e9liorer son workflow dans Photoshop, et sur l’exp\u00e9rience utilisateur.<\/p>\n

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

#Animation<\/p>\n

Sprite sheet animation with steps()<\/a> \u00a0des animations CSS3 qui utilisent la propri\u00e9t\u00e9 step()<\/p>\n

Animation in a Flashless world <\/a>un second tutoriel plut\u00f4t impression pour cr\u00e9er un chat qui cours dans l\u2019herbe<\/p>\n

#Email et Font<\/p>\n

Using web fonts in email <\/a>, il serait possible d\u2019utiliser une font \u201cexotique\u201d dans un mail avec un @import (\u2018lienversgoogleAPI); par contre le support n\u2019est pas g\u00e9nial<\/p>\n

#HTML5 API<\/p>\n

Fun with the File API <\/a>une petite d\u00e9mo des possibilit\u00e9s de plusieurs API, pour transformer une video ou une video prise par webcam en gif anim\u00e9.<\/p>\n

#jQuery<\/p>\n

Les gestionnaires d\u2019\u00e9v\u00e8nements en jQuery: diff\u00e9rences et avantages de bind(), live(), delegate() et on().<\/a> pour les d\u00e9butants en jQuery, un petit article qui vous aidera \u00e0 comprendre la diff\u00e9rences entre tous ces \u00e9l\u00e9ments.<\/p>\n

#CSS3<\/p>\n

Lining up your backgrounds<\/a> un petit tutoriel pour cr\u00e9er un effet de lignes de fond (comme un cahier) qui s\u2019adapte \u00e0 la taille du texte en gradients CSS3<\/p>\n

Des ressources utiles<\/h2>\n

#HTML5 API<\/p>\n

Vibration-api<\/a> l\u2019API qui permet de faire vibrer un t\u00e9l\u00e9phone en JS \u00e7a existe (pas tr\u00e8s bien support\u00e9 par contre)<\/p>\n

#Photoshop<\/p>\n

30+ tips to improve your iOS design workflow (in Photoshop) <\/a>des conseils pour am\u00e9liorer ses m\u00e9thodes de travail lorsque l\u2019ont fait du design mobile sous Photoshop<\/p>\n

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

#Ic\u00f4nes<\/p>\n

Weloveiconfonts.com<\/a> un service de hosting de font icons en ligne, comme Google Web Font en fait, mais uniquement compos\u00e9 d\u2019ic\u00f4nes.<\/p>\n

#Loader<\/p>\n

Cssload.net <\/a>un petit site pour cr\u00e9er des loaders et spinners en CSS en quelques cliques<\/p>\n

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

#Responsive Webdesign<\/p>\n

D\u00e9finir ses points de rupture <\/a>, pour ceux qui croient encore qu\u2019il faut d\u00e9finir les points de rupture en fonction des p\u00e9riph\u00e9riques, j\u2019esp\u00e8re vous faire changer d\u2019avis avec cet article.<\/p>\n

Responsive Webdesign : cas d\u2019\u00e9tudes \u00e0 lire <\/a>le retour d’exp\u00e9rience sur le site responsive de Nealite<\/p>\n

Responsive Images: What We Thought We Needed<\/a> un retour sur les solutions d\u2019image responsive et une analyse sur ce dont on a vraiment besoin en web<\/p>\n

#Mobile<\/p>\n

Nine Ways to Improve User Experience in Mobile Design<\/a> 9 astuces et patterns de design pour am\u00e9liorer l\u2019exp\u00e9rience utilisateur sur mobile de mani\u00e8re tr\u00e8s simple<\/p>\n

#Typographie et inspiration<\/p>\n

Tanamachistudio.com<\/a> de la typographie retro \u00e0 la croie sur tableaux noirs g\u00e9ants pour ce superbe portfolio<\/p>\n

#video #client<\/p>\n

F*ck you, pay me<\/a>, une petite vid\u00e9o datant de 2011 mais toujours d\u2019actualit\u00e9 ou Mike Monteiro explique comment s\u2019en sortir avec des clients qui refusent de payer<\/p>\n

#UX<\/p>\n

Les concepteurs de sites internet ne sont pas (tous) des utilisateurs comme les autres <\/a>car il est bien de rappeler de temps en temps qu\u2019il est difficile de se mettre dans la peau d\u2019un utilisateur lorsque que l\u2019on est le concepteur du site<\/p>\n

#Strasbourg<\/p>\n

R\u00e9sum\u00e9 de l\u2019ap\u00e9ro #4 WdStr<\/a>, le r\u00e9sum\u00e9 de notre 4em ap\u00e9ro sur le th\u00e8me de l’avenir du webdesign, avec de belles discussions durant la soir\u00e9e<\/p>\n

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

Et la vid\u00e9o fun de la semaine, What happens when you pick the wrong font? It ain\u2019t pretty.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu’il ne soit plus \u00e0 jour.Une semaine tr\u00e8s orient\u00e9e code, animations et surtout responsive webdesign, avec deux articles fran\u00e7ais sur le sujet, et des tutoriels et d\u00e9monstrations d’API HTML5. Pour ceux plus orient\u00e9s design, quelques belles ressources pour am\u00e9liorer son workflow dans Photoshop, et sur l’exp\u00e9rience utilisateur. Les tutoriels de la semaine #Animation Sprite sheet animation with steps() \u00a0des animations CSS3 qui utilisent la propri\u00e9t\u00e9 step() Animation …<\/p>\n","protected":false},"author":3,"featured_media":1053,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #40 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Placer les points de rupture en responsive webdesign, file API et vibration API HTML5, la conf\u00e9rence "f*ck you pay me" de Mike Monteiro et ressources d'animation CSS3\" \/>\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-40\/\" \/>\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 #40 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Placer les points de rupture en responsive webdesign, file API et vibration API HTML5, la conf\u00e9rence "f*ck you pay me" de Mike Monteiro et ressources d'animation CSS3\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/\" \/>\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=\"2012-12-13T18:00:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-12-14T08:05:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/12\/pixelcode40.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"St\u00e9phanie Walter\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@walterstephanie\" \/>\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=\"3 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-40\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/\",\"name\":\"Des pixels et du code #40 - 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-40\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode40.jpg\",\"datePublished\":\"2012-12-13T18:00:30+00:00\",\"dateModified\":\"2012-12-14T08:05:25+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Placer les points de rupture en responsive webdesign, file API et vibration API HTML5, la conf\u00e9rence \\\"f*ck you pay me\\\" de Mike Monteiro et ressources d'animation CSS3\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode40.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode40.jpg\",\"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\":\"required name=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\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?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\/walterstephanie\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #40 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Placer les points de rupture en responsive webdesign, file API et vibration API HTML5, la conf\u00e9rence \"f*ck you pay me\" de Mike Monteiro et ressources d'animation CSS3","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-40\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #40 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Placer les points de rupture en responsive webdesign, file API et vibration API HTML5, la conf\u00e9rence \"f*ck you pay me\" de Mike Monteiro et ressources d'animation CSS3","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-12-13T18:00:30+00:00","article_modified_time":"2012-12-14T08:05:25+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/12\/pixelcode40.jpg","type":"image\/jpeg"}],"author":"St\u00e9phanie Walter","twitter_card":"summary_large_image","twitter_creator":"@walterstephanie","twitter_site":"@walterstephanie","twitter_misc":{"\u00c9crit par":"St\u00e9phanie Walter","Dur\u00e9e de lecture estim\u00e9e":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/","name":"Des pixels et du code #40 - 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-40\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode40.jpg","datePublished":"2012-12-13T18:00:30+00:00","dateModified":"2012-12-14T08:05:25+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Placer les points de rupture en responsive webdesign, file API et vibration API HTML5, la conf\u00e9rence \"f*ck you pay me\" de Mike Monteiro et ressources d'animation CSS3","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-40\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode40.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode40.jpg","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":"required name=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\/f383c6a4dc55e331bbe2987b622cee6b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f383c6a4dc55e331bbe2987b622cee6b?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\/walterstephanie"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1051","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=1051"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1051\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1053"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}