{"id":627,"date":"2012-04-05T19:07:09","date_gmt":"2012-04-05T17:07:09","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=627"},"modified":"2013-06-01T19:38:32","modified_gmt":"2013-06-01T17:38:32","slug":"des-pixels-et-du-code-04","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/","title":{"rendered":"Des pixels et du code #04"},"content":{"rendered":"<div class=\"juiz-outdated-message jodpm-top\">Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div><p>Cette semaine encore une fois beaucoup de liens concernant la mobilit\u00e9, que ce soit web ou natif, mais \u00e9galement toujours et encore des sliders en CSS3, des bonnes pratiques et un peu de fun avec super mario.<\/p>\n<p>#CSS3 #Responsive<\/p>\n<p><a title=\"Responsive CSS3 Slider Without Javascript*\" href=\"http:\/\/csscience.com\/responsiveslidercss3\/ \" target=\"_blank\">Un slider responsive \u00a0en CSS3<\/a>, encore sans javascript avec les fl\u00e8ches qui vont vers l\u2019int\u00e9rieur lorsqu\u2019on le redimenssionne<\/p>\n<p>#Mobilit\u00e9<\/p>\n<p><a title=\"Taking pictures with the Camera API \u2013 part of WebAPI\" href=\"https:\/\/hacks.mozilla.org\/2012\/04\/taking-pictures-with-the-camera-api-part-of-webapi\/ \" target=\"_blank\">Une api pour prendre des photos depuis un mobile<\/a> et les envoyer sur une page web, test\u00e9 sur mon Galaxy Nexus browser natif, \u00e7a fonctionne pas mal (mais l&rsquo;image n&rsquo;est pas redimensionn\u00e9e donc d\u00e9passe du conteneur)<\/p>\n<p>#Mobile webdesign<\/p>\n<p><a href=\"http:\/\/webdesignerwall.com\/tutorials\/mobile-navigation-design-tutorial\" target=\"_blank\">Mobile Navigation Design &amp; Tutorial<\/a>\u00a0 un tutoriel pour cr\u00e9er une navigation horizontale qui se transforme en menu d\u00e9roulant sur les petits \u00e9crans.<\/p>\n<p>#Android<\/p>\n<p>4 articles \u201cbehind the sceen\u201d qui expliquent les d\u00e9cisions de design prises pour l\u2019application Android \u201cGigbeats\u201d :<\/p>\n<p><a href=\"http:\/\/blog.gigbeat.fm\/post\/18905196533\/gigbeat-design-decision-1-event-screen\" target=\"_blank\">GigBeat Design Decision 1: Event screen<\/a><\/p>\n<p><a href=\"http:\/\/blog.gigbeat.fm\/post\/19000677366\/gigbeat-design-decision-2-ics\" target=\"_blank\">GigBeat Design Decision 2: ICS <\/a><\/p>\n<p><a href=\"http:\/\/blog.gigbeat.fm\/post\/19293467267\/gigbeat-design-decision-3-tablet-ui\" target=\"_blank\">GigBeat Design Decision 3: Tablet UI\u00a0<\/a><\/p>\n<p><a href=\"http:\/\/blog.gigbeat.fm\/post\/19735073656\/gigbeat-design-decision-4-empty-screens\" target=\"_blank\">GigBeat Design Decision 4: Empty Screens <\/a><\/p>\n<p>#FUN<\/p>\n<p>Un super mario anim\u00e9 via media queries : <a href=\"http:\/\/btraut.com\/labs\/mediamario\/\">http:\/\/btraut.com\/labs\/mediamario\/<\/a><\/p>\n<p>#W3C<\/p>\n<p><a href=\"http:\/\/w3fools.com\/\" target=\"_blank\">W3fools<\/a>, un site qui explique pourquoi il ne faut pas utiliser le site w3school comme r\u00e9f\u00e9rence<br \/>\n#Webdesign<\/p>\n<p><a href=\"http:\/\/startupsthisishowdesignworks.com\/  \" target=\"_blank\">Startups, this is how design works, <\/a>un guide pratique sur ce qu\u2019est vraiment un designer, \u00e0 l\u2019usage des startups.<\/p>\n<p>#Font<\/p>\n<p>Chriss Coyer a rassembl\u00e9 <a href=\"http:\/\/css-tricks.com\/flat-icons-icon-fonts\/\" target=\"_blank\">une tr\u00e8s belle liste de fonts icons utilisables pour vos projets<\/a>.<\/p>\n<p>#Font #accessibilit\u00e9<\/p>\n<p>J\u2019ai profite pour vous mettre le lien vers l\u2019article de Rapha\u00ebl Goetter sur <a href=\"http:\/\/blog.goetter.fr\/post\/18017100624\/icones-font-face-et-accessibilite\" target=\"_blank\">les font icons et l\u2019accessibilit\u00e9<\/a><\/p>\n<p>#SVG<\/p>\n<p><a href=\"http:\/\/simurai.com\/post\/20251013889\/svg-stacks\" target=\"_blank\">Cr\u00e9er des sprites SVG en superposant les diff\u00e9rents calques<\/a> et changeant leur visibilit\u00e9, ne fonctionne que sous Firefox pour le moment.<\/p>\n<p>#Job<\/p>\n<p><a href=\"http:\/\/www.blog-emploi.com\/index.php\/post\/2012\/04\/03\/debat-du-mois-jeunes-diplomes-expatries-pour-trouver-un-emploi \" target=\"_blank\">\u201c Ils ont trouv\u00e9 leur premier travail\u2026 \u00e0 l\u2019\u00e9tranger \u201c <\/a>un retour d\u2019exp\u00e9rience sur les jeunes qui ont leur premi\u00e8re exp\u00e9rience \u00e0 l\u2019\u00e9tranger, avec des petits bouts de moi dedans.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu&rsquo;il ne soit plus \u00e0 jour.Cette semaine encore une fois beaucoup de liens concernant la mobilit\u00e9, que ce soit web ou natif, mais \u00e9galement toujours et encore des sliders en CSS3, des bonnes pratiques et un peu de fun avec super mario. #CSS3 #Responsive Un slider responsive \u00a0en CSS3, encore sans javascript avec les fl\u00e8ches qui vont vers l\u2019int\u00e9rieur lorsqu\u2019on le redimenssionne #Mobilit\u00e9 Une api pour prendre &hellip;<\/p>\n","protected":false},"author":3,"featured_media":630,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"link","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-627","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 v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Des pixels et du code #04 - par St\u00e9phanie Walter - UX Researcher &amp; Designer<\/title>\n<meta name=\"description\" content=\"Une api pour prendre des photos depuis un mobile, des font icons, des SVG superpos\u00e9s en sprite, un slider en CSS3 sans JavaScript cette semaine.\" \/>\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-04\/\" \/>\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 #04 - par St\u00e9phanie Walter - UX Researcher &amp; Designer\" \/>\n<meta property=\"og:description\" content=\"Une api pour prendre des photos depuis un mobile, des font icons, des SVG superpos\u00e9s en sprite, un slider en CSS3 sans JavaScript cette semaine.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/\" \/>\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-04-05T17:07:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-06-01T17:38:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/04\/pixelsetcode041.jpg\" \/>\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\/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=\"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-04\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/\",\"name\":\"Des pixels et du code #04 - 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-04\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/04\/pixelsetcode041.jpg\",\"datePublished\":\"2012-04-05T17:07:09+00:00\",\"dateModified\":\"2013-06-01T17:38:32+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Une api pour prendre des photos depuis un mobile, des font icons, des SVG superpos\u00e9s en sprite, un slider en CSS3 sans JavaScript cette semaine.\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/04\/pixelsetcode041.jpg\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/04\/pixelsetcode041.jpg\",\"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\":{\"@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 &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\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Des pixels et du code #04 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Une api pour prendre des photos depuis un mobile, des font icons, des SVG superpos\u00e9s en sprite, un slider en CSS3 sans JavaScript cette semaine.","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-04\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #04 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Une api pour prendre des photos depuis un mobile, des font icons, des SVG superpos\u00e9s en sprite, un slider en CSS3 sans JavaScript cette semaine.","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-04-05T17:07:09+00:00","article_modified_time":"2013-06-01T17:38:32+00:00","og_image":[{"width":630,"height":180,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/04\/pixelsetcode041.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/","name":"Des pixels et du code #04 - 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-04\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/04\/pixelsetcode041.jpg","datePublished":"2012-04-05T17:07:09+00:00","dateModified":"2013-06-01T17:38:32+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Une api pour prendre des photos depuis un mobile, des font icons, des SVG superpos\u00e9s en sprite, un slider en CSS3 sans JavaScript cette semaine.","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-04\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/04\/pixelsetcode041.jpg","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/04\/pixelsetcode041.jpg","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":{"@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 &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\/https:\/\/bsky.app\/profile\/stephaniewalter.bsky.social"]}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/627","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=627"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/627\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/630"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=627"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=627"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=627"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}