{"id":962,"date":"2012-10-25T20:00:52","date_gmt":"2012-10-25T18:00:52","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=962"},"modified":"2012-10-26T13:53:26","modified_gmt":"2012-10-26T11:53:26","slug":"des-pixels-et-du-code-33","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/","title":{"rendered":"Des pixels et du code #33"},"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\">Une semaine de liens qui devrait plaire aux amateurs d&rsquo;outils et autres plugins puisqu&rsquo;il y a cette semaine \u00e9norm\u00e9ment de nouvelles ressources pour WordPress, Photoshop, un comparaison du rendu SVG des navigateurs, un outil pour cr\u00e9er des animations sur un site et toujours des outils pour faciliter le responsive webdesign.<\/p>\n<h2 dir=\"ltr\">Les tutoriels de la semaine<\/h2>\n<p>#RWD<\/p>\n<p><a href=_-3962.html>Grids, flexibility and responsiveness<\/a> un concentr\u00e9 de bonnes pratiques pour cr\u00e9er une grille responsive pour un site web<\/p>\n<p>#CSS<\/p>\n<p><a href=_-3963.html>A classless class\u2014on using more classes in your HTML<\/a> s\u00e9lecteur adjacent, d\u2019enfant, et toutes ces techniques CSS parfois oubli\u00e9es pour selectionner des \u00e9l\u00e9ments dans le HTML sans avoir recours \u00e0 des classes ou IDs<\/p>\n<p><a href=_-3964.html>UICSS<\/a> un petit cours d\u2019introduction au CSS bien sympa<\/p>\n<p>#HTML5<\/p>\n<p><a href=_-3965.html>Constraint Validation: Native Client Side Validation for Web Forms \u00a0<\/a>un tutoriel tr\u00e8s complet sur la validation des formulaires HTML5 dans le navigateur sans forcement passer par un JavaScript externe<\/p>\n<p>#CSS3<\/p>\n<p><a href=_-3966.html>6 Cool Image Captions With CSS3<\/a> six diff\u00e9rents effets d\u2019affichage de texte au survol d\u2019une miniature d\u2019image cr\u00e9\u00e9s uniquement en CSS3<\/p>\n<p>#jQuery<\/p>\n<p><a href=_-3967.html>jQuery Tutorials for Designers<\/a>, de petits tutoriels simples pour cr\u00e9er des effets basiques en jQuery<\/p>\n<h2 dir=\"ltr\">Des ressources utiles<\/h2>\n<p>#PSD<\/p>\n<p><a href=_-3968.html>Retro Portfolio \u2013 Full PSD <\/a>pack un pack de PSD pour cr\u00e9er un theme WordPress retro, m\u00eame si je ne suis pas forcement tr\u00e8s fan du style \u201cretro\u201d, c\u2019est plut\u00f4t bien fait<\/p>\n<p>#SVG<\/p>\n<p><a href=_-3969.html>Creating SVG vector graphics for maximum browser compatibility <\/a>un excellent article pour cr\u00e9er ses SVG optimis\u00e9s pour le web et tout savoir de la compabilit\u00e9 des diff\u00e9rents effets et gradients illustrator<\/p>\n<p>#Touch<\/p>\n<p><a href=_-3970.html>Touch gesture icons <\/a>des icones de geste au toucher \u00e0 t\u00e9l\u00e9charger<\/p>\n<p>#Mobile guidelines<\/p>\n<p><a href=_-3971.html>UI Guidelines for mobile and tablet web app design<\/a> , une liste des diff\u00e9rents guides de bonne pratique par constructeur pour le design d\u2019applications mobiles et tablettes<\/p>\n<p>#WordPress<\/p>\n<p><a href=_-3972.html>wpfill.me<\/a> un site qui vous permet de g\u00e9n\u00e9rer du faux contenu, optimis\u00e9 pour l\u2019\u00e9diteur de WordPress. Plus d\u2019excuse pour ne plus tester le contenu des templates que vous cr\u00e9ez !!<\/p>\n<p>#Veille<\/p>\n<p><a href=_-3973.html>sidebar.io<\/a> des liens int\u00e9ressants choisis \u00e0 la main tous les jours pour votre veille<\/p>\n<p>#Twitter #Animation<\/p>\n<p><a href=_-3974.html>Visibletweets.com<\/a> un petit site qui vous permet de visualiser les tweets d\u2019un hastag ou d\u2019une personne avec des transitions CSS3<\/p>\n<p>#Framework<\/p>\n<p><a href=_-3975.html>Compare, <\/a>un tableau de comparaison entre Bootstrap, Foundation et \u00a0Skeleton<\/p>\n<h2 dir=\"ltr\">Les outils \u00a0et plugins pour vous faciliter la vie<\/h2>\n<p>#WYSIWYG<\/p>\n<p><a href=_-3976.html>Fantastic WYSIWYG editor on jQuery<\/a> un \u00e9diteur WYSIWYG en jQuery propre<\/p>\n<p>#jQuery Animation<\/p>\n<p><a href=_-3977.html>Spritely.net<\/a> un plugin jQuery pour cr\u00e9er des animations d\u2019arri\u00e8re plan et ajouter un peu de mouvement \u00e0 vos sites (quelques exemples sympas dans <a href=_-3978.html>la gallerie<\/a>)<\/p>\n<p>#Photoshop<\/p>\n<p><a href=_-3979.html>Cutandslice.me<\/a> un plugin qui permet d\u2019exporter aux diff\u00e9rents formats iOS, Android ou desktop les assets d\u2019un fichier Photoshop, pour peu qu\u2019ils soient correctement rang\u00e9s<\/p>\n<p>#RWD<\/p>\n<p><a href=_-3980.html>Viewport-resizer<\/a>un autre outil de bookmarklet qui permet de tester ses sites sur plusieurs tailles et offre la possibilit\u00e9 d\u2019entrer une valeur personnalis\u00e9e<\/p>\n<h2 dir=\"ltr\">Les articles \u00e0 lire<\/h2>\n<p>#CSS3<\/p>\n<p><a href=_-3981.html>Makisu<\/a> une petite exp\u00e9rience de menu d\u00e9roulant en CSS3 3D, impressionnant et sympa, m\u00eame si on se voit mal l\u2019utiliser en production sur un site<\/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.Une semaine de liens qui devrait plaire aux amateurs d&rsquo;outils et autres plugins puisqu&rsquo;il y a cette semaine \u00e9norm\u00e9ment de nouvelles ressources pour WordPress, Photoshop, un comparaison du rendu SVG des navigateurs, un outil pour cr\u00e9er des animations sur un site et toujours des outils pour faciliter le responsive webdesign. Les tutoriels de la semaine #RWD Grids, flexibility and responsiveness un concentr\u00e9 &hellip;<\/p>\n","protected":false},"author":3,"featured_media":964,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-962","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"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 #33 - 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=\"Un outil pour g\u00e9n\u00e9rer du faux texte pour WordPress, un plugin Photoshop pour l&#039;export d&#039;image sur mobile, des ic\u00f4nes de geste pour mobile et autres ressources\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-3982.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 #33 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Un outil pour g\u00e9n\u00e9rer du faux texte pour WordPress, un plugin Photoshop pour l&#039;export d&#039;image sur mobile, des ic\u00f4nes de geste pour mobile et autres ressources\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/\" \/>\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-10-25T18:00:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-10-26T11:53:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/10\/pixeletcode33.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-33\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/\",\"name\":\"Des pixels et du code #33 - 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-33\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode33.jpg\",\"datePublished\":\"2012-10-25T18:00:52+00:00\",\"dateModified\":\"2012-10-26T11:53:26+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Un outil pour g\u00e9n\u00e9rer du faux texte pour WordPress, un plugin Photoshop pour l'export d'image sur mobile, des ic\u00f4nes de geste pour mobile et autres ressources\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode33.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode33.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 #33 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Un outil pour g\u00e9n\u00e9rer du faux texte pour WordPress, un plugin Photoshop pour l'export d'image sur mobile, des ic\u00f4nes de geste pour mobile et autres ressources","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-33\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #33 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Un outil pour g\u00e9n\u00e9rer du faux texte pour WordPress, un plugin Photoshop pour l'export d'image sur mobile, des ic\u00f4nes de geste pour mobile et autres ressources","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-10-25T18:00:52+00:00","article_modified_time":"2012-10-26T11:53:26+00:00","og_image":[{"width":700,"height":200,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/10\/pixeletcode33.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-33\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/","name":"Des pixels et du code #33 - 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-33\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode33.jpg","datePublished":"2012-10-25T18:00:52+00:00","dateModified":"2012-10-26T11:53:26+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Un outil pour g\u00e9n\u00e9rer du faux texte pour WordPress, un plugin Photoshop pour l'export d'image sur mobile, des ic\u00f4nes de geste pour mobile et autres ressources","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-33\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode33.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/10\/pixeletcode33.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\/962"}],"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=962"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/962\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/964"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=962"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=962"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=962"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}