{"id":775,"date":"2012-06-28T20:56:42","date_gmt":"2012-06-28T18:56:42","guid":{"rendered":"http:\/\/blog.stephaniewalter.fr\/?p=775"},"modified":"2012-06-28T20:56:42","modified_gmt":"2012-06-28T18:56:42","slug":"des-pixels-et-du-code-16","status":"publish","type":"post","link":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/","title":{"rendered":"Des pixels et du code #16"},"content":{"rendered":"
Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu'il ne soit plus \u00e0 jour.<\/div>

Une semaine tr\u00e8s charg\u00e9es en liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress<\/p>\n

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

#CSS3<\/p>\n

Creating Custom Form Checkboxes and Radio Buttons with Just CSS<\/a>! utiliser appearance:none; pour personnaliser le style des checkbox et des boutons radio<\/p>\n

Making Awesome, Animated CSS3 Loading Bars with SVG Backgrounds<\/a> , un tutoriel utilisant des gradiants CSS3 et du SVG \u00a0pour cr\u00e9er des bars de chargement anim\u00e9es<\/p>\n

#SVG<\/p>\n

Using SVG clipPath<\/a> , ou comment utiliser la propri\u00e9t\u00e9 clipPath pour cr\u00e9er des masques en SVG<\/p>\n

#jQueryMobile<\/p>\n

11 Cool JQuery Mobile Tutorials <\/a>11 tutoriels jQueryMobile pour vous aider \u00e0 d\u00e9buter et vous donner un peu d\u2019inspiration<\/p>\n

#Accessibility<\/p>\n

WordPress and accessibility: ensuring access to the largest pool of readers<\/a> \u00a0une liste de 6 points faciles \u00e0 mettre en place pour rendre votre th\u00e8me WordPress plus accessibl\u00e9<\/p>\n

#Fireworks<\/p>\n

Create Interactive Prototypes With Adobe Fireworks <\/a>, un prototype peut permettre au client de se faire une id\u00e9e plus pr\u00e9cise d\u2019un site fini. Adobe Fireworks permet de cr\u00e9er des prototypes et des les exporter facilement dans un format HTML fonctionnel (plusieurs pages, \u00e9tat au survol).<\/p>\n

Des ressources \u00a0utiles<\/p>\n

#Code<\/p>\n

Codepen.io,<\/a> une sorte de dribbble, mais pour poster du code<\/p>\n

#Responsive<\/p>\n

Flexiblenavigation<\/a>, une tentative de cr\u00e9ation d\u2019une navigation responsive avec du JavaScript et des media queries<\/p>\n

#Icons<\/p>\n

Iconmonstr.com<\/a> , un site rassemblant des icones simples et de qualit\u00e9 pour vos projets<\/p>\n

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

#Typographie<\/p>\n

The 10 Best Script and Handwritten Google Web Fonts<\/a> , 10 polices d\u2019\u00e9criture de type script et \u00e9crites \u00e0 la main, libre d\u2019utilisateur sur Google Web fonts.<\/p>\n

#Devis #HTML5
\nThe html5 invoice<\/a> , un g\u00e9n\u00e9rateur rapide de devis en HTML5, pr\u00eats \u00e0 \u00eatre imprim\u00e9s, disponible n\u2019importe o\u00f9.<\/p>\n

#jQuery<\/p>\n

30 Best jQuery Popup Window Dialog Box Example<\/a>, au cas o\u00f9 vous n\u2019auriez toujours pas trouv\u00e9 votre bonheur dans la multitide de modales jQuery qui existent, cet article vous en pr\u00e9sente 30, il ne vous reste plus qu\u2019\u00e0 faire votre choix.<\/p>\n

#WordPress<\/p>\n

Wpapptouch<\/a>, un plugin et un th\u00e8me pour donner un look and feel d\u2019application native iOS \u00e0 votre WordPress<\/p>\n

#WordPress theme<\/p>\n

Boiler<\/a> , un \u201cboiler\u201d ou \u201cblank\u201d them responsive, optimis\u00e9 mobile qui peut servir de base \u00e0 un projet WordPress<\/p>\n

#PNG<\/p>\n

Tinypng.org<\/a> un petit site pour r\u00e9duire la taille de vos PNG24 tout en pr\u00e9servant l\u2019alpha tansparence<\/p>\n

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

#ergonomie<\/p>\n

Les boutons de validation en voie de disparition ?!<\/a> un tr\u00e8s bon r\u00e9sum\u00e9 sur cette tendance \u00e0 la disparition des boutons d\u2019action dans les interfaces et quelques bonnes pratiques pour que l\u2019utilisateur puisse tout de m\u00eame s\u2019y retrouver<\/p>\n

#Php<\/p>\n

50+ PHP Tricks and Tips for Beginners & Developers<\/a> , performances, bonnes pratiques, etc., 50 conseils, trucs et astuces pour les d\u00e9veloppeurs d\u00e9butants, et confirm\u00e9s en PHP<\/p>\n

#Responsive<\/p>\n

Notes to an Agency Starting Their First Responsive Web Project<\/a>, les conseils de Chris Coyier \u00e0 une agence web qui veut se lancer dans son premier design et code de site responsive<\/p>\n

#Usability<\/p>\n

Non hover<\/a>, une id\u00e9e int\u00e9ressante, celle de penser son site sans fonctionnalit\u00e9 de survol \u00e0 la souris, pour permettre d\u2019adapter plus facilement aux mobiles par la suite (et quelques conseils en terme d\u2019ergonomie pour y arriver)<\/p>\n

#HTML5<\/p>\n

Using jQuery to leverage HTML5 data attributes <\/a>HTML5 permet de cr\u00e9er facilement des attributs suppl\u00e9mentaires qu\u2019il est possible de cibler en JavaScript, ces \u00e9l\u00e9ments sont facilement r\u00e9cup\u00e9rables en jQuery. Cet article propose un cas concret d\u2019utilisation d\u00e9taill\u00e9.<\/p>\n

#WordPress<\/p>\n

13 Built-In WordPress Options that Online Publishers Need to Know \u2026<\/a> saviez vous que WordPress permet d\u2019ins\u00e9rer un tweet ou une vid\u00e9o youtube simplement en collant l\u2019url ? C\u2019est un des 13 astuces que vous d\u00e9couvrirez dans cet article<\/p>\n

#Webdesign<\/p>\n

Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors<\/a> , quelques conseils et astuces sur la fa\u00e7on d\u2019utiliser des ombres dans un design pour qu\u2019il reste r\u00e9aliste \u00e0 l\u2019oeil : 90\u00b0, 30\/40% d\u2019opacit\u00e9, etc.<\/p>\n

Et for the fun un petit site qui r\u00e9pertorie des \u201cblagues\u201d si on peut appeler \u00e7a comme \u00e7a en CSS : CSS humor<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Ce contenu a \u00e9t\u00e9 r\u00e9dig\u00e9 il y a 14 ans. Il se peut qu’il ne soit plus \u00e0 jour.Une semaine tr\u00e8s charg\u00e9es en liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress Les tutoriels de la semaine #CSS3 Creating Custom Form Checkboxes and Radio Buttons with Just CSS! utiliser appearance:none; pour personnaliser le style des checkbox et des boutons radio Making Awesome, Animated CSS3 Loading Bars with SVG Backgrounds …<\/p>\n","protected":false},"author":3,"featured_media":776,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[],"class_list":["post-775","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-veille-liens-utiles"],"yoast_head":"\nDes pixels et du code #16 - par St\u00e9phanie Walter - UX Researcher & Designer<\/title>\n<meta name=\"description\" content=\"Des liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress\" \/>\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-16\/\" \/>\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 #16 - par St\u00e9phanie Walter - UX Researcher & Designer\" \/>\n<meta property=\"og:description\" content=\"Des liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/\" \/>\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-28T18:56:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/06\/pixeletdoce16.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=\"@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=\"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-16\/\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/\",\"name\":\"Des pixels et du code #16 - 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-16\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixeletdoce16.png\",\"datePublished\":\"2012-06-28T18:56:42+00:00\",\"author\":{\"@id\":\"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf\"},\"description\":\"Des liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/#primaryimage\",\"url\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixeletdoce16.png\",\"contentUrl\":\"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixeletdoce16.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'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\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?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 #16 - par St\u00e9phanie Walter - UX Researcher & Designer","description":"Des liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress","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-16\/","og_locale":"fr_FR","og_type":"article","og_title":"Des pixels et du code #16 - par St\u00e9phanie Walter - UX Researcher & Designer","og_description":"Des liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress","og_url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/","og_site_name":"St\u00e9phanie Walter - Senior UX designer, experte mobile, conf\u00e9rences et articles.","article_published_time":"2012-06-28T18:56:42+00:00","og_image":[{"width":630,"height":180,"url":"https:\/\/stephaniewalter.design\/wp-content\/blogs.dir\/2\/files\/2012\/06\/pixeletdoce16.png","type":"image\/png"}],"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":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/","url":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/","name":"Des pixels et du code #16 - 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-16\/#primaryimage"},"image":{"@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/#primaryimage"},"thumbnailUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixeletdoce16.png","datePublished":"2012-06-28T18:56:42+00:00","author":{"@id":"https:\/\/stephaniewalter.design\/fr\/#\/schema\/person\/643a9e5afcb1e550b6f4dca290fbf4cf"},"description":"Des liens SVG, CSS3, et mobilit\u00e9 pour cette 16em \u00e9dition des pixels et du code, mais aussi beaucoup de nouveaut\u00e9s WordPress","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/stephaniewalter.design\/fr\/blog\/des-pixels-et-du-code-16\/#primaryimage","url":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixeletdoce16.png","contentUrl":"https:\/\/stephaniewalter.design\/fr\/files\/2012\/06\/pixeletdoce16.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'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\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bc37c927707e853de94250cad44e4ffc13bee34ad9eda7a69651ca5ee19948b?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\/775","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=775"}],"version-history":[{"count":0,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/posts\/775\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media\/776"}],"wp:attachment":[{"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/media?parent=775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/categories?post=775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stephaniewalter.design\/fr\/wp-json\/wp\/v2\/tags?post=775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}