{"id":762,"date":"2012-06-14T20:57:09","date_gmt":"2012-06-14T18:57:09","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=762"},"modified":"2012-06-14T20:57:09","modified_gmt":"2012-06-14T18:57:09","slug":"des-pixels-et-du-code-14","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/","title":{"rendered":"Des pixels et du code #14"},"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>Avec la sortie d&rsquo;iOs6, une semaine charg\u00e9e en liens iOS, mobilit\u00e9 et responsive design, retina et high resolution, de la transposition de jeux HTML5 vers le natif et des scripts pour capturer les touch events, mais \u00e9galement quelques articles qui traient de SVG, Fireworks et WordPress.<\/p>\n<p>Les tutoriels de la semaine<\/p>\n<p>#Fireworks<\/p>\n<p><a href=_-4122.html target=\"_blank\">Developing A Design Workflow In Adobe Fireworks<\/a> du wireframe paper au design sur Fireworks, un article qui met en avant les possibilit\u00e9s de Fireworks pour le design et wireframing de site web<\/p>\n<p>#jQuery<\/p>\n<p><a href=_-4123.html>Building a List\/Grid View Switcher with jQuery<\/a> un tutoriel pour cr\u00e9er une liste d\u2019article qui se transforme en grille et vice versa avec du jQuery<\/p>\n<p>#Mustache #RWD<\/p>\n<p><a href=_-4124.html target=\"_blank\">Templating with Detector &amp; Mustache Tutorial<\/a><\/p>\n<p>Des ressources \u00a0utiles<\/p>\n<p>#RWD #mobilefirst<\/p>\n<p><a href=_-4125.html>Harvey: A Second Face for Your JavaScript<\/a> , un retour d\u2019experience sur le mobile first et la m\u00e9thodologie et scripts utilis\u00e9s pour le site <a href=_-4126.html>walkaboutnyc.com<\/a> avec en cadeau<a href=_-4127.html> Harvey<\/a>, un script pour executer certains JavaScript en fonction du type d\u2019appareil, de la taille de l\u2019\u00e9cran, la r\u00e9solution, l\u2019orientation, etc<\/p>\n<p>#Touch<\/p>\n<p><a href=_-4128.html>11 Multi touch and touch events javascript libraries<\/a> : un article qui rassemble une collection de 11 librairies pr\u00eates \u00e0 l\u2019emploi pour g\u00e9rer les \u00e9v\u00e8nements de touch en mobilit\u00e9<\/p>\n<p>#Densite #Mobile<\/p>\n<p><a href=_-4129.html>Designing (and converting) for multiple mobile densities<\/a>, une tr\u00e8s belle explication du retina, xhdpi, de la densit\u00e9 sur les \u00e9crans, ainsi qu\u2019un outil et un diagram pour comprendre et passer facilement d\u2019une densit\u00e9 \u00e0 une autre.<\/p>\n<p>#Retina<\/p>\n<p><a href=_-4130.html>Mobile Web in High Resolution<\/a> utiliser la propri\u00e9t\u00e9 spear radius de box-shadow pour cr\u00e9er des \u201cfaux\u201d bords pour cr\u00e9er de boutons dont le bord reste de 1px sur \u00e9cran retina comme \u00e9cran normal.<\/p>\n<p>Les outils \u00a0et plugins pour vous faciliter la vie<\/p>\n<p>#jQuery<\/p>\n<p><a href=_-4131.html>Scrollpath<\/a>, un plugin jQuery pour d\u00e9finir un chemin personnalis\u00e9 lorsque l\u2019utilisateur scroll sur la page. <a href=_-4132.html>La d\u00e9mo<\/a> est plus parlante que mon explication.<\/p>\n<p>#Placeholder<\/p>\n<p><a href=_-4133.html>Fixiejs<\/a> , un script qui parse le document et va automatiquement ajouter du faux texte dans vos documents HTML, fini le copier\/coller de Lorem Ipsum.<\/p>\n<p>#HTML5 game #Application native<\/p>\n<p><a href=_-4134.html>Cocoon.js<\/a> , \u00a0une librairie pour transformer les jeux HTML5 en applications natives Android et iOs<\/p>\n<p>Les articles \u00e0 lire<\/p>\n<p>#Android<\/p>\n<p><a href=_-4135.html>Android&rsquo;s one killer feature that trumps the iPhone <\/a>, iOs6 sors cette semaine, mais Android a toujours une longueur d\u2019avance pour ce qui est des notifications utilisateur, notament celles directement embarqu\u00e9es dans la barre de statut de l\u2019appareil.<\/p>\n<p>#UX<\/p>\n<p><a href=_-4136.html>Focus on the right-hand side<\/a>, ou pourquoi les sites ont tendance \u00e0 placer les barres lat\u00e9rales, le panier, ou encore les boutons d\u2019ajout au panier du c\u00f4t\u00e9 droit de l\u2019\u00e9cran\/du site web pour un utilisateur<\/p>\n<p>#SVG<\/p>\n<p><a href=_-4137.html>SVG, l\u2019ami du Responsive Web Design<\/a>, un article qui d\u00e9taille l\u2019utilisation du SVG pour faciliter les sites responsive, ainsi que des bonnes pratiques pour les g\u00e9n\u00e9rer facilement avec Illustrator<\/p>\n<p>#iOs<\/p>\n<p><a href=_-4138.html>What iOS 6 Mobile Safari Offers Front End Devs<\/a> , les nouveaut\u00e9s d\u2019iOs6 qui vont avoir un impact sur les webdesigners et int\u00e9grateurs : support de &lt;input type = submit&gt;, du debug \u00e0 distance, des filtes CSS et autres joyeuset\u00e9s !<\/p>\n<p>#Webdesign<\/p>\n<p><a href=_-4139.html>30 Common Mistakes In Web Design<\/a> 30 erreurs souvent commises en Webdesign et illustr\u00e9es<\/p>\n<p>#HigResolution<\/p>\n<p><a href=_-4140.html target=\"_blank\">How to Prepare for The High-Resolution Web <\/a>retina, font-icon, canvas, responsive, vecteurs, autant de fa\u00e7ons pour se pr\u00e9parer au web en haute r\u00e9solution expliqu\u00e9s dans cet article.<\/p>\n<p>#Images<\/p>\n<p><a href=_-4141.html>Product Graphics: 6 Techniques To Make Images More Informative<\/a> , 6 exemples illustr\u00e9s pour enrichir les images d\u2019un site web et les rendre plus informatives et utiles \u00e0 l\u2019utilisateur<\/p>\n<p>#WordPress<\/p>\n<p><a href=_-4142.html>An in depth understanding of wordpress-hooks\/<\/a> , un article pour comprendre la diff\u00e9rence entre les actions et les filtres, savoir o\u00f9 les trouver et comment les utiliser correctement<\/p>\n<p>&nbsp;<\/p>\n<p>Un dernier clique ? Pourquoi pas <a href=_-4143.html>mon conseil Adobe Photoshop CS6 pour fusionner des trac\u00e9s et des formes<\/a> comme sur Illustrator ?<\/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.Avec la sortie d&rsquo;iOs6, une semaine charg\u00e9e en liens iOS, mobilit\u00e9 et responsive design, retina et high resolution, de la transposition de jeux HTML5 vers le natif et des scripts pour capturer les touch events, mais \u00e9galement quelques articles qui traient de SVG, Fireworks et WordPress. Les tutoriels de la semaine #Fireworks Developing A Design Workflow In Adobe Fireworks du wireframe paper &hellip;<\/p>\n","protected":false},"author":3,"featured_media":763,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-762","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 #14 - 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=\"Des liens utiles iOS6, concernant mobilit\u00e9 et responsive design, retina et high resolution, Fireworks et WordPress ainsi qu&#039;SVG et HTML5\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=_-4144.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 #14 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Des liens utiles iOS6, concernant mobilit\u00e9 et responsive design, retina et high resolution, Fireworks et WordPress ainsi qu&#039;SVG et HTML5\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/\" \/>\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-06-14T18:57:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/06\/pixelandcode14.png\" \/>\n\t<meta property=\"og:image:width\" content=\"630\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\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=\"@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-14\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/\",\"name\":\"Des pixels et du code #14 - 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-14\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixelandcode14.png\",\"datePublished\":\"2012-06-14T18:57:09+00:00\",\"dateModified\":\"2012-06-14T18:57:09+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Des liens utiles iOS6, concernant mobilit\u00e9 et responsive design, retina et high resolution, Fireworks et WordPress ainsi qu'SVG et HTML5\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixelandcode14.png\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixelandcode14.png\",\"width\":630,\"height\":180},{\"@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 #14 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Des liens utiles iOS6, concernant mobilit\u00e9 et responsive design, retina et high resolution, Fireworks et WordPress ainsi qu'SVG et HTML5","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-14\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #14 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Des liens utiles iOS6, concernant mobilit\u00e9 et responsive design, retina et high resolution, Fireworks et WordPress ainsi qu'SVG et HTML5","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-06-14T18:57:09+00:00","og_image":[{"width":630,"height":180,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/06\/pixelandcode14.png","type":"image\/png"}],"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-14\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/","name":"Des pixels et du code #14 - 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-14\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixelandcode14.png","datePublished":"2012-06-14T18:57:09+00:00","dateModified":"2012-06-14T18:57:09+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Des liens utiles iOS6, concernant mobilit\u00e9 et responsive design, retina et high resolution, Fireworks et WordPress ainsi qu'SVG et HTML5","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-14\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixelandcode14.png","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixelandcode14.png","width":630,"height":180},{"@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\/762"}],"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=762"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/762\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/763"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}