{"id":1419,"date":"2013-04-05T07:34:07","date_gmt":"2013-04-05T06:34:07","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1419"},"modified":"2013-04-05T07:35:30","modified_gmt":"2013-04-05T06:35:30","slug":"des-pixels-et-du-code-56","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/","title":{"rendered":"Des pixels et du code #56"},"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>

Malgr\u00e9 les poissons d’avril de d\u00e9but de semaine, encore une semaine riche en tutoriels CSS, ressources utiles notamment si vous \u00eates fans d\u2019ic\u00f4nes et\u00a0 de \u00ab\u00a0launch icon\u00a0\u00bb iOS, quelques outils pour vous faciliter le rythme vertical en typographie et action Photoshop et des articles de fond sur le vol d’article, la posture de vos coll\u00e8gues en r\u00e9union illustr\u00e9 par des peluches, de l’ergonomie, du responsive webdesign et une jolie vid\u00e9o d’inspiration pour la typographie. Bonne lecture.<\/p>\n

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

#SVG #Media queries<\/p>\n

Media Queries in SVG images<\/a> il est possible de mettre des media-queries \u00e0 l\u2019int\u00e9rieur des SVG pour changer des couleurs, formes, etc. , avec une petite d\u00e9mo de Pasca<\/a>l pour mieux comprendre le concept.<\/p>\n

#CSS3<\/p>\n

CSS Masking<\/a> un petit tutoriel sur l\u2019utilisation de clip et clip-path en CSS pour cr\u00e9er des effets avec des formes.<\/p>\n

Des ressources utiles<\/h2>\n

#Ic\u00f4nes<\/p>\n

Skyicons<\/a> un petite librairies d\u2019ic\u00f4nes de m\u00e9t\u00e9o anim\u00e9es en canvas HTML5 et JavaScript<\/p>\n

20 Free Web Icon & Glyph Packs for Your UI Designs <\/a>au cas o\u00f9 vous n\u2019auriez pas encore trouv\u00e9 de pack d\u2019ic\u00f4ne qui r\u00e9ponde \u00e0 vos besoins, en voici 20 :)<\/p>\n

iicns.com<\/a> une galerie d’ic\u00f4nes iOS pour votre inspiration<\/p>\n

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

#Checkbox<\/p>\n

iCheck<\/a> un plugin jQuery tr\u00e8s l\u00e9ger qui permet de styler les checkbox et boutons radio tout en gardant l\u2019accessibilit\u00e9 au clavier<\/p>\n

#Typography<\/p>\n

Em Baseline Generator<\/a> \u00a0un petit outil en ligne pour tester de mani\u00e8re \u201cvisuelle\u201d diff\u00e9rentes tailles de police et line-height et garder le rythme vertical de la page<\/p>\n

#Photoshop<\/p>\n

Photoshop action: Remove compositing artifacts & banding<\/a> une petite action Photoshop pour nettoyer vos r\u00e9alisations des artefacts et banding<\/p>\n

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

#Meeting<\/p>\n

How People Sit in Meetings and What it Really Means<\/a> une petite liste illustr\u00e9e et tr\u00e8s dr\u00f4le des postures de vos collaborateurs en r\u00e9union et leur signification<\/p>\n

#Copyright<\/p>\n

Vol d\u2019article et contenu dupliqu\u00e9 <\/a>un petit article qui rappelle quelques principes de base sur le contenu dupliqu\u00e9 (ou vol\u00e9 de votre site) et comment luter contre<\/p>\n

#Ergonomie<\/p>\n

Il ne faut pas prendre des gens pour des cons mais ne jamais oublier qu\u2019ils en sont <\/a>un petit article plein d\u2019humour et pourtant tr\u00e8s vrai sur nos utilisateurs, au final les \u201cpower user\u201d et geek sont tr\u00e8s peu nombreux sur les sites \u201cclassiques\u201d. J\u2019aime beaucoup la phrase \u201cOui, la notion de peur est importante. Les utilisateurs ont peur sur une machine. Ils sont stress\u00e9s.\u201d qui r\u00e9sume assez bien beaucoup d\u2019utilisateurs.<\/p>\n

#Responsive Webdesign<\/p>\n

A Response to \u2018Responsive Web Design is Not the Future\u2019 <\/a>Brad Forst r\u00e9pond \u00e0 l\u2019article sur Sixrevision \u201cResponsive Web Design is Not the Future<\/a>\u201d point par point<\/p>\n

#Compression<\/p>\n

La compression d\u2019images par les op\u00e9rateurs<\/a> un article qui m\u2019a scotch\u00e9, test\u00e9 par R\u00e9mi (Hteumeuleu) sur l\u2019envoie de newsletter, apparemment certains op\u00e9rateurs compressent les images diff\u00e9remment. Les rendus sur le GIF est \u00e9difiant.<\/p>\n

#Responsive<\/p>\n

8 Guidelines and 1 Rule for Responsive Images <\/a>bonnes pratiques et conseils utiles pour une strat\u00e9gie d’images responsive pour les sites optimis\u00e9s mobile et tablette<\/p>\n

