{"id":1057,"date":"2012-12-20T20:00:28","date_gmt":"2012-12-20T18:00:28","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=1057"},"modified":"2013-06-01T19:31:48","modified_gmt":"2013-06-01T17:31:48","slug":"des-pixels-et-du-code-41","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/","title":{"rendered":"Des pixels et du code #41"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p dir=\"ltr\">Peut-\u00eatre les derniers liens avant la fin du monde, et cette semaine, de jolies collections d\u2019ic\u00f4nes, des ressources Fireworks mais aussi quelques tutoriels et astuces CSS et Sancha qui explique \u00e0 Facebook comment faire des applications en HTML5, sans oublier un script pour charger conditionnellement les ressources sur une page web.<\/p>\n<h2 dir=\"ltr\">Les tutoriels de la semaine<\/h2>\n<p>#CSS<\/p>\n<p><a href=_-3880.html>Placeholders and Overflow<\/a>, l\u2019utilisation de text-overflow:ellipsis sur les placeholders en mobile pour r\u00e9duire ce qui d\u00e9passe<\/p>\n<h2>Des ressources utiles<\/h2>\n<p>#Fireworks<\/p>\n<p><a href=_-3881.html>hellofireworks.com<\/a> un site web pleins de ressources pour Fireworks<\/p>\n<p>#Ic\u00f4nes<br \/>\n<a href=_-3882.html>The Big List of Flat Icons &amp; Icon Fonts<\/a> une collections d\u2019ic\u00f4nes gratuites et payantes pour trouver votre bonheur<\/p>\n<p>#CSS3<\/p>\n<p><a href=_-3883.html>CSS calc<\/a> un petit r\u00e9capitulatif de la propri\u00e9t\u00e9 CSS calc et ce qu\u2019on peut faire avec<\/p>\n<h2 dir=\"ltr\">Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n<p>#Mobile template<\/p>\n<p><a href=_-3884.html>Multiple-Devices<\/a> des templates minimalistes d\u2019appareils mobiles et tablettes pour pr\u00e9senter son travail<\/p>\n<p>#Ic\u00f4nes<\/p>\n<p><a href=_-3885.html>Handy icons webfont kit\u00a0<\/a> un pack d\u2019ic\u00f4nes dessin\u00e9es \u00e0 la main<\/p>\n<p>#jQuery<\/p>\n<p><a href=_-3886.html>Real-shadow<\/a> un plugin jQuery qui ajoute des effets d\u2019ombres qui suivent une lumi\u00e8re venant de la souris de l\u2019utilisateur<\/p>\n<p># Conditionnal Loading<\/p>\n<p><a href=_-3887.html>Conditionizr.com<\/a> un script qui permet de charger les ressources en fonction du navigateur en face, sympa, mais il se base sur du UA sniffing<\/p>\n<h2 dir=\"ltr\">Les articles \u00e0 lire<\/h2>\n<p>#UX<\/p>\n<p><a href=_-3888.html>Don\u2019t be lazy, use HTML label correctly<\/a> un cris du c\u0153ur qui montre que m\u00eame des gros sites comme LindekIn oublient d\u2019utiliser des labels sur des boutons radio.<\/p>\n<p><a href=_-3889.html>Best mobile sign-up form<\/a>, un retour d\u2019exp\u00e9rience sur le processus d\u2019inscription de l\u2019application \u201cPolar\u201d pour iPhone<\/p>\n<p>#HTML5 mobile<\/p>\n<p><a href=_-3890.html>The Making of Fastbook: An HTML5 Love Story <\/a>ou quand Sancha explique \u00e0 Facebook que si si on peut faire une application performante en HTML5 c\u2019est juste qu\u2019ils sont pas dou\u00e9s<\/p>\n<p>#Webdesign<\/p>\n<p><a href=_-3891.html>A Strange and Sudden Design Trend<\/a> , une rapide analyse du \u201cflat design\u201d, ce design de site \u201cplat\u201d sans effets qui semble s\u2019inspirer de l\u2019interface metro de Windows<\/p>\n<p><a href=_-3892.html>D\u00e9veloppement Web et navigation au clavier <\/a>un petit rappel et initiation \u00e0 la navigation au clavier et son importance sur un site web<\/p>\n<p>#Typographie<\/p>\n<p><a href=_-3893.html>Interactive Guide to Blog Typography,<\/a> un petit guide pratique et dynamique des diff\u00e9rentes propri\u00e9t\u00e9s applicables \u00e0 la typographie sur un site web<\/p>\n<p>#CSS3<\/p>\n<p><a href=_-3894.html>Why moving elements with translate() is better than pos:abs top\/left <\/a>une explication d\u00e9taill\u00e9e, d\u00e9mos \u00e0 l\u2019appuie, sur pourquoi il vaut mieux utiliser translate() (CSS3) que des positions pour deplacer un \u00e9l\u00e9ment avec une animation<\/p>\n<p>Et le troll fun de la semaine, <a href=_-3895.html>upgrader de l\u2019iPhone 4 au 5 gratuitement.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 12 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Peut-\u00eatre les derniers liens avant la fin du monde, et cette semaine, de jolies collections d\u2019ic\u00f4nes, des ressources Fireworks mais aussi quelques tutoriels et astuces CSS et Sancha qui explique \u00e0 Facebook comment faire des applications en HTML5, sans oublier un script pour charger conditionnellement les ressources sur une page web. Les tutoriels de la semaine #CSS Placeholders and Overflow, l\u2019utilisation de &hellip;<\/p>\n","protected":false},"author":3,"featured_media":1058,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-1057","post","type-post","status-publish","format-link","has-post-thumbnail","hentry","category-veille-liens-utiles","post_format-post-format-link"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Des pixels et du code #41 - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<meta name=\"description\" content=\"Astuces CSS pour cacl() et translate(), packs d\u2019ic\u00f4nes et de font-icon et conditionizr qui permet de charger les ressources en fonction du navigateur.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-3896.html \/>\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 #41 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Astuces CSS pour cacl() et translate(), packs d\u2019ic\u00f4nes et de font-icon et conditionizr qui permet de charger les ressources en fonction du navigateur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/\" \/>\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-20T18:00:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-06-01T17:31:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/12\/pixelcode41.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=\"2 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-41\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/\",\"name\":\"Des pixels et du code #41 - 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-41\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode41.jpg\",\"datePublished\":\"2012-12-20T18:00:28+00:00\",\"dateModified\":\"2013-06-01T17:31:48+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Astuces CSS pour cacl() et translate(), packs d\u2019ic\u00f4nes et de font-icon et conditionizr qui permet de charger les ressources en fonction du navigateur.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode41.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode41.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&#039;utilisabilit\u00e9 et l&#039;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 &amp; 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 #41 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Astuces CSS pour cacl() et translate(), packs d\u2019ic\u00f4nes et de font-icon et conditionizr qui permet de charger les ressources en fonction du navigateur.","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-41\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #41 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Astuces CSS pour cacl() et translate(), packs d\u2019ic\u00f4nes et de font-icon et conditionizr qui permet de charger les ressources en fonction du navigateur.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-12-20T18:00:28+00:00","article_modified_time":"2013-06-01T17:31:48+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/12\/pixelcode41.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/","name":"Des pixels et du code #41 - 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-41\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode41.jpg","datePublished":"2012-12-20T18:00:28+00:00","dateModified":"2013-06-01T17:31:48+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Astuces CSS pour cacl() et translate(), packs d\u2019ic\u00f4nes et de font-icon et conditionizr qui permet de charger les ressources en fonction du navigateur.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-41\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode41.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/12\/pixelcode41.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&#039;utilisabilit\u00e9 et l&#039;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 &amp; 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\/1057"}],"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=1057"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/1057\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/1058"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=1057"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=1057"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=1057"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}