#Navigateur<\/p>\n

Blink: A rendering engine for the Chromium project<\/a> vous avez difficilement pu passer \u00e0 c\u00f4t\u00e9 cette semaine, Chrome fork webkit pour cr\u00e9er un nouveau moteur de rendu appel\u00e9 \u00ab\u00a0blink\u00a0\u00bb<\/p>\n

Inspiration<\/h2>\n

#Typographie<\/p>\n

Urban Type Collection<\/a> une collection de photos de lettres prises dans la rue sur diff\u00e9rents panneaux, affiches, etc<\/p>\n

#Caf\u00e9<\/p>\n

rainycafe.com<\/a> des \u00e9tudes montrent que que le bruits ambiants boostent la cr\u00e9ativit\u00e9, ce petit site propose des bruits de pluie et de caf\u00e9<\/p>\n

#Comic Book<\/p>\n

Comic Book Illustrations Into the Real World <\/a>des illustrations g\u00e9antes qui interagissent avec leur dessinateur, visuellement tr\u00e8s sympa<\/p>\n

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

#Typographie<\/p>\n

Sketchbook Inspiration <\/a>une tr\u00e8s jolie vid\u00e9o de tra\u00e7age de lettres \u00e0 l\u2019encre<\/p>\n

#CSS<\/p>\n

distancetomars.com <\/a>la distance de la terre \u00e0 mars en pixel, une petite exp\u00e9rience tr\u00e8s sympa<\/p>\n

Et s’il devait n’en rester qu’un ?<\/h2>\n

Poisson d\u2019avril oblige cette semaine le lien qu’il ne fallait pas manquer est un clin d’oeil nostalgique aux d\u00e9buts du web avec un th\u00e8me Bootstrap Geocity like<\/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.Malgr\u00e9 les poissons d’avril de d\u00e9but de semaine, encore une semaine riche en tutoriels CSS, ressources utiles notamment si vous \u00eates fans d\u2019ic\u00f4nes et\u00a0 de \u00ab\u00a0launch icon\u00a0\u00bb iOS, quelques outils pour vous faciliter le rythme vertical en typographie et action Photoshop et des articles de fond sur le vol d’article, la posture de vos coll\u00e8gues en r\u00e9union illustr\u00e9 par des peluches, de …<\/p>\n","protected":false},"author":3,"featured_media":1420,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1419","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #56 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Media queries dans le SVG, masques clip et clip-path CSS, ic\u00f4nes \u00e0 t\u00e9l\u00e9charger et rythme vertical en typographie, ergonomie, images en responsive webdesign, comic books et inspiration en typographie\" \/>\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-56\/\" \/>\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 #56 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Media queries dans le SVG, masques clip et clip-path CSS, ic\u00f4nes \u00e0 t\u00e9l\u00e9charger et rythme vertical en typographie, ergonomie, images en responsive webdesign, comic books et inspiration en typographie\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/\" \/>\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-04-05T06:34:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-04-05T06:35:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/04\/pixeletcode56.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=\"@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-56\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/\",\"name\":\"Des pixels et du code #56 - 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-56\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixeletcode56.jpg\",\"datePublished\":\"2013-04-05T06:34:07+00:00\",\"dateModified\":\"2013-04-05T06:35:30+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Media queries dans le SVG, masques clip et clip-path CSS, ic\u00f4nes \u00e0 t\u00e9l\u00e9charger et rythme vertical en typographie, ergonomie, images en responsive webdesign, comic books et inspiration en typographie\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixeletcode56.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixeletcode56.jpg\",\"width\":700,\"height\":200,\"caption\":\"Des pixels et du code #56\"},{\"@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 #56 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Media queries dans le SVG, masques clip et clip-path CSS, ic\u00f4nes \u00e0 t\u00e9l\u00e9charger et rythme vertical en typographie, ergonomie, images en responsive webdesign, comic books et inspiration en typographie","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-56\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #56 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Media queries dans le SVG, masques clip et clip-path CSS, ic\u00f4nes \u00e0 t\u00e9l\u00e9charger et rythme vertical en typographie, ergonomie, images en responsive webdesign, comic books et inspiration en typographie","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2013-04-05T06:34:07+00:00","article_modified_time":"2013-04-05T06:35:30+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2013\/04\/pixeletcode56.jpg","type":"image\/jpeg"}],"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-56\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/","name":"Des pixels et du code #56 - 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-56\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixeletcode56.jpg","datePublished":"2013-04-05T06:34:07+00:00","dateModified":"2013-04-05T06:35:30+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Media queries dans le SVG, masques clip et clip-path CSS, ic\u00f4nes \u00e0 t\u00e9l\u00e9charger et rythme vertical en typographie, ergonomie, images en responsive webdesign, comic books et inspiration en typographie","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-56\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixeletcode56.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2013\/04\/pixeletcode56.jpg","width":700,"height":200,"caption":"Des pixels et du code #56"},{"@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\/1419","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=1419"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1419\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1420"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}